1、 HTML
HTML 是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。
1.1 DOCTYPE
Doctype 告诉浏览器使用什么样的html或xhtml规范来解析html文档
Doctype 告诉浏览器使用什么样的 html 或 xhtml 规范来解析 html 文档, dtd 文件则包含了标记、attributes 、properties、约束规则。
<!DOCTYPE html>
<html lang="en"></html>
- BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
- CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）
如果你的页面没有 DOCTYPE 的声明，那么 compatMode 默认就是 BackCompat,浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。
1.2 head 部分
1.2.1 Meta(metadata information)
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
页面编码（告诉浏览器是什么编码）
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
刷新和跳转
< meta http-equiv=“Refresh” Content=“30″>
< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />
关键词
用于搜索引擎的收录
< meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >
描述
用于搜索引擎对网站的介绍
<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。" />
X-UA-Compatible
其他浏览器与 IE 的兼容性问题，如果不适用可能在 IE 上出现错误
#推荐使用
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
1.2.2 Title
网页头部信息
1.2.3 link 外链
标签定义文档与外部资源的关系。link 元素是空元素，它仅包含属性。此元素只能存在于 head 部分，不过它可出现任何次数
定义头部图片
<link rel="shortcut icon" href="favicon.ico">
HTML 与 XHTML 之间的差异
- 在 HTML 中，link 标签没有结束标签。
- 在 XHTML 中，link 标签必须被正确地关闭。
|属性|值|描述|
|---|||
|charset|char_encoding|HTML5 中不支持|
|href|URL|规定被链接文档的位置|
|hreflang|language_code|规定被链接文档中文本的语言|
|media|media_query|规定被链接文档将被显示在什么设备上|
|rel|alternate、author、help、icon、licence、next、pingback、prefetch、prev、search、sidebar、stylesheet、tag|规定当前文档与被链接文档之间的关系|
|rev|reversed relationship|HTML5 中不支持|
|sizes|heightxwidth、any|规定被链接资源的尺寸。仅适用于 rel="icon"。|
|target|_blank、_self、_top、_parent、frame_name|HTML5 中不支持。|
|type|MIME_type|规定被链接文档的 MIME 类型。|
1.2.4 style
style 标签用于为 HTML 文档定义样式信息。
在 style 中，可以规定在浏览器中如何呈现 HTML 文档。
type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"。
1.2.5 script
script 标签用于定义客户端脚本，比如 JavaScript。
script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。
引进文件
< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
写js代码
< script type="text/javascript" > ... </script >
1.3 body 常用标签
1.3.1 行标签与块标签
标签一般分为两种：块级标签 和 行内标签
- 行标签包含 a、span、em、strong、img、var；
- 块标签包含 p、div、ul、ol、li、dl、dt、dd、h1~h6；
行标签介绍
- a 标签：主要用来链接一个其他的网页；
- span 标签：主要用来对行内的文字进行一些样式以及其他的操作；
- em 标签：一般用来对文字进行强调，使用斜体体现出来；
- strong 标签：一般用来对文字进行强调，使用加粗字体体现出来；
- img 标签：图片引用标签，其中 src属性中写入图片的地址；
- var 标签：JavaScript中命名变量的标签。
块标签介绍
- p 标签：段落标签，段落文字使用，默认格式：段尾进行换行；
- div 标签：划分块的主要使用标签；
- ul 标签：无序列表的主标签，后面的标号为圆点（黑色）；
- ol 标签：有序列表的主标签，后面一般跟有序的1,2,3,4,5...；
- li 标签：列表中的主体使用标签
- dl 标签：自定义列表的主标签；
- dt 标签：自定义列表的表头；
- dd 标签：自定义标签的表头的解释（描述）信息；
- h1~h6：6级标题标签、字体的大小依次变小。
1.3.2 段落 pr 与换行 br
- p 表示段落，默认段落之间是有间隔的！
- br 是换行
1.3.3 a 标签介绍
a 标签有:标签、跳转/重定向、锚 三种作用
跳转默认是在当前窗口执行的，如果加入target="_blank" 就会在新窗口打开
<a href="http://www.oldboyedu.com" target="_blank">老男孩</a>
锚示例：
<a href="#c1">第三章</a>
<div id="c1" style="height: 700px;background-color: rebeccapurple;">
著的第五部小说又称《遮天前传》，《圣墟》为后传首发于起点，辰东结婚后的第一部作品
</div>
1.3.4 table 表格
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>主机名</th>
<th>端口</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td colspan="2">c1.com</td>#向右合并一个单元格
</tr>
<tr>
<td>2</td>
<td>c1.com</td>
<td>80</td>
</tr>
<tr>
<td>3</td>
<td rowspan="2">c1.com</td>#向下合并一个单元格
<td>80</td>
</tr>
<tr>
<td>4</td>
<td>80</td>
</tr>
</tbody>
</table>
1.3.5 label
在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表格上。
<label for="user">用户名</label> <input id="user" type="text" />
#点击用户名，光标就在框里了
1.3.6 fieldset
标签将表单内容的一部分打包，生成一组相关表单的字段。
当一组表单元素放到 fieldset 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
1.3.7 img 相关
img 元素向网页中嵌入一幅图像。从技术上讲，img 标签并不会在网页中插入图像，而是从网页上链接图像。img 标签创建的是被引用图像的占位空间。
img 标签有两个必需的属性：src 属性 和 alt 属性。
|属性|值|描述|
|--|||
|alt|text|规定图像的替代文本|
|src|URL|规定显示图像的 URL|
|height|pixels、%|定义图像的高度。|
|width|pixels、%|设置图像的宽度|
|ismap|URL|将图像定义为服务器端图像映射|
|longdesc|URL|指向包含长的图像描述文档的 URL|
|usemap|URL|将图像定义为客户器端图像映射|
|vspace|pixels|不推荐使用。定义图像顶部和底部的空白|
|align|top、bottom、middle、left、right|不推荐使用。规定如何根据周围的文本来排列图像。|
|border|pixels|不推荐使用。定义图像周围的边框。|
|hspace|pixels|不推荐使用。定义图像左侧和右侧的空白|
1.3.8 form 表单
form 标签用于为用户输入创建 HTML 表单。表单用于向服务器传输数据。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
注释：form 元素是块级元素，其前后会产生折行。
|属性|值|描述|
|---|||
|accept|MIME_type|HTML 5 中不支持|
|accept-charset|charset_list|规定服务器可处理的表单数据字符集|
|action|URL|规定当提交表单时向何处发送表单数据|
|autocomplete|on、off|规定是否启用表单的自动完成功能|
|enctype|见说明|规定在发送表单数据之前如何对其进行编码|
|method|get、post|规定用于发送 form-data 的 HTTP 方法|
|name|form_name|规定表单的名称|
|novalidate|novalidate|如果使用该属性，则提交表单时不进行验证|
|target|_blank、_self、_parent、_top、framename|规定在何处打开 action URL|
enctype 属性可能的值：
application/x-www-form-urlencoded
multipart/form-data
text/plain
<html>
<body>
<form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain">
<h3>这个表单会把电子邮件发送到 W3School</h3>
姓名：<br />
<input type="text" name="name" value="yourname" size="20">
<br />
电邮：<br />
<input type="text" name="mail" value="yourmail" size="20">
<br />
内容：<br />
<input type="text" name="comment" value="yourcomment" size="40">
<br /><br />
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>
</body>
</html>
1.3.9 textarea
textarea 标签定义多行的文本输入控件。
文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
注释：在文本输入区内的文本行间，用 "%OD%OA" （回车/换行）进行分隔。
提示：可以通过 textarea 标签的 wrap 属性设置文本输入区内的换行模式。
1.3.10 input 提交
file
直接限制input type='file'的文件类型限制，通过accept属性进行设定,多个类型用逗号分隔开,因为accept是html5的新特性，所以火狐和IE的支持就显得单薄了
type 的类型有button、checkbox、file、hidden、image、password、radio、reset、submit、text
<input id="fileSelect" type="file" accept=".csv, application/vnd.ms-excel" enctype='multipart/form-data' method='POST'/>
button 与 submit
submit 方法把表单数据提交到 Web 服务器。
button 标签定义一个按钮
<input type='button' value='button' />
<input type='submit' value='submit'/>
Radio 与 checkbox
Radio 对象代表 HTML 表单中的单选按钮。
checkbox 对象代表 HTML 表单中的单选按钮。
<input type="radio" name="gender" value="2" checked="checked"/>女 # checked="checked"为默认选项
<input type="checkbox" name="hobby" value="14" checked="checked"/>睡
1.3.11 select
select 元素可创建单选或多选菜单。option 标签用于定义列表中的可用选项。
<html>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
2、CSS
基础使用
字体颜色
color: white;
背景颜色
background-color: red;
字体大小
font-size: 16px;
加粗
font-weight: bold;
高度
height: 200px;
height: 10%;
宽度
400px;
40%;
2.1 background 背景
background 简写属性在一个声明中设置所有的背景属性
|值|描述|
|---||
|background-color|规定要使用的背景颜色|
|background-position|规定背景图像的位置|
|background-size|规定背景图片的尺寸|
|background-repeat|规定如何重复背景图像|
|background-origin|规定背景图片的定位区域|
|background-clip|规定背景的绘制区域|
|background-attachment|规定背景图像是否固定或者随着页面的其余部分滚动|
|background-image|规定要使用的背景图像|
|inherit|规定应该从父元素继承 background 属性的设置|
通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。
2.2 display
定义建立布局时元素生成的显示框类型,把元素转换为内联元素或块元素
|值|描述|
|---||
|none|此元素不会被显示|
|block|此元素将显示为块级元素，此元素前后会带有换行符|
|inline|默认。此元素会被显示为内联元素，元素前后没有换行符|
|inline-block|行内块元素。（CSS2.1 新增的值）|
|list-item|此元素会作为列表显示|
2.3 border 边框
简写属性在一个声明设置所有的边框属性。
border: border-width border-style border-color
border-width
简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-thin medium thick 10px;
#上边框是细边框
#右边框是中等边框
#下边框是粗边框
#左边框是 10px 宽的边框
border-style
用于设置元素所有边框的样式，或者单独地为各边设置边框样式
border-style:dotted solid double dashed;
#上边框是点状
#右边框是实线
#下边框是双线
#左边框是虚线
border-color
border-color 属性是一个简写属性，可设置一个元素的所有边框中可见部分的颜色，或者为 4 个边分别设置不同的颜色
2.4 padding 内边距
padding 简写属性在一个声明中设置所有内边距属性。这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
注释：不允许使用负值。
|值|描述|
|---||
|auto|浏览器计算内边距|
|length|规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px|
|%|规定基于父元素的宽度的百分比的内边距|
|inherit|规定应该从父元素继承内边距|
padding:10px 5px 15px 20px;
上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px
4个数值：上、右、下、左
3个数值：上、右、下
2个数值：上下、左右
1个数值：上下左右
补充 padding 相关属性
|属性|描述|
|---||
|padding-bottom|设置元素的下内边距。|
|padding-left|设置元素的左内边距|
|padding-right|设置元素的右内边距|
|padding-top|设置元素的上内边距|
2.5 margin 外边距
margin 简写属性在一个声明中设置所有外边距属性
这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
用法同 内边距相同
2.6 position 定位
position 定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
|值|描述|
|---||
|absolute|生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位元素的位置通过"left", "top", "right" 以及 "bottom" 属性进行规定|
|fixed|生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定|
|relative|生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。|
|static|默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）|
|inherit|规定应该从父元素继承 position 属性的值|
2.7 cursor 光标
属性规定要显示的光标的类型
|值|描述|
|--||
|url|需使用的自定义光标的 URL|
|default|默认光标（通常是一个箭头）|
|auto|默认。浏览器设置的光标|
|crosshair|光标呈现为十字线|
|pointer|光标呈现为指示链接的指针（一只手）|
|move|此光标指示某对象可被移动|
2.8 opacity 透明度
opacity 属性设置元素的不透明级别,默认为 1 即完全不透明
opacity: value|inherit;
# value 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）
# inherit 应该从父元素继承 opacity 属性的值。
2.9 float 浮动
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
注释：
- 如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
- 假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
|值|描述|
|---||
|left|元素向左浮动|
|right|元素向右浮动|
|none|默认值。元素不浮动，并会显示在其在文本中出现的位置|
|inherit|规定应该从父元素继承 float 属性的值|
float:right/left
多行内容会显示在一行，像下面代码示例，内容一二三会在一行，背景色会被覆盖（如果没有 clear: both 参数）
<div style="background-color: rebeccapurple;">
<div style="float: left;background-color: green;">内容一</div>
<div style="float: left;background-color: green;">内容一</div>
<div style="float: right;background-color: green;">内容二</div>
<div style="clear: both;"></div>
</div>
line-height & text-align 居中
- 上下居中：line-height:48px;
- 左右居中：text-align:center;
去除页面左右两侧的边距（因为 body 默认有边距）
<style>
body{margin: 0;}
</style>
只有 0 表示上下左右无边距
0 auto 表示上下无边距、左右自适应居中
0 auto 0 auto 表示上右下左
布局属性
980px;
margin: 0 auto;
2.10 style 选择器优先级
ID 选择器，优先级最高
#wc{color: firebrick}
<p id="wc">编辑</p>
属性选择器，第二优先
input[type="text"] {color: aqua}
<input type="text"/>
类选择器，第三优先
.c1{color:royalblue}
<div class="c1">你好</div>
标签选择器
a{color: firebrick}
<a>窗口</a>