白郁闷的找到老朱说道：“朱哥，我想让一个块容器在一个容器里面垂直居中怎么这么难啊！”

老朱：“你是怎么实现的？”

小白说：“比如一个容器的高度是400px，子容器的高度是300px，我就把子容器CSS上边距设置成50px。”

“那要是父容器高度发生变化你的子容器岂不是很麻烦”

小白郁闷的说道：“你可说吧！头疼的很！怎么才能轻松的设置垂直居中啊？”

老朱说：“如果一个容器只有一行文字和图片，我们可以设置容器的高度和line-height一致就可以保证文字和图片居中，但是多行图片，或者容器里面嵌套了其他块元素就很麻烦了。还有一种情况就像你刚刚两个div嵌套，子容器也是个块元素，垂直居中直接用CSS会很麻烦，正好今天想跟你说说怎么给jQuery添加扩展方法，索性咱就以这个为例子进行讨论吧！”

小白高兴的说道：“又有新知识学了，什么事给jQuery添加扩展方法呢？”

“我们使用$(选择器)生成的对象有很多默认jQuery方法，你应该知道吧？”

小白说道：“知道啊！获取和修改容器html内容的html()方法、获取和修改属性的attr()方法、修改元素css样式的css()方法、获取元素高度的height()方法、还有控制容器显示的show()方法……”

“停~！差不多了，这些都是jQuery自带的方法，假如我们想自己增加一个方法可以用$.fn添加。我现在给你写一个能够输出当前容器高度和父容器高度的方法你看看！”

“子容器和父容器的高度在CSS中都有过设定，因此我通过$.fn添加mid方法以后，再通过选择器找到sun容器就可以直接使用mid方法了。”

小白突然灵光一现，说道：“朱哥我知道怎么设置一个让块容器基于父容器垂直居中了，你稍等我一会，我再你的代码基础上改一下！”

也就两分钟的时间，小白就把代码拿到了老朱面前，“你看，我写好了！”

“现在我想让sun容器基于main垂直居中只需要使用一下$("#sun").mid()就可以实现了，以后父容器不管怎么变化，它都是基于父容器居中的。”

老朱说道：“如果有多行块容器，或者多行文本、图片怎么办？”

小白说道：“那就给他们外面再嵌套一个块容器就可以了么！对不对啊？”

“不错，通过给他们嵌套一个块容器，然后再让这个块容器基于父容器垂直居中就可以了！小白我相信你还能再写一个基于底部对齐的方法吧？”

小白自信的说道：“再这个方法上改一下就可以了，稍等~”

“嗯，不错，如果你发现以后经常会用到这两种居中方式，可以把他们放到一个js文件里面，以后用的时候把这个js文件引入，就可以直接使用mid和bottom方法了。”

“$.fn确实是个好东西！看来我以后得经常添加自己的方法了，哈哈，我去练习了~”

想学H5的朋友可以关注老炉，您的关注是我持续更新《小白HTML5成长之路》的动力！

家好，我是新媒之声广告工作室的大白，今天给大家带来的是HTML5简单教学第一章（第二节）。

今天给大家带来的东西比较多；

br 换行标签实属单标签，br换行标签就如同我们编辑文本是点击的回车键，让它换到下一行。

HTML5 <br/>标签用来对文档中的文本进行换行的处理，请参考下面的这个例子：

以下代码标记一个换行：

<p> 使用 br 元素<br>在文本中<br>换行。 </p>

所有主流浏览器都支持 <br> 标签。

标签定义及使用说明

<br> 标签插入一个简单的换行符。

<br> 标签是一个空标签，意味着它没有结束标签。

提示：由于<br>标签是空标签，因此，不允许有“<br>...</br>”这样的写法！

提示和注释

提示：在写地址信息或者写诗词时 <br> 标签非常有用。

注释： 请使用 <br> 标签来输入空行，而不是分割段落。

HTML 4.01 与 HTML5之间的差异无。

HTML 与 XHTML 之间的差异

在 HTML 中，<br> 标签没有结束标签。

在 XHTML 中，<br> 标签必须被正确地关闭，比如这样：<br /> 。

nobr 不换行是属于双标签，nobr就是强制不换到下一行，在做编辑时文字或是块遇到浏览器的边会自动换到下一行使用不换行标签就强制它不让换行，这是浏览器底部就会出现航向滚动条。

p 段落标签也是属于双标签，p标签是文字标签，故名思议就是用于写文字段落的标签，p标签是属于块标签，就是独自占据一行，在下节课会介绍到块标签与行标签。

HTML5 <p>标签用于定义一个段落。

目前大多数浏览器支持 <p>标签。

标签定义及使用说明

<p> 标签定义段落。

<p>元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

提示：在本站的HTML5编程实战中，你可以练习使用<p>标签！

在HTML 4.01 与 HTML5中的差异

HTML 4.01中标签的 align 属性已经废弃，HTML5不支持该属性。

p 段落,align属性:left|center|right，是标签属性，属性有事css样式，css样式又可以通俗的理解为房子的装修，html通俗可以理解为房子的框架，div又可以通俗的理解为房子的填充砖块之类的。

所有主流浏览器都支持 align 属性。

定义和用法

HTML5 不支持 <p> align 属性。请使用 CSS 代替。

在 HTML 4.01 中，<p> 的 align 属性已废弃。

align 属性规定段落中文本的对齐方式。

兼容性注释

在 HTML 4.01 中，<p> 的 align 属性已废弃，请使用 CSS 代替。

CSS 语法：<p style="text-align:right">

CSS 实例：在段落中右对齐文本

在我们的 CSS 教程中，您可以找到更多有关 text-align 属性 的细节。

语法

<p align="left|right|center|justify">

属性值

center 居中是属于双标签，双标签就是成对出现的标签，center居中标签的意思就是让它位于浏览器的中心位置，就好比是wps的文字居中一个道理，不过居中标签是可以让它体内所有的标签都可以居中。

HTML <center> 标签 - HTML 5 不支持

<center> 标签控制文本的居中显示，不能在 HTML5 中使用。

所有主流浏览器都支持 <center> 标签。

标签定义及使用说明

HTML5 不支持 <center> 标签。请用 CSS 代替。

在 HTML 4.01 中，<center> 元素已废弃。

<center> 对其所包括的文本进行水平居中。

提示和注释

提示：请使用 CSS 样式来居中文本！在 CSS 教程中您能了解到更多关于居中文本的细节。

HTML 4.01 与 HTML5之间的差异

HTML5 不支持 <center> 标签。请用 CSS 代替。

pre 按源代码显示是属于双标签不是很常用的标签，它的意思就是让标签直接不解析让浏览器表现出来，一般用于展示源代码。

HTML <pre> 标签

<pre> 标签可以保留您需要的文本格式，比如不会取消换行和空格，并且所示文本是等宽的。

目前大多数浏览器支持 <pre> 标签。

标签定义及使用说明

<pre> 标签可定义预格式化的文本。

被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

注意：<pre> 元素是块级元素，但是只能包含文本或行内元素，任何块级元素（常见为可以导致段落断开的标签：例如<title>、<p> 和<address> 标签）都不能位于 <pre> 元素中。

提示和注释

提示: <pre> 标签的一个常见应用就是用来表示计算机的源代码。

提示：<pre> 标签与 <code> 标签结合起来使用，可以获得更加精确的语义。

在HTML 4.01 与 HTML5中的差异

在 HTML 4.01 中，"width" 属性已废弃，不可使用。 HTML5 不支持"width"属性。

属性

全局属性

<pre> 标签支持全局属性，查看完整属性表 HTML全局属性。

ul 无序列表属于双标签，一般配合li标签使用，无序列表属和wps中表现是一样的不过无序列表中不只可以写文字和数字也可以写div之类的标签有的网页导航就是用ul无序列表标签写出来的。

HTML <ul> 标签

<ul> 标签表示HTML页面中项目的无序列表，一般会以项目符号列表呈现

所有主流浏览器都支持 <ul> 标签。

标签定义及使用说明

<ul> 标签定义无序列表。

将 <ul> 标签与 <li> 标签一起使用，创建无序列表。

提示和注释

提示：使用 CSS 为列表定义样式。

提示：使用 <ol> 标签创建有序列表。

HTML 4.01 与 HTML5之间的差异

在 HTML 4.01 中，"compact" 和 "type" 属性已废弃。HTML5 则不支持着两个属性。

属性

ol 有序列表标签和ul无序列表标签是一个道理，也是配合li标签使用唯一区别就是一个前面带点一个前面带阿拉伯数字。

HTML <ol> 标签

<ol> 标签在 HTML 中表示有序列表，是 ordered lists 的缩写。您可以自定义有序列表的初始序号

目前大多数浏览器支持 <ol> 标签。

标签定义及使用说明

<ol> 标签定义了一个有序列表. 列表排序以数字来显示。

使用<li> 标签来定义列表选项。

提示和注释

提示： 如果需要无序列表，请使用 <ul> 标签。

提示：使用 CSS 来定义列表样式。

HTML 4.01 与 HTML5中的差异

在 HTML 4.01 中"start" 和 "type" 属性已经废弃，HTML5不支持该属性。

"reversed" 属性是 HTML5 中的新属性。

在HTML 4.01中"compact" 属性已经废弃,在 HTML5中不支持该属性。

属性

New：HTML5 新属性。

dl 自定义列表 dt 自定义标题 dd 自定义列表内容这三个标签我放在一起讲因为这三个标签是配合在一起的用法和ul标签ol标签差不多，就不再过多的叙述了，一般用到的不是很多。

所有主流浏览器都支持 <dl> 标签。

标签定义及使用说明

<dl> 标签定义一个描述列表。

<dl> 标签与 <dt> （定义项目/名字）和 <dd> （描述每一个项目/名字）一起使用。

HTML 4.01 与 HTML5之间的差异

在 HTML 4.01 中，<dl> 标签定义一个定义列表。

在 HTML5 中，<dl> 标签定义一个描述列表。

HTML <dt> 标签

<dt> 标签只能够作为 <dl> 标签的一个子元素出现，常常后跟一个 <dd> 标签。

所有主流浏览器都支持 <dt> 标签。

标签定义及使用说明

• <dt> 标签定义一个描述列表的项目/名字。

  <dt> 标签与 <dl> （定义一个描述列表）和 <dd> （描述每一个项目/名字）一起使用。

  一行中的多个 <dt> 标签表示由紧邻的下一个 <dd> 元素定义的多个术语。

• ---

• HTML 4.01 与 HTML5之间的差异

  在 HTML 4.01 中，<dt> 标签定义一个定义列表的条目。

  在 HTML5 中，<dt> 标签定义一个描述列表的项目/名字。

  
  

  hr 导航线这节课最后一个标签是单标签，所谓的导航线不过就是一条横线用来分割。

  HTML <hr> 标签

  <hr> 标签表示段落级元素之间的主题划分。

  所有主流浏览器都支持<hr> 标签。

  ---

  标签定义及使用说明

  <hr>标签定义HTML页面中的主题变化（比如话题的转移），并显示为一条水平线。 元素被用来分隔HTML页面中的内容（或者定义一个变化）。

  ---

  HTML 4.01与HTML5之间的差异

  在HTML5中，<hr> 定义内容中的主题变化，并显示为一条水平线。

  在HTML 4.01中，<hr> 标签仅仅显示为一条水平线。

  在HTML 4.01中，的所有布局属性都已废弃。在HTML5中不再支持这些属性。请使用CSS来为<HR> 元素定义样式。

  ---

  HTML与XHTML之间的差异

  在HTML中，<hr> 标签没有结束标签。

  在XHTML中，<hr> 标签必须被正确地关闭，比如<hr /> 。

  ---

  属性

  属性	值	描述
  align	left center right	HTML5 不支持。HTML 4.01 已废弃。 规定 <hr> 元素的对齐方式
  noshade	noshade	HTML5 不支持。HTML 4.01 已废弃。 规定 <hr> 元素的颜色呈现为纯色。
  size	pixels	HTML5 不支持。HTML 4.01 已废弃。 规定 <hr> 元素的高度。
  width	pixels %	HTML5 不支持。HTML 4.01 已废弃。 规定 <hr> 元素的宽度。

  谢谢大家的观看，如果需要今天课程的源代码和ppt可以私信给我，我会免费发给你，最好使能够关注小编一下。

