文章目录
- 前言
- 1. HTML5 新增的语义化标签
- 2. HTML5 新增的多媒体标签
- 2.1 video 标签
- 2.2 audio 标签
- 3. HTML5 新增的 input 标签
- 4. HTML5 新增的表单属性
前言
- 系列文章目录：
- [目录]HTML CSS JS
- 根据视频和PPT整理
- 视频及对应资料：
- HTML CSS
- 老师笔记： https://gitee.com/xiaoqiang001/html_css_material.git
- 视频：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程
- 视频对应资源
- 链接：【https://pan.baidu.com/s/1k1dpC6iGA93c6gVsUvPqYw】
- 提取码：1234
- 【GitHub 仓库链接】
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>
