HTML5的功能元素
1、hgroup元素
hgroup 标签用于对网页或区段（section）的标题进行组合。
<!DOCTYPE html>
<title>Hello world</title>
<hgroup>
<h1>标题1</h1>
<h2>标题2</h2>
</hgroup>
<p>这是内容...</p>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
相当于<div>…</div>。
2、figure元素
figure 标签规定独立的流内容（图像、图表、照片、代码等等）。
figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
figcaption元素为figure元素组添加标题。
<!DOCTYPE html>
<title>Hello world</title>
<figure> <figcaption>标题1</figcaption> <p>这是内容1......
</figure>
<figure> <figcaption>标题2</figcaption> <p>这是内容2......
</figure>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
3、video元素
定义视频。
<!DOCTYPE html>
<title>Hello world</title>
<video src="http://www.w3school.com.cn/i/movie.ogg" controls="controls"> 您的浏览器不支持此元素。
</video>
- 1
- 2
- 3
- 4
- 5
- 6
4、audio元素
定义音频。
<!DOCTYPE html>
<title>Hello world</title>
<audio src="http://www.w3school.com.cn/i/horse.ogg" controls="controls"> 您的浏览器不支持此元素。
</audio>
- 1
- 2
- 3
- 4
- 5
5、source元素
source为video、audio元素定义媒介资源。
<!DOCTYPE html>
<meta charset="UTF-8"/>
<title>Hello world</title>
<audio controls="constrols"> <source src="http://www.w3school.com.cn/i/horse.ogg" type="audio/ogg"/> 您的浏览器不支持此元素。
</audio>
<br/>
<video controls="controls"> <source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg"/> 您的浏览器不支持此元素。
</video>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
6、embed元素
用来插入各种多媒体，格式可以是wav、mp3等、
<!DOCTYPE html>
<title>Hello world</title>
<embed src="http://www.w3school.com.cn/i/horse.ogg"/>
- 1
- 2
- 3
- 4
7、canvas元素
表示图形，如图表和其他图像。这个元素本身没有行为，仅提供一块画布，但它把一个绘图API展现给客户端JavaScript，以使脚本能够把想绘制的东西绘制到这块画布上。
<!DOCTYPE html>
<title>Hello world</title>
<canvas id="cans"></canvas> <script> var canvas = document.getElementById('cans'); var ctx = canvas.getContext('2d'); ctx.fillStyle = '#FF0000'; ctx.fillRect(0,0,100,100); </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
8、output元素
output 标签定义不同类型的输出，比如脚本的输出。
<!DOCTYPE html>
<title>Hello world</title>
<form oninput="x.value = parseInt(a.value)+parseInt(b.value)">
0 <input id="a" type="range" value="50" step="1"/>100
+<input id="b" type="number" value="50"/>
=<output name="x" for="a b"></output>
</form>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
9、progress元素
progress 标签定义运行中的进度（进程）。
可以使用 progress 标签来显示 JavaScript 中耗费时间的函数的进度。
<!DOCTYPE html>
<title>Hello world</title>
<progress value="68" max="100"></progress>
<br/>
<progress></progress>
- 1
- 2
- 3
- 4
- 5
- 6
10、mark元素
高亮显示文本。
<!DOCTYPE html>
<title>Hello world</title>
<p>这是一个<mark>美好</mark>时代！
- 1
- 2
- 3
- 4
11、ruby、rt、rp元素
ruby 标签定义 ruby 注释（中文注音或字符）。 ruby标签与rt标签一同使用。
ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 “ruby” 元素时显示的内容。
<!DOCTYPE html>
<title>Hello world</title>
<ruby>中<rt>zhong</rt></ruby>
- 1
- 2
- 3
14、html5内容自适应
在网页代码的头部，加入一行viewport元标签
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
- 1
<!DOCTYPE html>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>Hello world</title>
<div>这是一个软换行这是一个软换行这是一个软换行这是一个软换行这是一个软换行这是>一个软换行这是一个软换行这是一个软换行这是一个软换行这是一个软换行这是一个软换行
这是一个软换行这是一个软换行这是一个软换行这是一个软换行这是一个软换行这是一个软
换行</div>
<br/>这是一个硬换行
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
15、details、summary元素
details用于描述文档或文档某个部分的细节。
summary可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。
<!DOCTYPE html>
<details open="open">
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>
- 1
- 2
- 3
- 4
- 5
- 6
16、datalist元素
datalist标签定义选项列表。常与 input 元素配合使用，来定义 input 可能的值。
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。可以使用 input 元素的 list 属性来绑定 datalist。
<!DOCTYPE html>
<title>Hello World</title>
<input id="car" list="cars"/>
<datalist id="cars"> <option value="BMW"/> <option value="Ford"/> <option value="Volvo"/>
</datalist>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
谢谢阅读。
文章来源: blog.csdn.net，作者：WongKyunban，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/weixin_40763897/article/details/89332771
- 点赞
- 收藏
- 关注作者
评论（0）