言：万物之始，大道至简，演化至繁。水滴不染尘世浮华，方能纯净如冰川灵动如丝绒。落红不逐春日绚烂，方有一年春尽一年春。

一、html5的介绍

1.1介绍

html号称超文本标记语言，代表着浏览器技术发展的一个阶段。html版本1到版本5的更新迭代都是由组织W3C管理的。当时到html4.1的时候，W3C组织就声称不再更新版本了。而改用XHTML。但是由于浏览器的各种不兼容的问题，于是乎W3C这个组织就和其他的浏览器产商一起联合起来将这门语言再次更新到html5

比喻：

html5 >机器人的骨骼

css3 >机器人的外在修饰

js > 机器人的行为如行走、抬腿

Jquery > 封装好的控制行为的库，可以提高效率

1.2优势

• 易用性

• 支持视频和音频

• 互动性高

• 支持移动设备

• 未来的趋势

1.3开发工具

HBuild、WebStrom、sublime Text

二、代码规范

2.1代码规范

新建一个Web项目

相比html4来说，html5的语法更加简洁并且在规定上也更加宽松。

• 单标签不用写关闭符号

• 双标签省略结束标签

• html、head、body、colgroup、tbody可以完全省略

• 删除其中一些，打开浏览器的检查元素功能，也不会报错

三、各类标签

3.1文本标签

• b标签：表示关键字和产品名称。<b>html</b>其实它的实际作用就是将一段文字加粗。但是并不是特别强调它的重要性。比如说：在一段文字当中出现的某些关键字或者产品的名称就可以用b标签

• strong标签：表示比较重要的文字<strong>html</strong>它的作用也是加粗，只是它在强调一段比较重要的文本

• br单标签：换行

• wbr标签：安全换行you've no idea how worried <wbr> i was当用户对网页进行缩放的时候可能会有一些单词被挤到下一行。如果不行某个单词被分离的话，可以使用安全换行标签

• i标签：倾斜。em标签语义一样，但em表示强调<i>倾斜标签</i>它用于表示外文词汇或科技术语

• s标签：删除线。del标签表示强调。<s>html</s>删除线

• u标签：给文字加下划线。ins标签表示强调<u>html</u>下划线

• small标签：添加小号字体<small>放小一号</small>将文本放小一号。通常用于免责声明和澄清声明。

• sub和sup标签：添加上标和下标X₅和Y²（sub和sup长差不多，这个要如何去记忆呢？大家可以看到b的肚子在下面，所以呢它是下标，而p的头部在上方，所以记录是上标。那这样一来是不是就感觉清晰了许多呢）

• q标签：引用来自其它出处的内容<q>有朋自远方来</q>

• ruby标签：语言元素。常用于帮助读者正确发音。<ruby>夔<rp>（</rp><rt>kui</rt><rp>）</rp></ruby><rp><rt>用来帮助读者掌握表意语言文字的正确发音。比如说汉语拼音在文字的上方。

• bdo标签：设置文字方向<bdo dir="rtl">设置文字方向</bdo>dbo必须使用属性dir才可以设置，一共两个值：rtl从右到左和ltr从左到右。一般默认是ltr。还有一个bdi元素也是处理方向的，由于是特殊语言的效果，并且主流浏览器有些不支持，所以可以忽略。

• mark标签：突出显示文本<mark>突出显示文本</mark>加上一个黄色的背景，黑色的字。从语义上来看，与上下文相关而突出的文本，用于记号。

• a标签：超链接a元素属于文本元素，有一些私有属性。

  href属性 <a href="http://www.baidu.com">百度</a> 这个属性是必须的，否则a元素就变得毫无意义。它的属性值意味着点击跳转到指定的外部网站去。

  target属性<a href="http://www.baidu.com" target="_blank">百度</a> 这个属性告诉浏览器希望打开的新窗口显示在哪里。_blank表示在新窗口中打开文档。_self表示在当前窗口打开文档。默认_self。(_parent和_top这些要结合框架来使用，但是基本上用得已经很少了。)

  锚点设置：用于将同一个文档中的另一个元素移入视野。说通俗一点就是通过点击这个锚点定位到页面中的某个位置。

