绝对定位(position: absolute)

相对定位(position: relative)

固定定位(position: fixed)

line-height行高以em为字符单位

 text-indent首行缩进，以em为字符单位

text-decoration默认值为none, 定义标准的文本。

underline为定义文本下的一条线。

overline为定义文本上的一条线。

line-through为定义穿过文本下的一条线，一般用于商品折扣价。

内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

ID选择器只能在文档中使用一次

可以使用类选择器词列表方法为一个元素同时设置多个样式。

内联式 > 嵌入式 > 外部式

最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。

2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下所示：

数字框的值需以http://或者https://开头,且后面必须有内容,否则表单提交的时候会报错误提示。

标签〈html〉〈/html〉

头部〈head〉〈/head〉

主体〈body〉〈/body〉

题目〈title〉〈/title〉

变化〈meta〉〈/meta〉

图片〈img〉〈/img〉

标题〈hx〉〈/hx〉

段落〈p〉〈/p〉

斜体〈em〉〈/em〉

加粗〈strong〉〈/strong〉

回车〈br /〉

空格&nbsp

定义〈span〉〈/span〉

引用〈q〉〈/q〉

大段引用〈blockquot〉〈/blockquot〉

代码〈code〉〈/code〉

大段代码〈pre〉〈/pre〉

http-equiv="Content-Type"指示服务器向浏览器解释该文档类型，

content="text/html; 是说文档作为HTML来解析.

charset=utf-8"utf-8是编码格式，国内常见的编码格式有两种，一种是utf-8，一种是gb2312，前端一般用的都是utf-8

标题标签：h1-h6 h1最大，h6最小，h7以后的以文本内容显示

1.<hr>添加水平下划线；

2.添加信息列表

<ul>无序

<ol>有序

3.table 创建表格，其中<tr>表示行<td >表示列单元格<th>表示表头的那个列单元格

4. caption标签，为表格添加标题和摘要

5.在新建浏览器窗口中打开链接

<a href="目标网址" target="_blank">click here!</a>

6.使用mailto在网页中链接Email地址

<a>标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。下面一一进行讲解，请看详细图示：

注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。

7. 认识<img>标签，为网页插入图片

<img src=”图片地址” alt=”下载失败时的替换文本” title=”鼠标滑过图片时提示的文本”>

1、html常用标签学习：

1.1、<em>和<strong>标签主要是用来做强调用的，其中<em>是让文字变成斜体，而<strong>把文字进行加粗显示。

1.2、<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。

1.3、<q>标签是做文本引用时候用的，需要引用的文本不需要加双引号，浏览器会自动为<q>标签加上引号。<blockquote>标签是对长文本进行引用，引用短文本比如一句话就用<q>标签。

1.4、html是不识别回车和空格的，因此想要换行就要用<br/>标签，想要空格就要使用 &nbsp;标签。

1.5、<hr/>标签用于在展示信息的时候显示更清晰整齐而添加的用于分割的横线。

1.6、<address>标签用于在文本中表示地址，显示的效果是斜体字。

1.7、<code>标签用于在文本中加入一行代码，如果要加入多行代码，则使用<pre>标签，被包围在<pre>中的文本通常会保留空格和换行符。同时，如果想要在网页中显示预显示格式都可以使用这个标签。

1.8、无序标签<ul><li>的配套使用，每一个列表项前面都会自带一个圆点；有序标签<ol><li>配套使用，每一个列表项前面都会自动编号。

1.9、<div>标签为网页划分独立的版块。

2、创建表格的几个元素是：table,tbody,tr,th,td。

2.1、整个表格以<table>开始，以</table>结束；

2.2、如果表格中加入<tbody>就会等表格内容全部下载完毕之后才显示；

2.3、<tr>代表表格的行，有几个就有几行；

2.4、<td>代表单元格；

2.5、<th>表格头部的单元格，即表格表头，其中的文本默认为粗体显示且居中；

2.6、<table>中的元素在没有添加css样式之前，在网页中显示的是没有表格线的；

2.7、<caption>为表格添加标题，summary为表格添加摘要，但是摘要只是为了增加可读性，不会在网页中显示出来。

3、<img>标签，为网页插入图片。语法：<img src="目标地址" alt="图片无法显示时候的替换文本" title="鼠标滑过图片时显示的文本">图像可以是GIF，PNG，JPEG格式的图像文件。

标签〈html〉〈/html〉

头部〈head〉〈/head〉

