html5新增标签
(1) 语义化结构标签
最常用语义标签
- header 头部标签
- footer 底部标签
- nav 导航标签
- aside 侧边栏
- main 主体
<!DOCTYPE html>
<html lang="en">
<body>
<header>
头部
</header>
<!-- 导航栏 -->
<nav>
<a href="">1</a>
<a href="">1</a>
<a href="">1</a>
</nav>
<aside>
侧边栏
</aside>
<main>
主体部分
</main>
<footer>
底部
</footer>
</body>
</html>
其他语义化标签 (了解)
<bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置。
<command> 定义命令按钮,比如单选按钮、复选框或按钮
<details> 用于描述文档或文档某个部分的细节
<dialog> 定义对话框,比如提示框
<summary> 标签包含 details 元素的标题
<figure> 规定独立的流内容(图像、图表、照片、代码等等)。
<figcaption> 定义 <figure> 元素的标题
<mark> 定义带有记号的文本。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<progress> 定义任何类型的任务的进度。
<ruby> 定义 ruby 注释(中文注音或字符)。
<rt> 定义字符(中文注音或字符)的解释或发音。
<rp> 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
<section> 定义文档中的节(section、区段)。
<time> 定义日期或时间。
<wbr> 规定在文本中的何处适合添加换行符。
(2) 多媒体标签
<audio> 定义音频内容
<video> 定义视频(video 或者 movie)
<source> 定义多媒体资源 <video> 和 <audio>
<embed> 定义嵌入的内容,比如插件。
<track> 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。
audio 和 video 标签
<!DOCTYPE html>
<html lang="en">
<body>
<!-- 音频 -->
<audio src="https://www.w3school.com.cn/i/horse.ogg" controls>
<source src="https://www.w3school.com.cn/i/horse.ogg" type="audio/ogg">
<source src="https://www.w3school.com.cn//i/horse.mp3" type="audio/mpeg">
</audio>
<!-- 视频 -->
<video autoplay src="https://www.w3school.com.cn/i/movie.ogg" controls="controls">
your browser does not support the video tag
</video>
</body>
</html>
(3) 新的 Input 类型
- number
- tel
- date
- color
- datetime
- datetime-local
- month
- range
- search
- time
- url
- week
<!-- number, tel, date -->
<!DOCTYPE HTML>
<html>
<body>
<input type="number">
<input type="tel">
<input type="date">
</body>
</html>
(4) canvas画布
先了解一下
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
</body>
</html>