<a href="#1">第一节</a>

<a href="#2">第二节</a>

<a href="#3">第三节</a>

</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

<a name="1">第一节的内容 我☝应该说点啥的。

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

</a>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

&hellip;&hellip;以上省略一万行&hellip;&hellip;

==========以下全都是分隔符============</br>

<a name="2">第二节的内容 我☝应该说点啥的。

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

</a>

3.2分组标签

顾名思义，分组元素就是用来组织相关内容的html元素，对它们进行清晰有效的分类。

• p标签：表示段落<p>这是一个段落</p> <p>这是一个段落</p>p标签就是将内部包含的文本形成一个段落。它们可以自动换行，而且段落与段落之间保持一定量的空隙。

• div标签：通用分组<div>这是一个块标签</div> <div>这是另一个块标签</div>在早期的版本中经常用到，用div将其他数据或标签包裹起来，进而进行布局。但是在html5中，渐渐被其他元素替代。（它与p标签的区别就是两段文本间没有空隙。空隙间隔和br标签换行一样）

• blockquite标签：引用大段其他地方的内容<blockquote>引用别人的内容的辅导费打发打发可以换行哦他也有首尾缩进的效果</blockquote>有段落空隙的功能，还包含了首尾缩进的功能。

• pre标签：按照原格式展示数据<pre> 我就是 长这样的 参差不齐 </pre>（有时候某些文字就想要按照原来的格式显示出来就要用到pre标签。它就是将数据原封不动的显示出来）

• hr标签：单标签。添加一条分割线。

• ul和li标签：添加无限列表

<ul>

<li>貂蝉</li>

<li>大乔</li>

<li>小乔</li>

<li>孙尚香</li>

</ul>

ul标签表示无序列表（就像咱们平时说的无符号整形，在前面也是加了一个u），而li标签则表示内部的列表项

• ol和li：表示有序列表

• start属性：表示从第几个序列开始统计。<ol start="2">

• reversed属性：是否倒序排列。<ol reversed>（不过这个属性有很多的浏览器不支持，所以要谨慎使用）

• type属性：表示列表的编号的类型 <ol type="A">

• value属性：这是属于li的属性。表示强行设置某个项目的编号。<li value="7">安琪拉</li>

• dl、dt、dd：列表标签

<dl>

<dt>第一份内容</dt>

<dd>第一行详细内容</dd>

<dd>第二行详细内容</dd>

<dl>

虽然说这三个标签是一个整体，但是dt和dd标签并非都必须出现

• figure和figcaption标签：使用插图的意思。一般用于图片的布局。

<figure>

<figcaption>这里有一张图哦</figcaption>

<img src="img.png">

</figure>

3.3表格标签

表格的用途是以网格的形式显示二维数据。开发者可以对表格中的元素标签设置不同的属性如边框宽度、颜色等使表格呈现出不同的效果。

3.3.1 标签

• table：表示表格标签

• tr：代表某一行

• td：代表一个单元格。

<table border="1" style="width:300px;">

<tr> <!--相当于行-->

<td>王昭君</td> <!--相当于每行中的每一列-->

<td>沉鱼落雁</td>

<td>法师</td>

</tr>

<tr> <!--相当于行-->

<td>貂蝉</td> <!--相当于每行中的每一列-->

<td>羞花闭月</td>

<td>刺客</td>

</tr>

</table>

• th：代表标题单元格。代表标题，作用是将内部文字居中且加粗。

<tr>

<th>姓名</th>

<th>特征</th>

<th>职业</th>

</tr>

• thead：代表表头。（某些时候，网页上的表头是由js动态生成的。有可能没按照先后的顺序排列，如此一来表头就有可能显示到第二行、第三行甚至是表尾。用thead将tr括起来可以让数据永远显示在第一行）

<thead>

<tr>

<th>姓名</th>

