前言
- 系列文章目录：
- 根据视频和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>
