一、语义化标签
HTML5中新增的语义化标签
- section表示内容块和div的作用一样
- 6个常用的语义化标签默认都是块级元素
二、音视频标签
音视频标签的使用
一:音频标签audio
二:视频标签video
三:音视频标签共有的属性
- src路径地址
- controls控件(显示)
- autoplay自动播放
- loop 循环
- muted 静音
四:不同属性的使用(视频标签独有的属性)
- poster视频未加载首屏图片
五:不同的浏览器对于音视频的后缀名要求不一样
-
source引入资源
三、HTML5中表单中type的属性值使用
HTML5中表单中type的属性值使用
-
智能表单需要在form表单框中使用
-
需要有提交按钮
-
智能表单只能检测当前输入的内容是否符合格式,为空的时候是可以提交的
邮件:
地址:
数字:
滑块:
四、HTML5中新增的时间表单
<form>
<p> 日: <input type="date"> </p>
<p> 月: <input type="month"> </p>
<p> 周: <input type="week"> </p>
<p> 时间: <input type="time"> </p>
<p> 本地时间: <input type="datetime-local"> </p>
<p> 标准时间: <input type="datetime"> </p>
<!-- 过时了 可以用上面的本地时间 -->
</form>
五、表单新增的属性
input{
font-size: 12px;
}
input::-webkit-input-placeholder{
color: red;
}
</style>
<form novalidate>
<p> 姓名: <input type="text" required autofocus maxlength="11"> </p>
<p> 密码: <input type="password" placeholder="请输入密码" autofocus> </p>
<p> <input type="submit"> </p>
</form>
六、模拟下拉菜单
<form>
<input type="text" list="history" name="history" autocomplete="off">
<datalist id="history">
<option value="http://www.baidu.com">百度</option>
<option value="http://www.tencent.com">腾讯</option>
<option value="http://www.wangease.com">网易</option>
<option value="http://www.uc.com">UC</option>
<option value="http://www.kuaibo.com">快播</option>
</datalist>
<input type="submit">
</form>
七、数学运算的案例
-
要在form环境下使用
-
需要获取到用户输入的值 DOM结构.value
-
前端中最简单的获取DOM结构的方式是绑定id input1.value
-
所有的input的value值默认都是字符串类型(带有引号)
-
字符串转换为数字类型 parseInt、parseFloat、Number、Math.round
+ =