HTML5新增内容
- 语义化标签
- 表单类型
- 表单元素
- 表单属性
- 表单事件
- 多媒体标签
语义化标签
语义化标签的优点
- 提升可访问性，即使在没有CSS的支持下，浏览器依然能呈现出良好的内容结构
- 有利于搜索引擎优化（SEO）
- 结构清晰，利于维护
- header——页面头部
- main——页面主要内容
- footer——页面底部
- nav——页面导航
- section——Web页面中的一块区域，相当于div
- article——独立的文章内容
- aside——侧边栏
- video、audio——视频、音频标签
表单类型
input新增的类型
表单元素
在我们之前的html中，表单元素必须放在form元素所包含的里面，在html5中，可以把他们写在页面上的任何一个地方，然后给该元素增加一个form属性，form属性的值为form表单的id
<form method="get" id="test">
<input type="text" name="name"/>
<input type="password" name="password"/>
<input type="submit" value="提交">
</form>
<input type="text" name="confirm" form="test">
表单属性
<!doctype html>
<html>
<head></head>
<body>
<form action="http://localhost/test.php" method="post" id="register"></form>
<input type="text" name="user" value="" form="register" />
<input type="password" name="pwd" value="" form="register" />
<select name="year" form="register">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="注册" form="register" />
<hr />
<!--
form: html5表单将form和它所提交的内容分开，这样有利于排版，但是需要在给提交的内容标签添加form属性。
例如：<input type="text" name="user" value="" form="register" />
-->
默认值:<input type="text" name="test" value="" pattern="\d{3}" placeholder="我是新的HTML5的默认值"
form="register" /><br />
邮箱：<input type="email" name="youxiang" value="" form="register" required="required" /><br />
URL：<input type="url" name="url" value="" form="register" /><br />
DATE:<input type="date" name="riqi" value="" form="register" /><br />
TIME：<input type="time" name="shijian" value="" form="register" /><br />
Month：<input type="month" name="yue" value="" form="register" /><br />
WEEK：<input type="week" name="zhou" value="" form="register" /><br />
数字：<input type="number" name="shuzi" value="" form="register" autofocus="autofocus" /><br />
滑动条：<input type="range" name="huadong" value="" form="register" max="10" step="2" /><br />
搜索：<input type="search" name="sousuo" value="" form="register" results="n" /><br />
颜色：<input type="color" name="yanse" value="" form="register" /><br />
<hr />
自动填充表单<br />
<input type="text" name="auto" value="" list="movie" />
<datalist id="movie">
<option>四海</option>
<option>奇迹</option>
<option>水门桥</option>
</datalist>
<hr />
输出表单output<br />
<form action="" method="post" oninput="result.value=parseInt(no1.value)+parseInt(no2.value)">
<input type="number" name="no1" value="" />
<input type="number" name="no2" value="" />
<output name="result"></output>
</form>
</body>
</html>
表单事件
- oninput:监听当前指定元素内容的改变
- onkeyup:键盘弹起的时候触发
- oninvalid:当验证不通过时触发
<form action="">
用户名：<input type="text" name="userName" id="userName"><br>
电话：<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"> <br>
<input type="submit">
</form>
<script>
/*1.oninput:监听当前指定元素内容的改变：只要内容改变(添加内容，删除内容)，就会触发这个事件*/
document.getElementById("userName").oninput=function(){
console.log("oninput:"+this.value);
}
/*onkeyup:键盘弹起的时候触发：每一个键的弹起都会触发一次*/
document.getElementById("userName").onkeyup=function(){
console.log("onkeyup:"+this.value);
}
/*oninvalid:当验证不通过时触发*/
document.getElementById("userPhone").oninvalid=function(){ /*自定义时可以操作*/
/*设置默认的提示信息*/
this.setCustomValidity("请输入合法的11位手机号");
}
</script>
多媒体标签
<!-- 视频 -->
<video src="文件地址"></video>
<!-- 音频: 两种写法 -->
<audio src="文件地址" controls="controls"></audio>
<audio controls="controls">
<source src="happy.mp3" type="audio/mpeg">
</audio>
- autoplay：设置视频自动播放（谷歌浏览器需要添加muted才能自动播放）
- controls：可以向用户显示播放控件（播放按钮，进度条，全屏等）
- width，height：设置播放器宽度，高度
- loop：设置视频循环播放
- muted：设置静音播放
- preload:auto;(预先加载视频)/none(不预先加载) 与autoplay相冲突，设置了autoplay属性，preload属性会失效
- poster:imgurl ：设置没有播放之前显示的占位图片 音频没有宽高及poster属性
