前言
- 系列文章目录：
- 根据视频和PPT整理
- 视频及对应资料：
- HTML CSS
HTML5 针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。
1. HTML5 新增的语义化标签
以前布局，基本用 div 来做。div 对于搜索引擎来说，是没有语义的。为了增强语义，HTML5新增了语义化标签：
1.<header>：头部标签
2.<nav>：导航标签
3.<article>：内容标签
4.<section>：定义文档某个区域，功能类似div
5.<aside>：侧边栏标签
6.<footer>：尾部标签
这种语义化标准主要是针对搜索引擎的，这些新标签页面中可以使用多次
2. HTML5 新增的多媒体标签
新增的多媒体标签主要包含两个：
1.音频：<audio>
2.视频：<video>
使用它们可以在页面中嵌入音频和视频.
2.1 video 标签
语法：
<video src="文件地址"></video>
video 标签的常见属性：
代码示例：
<body>
<!--
controls 显示播放控件
autoplay 现在浏览器基本上不支持自动播放
loop 循环播放
-->
<audio
src="./music.mp3"
controls
autoplay
loop
></audio>
</body>
2.2 audio 标签
语法：
<audio src="文件地址"></audio>
audio 标签的常见属性：
代码示例：
<body>
<!--
controls 显示播放控件
autoplay 现在浏览器基本上不支持自动播放
loop 循环播放
-->
<audio
src="./music.mp3"
controls
autoplay
loop
></audio>
</body>
3. HTML5 新增的 input 标签
注意：需要使这些表单能够自动验证填写的信息必须写在 form 标签中，当点击 type 为 submit 类型的按钮即可验证表单。
<body>
<form action="">
<ul>
<li>
邮箱：<input type="email">
</li>
<li>
网址：<input type="url">
</li>
<li>
日期：<input type="date">
</li>
<li>
时间：<input type="time">
</li>
<li>
数字：<input type="number">
</li>
<li>
手机号码：<input type="tel">
</li>
<li>
搜索框：<input type="search">
</li>
<li>
颜色：<input type="color">
</li>
<li>
<input type="submit" value="提交">
</li>
</ul>
</form>
</body>
4. HTML5 新增的表单属性
代码示例：
<style>
/* 修改placeholder里面的字体颜色 */
input::placeholder {
color: aquamarine;
}
</style>
<body>
<form action="">
<!-- autocomplete 通常是关闭的，防止保存用户的重要信息 -->
<input type="text" required placeholder="hello world" autofocus autocomplete="on">
<!-- 设置多文件提交 -->
<input type="file" multiple>
<input type="submit" value="提交">
</form>
</body>
1379
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
