在介绍HTML之前，我们先看一下HTML的文档树结构，主要包括哪些：
Doctype告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档。
有和无的区别：
BackCompat：标准兼容模式未开启(怪异模式、混杂模式)；
CSS1Compat：标准兼容模式已开启(严格模式)。
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat，这也就是恶魔的开始，浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式；
如果你的页面添加了那么就等同于开启了标准模式，浏览器会老老实实按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器显示的就都是一样的了。
有，用什么？
Doctype告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档，dtd文件则包含了标记、attributes、properties、约束规则，在这里推荐使用<!DOCTYPE html>。
更多规则请参考：https://hsivonen.fi/doctype/
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词。
页面编码(告诉浏览器是什么编码)
|
1
2
|
|
刷新和跳转
|
1
2
3
4
|
< meta http-equiv=“Refresh” Content=“30″> <!--页面30秒刷新一次-->< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ /> <!--5秒后自动跳转到后面地址--> |
关键词
|
1
|
< meta name="keywords" content="python,java,C++,语言"> |
CSS
|
1
2
|
<link rel="stylesheet" type="text/css" href="css/common.css"><!--引入外部样式--> |
icon
|
1
2
|
<link rel="shortcut icon" href="image/test.ico"><!--导入图片--> |
|
1
2
3
4
5
|
<style type="text/css"> .hide{ display: none; }</style> |
引进文件
|
1
|
|
写JS代码(一般写在body的最底部)
|
1
2
3
|
<script type="text/javascript"> .......</script> |
标签一般分为两种：块级标签和行内标签。
块级标签：a标签、span标签、select标签等；
行内标签：div标签、h标签、p标签等。
p标签：表示段落，默认段落之间是有间隔的；
br标签：换行
|
1
2
|
<p>hello，world!!</p><br/><p>hello，world!!</p> |
target属性，_back表示在新的页面打开；
锚点
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<body> <!--加target生成新页面--> <!--寻找页面中id=i1的标签，将其标签放置在页面顶部--> <a href="#i1" style="color: green";>第一章</a><br/> <a href="#i2" style="color: fuchsia";>第二章</a><br/> <!--id没有一个标签的id属性值不允许重复，id属性可以不写--> <div id="i1" style="height: 500px";>第一章内容</div> <div id="i2" style="height: 500px";>第二章内容</div></body> |
标题(Heading)是通过<h1>--<h6>等标签进行定义的，<h1>定义最大的标题，<h6>定义最小的标题。
|
1
2
3
4
|
<h1>1,br换行为自闭合标签</h1><p>asdf<br />ghjkl</p><h1>2,a标签</h1><h2>属性:</h2> |
这里有一个知识点，就是在标签上加默认值：
selected="selected"（下拉框默认值）
checked="checked"（复选框默认值）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<p>城市: <select> <option>上海</option> <option>北京</option> <option>河北</option> <option>山东</option> </select><!--显示几条信息,size设置显示的条数--> <!--<select multiple size="10">--> <select multiple> <option>上海</option> <option>北京</option> <option>河北</option> <option>广州</option> <option>山西</option> <option>河南</option> </select><!--创建组--> <select> <optgroup label="南方"> <option>上海</option> <option>广州</option> </optgroup> <optgroup label="北方"> <option>北京</option> <option>河北</option> </optgroup> </select></p> |
input标签的类型有：
text
password
redio
checkbox
file
button(普通按钮)
submmit(提交当前表单)
reset(清空内容)
textarea：备注框
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Form</title></head><!--<body>传文件的时候要添加enctype="multipart/form-data--> <div style="border: 1px solid chartreuse;"> <p>用户名:<input type="text" name="user"/></p> <p>密码:<input type="password" name="pwd"/></p> <!--<p>邮箱:<input type="email"/></p>--> <!--email支持IE9以上的版本，不兼容低版本--> <p>性别(单选框): <!--要想互斥的话，需添加属性name并将值设置成相同--> <br/>男<input type="radio" name="ee" value="1"/> <br/>女<input type="radio" name="ee" value="2"/> </p> <p>爱好(多选框): <br/>篮球<input type="checkbox" value="1"/> <br/>足球<input type="checkbox" value="2"/> <br/>乒乓球<input type="checkbox" value="3"/> <br/>橄榄球<input type="checkbox" value="4"/> </p> <p>城市: <select name="city"> <option value="1">上海</option> <option value="2">北京</option> <option value="3">河北</option> <option value="4">山东</option> </select> <!--显示几条信息,size设置显示的条数--> <!--<select multiple size="10">--> <select multiple> <option>上海</option> <option>北京</option> <option>河北</option> <option>广州</option> </select> <!--创建组--> <select> <optgroup label="南方"> <option>上海</option> <option>广州</option> </optgroup> <optgroup label="北方"> <option>北京</option> <option>河北</option> </optgroup> </select> </p> <p>上传文件: <input type="file" /></p> <p>备注: <textarea name="extra"></textarea></p> <input type="submit" value="提交"/> <input type="button" value="普通按钮"/> <input type="reset" value="重新设置"/> </div> </form></body></html> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } ul{ margin: 0; list-style-type: none; } ul li{ float: left; padding: 0 8px 0 8px; color: white; cursor: pointer; } /*当鼠标移动到li标签上时，自动应用以下样式*/ ul li:hover{ background-color: blueviolet; } .pg-header{ height: 44px; background-color: #2459a2; line-height: 44px; } .w{ width: 980px; margin: 0 auto; background-color: red; } </style></head><body> <div class="pg-header"> <div class="w"> <ul> <li>菜单一</li> <li>菜单二</li> <li>菜单三</li> <li>菜单三</li> <li>菜单三</li> <li>菜单三</li> <li>菜单三</li> <li>菜单三</li> </ul> </div> </div> <div class="pg-body"></div> <div class="pg-footer"></div></body></html> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<html lang="en"><head> <meta charset="UTF-8"> <title>Table</title></head><body> <table border="5"> <!--border 表格外边框宽度--> <thead> <tr> <!--colspan是列合并--> <th colspan="2">ID</th> <th>姓名</th> <th>年龄</th> <!--<th>性别</th>--> </tr> </thead> <tbody> <tr> <!--rowspan是行合并--> <td rowspan="2">1</td> <td>张小凡</td> <td>18</td> <td>男</td> </tr> <tr> <td>2</td> <td>田灵儿</td> <td>18</td> <td>女</td> </tr> </tbody> </table></body></html> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<body><form> <fieldset> <legend>Personalia:</legend> Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text"> </fieldset></form></body></html> |
更多标签使用方法请参考：
http://www.runoob.com/html/html-tutorial.html
http://www.w3school.com.cn/h.asp
CSS是英文Casscading Style Sheets的缩写，称为层叠样式表，用于对页面进行美化。
存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。
在标签中直接使用 style=‘xxx;‘
在页面中嵌入<style type="text/css"></style>块
引入外CSS文件
标签选择器
class选择器
id选择器
层级选择器
组合选择器
属性选择器
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS</title> <!--link引入样式--> <!--<link rel="stylesheet" href="common.css" />--> <style> div{ /*标签选择器*/ color: chartreuse; } #i1{ /*id选择器*/ font-size: 56px; color: green; } .c1{ /*class选择器*/ background-color: green; } .c2 div p .c3{ /*层级选择器*/ background-color: red; } .c4,.c5,.c6{ /*组合选择器，找到class=c4,class=c5,class=c6的标签*/ background-color: red; } </style></head><body> <!--组合选择器--> <div class="c4">1</div> <div class="c5">1</div> <div class="c6">1</div> <div class="c2"> <div></div> <div> <p> <span>oo</span> <!--层级选择器，只适用这一级--> <a class="c3">uu</a> </p> </div> </div> <!--这一层的c3格式不会受上面的影响--> <div class="c3">sdfsdf</div> <!--class选择器--> <span class="c1">1</span> <div class="c1">2</div> <a class="c1">3</a> <!--id选择器--> <a id="i1">baidu</a> <!--标签选择器--> <div>99</div> <div>99</div> <div>99</div> <div> <div>asdf</div> </div></body></html> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*<属性标签/>*/ .c1[jack=‘a‘]{ color: red; } </style></head><body> <input value="123"> <textarea>123</textarea> <select> <option>上海</option> <option selected="selected">广州</option> <option>北京</option> </select> 男:<input type="radio" name="g1" value="1"/> 女:<input type="radio" name="g1" checked="checked" value="2"/> <input type="checkbox" name="c1" value="1" checked="checked"/> <input type="checkbox" name="c1" value="2"/> <input type="checkbox" name="c1" value="3" checked="checked"/> </select><!--<属性标签>--> <div> <div class="c1" jack="a">1</div> <div class="c1" jack="a">2</div> <div class="c1">3</div> </div></body></html> |
1、background属性：
background-color：设置背景色；
|
1
2
3
4
5
|
/*背景色定义的三种方式*//*background-color: #FF69B4;*//*background-color: rgb(25,180,10);*//*background-color: red;*/font-size: 32px; |
background-image：设置body元素的背景图像；
color:blue !important：优先级最高；
background-repeat:
no-repeat：background-image不会重复;
repeat-x：只在水平位置会重复背景图像；
repeat-y：只在垂直位置会重复背景图像；
background-position：如何定位background-image；
background-position的属性：
| 值 | 描述 |
|---|---|
| left top left center left bottom right top right center right bottom center top center center center bottom |
如果仅指定一个关键字，其他值将会是"center" |
| x% y% | 第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％ |
| xpos ypos | 第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions |
| inherit | 指定background-position属性设置应该从父元素继承 |
|
1
2
3
4
5
6
7
8
9
10
11
12
|
#i1 { border: 2px solid red; /*边框2像素，实体，红色*/}#i2{ border: 2px dotted red; /*边框2像素，小虚线，红色*/}#i3{ border: 2px dashed red; /*边框2像素，大虚线，红色*/} |
围绕在元素边框的空白区域是外边距。设置外边距会在元素创建额外的"空白"。设置外边距最简单的方法就是使用margin属性，这个属性接收任何长度单位、百分数甚至负值。
| 属性 | 描述 |
|---|---|
| margin | 简写属性。在一个声明中设置所有外边距属性。 |
| margin-bottom | 设置元素的下外边距。 |
| margin-left | 设置元素的左外边距。 |
| margin-right | 设置元素的右外边距。 |
| margin-top |
设置元素的上外边距。 |
|
1
2
3
4
5
6
7
|
line-height: 30px;/*行居中*/background: #F1F1F1;margin: 0;/*没有外边距，直接在页面顶部*/margin: 0 auto;/*居中*/ |
元素的内边距在边框和内容区之间，控制该区域最简单的属性就是padding属性。CSS padding属性定义元素的内边距，padding属性接受长度值或百分比值，但不允许使用负值。
| 属性 | 描述 |
|---|---|
| padding | 简写属性。作用是在一个声明中设置元素的所内边距属性。 |
| padding-bottom | 设置元素的下内边距。 |
| padding-left | 设置元素的左内边距。 |
| padding-right | 设置元素的右内边距。 |
| padding-top | 设置元素的上内边距。 |
|
1
2
3
4
5
6
|
h1 { padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%;} |
display属性规定元素应该生成的框的类型。下面主要说我们最常用的几种：
display：none 此元素不会被显示；
display：block 此元素将显示为块级元素，此元素前后会带有换行符；
display：inline 默认，此元素会被显示为内联元素，元素前后没有换行符；
display：inline-block 行内块元素。
cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。
CSS提供的cursor值：
pointer ：小手指；
help：箭头加问号；
wait：转圈圈；
move：移动光标；
crosshair：十字光标。
通过pointer属性我们可以?伪造超链接：
|
1
|
<span style="cursor:pointer;color:blue;">pointer</span> |
float属性指定一个元素是否应该浮动。
CSS提供的float的属性值：
left：元素向左浮动；
right：元素向右浮动；
none：默认值，元素不浮动，并会显示在其文本中出现的位置；
inherit：规定应该从父元素继承float属性值。
在这我们在补充说明一个属性：
clear属性：指定段落的左侧或右侧不允许浮动的元素。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div style="width: 500px;height: 500px;border: 1px solid red"> <div style="width: 20%;background-color: green;float: left">dadada</div> <div style="width: 80%;background-color: coral;float: right">tatata</div> <div style="clear: both;"></div> </div></body></html> |
position属性指定一个元素(静态的、相对的、绝对或固定)的定位方法的类型。
position的属性值：
absolute：生成绝对定位的元素；
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位；
relative：生成相对定位的元素，相对于其正常位置经行定位。
z-index：指定一个元素的堆叠顺序。
两种返回顶部的定义方法，一般absolute和relative一起使用：
|
1
2
3
4
5
6
7
8
9
|
第一种：<div style="height:1000px;background-color: #ddd;"></div><div style="position: fixed;right: 200px;bottom: 100px;">返回顶部</div>第二种：<div style="height: 500px;width: 500px;border: 2px solid green;position: relative"> <div style="position: absolute;right: 0px;bottom: 0px;color: brown">返回顶部</div> <div style="background-color: green;height: 100px;width: 500px"></div></div> |
设置图像透明度的两种方式：
opcity:0.6；
background:rgba(0,0,0,.6)；
hover在鼠标移动到链接上时添加的特殊样式，hover选择器可用于所有元素，不仅是链接。
提示：link选择器设置了未访问的页面链接样式，:visited选择器设置访问过的页面链接的样式，:active选择器设置当你点击链接时的样式。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>mytest</title> <style>a.ex1:hover,a.ex1:active {color:red;}a.ex2:hover,a.ex2:active {font-size:150%;}a.ex3:hover,a.ex3:active {background:red;}a.ex4:hover,a.ex4:active {font-family:monospace;}a.ex5:visited,a.ex5:link {text-decoration:none;}a.ex5:hover,a.ex5:active {text-decoration:underline;}</style></head><body><p>将鼠标移至链接上查看其样式改变.</p><p><a class="ex1" href="/css/">This link changes color</a></p><p><a class="ex2" href="/css/">This link changes font-size</a></p><p><a class="ex3" href="/css/">This link changes background-color</a></p><p><a class="ex4" href="/css/">This link changes font-family</a></p><p><a class="ex5" href="/css/">This link changes text-decoration</a></p></body></html> |
before：向选定的元素之前插入内容；
after：向选定的元素之后插入内容
font-style：规定字体样式；
font-variant：规定字体异体；
font-weight：规定字体粗细；
font-size/line-height：规定字体尺寸和行高；
?font-family：规定字体系列。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>清除浮动</title> <style> .clearfix:after{ content: ‘.‘; clear: both; display: block; visibility: hidden; （元素是否可见，hidden为不可见） height: 0; } .left{ float: left; } </style></head><body> <div style="background-color: #00CC00" class="clearfix"> <div class="left" style="height: 100px;background-color: red">1</div> <div class="left">2</div> </div></body></html> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用插件</title> <!--<link rel="stylesheet" href="plugins/Font-Awesome-master/css/font-awesome.css"/>--> <style> .icon{ display: inline-block; border-top:20px solid red; border-right: 20px solid green; border-bottom: 20px solid transparent; border-left:20px solid transparent ; } </style></head><body> <!--<i class="fa fa-bug" aria-hidden="true"></i>--> <div class="icon"></div> <a href="Dy15/plugins/Font-Awesome-master/css/font-awesome.css"></body></html> |
第一种：页面整体滚动
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .pg-header{ height:48px; background-color: #012a62; } .pg-body .body-menu{ position: absolute; top: 48px; left: 0; bottom: 0; width: 200px; /*bottom: 0;*/ background-color: #e67e4a; } .pg-body .body-content{ position: absolute; top: 48px; left: 220px; right: 0; background-color: green; } </style></head><body> <div class="pg-header"></div> <div class="pg-body"> <div class="body-menu"></div> <div class="body-content"> sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> </div> </div></body></html> |
第二种：页面内部分内容滚动
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .pg-header{ height:48px; background-color: #012a62; } .pg-body .body-menu{ position: absolute; top: 48px; left: 0; bottom: 0; width: 200px; background-color: #e67e4a; } .pg-body .body-content{ position: absolute; top: 48px; left: 220px; right: 0; bottom: 0; background-color: green; overflow: auto; /*<overflow添加滚动条>*/ } </style></head><body> <div class="pg-header"></div> <div class="pg-body"> <div class="body-menu"></div> <div class="body-content"> sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> </div> </div></body></html> |
原文：http://www.cnblogs.com/phennry/p/5801392.html