文档结构

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  一只小毛球  阅读(533)  评论(0编辑  收藏  举报

导航