1.语义化结构标签
(1)最常用语义标签
- header 头部标签
- footer 底部标签
- nav 导航标签
- side 侧边栏
<body>
<!-- 头部 -->
<header></header>
<!-- 导航栏 -->
<nav></nav>
<!-- 侧边栏 -->
<aside></aside>
<!-- 主体 -->
<main></main>
<!-- 底部 -->
<footer></footer>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>语义化结构标签</title>
</head>
<body>
<!-- 头部 -->
<header>
<h1>这里是主页标题</h1>
<p>由比尔盖茨发布</p>
</header>
<hr>
<!-- 导航栏 -->
<nav>
导航栏：
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>
<hr>
<!-- 侧边栏 -->
<aside>
<h4>深圳公园</h4>
<p>深圳公园是的题乐园，是国家 AAAA 级旅游景区</p>
</aside>
<hr>
<!-- 主体 -->
<main>
<h1>HTML5</h1>
</main>
<hr>
<!-- 底部 -->
<footer>
<p>作者：deng</p>
<p><a href="">www.deng.com</a></p>
</footer>
</body>
</html>
运行结果如下：
(2)其他语义化标签(了解)
<bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command> 定义命令按钮，比如单选按钮、复选框或按钮
<details> 用于描述文档或文档某个部分的细节
<dialog> 定义对话框，比如提示框
<summary> 标签包含 details 元素的标题
<figure> 规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption> 定义 <figure> 元素的标题
<mark> 定义带有记号的文本。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<progress> 定义任何类型的任务的进度。
<ruby> 定义 ruby 注释（中文注音或字符）。
<rt> 定义字符（中文注音或字符）的解释或发音。
<rp> 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section> 定义文档中的节（section、区段）。
<time> 定义日期或时间。
<wbr> 规定在文本中的何处适合添加换行符。
<details>
<summary>全国的城市</summary>
<p>北京</p>
<p>北京1</p>
<p>北京2</p>
<p>北京3</p>
</details>
<dialog open>
温馨提示: 你已进入监控区域
</dialog>
<progress max="100" min="1" value="30"> </progress>
哈哈哈哈<mark>嘿嘿</mark>哈哈哈哈哈哈
2.多媒体标签
<audio> 定义音频内容
<video> 定义视频（video 或者 movie）
<source> 定义多媒体资源 <video> 和 <audio>
<embed> 定义嵌入的内容，比如插件。
<track> 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。
其中，<audio>和<video>标签中，autoplay为自动播放，controls为控制按钮。
使用如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多媒体标签</title>
</head>
<body>
<h2>1.视频内容</h2>
<p>
<video src="https://www.w3school.com.cn/i/video/shanghai.mp4" controls autoplay></video> <!-- 写法一 -->
<video width="640" height="360" controls autoplay>
<source src="https://www.w3school.com.cn/i/video/shanghai.mp4" type="video/mp4">
<source src="" type="video/ogg">
</video> <!-- 写法二，视频资源一样，格式不同，需浏览器播放支持 -->
</p>
<h2>2.音频内容</h2>
<p>
<audio src="https://www.w3school.com.cn/i/horse.ogg" controls autoplay></audio><!-- 写法一 -->
<audio controls autoplay>
<source src="https://www.w3school.com.cn/i/movie.ogg" type="audio/ogg">
<source src="" type="audio/mpeg">
</audio> <!-- 写法二，音频资源一样，格式不同，需浏览器播放支持 -->
</p>
</body>
</html>
3.新的 Input 类型
- number
- tel
- date
- color
- datetime
- datetime-local
- month
- range
- search
- time
- url
- week
<input type="number"/> <br><br>
<input type="tel"/> <br><br>
<input type="date"/> <br><br>
<input type="color"/> <br><br>
<input type="datetime"/> <br><br>
<input type="datetime-local"/> <br><br>
<input type="email"/> <br><br>
<input type="month"/> <br><br>
<input type="range"/> <br><br>
<input type="search"/> <br><br>
<input type="time"/> <br><br>
<input type="url"/> <br><br>
<input type="week"/> <br><br>
4. canvas画布
<body>
<canvas id="mycanvas" width="800" height="600"></canvas>
<script>
var canvas = document.querySelector('#mycanvas');
var ctx = canvas.getContext('2d');
ctx.moveTo(10,10);
ctx.lineTo(200, 150);
ctx.lineTo(20, 200);
ctx.stroke();
</script>
</body>
477
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
