第2章 HTML5的常用标签

标签的概念，标签的分类，常见标签

HTML5中新增的标签

标签的属性，常见属性

2.1 HTML5中的标签

标签，是HTML中的基本单位。本节主要介绍标签的概念，标签的分类，以及部分常用标签。

2.1.1 标签的定义

HTML标签通常指超文本标记语言标记标签（Tag），是HTML文档的基本单位。

HTML标签由角括号“<”和“>”，标签名以及斜线组成。

例如：


<p>你好！</p>

<p>是标签的开始标记

</p>带斜线的是标签的结束标记

开始标记和结束标记之间的是标签的内容

HTML标签不区分大小写，通常推荐使用小写



	本书网站

自闭合标签只有一个标记，相当于标签内容为空

开始标签或自闭合标签中可以添加标签属性

a是标签名，href和target是属性名，该标签有两个属性，等号后面的是属性值


	
		欢迎语
		
			欢迎来到HTML5的世界，请访问
			本书网站获取更多资料

点击查看代码

2.1.2 标签分类

HTML标签没有严格的分类方法。按功能层次可以分为文档级，内容级，文本级。

2.1.3 文档级标签

文档级标签用于描述整个HTML文档的信息。

例如：

<html>标签是整个文档的最上层标签，HTML文档的所有内容都应该被在<html>标签中。

<head>标签包含了HTML文档的元数据，比如文档的标题、作者、关键字等。

<body>标签用于放置文档的所要展示的内容。

2.1.4 内容级标签

内容级标签是用于组织和展示文档具体内容。例如：

<header>，<footer>，<article>，<nav>，<div>等标签内部通常会包含多个其他标签

<header>表示引导性内容，例如对于一个页面来说的导航栏，或者对于一篇文章的标题

<article>表示标签内是一个完整独立的内容，比如一篇文章，一个论坛帖子，一个商品介绍等

<nav>表示标签内是导航性质的内容，比如当前页面的目录或者网站的目录。

2.1.5 文本级标签

文本级标签用于组织和展现文本内容，或者对文本进行修饰，比如：

<p>标签用于表示段落。<br>标签用于表示换行。

<h1>到<h6> 用于表示1级到6级标题，其中<h1>是最高级的标题

2.1.6 列表和表格标签

列表分为有序列表和无序列表。<ul>代表无序列表（Unordered List），<ol>代表有序列表（Ordered List）。列表内的元素用<li>表示。

例如：


HTML5的标签按功能层次可以分为文档级，内容级，文本级。

	文档级标签
	内容级标签
	文本级标签

2.1.7 多媒体标签

<img>表示图片。<video>表示视频。<audio>表示音频。

2.1.8 链接标签

<a>标签用于创建超链接，点击超链接后，浏览器就打开这个超链接关联的内容，比如打开另一个页面，开始下载文件，或者执行特定的操作。

2.1.9 代码和资源标签

代码和资源标签用于向HTML文档嵌入JavaScript代码、层叠样式表代码等，还可以嵌入数学公式、画布等资源。

例如下面是，<svg>标签,标签内使用<circle>、<rect>、<line>, 分别代表圆形、矩形、直线。下面的图片是这段代码的显示效果。

2.1.10 表单标签

表单用于帮助用户输入和提交信息，是HTML中重要的交互方式。form标签即表单标签内的元素构成一个表单。

例如：

<input>可以生成一个输入框。

<select>可以生成一个下拉选择框。

代码示例

2.1.11 交互标签

<details>标签可以实现“点击查看详情”的功能。


							
								今天去超市购物
								购买的物品：
								
									鸡蛋
									大葱
									面粉

点击查看代码

2.2 HTML5新增标签类型

HTML5添加新标签中

有给浏览器提供新的功能，如音视频播放、交互能力的标签

还有了更多语义标签，比如<header>、<footer>等标签替换div标签能更清晰地划分页面的组成成分。

HTML5的理念是兼容不同设备并提供更多功能和交互，让网页更加语义化，易于开发和维护。

2.2.1 HTML5的理念
2.2.2 结构和语义标签
2.2.3 多媒体标签和画布标签
2.2.4 表单校验和交互标签