<th>特征</th>

<th>职业</th>

</tr>

• tfoot:表示表尾：与表头相反

• tbody:表示表格的主体部分

• (这里非常建议用分主体、表头、表尾的方式写。因为到后期使用CSS样式的时候只要拿到某个标签就可以设置总体的样式了，这样就会非常方便)

• caption:添加表格的标题

• colgroup:群组。用于设置列的属性。默认设置第一个（有的时候需要设置单独列的属性，如果说我只想设置第二列的属性，则需要把第一列的设置成白色）

<!--<table border="1" style="width:300px;">-->

<colgroup style="background:white;" span="1"></colgroup> <!--设置第一个颜色为白-->

<colgroup style="background:red;" span="1"></colgroup> <!--设置第二个颜色为红 span代表一列-->

• col：群组的子标签。更加灵活的设置列属性。通过占位符设置不需要的属性。

<colgroup>

<col> <!--占位，表示第一列不设置-->

<col style="background: pink;">

</colgroup>

3.3.2属性

• border:表示边框的宽度 <table border="1"></table>

• style:通用属性。在css中做详解。

• colspan：合并列 <td colspan="3">统计</td>这句代码表示共占三个单元格

• rowspan:合并行

<tr>

<th rowspan="4">学员</th>

<th>姓名</th>

<th>特征</th>

<th>职业</th>

</tr>

3.3文档元素

文档元素的主要作用是划分各个不同的内容，让整个布局更加清晰。 进入代替div。让整个布局元素都具有语义。

• header标签：表示页面头部。通常包括标题或导航等内容。下面内容会换行（在页面中一般会用样式将它设置到居中）

• footer标签:表示页面的尾部，一般用于版权声明、友情链接等。

• h1-h6标签：标题标签，有字体加粗的效果。从1-6字号依次减小

<h1>这里是一个大标题</h1> <h3>这里是一个副标题</h3>

• hgroup:组合标题。hgroup的作用就是当多个标题出现，干扰到一对或多个本身需要整合的标题。

<header>

<hgroup>

<h1>这里是一个大标题</h1>

<h3>这里是一个副标题</h3>

</hgroup>

</header>

<footer>

<h4>这里是尾部的副标题</h4>

这里存放页面的尾部：如版权声明，友情链接

</footer>

如上面那段代码，头部的h4标题就能与h1绑定起来，从而和尾部的h4分离。

• section标签: 定义一个文档的主题内容

• nav标签: 给文档页面添加一个导航

• aritcle标签：添加一个独立成篇的文档（像平常看到的论坛，贴吧，评论都有自己的头、尾和内容等）

<article>

<header>

<nav>&hellip;&hellip;</nav>

</header>

</article>

• aside标签：生成注释栏。

<aside>这是一个注释栏</aside>

• address表示文档或者是article元素的联系信息

• <address>联系信息</address>

• 本身有倾斜的效果。如果是在article元素下表示其下的联系信息，如果是在body元素下表示整个文档的联系信息

3.4嵌入元素

嵌入元素主要功能是把外部的一些资源插入到html中。

• img标签：用于显示图片

• src：嵌入图像的url

• alt：（如果图片能正常显示则没有任何效果。若图片加载不成功会出现备用内容）

• width/height:定义图片的宽度和高度,单位是像素<img src="img.png" alt="风景图" width="320" height="400"/>

• ismap:获取到图片区域的像素点加入了ismap属性之后，点击图片在浏览器中就会获得图片被点击的地方的像素点。（把文件在目录中打开，讲文件拷贝到谷歌浏览器打开就能看见）

<a href="index.html">

<img ismap src="img_5.jpg" alt="风景图">

</a>

• usemap:创建分区的响应图。比如说点击图片的某一部分，可以跳转到某一个网页。（当点击了coords这块区域时，跳转到指定的网页）

<img src="img_5.jpg" usemap="#Map" />

<map name="Map">

<area shape="circle" coords="31,28,112,100" href="http://www.baidu.com" target="_blank" alt="方形">

</map>

• iframe标签：嵌入另一个文档。表示在一个页面内建立一个区域引入另一个页面。

