从0到1：HTML+CSS快速上手

发表于 | 分类于 ， ， |

微信读书
操作笔记 01 02
2023-06-06 15:13:14（开始）
2023-06-07 08:53:51（html 结束）
2023-06-08 11:41:11（css 结束）

head标签_6秒跳转

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8"/>
    
    <meta http-equiv="refresh" content="6;url=http://www.lvyestudy.com"/>

    <style type="text/css">
        /*这里写CSS样式*/
    </style>

    <script>
        /*这里写JavaScript代码*/
    </script>

    <!--<link type="text/css" rel="stylesheet" href="css/index.css">-->
</head>
<body>
<p>这个页面在6秒之后自动跳转到绿叶学习网首页</p>
</body>
</html>

body标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
    <!--<meta charset="utf-8" />的作用是防止页面出现乱码，在每一个HTML页面中，我们都要加上这句代码。
    此外，<meta charset="utf-8" />这一句必须放在title标签以及其他meta标签前面，这一点大家要记住。-->
    <meta charset="utf-8" />
    <title>body标签</title>
</head>
<body>
<h3>静夜思</h3>
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>
</body>
</html>

标题标签h1-6

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>标题标签</title>
</head>
<body>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

h1标签，表示的是header1，标记的是一个最高级标题。
</body>
</html>

换行标签br

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>换行标签</title>
</head>
<body>
<h3>静夜思</h3>
<p>床前明月光，疑是地上霜。举头望明月，低头思故乡。</p>

<hr/>

<!--举例：使用两个p标签-->
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>

<hr/>

<!--举例：使用br标签-->
<p>床前明月光，疑是地上霜。<br/>举头望明月，低头思故乡。</p>

<hr/>

从上面两个例子可以明显看出：使用p标签会导致段落与段落之间有一定的间隙，而使用br标签则不会。<br/>
br标签是用来给文字换行的，而p标签是用来给文字分段的。如果你的内容是两段文字，则不需要使用br标签换行那么麻烦，而是直接用两个p标签就可以了。

</body>
</html>

段落标签p

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>段落标签</title>
</head>
<body>
<h3>爱莲说</h3>
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。</p>

p标签，表示的是paragraph，标记的是一个段落；
</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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>文本标签</title>
</head>
<body>

<h1>4.4.1 粗体标签 strong</h1>
<p>这是普通文本</p>
<strong>这是粗体文本</strong><br/>
<b>这是粗体文本</b>
<p></p>
strong标签和b标签的加粗效果是一样的。<br/>
在实际开发中，如果想要对文本实现加粗效果，尽量使用strong标签，而不要使用b标签。<br/>
这是因为strong标签比b标签更具有语义性。
<hr/>



<h1>4.4.2 斜体标签 em</h1>
<i>斜体文本</i><br/>
<em>斜体文本</em><br/>
<cite>斜体文本</cite>
<p></p>
在实际开发中，如果想要实现文本的斜体效果，尽量使用em标签，而不要用i标签或cite标签。<br/>
这也是因为em标签比其他两个标签的语义性更好。
<hr/>



<h1>4.4.3 上标标签 sup</h1>
<!-- (a+b)^2 = a^2 + b^2 + 2ab -->
<p>（a+b）<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>
<p></p>
sup，是superscripted（上标）的缩写。<br/>
如果你想要将某个数字或某些文字变成上标，只要把这个数字或文字放在sup标签内就可以了。
<hr/>



<h1>4.4.4 下标标签 sub</h1>
<!-- H2SO4 -->
<p>H<sub>2</sub>SO<sub>4</sub>指的是硫酸分子</p>
<p></p>
sub，是subscripted（下标）的缩写。<br/>
如果你想要将某个数字或某些文字变成下标，只要把这个数字或文字放在sub标签内就可以了。
<hr/>



<h1>4.4.5 中划线标签 s</h1>
<p>新鲜的新西兰奇异果</p>
<p><s>原价:￥6.50/kg</s></p>
<p><strong>现在仅售：￥4.00/kg</strong></p>
<p></p>
中划线效果一般用于显示那些不正确或者不相关的内容，常用于商品促销的标价中。<br/>
大家在各种电商网站购物时，肯定经常可以见到这种效果。不过等学了CSS之后，对于删除线效果，一般会用CSS来实现，几乎不会用s标签来实现。
<hr/>



<h1>4.4.6 下划线标签 u</h1>
<p><u>绿叶学习网</u>是一个精品的技术分享网站。</p>
<p></p>
等学了CSS之后，对于下划线效果，一般会用CSS来实现，几乎不会用u标签来实现。
<hr/>


<h1>4.4.7 字号标签 big small</h1>
<p>普通字体文本 </p>
<big>大字号文本</big><br/>
<small>小字号文本</small>
<p></p>
在实际开发中，对于字体大小的改变，我们几乎不会用big标签和small标签来实现，而是使用CSS来实现，因此这里只需要简单了解一下即可。



</body>
</html>

水平线标签 hr

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>水平线标签</title>
</head>
<body>
<h3>静夜思</h3>
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>
<hr/>
<h3>春晓</h3>
<p>春眠不觉晓，处处闻啼鸟。</p>
<p>夜来风雨声，花落知多少。</p>
</body>
</html>

区域划分div

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>div标签</title>
</head>
<body>
<!--这是第一首诗-->
<h3>静夜思</h3>
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>
<hr/>
<!--这是第二首诗-->
<h3>春晓</h3>
<p>春眠不觉晓，处处闻啼鸟。</p>
<p>夜来风雨声，花落知多少。</p>

<hr/>
<hr/>
<hr/>


<!--这是第一首诗-->
<div>
    <h3>静夜思</h3>
    <p>床前明月光，疑是地上霜。</p>
    <p>举头望明月，低头思故乡。</p>
</div>
<hr/>
<!--这是第二首诗-->
<div>
    <h3>春晓</h3>
    <p>春眠不觉晓，处处闻啼鸟。</p>
    <p>夜来风雨声，花落知多少。</p>
</div>

<hr/>
div，全称division（分区），用来划分一个区域。 <br/>
这两段代码的预览效果是一样的，不过实际代码却不一样。 <br/>
使用div标签来划分区域，使得代码更具有逻辑性。<br/>
当然，div标签最重要的用途是划分区域，然后结合CSS针对该区域进行样式控制，这一点等我们学了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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>自闭合标签</title>
</head>
<body>
<div>
    <h3>绿叶学习网</h3>
    <hr/>
    <p>“绿叶，给你初恋般的感觉。”</p>
    
    
    <hr/>


    从上面的代码我们可以看出，div标签的“开始符号”和“结束符号”之间是可以插入其他标签或文字的，但是meta标签和hr标签中不能插入其他标签或文字。<br/>
    现在我们来总结一下“一般标签”和“自闭合标签”的特点。<br/>
    一般标签：由于有开始符号和结束符号，因此可以在内部插入其他标签或文字。<br/>
    自闭合标签：由于只有开始符号而没有结束符号，因此不可以在内部插入标签或文字。所谓的“自闭合”，指的是本来要用一个配对的结束符号来关闭，然而它却“自己”关闭了。<br/>
    自闭合标签，例如：meta定义网页 搜索引擎使用、link 引入外部css、br换行、hr水平线、img图片、input表单
</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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>块元素和行内元素</title>
</head>
<body>
<div>
    <h3>绿叶学习网 h3块元素</h3>
    <p>“绿叶，给你初恋般的感觉。” p块元素</p>
    <strong>绿叶学习网 strong行内元素</strong>
    <em>“绿叶，给你初恋般的感觉。” em行内元素</em>
</div>

<hr/>

<div>1</div>
<div>2</div>
<div>3</div>

<hr/>

<div>1</div>
<div><div>2</div></div>
<div>3</div>

<hr/>

<div>1</div>
<div><em>2</em></div>
<div>3</div>

<hr/>

<div>1</div>
<div><p>2</p></div>
<div>3</div>

<hr/>
<p></p>

<pre>
在浏览器预览效果，有些元素是独占一行的，其他元素不能与这个元素位于同一行，如p、div、hr等；
而有些元素不是独占一行的，其他元素可以与这个元素位于同一行，如strong、em等。

特别注意一下，这里所谓的“独占一行”，并不是在HTML代码里独占一行，而是在浏览器显示效果中独占一行。

其中，标签也叫作“元素”，如p标签又叫p元素。叫法不同，意思相同。这一节使用“元素”来称呼，也是让大家熟悉这两种叫法。

在HTML中，根据元素的表现形式，一般可以分为两类（暂时不考虑inline-block）。
    块元素（block）。
    行内元素（inline）。
</pre>
<hr/>

<h1>4.8.1 块元素</h1>
在HTML中，块元素在浏览器显示状态下将占据整一行，并且排斥其他元素与其位于同一行。<br/>
一般情况下，块元素内部可以容纳其他块元素和行内元素。<br/>
例如块元素：h1~h6标题元素、p段落元素、div区域元素、hr水平线、ol有序列表、ul无序列表

<pre>
    h3和p是块元素，它们的显示效果都是独占一行的，并且排斥任何元素与它们位于同一行；
    strong和em是行内元素，即使代码不位于同一行，它们的显示效果也是位于同一行的（显示效果与代码是否位于同一行没有关系）。
    
    h3、p、strong和em元素都是在div元素内部的，也就是说，块元素内部可以容纳其他块元素和行内元素。
    由此，我们可以总结出块元素具有以下两个特点。
        块元素独占一行，排斥其他元素（包括块元素和行内元素）与其位于同一行。
        块元素内部可以容纳其他块元素和行内元素。
</pre>
<hr/>

<h1>4.8.2 行内元素</h1>
在HTML中，行内元素与块元素恰恰相反，行内元素是可以与其他行内元素位于同一行的。<br/>
此外，行内元素内部（标签内部）只可以容纳其他行内元素，不可以容纳块元素。<br/>
行内元素，例如：strong粗体元素、em斜体元素、a超链接、span行内元素,常结合css定义样式<br/>

<pre>
    行内元素具有以下两个特点。
        行内元素可以与其他行内元素位于同一行。
        行内元素内部可以容纳其他行内元素，但不可以容纳块元素。
</pre>









<hr/>
</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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title> 网页中的“空格”</title>
</head>
<body>


<hr/>
<h1>4.9.1 网页中的“空格”</h1>

<h3>爱莲说</h3>
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。</p>

<hr/>

<h3>爱莲说</h3>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。</p>

<hr/>

<pre>
    1个汉字约等于3个 nbsp 。因此如果想要往p标签内加入两个汉字的空格，那么我们需要往p标签内加入6个 nbsp 。
</pre>


<hr/>
<h1>4.9.2 网页中的“特殊符号”</h1>
在HTML中，如果想要显示一个特殊符号，也是需要通过代码来实现的。<br/>
这些特殊符号对应的代码，都是以“&”开头，并且以“;”（英文分号）结尾的。<br/>

<hr/>

<p>欧元符号：&euro;</p>
<p>英镑符号：&pound;</p>

<hr/>

<p>欧元符号：€</p>
<p>英镑符号：￡</p>

<hr/>
</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
55
56
57
58
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>4.10 本章练习</title>
</head>
<body>

<h2>各科小常识</h2>

<h3>语文</h3>
<p>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    三国演义是中国四大古典名著之一，元末明初小说家罗贯中所著，
    是中国第一部章回体历史演义的小说，描写了从东汉末年到西晋初近100年的历史风云。
</p>
<hr/>

<h3>数学</h3>
<p>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    勾股定理直角三角形：a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>
</p>
<hr/>

<h3>英语</h3>
<p>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    No pain, No gain.
</p>
<hr/>

<h3>化学</h3>
<p>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    H<sub>2</sub>SO<sub>4</sub>是一种重要的工业原料，可用于制作肥料、洗涤剂等。
</p>
<hr/>

<h3>经济</h3>
<p>
    <div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        版权符号：&copy;
    </div>
    <div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        注册商标：&reg;
    </div>
</p>
<hr/>





</body>
</html>

有序列表ol

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>有序列表</title>
</head>
<body>
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Vue.js</li>
</ol>

<hr/>

<p>我们可以使用type属性来改变列表项符号。</p>
<ol type="a">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Vue.js</li>
</ol>

<hr/>

<pre>
    在有序列表中，一般采用数字或字母作为顺序，默认采用数字顺序。
    
    ol，即ordered list（有序列表）。li，即list（列表项）。理解标签的语义更有利于记忆。
    在该语法中，ol标志着有序列表的开始和结束，而li标签表示这是一个列表项。
    一个有序列表可以包含多个列表项。
    
    注意，ol标签和li标签需要配合一起使用，不可以单独使用，而且ol标签的子标签也只能是li标签，不能是其他标签。
</pre>
</body>
</html>

无序列表ul

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>无序列表</title>
</head>
<body>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Vue.js</li>
</ul>

<hr/>

type disc默认实心圆 circle空心圆 square实心正方形<br/>
与有序列表一样，对于无序列表的列表项符号，等学了CSS之后，我们可以不再使用type属性，而应使用list-style-type属性。<br/>

<ul type="circle">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Vue.js</li>
</ul>

<hr/>
<h1>5.3.3 深入无序列表</h1>
在实际的前端开发中，无序列表比有序列表更为实用。<br/>
更准确地说，一般使用的都是无序列表，几乎用不到有序列表。<br/>

<pre>
    ul元素的子元素只能是li元素，不能是其他元素。
    
    文本不能直接放在ul元素内。
</pre>
</body>
</html>

定义列表dl

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>定义列表</title>
</head>
<body>
<dl>
    <dt>HTML</dt>
    <dd>制作网页的标准语言，控制网页的结构</dd>
    <dt>CSS</dt>
    <dd>层叠样式表，控制网页的样式</dd>
    <dt>JavaScript</dt>
    <dd>脚本语言，控制网页的行为</dd>
