HTML的布局方式大致分为两种：
1) 表格标签 - table 2) div + css块级标签 典型的就是<div>< /div>,块级标签独占一行，同理，<h>标签，<li>标签也是块级标签；div标签独自不能够实现复杂的效果，必须结合css样式进行渲染。如果把div标签用id或者class来标记<div>,那么该标签的作用会显得更加有效。
<div>< /div>标签属性： align：表示div中内容的对齐方式
行级标签 <span>< /span>，不独占一行；
<body> <div> 这是一个块 </div> <div> 这是一个块 </div> <span> 这是一个行级 </span> <span> 这是一个行级 </span> </body>CSS：Cascading Style Sheets
定义： CSS通常称为CSS样式或者层叠样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片外形（宽高和边距等）、以及版面布局等其它样式。
名词解释 ： * 样式表：给HTML标签添加需要显示的效果 * 层叠：使用不同的添加方式，给同一个HTML标签添加样式，最后所有样式都叠加在一起，共同作用于该标签。
作用： 1）设置html样式 2）复用已经写过的样式代码，当两个css修饰同一个标签的时候，发生冲突的属性，以最后一个修饰该标签的css为准，后加载为准；
css的三种引用方式： 行内样式 内部样式 外部样式
**行内样式： css内嵌在html的标签里面 书写规范： style=”属性名 : 属性值 ; 属性名 : 属性值；”
<div style="font-size: 12px; color: deepskyblue ;"> 这是一个块 </div> <span style="color: red; font-family: 'arial black'; font-size: 20px;"> 这是一个行级 </span> style其实是html中标签div的属性，而双引号中的color，font-size才是css里面的属性。 在双引号中，用分号；分隔不同的属性。 字体大小font-size的px不能够省略，css中，像素单位是不能够省略的，只有在html中的单位才能够省略。优点： 优先级最高 可读性强
缺点： 毫无复用性；
**内部样式 也叫内嵌样式 在该html文件的head标签里添加style标签来改变样式。只对其当前所在的html页面有效，可以对多处设置图同一样式； style当中注释要写成/**/ 书写规范：
<style> 选择器 { 属性名:属性值; color: red; font-size: 40px; } </style>内部样式写在哪里都可以，但是建议写在<head></head>标签中，写在<title>下方 语法：
<style> 选择器{ } </sytle> <style type="text/css"> div{ color:green; font-size:200px; } </style>优点： 有一定的复用性，复用性较高，在该html文件内可以复用；
缺点： 可读性不强，书写不方便；
外部样式：也叫链入式
在外部定义一个css文件，以.css结尾。 然后再需要用到该样式的html中引入css 同一个css样式表可以被不同的html页面链接使用，同时，一个html页面也可以通过多个<link />标记链接多个css样式表使用。
步骤1）新建css文件，在css文件中：
选择器{ 属性名 : 属性值; color: red; font-size: 40px; }步骤2）使用link标签将css文件引入进来
<link rel="stylesheet" href="../css/demo1.css" type="test/css" /> rel表示关系，stylesheet表示样式表，**不能够缺少**，缺少则设置不成功 href表示连接的css样式文件 type=“test/css” 固定值，表示css类型 rel=“stylesheet” 固定值，表示样式表；优缺点 * 优点：可读性较好，可复用性非常强 * 缺点：效率略低。客户端在访问html页面的时候，要从服务器请求对应的css文件。 用户加载的时候速度稍慢
<link>标签 link标签的属性： * href : 引入的css文件的路径 * rel : relation的缩写，表示引入的文件和该HTML的关系。 必须要写 * type : 引入的文件类型
css三种引用方式的优先级： 行内样式 > 内部样式和外部样式 内部样式和外部样式的优先级谁后加载，谁的优先级就高。
“选择器”用于指定css样式的html对象（如果html的标签名字，这里是直接使用标签名字而不需要加上任何的尖括号，例如直接使用div），花括号内是对对象设置具体的格式，属性和属性值以键值对的方式进行出现的，使用英文冒号：分隔，多个属性之间使用英文分号进行分隔；
注意几点： 1）CSS样式选择器严格区分大小写，但是属性和属性值不区分大小写； 2）多个属性之间必须用英文状态下的分号进行分隔，但是最后一个属性后面的分号可以省略；为了增加新样式，最好将最后一个属性后面的分号也保留。 3）如果属性的值由多个单词组成且中间包含空格，就必须为这个属性值加上英文状态下的引号。 p{ font-family ： “Times New Roman”}
关于css中的空格： 1）在css代码中，空格是不被解析的，花括号以及分号前后的空格可有可无，因此可以使用空格键，Tab键，回车键对样式代码进行排版，即所谓的格式化css代码，这样可以提高代码的可读性。 2）需要注意的是，在属性的值和单位之间是不允许出现空格的，否则浏览器解析的时候会出现错误。例如下方所示就是不正确的。
1）元素选择器/标签选择器 标签例如div * 语法：
标签名{ 属性名：属性值； } 最大的优点就是能够快速地为页面中同类型的标记统一样式； 但是这也是他的缺点，不能够设计差异化的样式。2）ID选择器 id,给独特的某个标签设置样式，一般不用这种方式，因为id原则上是唯一的。不是给css使用的，而是给js使用的。id在命名的时候不能够以数字开头，否则会无效 元素的id值是唯一的，这种方法只能够对应文档中某一个具体的元素； 使用#号进行引用。 * 语法：
#id{ 属性名：属性值； }3）类选择器 给具有相同类名class的一类标签设置样式，用的最多 * 语法：
.类名{ 属性名：属性值； }例：
<style> .test{ color: royalblue; } </style> <div class="test"> 这是一个块 </div>1）层级选择器 * 语法：
父选择器 子选择器 孙子选择器{ 属性名：属性值； } .div2 div .sp1{ } 应用场景：一层层往下找到某一个或者一类标签。2）属性选择器
用于设置同一个属性值type的一组标签 注意：标签后面跟中括号 [ ],type后面的值跟单引号 ‘ ’； * 语法：
标签选择器[属性名='属性值']{ css的样式 } input[ type = 'text']{ background-color:green; }3）伪元素选择器 <a href="">< /a>标签的状态选择器
a标签设置点击前颜色，点击后的颜色，a标签的四种状态，link默认状态，hover鼠标移上去，active点击状态，visited点击过后的状态* link 对象在未被访问前的样式。 * hover 用于当用户把鼠标移动到元素上面时的效果； * active 用于用户点击元素那一下的效果 * visited 用于用户点击过后的效果
注意： 标签名 a 后面跟 冒号： * 语法：
a:link{ css样式 } a : link { color:bule ; } a : hover{ color:green; } a : active{ color:red; } a: visited{ color: yellow; }1）文字和文本属性 * color：文本颜色 * font-size：字体大小 * font-family：字体系列 ，类似HTML的<font>< /font>中的face属性，但是可以指定多个字体样式 font-family表示使用的字体系列，多个字体用逗号分隔，例如“字体1，字体2，字体3”此时优先使用的是字体1，如果字体1系统不存在，再使用字体2，以此类推。 * font-weight：bold，字体加粗 *text-align:文字水平对齐方式。 * text-decoration：下划线等 *text-decoration： underline 下划线 * text-decoration： none 没有线 ，要写在伪类选择器中才有用
a:link{ color: deepskyblue; text-decoration:none; } text-decoration： line-through表示一条线从中间滑过 text-decoration： overline-文字上方的线2）背景属性 * background-color：背景色 * background-image：背景图片 background-image：url（）；（引用有三种，src，href，url，其中url只用于css中 ）需要设置在body中 * background-repeat：平铺方式 ；重复背景图显示。也就是背景图片的 平铺方式。默认状态就是横向纵向都平铺；取值还有repeat-x,repeat-y，no-repeat横向、纵向、不平铺 * repeat:横向纵向都平铺 * repeat-x:横向平铺 * repeat-y:纵向平铺 * no-repeat:不平铺 * background : 颜色 图片 平铺方式（顺序随便） ；开发中的综合写法
background: red url() no-repeat;3）列表属性 * list-style-type : 列表前面使用默认的图标 * list-style-image : url() ; 列表前面使用自定义的小图片 icon
4）边框和尺寸属性
5）显示属性 * display ：display,取值有三种 ，none，inline，block，none为不显示，block（块级标签显示）为每个div独占一行，inline行级标签显示； * block:显示为块级元素 * inline：显示为行级元素 * none：不显示
选择器{ display：inline； }6） 浮动属性 脱离该HTML页面。 float：left 如果div中有内容就会环绕，而不会盖住。 清除浮动：clear：both；清除浮动带来的影响。 * float:浮动 * left * right * none
clear：清除浮动 leftrightboth一般为两个盒子 * padding * 内边距：盒子边框距离盒子内部的元素的距离
margin
外边距：就是盒子的边框距离外部框架的边框或者外部盒子边框的距离。border
盒子边框border-widthborder-styleborder-color实际开发中的简写border:width style color例子：
