HTML5&CSS3（1）

1.HTML5=HTML5.0+CSS3+Javascript+API.

2.HTML5的DTD声明为：.

3.新增的HTML5标签——结构标签

(块状元素) 有意义的div

<article>—表示文档、页面、或站点中自包含成分所构成的一个页面的一部分。

<header>—标记定义一个页面或一个区域的头部
<nav>—导航链接
<section>—用来定义文档中的节。
区别：section作用是对页面上内容进行分块，article是独立完整的内容。

<aside>—侧边栏或附属信息
<hgroup>—将标题及其子标签进行分组的标签
<figure>—标记定义一组媒体内容以及它们的标题
<figcaption>—标记定义figure元素的标题
<footer>—标记定义一个页面或一个区域的底部

新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好。

新增标签
<dialog>—标记定义一个对话框（会话框），类似微信
<address>—一般包含版权数据，备案信息是，联系方式等
<mark>—用于定义带有记号的文本
<progress>—定义运行中的进度（进程）
<meter>—表示范围已知是，且可度量的等级标量或分数值。
<menu>用来定义一个列表式菜单

改良标签
（1）、ol标签
新加属性：start和reversed
Start用于自定义列表项开始的编号
Reversed用于设置列表是否进行反向排序

（2）、dl标签
用于创建一个术语列表，允许在一个dl列表中包含多个带名字的术语标签dt，每个后面可跟一个或多个定义标签dd

（3）、ul标签
不支持type和compact属性
不支持li的type属性,改用CSS样式来定义列表类型。

4.多媒体标签：

<video>---标记定义一个视频
<audio>---标记定义音频内容
<source>---标记定义媒体资源
<canvas>---标记定义图片
<embed>---标记定义外部的可交互的内容或插件，如flash.

[多媒体应用]——视频video

（1）常见的视频格式
视频组成部分：画面、音频、编码格式。
视频编码：H.264，Theora，VP8（google开源）
音频编码：ACC，MP3，Vorbis。

（2）HTML5支持的格式：
Ogg=Theora+Vorbis （F C O）
MPEG4=H.264+ACC （S C）
WEBM=VP8+Vorbis （I F C O）

（3）<viedo>的使用


  <video src="文件地址" controls="controls">
                                   </vedio>  

 <video src="文件地址" controls="controls">
   您的浏览器暂不支持vedio标签。播放视频
    </vedio>

<video controls="controls" width="宽度">
<source src="….ogg" type="vedio/ogg">
<source src="….mp4" type="vedio/mp4">
您的浏览器暂不支持vedio标签。播放视频
</vedio>

（4）常见属性
autoplay—-自动播放
controls—控键
width,height—宽，高
loop—循环播放
poster—加载动画时首页的画面图片
muted—是否支持静音

[多媒体应用]——音频audio

（1）HTML5支持的音频格式：
Ogg————免费（C F O）
MP3————收费（I C S）
Mav————收费（F O S）

其余用法同video

5.表单及表单验证<form action=" " id="myform"></from>

(1)

邮箱：<input type="email" form="myform"/>
网址：<input type="url" form="myform"/>
日期：<input type="date" form="myform"/>
时间：<input type="time" form="myform"/>
月：<input type="month" form="myform"/>
周：<input type="week" form="myform"/>
数字：<input type="number" form="myform"/>
滑动条：<input type="range" form="myform"/>
按键：<input type="search" form="myform"/>
颜色：<input type="color" form="myform"/>

(2)常用属性
required—–必填项
placeholder—–默认提示信息
autofocus—–自动获取焦点（增加用户体验）
autocomplete=”on”——-增加自动记忆功能
autocomplete=”off”——-关闭自动记忆功能
使用时需要给标签加上一个name值
如：<input type="text" form="myform" autocomplete="on" name="username">

（3）detalists列表

<input id="mycar" list="cars">
<detalists id="cars">
     <option value="BMW"></option>
     <option value="Ford"></option>
     <option value="Volvo"></option>
                      </detalists>