</dl>

<hr/>

dl即definition list（定义列表），<br/>
dt即definition term（定义名词），<br/>
而dd即definition description（定义描述）。<br/>
<p></p>
在实际开发中，定义列表虽然用得比较少，但是在某些高级效果（如自定义表单）中也会用到。在HTML入门阶段，我们了解一下就行。
</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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>5.6 本章练习</title>
</head>
<body>

<h1>问卷调查</h1>

<h3>1、你是通过什么途径来到绿叶学习网的？</h3>
<ol type="A">
    <li>百度搜索</li>
    <li>谷歌搜索</li>
    <li>其他途径</li>
</ol>

<h3>2、你觉得绿叶学习网页面设计怎么样？</h3>
<ol type="A">
    <li>酷炫大方</li>
    <li>比较普通</li>
    <li>非常粗糙</li>
</ol>

<h3>3、你觉得这本书怎么样？（多选）</h3>
<ul>
    <li>通俗易懂，轻松幽默</li>
    <li>内容丰富，轻巧贼多</li>
    <li>三个字：好到爆！</li>
</ul>
</body>
</html>

表格基本结构table

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>表格基本结构</title>
    <!--这里使用CSS为表格加上边框-->
    <style type="text/css">
        table,tr,td{border:1px solid silver;}
    </style>
</head>
<body>
<table>
    <tr>
        <td>HTML</td>
        <td>CSS</td>
    </tr>
    <tr>
        <td>JavaScript</td>
        <td>jQuery</td>
    </tr>
</table>
</body>
<pre>
    在HTML中，一个表格一般由以下3个部分组成。
    表格：table标签。
    行：tr标签。
    单元格：td标签。
    
    tr指的是table row（表格行）。
    td指的是table data cell（表格单元格）。
    
    默认情况下，表格是没有边框的。
    在这个例子中，我们使用CSS加入边框，是想让大家更清楚地看到一个表格结构。
    对于表格的边框、颜色、大小等的设置，我们在CSS中会学到，这里不需要理解那一句CSS代码。
    
    在HTML学习中，我们只需要知道表格用的是什么标签就行了。
    记住，学习HTML时，只考虑结构就行了，学习CSS时，再考虑样式。
</pre>

</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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>表头单元格</title>
    <!--这里使用CSS为表格加上边框-->
    <style type="text/css">
        table,tr,td,th{border:1px solid silver;}
    </style>
</head>
<body>
<table>
    <caption>考试成绩表</caption>
    <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>英语</th>
        <th>数学</th>
    </tr>
    <tr>
        <td>小明</td>
        <td>80</td>
        <td>80</td>
        <td>80</td>
    </tr>
    <tr>
        <td>小红</td>
        <td>90</td>
        <td>90</td>
        <td>90</td>
    </tr>
    <tr>
        <td>小杰</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
    </tr>
</table>
<hr/>

<pre>
    6.3.1 表格标题：caption
    
    6.3.2 表头单元格：th
    th指的是table header cell（表头单元格）
</pre>

<hr/>

<pre>
    一个完整的表格包含：table、caption、tr、th、td。
    为了更进一步地对表格进行语义化，HTML引入了thead、tbody和tfoot这3个标签。
    thead、tbody和tfoot把表格划分为3部分：表头、表身、表脚
</pre>
<table>
    <caption>考试成绩表</caption>
    <thead>
    <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>英语</th>
        <th>数学</th>
    <tr>
    </thead>
    <tbody>
    <tr>
        <td>小明</td>
        <td>80</td>
        <td>80</td>
        <td>80</td>
    </tr>
    <tr>
        <td>小红</td>
        <td>90</td>
        <td>90</td>
        <td>90</td>
    </tr>
    <tr>
        <td>小杰</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td>平均</td>
        <td>90</td>
        <td>90</td>
        <td>90</td>
    </tr>
    </tfoot>
</table>
</body>
</html>

合并行 rowspan

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>rowspan属性</title>
    <style type="text/css">
        table,tr,td{border:1px solid silver;}
    </style>
</head>
<body>
<pre>
    在设计表格时，有时我们需要将“横向的N个单元格”
    或者“纵向的N个单元格”合并成一个单元格（类似Word的表格合并），
    这个时候就需要用到“合并行”或“合并列”。
    
    rowspan表示“row span”，colspan表示“column span”。
</pre>
<table>
    <tr>
        <td>姓名:</td>
        <td>小明</td>
    </tr>
    <tr>
        <td rowspan="2">喜欢水果:</td>
        <td>苹果</td>
    </tr>
    <tr>
        <td>香蕉</td>
    </tr>
</table>

<hr/>

<table>
    <tr>
        <td>姓名:</td>
        <td>小明</td>
    </tr>
    <tr>
        <td>喜欢水果:</td>
        <td>苹果</td>
    </tr>
    <tr>
        <td>香蕉</td>
    </tr>
</table>
</body>
</html>

合并列 colspan

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>
<head>
    <meta charset="utf-8" />
    <title>colspan属性</title>
    <style type="text/css">
        table,tr,td{border:1px solid silver;}
    </style>
</head>
<body>
<pre>
    在HTML中，我们可以使用colspan属性来合并列。
    所谓的合并列，指的是将“横向的N个单元格”合并。
    
    rowspan表示“row span”，colspan表示“column span”。
    
    rowspan 占n行
    colspan 占n列
</pre>
<table>
    <tr>
        <td colspan="2">前端开发技术</td>
    </tr>
    <tr>
        <td>HTML</td>
        <td>CSS</td>
    </tr>
    <tr>
        <td>JavaScript</td>
        <td>jQuery</td>
    </tr>
</table>

<hr/>

<table>
    <tr>
        <td>前端开发技术</td>
    </tr>
    <tr>
        <td>HTML</td>
        <td>CSS</td>
    </tr>
    <tr>
        <td>JavaScript</td>
        <td>jQuery</td>
    </tr>
</table>
</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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>6.7 本章练习</title>
    <style type="text/css">
        table,tr,td{border:1px solid silver;}
    </style>
</head>
<body>

<table>
    <caption>学生成绩表</caption>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>250</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>男</td>
        <td>520</td>
    </tr>
    <tr>
        <td>平均分</td>
        <td colspan="2">385</td>
    </tr>
</table>

</body>
</html>

图片img

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

<h1>7.1 图片标签</h1>
<img src="img/haizei.png">

<hr/>

<img src="img/haizei.png" alt="海贼王之索隆" />

<hr/>

<img src="img/haizei.png" title="海贼王之索隆">

<hr/>
<pre>
    alt属性用于图片描述，这个描述文字是给搜索引擎看的。当图片无法显示时，页面会显示alt中的文字。
    
    title属性也用于图片描述，不过这个描述文字是给用户看的。当鼠标指针移到图片上时，会显示title中的文字。
    
    在实际开发中，对于img标签，src和alt这两个是必选属性，一定要添加；而title是可选属性，可加可不加。
</pre>
<hr/>

<h1>7.2 图片路径</h1>

<img src="D:/website/img/haizei.png" />
<img src="img/haizei.png" />
<img src="haizei.png" />
<img src="../img/haizei.png" />
<pre>
    在实际开发中，不论是图片还是超链接，一般都使用相对路径，几乎不会使用绝对路径。
</pre>
<hr/>

<h1>7.3 图片格式</h1>
<pre>
7.3.1 位图
    位图，又叫作“像素图”，它是由像素点组成的图片。
    对于位图来说，放大图片后，图片会失真；缩小图片后，图片同样也会失真。
    
    如果想要展示色彩丰富的高品质图片，可以使用jpg格式；
    如果是一般图片，为了减少体积或者想要透明效果，可以使用png格式；
    如果是动画图片，可以使用gif格式。
    
    jpg图片不支持透明，png图片支持透明，而gif图片可以做动画。
    
    
7.3.2 矢量图
    矢量图，又叫作“向量图”，是以一种数学描述的方式来记录内容的图片格式。
    举个例子，我们可以使用y=kx来绘制一条直线，当k取不同值时可以绘制不同角度的直线，这就是矢量图的构图原理。
    
    矢量图最大的优点是图片无论放大、缩小或旋转等，都不会失真。
    最大的缺点是难以表现色彩丰富的图片
    
    矢量图的常见格式有“.ai”“.cdr”“.fh”“.swf”。其中“.swf”格式比较常见，它指的是Flash动画
    
    在网页中，很少用到矢量图，除非是一些字体图标（iconfont）。
    
    对于位图和矢量图的区别，我们总结了以下4点。
    - 位图适用于展示色彩丰富的图片，而矢量图不适用于展示色彩丰富的图片。
    - 位图的组成单位是“像素”，而矢量图的组成单位是“数学向量”。
    - 位图受分辨率影响，当图片放大时会失真；而矢量图不受分辨率影响，当图片放大时不会失真。
    - 网页中的图片绝大多数都是位图，而不是矢量图。
</pre>




















</body>
</html>

超链接a

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>超链接</title>
</head>
<body>
<h1>举例：文本超链接</h1>
<a href="http://www.lvyestudy.com">绿叶学习网</a>

<h1>举例：图片超链接</h1>
<a href="http://www.lvyestudy.com"><img src="img/lvye.png" alt="绿叶学习网"/></a>

<h1>8.1.2 target属性</h1>
<a href="http://www.lvyestudy.com">绿叶学习网 默认</a><br/>
<a href="http://www.lvyestudy.com" target="_self">绿叶学习网 _self</a><br/>
<a href="http://www.lvyestudy.com" target="_blank">绿叶学习网 _blank</a><br/>
<a href="http://www.lvyestudy.com" target="_parent">绿叶学习网 _parent</a><br/>
<a href="http://www.lvyestudy.com" target="_top">绿叶学习网 _top</a><br/>
<pre>
    _self   原窗口打开（默认）
    _blank  新窗口打开 *
    _parent 父窗口打开
    _top    顶层窗口打开
</pre>

<h1>8.2 内部链接</h1>
<a href="page2.html">跳转到页面2</a><br/>
<a href="test/page3.html">跳转到页面3</a>

<h1>8.3 锚点链接</h1>
<pre>
    有些页面内容比较多，导致页面过长，此时用户需要不停地拖动浏览器上的滚动条才可以看到下面的内容。
    为了方便用户操作，我们可以使用锚点链接来优化用户体验。
    例如：文章目录   就是锚点链接
    
    在HTML中，锚点链接其实是内部链接的一种，它的链接地址（也就是href）指向的是当前页面的某个部分。
    所谓锚点链接，简单地说，就是单击某一个超链接，它就会跳到当前页面的某一部分。
    
    想要实现锚点链接，需要定义以下2个参数。
       - 目标元素的id。
       - a标签的href属性指向该id。
    
    id属性就是元素的名称，这个id名是随便起的（一般是英文）。
    不过在同一个页面中，id是唯一的，也就是说一个页面不允许出现相同的id。
    
    最后要注意一点，给a标签的href属性赋值时，需要在id前面加上“#”（井号），用来表示这是一个锚点链接。
</pre>

<div>
    <a href="#article">推荐文章</a><br />
    <a href="#music">推荐音乐</a><br />
    <a href="#movie">推荐电影</a><br />
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="article">
    <h3>推荐文章</h3>
    <ul>
        <li>朱自清-荷塘月色</li>
        <li>余光中-乡愁</li>
        <li>鲁迅-阿Q正传</li>
    </ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="music">
    <h3>推荐音乐</h3>
    <ul>
        <li>林俊杰-被风吹过的夏天</li>
        <li>曲婉婷-我的歌声里</li>
        <li>许嵩-灰色头像</li>
    </ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="movie">
    <h3>推荐电影</h3>
    <ul>
        <li>蜘蛛侠系列</li>
        <li>钢铁侠系列</li>
        <li>复仇者联盟</li>
    </ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />

<h1>8.4 本章练习</h1>
<a href="http://www.lvyestudy.com" target="_blank"><img src="img/lvye.png" alt="绿叶学习网"/></a><br/>
<a href="http://www.lvyestudy.com" target="_blank">绿叶，给你初恋般的感觉</a>
</body>
</html>

表单form

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>表单</title>
</head>
<body>

<h1>9.2.1 form标签简介</h1>
<pre>
    如果一个页面仅仅供用户浏览，那就是静态页面。
    如果这个页面还能实现与服务器进行数据交互（像注册登录、话费充值、评论交流），那就是动态页面。
    
    表单是我们接触动态页面的第一步。
    其中表单最重要的作用就是在浏览器端收集用户的信息，然后将数据提交给服务器来处理
    
    学习HTML只需要把效果做出来就可以，不需要考虑数据处理。
    
    表单标签有5种：
        form、input、textarea、select/option。
    根据外观进行划分，表单可以分为以下8种。
        1. 单行文本框。
        2. 密码文本框。
        3. 单选框。
        4. 复选框。
        5. 按钮。
        6. 文件上传。
        7. 多行文本框。
        8. 下拉列表。
</pre>
<hr/>

<form>
    <input type="text" value="这是一个单行文本框"/><br/>
    <textarea>这是一个多行文本框</textarea><br/>
    <select>
        <option>HTML</option>
        <option>CSS</option>
        <option>JavaScript</option>
    </select>
</form>
<hr/>

<h1>9.2.2 form标签属性</h1>
<pre>
    1．name属性   name="myForm"
        在一个页面中，表单可能不止一个，每一个form标签就是一个表单。
        为了区分这些表单，我们可以使用name属性来给表单命名。
    
    2．method属性   method="post"
        在form标签中，method属性用于指定表单数据使用哪一种http提交方法。
        method属性取值有两个：一个是“get”，另外一个是“post”。
        get的安全性较差，而post的安全性较好。所以在实际开发中，大多数情况下我们都是使用post。
    
    3．action属性   action="index.php"
        在form标签中，action属性用于指定表单数据提交到哪一个地址进行处理。
    
    4．target属性   target="_blank"
        form标签的target属性与a标签的target属性是一样的，都是用来指定窗口的打开方式。
        一般情况下，我们只会用到“_blank”这一个属性值。
    
    5．enctype属性
        在form标签中，enctype属性用于指定表单数据提交的编码方式。
        一般情况下，我们不需要设置，除非你用到上传文件功能。