<a href="index.html" >index</a>

<a href="http://www.baidu.com" target="in">百度</a>

<iframe src="http://www.baidu.com" width="300" heigth="300" name="in"></iframe>

• progress标签：用于显示进度

• 该标签会产生一个进度条，一般我们会用js代码来控制其内部的值。(当前值用value来表示，而最大值用max来表示)

<progress value="30" max="100"></progress>

• meter标签：显示范围里的值（类似于进度条,可以规定最大值和最小值max/min。low值规定它的值过低，high表示值过高。而optimun表示最佳值，但是这个属性是呈现不出效果的）

<meter value="90" min="10" max="100" low="40" high="80" optimum="60"></meter>

3.5音频和视频标签

音频和视频文件其实都只是一个容器文件。视频文件包含了音频轨道、视频轨道和其他一些元数据。视频播放时，音频轨道和视频轨道是绑定在一起的。元数据包含了视频的封面、标题字幕等信息。在网页实现中，有很多的浏览器厂商都有自己的标准，所以html5规范也没有强制指定编解码器了。所以在网页上嵌入视频和音频时，最好提供mp4格式和webM格式的视频。否则有可能由于浏览器不兼容的问题导致视频不能播放。

• video标签: 视频标签属性：

• src:视频资源的url

• width：视频宽度

• height:视频高度

• <video src="test.mp4" width="320" height="400"></video>

• controls:设置后显示播放控件（未设置这个属性时，视频就像一张图片，设置controls之后才能显示视频播放控件）

• <video src="test.mp4" width="320" height="400" controls></video>

• autoplay:表示立即播放视频

• loop:反复播放视频（也就是说在播放结束之后会重新播放视频）

• muted:设置之后，视频会处于静音状态

• poster:指定视频数据载入时显示的图片。（相当于视频的一个封面）

<video src="test.mp4" width="320" height="400" controls

poster="img_5.jpg"></video>

• preload:预加载。不设置会在第一次播放自动缓存。如果值为none会直到用户点击时再加载视频。如果值为metadata表示播放之前只加载第一帧。auto是默认的，表示要求浏览器尽快的加载视频。

• 兼容多个浏览器 source标签

<video src="test.mp4" width="320" height="400" controls poster="img_5.jpg">

<source src="test.webm"/>

<source src="test.mp4"/>

</video>

• audio标签：用于嵌套音频内容。属性与视频元素类似。只是没有宽高设置和图片。

• <audio src="test.mp3" controls></audio>

3.6表单标签

表单标签是用于获取用户的输入数据的。

• form标签：表示定义html表单。用该标签包含的标签具有提交功能。也就是说，在浏览器的地址栏里面能获取到用户的信息。(如果不定义表单，那么它是无法提交数据的)

<form>

用户名：<input name="user">

<button>提交</button>

</form>

属性

• action:表示表单提交到的页面(也就是要把数据传入到哪个页面中)

• method:表示表单的提交方式。默认是get。而get和post请求的区别就是post后面不跟请求体。也就是用户信息。相对来说更加的安全。（一般来说，get是用于超链接提交居多，post用作表单提交居多）

• <form method="post" action="http://www.haosou.com"></from>

• enctype:表示浏览器对发送给服务器的数据采用的编码格式。有三种格式。默认是不能将文件上传到服务器&rdquo;application/x-www-form-urlencoded&ldquo;、multipart/form-data用于将文件上传到服务器、text/plain不建议使用

• name:设置表单名称，以便程序调用

• target:提交的目标，与超链接无异

• autocomplete:设置浏览器记录用户输入的信息。分为on和off两个值。默认为on。

• novalidate：设置是否执行客户端数据有效性检查

• input标签：表示用来收集用户输入数据的控件。它默认会出现一个单行的文本框。