主体〈body〉〈/body〉

题目〈title〉〈/title〉

变化〈meta〉〈/meta〉

图片〈img〉〈/img〉

标题〈hx〉〈/hx〉

段落〈p〉〈/p〉

斜体〈em〉〈/em〉

加粗〈strong〉〈/strong〉

回车〈br /〉

空格&nbsp

定义〈span〉〈/span〉

引用〈q〉〈/q〉

大段引用〈blockquot〉〈/blockquot〉

代码〈code〉〈/code〉

大段代码〈pre〉〈/pre〉

http-equiv="Content-Type"指示服务器向浏览器解释该文档类型，

content="text/html; 是说文档作为HTML来解析.

charset=utf-8"utf-8是编码格式，国内常见的编码格式有两种，一种是utf-8，一种是gb2312，前端一般用的都是utf-8

标题标签：h1-h6 h1最大，h6最小，h7以后的以文本内容显示

1.<hr>添加水平下划线；

2.添加信息列表

<ul>无序

<ol>有序

3.table 创建表格，其中<tr>表示行<td >表示列单元格<th>表示表头的那个列单元格

4. caption标签，为表格添加标题和摘要

5.在新建浏览器窗口中打开链接

<a href="目标网址" target="_blank">click here!</a>

6.使用mailto在网页中链接Email地址

<a>标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。下面一一进行讲解，请看详细图示：

注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。

7. 认识<img>标签，为网页插入图片

<img src=”图片地址” alt=”下载失败时的替换文本” title=”鼠标滑过图片时提示的文本”>

1、html常用标签学习：

1.1、<em>和<strong>标签主要是用来做强调用的，其中<em>是让文字变成斜体，而<strong>把文字进行加粗显示。

1.2、<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。

1.3、<q>标签是做文本引用时候用的，需要引用的文本不需要加双引号，浏览器会自动为<q>标签加上引号。<blockquote>标签是对长文本进行引用，引用短文本比如一句话就用<q>标签。

1.4、html是不识别回车和空格的，因此想要换行就要用<br/>标签，想要空格就要使用 &nbsp;标签。

1.5、<hr/>标签用于在展示信息的时候显示更清晰整齐而添加的用于分割的横线。

1.6、<address>标签用于在文本中表示地址，显示的效果是斜体字。

1.7、<code>标签用于在文本中加入一行代码，如果要加入多行代码，则使用<pre>标签，被包围在<pre>中的文本通常会保留空格和换行符。同时，如果想要在网页中显示预显示格式都可以使用这个标签。

1.8、无序标签<ul><li>的配套使用，每一个列表项前面都会自带一个圆点；有序标签<ol><li>配套使用，每一个列表项前面都会自动编号。

1.9、<div>标签为网页划分独立的版块。

2、创建表格的几个元素是：table,tbody,tr,th,td。

2.1、整个表格以<table>开始，以</table>结束；

2.2、如果表格中加入<tbody>就会等表格内容全部下载完毕之后才显示；

2.3、<tr>代表表格的行，有几个就有几行；

2.4、<td>代表单元格；

2.5、<th>表格头部的单元格，即表格表头，其中的文本默认为粗体显示且居中；

2.6、<table>中的元素在没有添加css样式之前，在网页中显示的是没有表格线的；

2.7、<caption>为表格添加标题，summary为表格添加摘要，但是摘要只是为了增加可读性，不会在网页中显示出来。

3、<img>标签，为网页插入图片。语法：<img src="目标地址" alt="图片无法显示时候的替换文本" title="鼠标滑过图片时显示的文本">图像可以是GIF，PNG，JPEG格式的图像文件。

使用<a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。

语法：

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

例如：

<a  href="http://www.imooc.com"  title="点击进入慕课网">click here!</a>

上面例子作用是单击click here!文字，网页链接到http://www.imooc.com这个网页。

title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好），如右侧案例代码（11-13行）。

注意：还有一个有趣的现象不知道小伙伴们发现了没有，只要为文本加入a标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色），颜色很难看吧，不过没有关系后面我们学习了css样子就可以设置过来（a{color:#000}),后面会详细讲解。

语法：

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

举例：

<img src = "myimage.gif" alt = "My Image" title = "My Image" />

讲解：

1、src：标识图像的位置；

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

3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

4、图像可以是GIF，PNG，JPEG格式的图像文件。

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

inline-block 元素特点：

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

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

内联元素特点：

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

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

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