</pre>
<hr/>

<h1>9.3 input标签</h1>
<pre>
    在HTML中，大多数表单都是使用input标签来实现的。
    
    input是自闭合标签，它是没有结束符号的。
    
    input标签的type属性取值
        - text        单行文本框
        - password    密码文本框
        - radio       单选框
        - checkbox    多选框
        - button      按钮
        - file        文件上传
</pre>
<hr/>

<h1>9.4 单行文本框   input text</h1>
<pre>
    9.4.2 单行文本框属性
        - value      文本框默认值
        - size       文本框长度
        - maxlength  字符数
    
    value属性用于设置单行文本框中默认的文本，如果没有设置，文本框就是空白的。
    size属性可以用来设置单行文本框的长度，不过在实际开发中，我们一般不会用到这个属性，而是使用CSS来控制。
    从外观上看不出加上与不加上maxlength有什么区别，不过当我们输入内容后，会发现设置maxlength="5"的单行文本框最多只能输入5个字符
</pre>
<form method="post">
    默认<br/>
    姓名：<input type="text" /><br />
    <p></p>

    value<br/>
    姓名：<input type="text" /><br />
    姓名：<input type="text" value="helicopter"/><br />
    <p></p>

    size<br/>
    姓名：<input type="text" size="20"/><br/>
    姓名：<input type="text" size="10"/><br />
    <p></p>

    maxlength<br/>
    姓名：<input type="text" /><br />
    姓名：<input type="text" maxlength="5"/><br />
</form>
<hr/>

<h1>9.5 密码文本框   input password</h1>
<pre>
    密码文本框在外观上与单行文本框相似，两者拥有相同的属性（如value、size、maxlength等）。
    在单行文本框中输入的字符是可见的，而在密码文本框中输入的字符不可见。
    我们可以把密码文本框看成是一种特殊的单行文本框。
    
    密码文本框只能使周围的人看不见你输入的内容是什么，实际上它并不能保证数据的安全。
    为了保证数据安全，我们需要在浏览器与服务器之间建立一个安全连接，不过这属于后端技术，这里了解一下就行。
</pre>
<form method="post">
    账号：<input type="text" size="15" maxlength="10" /><br />
    密码：<input type="password" size="15" maxlength="10" />
</form>
<hr/>

<h1>9.6 单选框   input radio</h1>
<pre>
    name属性表示单选按钮所在的组名，而value表示单选按钮的取值，这两个属性必须要设置。
    
    可能有小伙伴会问：“如果想要在默认情况下，让第一个单选框选中，该怎么做呢？”此时可以使用checked属性来实现。
    我们可能会看到checked属性没有属性值，其实这是HTML5的最新写法。
    checked 等同于 checked="checked"
    
    没有加上name属性，预览效果好像没有变化。但是当我们选取的时候，会发现居然可以同时选中两个选项
    
    最后有一点要说明一下，为了更好地语义化，表单元素与后面的文本一般都需要借助label标签关联起来。
</pre>
<form method="post">
    性别:
    <input type="radio" name="gender" value="男" checked/>男
    <input type="radio" name="gender" value="女" />女
</form>
<hr/>

<form method="post">
    <p>无name属性，两者都可选</p>
    性别:
    <input type="radio" value="男" checked/>男
    <input type="radio" value="女" />女
</form>
<hr/>

<form method="post">
    <p>这里定义了两组单选框，在每一组中，选项之间都是互斥的。也就是说，在同一组中，只能选中其中一项。</p>
    性别:
    <input type="radio" name="gender" value="男" />男
    <input type="radio" name="gender" value="女" />女<br />
    年龄:
    <input type="radio" name="age" value="80后" />80后
    <input type="radio" name="age" value="90后" />90后
    <input type="radio" name="age" value="00后" />00后
</form>


<form method="post">
    <p>最后有一点要说明一下，为了更好地语义化，表单元素与后面的文本一般都需要借助label标签关联起来。</p>

    <input type="radio" name="gender" value="男" />男
    <input type="radio" name="gender" value="女" />女

    <label><input type="radio" name="gender" value="男" />男</label>
    <label><input type="radio" name="gender" value="女" />女</label>
</form>
<hr/>

<h1>9.7 复选框   input checkbox</h1>
<pre>
    单选框只能选择一项，而复选框可以选择多项。
    
    name属性表示复选框所在的组名，而value表示复选框的取值。与单选框一样，这两个属性也必须要设置。
    
    想在默认情况下，让复选框某几项被选中，我们也可以使用checked属性来实现。这一点与单选框是一样的。
</pre>
<form method="post">
    你喜欢的水果：<br/>
    <input type="checkbox" name="fruit" value="苹果" checked/>苹果
    <input type="checkbox" name="fruit" value="香蕉"/>香蕉
    <input type="checkbox" name="fruit" value="西瓜" checked/>西瓜
    <input type="checkbox" name="fruit" value="李子"/>李子
</form>
<hr/>

<h1>9.8 按钮   input button/submit/reset</h1>
<pre>
    在HTML中，常见的按钮有3种：
        - 普通按钮（button）    一般情况下都是配合JavaScript来进行各种操作的。
        - 提交按钮（submit）    一般都是用来给服务器提交数据的。
        - 重置按钮（reset）     一般用来清除用户在表单中输入的内容。
    
    9.8.1 普通按钮button
        在HTML中，普通按钮一般情况下都是配合JavaScript来进行各种操作的。
        value的取值就是按钮上的文字。
    
    9.8.2 提交按钮submit
        在HTML中，提交按钮一般都是用来给服务器提交数据的。我们可以把提交按钮看成是一种特殊功能的普通按钮。
        
        提交按钮与普通按钮在外观上没有什么不同，两者的区别在于功能上。对于初学者来说，暂时了解一下就行。
    
    9.8.3 重置按钮reset
        在HTML中，重置按钮一般用来清除用户在表单中输入的内容。重置按钮也可以看成是具有特殊功能的普通按钮。
        
        我们在文本框中输入内容，然后按下重置按钮，会发现内容被清空了！其实，这就是重置按钮的功能。
    
        重置按钮只能清空它“所在form标签”内表单中的内容，对于当前所在form标签之外的表单清除是无效的。
    
    9.8.4 button标签
        在实际开发中，基本不会用到button标签，因此只需简单了解一下即可。
</pre>
<form method="post">
    <input type="button" value="普通按钮"/>
    <input type="submit" value="提交按钮"/>
</form>

<hr/>

<form method="post">
    <p>重置按钮只能清空它“所在form标签”内表单中的内容，对于当前所在form标签之外的表单清除是无效的。</p>
    账号：<input type="text" /><br />
    密码：<input type="password" /><br />
    <input type="reset" value="重置" /><br />
</form>
昵称：<input type="text" />
<hr/>

<h1>9.9 文件上传   input file</h1>
<pre>
    文件上传功能我们经常用到，如百度网盘、QQ邮箱等，都涉及这个功能。
    文件上传功能的实现需要用到后端技术，不过在学习HTML时，我们只需要关心怎么做出页面效果就行了，对于具体的功能实现不需要去深究。
    
    在HTML中，文件上传也是使用input标签来实现的，其中type属性取值为“file”。
</pre>
<form method="post">
    <input type="file"/>
</form>
<hr/>

<h1>9.10 多行文本框    textarea</h1>
<pre>
    单行文本框只能输入一行文本，而多行文本框却可以输入多行文本。
    在HTML中，多行文本框使用的是textarea标签，而不是input标签。
    
    多行文本框的默认显示文本是在标签对的内部设置，而不是在value属性中设置的。
    一般情况下，不需要设置默认显示文本。
    
    HTML有3种文本框：单行文本框、密码文本框、多行文本框。
        - 单行文本框/密码文本框 使用的都是input标签，
        - 多行文本框 使用的是textarea标签。
</pre>
<form method="post">
    个人简介：<br/>
    <textarea rows="5" cols="20">请介绍一下你自己</textarea>
</form>
<hr/>

<h1>9.11 下拉列表    select option</h1>
<pre>
    在HTML中，下拉列表是由select和option这两个标签配合使用来表示的。
    这一点与无序列表很像，无序列表是由ul和li这两个标签配合使用来表示。
    为了便于理解，我们可以把下拉列表看成是一种“特殊的无序列表”。
    
    下拉列表是最节省页面空间的一种方式，因为它在默认情况下只显示一个选项，只有单击后才能看到全部选项。
    
    9.11.2 select标签属性
        - multiple  下拉列表可多选
        - size      显示几个列表项，整数
    
    9.11.3 option标签属性
        - selected 是否选中
        - value    选项值
    
    selected属性表示列表项是否被选中，它是没有属性值的，这也是HTML5的最新写法，这个与单选框中的checked属性是一样的。
    
    1．表单元素那么多，而且都有好几个属性，应该怎么记忆呢？
        对于初学者来说，表单记忆是比较令人头疼的一件事。
        在HTML入门时，我们不需要花太多时间去记忆这些标签或属性，只需要感性认知即可。
        忘了的时候，就回来翻一下。
    
    2．表单元素是否一定要放在form标签内呢？
        表单元素不一定都要放在form标签内。
        对于要与服务器进行交互的表单元素，必须放在form标签内才有效。
        如果表单元素不需要与服务器进行交互，那就没必要放在form标签内。
</pre>
<form method="post">
    <select>
        <option>HTML</option>
        <option>CSS</option>
        <option>jQuery</option>
    </select>
</form>
<hr/>

<form method="post">
    <p>举例：multiple属性</p>
    <select multiple>
        <option>HTML</option>
        <option>CSS</option>
        <option>jQuery</option>
    </select>
</form>
<hr/>

<form method="post">
    <p>举例：size属性</p>
    <select size="2">
        <option>HTML</option>
        <option>CSS</option>
        <option>jQuery</option>
    </select>
</form>
<hr/>

<form method="post">
    <p>举例：默认选中 有size</p>
    <select size="3">
        <option value="HTML">HTML</option>
        <option value="CSS" selected>CSS</option>
        <option value="jQuery">jQuery</option>
    </select>
</form>
<hr/>

<form method="post">
    <p>举例：默认选中 无size</p>
    <select>
        <option value="HTML">HTML</option>
        <option value="CSS" selected>CSS</option>
        <option value="jQuery">jQuery</option>
    </select>
</form>
<hr/>

<h1>9.12 本章练习</h1>

<form>
    昵称：<input/><br/>
    密码：<input type="password"/><br/>
    邮箱：<input/>&nbsp;
        <select>
            <option selected>qq.com</option>
            <option>163.com</option>
        </select>
        <br/>
    性别：
        <input type="radio" name="sex" value="男" checked/>男
        <input type="radio" name="sex" value="女"/>女
        <br/>
    爱好：
        <input type="checkbox" name="hobby" value="旅游"/>旅游
        <input type="checkbox" name="hobby" value="摄影"/>摄影
        <input type="checkbox" name="hobby" value="运动"/>运动
        <br/>
    个人简介：
        <br/>
        <textarea rows="8" cols="40"></textarea>
        <br/>
    上传个人照片：
        <br/>
        <input type="file"/>
    <hr/>
    <input type="button" value="立即注册"/>
</form>












<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

框架 iframe

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>框架</title>
</head>
<body>

<h1>10.1 iframe标签</h1>
<pre>
    在HTML中，我们可以使用iframe标签来实现一个内嵌框架。
    内嵌框架，是指在当前页面再嵌入另外一个网页。
    
    src是必选的，用于定义链接页面的地址。
    width和height这两个属性是可选的，分别用于定义框架的宽度和高度。
    
    可能有些小伙伴在其他书上看到还有frameset、frame标签，事实上这几个标签在HTML5标准中已经被废弃了。
    对于框架，我们只需要掌握iframe这一个标签就可以了。
</pre>
<iframe src="http://www.lvyestudy.com" width="300" height="300" depth="150"></iframe>
<iframe src="http://www.ptpress.com.cn" width="300" height="300" depth="150"></iframe>



【日期标记】2023-06-07 08:53:51 以上同步完成










<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

———————

CSS简介

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</title>
</head>
<body>

<pre>
11.1.1 CSS是什么
    CSS，指的是“Cascading Style Sheet（层叠样式表）”，是用来控制网页外观的一门技术。
    我们知道，前端最核心的3个技术是HTML、CSS、JavaScript，三者的关系如下。
    “HTML用于控制网页的结构，CSS用于控制网页的外观，JavaScript控制的是网页的行为。”
    
    在互联网发展早期，网页都是用HTML来做的，这样的页面较为单调。
    为了改造HTML标签的默认外观，使页面变得更加美观，后来就引入了CSS。
    
11.1.2 CSS和CSS3
    很多初学者都有一个疑问：“现在都CSS3的时代了，CSS2不是被淘汰了吗，为什么还要学CSS2呢？”这个认知误区非常严重，曾经误导绝大多数的初学者。
    其实，我们现在所说的CSS3，一般指的是相对于CSS2“新增加的内容”，并不是说CSS2被淘汰了。
    准确地说，你要学的CSS其实等于CSS2加上CSS3。
    
    本书介绍的是CSS2.1，
    对于CSS3新增的技术，小伙伴们可以关注“从0到1系列”的《从0到1：HTML5+CSS3修炼之道》这本书。
</pre>
</body>
</html>