• type:文本框的类型。值为text时表示单行文本框；值为password表示密码框；值为search时，除了火狐浏览器的其他浏览器外，会显示一个叉来取消搜索内容，值为number时，表示只限于数字输入；值为range时，生成一个数值范围文本框；当type为date系列时，可以获取日期和时间的值，有六种形态date、month、time、week、datetime、datetime-local；当值为color代表可以获取不同的颜色；当值为checkbox、radio时表示复选框和单选。单选的name值必须一样。checked表示默认勾选状态值为img是表示产生一张图片按钮，后面可以接src,alt,width等熟悉值为email,tel,url时表示输入电子邮件、电话和网址格式值为hidden时，生成一个隐藏控件（看不见，但提交的时候会显示，一般用于关联主键id提交）值为file的时候，表示上传文件。accept属性表示限制文件<input type="text">

音乐<input type="checkbox" checked>

体育<input type="checkbox">

<input type="radio" name="sex" value="男" checked>男

<input type="radio" name="sex" value="女">女

<input type="hidden" value="1" name="id">

<input type="file" accept="image/gif">

• maxlength:设置文本框最大字符长度

• readonly:设置文本框为只读状态。可以提交但是不能修改文本框的值。

• placeholder:占位符

• size:设置文本框的宽度

• required:表明用户必须输入一个值，否则无法通过输入验证

• <input type="text" list="abc" required>

• autofocus:让光标聚焦在某个input元素上，方便用户直接输入。<input name="user" autofocus>

• disabled:禁止input元素 （连点击都不能）

• list：为文本框提供建议值

<form>

<input type="text" list="abc">

<button>提交</button>

</form>

<datalist id="abc">

<option value="1">湖南</option>

<option value="2">海南</option>

</datalist>

• value:默认在输入框内出现的值

• form：与表单外的数据挂钩一遍提交

<form id="register" name="reg" action="index.html">

用户名：<input name="user">

<button>提交</button>

</form>

年龄：<input name="age" form="register">

• label标签:把文字和input标签包裹起来可以方便设置样式，并且当用户点击文字的时候，光标会自动移入到对应的input框。（如果只是设置了文字用label包裹，又想点击文字将标签自动移入对应的框，可以将label的属性for的值设置成与input的id设置成一样）

<label for="user"> 用户名：</label>

<input id="user" name="user">

• fieldset标签:对表单进行编组。三个属性name、form、disabled

• legend标签：添加分组说明的标签（也就是说给分组加上一个标题）

<fieldset>

<legend>注册分组</legend>

<label for="user"> 用户名：</label>

<input id="user" name="user">

<button>提交</button>

</fieldset>

• button标签:创建一个按钮。type属性有三个值，submit表示提交，reset表示重置，也就是把input的值变成初始值。button表示一个普通的按钮。

• select标签：下拉列表。需要和option标签配合使用。

• name属性：设定提交时的名称

• disabled属性：将下拉列表禁用

• form属性：将表单外部与内部挂钩

• size属性：下拉列表的个数

• multiple属性：设置是否可以多选

• required:选择验证，必须选择后才能通过

<select name="fruit" size="5" multiple >

<!--value值是真正要提交上去的值，而后面的是显示到页面的值-->

<option value="1">花花菇凉</option>

<option value="2">文小喵</option>

</select>

optgroup标签:对列表进行分组选择。

<form action="http://www.baidu.com">

<select name="fruit" multiple size="5">

<optgroup label="表情包">

<option value="1">花花菇凉</option>

<option value="2">文小喵</option>

</optgroup>

<optgroup label="书">

<option value="4" selected>微微一笑很倾城</option>

<option value="5">神雕侠侣</option>

</optgroup>

</select>

<button>提交</button>

</form>

• textarea标签:生成一个可变大小的多行文本框

<!--wrap表示是否插入换行符 有soft和hard两种。hard提交之后在地址栏可以看见%插入的隐藏换行符-->

<textarea name="content" rows="20" cols="30" wrap="hard"></textarea>

• pattern：正则表达式。开头和结尾用^和$ novalidate属性表示不要验证该表单

<input type="text" placeholder="请输入区号和座机" pattern="^[\d]{2,4}\-[\d]{6,8}$">

html对网页页面的布局或者是表单验证等功能都相对简陋，并且不同的浏览器支持的成熟度是不尽相同的。因此在大部分情况下，还是要借助js或jqury等前端库，来呈现丰富多彩的验证效果。