目录：
一、HTML
1、概述
2、HTML
二、CSS
一、HTML
1、概述
HTML是英文Hyper Text Mark-up Lang（超文本标记语言）的缩写，他是一种制作万维网页面的标准语言，相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它
浏览器负责将标记翻译成用户看得懂的格式呈现给用户
2、HTML文档
文档树
Doctype
Doctype告诉浏览器使用什么样的html或者xhtml规范来解析html文档
有与无的区别：
1、BackCompat：标准兼容模式未开启（或叫怪异模式、混杂模式）
2、CSS1Compat：标准兼容模式已开启（或叫严格模式）
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat，这也就是恶魔的开始---浏览器按照自己的方式来解析渲染页面，那么在不同的浏览器就会显示不同的样式，如果你的页面添加了DOCTYPE那么就等同于开启了标准模式，浏览器就按照W3C的标准解析渲染页面，这样一来，你的页面在所有浏览器里显示的就都是一样了
用处：
DOCTYPE告诉浏览器使用什么样的html或者xhtml规范来解析html文档，dtd文件则包含了标记、attri、proprties、约束规则
Meta（metadata information）
提供有关的页面元信息，例如：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键字
1、页面编码（告诉浏览器是什么编码）
1 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
2、刷新和跳转
1 <meta http-equiv="refresh" content="30"/>
2 <meta http-equiv="refresh" CONTENT="5;Url=http://www.baidu.com"/>
3、关键字
1 <meta name="keywords" content="星际2,专访"/>
4、X-UA-Compatible
微软IE6是通过XP、WIN2003等操作系统发布出来的，作为占统治地位的桌面操作系统，也使得IE占据了统治地位，许多网站开发的时候，按照IE6标准去开发，而IE6自身的标准也是微软公司内部定义的，到了IE7的时候，采用微软公司内部标准以及部分W3C标准，这个时候许多网站升级到了IE7就比较痛苦，很多代码调整后，才能正常运行，而到了IE8以后，基本微软内部定义标准就废弃了，而全面支持W3C标准，由于基于对标准彻底变化使得原先在早期IE8上能够访问的网站，在IE8上没法正常访问，会出现一些排版错误、文字重叠、显示不全等各种兼容性错误。
与任何早期浏览器相比，IE8 对行业标准提供了更加紧密的支持，因此针对旧版本的浏览器设计的站点可能不会按照预期显示，为了帮助减轻问题，IE8引入了文档兼容性概念，从而允许指定站点所支持的Internet Explo版本，文档兼容性在IE8上添加了新的模式，这些模式告诉浏览器如何解释和呈现网站，如果站点在IE8中没法正确显示，则可以更新该该站点以支持最新的WEB标准，也可以强制IE8按照旧的浏览器中查看站点方式来显示内容，通过使用meta元素将X-UA-Compatible标头添加到网页中，可以实现这点。
当IE8遇到未包含X-UA-Compatible网页时，将使用指令来确定如何显示该网页，如果该指令丢失或者未指定基于标准的文档模型，则IE8以IE5模式来显示
1 <meta http-equiv="X-UA-COMPATIBLE" content="IE=IE7"/>
Title
网页头部
Link
1、css
1 < link rel="stylesheet" type="text/css" href="css/common.css" >
2、icon（表示在网页顶部小标签上可以添加图片）
1 < link rel="shortcut icon" href="image/favicon.ico">
Style
在页面中写样式
例如：
1 < style type="text/css" >
2 .bb{
3 background-color: red;
4 }
5 < /style>
Script
1、引进文件
1 < script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
2、写JS代码
1 < script type="text/javascript" > ... </script >
常用标签
标签一般分为两种：
1、块级标签
2、内联标签（行内标签）
各种符号
http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
例如： ； >； <；
p和br
p表示段落，默认的段落之间是有间隔的
br表示换行
a标签
< a href="http://www.autohome.com.cn"> </a>
1、target属性，_blank表示在新的页面打开
2、锚 href=‘#ID’ ID不能重复
例子：
1 <a href="#1">第一章</a> <!-- 通过id来锚定某一章节 -->
2 <a href="#2">第二章</a>
3 <a href="#3">第三章</a>
4 <a href="#4">第四章</a>
5 <p id='1' style="height: 900px;">第一章内容</p>
6 <p id='2' style="height: 900px;">第二章内容</p>
7 <p id='3' style="height: 900px;">第三章内容</p>
8 <p id='4' style="height: 900px;">第四章内容</p>
H标签
H1~H6 均属于块级标签，字体大小依次减小，单位px或者%
span标签
span属于内联标签，表示白板
b标签：
<b>给字体加粗</b>
em标签：
<em>变成斜体</em>
strike标签：不建议使用
<strike>去除</strike>
<del>替代strike标签</del> #代替strike标签
input标签与form标签（表单）
备注：所有的input标签单纯出现没有任何意义，它不知道将数据提交到哪个位置，需要将input标签嵌套在form标签中才能完成提交动作，同时form中需要涉及到<div> <p> <span>标签内容都不会提交，form中只会提交input的内容
form属性：
1、action 表示提交到哪个位置
2、method表示用何种方式提交，最常用的两种方式为get与post
1 <form action="localhost:8888" method="get">
2 用户名:<input type="text" name="username"/>
3 密码:<input type="password"/ name="password">
4 <input type="button" value="登录"/>
5 <input type="submit" value="上传"/> 6 </form>
在点击上传后，会提交一个字典给后台
例子：
通过搜狗搜索内容：
1 <form action="https://www.sogou.com/web" target="_blank">
2 <input type="text" name="query" />
3 <input type="submit" value="搜索"/>
4 </form>
input属性类型：
1、text
-name属性 value=XXX 表示可以通过value表示默认值
用户名:<input type="text"/>
2、password
-name属性
密码:<input type="password"/><!--显示密文-->
3、submit
-value=提交，提交按钮，表单
<input type="submit" value="上传"/>
4、button
-value=登录，单纯的按钮
<input type="button" value="登录"/>
5、radio
-value，name属性（name相同会互斥） checked=checked表示默认值选择该值
1 男<input type="radio" name="gender" value="1"/>
2 女<input type="radio" name="gender" value="2"/>
备注：name相同就互斥
6、checkbox
-value，name属性（批量获取数据） checked=checked表示默认值
1 篮球<input type="checkbox" checked="checked" name="a" value="1"/>
2 排球<input type="checkbox" name="a" value="2"/>
3 足球<input type="checkbox" name="a" value="3"/>
4 网球<input type="checkbox" name="a" value="4"/>
7、file
-依赖form表单的一个属性，enctype=multipart/form-data 会把本地文件一点一点上传到服务器
<input type="file" name="filename"/>
8、reset
-重置
<input type="reset" value="重置"/>
textarea属性
非自闭合标签，默认在两个标签中间，有name属性
<textarea name="demo">aaaaa</textarea>
select标签
有name属性，内部option，value提交后台，size表示多个，multiple会变为多选，optgroup变为分组，selected=“selected”表示默认值
<select name="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
<option value="4" selected="selected">南京</option>
</select>
<select name="mcity" multiple="multiple" size="3">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
<option value="4" selected="selected">南京</option>
</select>
<!-- 多选-->
1 <select name="ch-city">
2 <optgroup label="河北省">
3 <option value="1">邯郸</option>
4 <option value="2">唐山</option>
5 </optgroup>
6 <optgroup label="山东省">
7 <option value="3">济南</option>
8 <option value="4">青岛</option>
9 </optgroup>
10 </select>
img标签
属性：
alt：图片不存在时显示的注释
title：图片的名称注释
src：图片出处
1 <a href="https://www.baidu.com">
2 <img src="a.jpg" style="height: 60px;width: 60px;" alt="QQ" title="QQ">
3 </a>
列表(不常用，了解即可)
ul（非顺序）
li
ol（顺序）
li
dl（分层）
dt
dd
1 <ul>
2 <li>a</li>
3 <li>b</li>
4 <li>c</li>
5 <li>d</li>
6 </ul>
7 <ol>
8 <li>a</li>
9 <li>b</li>
10 <li>c</li>
11 <li>d</li>
12 </ol>
13 <dl> <!-- 表示分层 ,dt第一层,dd第二层-->
14 <dt>ttt</dt>
15 <dd>ddd</dd>
16 <dd>ddd</dd>
17 <dd>ddd</dd>
18 <dd>ddd</dd>
19 </dl>
表格
table
thead（表格头部）
tr
th
tbody（表格内容部分）
tr
td
1 <table border="1">
2 <thead>
3 <tr>
4 <th>1</th>
5 <th>2</th>
6 <th>3</th>
7 </tr>
8 </thead>
9 <tbody>
10 <tr>
11 <td>一</td>
12 <td colspan="2">二</td> <!--合并单元格-->
13
14 </tr>
15 <tr>
16 <td rowspan="2">一</td><!--合并列-->
17 <td>二</td>
18 <td>三</td>
19 </tr>
20 <tr>
21
22 <td>二</td>
23 <td>三</td>
24 </tr>
25 <tr>
26 <td>一</td>
27 <td>二</td>
28 <td>三</td>
29 </tr>
30 </tbody>
31 </table>
label标签
用于点击文字，使得关联的标签获取光标
1 <form>
2 <label for="username">用户名</label><!--和input合并,点击label直接进入输入框中-->
3 <input type="text" name="user" id="username" />
4 <input type="submit" value="提交"/>
5 </form>
fildset标签
1 <fieldset>
2 <legend>登录</legend>
3 <form>
4 <label for="username1">用户名</label>
5 <input type="text" name="user1" id="username1" />
6 <br/>
7 <label for="pass">密码</label>
8 <input type="password" name="password" id="pass" /><br/>
9 <input type="submit" value="提交"/>
10 </form>
11 </fieldset>
二、CSS
1、概述
CSS是英文Cascading Style Sheets缩写，称为层叠样式表，用于对页面进行美化
存在三种方式：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。
语法：style='key1:value1;key2:value2;'
- 在标签中使用style=‘xx:xxx’
- 在页面中嵌入<style type='text/css'></style>块
- 引入外部CSS文件
必要性：美工会对页面颜色搭配和图片美化负责，开发人员必须要知道如何实现
备注：style的ID和CLASS均不能以数字开头，但是极少使用ID来标记CSS，CLASS选择器是最常用的
注释：/* */表示注释
CSS样式：
1、id 选择器
1 #a1{
2 background-color: blueviolet;
3 }
2、class选择器（着重推荐）
1 .b1{
2 background-color: red;
3 }
3、标签选择器（推荐使用）
1 div {
2 background-color:black;
3 color: white
4 }
满足div下面的所有样式均改为此类型
4、层级选择器（空格）（推荐使用）
1 span div{
2 background-color:black;
3 color: white;
4 }
.c1 div{
background-color:blue;
color: white;
}
<div class="c1">dd
<span class="c1">
<div>daaaaddaaa</div>
</span>
5、组合选择器（逗号）（推荐使用）
1 <style>
2 #i1,#i2,#i3{
3 background-color:blueviolet;
4 color: white;
5 }
6 </style>
7
8 <div id="i1">f1</div>
9 <div id="i2">f2</div>
10 <div id="i3">f3</div>
6、属性选择器（着重推荐）
对选择到的标签再通过属性进行一次筛选
1 <style>
2 input[type='text']{
3 width: 100px;
4 height:200px;
5 }
6 </style>
7
8
9
10 <form>
11 用户<input type="text"/>
12 密码<input type="password"/>
13 </form>
7、height/width/border/font-size/font-weight/line-height/font-weight/text-align
height:表示高度，可以使用px，一般不能用% 因为会产生进度条
width：表示宽度，可以使用px也可以使用%
border：边框
font-size：字体大小
font-weight：字体是否加粗，bold表示加粗
line-height：表示垂直居中，如果height为48px，line-height也填写为48px，表示垂直居中
text-align：表示水平居中
1 <div style="height: 48px ;width: 200px;border: 1px solid black;font-size:16px;text-align:center;line-height: 48px;font-weight: bold;">
2 bbbbbbb
3 </div>
8、float
让标签浪起来，块级别的标签也可以堆叠
父div控制子div：
<div style='clear: both'></div>
<div style="width: 20%;background-color: red;float: left;">a</div>
<div style="width: 80%;background-color:blue;float: right;">b</div>
9、display
display：none；让标签显示消失
display: inline; 块级标签变为内联标签
display：block；内联标签变为块级标签
display：inline-block；具有inine：默认自己有多少占多少；block：可以设置高度、边框等属性
内联标签：无法设置高度、边距
块级标签：可以设置高度、边框
1 <div style="background-color: red;display: inline;">a1</div>
2 <span style="background-color: red;display: block;">b</span>
10、padding margin(0,auto)
margin:外边距
padding：内边距