一、HTML标签

HTML标签可以分为块标签，内联标签和内联块。

1、块标签block：div p h1-h6 ul li ol li dl dd dt 。
特点：a、支持任何的样式。b、独占一行。c、不设置宽度时（不等于width:0;），宽度默认充满整行。
2、内联标签inline: a span time em mark
特点：a、不支持宽高（设置后无效）。b、可以在一行显示。c、宽度由内容撑开。d、换行被解析成空格（标签内容和标签之间的换行都是解析成空格）。e、无法设置上下margin 只有左右margin。
3、内联块inline-block：img。
特点：a、支持宽高。b、可以在一行显示。c、换行被解析成空格。

关于display

display用于表示元素的展示陈列方式。
display：block，把元素转换成块便签，让标签拥有块标签的特点。
display：inline,把元素转换成内联标签，让标签拥有内联标签的特点。
display：inline-block，,把元素转换成内联块，让标签拥有内联块的特点。
display:table,表单元素。
display：none， 元素隐藏 它的位置都没有了 。

最常用标签介绍

div：盒子标签 划分区域。
p：段落便签 每个段落之间会有间距。
a：1、 超链接 2、下载 跟压缩包（href直接放压缩包的路径，点击就会下载） 3、锚点（href=”#+id”点击就会定位到对应id的位置）。
ul：导航类标签（无序列表），每一条导航用

表示。
ol:导航类标签（无序列表），会在每个导航前加上序号，type=”a”表示用字母表示序号，type=”1”用数字表示序号，start=”2“表示序号从第二个开始。ol用得非常少。
b:标签规定粗体文本。
big:标签呈现大号字体效果。
body:元素定义文档的主体
span:可拥有操作字体样式。
br:可插入一个简单的换行符。
br 标签是空标签（意味着它没有结束标签，因此这是错误的：
）。在 XHTML 中，把结束标签放在开始标签中，也就是<br />。
button： 标签定义一个按钮。
center：对其所包括的文本进行水平居中。
dialog： 标签定义对话框或窗口。
dl： 标签定义了定义列表（definition list）。
dt： 标签定义了定义列表中的项目（即术语部分）。
form： 标签用于为用户输入创建 HTML 表单。
h1-h6:标题。
head： 标签用于定义文档的头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
hr： 标签在 HTML 页面中创建一条水平线。
img： 元素向网页中嵌入一幅图像。
input： 标签用于搜集用户信息。
label： 标签为 input 元素定义标注（标记）。
li： 标签定义列表项目。
option： 元素定义下拉列表中的一个选项（一个条目）。
progress： 标签标示任务的进度（进程）。
script： 标签用于定义客户端脚本，比如 JavaScript。
select： 元素可创建单选或多选菜单。
source： 标签为媒介元素（比如 <video> 和<audio>）定义媒介资源。
span: 标签被用来组合文档中的行内元素。
style:标签用于为 HTML 文档定义样式信息。
table: 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
tbody: 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。
td: 标签定义 HTML 表格中的标准单元格。
th:定义表格内的表头单元格。
thead:标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
time: 标签用于包含时间，不会在任何浏览器中呈现任何特殊效果。
title： 元素可定义文档的标题。
tr： 标签定义 HTML 表格中的行。
u： 标签可定义下划线文本。
ul： 标签定义无序列表。
video： 标签定义视频，比如电影片段或其他视频流。

二、CSS样式

1、可以在HTML文件中的head部分定义style标签，在里面定义各种样式，详细用法如下：

<style>/*设置样式*//*给某个标签声明样式的时候，声明了什么属性，该属性的指就会覆盖原有的属性值，没有声明的就还是用默认值*/h2{margin:0;//周围占用的空间为0font-weight: normal;//字体不加粗}a{text-decoration: none;//没有下滑线}ul{margin:0;}li{list-style: none;//去掉导航的点}.title{font-size: 18px;}/*可以通过 ".class名" 来定义样式名称并设置样式 这叫类选择器 并且父标签的样式属性值会作用于子标签上*/.title a{color: #333333;}/*可以通过 ".class名 便签名"来定义设置了某个样式的标签的子标签的样式*/.list li{float:left;width:173px;height:120px;}.list li img{width:173px;height:120px;}/*可以通过 ".class名 便签名 标签名"来定义设置了某个样式的标签的子标签的子标签样式，也就是说可以跨层定义标签样式*/#div1{border:1px solid blue !important;}/*可以用"#+id名称"来给指定id元素配置样式，并且css选择器的优先级!important>style>id>class>群组选择器标签总体上说谁的范围小 谁的优先级就高,!important除外* */.div2>.p1{border:1px solid red;}/** 后代选择器  所有后代.div 元素  div>元素  直接后代 不能隔代 **/</style>

2、css样式单独写在css文件中，

在css文件中直接写css样式代码，不用被任何标签包围。例如：

div{width:80px;height:80px;border:1px solid green;}

然后在需要应用的HTML文件中引入即可使用，引用方法如下：
<link href="css/css.css" rel="stylesheet" />
补充：href的值是引入的css文件的路径，rel=”stylesheet”告诉浏览器引入的是样式表。
每个HTML文件可以引入多个css文件，没有限制。
一个css文件也可以同时被多个HTML文件引用。

3、css属性

a、padding：造成盒子整体变大，并不是内容变大，背景会一直铺到padding区，如果没有padding ，背景的宽度就是width的宽度，高度同理。

padding-top:上
padding-right：右
padding-bottom：下
padding-left：左
padding 一个值 上 右 下左 都是这个值
padding 二个值 上下 左右
padding 三个值 上 左右 下
padding 四个值 上 右 下 左
盒子总体宽度大小=width+边框+左右padding
盒子总体高度大小=height+边框+上下padding

b、margin：外边距，边框以外的部分，背景并不会铺到margin的区域。

margin可以改变元素的位置
margin 一个值 上 右 下左 都是这个值
margin 二个值 上下 左右
margin 三个值 上 左右 下
margin 四个值 上 右 下 左
margin-top：上
margin-right：右
margin-bottom：下
margin-left：左

margin的重叠

当相邻的元素出现垂直的margin的时候，margin会重叠，如果垂直方向的2个值不一样，元素间的距离会以margin比较大的为准。

margin的传递

当父子级结构的时候，子级设置了垂直方向的margin会传递给父级，当父元素没有设置垂直的margin值的时候，就像是子元素把垂直margin的值赋值给父元素的垂直margin的值，当父元素有垂直margin值的时候，父元素与其他元素的垂直距离取，父子元素中垂直margin比较大的那个。左右方向的margin父子元素互不影响。
那如果子元素想设置与父元素的周边（父元素的外围，上下左右）的距离，该怎么做呢？
1、 给父级加边框
2、 在父元素设置padding，要注意父元素设置了padding体积会变大，若想保持原来大小，要将宽高减去padding。

补充

当不同标签设置同样属性值时，可以用“,”隔开，然后把要设置的样式属性写在一起，例如：
p,body{
margin:0;
}

三、小知识点

1、去掉导航的点
li{
list-style: none;
}
2、让字体在该容器内垂直居中的方法：
line-height:容器的高度；
3、内联标签不能放块标签。
4、脱离文档流的元素设置margin没有用。
5、text-align: center;能设置文本和内联子标签水平居中显示。