HTML/CSS
1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
开头：<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
CSS字体设置：
设置可以简写
1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
嵌入式：（放在head的style里）<style type="text/css"></style>
letter-spacint:Xpx;文字/字母间隔为X个像素
font-size:大小（数字px）;
font-weight:bold;字体加粗
font-style:italic;斜体
font-family:”宋体/Microsoft yahei”;
color:颜色（#数字/red）;数字部分一共有六位，如果每两位相同就可以写成三位。也可以是rgb(X%,Y%,Z%)；或rgb(X,Y,Z)；。
background:颜色;
text-decoration:underline;下划线
text-decoration:line-through;删除线（300元）
text-align:位置（可以为center/left/right，也可以用来设置图片的）;
text-indent:Xem;每段前面空X个空格
line-height:2em;行间距
注释用/**/
内联式：直接<span style=”color:red;font-size:12px”>
外部式：写一个CSS文件，再在style中写<link href=”文件名.css” rel=”stylesheet” type=”text/css” />
优先级：离元素越近，优先度越高
类选择符
CSS中用.类名来设置类的形式
body中就用<span class=”类名”></span>的形式使用
ID选择器
CSS中用#ID名
body中用<span id=”id名”></span>
ID只能用一次，类可以多次使用
一个span的class可以等于多个类，id不行
类的第二种用法
.food>li{border:1px solid red;}
这句代码意思是让food类中第一次后代的li元素都加入红色边框（border制定框的粗细，后面决定框的颜色）
>表示第一次后代，去掉>表示所有后代
*{}设置全部字体
a:hover{color:red;}让鼠标滑过<a></a>的内容时，字体变色
不同的类和p/h1可以一起设置字体形式，用逗号隔开就行
继承性 如在<p></p>中设置p为红色，里面所有都是红色，但是如果设置边框，则里面的子元素不会有边框，这个不可继承
当同一层的文本（例如：<p class=”first”></p>这里p和first类冲突，但是如果p里面有span，那就没有关系）有多段类型匹配，有冲突时，比如都设置了颜色，则取权值最高的那项
PS：当且仅当同一层才有冲突，如果不同层，就取更细的那层的设置
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
如果权重一样就取最近的那个设置
可以在某项设置中的分号前面打!important，让这项设置权重最高
居中设置
水平居中
对于定宽块状元素要width:200px;margin:Xpx auto;
对于不定宽块状元素有三种方法
1 用<div><table></table></div>并设置table margin:0 auto;
2 将块状元素变成行内元素
类元素设置text-align:center;类的子元素就设置display:inline;
例：
html代码：
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
css代码：
<style>
.container{
text-align:center;
}
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
/* margin-right:8px（设置li文本之间的间隔）*/
.container li{
margin-right:8px;
display:inline;
}
</style>
3 给父元素设置float,以及position:relative;和left:50%;
子元素设置position:relative;和left:-50%;
垂直居中
1 父元素高度确定的单行文本
设置父元素的height和line-height一致
2 父元素高度确定的多行文本
利用table中td标签默认设置vertical-align:middle
html代码：
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
css代码：
table td{height:500px;background:#ccc}
显示文字：
标题用<h1>到<h6>
正文用<p>
段落划分<div></div>可以用<div id=”xx”></div>的形式给每个段落起个标识（id）
强调中，斜体用<em></em>加粗用<strong></strong>
设置单独样式<span></span>（例如设置颜色额）
引用一句话<q></q>(自动加双引号)
引用一段话<blockquote></blockquote>(不用再文本中加双引号)
地址写在<address></address>中
插入一句代码<code></code>
插入一段代码<pre></pre>
无序信息列表
<ul>
<li></li>
</ul>
有序信息列表
<ol>
<li></li>
</ol>
利用<a></a>创建超链接
<a href=”网址”>用来创建的文字</a>（显示时默认蓝色）
在<a>中可以添加东西
title=”鼠标移到超链接上时显示的内容”
target=”_blank”表示在新窗口打开
用mailto来快速寄邮件
如果mailto后面同时有多个参数的话，第一个参数必须以？开头，后面每个参数都以&开头。
创建表格：表格四要素table,tbody,tr,td/th
<table></table>表格开始结束
<tbody></tbody>如果没有tbody，表格就要等到table的全部内容加载完才显示，有tbody划分的话，一段的tbody加载完就直接显示
<tr></tr>标识一行
<th></th>标题的一列
<td></td>普通文本的一列
如果不设置css，表格不会有线
表格摘要(摘要是不会显示出来的)
<table summary=”表格简介文本”>
标题
<caption>标题</caption>
设置表格：为th，td单元格添加黑色边框
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
显示图片：加入图片：<img src=”图片网址”>（写在body中）
可以添加
alt=”图片加载失败时显示的文本”
title=”鼠标在图片上时显示的文本”
与用户交互：
用<form></form>，<form>中可以加action=”数据被传送到哪里”，method(get/post)
文本框，按钮等都会放在<form></form>中
文本框/密码框/按钮用<input/>
文本框/密码框<input type=”text/password” name=”文本框名字，给后台使用” value=”文本默认值”/>
type为text则为文本框，password则为密码框
要输入多行文本
<textarea rows=”行数” cols=”列数”>默认文本</textarea>
单选/多选按钮<input type=”radio/checkbox” value=”提交到后台的值” name=”按钮名字(供后台使用)” id=”属性值，配合label使用”/>
radio则为单选框，同一个选框的按钮，name要一致
checkbox为复选框如果在<input/>中设置check=”checked”该选项被默认选中
提交/重置按钮<input type=”submit/reset” value=”提交/重置”/>会提交/重置上一个框里的内容
输入邮箱
<input type="email" id="属性值(配合label使用)" placeholder="框内默认值"/>
<label for=”控件id名字”>文本</label>
按label的文本的时候，for中id的控件会被选中(需要先在控件中设置id)
下拉列表框（也在form中）
<select>
<option value=”向服务器提交的值”>显示的选项</option>
</select>
在<option>中加select=”selected”则该选项为默认选项
在<select>中加multiple=”multiple”则此选择为多选，按住Ctrl加单击就可以多选
元素：
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
display:block/inline/inline-block;可以将一个元素变成其他元素，就可以具有其他元素的特点
盒模型：
设置边框：
全边框
border-width:Xpx;粗细
border-style:dashed(虚线)/dotted（点线）/solid(实线);
border-color:red;框的颜色
可以简写为
Border:Xpx solid red;
只设置上/下/左/右边框
Border-top/left/right/bottom:Xpx dashed/dotted/solid red;
盒模型的高度和宽度：
div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}
元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px
填充层padding
padding:Xpx Xpx Xpx Xpx;（顺序：上，右，下，左）
也可以分开写
如果上下左右都一样
padding:Xpx;
如果上下一样，左右一样
padding:Xpx Xpx;
margin和padding设置方式一样
CSS布局模型：
流动模型（默认就是流动模型）
流动布局模型具有2个比较典型的特征：
- 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。就是说块状元素之间要隔行。
- 在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。就是说多个内联元素会在同一行显示。
浮动模型
float:left/right让块状元素在同一行显示，并左/右对齐，同一行放不下了就放到下一行
层模型
层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
绝对定位
先设置position:absolute;
然后用left/right/top/bottom:Xpx;设置该元素在其最近的父包含块中的位置，如果没有，就是在浏览器中的位置，意思是距离left/right/top/bottom的距离
相对定位
position:relative;
跟绝对定位的区别在，相对定位会保留移动前的位置，下一个元素会在它移动前的位置的下面。
固定定位
position:fixed;
这个元素位置是固定的，它不会随着网页滑轮滚动而改变位置
relative和absolute混合使用
在父元素中加入position:relative;
子元素就可以用position:absolute;来对父元素作偏移定位了
隐式改变display类型
设置position:absolute或float:left/right
元素的display类型就会自动变成块状元素，就可以设置width和height
一些符号：
空格
回车 <br/>
分隔横线<hr/>
注释 <!--message-->