CSS引入方式

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
69
70
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--11.2.1 外部样式表-->
    <!--<link rel="stylesheet" type="text/css" href="文件路径" />-->
    
    <!--11.2.2 内部样式表-->
    <!--<style type="text/css">-->
    <!--    div{color:red;}-->
    <!--</style>-->
</head>
<body>

<pre>
想要在一个页面引入CSS，共有以下3种方式。
    1. 外部样式表。
    2. 内部样式表。
    3. 行内样式表。

11.2.1 外部样式表
    在实际开发中，为了提升网站的性能速度和可维护性，一般都会使用外部样式表。
    
    当样式需要被应用到多个页面时，外部样式表是最理想的选择。使用外部样式表，就可以通过更改一个CSS文件来改变整个网站的外观。
    如果你使用外部样式表，必须使用link标签来引入，而link标签是放在head标签内的。
    
    <link rel="stylesheet" type="text/css" href="文件路径" />
    rel即relative的缩写，它的取值是固定的，即"stylesheet"，表示引入的是一个样式表文件（即CSS文件）。
    type属性的取值也是固定的，即"text/css"，表示这是标准的CSS。
    href属性表示CSS文件的路径。对于路径，相信小伙伴们已经很熟悉了。

11.2.2 内部样式表
    内部样式表，指的是把HTML代码和CSS代码放到同一个HTML文件中。
    其中，CSS代码放在style标签内，style标签是放在head标签内部的。
    如果你使用内部样式表，CSS样式必须在style标签内定义，而style标签是放在head标签内的。
    
    <style type="text/css">
        div{color:red;}
    </style>
    
    <div>绿叶，给你初恋般的感觉。</div>
    <div>绿叶，给你初恋般的感觉。</div>
    <div>绿叶，给你初恋般的感觉。</div>
    type="text/css"是必须添加的，表示这是标准的CSS。

11.2.3 行内样式表
    行内样式表与内部样式表类似，也是把HTML代码和CSS代码放到同一个HTML文件。
    但是两者有着本质的区别：
        内部样式表的CSS是在“style标签”内定义的，
        而行内样式表的CSS是在“标签的style属性”中定义的。
    
    <div style="color:red;">绿叶，给你初恋般的感觉。</div>
    <div style="color:red;">绿叶，给你初恋般的感觉。</div>
    <div style="color:red;">绿叶，给你初恋般的感觉。</div>
    
    如果使用内部样式表，样式只需要写一遍；但是如果使用行内样式表，则每个元素都要单独写一遍。
    
    行内样式是在每一个元素的内部定义的，冗余代码非常多，
    并且每次改动CSS的时候，必须到元素中一个个去改，这样会导致网站的可读性和可维护性非常差。

【解惑】不是说CSS有4种引入方式吗？
    还有一种是@import方式。@import方式与外部样式表很相似。
    不过在实际开发中，我们极少使用@import方式，而更倾向于使用link方式（外部样式）。
    原因在于@import方式是先加载HTML后加载CSS，而link是先加载CSS后加载HTML。
    如果HTML在CSS之前加载，页面用户体验就会非常差。因此，对于@import这种方式，我们不需要去了解。
</pre>
</body>
</html>

元素的id和class

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<pre>
    在HTML中，id和class是元素最基本的两个属性。
    一般情况下，id和class都可以用来选择元素，以便进行CSS操作或者JavaScript操作。
    
12.1.1 id属性
    id属性具有唯一性，也就是说，在一个页面中相同的id只能出现一次。
    如果出现了多个相同的id，那么CSS或者JavaScript就无法识别这个id对应的是哪一个元素。
    
    <div id="content">存在即合理</div>
    <p id="content">存在即合理</p>
    上面这段代码是不正确的，因为在同一个页面中，不允许出现两个id相同的元素。
    但是，在不同页面中，可以出现两个id相同的元素。
    
12.1.2 class属性
    class，顾名思义，就是“类”，它与C++、Java等编程语言中的“类”相似。
    我们可以为同一个页面的相同元素或者不同元素设置相同的class，然后使相同class的元素具有相同的CSS样式。
    
    <div class="content">存在即合理</div>
    <p class="content">存在即合理</p>
    上面这段代码是正确的，因为在同一个页面中，允许出现两个class相同的元素。
    这样可以使我们对具有相同class的多个元素，定义相同的CSS样式。

对于id和class，我们可以这样理解：
        id就像你的身份证号，而class就像你的名字。
        身份证号是唯一的，但是两个人的名字却有可能是一样的。
</pre>
</body>
</html>

CSS选择器

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<pre>
12.2 选择器是什么
    选择器，就是指用一种方式把你想要的那个元素选中。只有把它选中了，你才可以为这个元素添加CSS样式。
    
    在CSS中，有很多方式可以把你想要的元素选中，这些不同的方式其实就是不同的选择器。
    选择器的不同，在于它的选择方式不同，但是它们的最终目的是相同的，就是把你想要的元素选中，这样才可以定义该元素CSS样式。
    当然，你可以用某一种选择器来代替另外一种选择器，这仅仅是选择方式不同罢了，但目的还是一样的。
    
这本书是针对CSS入门的小伙伴的，因此我们只会讲解最实用的5种选择器。
    1. 元素选择器。
    2. id选择器。
    3. class选择器。
    4. 后代选择器。
    5. 群组选择器。
    
    这一节介绍的5种选择器，它们的使用频率占所有选择器的80%以上，对于初学者来说已经完全够用了。
    小伙伴们现在先不要急着去学习其他选择器，否则很容易造成混淆。我们在CSS进阶的时候再去学习其他选择器。

CSS选择器的格式如下。
    选择器
    {
        属性1 : 取值1;
        ……
        属性n : 取值n;
    }
</pre>
</body>
</html>

元素选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        div{color:red;}
    </style>
</head>
<body>

<div>绿叶学习网</div>
<p>绿叶学习网</p>
<span>绿叶学习网</span>
<div>绿叶学习网</div>

</body>
</html>

id选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #lvye{color:red;}
    </style>
</head>
<body>

<div>绿叶学习网</div>
<div id="lvye">绿叶学习网</div>
<div>绿叶学习网</div>

</body>
</html>

class选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .lv{color:red;}
    </style>
</head>
<body>

<div>绿叶学习网</div>
<div class="lv">绿叶学习网</div>
<div class="lv">绿叶学习网</div>
<span class="lv">绿叶学习网</span>
<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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*后代选择器，就是选择元素内部中某一种元素的所有元素：包括子元素和其他后代元素（如“孙元素”）。*/
        #father1 div {color:red;}
        #father2 span{color:blue;}
    </style>
</head>
<body>
    <div id="father1">
        <div>绿叶学习网</div>
        <div>绿叶学习网</div>
    </div>
    <div id="father2">
        <p>绿叶学习网</p>
        <p>绿叶学习网</p>
        <span>绿叶学习网</span>
    </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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        h3,div,p,span {color:red;}
    </style>
</head>
<body>
<h3>绿叶学习网</h3>
<div>绿叶学习网</div>
<p>绿叶学习网</p>
<span>绿叶学习网</span>

<pre>
    <style type="text/css">
        h3,div,p,span{color:red;}
    </style>
    
    上面这段代码等价于以下代码
    
    <style type="text/css">
        h3{color:red;}
        div{color:red;}
        p{color:red;}
        span{color:red;}
    </style>
</pre>


<pre>
    <style type="text/css">
        #lvye,.lv,span{color:red;}
    </style>
    
    上面这段代码等价于以下代码
    
    <style type="text/css">
        #lvye{color:red;}
        .lv{color:red;}
        span{color:red;}
    </style>
</pre>
</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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

<pre>
    font-family  字体类型 宋体/正楷/...
    font-size    字体大小
    font-weight  字体粗细
    font-style   字体风格
    color        字体颜色
除了字体颜色，其他字体属性都是以“font”前缀开头的。其中，font就是“字体”的意思。
</pre>

<h1>13.2 字体类型：font-family</h1>
<pre>
    font-family: 字体1,字体2,...,字体N;
    
    font-family可以指定多种字体。使用多个字体时，将按从左到右的顺序排列，并且以英文逗号（,）隔开。
    如果我们不定义font-family，浏览器将会采用默认字体类型，也就是“宋体”。
    
    举例：设置一种字体
        #div1{font-family: Arial;}
        #div2{font-family: "Times New Roman";}
        #div3{font-family: "微软雅黑";}
    对于font-family属性，如果字体类型只有一个英文单词，则不需要加上双引号；
    如果字体类型是多个英文单词或是中文的，则需要加上双引号。
    注意，这里的双引号是英文双引号，而不是中文双引号。
    
    举例：设置多种字体
        p{font-family:Arial,Verdana,Georgia;}
    
    对于“p{font-family:Arial,Verdana,Georgia;}”这句代码，小伙伴们可能会感到疑惑：为什么要为元素定义多个字体类型呢？
        其实原因是这样的：每个人的电脑装的字体都不一样，有些字体有安装，但也有些字体没有安装。
        p{font-family:Arial,Verdana,Georgia;}这一句的意思是p元素优先使用“Aria字体”来显示。
        如果你的电脑没有安装“Arial字体”，那就接着考虑“Verdana字体”。
        如果你的电脑也没有安装“Verdana字体”，那就接着考虑“Georgia字体”……以此类推。
        如果Arial、Verdana、Georgia字体都没有安装，那么p元素就会以默认字体（即宋体）来显示。
    
    在实际开发中，比较美观的
        中文字体有微软雅黑、苹方，
        英文字体有Times New Roman 、Arial和Verdana。
</pre>



<h1>13.3 字体大小：font-size</h1>
<pre>
    实际上，font-size属性取值有两种：
        一种是“关键字”，如small、medium、large等；
        另外一种是“像素值”，如10px、16px、21px等。
    不过在实际开发中，关键字这种方式基本不会用，因此我们只需要掌握像素值方式即可。
    
    px全称pixel（像素），1像素指的是一张图片中最小的点，或者是计算机屏幕最小的点。
    
    我们会发现，原来一张图片是由很多的小方点组成的。其中，每一个小方点就是一个像素（px）。
    如果说一台屏幕的分辨率是800px×600px，指的就是“屏幕宽是800个小方点，高是600个小方点”。
    严格来说，px属于相对单位，因为屏幕分辨率的不同，1px的大小也是不同的。
    
    稍微了解CSS的小伙伴都知道，font-size的取值单位不仅仅是px，还有em、百分比等。
    不过初学CSS时，我们只需要掌握px这一个就可以了。
        #p1 {font-size: 10px;}
        #p2 {font-size: 15px;}
        #p3 {font-size: 20px;}
</pre>

<h1>13.4 字体粗细：font-weight</h1>
<pre>
    字体粗细（font-weight）与字体大小（font-size）是不一样的。
    粗细指的是字体的“肥瘦”，而大小指的是字体的“宽高”。
    
    语法   font-weight:取值;
    font-weight属性取值有两种：一种是“100~900的数值”，另一种是“关键字”。
    
    normal   正常（默认）
    lighter  较细
    bold     较粗
    bolder   很粗（其实和 bold 差不多）
    对于实际开发来说，一般我们只会用到bold这一个属性值，其他的几乎用不上，这一点大家要记住。
    
    举例：font-weight取值为“数值”
        #p1{font-weight: 100;}
        #p2{font-weight: 400;}
        #p3{font-weight: 700;}
        #p4{font-weight: 900;}
    font-weight属性可以取100、200、…、900这9个值。
    其中100相当于lighter，400相当于normal，700相当于bold，而900相当于bolder。
    不过在实际开发中，不建议使用数值（100~900）作为font-weight的属性取值，因此这里我们只需要简单了解一下就行。
    
    举例：font-weight取值为“关键字”
        #p1{font-weight:lighter;}
        #p2{font-weight:normal;}
        #p3{font-weight:bold;}
        #p4{font-weight:bolder;}
</pre>

<h1>13.5 字体风格：font-style</h1>
<pre>
    normal  正常（默认）
    italic  斜体
    oblique 斜体
    
    举例
        #p1{font-style:normal;}
        #p2{font-style:italic;}
        #p3{font-style:oblique;}
    
    从预览效果可以看出，font-style属性值为italic或oblique时，页面效果居然是一样的！那这两者究竟有什么区别呢？
        其实italic是字体的一个属性，但是并非所有的字体都有这个italic属性。
        对于有italic属性的字体，我们可以使用“font-style:italic;”来实现斜体效果。
        但是对于没有italic属性的字体，我们只能另外想办法，也就是使用“font-style:oblique;”来实现。
        
    我们可以这样理解：有些字体有斜体italic属性，但有些字体却没有italic属性。oblique是让没有italic属性的字体也能够有斜体效果。
    不过在实际开发中，font-style属性很少用得到，这一节简单了解一下即可。
</pre>

<h1>13.6 字体颜色：color</h1>
<pre>
    color属性取值有两种，一种是“关键字”，另一种是“十六进制RGB值”。
    除了这两种，其实还有RGBA、HSL等，不过后面那几个都属于CSS3的内容。
    
    13.6.1 关键字
        #p1{color:gray;}
        #p2{color:orange;}
        #p3{color:red;}
    
    13.6.2 十六进制RGB值
        单纯靠“关键字”是满足不了实际的开发需求的，因此我们还引入了“十六进制RGB值”。
        所谓的十六进制RGB值，指的是类似“#FBF9D0”形式的值。相信经常使用Photoshop的小伙伴不会陌生。
        对于十六进制颜色值，有两个我们需要知道：#000000是黑色，#FFFFFF是白色。
    
        #p1{color: #03FCA1;}
        #p2{color: #048C02;}
        #p3{color: #CE0592;}
</pre>

</body>
</html>

