认识 HTML5 的新增元素
2020-07-24 19:57
846 查看
为什么会有HTML5这个版本?
4.01后,w3c并不看好html,他们转而去发展XHTML,但并不理想。这时候由浏览器厂商们提出的H5标准更能顺应web2.0的时代,所以h5被慢慢推广了起来。
2004年,浏览器主要厂商成立了WHATWG(Web Hypertext Application Technology Working Group)组织,它们创立了HTML5规范,专门针对WEB应用开发新功能(web应用新功能被认为是HTML4中最薄弱的环节)。WEB2.0也正是那个时候提出的。WEB2.0实至名归,开创了web的第二个时代,旧的静态网站逐渐让位于需要更多特性的动态网站和社交网站。2014年10月底(29日),HTML5规范正式定稿。
常见的html5新增语义化标签
1.header 页面头部
2.footer 页脚
3.article 定义页面独立的内容区域
4.aside 定义页面的侧边栏内容
5.details 文档某个部分的细节
6.summary 是details中的标题
7.figure 规定独立的流内容
8.figcaption 是figure的标题
9.mark 标记
10.nav 导航链接
11.meter用来表示范围已知且可度量的内容。
12.ruby加注释
HTML5新增的结构标签
<header>...</header>头部
<nav>...</nav>导航
<section>...</section>定义文档中的节。比如章节、页眉、页脚或文档中的其它部分
<aside>...</aside>侧边栏
<footer>...</footer>页脚
<article>...</article>代表一个独立的、完整的相关内容块,可独立于页面其它内容使用。例如一篇完整的论坛帖子,一篇博客文章,一个用户评论等
HTML5新增的结构标签
<figure></figure>用于对元素进行组合。多用于图片与图片描述组合
<figure> <img src="img.gif" alt="figure标签" title="figure标签" /> <figcaption>figure的标题</figcaption> </figure>
<details>标签用于描述文档或文档某个部分的细节
IE不支持
<details>标签
<details> <summary>details中的标题</summary> <p>详细的内容</p> </details>
<mark></mark>
定义带有记号的文本,它会给你要突出显示的文本下加个背景色。
如:
<p>你是<mark>大长腿</mark>吗?</p>
<meter></meter>标签
<meter>标签定义度量衡。仅用于已知最大和最小值的度量。
<meter min="0" max="100" value="80"></meter>
low:最低临界点
high:最高临界点
<meter min="0" max="100" value="81" low="20" high="80"></meter>
<progress></progress>标签
<progress>标签定义运行中的进度(进程)
<progress max="100" value="20"></progress>
max:定义完成值
value:定义当前值
<datalist></datalist>标签
<datalist>标签定义选项列表,与 input 元素配合使用该元素,来定义 input 可能的值
datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。
请使用 input 元素的 list 属性来绑定 datalist。
<input id="myCar" list="cars" /> <datalist id="cars"> <option value="BMW"> <option value="Ford"> <option value="Volvo"> </datalist>
<video> </video>标签
<video> 标签定义视频,比如电影片段或其他视频流 <video src="movie.mp4" controls> 您的浏览器不支持 video 标签。 </video>
<audio></audio>标签
<audio>标签定义声音,比如音乐或其他音频流
<audio src="someaudio.mp3"> 您的浏览器不支持 audio 标签。 </audio>
<source></source>标签
<source>标签为媒介元素(比如
<video>和
<audio>)定义媒介资源。
<source>标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
<audio controls> <source src="horse.ogg" > <source src="horse.mp3" > Your browser does not support the audio element. </audio>
<embed/>标签
<embed>标签定义嵌入的内容,比如插件,当然也可以用来嵌入声音
<embed>标签必须有 src 属性
<embed src="helloworld.mp4" />
<canvas> </canvas>标签
canvas只是个容器,你可以通过控制坐标在canvas上绘制图形。一般配合js使用能实现非常复杂的动画效果
<canvas id="myCanvas">你的浏览器不支持canvas标签</canvas> <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script>
相关文章推荐
- 如何让旧版IE浏览器认识HTML5元素
- HTML5教程:3.1 新增的主体结构元素
- HTML5表单新增元素与属性
- HTML5表单相关新增元素和属性
- html5学习笔记3-新增表单元素
- HTML5新增文档结构元素
- Web前端学习笔记(2)-html5新增的结构元素
- HTML5表单及其他新增和改良元素
- HTML5新增结构元素
- html5 新增元素
- HTML5教程:3.2 新增的非主体结构元素
- HTML5新增的元素和废除的元素
- 从零开始学 Web 之 HTML5(二)表单,多媒体新增内容,新增获取操作元素,自定义属性
- html5新增的其他常用元素
- HTML5新增的主体结构元素和非主体结构元素
- html5中新增非主体结构元素
- HTML5 学习笔记4-表单新增的元素和属性
- HTML5新增的属性与元素(二)
- 自定义html标记替换html5新增元素
- 疯狂的表单-html5新增表单元素和属性