- 语义化标签
◼ 在HMTL5之前，我们的网站分布层级通常包括哪些部分呢？
header、nav、main、footer
◼ 但是这样做有一个弊端：
1.我们往往过多的使用div, 通过id或class来区分元素；
2.对于浏览器来说这些元素不够语义化；
3.对于搜索引擎来说, 不利于SEO的优化；
◼ HTML5新增了语义化的元素：
<header>：头部元素
<nav>：导航元素
<section>：定义文档某个区域的元素
<article>：内容元素
<aside>：侧边栏元素
<footer>：尾部元素
这些元素不自带样式，都是块级元素这一个设置。
2.媒体标签
（1）audio：音频
<audio src="./assets/yhbk.mp3" controls autoplay muted></audio>
复制代码
属性：
controls 控制面板
autoplay 自动播放
Muted 静音播放
（2）video视频
<video src="./assets/fcrs.mp4" width="600" controls muted></video>
属性：
controls 控制面板 是否显示控制栏,包括音量，跨帧，暂停/恢复播放
Width 设置video宽度
Height 设置video高度
（3）source标签
因为浏览器对视频格式支持程度不一样，为了能够兼容不同的浏览器，可以通过source来指定视频源。
image.png
image.png
3.input元素的扩展内容
placeholder：输入框的占位文字
multiple：多个值
autofocus：自动对焦
◼ 另外对于input的type值也有很多扩展：
date
time
number
tel
color
email
<body>
<input type="text" placeholder="占位文本" autofocus>
<select multiple>
<option value="">苹果</option>
<option value="">香蕉</option>
<option value="">句子</option>
</select>
<input type="text" autofocus>
<input type="color">
<input type="date">
<input type="range" min="0" max="1000">
<input type="email">
<input type="tel" name="" id="">
</body>
image.png
4.增全局属性 data-*
在HTML5中, 新增一种全局属性的格式 data-*, 用于自定义数据属性:
1.data设置的属性可以在JavaScript的DOM操作中通过dataset轻松获取到；
2.通常用于HTML和JavaScript数据之间的传递；
<body>
<div class="box" age="18" data-name="why" data-age="18" data-height="1.88"></div>
<script>
const boxEl = document.querySelector(".box")
console.log(boxEl.dataset)
</script>
</body>
image.png
网友评论