前端开发开发设计每日必学之HTML新手入门详细介

1 HTML详细介绍

1.1 编码初体验,制做第1个网页页面

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf⑻">  
  5.         <title>制做我的第1个网页页面</title>  
  6.     </head>  
  7.     <body>  
  8.         <h1>Hello World</h1>  
  9.     </body>  
  10. </html>  

1.2 HTML和CSS的关联

学习培训web前端开发开发设计基本技术性必须把握:HTML、CSS、JavaScript語言。下面大家就来掌握下这3门技术性全是用来完成甚么的:
1. HTML是网页页面內容的载体。內容便是网页页面制做者放在网页页面上要想让客户访问的信息内容,能够包括文本、照片、视頻等。
2. CSS款式是主要表现。就像网页页面的外衣。例如,题目字体样式、色调转变,或为题目添加情况照片、边框等。全部这些用来更改內容外型的物品称之为主要表现。
3. JavaScript是用来完成网页页面上的殊效实际效果。如:电脑鼠标滑过弹出往下拉菜单。或电脑鼠标滑过报表的情况色调更改。也有聚焦点新闻(新闻照片)的轮换。能够这么了解,有动漫的,有互动的1般全是用JavaScript来完成的。
下面编码演试了CSS的实际效果,HTML用来表明网页页面元素,CSS让元素主要表现更丰富多彩,例如元素部位,尺寸,色调,字体样式等:

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf⑻">  
  5.         <title>Html和CSS的关联</title>  
  6.         <style type="text/css">  
  7.         h1{   
  8.             font-size:19px;   
  9.             color:#930;   
  10.             text-align:center;   
  11.         }   
  12.         </style>  
  13.     </head>  
  14.     <body>  
  15.         <h1>Hello World!</h1>  
  16.     </body>  
  17. </html>  
  18.   

(1)第8行编码,危害对话框的文本尺寸。
(2)第9行编码,危害对话框文本色调的转变。
(3)第10行,危害对话框文本垂直居中的转变。

1.3 了解HTML标识

各种各样各种各样的网页页面,这些网页页面全是由html标识构成的。下面便是1个简易的网页页面:

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf⑻">  
  5.         <title>了解html标识</title>  
  6.     </head>  
  7.   
  8.     <body>  
  9.         <h1>勇气</h1>  
  10.         <p>3年级时,我還是1个胆小如鼠的小女孩,上课几乎害怕回应老师提出的难题,害怕回应错了老师会指责我。就1直沒有这个勇气往返答老师提出的难题。院校举行的主题活动我也没勇气报名参加。</p>  
  11.         <p>到了3年级下学期时,大家班到了1节公布课,老师提出了1个很简易的难题,班里许多同学都举手了,乃至考试成绩比我差许多的,也举手了,还说着:"我来,我来。"我环顾四周了4周,就我沒有举手。</p>  
  12.         <img src="http://img.imooc.com/52b4113500018cf102000200.jpg" >  
  13.     </body>  
  14. </html>  
  15.   

实际效果以下:

剖析这个网页页面由哪些HTML构成:
(1)“勇气”是网页页面內容文章内容的题目,<h1></h1>便是题目标识,它在网页页面上的编码写成<h1>勇气</h1>。
(2)“3年级时…我也没勇气报名参加。” 是网页页面汉语章的段落,<p></p>是段落标识。它在网页页面上的编码写成 <p>3年级时...我也没勇气报名参加。</p>
(3)网页页面上那张小女生的照片,由img标识来进行的,它在网页页面上的编码写成<img src="1.jpg">

1.4 标识英语的语法

1.标识由英文尖括号<和>括起来,如便是1个标识。
2.html中的标识1般全是成对出現的,分刚开始标识和完毕标识。完毕标识比刚开始标识多了1个/。
3.标识构造示用意以下:

4.标识举例:

(1) <p></p>
(2) <div></div>
(3) <span></span>


5.标识与标识之间是能够嵌套循环的,但前后次序务必维持1致,如:<div>里嵌套循环<p>,那末</p>务必放在</div>的前面。以下图所示。

