HTML5语法，标签， 属性

@(HTML5)[HTML5 语法, HTML5标签, HTML5属性]

[TOC]

一 、HTML5语法，标签， 属性

HTML 5的语法

html5相对于以前的html（html4，xhtml等）更加简洁更加的人性化。主要体现在一下几个方面：

1. 文档申明：DOCTYPE
2. 字符编码：charset
3. 不区分大小写了：DIV标签与div标签一样
4. 布尔值：主要是关于input等的checked="checked"属性
5. 可以省略引号：属性的引号可以省略
6. 可以进行标签的省略：大多数标签可以省略，不过不建议

HTML 5新增/删除标签

新增的标签

主要分为以下几个方面：

• 结构标签
• 表单标签
• 媒体标签
• 其他功能标签

结构标签

1. header：定义整个文档的头部区域或者是一篇文章的头部区域
2. section：表示页面中的一个内容区块，比如页眉、页脚或页面的其他部分
3. article：定义页面独立（与上下文不相关）的文章内容
4. aside：表示article标签内容之外，与article标签内容相关的辅助信息
5. hgroup：对整个页面或者是页面中的一个区块的标题进行组合使用
6. nav：表示页面中的导航链接的部分
7. figure：表示一段独立的内容，一般表示一个独立的单元，使用figcaption为figure添加标题，写出来有点像定义列表
8. footer：定义整个文档的尾部区域或者是一篇文章的尾部区域

媒体标签

大致包含：

1. video：视频
2. audio：音频
3. embed：嵌入内容（包括各种媒体），Midi、Wav、AU、MP3、Flash、AIFF等。
   这里不做过多的说明

表单控件标签

1. email：必须输入邮件；
2. url：必须输入url地址；
3. number：必须输入数值；
4. range：必须输入一定范围内的数值；
5. Date Pickers：日期选择器；
   • date：选取日、月、年
   • month：选取月、年
   • week：选取周和年
   • time：选取时间（小时和分钟）
   • datetime：选取时间、日、月、年（UTC时间）
   • datetime-local：选取时间、日、月、年（本地时间）
6. search：搜索常规的文本域；
7. color：颜色
   这里不做过多的说明

其他功能标签

1. mark：凸显文字
2. meter： 标签定义度量衡。仅用于已知最大和最小值的度量。
3. progress：定义运行中的进度（进程）。
4. ruby：

月明(つきあ)かり昇る頃
灯る 赤提灯 (あかちょうちん)

月明(つきあ)かり昇る頃

灯る 赤提灯 (あかちょうちん)

5. details：显示详情

        
选择详细的信息
        

            
列表1
            
列表2
            
列表3
            
列表4
        

6. datalist：下拉选框，有点像select，不过还是有区别

删除的标签

1、能用css代替的元素
basefont、big、center、font、s、strike、tt、u。这些元素纯粹是为画面展示服务的，HTML5中提倡把画面展示性功能放在css中统一编辑。

2、不再使用frame框架。

frameset、frame、noframes。HTML5中不支持frame框架，只支持iframe框架，或者用服务器方创建的由多个页面组成的符合页面的形式，删除以上这三个标签。

3、只有部分浏览器支持的元素

applet、bgsound、blink、marquee等标签。

4、其他被废除的元素

废除rb，使用ruby替代。

废除acronym使用abbr替代。

废除dir使用ul替代。

废除isindex使用form与input相结合的方式替代

废除listing使用pre替代

废除xmp使用code替代

废除nextid使用guids

废除plaintex使用“text/plian”（无格式正文）MIME类型替代。

新增的属性

对于js进行添加的属性。

如果没有以上两个属性的话，执行顺序为先加载（下载）第一个src，然后在执行其onload，然后在向下依次同步执行defer属性在h5之前就已经有了，输入延迟加载（推迟执行），它会先加载（下载）src中文件内容，然后等页面全部加载完成后，再加载onload中js.async属性属于异步加载，它会在加载src后，立即执行onload,同时还会继续加载页面以上执行顺序，alert显示会先显示b然后再显示a

网页中标签中加入小图标的样式代码

有序列表ol:新增start（列表起始值），reversed（是否倒置）menu菜单type属性（3个菜单类型）内嵌css样式：在标签内部来定义一个样式区块（scoped）,只对样式标签内部才有效内嵌框架：iframe元素，新增了seamless无边距无边框，srcdoc定义了内嵌框架的内容

iframe新增属性：

charset属性：

meta属性之一,定义页面的字符集

sizes属性：

link新增属性，当link的rel="icon"时，用以设置图标大小

base属性:

表示当在新窗口打开一个页面时，会将href中的内容作为前缀添加到地址前

defer属性：

script标签属性，表示脚本加载完毕后，只有当页面也加载完毕才执行（推迟执行）

async属性：

script标签属性，脚本加载完毕后马上执行（运行过程中浏览器会解析下面的内容），即使页面还没有加载完毕（异步执行）

media属性：

元素属性：表示对何种设备进行优化

hreflang属性：

的属性，表示超链接指向的网址使用的语言

ref属性：

的属性,定义超链接是否是外部链接

reversed属性:

的属性，定义序号是否倒叙

start属性：

的属性，定义序号的起始值

scoped属性：

内嵌CSS样式的属性，定义该样式只局限于拥有该内嵌样式的元素，适用于单页开发

HTML 5全局属性

1. 可直接在标签里插入的：data-自定义属性名字；
2. hidden（直接放上去就是隐藏）；
3. spellcheck="true"（语法纠错）；
4. tabindex="1"（Tab跳转顺序）；
5. contenteditable="true"(可编辑状态，单击内容，可修改)；
6. 在JavaScript里插入的window.document.designMode = 'on'（JavaScript的全局属性，整个页面的文本都可以编辑了）；

HTML 5的兼容性

1. HTML5有部分内容兼容到IE9，IE8及以下对H5完全不兼容后面的内容不再考虑此类浏览器。

2. 部分内容需要加兼容前缀，
   -webkit-常用于兼容chrome浏览器，
   -moz-常用于兼容火狐，
   -o-常用于兼容opera，
   -ms-常用于兼容IE。

3. 兼容性查询网站：http://caniuse.com/

web语义化的定义

在HTML结构的恰当位置上使用语义恰当的标签，使页面具有良好的结构，是页面标签元素具有含义，能让搜索引擎更容易理解。
从一下几点理解：

• 用正确的标签做正确的事
• HTML语义化能让页面更具结构化且更加清晰，便于浏览器和搜索引擎进行解析因此在兼容条件下，要尽量使用具有语义化的结构标签。
• 即使在没有css样式的情况下，网页的内容也应该是有序的文档格式显示，并且是容易阅读的。
• 使项目维护人员更容易对网站进行分块，便于阅读理解。
• 不具有语义的标签元素最好不要在里面放文字。比如div与i标签。一般div是作为容器。i标签作为图标（icon）