HTML5

html5初步介绍

推出理由及目标:
HTML5的出现，对于web来说意义非常重大，因为他的意图是想把目前web上存在的问题一并解决

• web浏览器之间的兼容性很低
• 文档结构不够明确
• web应用程序的功能受限

新的内容元素 header nav section aside footer

传统布局格式多用div，例如：<div class="header"></div>
现可直接用<header> </header>
常见例子：

<header>
	<nav>	</nav>
</header>
<section>
	<article>	</article>
	<aside>		</aside>
</section>
<footer>	</footer>

浏览器兼容

前缀名：
-webkit- 谷歌浏览器
-moz- 火狐浏览器
-ms- IE浏览器
-o- 欧鹏（opera）浏览器
例如：-webkit-border-radius:50%; border-radius:50%;

• 优雅降级：先写border-radius:50%; 后写-webkit-border-radius:50%;
• 渐进增强：先写-webkit-border-radius:50%; 后写border-radius:50%;

header元素
通常用来放置整个页面或页面内的一个内容区块的标题

<header>
    <nav>  </nav>
</header>

section元素
用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。

article元素
是可以嵌套使用的

<article>

    <header>
        <h1> </h1>
        <p>  </p>
    </header>
    
    <article>
        <header>  </header>
        <p>       </p>
        <footer>  </footer>
    </article>
    
    <footer>  </footer>
    
</article>

aside元素
用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有区别于主要内容的部分
footer元素
可以作为其上层父级内容块或是一个根区块的脚注。Footer通常包括其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。

vedio

定义视频（比如电影片段或者视频流）,支持的视频格式 ogg webm mp4
controls控件 width宽 height 高 autoplay自动播放 loop 循环 poster 静态显示页面图片 autobuffer 缓冲 src 视频路径

audio

定义音频（比如音乐或者音频流）,支持的音频格式 ogg wav mp3

	<video  controls="controls"  width="300" >
		<souse src="路径"  type="video/mp4">
	</ video >
	
	< audio controls="controls"  >
		<source src="路径" >
    </ audio>

表单

之前的表单：text，password，textarea，checkbox，radio，file， select， button， submit， reset
H5 表单：email, url, date, week, month, time, number, color, range, search
input可以不用在包含在form中，只需指定form的名字

<form action="" id="myform"></form>
邮箱：<input type="email" form="myform"><br>
网址：<input type="url" form="myform"><br>
日期：<input type="date" form="myform"><br>
时间：<input type="time" form="myform"><br>
周：<input type="week" form="myform"><br>
数字：<input type="number" form="myform"><br>
滑动条：<input type="range" form="myform"><br>
搜索框：<input type="search" form="myform" results="n"><br>
颜色：<input type="color" form="myform"><br>
<input type="submit" form="myform" >

H5表单属性
required 必填项
autocomplete 自动记忆
plactholder 提示信息
autofocus 自动聚焦

• method:get/post;
• pattern 正则表达式
  例如： pattern="[a-z]{3,8}"； 表示只能输入3-8个a-z类字母

datalist

类似于select下拉列表

<input list="fruits" id="fruitname">
<datalist id="fruits">
    <option value="apple"></option>
    <option value="pear"></option>
    <option value="peach"></option>
</datalist>