HTML5概述
语义
- html5中的节段和提纲
<section> <acticle> <nav> <header> <footer> <aside> <hgroup> - html5中的 音频和视频
<audio>音频<video>视频 - html5中 的表单
连通性
服务器和浏览器直接能够通过web socket网络套接字来保持连通。
离线和存储
localStores
3D 图像&效果
canvasWebGLsvg
性能 & 集成
增加了web worker 能够让js操作线程。
设备访问
使用地理位置、摄像头、触控事件、检测设备方向、都是给移动端提供的API
样式
border-radius边框阴影。
HTML5新的语义化标签
新的骨架结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
新的规范
- html5中的规定标签不一定是全是 小写 字母
- html5中自封闭标签不一定要
/结尾封闭标签 - html5 可以不加 引号了
- html5中规定所有的type类型可以不写。比如javascript类型。
html5中的提纲标签(IE9开始兼容)
<section>部分区域语义<acticle>文章语义<nav>导航条语义<header>头部语义<footer>脚注语义<aside>侧边栏语义<hgroup>用来包裹h1 h2 h3 h4 h5 h6
都是块级标签，没有任何默认样式，容器级标签；可以包裹任何标签，但是div标签不能包裹提纲标签。
新的语义元素
<!--figure用来绑定图和文字的关系-->
<figure>
<img src="images/1.jpg">
<figurecaption>test</figurecaption>
</figure>
<!-- 进度条标签 -->
<progress value="60" max="100">60</progress>
<!-- 地址标签 -->
<address>重庆</address>
<!-- 时间标签 -->
<time>12:00</time>
<!-- 高亮引用的文本 -->
<p><mark>这是重点</mark></p>
<!-- 注释文本，用于日语片假名标注罗马音 -->
<p><ruby>月明<rp>(</rp><rt>つきあ</rt><rp>)</rp></ruby>かり昇る頃</p>
<p>灯る <ruby>赤提灯 <rp>(</rp><rt>あかちょうちん</rt><rp>)</rp></ruby></p>
表单元素的加强
<input> 标签的新type
search搜索框number数字tel电话url网址color颜色email邮箱
<!-- 下列的type类型自带正则表达式验证 -->
<input type="number" min="1" max="123" pattern="">
<input type="email" name="" id="">
<input type="url" name="" id="">
<input type="tel" name="" id="">
<!--可以用pattern属性自定义正则表达式 -->
<input type="date" name="" id="">
<input type="color" name="" id="">
<!-- label标签可以包裹input标签，不需要label for -->
<label>
<input type="radio" name="sex" id="">男
</label>
<!-- 提示文本 -->
<input type="text" name="" id="" list="notice">
<datalist id="notice">
<option value="北京">北京</option>
<option value="东兴">东兴</option>
<option value="东秀">东秀</option>
</datalist>
<!-- 自动得到焦点 -->
<input type="search" name="" id="" autofocus>
<!-- 占位符 placeholder-->
<input type="text" name="" id="" placeholder="123">
音频和视频
HTML4.01插入视频和音频，必须用flash.使用
<embed>插入flash.
使用优酷视频的分享可以拿到html代码，对页面进行嵌入播放。
html5使用
<video>标签(支持mp4和ogv)插入视频
html5使用<audio>标签(支持mp3和ogg)插入音频
<!-- autoplay 自动播放 controls 属性显示控件 source 就是播放资源列表 -->
<video autoplay controls width="500" height="300">
<source src="video/1.mp4">
<source src="video/2.mp4">
</video>
<!-- 监听暂停播放 onpause事件 onplay事件 .pause（）方法 .play()方法 -->
<!-- 插入音频 -->
<audio src="1.mp3" autoplay controls></audio>