CSS选择器顺序问题

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*使用元素选择器，定义所有p元素样式*/
        p
        {
            font-family:微软雅黑; /*字体类型为微软雅黑*/
            font-size:14px; /*字体大小为14px*/
            font-weight:bold; /*字体粗细为bold*/
            color:red; /*字体颜色为red*/
        }
        /*使用id选择器，定义个别样式*/
        #p2
        {
            color:blue; /*字体颜色为blue*/
        }
    </style>
</head>
<body>
<p id="p1">HTML控制网页的结构</p>
<p id="p2">CSS控制网页的外观</p>
<p id="p3">JavaScript控制网页的行为</p>

<hr/>
<pre>
    在这个例子中，我们使用了元素选择器和id选择器。
    元素选择器能把所有相同元素选中然后定义CSS样式，而id选择器能针对某一个元素定义CSS样式。
    
    这里说明一下：浏览器解析CSS是有一定顺序的，在这个例子中，
        第2个p元素一开始就使用元素选择器定义了一次“color:red;”，
        然后又接着用id选择器定义了一次“color:blue;”。
    因此后面的会覆盖前面的，最终显示为蓝色。
</pre>
</body>
</html>

字体 练习

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>012_13.8_字体 练习.html</title>

    <style type="text/css">
        p {
            font-family: "苹方", "微软雅黑", Arial, serif;
            font-size: 14px;
            font-weight: bold;
            color: blue;
        }
    </style>
</head>
<body>

<p>“有规划的人生叫蓝图，没规划的人生叫拼图。”</p>

</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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>

<pre>
我们为什么要将文本样式和字体样式区分开学习呢？
    实际上，字体样式针对的是“文字本身”的形体效果，而文本样式针对的是“整个段落”的排版效果。
    字体样式注重个体，文本样式注重整体。因此在CSS中，特意使用了“font”和“text”两个前缀来区分这两类样式。
    
    text-indent         首行缩进
    text-align          水平对齐
    text-decoration     文本修饰
    text-transform      大小写转换
    line-height         行高
    letter-spacing      字母间距
    word-spacing        单词间距
</pre>

</body>
</html>

首行缩进：text-indent

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        p {
            font-size: 14px;
            text-indent: 28px;
        }
    </style>
</head>
<body>
<h3>爱莲说</h3>
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。</p>

<hr/>
<pre>
    p元素的首行是不会自动缩进的，因此我们在HTML中往往使用6个 nbsp（空格）来实现首行缩进两个字的空格。
    但是这种方式会导致冗余代码很多。那么有没有更好的解决方法呢？
    在CSS中，我们可以使用text-indent属性来定义p元素的首行缩进。
    
    语法 text-indent:像素值;
    在CSS入门中，建议大家使用像素（px）作为单位，然后在CSS进阶中再去学习更多的CSS单位。
    
    我们都知道，中文段落首行一般需要缩进两个字的空间。
    想要实现这个效果，那么text-indent值应该是font-size值的2倍。
    大家仔细琢磨一下上面这个例子就知道为什么了。这是一个很棒的小技巧，以后会经常用到。
</pre>
</body>
</html>

水平对齐：text-align

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{text-align:left;}
        #p2{text-align:center;}
        #p3{text-align:right;}
    </style>
</head>
<body>
<p id="p1"><strong>左对齐</strong>:好好学习，天天向上。</p>
<p id="p2"><strong>居中对齐</strong>:好好学习，天天向上。</p>
<p id="p3"><strong>右对齐</strong>:好好学习，天天向上。</p>

<hr/>
<pre>
    在CSS中，我们可以使用text-align属性来控制文本在水平方向上的对齐方式。
    
    left   左对齐（默认）
    center 居中对齐
    right  右对齐
    
    在实际开发中，我们一般只会用到居中对齐（center）这一个，其他两个几乎用不上。
    此外，text-align属性不仅对文本有效，对图片（img元素）也有效。对于图片水平对齐，我们在后面会详细介绍。
</pre>
</body>
</html>

文本修饰：text-decoration

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{text-decoration:underline;}
        #p2{text-decoration:line-through;}
        #p3{text-decoration:overline;}
        a{text-decoration:none;}
    </style>
</head>
<body>
<p id="p1">这是“下划线”效果</p>
<p id="p2">这是“删除线”效果</p>
<p id="p3">这是“顶划线”效果</p>
<a href="http://www.lvyestudy.com" target="_blank">绿叶学习网</a>

<hr/>
<pre>
    none         去除所有划线效果（默认）
    underline    下划线
    line-through 中划线
    overline     上划线

去除超链接下划线
    我们都知道超链接（a元素）默认样式有下划线，那么该如何去掉a元素中的下划线呢？
    这个时候，“text-decoration:none;”就派上用场了。
    
    使用“text-decoration:none;”去除a元素的下划线，这个技巧我们在实际开发中会大量用到。
    主要是因为超链接默认样式不太美观，极少网站会使用它的默认样式。

14.4.2 3种划线的用途分析
    1．下划线下划线一般用于标明文章中的重点
    2．中划线中划线经常出现在各大电商网站中，一般用于促销
    3．顶划线说实话，我还真的从来没有见过什么网页用过顶划线，大家可以果断放弃。
</pre>
</body>
</html>

大小写：text-transform

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{text-transform:uppercase;}
        #p2{text-transform:lowercase;}
        #p3{text-transform:capitalize;}
    </style>
</head>
<body>
<p id="p1">rome was't built in a day.</p>
<p id="p2">rome was't built in a day.</p>
<p id="p3">rome was't built in a day.</p>

<hr/>

<pre>
    在CSS中，我们可以使用text-transform属性来将文本进行大小写转换。
    text-transform属性是针对英文而言的，因为中文不存在大小写之分。
    
    none        无转换（默认值）
    uppercase   转换为大写
    lowercase   转换为小写
    capitalize  每个英文单词首字母大写
</pre>
</body>
</html>

行高：line-height

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{line-height:10px;}
        #p2{line-height:20px;}
        #p3{line-height:40px;}
        #p4{line-height:60px;}
    </style>
</head>
<body>
<hr/>
<p id="p1">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<hr/>
<p id="p2">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<hr/>
<p id="p3">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<hr/>
<p id="p4">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<hr/>
</body>
</html>

字间距：letter-spacing

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{letter-spacing:0px;}
        #p2{letter-spacing:3px;}
        #p3{letter-spacing:5px;}
    </style>
</head>
<body>
<p id="p1">Rome was't built in a day.罗马不是一天建成的。</p><hr/>
<p id="p2">Rome was't built in a day.罗马不是一天建成的。</p><hr/>
<p id="p3">Rome was't built in a day.罗马不是一天建成的。</p>

<hr/>
<pre>
    letter-spacing，从英文意思上就可以知道这是“字母间距”。
    注意，每一个中文汉字都被当作一个“字”，而每一个英文字母也被当作一个“字”。
</pre>
</body>
</html>

词间距：word-spacing

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></title>
    <style type="text/css">
        #p1{word-spacing:0px;}
        #p2{word-spacing:3px;}
        #p3{word-spacing:5px;}
    </style>
</head>
<body>
<p id="p1">Rome was't built in a day.罗马不是一天建成的。</p><hr/>
<p id="p2">Rome was't built in a day.罗马不是一天建成的。</p><hr/>
<p id="p3">Rome was't built in a day.罗马不是一天建成的。</p>

<hr/>
<pre>
    word-spacing，从英文意思上就可以知道这是“单词间距”。
    一般来说，word-spacing只针对英文单词而言。
    
    在实际开发中，对于中文网页来说，我们很少去定义字间距以及词间距。
    letter-spacing和word-spacing只会用于英文网页，平常几乎用不上，因此只需简单了解即可。
</pre>
</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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>

    <style type="text/css">
        p {
            font-size: 14px;
            text-indent: 28px;
            text-transform: uppercase;
        }

        span {
            font-weight: bold;
            text-decoration: underline;
        }
    </style>
</head>
<body>
<p>很多人都喜欢用战术上的勤奋来掩盖战略上的懒惰，事实上这种“<span>低水平的勤奋</span>”远远比懒惰可怕。</p>
<p>Remember: no pain,no gain！</p>
</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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>

    <style type="text/css">
        #div1 {
            width: 100px; /*div元素宽为100px*/
            height: 60px; /*div元素高为60px*/
            border-top: 2px solid red; /*上边框样式*/
            border-right: 2px solid yellow; /*右边框样式*/
            border-bottom: 2px solid blue; /*下边框样式*/
            border-left: 2px solid green; /*左边框样式*/
        }

        #div2 {
            width: 100px; /*div元素宽为100px*/
            height: 60px; /*div元素高为100px*/
            border: 1px solid red; /*边框整体样式*/
            border-bottom: 0px; /*去除下边框*/
        }
    </style>
</head>
<body>

<hr/>

<div id="div1"></div>

<hr/>

<div id="div2"></div>

<hr/>

<pre>
    在浏览网页的过程中，边框样式随处可见。
    几乎所有的元素都可以定义边框。例如，
        - div元素可以定义边框，
        - img元素可以定义边框，
        - table元素可以定义边框，
        - span元素同样也可以定义边框
    
    边框的宽度。
    边框的外观（实线、虚线等）。
    边框的颜色。
    
    border-width 边框宽度
        取值是一个像素值。
    border-style 边框外观
        none 无样式、dashed 虚线、solid 实线
    border-color 边框颜色
        取值可以是“关键字”或“十六进制RGB值”。
    想要为一个元素定义边框样式，必须要同时设置border-width、border-style、border-color这3个属性才会有效果。
    
    
15.2.2 简写形式
    border:1px solid red;
    
    上面的代码其实等价于下面的代码。
    
    border-width:1px;
    border-style:solid;
    border-color:red;

15.3 上下左右样式
    1．上边框      border-top:1px solid red;
       也可写作：
        border-top-width:1px;
        border-top-style:solid;
        border-top-color:red;
            
    2．下边框      border-bottom:1px solid red;
    
    3．左边框      border-left:1px solid red;
    
    4．右边框      border-right:1px solid red;
    

去除下边框
    border:1px solid red; /*边框整体样式*/
    border-bottom:0px; /*去除下边框*/
    
    “border-bottom:0px;”是把下边框宽度设置为0px。由于此时下边框没有宽度，因此下边框就被去除了。
    小伙伴可能会觉得很奇怪：“只设置边框的宽度为0px，那么边框的外观和颜色不需要设置了吗？”
    实际上这是一种省略写法，既然我们都不需要那条边框了，也就不再需要设置边框的外观和颜色。
    
    此外，“border-bottom:0px;”   “border-bottom:0;”  和  “border-bottom:none;”  是等价的。
</pre>


</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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>

<h1>16.1 列表项符号：list-style-type</h1>
<pre>
    在CSS中，不管是有序列表还是无序列表，我们都是使用list-style-type属性来定义列表项符号的。
    
    list-style-type属性是针对ol或者ul元素的，而不是li元素。
    
    有序列表
        decimal       1 2 3 ...（默认）
        lower-roman   ⅰ ⅱ ⅲ ...
        upper-roman   Ⅰ Ⅱ Ⅲ ...
        lower-alpha   a b c ...
        upper-alpha   A B C ...
    无序列表
        disc    实心圆（默认）
        circle  空心圆
        square  实心正方形
    
16.1.2 去除列表项符号
    由于列表项符号不太美观，因此在实际开发中，大多数情况下我们都需要使用“list-style-type:none;”将其去掉。

list-style-type有那么多的属性值，怎么记得住呢？
    我们只需要记住“list-style-type:none;”这一个就可以了，其他的不需要记住。
    因为在实际开发中，对于使用list-style-type属性来定义列表项符号，几乎用不上。所以那些属性值也不需要去记忆。
    退一步说，就算用得上，编程工具也有提示。
</pre>

<h1>16.2 列表项图片：list-style-image</h1>
<pre>
    不管是有序列表还是无序列表，都有它们自身的列表项符号。不过这些列表项符号都不太美观。
    
    如果我们想自定义列表项符号，那该怎么实现呢？
    在CSS中，我们可以使用list-style-image属性来定义列表项图片，也就是使用图片来代替列表项符号。
    
    语法      list-style-image:url（图片路径）;
    
    例如：    ul{list-style-image: url（img/leaf.png）;}
    
彩色列表项
    list-style-image属性实际上就是把列表项符号替换成一张图片，而引用一张图片就要给出图片的路径。
    在真正的开发项目中，多种颜色的图片列表项符号，一般情况下我们都不会用list-style-image属性来实现，而是使用更为高级的iconfont图标技术来实现，这个我们在本系列的《从0到1：CSS进阶之旅》这本书中再详细介绍。
</pre>
</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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    
    <style>
        div{
            width: 150px;
            height: 150px;
            border: 1px dashed gray;
        }
        ul{
            list-style-type: none;
        }
        a{
            text-decoration: none;
            color: fuchsia;
        }
    </style>
</head>
<body>

<div>
    <ul>
        <li><a href="1" target="_blank">Top1：百度</a></li>
        <li><a href="1" target="_blank">Top2：淘宝</a></li>
        <li><a href="1" target="_blank">Top3：新浪</a></li>
        <li><a href="1" target="_blank">Top4：网易</a></li>
        <li><a href="1" target="_blank">Top5：搜狐</a></li>
    </ul>
</div>

</body>
</html>

表格标题位置：caption-side

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        table,th,td{border:1px solid silver;}
        table{caption-side:bottom;}
    </style>
</head>
<body>
<pre>
caption-side属性取值只有2个
    top     标题在顶部（默认）
    bottom  标题在底部

如果想要定义表格标题的位置，在table或caption这两个元素的CSS中定义caption-side属性，效果是一样的。
一般情况下，我们只在table元素中定义就可以了。
</pre>