6.HTML标识不区别尺寸写,<h1>和<H1>是1样的,但提议小写,由于绝大多数程序流程员都以小写为准。
7.检测:有1个网页页面的编码,但第9行缺乏编码,请填补:

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf⑻">  
  5.         <title>标识的英语的语法</title>  
  6.     </head>  
  7.     <body>  
  8.         <h1>在本实例教程中,你将学习培训怎样应用 HTML 来建立站点</h1>  
  9.         <p>当独特的款式必须运用到某些元素时,便可以应用内联款式。    
  10.     </body>  
  11. </html>  
  12.   

1.5 html/head/body了解HTML文档基础构造

学习培训html文档的构造:1个HTML文档是有自身固定不动的构造的。

XML/HTML Code拷贝內容到剪贴板
  1. <html>  
  2.     <head>...</head>  
  3.     <body>...</body>  
  4. </html>  

编码解读:
1. <html></html>称为根标识,全部的网页页面标识都在<html></html>中。
2.<head> 标识用于界定文本文档的头顶部,它是全部头顶部元素的器皿。头顶部元素有<title>、<script>、 <style>、<link>、 <meta>等标识,头顶部标识在下1小标题中会有详尽详细介绍。
3.在<body>和</body>标识之间的內容是网页页面的关键內容,如<h1>、<p>、<a>、<img>等网页页面內容标识,在这里的标识中的內容会在访问器中显示信息出来。

下面的编码的HTML文档构造不详细,由于缺乏标识<html>和</html>:

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE HTML>  
  2.   
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf⑻">  
  5.         <title>了解html文档基础构造</title>  
  6.     </head>  
  7.     <body>  
  8.         <h1>在本小标题中,你将学会了解html文档基础构造</h1>  
  9. </body>  
  10.   


1.6 head标识

 •标识的功效:文本文档的头顶部叙述了文本文档的各种各样特性和信息内容,包含文本文档的题目等。绝大部分文本文档头顶部包括的数据信息都不容易真实做为內容显示信息给读者。
 •下面的标识能够在head一部分:

XML/HTML Code拷贝內容到剪贴板
  1. <head>  
  2.     <title>...</title>  
  3.     <meta>  
  4.     <link>  
  5.     <style>...</style>  
  6.     <script>...</script>  
  7. </head>  

 •<title>标识:在<title>和</title>标识之间的文本內容是网页页面的题目信息内容,它会出現在访问器的题目栏中。网页页面的title标识用于告知客户和检索模块这个网页页面的关键內容是甚么,检索模块能够根据网页页面题目,快速的分辨出网页页面的主题。每一个网页页面的內容全是不一样的,每一个网页页面都应当有1个唯一无2的title。
比如,<title>标识的內容“hello world”会在访问器中的题目栏上显示信息出来,如图: 

XML/HTML Code拷贝內容到剪贴板
  1. <head>  
  2.     <title>hello world</title>  
  3. </head>  


1.7 掌握HTML的编码注解

编码注解的功效:协助程序流程员标明编码的主要用途,过1段時间后再看你所撰写的编码,就可以很快想起这段编码的主要用途。编码注解不但便捷程序流程员自身追忆起之前编码的主要用途,还能够协助别的程序流程员很快的读懂你的程序流程的作用,便捷多人协作开发设计网页页面编码。
英语的语法:

<!--注解文本 -->

下面编码的第 8、12 行全是注解编码,可是发现她们是不容易在結果对话框中显示信息出来的:

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf⑻">  
  5.         <title>HTML的编码注解</title>  
  6.     </head>  
  7.     <body>  
  8.         <!--线上资询 begin-->  
  9.         <div>  
  10.             <p>1站式报考资询!<a href="#">向报考咨询顾问资询</a></p>  
  11.         </div>  
  12.         <!--线上资询 end-->  
  13.     </body>  
  14. </html>  

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

原文详细地址:http://blog.csdn.net/qq_17416741/article/details/51416313