HTML5和HTML属性及元素整理

最新推荐文章于 2021-11-22 19:05:21 发布

转载最新推荐文章于 2021-11-22 19:05:21 发布 · 448 阅读

本文介绍了HTML5的基本属性、语言属性、键盘属性等内容属性，同时对比了HTML5与HTML4在标签写法上的差异，并列举了HTML5新增的结构元素及标签。

背景：

我们在开发的时候，经常被问到，你们用到了哪些H5的特性？有的时候这个问题真的很不好回答，除了那几样非常有特点的H5技术，比如LocalStorage、Canvas、Offline Application、图形绘制或者CSS的圆角等，剩下的H5属性、CSS3很多都细节都我们自己都不知道是否用到了H5技术，所以今天特地整理了下H5的元素和属性。经过整理和发现，原来我们不经意中已经用了很多H5和CSS3属性了，不过这些属性和元素现代浏览器都支持的很好了。

1.HTML和XHTML属性基础

还是那句话：HTML5不是什么新技术，它是HTML和XHTML的进化版本，用好H5就应该熟练掌握HTML和XHTML，明白HTML和XHTML的由来，XHTML的设计目的最好。

1.1基本属性：

HTML中每个元素（标签）都有下面三个基本属性：

符号	名称	作用
class	类	定义元素的类名称
id	id	定义元素的id，文档内唯一
style	样式	定义元素的样式，覆盖外部css，优先应用这些样式。

但是下面这几个元素没有这些属性

符号	作用	备注
html/head	文档和头部基本结构
title	网页表头
base	网页信息	比如<base url = “” >
meta	网页元数据信息标记	定义网页的一些信息，比如编码
param	元素参数信息	基本上没见过
style/script	网页样式和脚本

1.2.语言属性：

基本上每个元素都有下面的语言属性：

符号	名称	作用
lang	语言编码	定义元素的语言编码，用的少。
dir	文字方向	取值：ltr rtl (left to right 和 right to left)

下面这几个元素没有这些属性：

符号	作用	备注
frameset/frame/iframe	定于框架的标记
br	换行标记。
hr	水平线	比如<base url = “” >
base	网页基本信息	定义网页的一些信息，比如编码
param	元素参数信息	基本上没见过
script	网元脚本标签

1.3.键盘属性：

符号	名称	作用
accesskye		指定用Alt + 快捷键的访问，IE、firefox支持不好
tabindex		tab的访问顺序

这两个属性用的很少！而且browser支持不是很好！

1.4.内容属性：

符号	名称	作用
alt	替换属性	元素的替换文本
title		元素的提示文本
longdesc		元素包含的大段描述信息
cite		包含内容的引用信息
datetime		包含内容的日期和时间

alt和title不等价，并不应该混用。但是它们在IE上被混用了，alt是在元素无法显示的时候替换问题，而title才是鼠标移动上去的提示信息。

剩下的三个很少用，最要也别用，支持性不是很好。

下面的标签不具有这些属性

符号	作用	备注
html/head	定义页面
title	标题
meta	网页元信息
base、basefont	网页基本信息
param	元素参数信息	基本上没见过
script	网元脚本标签

2.H5中标签的三种写法

标签写法在H5中比HTML 4规范，但是没有XHTML要求那么严格，XHTML需要指定DOCTYPE来告诉browser使用什么DTD解析和验证文档，要求的标签书写方式很严格，甚至区分大小写。但是H5是以实用为标准的，所有要求都没有那么严格。

（1）H5的元素不区分大小写，但是推荐全部小写。

（2）下面几个标签可以省略不写，这在HTML 4中是可以的，但是XHTML中不可以：

html、head、body和colgroup、tbody。

（3）下面的标签不允许采用标签对结束的，必须用<元素 />形式：

area / base / br / col / command / embed / hr / img / input / keygen / link / meta / param / source / track / wbr

（4）剩下的全部随意，可以标签对结束，可以自封闭，看喜好，看规范，看方便程度。

（5）H5的DOCTYP使用html，不用指定DTD，一般格式：

<!DOCTYPE html>或者<!DOCTYPE HTML SYSTEM “about:legacy-compat”>

H5的DOCTYPE写法要求在文档开头，而且不能有空行，和XML的<xml charset=”utf-8”>的开头要求一样。这个开头会触发浏览器采用标准模式解析文档，包括使用标准Box Model。

PS：标准模式和怪异（quirks）对应，quirks模式就是IE的模式。

3.H5中的元素

3.1新增结构元素：

下面几个是H5新增的用来定义文档内容结构的，是针对内容的！！

符号	作用
header	区别head，是标记内容头部的
footer	标记内容脚部区域。
section	页面中独立的一块儿
article	独立的文章内容
aside	相关内容或者引文
nav	导航类的辅助内容。

H5的思想还是延续的表现和内容分离，所以H5新增的标签针对的是内容，不是网页结构，据说这些标签是Google使用了大量的网络爬虫统计分析主流Web页面，得出结果发现很多都有类似

这样的标签写法，所以为了方便，H5增加了这几个针对内容的标签，目的是让内容的语音更明确。上面这些标签和html、head、body不一样，他们可以出现多次，从内容的角度去理解适用他们，让他们替代<div id=”nav”></div>这样的标签。

3.2.H5新增标签

下面是H5新增的标签，可以关注下video、audio、canvas这几个，剩下的有需要可以试试，反正Browser不支持就会ignore：

符号	作用
hgroup	对内容块儿的标题进行组合。
figure	一段独立的流内容，子标签figcaption规定标题
video	视频，替代object标签
embed	每天，可以是多种格式
mark	强调，高亮，类似<span>
canvas	画布，结合JS API绘制图形等动画
output	输出
source	定义媒体资源，类似param
menu	菜单列表
ruby	ruby注释
rt	字符的解释或发音
rp	在ruby注释中使用，定义不之处ruby元素的浏览器的显示
wbr	软换行，表示当宽度不够时才换行
command	命了按钮
details	表示一些详细信息。用一个小三角隐藏内容
summary	配合details，规定标题
datalist	可选数据列表，与input元素配合使用，里面放options。
datagrid	树行结构的列表，不知道怎么用。
keygen	生成秘钥
progress	运行中的进程，可以使用它来显示JS中耗时函数的进程。
meter