HTML5:语义化标签:
标签 | 描述 |
<header> | 定义页面主体上的头部,header标签往往在一对body标签之中 |
<footer> | 定义页面的底部(页脚) |
<section> | 定义 用于表达书的一部分或一章,或者一章内的一节 |
<nav> | 用于菜单导航、链接导航的标签,是navigator的缩写。 |
<article> | 用于表示一篇文章的主体内容,一般为文字集中显示的区域 |
<aside> | 用以表达注记、贴士、侧栏、摘要、插入的引 用等作为补充主体的内容。从一个简单页面显示上,就是边栏,可以在左边,也可以在右边。从一个页面的局部看,就是摘要 |
<hgroup> | 给标题分组,为标题或者子标题进行分组,通常与h1-h6元素组合使用 |
<figure > |
标签规定独立的流内容(图像、图表、照片、代码等等)。
figcaption 元素写在 figure 内 为其 添加标题
|
<source > | 为媒介元素(比如 video 和 audio)指定多个播放格式与编码,浏览器会自动选择第一个可以识别的格式。非闭合标签,只有开始标签,没有结束标签。 |
<datalist > |
定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
请使用 input 元素的 list 属性来绑定 datalist。
|
<embed > | 定义嵌入的内容,比如插件。<embed src="helloworld.swf" /> |
<time > | 定义日期或时间,或者两者。 |
<address > | ①标签定义文档或文章的作者/拥有者的联系信息。 ②如果 <address> 元素位于 <body> 元素内,则它表示文档联系信息。
③如果 <address> 元素位于 <article> 元素内,则它表示文章的联系信息。
④<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行
注意: 标签不应该用于描述通讯地址,除非它是联系信息的一部分。元素通常连同其他信息被包含在 <footer> 元素中。
|
<map> |
定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。
注意:<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性(取决于浏览器),所以我们应同时向 <map> 添加 id 和 name 属性。
|
<area> |
永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
圆形:shape="circ",coords="x,y,z"
多边形:shape="poly",coords="x1,y1,x2,y2,x3,y3,..."
矩形:shape="rect",coords="x1,y1,x2,y2"
|
<mark> | 定义页面中需要突出显示或高亮显示的内容 |
<details> | 标签定义元素的细节,目前只有 Chrome 和 Safari 6 支持 <details> 标签。 与 <summary> 标签 配合使用可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details。 |
<video>视频标签:定义视频,比如电影片段或其他视频流。
<video>标签的属性:
属性 | 值 | 描述 |
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
height | pixels | 设置视频播放器的高度。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
preload | preload | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
src | url | 要播放的视频的 URL。 |
width | pixels | 设置视频播放器的宽度。 |
<audio>音频标签:定义声音,比如音乐或其他音频流。
<audio>标签的属性:
属性 | 值 | 描述 |
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
preload | preload | 如果出现该属性,则音频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
src | url | 要播放的音频的 URL。 |
<canvas>画布标签:定义图形,比如图标和其他图像
属性 | 描述 |
设置或返回用于填充绘画的颜色、渐变或模式 | |
设置或返回用于笔触的颜色、渐变或模式 |
矩形
方法 | 描述 |
创建矩形 | |
绘制“被填充”的矩形 | |
绘制矩形(无填充) | |
在给定的矩形内清除指定的像素 |
路径
方法 | 描述 |
填充当前绘图(路径) | |
绘制已定义的路径 | |
起始一条路径,或重置当前路径 | |
把路径移动到画布中的指定点,不创建线条 | |
创建从当前点回到起始点的路径 | |
添加一个新点,然后在画布中创建从该点到最后指定点的线条 |
转换
方法 | 描述 |
旋转当前绘图 | |
重新映射画布上的 (0,0) 位置 |
方法 | 描述 |
在画布上绘制“被填充的”文本 | |
在画布上绘制文本(无填充) |
图像绘制
方法 | 描述 |
向画布上绘制图像、画布或视频 |
像素操作
属性 | 描述 |
返回 ImageData 对象的宽度 | |
返回 ImageData 对象的高度 |
其他
方法 | 描述 |
save() | 保存当前环境的状态 |
restore() | 返回之前保存过的路径状态和属性 |
以上是我总结的HTML5常用新增标签和一些标签的属性,如果有问题希望小伙伴们不吝赐教!
问题:许多标签没有自己独特的功能,表现就像div,那么语义化的好处是什么?
1. 有些标签是带有自己的样式和功能的,比如datalist 、detail 标签,这种类型的标签就像一个小组件,这不就是angular等前端的框架扩展html实现的东西吗? HTML会成长成什么样子,who knows?
2. 试想,如果我们没有加载到外部的css文件,我们的页面没有披上css华丽的外衣,变成了皇帝的新装,还好这些语义化的标签,让我们的页面不至于一丝不挂,远看像裸奔,近看,吊带、小裤裤、和袜子结构完整,似乎还能体现出你的衣品
3. 有利于SEO(serch engine optimization)HTML优化是网站内部优化的重点,<h1>-<h6> <title> <img> 等标签都可以告诉爬虫信息和重点,可以更好的和搜索引擎沟通,一个结构完整标签使用恰当的html 文档就像一篇好文章,一看就知道你的主题、中心思想、内容深度和广度,文笔构思
4.语义化标签对我们这样的程序猿 也是人性化的,增加代码的可读性,方便了我们开发和维护页面,有了统一的标准,减少差异化,有利于团队合作