HTML5新特性介绍---（初试博客园）
选择从事H5这个方向，还是有很多迷茫的，很多本来还在纠结JAVA方向，后来确定从事HTML5希望能走的长远，也希望自己写的一些学习记录能给初学者一些帮助。
<!DOCTYPE html>
<html>
<head>
<title>html5新特性</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<!-- 1.浏览器输入“caniuse”查询前端各种兼容 -->
<!-- 2.mark 标记标签 标记内容显示黄色 -->
大家好 我是<mark>adialike</mark>
<!-- 3.meter 量度标签 默认为零最大为1
value属性为当前值
low属性设置meter的最小阈值低于会变色警告
high设置最高阈值超过会变色警告
max最大值
min最小值
所有的值都是大于不是大于等于-->
<meter value=".3" min=".1" max="1" low=".5" high=".8"></meter>
<!-- 4.progree进度条标签
最小值为0不能设定
max最大值
value当前值 -->
<progress value="50" max="100"></progress>
<!-- 5.强制换行标签 wbr 用于拆分英语单词 可以强制让一些连贯的单词换行 -->
<p>有时候我们想把一些长英文强制换行，这时候我们就需要用wbr标签，比如is<wbr>hree</p>
<!-- 6.ruby 标注标记 常用语在文字上方标记 -->
<ruby>
番茄<rt>fanqie</rt>
🍐<rt>梨</rt>
<rp>这里显示当不兼容的时候显示的内容</rp>
</ruby>
<!-- 7.datalist 模糊查询
可以配合input来实现模糊查询
需要在input的list属性里绑定datalist
绑定的值就是datalist的id
datalist里的选项option建议都写在vaule中
否则低版本浏览器不兼容
出现查询不到的结果 -->
<input type="text" name="" placeholder="请输入" list="myDataList">
<datalist id="myDataList">
<option value="周星驰">周星驰</option>
<option value="周杰伦">周杰伦</option>
<option value="孙悟空">孙悟空</option>
<option value="猪八戒">猪八戒</option>
<option value="112234">112234</option>
</datalist>
<!-- 8.details折叠信息标签 类似于查看详情的场景 -->
<details>
<p>电脑</p>
<p>8核</p>
<p>4G独显</p>
</details>
<!-- 9.audio音频 html5的重要属性 多媒体标签
可以让我们不适用flash来进行音频播放
src属性代表音频的资源
controls属性就是来设置控制条的
有这个属性显示播放器控制条 不用写=
autoplay自动播放
mutea设置音频静音
loop设置循环播放
当音频播放完毕后循环继续无限次播放
preload 设置缓冲即预加载
audio支持的格式有mp3 ogg wav
-->
<audio src="http://59.110.139.104:3000/images/music.mp3" controls autoplay autoplay loop preload></audio>
<audio src="123.mp3" controls></audio>
<!-- 10.html5的重要属性 多媒体标签
可以让我们不适用flash来进行音频播放
src属性代表音频的资源
controls属性就是来设置控制条的
有这个属性显示播放器控制条 不用写=
autoplay自动播放
mutea设置音频静音
loop设置循环播放
当音频播放完毕后循环继续无限次播放
preload 设置缓冲即预加载
poster设置视频播放的占位图
width设置video的宽
height设置video的高
video标签支持的格式为 mp4 ogg webm
-->
<video src="456.mp4" controls width="400px" height="350px" poster="screen.png"></video>
<!-- source拥有三个不同音频根据浏览器选择合适的音频
进行兼容性处理 -->
<video controls width="400px" height="350px" poster="screen.png">
<source src="456.mp4">
<source src="456.ogg">
<source src="456.webm">
</video>
<!-- 11.新特性日期选择功能 -->
<input type="date">
<!-- 12.datetime 日期加时间选择
在一些浏览器上不兼容 -->
<input type="datetime">
<!-- 13.time 时间选择 -->
<input type="time">
<!-- 14.week 周选择 -->
<input type="week">
<!-- 15.month 月选择 -->
<input type="month">
<!-- 16.number 数字选择 -->
<input type="number" placeholder="数字">
<!-- 下面这些类型是必须配合from提交来进行验证 -->
<form>
<!-- 17.tel 说明输入的是电话 手机上显示 -->
<input type="tel" placeholder="电话">
<!-- 18.email 说明输入的邮箱 -->
<input type="email" placeholder="邮箱">
<!-- 19.required 说明input里是必须输的 -->
<input type="text" placeholder="必须输入" required>
<!-- 20.autofocus 自动聚焦，刷新光标将停留在这里 -->
<input type="text" placeholder="自动聚焦" autofocus>
<!-- 21.url 输入的是网址 -->
<input type="url" placeholder="网址" required>
<input type="submit">
</form>
<!-- 语义化标签 -->
<header>我是头</header>
<content>我是身体</content>
<footer>我是脚</footer>
<nav>我是导航</nav>
</body>
</html>
直接粘代码了，要是有发现错误的同学，可以评论或者联系我，qq976618499，谢谢。
