文档结构
HTML5
HTML5文件是由一些标签语句组成的文本文件,标签标识了内容和类型,Web浏览器通过解析这些标签进行显示。HTML5文件可以通过任意文本编辑器创建,但文件的扩展名必须使用“.htm”或“.html”,建议使用“.html”,以适应跨平台的需要
-
文档结构
<!DOCTYPE html> //文档类型声明,强制使用,总是位于首行 <html lang="zh-CN">//告诉浏览器用的是内地字符集,不然浏览器用默认字符集显示 <head>//头元素 <meta charset="utf-8">//告知浏览器此页用的是utf-8字符编码格式 <title>页面标题</title>//标题元素 </head> <body>//体元素 … </body> </html>
ps:en-uk:英文 zh-tw:台湾 zh-hk:香港 fr-fr:法文 zh-CN:内地
-
元素与标签
元素:
- 元素是标记语言的基本单元,元素是通过使用HTML5标签进行定义的。
- 元素(element)指文档的各种成分(如头、标题、段落、表格和列表等)。元素的类型、属性和范围用标签来标识、设置和界定。
- 元素之间可以嵌套(形成树状结构),但不能交叉。嵌套的诸元素构成父子关系,外层称为父元素,内层称为子元素,多级嵌套则形成多重辈分的层次等级关系。
标签:
- 标签(tag,标志/标记/标识/标注)是用来描述文档内容的类型、组成与格式化信息的文本字符串,用一对尖括号“<”和“>”括起,位于起始标签和终止标签之间的文本是元素的内容。标签可用于标识元素的类型,设置元素的属性,并界定元素内容的始末。
- 如这是一个HTML5元素:<b>此文本是粗体的。</b>
- //<b>起始标签 </b>终止标签 此文本是粗体的。(元素内容)
非空元素与标签:指含有内容的元素,有开始和结束两个标签。
<元素名 [属性名="属性值"] …>元素内容</元素名>
<title>测试页</title> <a href="http://www.tsinghua.edu.cn/">清华大学</a>
空元素与标签:空元素指不含内容的元素,空标签指标识空元素的标签。一个空元素只有一个标签。
<元素名 [属性名="属性值"] … />
例如图像、换行和水平线元素。 <img src="lena.gif" /> <br /> <hr />
-
属性
属性为HTML5元素提供附加信息。属性总是以“名称/值”对的形式出现,比如:“name="value"”,属性总是在HTML5元素的开始标签中规定。
开始标签使用多个属性时,用空格分隔,出现的顺序无关紧要。属性值要用单引号或双引号括起来,单引号括起来的属性值中可以包含双引号,双引号括起来的属性值中也可以包含 单引号。
<body bgcolor="yellow">
在HTML5文件中,有很多元素重复出现,为了区分,可以用id属性给每个元素定义唯一的标识。在HTML5之前,以数值开头的id和类是无效的,HTML5放开了这个限制,ID不能包含空格。每个元素的id属性值在HTML5文档中必须是唯一的。
如果有些元素无论内容还是样式都基本相同,可以把这些元素合并为一类,用class属性进行标识,这样多个元素在表现时可以共用相同的样式声明。
-
语法规则
HTML5语法规则要求比较松散,如某些标签语句可以省略,省略并不意味着标签不存在,它是隐含的;HTML5不区分大小写;可以省略关闭空元素的斜杠;属性值中只要不包含“>”、“、”、“=”或者空格等受限的字符,就可以不用加引号,没有属性值也可以。为了保证代码规范,建议遵循以下几点:
1. 元素必须正确嵌套
所有的元素必须彼此正确地嵌套。如:
<b><i>粗体和斜体</i></b><!--正确-->
<b><i>粗体和斜体</b></i><!--错误-->
2.非空元素要有结束标签
浏览器虽然能够对大多数没有结束标签的语句进行容错处理,但有一些还是处理不了,为了避免这种情况,非空元素最好使用结束标签。如:
<p>这是段落</p><!--正确-->
<p>这是段落 <!--不建议-->
3. 元素标签名和属性名最好小写
标签名和属性名最好小写。如:
<body>
<p>这是段落</p>
</body>
4. 属性值最好加引号
属性值最好用引号括起来,特别是属性值含有空格的时候。如:
<table width="100%"><!--正确-->
5. 属性最好有值
使用的属性最好有值,不能简写。如:
<input checked="checked" /><!—正确-->
<input checked> <!—不建议-->
无论HTML5对语法要求多宽松,都有必要检验标记是否有效,可以通过W3C验证器进行检验,链接地址为https://validator.w3.org/。
-
文档结构元素——文档根元素html、头元素head和体元素body。
<html>与</html>标签定义了文档的开始和结束,告知浏览器其自身是一个HTML文档。文档由头部和主体组成,文档的头部由<head>标签定义,主体由<body>标签定义。
<head>标签用于定义文档头部,<head>元素中的内容可以是脚本、样式表和提供的元信息等。文档的头部描述了文档的各种属性和信息。
<base>、<link>、<meta>、<script>、<style>和<title>这些标签可用在<head>里,<title>定义文档的标题,是<head>唯一必需的元素。
<head>标签放在文档的开始处,紧跟在<html>后面。
body元素定义文档的主体,body元素包含文档的所有内容(如文本、超连接、图像、表格和列表等等)。