您的位置:首页 > Web前端 > HTML5

认识 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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: