一、新增语义化标签
以前布局，我们基本用div 来做。 div 对于搜索引擎来说，是没有语义的
< header > :头部标签，< nav >: 导航标签，< article >： 内容标签
< section >:定义文档某个区域，< aside >:侧边栏标签，< footer >: 尾部标签<style> header, nav { height: 120px; background-color: pink; border-radius: 15px; width: 800px; margin: 15px auto; } section { width: 500px; height: 300px; background-color: skyblue; } </style> </head> <body> <header>头部标签</header> <nav>导航栏标签</nav> <section>某个区域</section> </body>
二、新增视频标签
// (1). video视频（多用mp4）
属性 值 描述 autoplay autoplay 视频就绪自动播放 controls controls 向用户显示播放控件 width pixels(像素) 设置播放器宽度 height pixels(像素) 设置播放器高度 loop loop 播放完是否继续播放该视频,循环播放 preload auto(预先加载视频)none(不应加载视频) 规定是否预加载视频(如果有了autoplay 就忽略该属性) src url 视频url的地址 poster lmgurl 加载等待的画面图片 muted muted 静音播放 一般不显示controls，让视频循环播放
<video src="文件地址" controls="controls"></video> <style> video { width: 100%; } </style> </head> <body> <video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/mi9.jpg"></video> </body>// (2). audio音频
属性 值 描述 autoplay autoplay 如果出现该属性，则音频在就绪后马上播放 controls controls 如果出现该属性，则向用户显示控件，比如播放按钮 loop loop 如果出现该属性，则向用户显示控件，比如播放按钮 src url 要播放的音频的url <audio src="文件地址" controls="controls"></audio> <audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>// (3)、总结
1. 音频标签和视频标签使用方式基本一致
2. 浏览器支持情况不同
3. 谷歌浏览器把音频和视频自动播放禁止了
4. 我们可以给视频标签添加muted属性来静音播放视频，音频不可以(可以通过JavaScript)
5. 视频标签是重点，我们经常设置自动播放，不适用controls控件，循环和设置大小属性
三、新增input类型
属性值 说明 type=“email” 限制用户输入必须为Email类型 type=“url” 限制用户输入必须为URL类型 type=“data” 限制用户输入必须为日期类型 type=“time” 限制用户输入必须为时间类型 type=“month” 限制用户输入必须为月类型 type=“week” 限制用户输入必须为周类型 type="number" 限制用户输入必须为数字类型 type="tel" 手机号码 type="search" 搜索框 type=“color” 生成一个颜色选择表单 <body> <!-- 我们验证的时候必须添加form表单域 --> <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>
四、新增表单属性
属性 值 说明 required required 表单拥有该属性表示其内容不能为空，必填 placeholder 提示文本 表单的提示信息，存在默认值将不显示 autofocus autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单 autocomplete off/on 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项，默认已经打开。如autocomplete=“on” ,关闭autocomplete=“off”，需要放在表单内，同时加上name属性，同时成功提交 multiple multiple 可以多选文件提示 <form action=""> <input type="search" name="sear" id="" required="required" placeholder="pink老师" autofocus="autofocus" autocommplete="off"> <input type="submit" value="提交"> </form>可以通过以下设置方式修改placeholder里面的字体颜色
input::placeholder {color: pink;
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