<hr/>
<table>
    <caption>表格标题</caption>
    <!--表头-->
    <thead>
    <tr>
        <th>表头单元格1</th>
        <th>表头单元格2</th>
    </tr>
    </thead>
    <!--表身-->
    <tbody>
    <tr>
        <td>表行单元格1</td>
        <td>表行单元格2</td>
    </tr>
    <tr>
        <td>表行单元格3</td>
        <td>表行单元格4</td>
    </tr>
    </tbody>
    <!--表脚-->
    <tfoot>
    <tr>
        <td>表行单元格5</td>
        <td>表行单元格6</td>
    </tr>
    </tfoot>
</table>
</body>
</html>

表格边框合并：border-collapse

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        table,th,td{border:1px solid silver;}
        table{border-collapse: collapse;}
    </style>
</head>
<body>
<pre>
在CSS中，我们可以使用border-collapse属性来去除单元格之间的空隙，也就是将两条边框合并为一条。

border-collapse属性取值只有2个
    separate     边框分开，有空隙（默认）   separate指的是“分离”
    collapse     边框合并，无空隙           collapse指的是“折叠、瓦解”

在CSS中，border-collapse属性也是在table元素中定义的。
</pre>

<hr/>

<table>
    <caption>表格标题</caption>
    <!--表头-->
    <thead>
    <tr>
        <th>表头单元格1</th>
        <th>表头单元格2</th>
    </tr>
    </thead>
    <!--表身-->
    <tbody>
    <tr>
        <td>表行单元格1</td>
        <td>表行单元格2</td>
    </tr>
    <tr>
        <td>表行单元格3</td>
        <td>表行单元格4</td>
    </tr>
    </tbody>
    <!--表脚-->
    <tfoot>
    <tr>
        <td>表行单元格5</td>
        <td>表行单元格6</td>
    </tr>
    </tfoot>
</table>
</body>
</html>

表格边框间距：border-spacing

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        table,th,td{border:1px solid silver;}
        table{border-spacing: 8px;}
    </style>
</head>
<body>
<pre>
在CSS中，我们可以使用border-spacing属性来定义表格边框间距。

在CSS中，border-spacing属性也是在table元素中定义的。
</pre>

<hr/>

<table>
    <caption>表格标题</caption>
    <!--表头-->
    <thead>
    <tr>
        <th>表头单元格1</th>
        <th>表头单元格2</th>
    </tr>
    </thead>
    <!--表身-->
    <tbody>
    <tr>
        <td>表行单元格1</td>
        <td>表行单元格2</td>
    </tr>
    <tr>
        <td>表行单元格3</td>
        <td>表行单元格4</td>
    </tr>
    </tbody>
    <!--表脚-->
    <tfoot>
    <tr>
        <td>表行单元格5</td>
        <td>表行单元格6</td>
    </tr>
    </tfoot>
</table>
</body>
</html>

图片大小 width height

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>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        #img2 {
            width: 60px;
            height: 60px;
        }
    </style>
</head>
<body>
<pre>
    在前面的学习中，我们接触了width和height这两个属性。其中width属性用于定义元素的宽度，height属性用于定义元素的高度。
    在CSS中，我们也是使用width和height这两个属性来定义图片大小的（也就是宽度和高度）。
    
    在实际开发中，你需要多大的图片，就用Photoshop制作多大的图片。
    不建议使用一张大图片，然后再借助width和height来改变其大小。
    因为一张大图片体积更大，会使页面加载速度变慢。这是性能优化方面的考虑，以后我们会慢慢接触。    
</pre>
<hr>

<img src="img/聊天结束.png" alt="聊天结束"/><br/>
<img id="img2" src="img/聊天结束.png" alt="聊天结束"/>
</body>
</html>

图片边框 border

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        img {
            border: 1px solid red;
        }
    </style>
</head>
<body>
<pre>
    对于图片的边框，我们也是使用border属性来定义的。
</pre>
<hr>

<img src="img/聊天结束.png" alt="聊天结束"/><br/>
</body>
</html>

图片水平对齐 text-align

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:300px;
            height:80px;
            border:1px solid silver;
        }
        .div1{text-align:left;}
        .div2{text-align:center;}
        .div3{text-align:right;}
        img{width:60px;height:60px;}
    </style>
</head>
<body>
<pre>
text-align属性取值有3个
    left   左对齐（默认）
    center 居中
    right  右对齐
    
text-align属性一般只用于两个地方：文本水平对齐和图片水平对齐。
    
很多人以为图片的水平对齐是在img元素中定义的，其实这是错的。图片是在父元素中进行水平对齐，因此我们应该在图片的父元素中定义。
在这个例子中，img的父元素是div，因此想要实现图片的水平对齐，就应该在div中定义text-align属性。
</pre>
<hr/>

<div class="div1">
    <img src="img/聊天结束.png" alt=""/>
</div>
<div class="div2">
    <img src=" img/聊天结束.png" alt=""/>
</div>
<div class="div3">
    <img src=" img/聊天结束.png" alt=""/>
</div>
</body>
</html>

图片垂直对齐 vertical-align

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        img{width:60px;height:60px;border: 1px solid black;}
        #img1{vertical-align:top;}
        #img2{vertical-align:middle;}
        #img3{vertical-align:baseline;}
        #img4{vertical-align:bottom;}
    </style>
</head>
<body>
<pre>
在CSS中，我们可以使用vertical-align属性来定义图片的垂直对齐方式。

vertical-align属性取值有4个
    top      顶部对齐
    middle   居中
    bottom   底部对齐
    baseline 基线对齐
    
    ![顶线 中线 基线 底线](https://img-blog.csdnimg.cn/0c8b512b86fa464dbef6159d98ab98df.png)
    
    注意一下，基线并不是行盒子中最下面的线，而是倒数第二条线。

vertical指的是“垂直的”，align指的是“使排整齐”。
</pre>
<hr/>
绿叶学习网<img id="img1" src="img/聊天结束.png" alt=""/>绿叶学习网（top）
<hr/>
绿叶学习网<img id="img2" src="img/聊天结束.png" alt=""/>绿叶学习网（middle）
<hr/>
绿叶学习网<img id="img3" src="img/聊天结束.png" alt=""/>绿叶学习网（baseline）
<hr/>
绿叶学习网<img id="img4" src="img/聊天结束.png" alt=""/>绿叶学习网（bottom）
<hr/>

图片垂直对齐问题

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div {width:100px;height:80px;border:1px solid silver;}
        .div1{vertical-align:top;}
        .div2{vertical-align:middle;}
        .div3{vertical-align:bottom;}
        .div4{vertical-align:baseline;}
        img{width:60px;height:60px;}
    </style>
</head>
<body>
<pre>
    咦，怎么回事？为什么图片没有垂直对齐？
    
    其实，大家误解了vertical-align这个属性。
    W3C（Web标准制定者）对vertical-align属性的定义是极其复杂的，其中有一项是“vertical-align属性定义周围的行内元素或文本相对于该元素的垂直方式”。
    
    毫不夸张地说，vertical-align是CSS最复杂的一个属性，但功能也非常强大。
    在CSS入门阶段，我们简单看一下就行。对于更高级的技术，我们在本系列的《从0到1：CSS进阶之旅》这本书中再详细介绍。
</pre>
<div class="div1">
    <img src="img/聊天结束.png" alt=""/>
</div>
<div class="div2">
    <img src="img/聊天结束.png" alt=""/>
</div>
<div class="div3">
    <img src="img/聊天结束.png" alt=""/>
</div>
<div class="div4">
    <img src="img/聊天结束.png" alt=""/>
</div>
</body>
</html>

文字环绕：float

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        img{float:left;width: 30px;height: 30px;}
        /*img{float:right;width: 30px;height: 30px;}*/
        p{
            font-family:"微软雅黑";
            font-size:12px;
        }
    </style>
</head>
<body>
<pre>
    在网页布局中，常常遇到图文混排的情况。所谓的图文混排，指的是文字环绕着图片进行布局。
    文字环绕图片的方式在实际页面中的应用非常广泛，如果配合内容、背景等多种手段可以实现各种绚丽的效果。
    
    在CSS中，我们可以使用float属性来实现文字环绕图片的效果。    
    float属性取值只有2个
        left  元素向左浮动
        right 元素向右浮动
</pre>
<hr>

<img src="img/聊天结束.png" alt=""/>
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。</p>
</body>
</html>

背景样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
<pre>
    在CSS中，背景样式包括两个方面：一个是“背景样色”，另外一个是“背景图片”。
    在Web 1.0时代，一般都是使用background或者bgcolor这两个“HTML属性”（不是CSS属性）来为元素定义背景颜色或背景图片的。
    不过在Web 2.0时代，对于元素的背景样式，我们都是使用CSS属性来实现的。
    
    在CSS中，定义“背景颜色”使用的是background-color属性，而定义“背景图片”则比较复杂，
        background-image       背景图片地址
        background-repeat      背景图片重复，如横向重复、纵向重复
        background-position    背景图片位置
        background-attachment  背景图片固定
</pre>
</body>
</html>

背景颜色：background-color

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div {
            width:100px;
            height:60px;
        }
        #div1{background-color: hotpink}
        #div2{background-color: #87CEFA;}

        p {
            color:white;
            background-color: hotpink;
        }
    </style>
</head>
<body>
<pre>
    颜色值有两种，
        一种是“关键字”，指的是颜色的英文名称，如red、green、blue等。
        另外一种是“十六进制RGB值”，指的是类似“#FBE9D0”形式的值。
    
    除了这两种，其实还有RGBA、HSL等，不过那些我们暂时不用去了解。
    
    color属性用于定义“文本颜色”，而background-color属性用于定义“背景颜色”，这两个要注意区分。
</pre>
<hr>

<div id="div1">背景颜色为：hotpink</div>
<div id="div2">背景颜色为：#87CEFA</div>

<hr>

<p>
    p元素文本颜色为white<br/>
    p元素背景颜色为hotpink
</p>
</body>
</html>

背景图片样式：background-image

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style type="text/css">
        /*这是因为我们没有给div元素定义width和height，此时div元素的宽度和高度都为0，因此背景图片是不会显示的。*/
        /*div{background-image: url(img/聊天结束.png);}*/

        div
        {
            /*只会显示一个手雷*/
            /*width:60px;height:60px;*/

            /*会显示很多重复*/
            width:600px;height:600px;


            /*可以加双引号，也可以不加*/
            /*background-image: url(img/聊天结束.png);*/
            background-image: url("img/聊天结束.png");

            /*2023-06-16 07:45:18 再试背景图片 gif*/
            /*width:6000px;height:6000px;*/
            /*background-image: url("tmp/tits-shaking-animated-gif.gif");*/
            /*background-image: url("tmp/danai2695.gif");*/
        }
    </style>
    <title></title>
</head>
<body>
<div></div>

<hr>
<pre>
    可以加双引号，也可以不加
    background-image: url(img/聊天结束.png);
    background-image: url("img/聊天结束.png");
    
    怎么回事，为什么背景图片没有显示出来？
    这是因为我们没有给div元素定义width和height，此时div元素的宽度和高度都为0，因此背景图片是不会显示的。
    
    
</pre>
</body>
</html>

背景图片重复：background-repeat

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:200px;
            height:100px;
            border: 1px solid silver;
            background-image: url(img/小叶子.png);
        }
        #div2{background-repeat: repeat-x}
        #div3{background-repeat: repeat-y}
        #div4{background-repeat: no-repeat}
    </style>
</head>
<body>
<pre>
background-repeat属性取值有4个
    repeat     水平方向和垂直方向同时平铺（默认）
    repeat-x   水平方向平铺（x轴）
    repeat-y   垂直方向平铺（y轴）
    no-repeat  不平铺

此外还需要注意一点，元素的宽度和高度必须大于背景图片的宽度和高度，这样才会有重复效果。
</pre>
<hr>

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>

背景图片位置：background-position

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:500px;
            height:500px;
            border:1px solid silver;
            background-image:url(img/仓鼠.jpg);
            background-repeat:no-repeat;
            /*background-position:80px 20px;*/
            background-position:center right;
        }
    </style>
</head>
<body>
<pre>
    background-position属性常用取值有两种：
        一种是“像素值”，
        另外一种是“关键字”（这里不考虑百分比取值）。
    
    background-position属性设置的两个值是相对该元素的左上角来说的，我们从上图就可以很直观地看出来。
    
    background-position关键字取值
        top left      左上
        top center    靠上居中
        top right     右上
        left center   靠左居中
        center center 正中
        right center  靠右居中
        bottom left   左下
        bottom center 靠下居中
        bottom right  右下
    
    在实际开发中，background-position一般用于实现CSS Spirit（精灵图片）。
    对于CSS Spirit技术，我们在本系列的《从0到1：CSS进阶》这本书中再深入介绍。
</pre>
<hr>

<div></div>
</body>
</html>

背景图片固定：background-attachment

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:500px;
            height:1200px;
            border:1px solid silver;
            background-image:url(img/仓鼠.jpg);
            background-repeat:no-repeat;
            background-attachment:fixed;
        }
    </style>
</head>
<body>
<pre>
background-attachment属性取值只有2个    
    scroll 随元素一起滚动（默认）
    fixed  固定不动

    我们在本地浏览器中拖动右边的滚动条，可以发现，背景图片在页面固定不动了。
    如果把“background-attachment:fixed；”这一行代码去掉，背景图片就会随着元素一起滚动。
    
    在实际开发中，background-attachment这个属性几乎用不上，这里看一下就行。
</pre>
<hr>

<div></div>
</body>
</html>

背景样式 练习

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    
    <style type="text/css">
        body{
            background-image: url("img/仓鼠.jpg");
        }
    </style>
</head>
<body>
</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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    
    <style type="text/css">
        a{text-decoration:none;}/*去掉超链接默认样式中的下划线*/
        a:link{color:red;}/*未访问*/
        a:visited{color:purple;}/*访问后*/
        a:hover{color:yellow;}/*经过*/
        a:active{color:blue;}/*单击*/
    </style>
