您的位置：首页 > Web前端 > HTML5

HTML5新特性介绍---（初试博客园）

2017-02-08 10:28 411 查看
选择从事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，谢谢。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航