初识前端
html标签
1、<strong>、<em>语气强调
<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调。
2、<q>、<blockquote>对文本进行引用
<q>标签是对短文本进行引用，其样式是对文本添加双引号，<blockquote>标签是对长文本进行引用，其样式是对文本进行缩进。
3、 空格
标签是在网页中显示空格的效果。
4、<hr>水平横线
<hr>标签是添加水平横线。
5、<address>为网页加入地址信息
有些网页底下可能会有联系地址，展示的时候用<address>就好了，样式为斜体，可以自己更改。
6、<code>、<pre>为网页添加代码
<code>是添加一行代码，<pre>是添加多行代码
7、<table>、<tbody>、<tr>、<th>、<td>表格
7.1、整个表格以table标签开始
7.2、如果不加<thead>、<tbody>、<tfooter>, table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table可以按结构一块块的显示，不在等整个表格加载完后显示。）
7.3、<tr>表示表格的一行，所以有几对tr标签，表格就有几行。
7.4、<td>表示表格的一个单元格，一行中包含几对td标签，说明一行中就有几列。
7.5、<th>表示表格的头部，表格表头
7.6、表格中列的个数，取决于一行中数据单元格的个数。
8、<mailto>在网页中链接email地址
image
注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
CSS样式
1、写法（三种）
1.1、内联式css样式
直接在html标签中写
<span style="color:red;font-size:20px;">Hello World!</span>
1.2、嵌入式css样式
直接在html标签中写
<html>
<style type="text/css">
...css样式写在此处
</style>
</html>
1.3、外部式css样式
这种就是新建一个css文件，把所有的css样式写在css文件中，然后在html中引用就好了
<html>
<link href="style.css" rel="stylesheet" type="text/css" />
</html>
总结：三种方式都可以给html设置样式，但是它们之间有优先级，内联式 > 嵌入式 > 外部式，当三种都设置了，会优先使用内联式。
2、选择器
2.1、标签选择器
标签选择器其实就是html代码中的标签。就像p，span，body等等，都可以直接设置样式。
<span>Hello World!</span>
span{
}
2.2、类选择器
类选择器就是为html标签设置一个名称，以英文圆点开头，后面跟名称，类选择器名称可以任意取，但是不要用中文；先把要修饰的内容用标签标记，然后再取名字，最后再写css样式：
<span class="hello">Hello World!</span>
.hello{
}
2.3、ID选择器
ID选择器和类选择器很像，但是它是为标签设置一个id，以#开头：
<span id="hello">Hello World!</span>
#hello{
}
总结：类选择器和ID选择器的共同点是他们可以应用于任何元素；不同点是，ID选择器只能在文档中使用一次，二类选择器可以使用多次（ID选择器的一个名称只能修饰一个标签，而类选择器的名称可以修饰多个）；可以使用类选择器词列表方法为一个元素同时设置多个样式，但是ID选择器不能；还有一点就是ID选择器的优先级更高。
3、CSS排版
3.1、字体（font-family）
我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。
body{
font-family:"宋体";
}
3.2、粗体（font-weight）
p{
font-weight:bold;
}
3.3、斜体（font-style）
p{
font-style:italic;
}
3.4、下划线和删除线（text-decoration）
下划线：
p{
text-decoration:underline;
}
删除线：
p{
text-decoration:line-through;
}
3.5、缩进（text-indent）
p{
text-indent:2em;
}
注意：2em的意思就是文字的2倍大小。
3.6、行间距（line-height）
p{
line-height:2em;
}
3.7、字母间距（letter-spacing，word-spacing）
letter-spacing表示单词的字母的间距，word-spacing表示单词与单词的间距
h3{
letter-spacing:10px;
}
h4{
word-spacing:5px;
}
3.8、段落对齐（text-align）
可以使用text-align样式代码为块状元素中的文本、图片设置居中样式。
h2{
text-align:center;
}
4、CSS盒模型
4.1、块级元素
特点：每个块级元素都从新的一行开始，并且其后的元素也另起一行；元素的高度、宽度、行高以及顶和底边距都可设置，元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
常用的块级元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>
4.2、内联元素
特点：内联元素和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。
常见的内联元素有：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
4.3、内联块级元素
特点：和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。
常见的内联块级元素有：<img>、<input>
总结：每一种类型的元素都可以通过代码来设置成其他类型元素，比如你可以使用display:block将元素设置成块级元素，使用display:inline将元素设置成内联元素，使用display:inline-block将元素设置成内联块级元素。
4.4、边框（border）
边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
简写：
div{
border:2px solod red;
}
分开写：
div{
border-width:2px;
border-style:solid;
border-color:red;
}
还可以给某一边单独设置：
div{
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
border-bottom:1px solid red;
}
注意：
border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。
border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。
border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用象素（px）。
4.5、宽度和高度（width，height）
一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界；高度同理。
div{
width:200px;
height:30px;
}
4.6、填充（padding）
元素内容与边框之间是可以设置距离的，称之为“填充”。填充有很多种写法。边界（margin）和填充（padding）设置一样。
合并上、右、下、左（顺时针）：
div{
20px 10px 15px 25px
}
分开：
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:25px;
}
如果上、右、下、左的填充都一样：
div{
padding:20px;
}
如果上下填充一样，左右填充一样：
div{
padding:20px 10px;
}
5、布局模型
5.1、流动模型（Flow）
流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
特征：第一，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。第二，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。
5.2、浮动模型（Float）
任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如div、p、table、img等元素都可以被定义为浮动。
div{
float:left; /*向左浮动*/
float:right; /*向右浮动*/
}
5.3、层模型（Layer）
层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。层模型有三种形式的定位来让html元素在网页中精确定位：
(1)、绝对定位（position:absolute）
position:absolute这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
div{
position:absolute;
left:100px; /*向右移100px*/
top:50px; /*向下移50px*/
}
(2)、相对定位（position:relative）
如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
#div{
position:relative;
left:100px;
top:50px;
}
(3)、固定定位（position:fixed）
与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。
#div{
position:fixed;
left:0;
top:0;
}
6、长度和颜色
6.1、颜色值
关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。设置颜色也有很多种方法
可缩写的颜色值：
p{
color:#000000; /*原写法*/
color:#000; /*缩写*/
}
p{
color:#336699; /*原写法*/
color:#369; /*缩写*/
}
设置颜色的方法：
(1)、英文命令颜色
p{
color:red;
}
(2)、RGB颜色
p{
color:rgb(133,45,200);
color:rgb(20%,33%,25%); /*也可以是百分比*/
}
(3)、十六进制颜色
p{
color:#00ffff;
}
6.2、长度值
长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。
(1)、px (像素)
像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。
(2)、em
就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。
(3)、% 百分比
也是本元素给定字体的 font-size 值乘以百分比，如果元素的 font-size 为 14px，那么乘以百分比就是最后的结果。
p{
font-size:12px;
line-height:130%;
}
line-height的实际就是：12*130%=15.6px
