块元素、行内元素、行内块元素

1.块元素的特性block

• 独占一行；
• 宽度缺省是它父级元素的100%，除非设定一个宽度；
• 高度、行高、外边距、内边距都可以设置
• 可以容纳其他内联元素或者其他块元素，一般用于配合css完成网页的基本布局；

常见块级元素

div – 常用块级容器，也是CSS layout的主要标签
p – 段落
h-标题标签和水平线
pre – 格式化文本
form – 交互表单
ol – 有序表单
ul – 无序列表
li
dl – 定义列表
menu – 菜单列表
table – 表格

2.行内元素 inline

• 不会独占一行，遇到父级元素边界会自动换行；
• 高、行高以及内外边距都不可以改变
• 宽度与内容一样宽，且不可改变
• 行内元素只能容纳文本或者其他行内元素
• 对于行内元素，设置宽高无效，可以通过设置line-height来设置，
• 设置margin和padding只有左右有效，上下无效（而且必须是具体的值，比如设为auto也是无效）

2.1常见的行内元素

a – 锚点
span – 常用内联容器，定义文本内区块
img – 图片
input – 输入框
button-按钮
label – 表格标签
textarea – 多行文本输入框
select – 项目选择
br – 换行
strong – 粗体强调

2.2行内元素的间距问题

两个行内元素在一起，会出现一定的间距，即使将border、padding、margin都设置为零也无济于事，那么怎么才能去除这些间距呢？

1.重设字体
给行内元素的直接父级设置font-size:0px;再给行内元素设置字体大小就可以解决。

2.借助HTML注释
在两个行内元素之间加入HTML注释，告诉浏览器这中间不是换行也不是空格，而是连接在一起的，这样也可以解决。

3.行内块元素inline-block

元素排列在一行
宽度默认由内容决定
元素间默认有间距
支持宽高、外边距、内边距的所有样式的设置


缺点：
多个相邻行内块之间有间隙（空隙产生的原因：当元素有行内元素的特性时，元素间的空白符都会被解析，回车换行会被解析成一个空白符，如果字体不为零那么就会占一定的宽度，并且这些间距会随字体的大小而变化）
里面的文本行数不一致时会出现盒子塌陷

解决：取消盒子间隙的方法
删除标签之间的空白（有效果但是不建议使用，代码看起来不太规范，一般不使用）
给转化显示模式为行内块的盒子添加margin-left: -10px;，取负值，可以把间隙遮挡。
给转化显示模式的盒子的父元素添加属性font-size: 0;,（可以取消间隙，但是会影响父元素盒子内其他元素的字体大小）

4.H5新增属性及标签

4.1新增的语义化标签 （结构标签）

1.section。section标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
2.article。article标签装载显示一个独立的文章内容。还可以嵌套，则内层的artilce对外层的article标签有隶属的关系。例如，一个博客文章，可以用article显示，然后一 些评论可以以article的形式嵌入其中。
3.aside。标签内容之外与标签内容相关的辅助信息；
4.header。header标签定义文档的页面组合，通常是一些引导和导航信息。
5.hgroup。hgroup标签用于对网页或区段的标题元素（h1-h6）进行组合。例如，在一个区段中你有连续的h系列的标签元素，则可以用hgroup将他们括起来。
6.footer。页尾信息；
7.nav。nav标签定义显示导航链接。
8.figure。独立的单元，例如某个有图片与内容的新闻块。
9.time。time标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码，这样， 举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。
10.mark。mark标签定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签。
11.figure。figure标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
12.figcaption。figcaption 标签定义 figure 元素的标题（caption）。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
13.contextmenu。contextmenu 标签添加到系统右键菜单 [貌似这个功能只有firefox支持]

4.2表单标签

1.email。必须输入邮件。
2.url。必须输入url地址。
3.number。必须输入数值。
4.range。必须输入一定范围内的数值。
5.Date Pickers。日期选择器。
6.search。搜索常规的文本域。
7.color。颜色。

4.3媒体标签

1.video。视频
2.audio。音频
3.embed。嵌入内容（包括各种媒体），Midi、Wav、AU、MP3、Flash、AIFF等。
4.source。source设置两份或多份源文件的音频播放器。浏览器应该选择它所支持的文件（如果有的话）
5.track。诸如 video 元素之类的媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。
例子如下（播放带有字幕的视频）：
<video width="320" height="240" controls="controls">
      <source src="forrest_gump.mp4" type="video/mp4" />
      <source src="forrest_gump.ogg" type="video/ogg" />
      <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
      <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
</video>