div、html5新增的语义标签

div+css布局

1、最常用的布局元素<div>:里面可以含有其他元素

（1）作用

<1>可以定义文档中的分区或节

<2>标签可以把文档分割为独立的、不同的部分

<3>是一个块级元素，内容会自动开始一个新行

<4>与css配合

2、布局实例时需要用到的css属性：

（1）width：数值（设置width的时候百分比之和必须要小于100%）

（2）height：数值

height是必须要设置的

（3）background-color：背景颜色

（4）float：left使div不占据一行

3、<div>标签的属性

（1）class（不唯一）：为div定义一个类名，用.引用（在<style></style>中引用）

为了可以给每一个<div>在<style>中定义不同的样式所以每一个<div>都要定义不同的class名

<header></header>标签相当于<div class="header"></div>,直接就是表示页面头部

（2）id（唯一）：定义id名，用#引用

4、一般页面可简单的分为上（头部）中（内容）下（脚部）结构，所以首先是先写三个<div></div>

5、常见的html5新增的语义化标签

（1）header：页面头部

（2）footer：页脚

（3）article：定义页面独立的内容区域，一般为文章。标签定义的内容本身必须是有意义的且

必须是独立于文档的其他部分（单独拿出来也可读，和其他部分没有联系）

（4）aside：定义页面的侧边栏内容

（5）details：文档某部分的细节，配合<summary></summary>标签使用

<details>标签会隐藏<summary></summary>标签后面的内容

点击三角会打开详细信息，summary包含details元素的标题

（6）summary：是details中的标题

（7）time：定义日期、时间

（8）ruby：加注释

<1>内容<rt>直接显示的注释内容</rt>（它的作用就相当于字典中的字正上方加了个拼音）

<2>内容<rp>当前面的内容不能显示时现实的内容</rp>

（9）mark：定义带有标记的文本，它会给你要突出显示的文本下加个背景色

（10）nav：导航链接

（11）progress:进度标签（显示数据进度条）

属性：value（当前值）、max（最大值）、最小值默认为0，不用设置

（12）section：文档当中的节（和div类似）、定义文章（一般带有标题）

（13）video：引导视频

属性：src（引入资源）、controls（视频的控制控件）

单有src属性是不能播放的（只是一幅图片），必须要有controls属性（直接加，没有值）才能操作

<video></video>中间可以写浏览器不支持video时的提示信息

<video></video>中间还可以用<source src="" type=“video/src的视频类型”>引入多种格式的视频，会一直按照suorce的

顺序播放视频资源直到遇到可以播放的视频为止

目前支持的视频类型（其他格式如avi需要转换）：video/ogg、video/mp4、video/webm

（14）audio：定义音频

属性：src（引入音频）、controls（音频的控制控件）

<audio></audio>中间也可以通过<source src="" type="audio/src的音频类型">引入多个音频

目前支持的音频类型：audio/ogg、audio/mpeg（代表mp3）

（15）source：资源

（16）datalist：提示可能的值（datalist及其选项不会被显示出来，仅仅是合法的输入值列表）

会有一个三角符，点击的话可能出现用户需要输入的值，可以选择也可以手动输入

<1>和<input list="id"/>一起用

     <input list="id">

     <datalist id="">

         <option value="可以显示的内容">提示</option>

     </detalist>

与select进行比较：<select name="" id="">

                        <option value="数值">可以显示的内容</option>

                  </select>

（17）embed：引入flash/插件，它中间不要加内容，和video不同，会显示出来

属性：src（引入）、type（flash的类型）

（18）canvas：画布标签

只是一个容器，你可以通过控制坐标在canvas上绘制图形，一般配合js使用实现动画效果