</head>
<body>
<pre>
    超链接在鼠标单击的不同时期的样式是不一样的。
        默认情况下：字体为蓝色，带有下划线。
        鼠标单击时：字体为红色，带有下划线。
        鼠标单击后：字体为紫色，带有下划线。
    
    在CSS中，我们可以使用“超链接伪类”来定义超链接在鼠标单击的不同时期的样式。
        a:link      超链接未访问的样式
        a:visited   超链接访问后的样式
        a:hover     鼠标经过超链接时的样式
        a:active    鼠标单击激活时的样式
    
    在实际开发中，我们只会用到两种状态：a:link 未访问时状态   和  a:hover 鼠标经过状态。
    
    为什么我的浏览器中的超链接是紫色的呢？用color属性重新定义也无效，这是怎么回事？
    如果某一个地址的超链接之前被单击过，浏览器就会记下你的访问记录。
    那么下次你再用这个已经访问过的地址作为超链接地址时，它就是紫色的了。小伙伴们换一个地址就可以了。
</pre>
<hr>

<a href="http://www.lvyestudy.com" target="_blank">绿叶学习网</a>

</body>
</html>

深入了解hover

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div {
            width:100px;
            height:30px;
            line-height:30px;
            text-align:center;
            color:white;
            background-color: lightskyblue;
        }
        div:hover {
            background-color: hotpink;
        }
        img:hover {
            border:2px solid red;
        }
    </style>
</head>
<body>
<pre>
    不仅是初学者，很多接触CSS很久的小伙伴都会以为“:hover”伪类只限用于a元素，都觉得它唯一的作用就是定义鼠标经过超链接时的样式。
    
    要是你这样想，那就埋没了一个功能非常强大的CSS技巧了。
    事实上，“:hover”伪类可以定义任何一个元素在鼠标经过时的样式。
    注意，是任何元素。
    
    
    语法     元素:hover{…}
    
    在这个例子中，我们使用“:hover”为div元素定义鼠标经过时就改变背景色。
    
    在这个例子中，我们使用“:hover”为img元素定义鼠标经过时就为其添加一个边框。
    要知道，“:hover伪类”应用非常广泛，任何一个网站都会大量地用到，我们要好好掌握。    
</pre>
<hr>

<div>绿叶学习网</div>
<img src="img/聊天结束.png" alt="">
</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>
<head>
    <meta charset="utf-8" />
    <style type="text/css">
        div
        {
            width:100px;
            height:30px;
            line-height:30px;
            text-align:center;
            background-color: hotpink;
            color:white;
            font-size:14px;
        }
        #div1_default{cursor:default;}
        #div1_pointer{cursor:pointer;}
        
        #div2_default{cursor:url(img/聊天结束.png),default;}
        #div2_pointer{cursor:url(img/小叶子.png),pointer;}
    </style>
</head>
<body>
<pre>
20.3.1 浏览器鼠标样式
    语法   cursor:取值;
    default 箭头（默认）
    pointer 小手
    text    文本输入
    
20.3.2 自定义鼠标样式
    语法   cursor:url(图片地址),属性值;
    
    这个“图片地址”是鼠标图片地址，其中鼠标图片后缀名一般都是“.cur”
    这个“属性值”一般只会用到3个，分别是default、pointer和text。
    
    使用自定义鼠标样式可以打造更有个性的个人网站，不仅美观大方，而且能更好地匹配网站的风格。
</pre>
<hr>
<div id="div1_default">鼠标默认样式</div>
<hr>
<div id="div1_pointer">鼠标手状样式</div>

<hr>

<div id="div2_default">鼠标默认样式</div>
<hr>
<div id="div2_pointer">鼠标手状样式</div>
</body>
</html>

超链接样式 练习

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style type="text/css">
        a{
            text-decoration: none;
            color: red;
        }
        a:hover{
            text-decoration: underline;
            color: blue;
        }
    </style>
</head>
<body>

<a href="#">得分你们跟不上的计划表估计灰度发布</a>

</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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div{
            display:inline-block; /*将块元素转换为inline-block元素*/
            padding:20px;
            margin:40px;
            border:2px solid red;
            background-color:#FFDEAD;
        }
    </style>
</head>
<body>

<hr>
<div>绿叶学习网</div>
<hr>
<pre>
    在这个例子中，如果我们把div元素看成是一个盒子，则“绿叶学习网”这几个字就是内容区（content），
    文字到边框的距离就是内边距（padding），而边框到其他元素的距离就是（margin）。
    
    padding在元素内部，而margin在元素外部。
    
    margin看起来不属于div元素的一部分，但实际上div元素的盒子模型是包含margin的。
    
    在这个例子中，“display:inline-block”表示将元素转换为行内块元素（即inline-block），其中inline-block元素的宽度是由内容区撑起来的。
    我们之所以在这个例子中将元素转换为inline-block元素，也是为了让元素的宽度由内容区撑起来，以便更好地观察。
    不过display是一个非常复杂的属性，我们在本系列的《从0到1：CSS进阶之旅》这本书中再详细介绍。
</pre>

<hr>
<pre>
    在HTML中，我们学习了一个很重要的理论：块元素和行内元素。
    在这一节中，我们介绍CSS中极其重要的一个理论————CSS盒子模型。
    
    在“CSS盒子模型”理论中，页面中的所有元素都可以看成一个盒子，并且占据着一定的页面空间。
    一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两个方面来理解：
        一是理解单独一个盒子的内部结构（往往是padding），
        二是理解多个盒子之间的相互关系（往往是margin）。
    
    可以把每个元素都看成一个盒子，盒子模型是由4个属性组成的：content（内容）、padding（内边距）、margin（外边距）和border（边框）。
    此外，在盒子模型中，还有宽度（width）和高度（height）两大辅助性属性。
    
    ===> 记住，所有的元素都可以看成一个盒子。<===
    
    
    1．content   内容，可以是文本或图片
        容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。
        内容区是盒子模型必备的组成部分，其他3个部分都是可选的。
    
        内容区有3个属性：width、height和overflow。（width宽度 height高度 overflow溢出处理）
        在这里注意一点，width和height这两个属性是针对内容区content而言的，并不包括padding部分。
        当内容过多，超出width和height时，可以使用overflow属性来指定溢出处理方式。
    
    2. padding   内边距，用于定义内容与边框之间的距离
        padding-top、padding-bottom、padding-left、padding-right，padding
        
        内边距，指的是内容区和边框之间的空间，可以看成是内容区的背景区域。
    
    3. margin    外边距，用于定于当前元素与其他元素之间的距离
        margin-top、margin-bottom、margin-left、margin-right，margin
    
        外边距，指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。
        外边距使得元素之间不必紧凑地连接在一起，是CSS布局的一个重要手段。
    
        同时，CSS允许给外边距属性指定负数值。
        当外边距为负值时，整个盒子将向指定负值的相反方向移动，以此产生盒子的重叠效果，这就是传说中的“负margin技术”。
    
    4. border    边框，用于定义元素的边框
        在CSS盒子模型中，边框与我们之前学过的边框是一样的。
        边框属性有border-width、border-style、border-color，以及综合了3类属性的简写边框属性border。
</pre>

</body>
</html>

宽高：width、height

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
69
70
71
72
73
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #div0,#span0 {width:100px;height:50px;}
        #div0{border:1px solid red;}
        #span0{border:1px solid blue;}

        #div1 {width:100px;height:40px;border:1px solid red;}
        #div2 {width:100px;height:80px;border:1px solid blue;}

        #span1 {width:100px;height:40px;border:1px solid red;}
        #span2 {width:100px;height:80px;border:1px solid blue;}
    </style>
</head>
<body>

<pre>
    元素的宽度（width）和高度（height）是针对内容区而言的。
    
    只有块元素才可以设置width和height，行内元素是无法设置width和height的。（我们这里不考虑inline-block元素）
    
    举例1：行内元素（无内容）设置width和height
        div是块元素，因此可以设置width和height。
        span是行内元素，因此不可以设置width和height。
    
    举例2：块元素设置width和height
        块元素设置的width和height可以生效。
        此外，要是没有给块元素设置width，那么块元素就会延伸到一整行，这一点相信大家都了解了。
    
    举例3：行内元素（有内容）设置width和height
        行内元素设置的width和height无法生效，它的宽度和高度只能由内容区撑起来。
    
    如果我们要为行内元素（如span）设置宽度和高度，那该怎么办呢？
    在CSS中，我们可以使用display属性来将行内元素转换为块元素，也可以将块元素转换为行内元素。
    对于display属性，我们在本系列的《从0到1：CSS进阶之旅》这本书中再详细介绍。
    
    【日期标记】2023-06-07 18:42:07 以上同步完成
</pre>

<hr>
<h3>举例1：行内元素（无内容）设置width和height</h3>
<div id="div0"></div>
<span id="span0"></span>
<pre>
    div是块元素，因此可以设置width和height。
    span是行内元素，因此不可以设置width和height。
</pre>
<hr>

<hr>
<h3>举例2：块元素设置width和height</h3>
<div id="div1">绿叶学习网</div>
<div id="div2">绿叶学习网</div>
<pre>
    从这个例子可以很直观地看出来，块元素设置的width和height可以生效。
    此外，要是没有给块元素设置width，那么块元素就会延伸到一整行，这一点相信大家都了解了。
</pre>
<hr>

<hr>
<h3>举例3：行内元素（有内容）设置width和height</h3>
<span id="span1">绿叶学习网</span>
<span id="span2">绿叶学习网 啊啊啊啊啊啊啊啊啊啊</span>
<pre>
    从这个例子可以很直观地看出来，行内元素设置的width和height无法生效，它的宽度和高度只能由内容区撑起来。
</pre>
<hr>

</body>
</html>

边框：border

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>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:100px;
            height:80px;
            border: 2px dashed red;
        }
    </style>
</head>
<body>

<hr>
<div></div>
<hr>

<pre>
    第1个值指的是边框宽度（border-width），
    第2个值指的是边框外观（border-style），
    第3个值指的是边框颜色（border-color）。
</pre>
</body>
</html>

内边距：padding

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #div1 {
            display:inline-block; /*将块元素转换为inline-block元素*/
            padding-top:20px;
            padding-right:40px;
            padding-bottom:60px;
            padding-left:80px;
            /*上面可简写*/
            /*padding: 20px 40px 60px 80px;*/
            border:2px solid red;
            background-color:#FFDEAD;
        }

        #div2 {
            display:inline-block; /*将块元素转换为inline-block元素*/
            padding:40px 80px;
            margin:40px;
            border:2px solid red;
            background-color:#FFDEAD;
        }
    </style>
</head>
<body>

<hr>
<div id="div1">绿叶学习网</div>
<hr>

<hr>
<div id="div2">绿叶学习网</div>
<pre>
    如果要让文本在一个元素内部居中，可以使用padding来实现，就像这个例子一样。
</pre>
<hr>

<pre>
内边距padding，又常常被称为“补白”，它指的是内容区到边框之间的那一部分。内边距都是在边框内部的，

之前【盒子模型】有说，这里在把这段话放在这里。
    在这个例子中，“display:inline-block”表示将元素转换为行内块元素（即inline-block），其中inline-block元素的宽度是由内容区撑起来的。
    我们之所以在这个例子中将元素转换为inline-block元素，也是为了让元素的宽度由内容区撑起来，以便更好地观察。
    
语法
    padding-top:上;
    padding-right:右;
    padding-bottom:下;
    padding-left:左;
    
    padding:上下左右;
    padding:上下 左右;
    padding:上 右 下 左;
</pre>
</body>
</html>

外边距：margin

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
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .father {
            display: inline-block; /*将块元素转换为inline-block元素*/
            border:1px solid blue;
        }

        .brother {
            height:50px;
            background-color:lightskyblue;
        }
        
        .son {
            display:inline-block; /*将块元素转换为inline-block元素*/
            padding:20px;
            margin-top:20px;
            margin-right:40px;
            margin-bottom:60px;
            margin-left:80px;
            /*上面可简写*/
            /*margin: 20px 40px 60px 80px;*/
            border:1px solid red;
            background-color:#FFDEAD;
        }
    </style>
</head>
<body>

<hr>
<h1>举例1：只有父元素，没有兄弟元素时</h1>
<div class="father">
    <div class="son">绿叶学习网</div>
</div>
<pre>
    当只有父元素时，该元素设置的margin就是相对于父元素之间的距离。
</pre>
<hr>

<hr>
<h1>举例2：有兄弟元素时</h1>
<div class="father">
    <div class="brother"></div>
    <div class="son">绿叶学习网</div>
    <div class="brother"></div>
</div>
<pre>
    当既有父元素，又有兄弟元素时，该元素会先看看4个方向有没有兄弟元素存在。
        如果该方向有兄弟元素，则这个方向的margin就是相对于兄弟元素而言；
        如果该方向没有兄弟元素，则这个方向的margin就是相对于父元素而言。
    
    padding和margin的区别在于，
        padding体现的是元素的“内部结构”，
        而margin体现的是元素之间的相互关系。
</pre>
<hr>

<pre>
    外边距margin，指的是边框到“父元素”或“兄弟元素”之间的那一部分。外边距是在元素边框的外部的，
    
语法
    margin-top:上;
    margin-right:右;
    margin-bottom:下;
    margin-left:左;
    
    margin:上下左右;
    margin:上下 左右;
    margin:上 右 下 左;
</pre>
</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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
<pre>
    在学习浮动布局和定位布局之前，我们先来了解“正常文档流”和“脱离文档流”。
    深入了解这两个概念，是学习浮动布局和定位布局的理论前提。
    
