内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。

inline-block 元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。

 div{     display:inline;
 }

......

<div>我要变成内联元素</div>

内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。

a{display:block;}

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

中文字间隔、字母间隔设置：

如果想在网页排版中设置文字间隔或者字母间隔就可以使用    letter-spacing 来实现，如下面代码：

h1{
    letter-spacing:50px;
}
...
<h1>了不起的盖茨比</h1>

注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。

单词间距设置：

如果我想设置英文单词之间的间距呢？可以使用 word-spacing 来实现。如下代码：

h1{
    word-spacing:50px;
}
...
<h1>welcome to imooc!</h1>

网页中的字体css样式代码也有他自己的缩写方式，下面是给网页设置字体的代码：

body{
    font-style:italic;
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;
}

这么多行的代码其实可以缩写为一句：

body{
    font:italic  bold  12px/1.5em  "宋体",sans-serif;
}

注意：

1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。

2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用

body{
    font:12px/1.5em  "宋体",sans-serif;
}

只是有字号、行间距、中文字体、英文字体设置

如果一个元素使用了多个选择器,则会按照选择器的优先级来给定样式：内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。

p{color:red;}

<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩</p>

但注意有一些css样式是不具有继承性的。如border:1px solid red;

p{border:1px solid red;}

<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩</p>

在上面例子中，只是给p标签设置了边框为1像素、红色、实心边框线，而对于子元素span是没用起到作用的

#加上元素的id值，构成id选择器

#box{
    color:red;
}

听说你要制定学习计划了，使用table家庭来为网页添加表格

<!--表格标签，border属性代表给表格加上边框-->
<table border='1'>
    <!--表格标题标签-->
    <caption>表格标题</caption>
    <!--tr代表一行table row-->
    <tr>
        <!--th代表一列，有字体加粗、居中显示的效果-->
        <th>姓名</th>
    </tr>
    <tr>
        <!--td代表一行table data cell，字体为正常效果-->
        <td>张三</td>
    </tr>
</table>

1. <table>…</table>：整个表格以<table>标记开始、</table>标记结束。

2. <tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

3. <td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

4. <th>…</th>：表格的头部的一个单元格，表格表头。

5. 表格中列的个数，取决于一行中数据单元格的个数。

6. border属性可以为表格添加边框，属性值为数字。

注意：

table表格在没有添加border属性之前, 在浏览器中显示是没有表格线的。

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

1. src:表示图像的位置

2. alt:指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本

3. title:提供在图像可见时对图像的描述（鼠标滑过图片时显示的文本）

4. 图像可以是GIF,PNG,JPEG格式的图像文件
   

创建新闻列表、图片列表等无序列表，可以用

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

来创建，<ui>在网页中显示的默认样式一般为：每项<li>前都自带一个小圆点

如果想在网页中展示有前后顺序的信息列表，怎么办呢？如，当当网上的书籍热卖排行榜。这类信息展示就可以使用<ol>标签来制作有序列表来展示。

<ol>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ol>

<ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始

水平分隔线：<hr />，<hr />标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观

horizon

大家注意，现在一般使用 xhtml1.0 的版本（其它标签也是）的写法，这种版本比较规范。

空格：&nbsp;

举例：我&nbsp;&nbsp;&nbsp;和你

non-breaking space

<br />标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，空标签有<br />、<hr />和<img />。

<aside>标签代表侧边栏区域，但作用等同于<div>，只是具备语义化，有aside意义意思

{

    <header>   加上<as

    <section>          i

    <footer>            de>

}作用都等同于<div>，都只是具备语义化

<section>标签代表一个区域，但作用等同于<div>，只是具备语义化，有section意义意思