HTML标签的变化

HTML标签的变化

1.<!DOCTYPE>声明必须在文档的第一行，在标签前；它不是html标签，是告诉浏览器页面是用哪个版本的html进行编的指令。
2.文档类型定义（DTD）
DTD:可定义合法的XML（扩展标记语言）文档构建模块，它使用一系列合法的元素来定义文档的结构。
在html中DTD规定了标记语言的规则，这样浏览器才能正确地呈现内容。
html5不基于SGML，所以不需要引用DTD
HTML元素和文档类型：http://www.w3school.com.cn/tags/html_ref_dtd.asp

1.H5新增标签

1.1结构标签

块状元素，有意义的div

<article>	标记定义一篇文章
<header>	标记定义一个页面或一个区域的头部
<nav>	标记定义导航链接
<section>	标记定义一个区域
<aside>	标记定义页面内容部分的侧边栏
<hgroup>	标记定义文件总一个区块的相关信息
<figure>	标记定义一组媒体内容以及他们的标题
<figcaption>	媒体标题
<footer>	标记定义一个页面或一个区域的底部
<dialog>	标记定义会话框
<summary>	标记一个可见的标题

结构标签使用：
1.hearder/section/aside/article/footer。这5个标签都不要嵌套在自身里面。
2.header/section/footer>aside/article/figure/hgroup/nav>div/figcaption
header/section/footer这三个级别最高通常放在最外层。在他们下面再写aside/article/figure/hgroup/nav，并且互不嵌套，如果要往里面在嵌套元素，用div/figcaption。div的级别和figcaption相同

1.2多媒体标签

意义：多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件，极大地提升了用户体验。

video	标记定义一个视频
audio	标记定义音频内容
source	标记定义媒体资源
canvas	标记定义图片
embed	标记定义外部的可交互的内容或插件，如flash

1.2.1 audio

属性	含义
src="…"	音频地址
loop="-1“	是否重复播放，值为-1是重复
autoplay="…"	是否自动播放，值为autoplay是重复
controls=“controls”	音频控制器

当浏览器不能识别audio标签时会显示audio标签内的文字。

<audio src=" " loop="-1" autoplay="autoplay" controls="controls">该浏览器不能识别audio标签，建议更换浏览器</audio>

当音频文件不是mp3文件时，使用source标签，该标签为单标签，属性type="内写的是转码。

<audio autoplay="autoplay" controls="controls" >
		<source src="../Source/passion.mp3" type="audio/mpeg">
</audio>

1.2.2 video

属性	含义
src="…"	视频地址
autoplay="…"	是否自动播放，值为autoplay是重复
controls=“controls”	视频控制器
width	设置视频的宽
height	设置视频的高

当视频文件不是mp4文件时，使用source标签，该标签为单标签，属性type="内写的是解码。

<video  controls="controls" width="600" height="600">
		<source src="../Source/pal4.mp4" type="video/mp4">
</video>

1.2.3 embed

大致使用与video、audio一致，但快被canvas取代，可以设置宽高。svg矢量图片的引用可以用img，也可以用embed。

<embed src="../Source/ValentinesDay.swf" width="1024" height="768"></embed>

1.3web应用标签

1.3.1状态标签

状态标签
meter	实时显示：气压、气温
progress	任务过程：安装、加载

1. meter标签

• 方法一：设定五个属性

<meter value="180" min="20" max="380" low="200" high="240" optimum="220"></meter>

其中五个值的含义：
value当前值
min最小值
max最大值
在low-high范围内是安全的
optimum标准值（最好的）
当value小于low或者大于high是会呈现红色
在low-high之间呈现绿色

• 方法二：不设定属性只设置百分比

<meter value="0.75">75%</meter>

两种不同方法下的显示

2.progress标签

1. 显示当前进度

 <progress value="10" max="100">

2. 显示正在加载中

<progress max="100">

1.3.2 列表标签

列表标签
datalist	为input标记定义一个下拉列表，配合option
details	标记定义一个元素的详细内容，配合summary

datalist:

<input placeholder="请选择您喜欢的手机品牌" list="phonelist">
<datalist id="phonelist">
	<option value="iphone">iphone</option>
	<option value="samsung">samsung</option>
	<option value="huawei">huawei</option>
	<option value="hTC">hTC</option>
	<option value="meizu">meizu</option>
</datalist>

重点：input标签里的list属性设置的值要和datalist标签里的id设置的值相同。
优点：可以点开列表来选取列表里的选项，在文本框输入首字母后会自动选取，也可以输入列表里没有的选项
datails:

<details>
		<summary>某某</summary>
		<p>
		<div>作者：**</div>
		<div>主角：** **</div> 
		<div>
		 简介：........</div>
		</p>
</details>

通过点击左边的小三角来控制详细内容的显示和隐藏，页面刷新时自动隐藏，通过给datails设置属性open="open"使页面刷新时详细内容也一同出现在屏幕上。

1.4其他标签

1.4.1注释标签

注释标签	在页面中要显示出来的注释
ruby	标记定义注释或音标
rt	标记定义对ruby的注释内容文本
rp	告诉那些不支持ruby元素的浏览器如何去显示

<p>破云：严<ruby>峫 <rt>xie</rt></ruby>  江停</p>

<p>破云：严<ruby>峫 <rp>(</rp> <rt>xie</rt>  <rp>)</rp>  </ruby>  江停</p>

rp不可以写在rt内，且三者不是嵌套关系

1.4.2mark、output标签

mark	标记定义有标记的文本（黄色选中状态）
output	标记定义一些输出类型，计算表单结果配合oninput事件

IE9+、火狐、谷歌、safari、opera支持mark标签

<form oninput="totalPrice.value=parseInt(price.value)*parseInt(number.value)">
 		
 		<input type="text" id="price" value="5000">
 		*
 		<input type="number" id="number" value="1">
 		=
 		<output name="totalPrice" for="price number"></output>
</form>

可以直接输出结果

oninput事件可以实时监听文本框的输入变化
type属性为number表示数值型
type属性为range表示范围

2.删除的标签

对可用性产生负面影响的元素	frame、frameset、noframes这三种标签经常在后台使用
产生混淆的元素	acronym、applet、isindex、dir
纯表现的标签	Basefont、big、center、font、s、strike、tt、u

3.重定义标签

显示不变，只是表达的含义进行了重新定义

b	代表内联文本，通常是粗体，没有传递表示重要的意思
i	代表内联文本，通常是斜体，没有传递表示重要的意思
dd	可以同details与figure一同使用，定义包含文本，dialog也可用
dt	可以同details与figure一同使用，汇总细节，dialog也可用
hr	不仅代表水平线，还表示主题结束，显示效果相同
menu	重新定义用户界面的菜单，配合command或者menuitem使用
small	表示小字体，例如打印注释或者法律条款
strong	表示重要性而不是强调符号