文档结构

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元素包含文档的所有内容（如文本、超连接、图像、表格和列表等等）。

 

 

posted on 2020-03-05 13:52  一只小毛球  阅读(447)  评论(0)  编辑  收藏  举报

导航