22.1.1 正常文档流
    什么叫“文档流”？
        简单地说，就是指元素在页面中出现的先后顺序。
    
    那什么叫“正常文档流”呢？
        正常文档流，又称为“普通文档流”或“普通流”，也就是W3C标准所说的“normal flow”。
        我们先来看一下正常文档流的简单定义：“正常文档流，将一个页面从上到下分为一行一行，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。”
        也就是说，正常文档流指的就是默认情况下页面元素的布局情况。
    
    举例
        <!--
            <div></div>
            <span></span><span></span>
            <p></p>
            <span></span><i></i>
            <img />
            <hr />
        -->
        由于div、p、hr都是块元素，因此独占一行。
        而span、i、img都是行内元素，因此如果两个行内元素相邻，就会位于同一行，并且从左到右排列。

22.1.2 脱离文档流
    脱离文档流，指的是脱离正常文档流。
    正常文档流就是我们没有使用浮动或者定位去改变的默认情况下的HTML文档结构。
    换一句话说，如果我们想要改变正常文档流，可以使用两种方法：浮动和定位。
</pre>
</body>
</html>

浮动 float

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*定义父元素样式*/
        .father {
            width:300px;
            background-color:#0C6A9D;
            border:1px solid red;
        }
        /*定义子元素样式*/
        .father div {
            padding:10px;
            margin:15px;
        }
        .box1 {
            background-color:hotpink;
        }
        .box2 {
            background-color:#FCD568;
        }
    </style>
</head>
<body>

<hr>
<h1>0．box1 box2 都不浮动</h1>
<div class="father">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</div>
<pre>
    在这个代码中，定义了3个div块：一个是父块，另外两个是它的子块。
    为了便于观察，我们为每一个块都加上了背景颜色，并且在块与块之间加上一定的外边距。
    
    从上图可以看出，如果两个子块都没有设置浮动，由于div是块元素，因此会各自向右延伸，并且自上而下排列。
</pre>
<hr>

<hr>
<h1>1．仅 box1 左浮动</h1>
<div class="father">
    <div class="box1" style="float: left;">box1</div>
    <div class="box2">box2</div>
</div>
<pre>
    两行变一行
    
    由于box1设置为左浮动，box1变成了浮动元素，因此此时box1的宽度不再延伸，而是由内容宽度决定其宽度。
    接着相邻的下一个div元素（box2）就会紧贴着box1，这是由于浮动而形成的效果。
</pre>
<hr>

<hr>
<h1>2．box1 box2 都左浮动</h1>
<div class="father">
    <div class="box1" style="float: left;">box1</div>
    <div class="box2" style="float: left;">box2</div>
</div>
<pre>
    两个都变为小方块，并且父元素变为一条线
    
    由于box2变成了浮动元素，因此box2也和box1一样，宽度不再延伸，而是由内容确定宽度。
    如果box2后面还有其他元素，则其他元素也会紧贴着box2。
    
    细心的小伙伴估计看出来了，怎么父元素变成一条线了呢？
    其实这是浮动引起。至于怎么解决，我们在下一节会介绍。
</pre>
<hr>

<pre>
    我们都知道在正常文档流的情况下，块元素都是独占一行的。
    如果要让两个或者多个块元素并排在同一行，这个时候可以考虑使用浮动，将块元素脱离正常文档流来实现。
    
    浮动，可以使元素移到左边或者右边，并且允许后面的文字或元素环绕着它。
    浮动最常用于实现水平方向上的并排布局，如两列布局、多列布局。
    也就是说，如果你想要实现两列并排或者多列并排的效果，首先可以考虑的是使用浮动来实现。
</pre>

</body>
</html>

清除浮动 clear

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
69
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*定义父元素样式*/
        #father {
            width:300px;
            background-color:#0C6A9D;
            border:1px solid silver;
        }
        /*定义子元素样式*/
        #father div {
            padding:10px;
            margin:15px;
        }
        #son1 {
            background-color:hotpink;
            /*左浮动*/
            float:left;
        }
        #son2 {
            background-color:#FCD568;
            /*右浮动*/
            float:right;
        }
        .clear{clear:both;}
    </style>
</head>
<body>

<hr>
<div id="father">
    <div id="son1">box1</div>
    <div id="son2">box2</div>
    <div class="clear"></div>
</div>
<hr>

<pre>
    从上一节我们可以看到，浮动会影响周围元素，并且还会引发很多预想不到的问题。
    在CSS中，我们可以使用clear属性来清除浮动带来的影响。
    
语法
    clear:取值;
    
    left  清除左浮动
    right 清除右浮动
    both  清除左右浮动
    
    在实际开发中，我们几乎不会使用“clear:left”或“clear:right”来单独清除左浮动或右浮动，
    往往都是直截了当地使用“clear:both”来把所有浮动清除，既简单又省事。
    也就是说，我们只需要记住“clear:both”就可以了。
    
    我们一般都是在浮动元素后面再增加一个空元素，然后为这个空元素定义“clear:both”来清除浮动。
    在实际开发中，凡是用了浮动之后发现有不对劲的地方，首先应该检查有没有清除浮动。
    
    事实上，可以用来清除浮动的不仅仅只有“clear:both”，还有“overflow:hidden”，以及其他更为常用的伪元素。
    当然，这些都是后话了。作为初学者，我们只需要掌握clear:both就可以了。
    
    float属性很简单，只有3个属性：left、right和both。
    但是浮动涉及的理论知识极其复杂，其中包括块元素和行内元素、CSS盒子模型、脱离文档流、BFC、层叠上下文。
    如果一上来就介绍这些晦涩的概念，估计小伙伴们啥兴趣都没了。
    为了让大家有一个循序渐进的学习过程，我们把高级部分以及开发技巧放在了本系列的《从0到1：CSS进阶之旅》这本书中。
    如果小伙伴们希望把自己的水平提升到专业前端工程师的水平，一定要去认真学习。
</pre>
</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
55
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>

    <style type="text/css">
        #father {
            width: 800px;
            height: 600px;
            border: 2px solid gray;
            padding: 10px;
        }

        #div1 {
            background-color: hotpink;
            width: 595px;
            height: 380px;
            float: left;
            margin-bottom: 10px;
        }
        
        #div2 {
            background-color: hotpink;
            width: 195px;
            height: 380px;
            float: right;
            margin-bottom: 10px;
        }

        .brother1 {
            background-color: #0C6A9D;
            width: 800px;
            height: 100px;
            margin-bottom: 10px;
        }
        .brother2 {
            background-color: #0C6A9D;
            width: 800px;
            height: 100px;
            clear: both;
        }
    </style>

</head>
<body>

<div id="father">
    <div class="brother1"></div>
    <div id="div1"></div>
    <div id="div2"></div>
    <div class="brother2"></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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>

<pre>
    在此之前，我们学习了浮动布局。浮动布局比较灵活，但是不容易控制。
    而定位布局的出现，使得用户精准定位页面中的任意元素成为可能。
    
    当然了，由于定位布局缺乏灵活性，这给空间大小和位置不确定的版面布局带来困惑。
    因此在实际开发中，大家应该灵活使用这两种布局方式，这样才可以更好地满足开发需求。
    
    CSS定位使你可以将一个元素精确地放在页面上指定的地方。
    联合使用定位和浮动，能够创建多种高级而精确的布局。
    
    position属性取值
        fixed    固定定位
        relative 相对定位
        absolute 绝对定位
        static   静态定位（默认）
    
</pre>

</body>
</html>

固定定位 fixed

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #first
        {
            width:120px;
            height:1800px;
            border:1px solid gray;
            line-height:600px;
            background-color:#B7F1FF;
        }
        #second
        {
            position:fixed; /*设置元素为固定定位*/
            top:30px; /*距离浏览器顶部30px*/
            left:160px; /*距离浏览器左部160px*/
            
            width:60px;
            height:60px;
            border:1px solid silver;
            background-color:hotpink;
        }
    </style>
</head>
<body>
<div id="first">无定位的div元素</div>
<div id="second">固定定位的div元素</div>
<pre>
    在CSS中，我们可以使用“position:fixed;”来实现固定定位。
    所谓的固定定位，指的是被固定的元素不会随着滚动条的拖动而改变位
    
    “position:fixed;”是结合top、bottom、left和right这4个属性一起使用的。
    其中，先使用“position:fixed”让元素成为固定定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。
    
    我们尝试拖动浏览器的滚动条，其中，有固定定位的div元素不会有任何位置改变，但没有定位的div元素会发生位置改变。
    
    固定定位最常用于实现“回顶部特效”，这个效果非常经典。
</pre>
</body>
</html>

相对定位 relative

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        #father {
            margin-top: 30px;
            margin-left: 30px;
            border: 1px solid silver;
            background-color: lightskyblue;
        }

        #father div {
            width: 100px;
            height: 60px;
            margin: 10px;
            background-color: hotpink;
            color: white;
            border: 1px solid white;
        }

        #son2 {
            /*这里设置son2的定位方式*/
            position: relative;
            top: 20px;
            left: 40px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="son1">第1个无定位的div元素</div>
    <div id="son2">相对定位的div元素</div>
    <div id="son3">第2个无定位的div元素</div>
</div>

<hr>
<pre>
    在CSS中，我们可以使用“position:relative;”来实现相对定位。
    所谓的相对定位，指的是该元素的位置是相对于它的原始位置计算而来的。
    
    注意，在默认情况下，固定定位元素的位置是相对浏览器而言的，而相对定位元素的位置是相对于原始位置而言的。
    
    从这个例子可以看出，相对定位元素的top和left是相对于该元素的原始位置而言的，这一点和固定定位是不一样的。
</pre>
</body>
</html>

绝对定位 absolute

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        #father {
            padding: 15px;
            background-color: #0C6A9D;
            border: 1px solid silver;
            /*position: absolute;*/
            /*“position:absolute”会将元素转换为inline-block元素。*/
            /*=> 只要设置了position：absolute、 float中任意一个，都会让元素以display:inline-block的方式显示：可以设置长宽，默认宽度并不占满父元素。*/
        }

        #father div {
            padding: 10px;
        }

        #son1 {
            background-color: #FCD568;
        }

        #son2 {
            background-color: hotpink;
            /*在这里添加son2的定位方式*/
            position: absolute;
            top: 20px;
            right: 40px;
        }

        #son3 {
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="son1">box1</div>
    <div id="son2">box2</div>
    <div id="son3">box3</div>
</div>

<hr>
<pre>
    在CSS中，我们可以使用“position:absolute;”来实现绝对定位。
    绝对定位在几种定位方式中使用最为广泛，因为它能够很精确地把元素定位到任意你想要的位置。
    
    一个元素变成了绝对定位元素，这个元素就完全脱离文档流了，
    绝对定位元素的前面或后面的元素会认为这个元素并不存在，此时这个元素浮于其他元素上面，已经完全独立出来了。
    
    默认情况下，【固定定位】和【绝对定位】的位置是相对于浏览器而言的，而【相对定位】的位置是相对于原始位置而言的。
</pre>
</body>
</html>

静态定位 static

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
<pre>
    在默认情况下，元素没有指定position属性时，这个元素就是静态定位的。
    也就是说，元素position属性的默认值是static。
    
    一般情况下，我们用不到“position:static”，不过在使用JavaScript来控制元素定位时，如果想要使元素从其他定位方式变成静态定位，就需要使用“position:static”来实现。
    
</pre>
</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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
<pre>

    如果你使用的是“从0到1”系列套书，那么下面是推荐的学习顺序。
    也可参考：http://www.lvyestudy.com/roadmap
    
    《从0到1：HTML+CSS快速上手》
        →《从0到1：CSS进阶之旅》
            →《从0到1：JavaScript快速上手》
                →《从0到1：jQuery快速上手》
                    →《从0到1：HTML5+CSS3修炼之道》
                        →《从0到1：HTML5 Canvas动画开发》
                            →未完待续。
    
    
    ![附录A HTML常用标签](https://img-blog.csdnimg.cn/52cac1900c2e4174930ce902e7891a89.png)
    ![附录B 常用表单标签](https://img-blog.csdnimg.cn/0357a8fd5e694008947ec31d645eeaf6.png)
    ![附录C CSS常用属性](https://img-blog.csdnimg.cn/1b838688b8ef410786cb775a355e6e8f.png)
    ![附录D W3C十六色](https://img-blog.csdnimg.cn/86f9919d499342638344753b5082741b.png)
    【日期标记】2023-06-08 10:18:32 以上同步完成
</pre>
</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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度一下，你就知道</title>

    <style type="text/css">
        body {
            /*background-color: gray;*/
        }

        #s-top-left {
            /*width: 442px;*/
            height: 60px;
            margin-left: 24px;
            /*background-color: #0C6A9D;*/
        }

        a {
            display: inline-block;
            height: 23px;
            text-decoration: none;
            color: #222222;
            font-family: Arial, sans-serif;
            font-size: 13px;
            margin-top: 19px;
            margin-right: 24px;
        }

        a:hover {
            color: blue;
        }

        img {
            position: absolute;
            top: 22%;
            left: 38%;
            width: 270px;
            height: 129px;
        }

        #middle {
            width: 546px;
            position: absolute;
            top: 35%;
            left: 35%;
        }

        #input {
            width: 400px;
            height: 25px;
        }

        #submit {
            width: 100px;
            background-color: #4e6ef2;
            color: white;
            font-size: 17px;
        }
    </style>
</head>
<body>

<span id="s-top-left">
    <a href="#">新闻</a>
    <a href="#">hao123</a>
    <a href="#">地图</a>
    <a href="#">贴吧</a>
    <a href="#">视频</a>
    <a href="#">图片</a>
    <a href="#">网盘</a>
    <a href="#">更多</a>
</span>

<img src="https://www.baidu.com/img/PCgkdoodle_293edff43c2957071d2f6bfa606993ac.gif" alt="">
<div id="middle">
    <input id="input" type="text">
    <input id="submit" type="submit" value="百度一下">
</div>

<!--
    2023-06-08 11:41:11 第一次写，我只能写成这样了。
-->

</body>
</html>