2.2.1 HTML5的理念

兼容和交互主要体现在要求浏览器本身具有音视频播放等能力，提供更丰富的多媒体以及交互标签

更语义化的网页主要体现在带有语义的内容级标签使页面层次更清晰

2.2.2 结构和语义标签

2.2.1中语义化代码的例子中所使用的<nav>、<article>等标签就是内容结构标签。内容结构标签不仅提供了语义化的能力，也可以简化开发。

2.2.3 多媒体标签和画布标签

HTML5出现和普及之前，网站往往会使用Flash等插件实现多媒体播放功能，但随着HTML5引入了<video>、<audio>等多媒体标签，现代浏览器可以直接播放越来越多的多媒体格式。

2.2.4 表单校验和交互标签

HTML5给表单<input>标签提供了更多类型，可以指定用户输入数字、时间、电子邮箱地址等格式，并由浏览器提供校验和提示用户的功能。

2.3 HTML5的标签属性

标签属性可以用于控制标签行为和功能，标签的属性通常以“属性名”加“属性值”的形式写在开始标签中。

2.3.1 全局属性
2.3.2 尺寸相关的属性
2.3.3 表单的属性
2.3.4 事件属性

2.3.1 全局属性

全局属性是可以用于任何标签的属性。

2.3.2 尺寸相关的属性

<canvas>、<iframe>、<img>、<video>等标签可以通过height、width属性指定显示的尺寸，支持多种单位。

2.3.3 表单的属性

name属性用于表单内的输入标签，如input标签，表单提交的数据将包含name属性值和输入的值，处理表单输入时，需要通过name找到对应的输入。

2.3.4 事件属性

用于定义某种事件发生后执行的动作。比如元素被点击，input的值发生改变，窗口大小发生变化，表单被提交，键盘按键等。

2.4 HTML5标签与元素

使用浏览器打开HTML5文档后，浏览器根据标签生成相应的元素并根据用户设备渲染成图形。

2.4.1 标签的渲染
2.4.2 查看页面元素
2.4.3 动态修改HTML5文档

2.4.1 标签的渲染

浏览器会在解析HTML文档的过程中构建以html元素为根节点的树形结构，这个树形结构被称为DOM树，所有元素都将被包括在这个树形结构中。

2.4.2 查看页面元素

在浏览器中打开的页面上，右键单击选择“检查”可以查看浏览器根据HTML文档生成出的元素，屏幕上显示的内容可以在这里找到对应的元素。

2.4.3 动态修改HTML5文档

在开发者工具元素选项卡中可以修改当前显示页面中的元素，所修改的内容可以实时反映在文档中。

2.5 HTML5代码嵌入

HTML文件中可以直接嵌入CSS、JavaScript等类型的代码，它们可以被浏览器直接解析和执行，HTML和这些嵌入式代码共同组成了WEB应用开发的框架。

2.5.1 JavaScript代码嵌入
2.5.2 CSS代码嵌入

2.5.1 JavaScript代码嵌入

JavaScript可以出现在<script>标签中，也可以出现标签的某些属性中。

2.5.2 CSS代码嵌入

CSS代码可以出现在<style>标签中，也可以出现其他标签的style属性中。

2.6 小结

本章介绍了包括HTML中的常用标签，并着重介绍了HTML5中新增加的标签。介绍了HTML的基本语法。以及HTML5中的代码嵌入。

2.7 课堂练习—制作HTML5相册

本节将使用基本HTML元素构建HTML5相册页面。将用到标题、图片、分隔线、链接等标签。

2.7.1 页面布局
2.7.2 使用img标签显示图片
2.7.3 点击查看原图

2.7.1 页面布局

相册最主要的内容是展示照片，兼具分类功能。

2.7.2 使用img标签显示图片

准备一组照片，为了简便，这里的照片统一使用数字命名。1.jpg到7.jpg是秋季风景，8.jpg是夏季风景。9.jpg和10.jpg是动物照片

2.7.3 点击查看原图

给img标签外层添加a标签，可以给图片添加超链接，把超链接的地址写为图片的地址，即可实现点击图片查看原图的功能。