选择从事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 > <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，谢谢。
