标签：
导航站：
http://start.kaishengit.com/
推荐网站：
http://www.w3school.com.cn/
http://www.w3schools.com/
https://developer.mozilla.org/zh-CN/
http://www.html5rocks.com/en/
图标网站
iconfinder.com
findicons.com
flatui.com
subtlepatterns.com
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
• HTML 标签是由尖括号包围的关键词，比如 <html>
• HTML 标签通常是成对出现的，比如 <b> 和 </b>
• 标签对中的第一个标签是开始标签，第二个标签是结束标签
HTML文件常用.html作为后缀，HTML文件运行在各个浏览器中，各个浏览器对HTML的执行有所差别
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
html标签中可以有Head和body子标签，Head标签代表这个网页的头部，body标签代表网页的身体。Head标签中的子标签title代表网页的标题，一般会在网页的tab标签中显示。剩下的所有的标签都要写在body标签中。要记住所有的标签都要写在html标签内。
标签有单标签和双标签。
单标签只有一个标签，例如:
换行标签<br/>
水平线标签<hr/>
推荐所有的单标签都是用/来代表该标签的结束
双标签中的第一个标签称为开始标签，后一个标签称为结束标签，结束标签与开始标签的不同之处在于，结束标签尖括号内容的前面有/来修饰，代表这是这个标签的结束。标签之间可以相互嵌套。但是开始标签和结束标签的嵌套顺序要一样。
html中的所有标签是不区分大小写的，但是推荐使用全小写的方式。
在有双标签中的开始标签里面可以定义这个标签的样式属性，定义的时候属性属性名= "Value"来使用，属性名可以是HTML5固定的，也可以是用户自定义的。属性值可以用单引号或双引号括起来。，推荐使用双引号括起来。
标签 用途
<b> 文字粗体
<i> 文字斜体
<u> 文字下划线
<br/> 换行
<p> 段落
<pre> 格式化段落
<sub> 上标
<sup> 下标
<hr/> 水平线
<h1>~<h6> 标题
<big> 定义大号字
<em> 着重文字
<small> 小号字
<strong> 加重语气
<code> 定义计算机代码
<abbr> 定义缩写
<address> 地址
<blockquote> 大段引用
在使用加粗，下划线，斜体标签的时候可以使用b,i,u这样的标签显示这样的效果，但是HTML5推荐使用strong，em这样的语义标签来定义这样的效果
语义标签就是根据这个标签的名字就知道这个标签是干什么的。
网页背景：
背景颜色
<body bgcolor="#ff7400">
</body>
背景图片
<body background="img/bg.gif">
</body>
在定义颜色的时候，颜色的取值有三种方式：
1.直接使用颜色名,例如red代表红色
2.或者使用使用RGB表示颜色值的十六进制表示
color = "#ccc000";
利用三原色可以调出任意的颜色。
常用颜色对照：
#ffffff 代表的是白色，默认值这个颜色
#000000 代表的是黑色
当颜色值是#ffffff这种RGB的颜色值都是一样的时候可以使用#fff这样的缩写形式来表示这样的颜色。
常见的流行色：
扁平化：flat
拟物化：
文字标签
<font size="24" color="#000000" face="微软雅黑">
Hello,HTML!
</font>
图片标签
<img src="img/hero.png" />
<img src="img/hero.png" alt="Big Boat" title= "title name"/>
<img src="img/hero.png" width="100" height="100"/>
使用图片标签的时候，Alt这个属性是为了给搜索引擎用的，用来根据文字来搜索图片的时候，来查找这个图片。并且在IE环境下打开这个网页，会显示Alt这个属性的属性值，但是在chrome中不显示这个属性值。要想让chrome显示这个属性值，可以使用通用的title属性值，用来当将鼠标放上图片的时候，就会给出提示。Alt依然是用来供搜索引擎用来搜索图片来用。title用来表示这个图片的一些图片信息。
相对路径和绝对路径
D:/Program Fils/web/index.html
这样的路径是绝对路径。
/web/index.html
这样的路径是相对路径。
在生产环境中虽然使用绝对路径也可以正常显示图片等内容。但是当将网站内容部署到Linux服务器上面的时候，文件系统会找不到指定的D盘的文件。因此在表示具体文件的时候统一使用相对路径。不准使用绝对路径。
列表
有序列表
<ol type="a" start="2">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
type的属性值
a------代表使用小写字母排序
A------代表使用大写字母排序
i------代表使用小写的罗马字符排序
I------代表是用大写的罗马字符排序
1------代表使用数字来进行排序(默认)
start属性值代表从第几个相应类型的元素开始排序。
无序列表
<ul type="square">
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
type属性值
square--------黑色实体方框
circle--------黑色实体圆
round---------空心圆(默认)
超链接和锚标记
超链接
<a href="http://www.google.com.hk">谷歌</a>
<a href="ftp://ipaddress">ftp</a>
<a href="mailto:username@google.com">联系我</a>
<a href="thunder:URLcongent">迅雷专用下载通道</a>
锚标记
1.定义锚标记
<a name = "content">锚标记</a>
2.使用锚标记
<a href="#content">使用锚标记</a>
特殊字符
特殊字符 转义字符
空格
< <
> >
￥ ¥
® ®
© ©
± ±
÷ ÷
‰ ‰
" "
mete标签
定义字符集
<meta htpp-equiv="content-type" content="text/html;charset=UTF-8"/>
定时刷新
<meta http-equiv="refresh" content="3">
<meta http-equiv="refresh" content="3;URL=http://www.google.com.hk">
关键字和网络描述
<meta name="keywords" content="关键字">
<meta name="description" content="网站描述">
网站描述和关键字是用来给搜索引擎进行搜索时用的。网站描述的内容会显示在当搜索引擎检索到这个网站的时候会在下面显示的内容
表格：
<table>
<caption>表格标题</caption>
<thead>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</tfoot>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
table属性
cellsapcing:用于设置单元格之间的举例
cellpadding:用于设置单元格内容与边框的距离，这里设为0显示的时候会变得更加好看。
表格跨行跨列显示
rowspan:用于设置跨行显示，当跨行显示的时候，对应的行数应该与正常显示的行数登场
colspan:用于设置跨列显示。
border用于设置表格的边框
width用于设置表格的宽度
height用于设置表格的高度
bgcolor用于设置表格的背景颜色
background用于设置表格的背景图片
align用于设置表格内容对齐方式
框架(frameset)用于将一个浏览器窗口分割成几个子窗口，每个子窗口显示一个网页文件，并在子窗口
之间实现导航。框架的建立利用<frameset>标签和<frame>标签。
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
在框架网页中包含frameset的网页中不能含有body标签。
框架网页
<frameset rows="" cols="">
<frame src="ad.html">
<frame src="ad.html">
<frame src="ad.html">
</frameset>
属性 值 描述
frameborder: 0/1 是否显示框架周围的边框
marginheight pixels 框架上方和下方的边距
marginwidth pixels 框架左右两边的间距
name 框架名称
noresize noresize 不能调整框架的大小
scrolling yes/no/auto是否在框架中显示滚动条
src URL 在框架中显示文旦个的URL
在打开一个连接的时候有一下属性
target属性
属性值 描述
_bland 在熙标签页中打开
_parent 在父级框架中打开
name 在指定的框架名中打开文件
iframe
用来定义广告条的一种将一个网页嵌入到另一个网页的标签。
frameborder: 0/1 是否显示框架周围的边框
marginheight pixels 框架上方和下方的边距
marginwidth pixels 框架左右两边的间距
name 框架名称
noresize noresize 不能调整框架的大小
scrolling yes/no/auto是否在框架中显示滚动条
src URL 在框架中显示文旦个的URL
longdesc URL 规定一个页面，该页面对iframe做了较长的描述
表单：
form成为表单，一个网页中可以有多个表单，一个表单中有多个元素或者称为控件。
form属性
method：表示在提交这个表单的时候以什么样的方式提交，有两种可能的值
GET:代表提交的数据信息可以再浏览器的地址栏中看到，提交时的格式为?username=&password=&类似于这样子来提交数据。通常浏览器在搜索的时候是以这样的方式来提交。并且这种提交的方式是由内容的长度限制的(根据每个浏览器的不同，限制的长度也各不相同，一般是1024个字节)
POST:这种提交的方式，提交的信息不回在浏览器的地址栏中出现(这种提交方式提交数据的大小是没有长度限制的)
表单控件
文本框:
<input type="text" name="username" value="default"/>
当type属性的属性值为text的时候，用户在输入的时候是会看到输入的内容的，name属性是用来给服务器提交数据之后，服务器根据name属性的值来获取提交数据的值。Value属性的值代表默认值，在刚打开网页的时候会自动显示的值。当用户自定义文本框的值时，这个值会是当前文本框中输入的值。
密码框:
<input type="password" name="password" value="password"/>
type属性的属性值是password，用户在输入的时候是看不到输入的内容的，输入的东西会被 或者○来代替。
单选框
<input type="radio" name="sex" value="male" checked/>男
<input type="radio" name="sex" value="female"/>女
使用单选框的时候，type属性的值是radio，这些单询框的name属性得相同，从而形成单选框之间的互斥关系。Value属性石必填的，用来当选中相应的单选框的时候，根据Value属性的值传给服务器。checked用来定义刚打开的时候就呈现的状态。
多选框
<input type="checkbox" name="fav" value="football" checked/>football
<input type="checkbox" name="fav" value="basketball" checked/>basketball
当多选框的内容是一类的时候，name属性值也必须相同。Value属性在这里也是必须的。checked的功能和单选框中的功能相同。
下拉框
<select name="content">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
</select>
<select name="content">
<optgroup label="classA">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
</optgroup>
<optgroup label="classB">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
</optgroup>
</select>
按钮
<input type="button" value="buttonname"/>
<input type="submit" value="submit"/>
<input type="reset" vlaue="reset"/>
type属性值为button的按钮主要是用来给JS用的，用来当发生点击这个事件后执行相应的操作。后面两个是用来操作表单的，属性值为submit的按钮是用来提交这个表单，属性值为Reset的按钮是用来重置表单为之前的状态。
多容量文本框
<textarea rows="rows number" cols="cols number">默认值</textarea>
在使用多容量文本框的时候，当两个标签有内容的时候，两个标签必须在同一行。如果出现换行或者空格的话，它也会将之间的空格和换行原封不动的显示出来。
注意
单选框、多选框、下拉列表、按钮必须加上value属性用来定义传给服务器时对应控件的值。文本框和密码框的value属性可加可不加，当加的时候会把这个value值当做默认值，当不填入值的时候，提交的时候会把这个默认值提交。当填入值的时候会以新填入的值提交。
textarea标签不需要value属性。
Google Search表单
<form method="get" action="http://www.google.com.hk/search">
<input type="text" name="p" />
<input type="submit" value="Google Search"/>
</from>
CSS
CSS是Cascading Style Sheets(层叠样式表)的简称，由W3C制定和维护，CSS目前最高的版本是3.0
同HTML一样，CSS语言是一种标记语言，它不需要编译，可以直接由浏览器解释执行(属于浏览器解释
型语言)
CSS文件也是一个文本文件，它包含了一些CSS标记（定义HTML标签如何呈现的规则），CSS文件必
须使用.css作为文件名后缀，CSS文件可以单独存在，也可以嵌入到HTML文档中，甚至可以嵌入到某个HTML标签中
css作用：
CSS作用主要有两方面
1、网页美观程度
2、网页整体布局
这两个方面的典型案例就是CSS禅意花园的网站。
css分类
CSS可以写在HTML文件中，也可以写成独立的.css文件。
CSS分为行内样式表、内嵌样式表、外部样式表
行内样式表写在标签的内部，每个标签都有style属性，每个属性都对应有相应的样式属性值，和对应的样式值。
<p style="样式属性1:value1;样式属性2:value2......"></p>
内嵌样式表
写在HTML文件的Head标签中，使用style标签括起来，在这里面写CSS样式。在这里面使用注释的时候使用 /*注释*/ 这样的注释，即便是一行也要使用这样的方式将注释的内容括起来。
<style type="text/css">
p{
CSS样式；
}
外部样式表
将样式写成一个单独的文件.css.然后在HTML中引入该文件。
<link type="text/css" href="css/style.css"/>
css样式文件名为style代表这个文件时个样式文件。
优先级:
行内样式表 > 内嵌样式表 > 外部样式表
在考虑具体使用哪种样式表的时候可以参考下面的关系
外部样式表适合网站整体风格
内嵌样式表适合单个网页的风格效果
行内样式表适合网页中单个元素的样式
</style>
css语法
p{
color:red;
font-size:16px;
}
p成为选择器。
color成为样式属性
red称为样式属性值
样式属性和样式属性值连载一块称为一个样式的声明，每个样式声明都已分号;结束。
选择器
标签选择器
以标签的名字来定义的选择器，例如<p>/<h1>.....<h6>这样的标签
类选择器
.classname。body标签中的所有标签都有class属性，给class属性赋值，就可以使用类选择器。类选择器以点.classname开头，后面定义样式声明。原则上类选择器的样式可以重复使用在其他标签上。
id选择器
#idname，body标签中的所有标签都有id属性。给id属性赋值，就可以使用id选择器。id选择器以#.idname命名。后面定义样式声明。由于是id选择器，代表这个id是唯一的，因此不能重复使用。主要用于JS中。
派生选择器
p h2{}
代表p标签下面的h2标签定义的样式
群选择器
h1,h3{}
代表h1，h3都会应用的样式
统配选择器*{}
用于所有标签的选择器
伪类选择器
:link{}
这种是一种固定的用法。
文本css:
字体
font -family：sans-serif,微软雅黑;
文字颜色
color:red;
字号
font -size:14px;
font -size:1em;
斜体
font -style:italic;
font -style:oblique;
font -style:normal;
粗体
font -weight:bold;
font -weight:normal;
大小写
text -transform:uppercase;
text -transform:lowercase;
text -transform:capitalize;
装饰线
text -decoration:underline;
text -decoration:overline;
text -decoration:line-through;
text -decoration:none;
text -decoration:underline overline line-through;
字母间距
letter -spacing:2px;
letter -spacing:-5px;
单词间距
word-spacing:4px;
行间距
line-height:20px;
line-height:1.5;
line-height:150%;
文本对齐
text -align:left;
text -align:center ;
text -align:right;
首字符
p:first -letter {}
首行
p:first -line {}
文本缩进
text -indent:2em;
列表样式：
list-style-type:square
circle
disc
decimal
decimal-leading-zero
upper-alpha
lower-alpha
upper-roman
lower-roman
在使用CSS样式之后，无序列表和有序列表之间没有明显的区别，但是即便这样也不推荐将无序列表通过CSS样式写成有序列表的样子。我们在使用CSS样式的时候要保持HTML本身的含义。
显示项目符号位置:
list-style-position:outside
inside
项目图标:
list-style-image:url()
当使用项目图标的时候就不能使用list-style-type样式。
css框模型
每个标签都是有内容的，并且每个标签都是有边框的，边框与内容之间的举例成为内边距(padding)，边框与另外一个标签之间的距离称为外边框(margin),无论是边框、内边距、外边距都是有方向的，上下左右。并且在定义的时候是按照顺时针的方向来定义的。
边框的三个属性
border-width:(边框的宽度)
border-style:(边框的样式)常用的样式有solid---实线、dashed----虚线、dotted点状线，虽然也有其他样式但是其他样式可能不是所有的浏览器都支持。因此谨慎使用其他样式
border-color:边框的颜色。
有些元素是天生具有内边距和外边距的。
外边距的碰撞:
当上下边距发生碰撞的时候，不会累加，而是以最大的为准。嵌套元素并合并时，外边距还是最大的为准
div标签没有内外边距。
行级元素和块级元素
行级元素
input
a
strong
span
em
img
form
块级元素
div
p
h1....h6
表格
列表
块级元素和行级元素如何区分，就是看当标签中的内容放在一行并且放不下的时候，在后面插入同样标签的元素，如果还能显示在一行，那么元素就是行级元素，否则就是块级元素。
对于行级元素使用margin来定义外边框时，只有左右方向有用。上下方向没用。
可以通过CSS人为的定义一个元素是行级元素还是块级元素
display属性：block 块级元素
inline 行级元素
none 将元素内容隐藏
宽高背景色
做网页的时候由于body标签是有8px的外边框的，在只做网页的时候要将这个外边框给去掉。
body{
margin:0px;
}
body的属性
height:
width:
background-color:
background-image: no-repeat 不重复
repeat-x 在水平方向上平铺
repeat-y 在垂直方向上平铺
内容溢出：
当一个标签中内容太多的时候已经超过了这个标签的宽度和高度，那么这个时候就会发生内容的溢出。解决此问题的最好方式就是使用
overflow:auto
hidden
visible
scrool
当一个单词太长的时候以至于顶过标签最大宽度并且超出的时候就使用word-break;break-all;
将多余的内容切断显示。
移除分为两种
1、内容太多而盛不下
2、个别单词太长而在一行中显示不下
图片拼接：
当一个标签中内容太多的时候已经超过了这个标签的宽度和高度，那么这个时候就会发生内容的溢出。解决此问题的最好方式就是使用
overflow:auto
hidden
visible
scrool
当一个单词太长的时候以至于顶过标签最大宽度并且超出的时候就使用word-break;break-all;
将多余的内容切断显示。
移除分为两种
1、内容太多而盛不下
2、个别单词太长而在一行中显示不下
背景固定：
background-attachment:fixed;
超链接：
常用的链接伪类选择器是:visited和:hover
当四个伪类选择器都用上的时候按照LoVe、HAte的顺序来进行排列
常用的超链接样式:
text-decoration：none;
超链接下面没有下划线
hover;
当鼠标悬停在链接的上面的时候，链接变色，显示这个链接是可点击的。
a标签的样式是对所有的链接都定义的样式，如果伪类选择器有更具体的样式，则会覆盖掉之前的样式。
:link 还没点击过的链接
:visited 点击过后的链接样式(是否点击过取决于历史记录中是否有该条记录)
:hover 鼠标悬停在链接上的样式
:active 鼠标左键点下那个瞬间显示的样式
表格：
给表格设置边框应该给td和th设置boder属性。
在这样给表格附上边框的时候，中间的条数就会变粗。
为了使表格线条粗细一致:在table中定义属性table-collapse:collapse;
为表格的单元格内容设置的高点。将表格的内容居中对齐text-align:center;
将表格的内容垂直对齐:vertical-align:middle;
表格隔行换色:
tbody tr:nth-child(even){
background-color:#f00;
}
在CSS样式中水平方向对齐的名称是left，right，center
垂直方向的居中是top,middle,bottom
表单：
label:
使label标签显示为块级元素，这样就可以和下面的input行级元素实现换行的效果，并且将label中的元素内容和input的输入框之间进行1px的对齐。
input标签有一个maxlength属性用来定义能输入的最长字符数，当超过的时候就输入不进去。
placeholder:这个属性用来给输入框做提示信息用，这个属性里面的值只是作为提示信息用，在提交表单的时候是不会作为这个input输入框的value值传给服务器的。
去除chrome对input标签的默认高亮显示
outline:none;
将input输入框的边框设置为0像素，设置border-bottom:1px solid #000;
当进入网页的时候，将光标自动定位到某一个输入框
这个是HTML5的新特性。IE不支持。
autofocus
密码输入框后面的小锁
圆角矩形输入框:
border-radius:10px;
后面的像素值代表四个角弯曲的半径。
button标签
<button type="submit">button name</submit>
按钮上的字由button标签体中的内容来指定。
图片按钮样式:
background:url(img)
光标样式:
cursor:用这个属性来指定光标样式。
哪些属性会改变原有的宽度
在使用padding和border属性的时候，一旦给这些属性定义像素值，则定义该属性的元素的长度都会在原来的基础上加上这个padding和border值。因此在使用的时候，还要减去这些潜在中加上的值。
css布局：
定位：
绝对定位
position:absolute
无论是使用绝对定位还是相对定位，定位的元素都会脱离文档流存在，这个层的位置将会被下面的元素所占有。一旦设置了position属性，那么这个元素将自动产生top,bottom,left,right四个属性来定义这个元素到任意的位置。如果一个页面定义了多个绝对定位的元素，后生命的元素会覆盖前面的元素如果想要某个元素在最上面可以使用z-index来指定浮动的层数。当数值越大代表越靠上。
相对定位
1、相对定位的元素不会脱离文档流
2、可以使用top,left这两个属性定位这个层到网页上的任何位置。
3、相对定位的层虽然移动了，但是依然占有之前的位置。
相对定位的作用就是为了配合绝对定位
<div class="d1">
<div class="d2"></div>
</div>
当d1为相对定位时，d2为绝对定位时，可以讲d2定位在d1范围之内的任意地方。
浮动：
float:left
right;
浮动属性的元素也会脱离文档流
<div class="d1"></div>
<div class="d2"></div>
<div class="d3></div>
当d1和d2浮动的时候，d3如果不浮动，就会由于d1和d2浮动，而被遮盖，要想解决这种问题，可以再d2的后面加上一个专门的层用来解决因浮动而产生的遮盖问题
<div class="d1"></div>
<div class="d2"></div>
<div class="clear"></div>
<div class="d3></div>
定义clear的样式
.clear{
clear:both;
}
或者在d3的样式后面加上
clear:both;
oveflow:auto;
总结：
绝对定位会脱离文档流
相对定位不会脱离文档流
浮动会脱离文档流
常见宽度：
基本上网页的宽度在940-1005之间。为了考虑分辨路在1024X768的电脑分辨率。1005px宽度的网页是最宽的了，不能比这个宽度还宽了。940px,960px,1005px
内容居中：
container居中 margin:0px auto;
垂直居中：
让导航条中的文字垂直居中可以让导航条的高度和文字的行高一样，这样就会垂直居中
line-height:10px; / 文字高度 /
height:10px / 内容高度 /
vertical-align:middle;
水平方向对齐
text-align
left、center、right
垂直方向上对齐
vertical-align
top、middle、bottom
标签：
原文地址：http://www.cnblogs.com/shininguang/p/4888765.html
