PythonNote01_HTML标签

》头标签<head>

　　》》位置

　　头标签要放在头部之间

　　》》种类

　　<title> : 指定整个网页的标题，在浏览器最上方显示。

　　<meta> : 提供有关页面的基本信息。

　　　　这个meta标签的意思是：3秒之后，自动跳转到百度页面。（记住）

 1    <head>
 2         <meta charset = "utf-8" />
 3         <!-- 翻译：指定编码格式为utf-8 -->
 4         <meta name="Keywords" content="" />
 5         <mata name = "description" content = "" />
 6         <!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
 7         <!-- 翻译：3秒之后自动跳转到百度首页 -->
 8         <title>重庆森林</title>
 9         <!-- 翻译：指定网页的标题，浏览器的上方显示 -->
10         
11     </head>

头标签

》body标签<body>

　　》》属性

　　bgcolor : 设置整个网页的背景颜色。

　　background : 设置整个网页的背景图片。

　　text : 设置网页中的文本颜色。

》排版标签

　　》》段落标签<p>

　　　　》》》格式

　　　　》》》PS

　　　　段落前后会自动空一行

　　　　输入段落内容后 --> ctrl + d --> shift + alt + w --> 自动添加段落标签

　　　　》》》属性

　　　　align : 对齐方式；属性值有：left、center、right；PS:默认是左对齐

 1 <!DOCTYPE>
 2 <html>
 3     <head>
 4         <meta charset = "utf-8" />
 5         <!-- 翻译：指定编码格式为utf-8 -->
 6         <meta name="Keywords" content="" />
 7         <mata name = "description" content = "" />
 8         <!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
 9         <!-- 翻译：3秒之后自动跳转到百度首页 -->
10         <title>重庆森林</title>
11         <!-- 翻译：指定网页的标题，浏览器的上方显示 -->
12     </head>
13     <body>
14 
15         <!-- 段落标签的align属性 -->
16         <p> 
17             这是第一段
18         </p>
19 
20         <p align="center">
21             这是第二段
22         </p>
23 
24         <p align="right">
25             这是第三段
26         </p>
27 
28     </body>
29 </html>

段落标签的align属性

　　》》换行标签<br>

　　当你打算结束一行，而又不想开始一个新段落时，<br>标签就派上用场了。无论你将它置于何处，<br>标签都会产生一个强制的换行。　　

　　　　》》》格式

　　　　<br />

 1 <!DOCTYPE>
 2 <html>
 3     <head>
 4         <meta charset = "utf-8" />
 5         <!-- 翻译：指定编码格式为utf-8 -->
 6         <meta name="Keywords" content="" />
 7         <mata name = "description" content = "" />
 8         <!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
 9         <!-- 翻译：3秒之后自动跳转到百度首页 -->
10         <title>重庆森林</title>
11         <!-- 翻译：指定网页的标题，浏览器的上方显示 -->
12     </head>
13     <body>
14 
15         <!-- 换行标签的使用 -->
16         <p> 
17             Donot aim for your success if you really want to seccess,
18             just stick to do what you love and believe.
19         </p>
20         <p>
21             Donot aim for your success if you really want to seccess,
22             <br /> <!-- 换行标签 -->
23             just stick to do what you love and believe.
24         </p>
25 
26     </body>
27 </html>

换行标签的使用

　　》》水平标签<hr>

　　水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。

　　　　》》》格式

　　　　<hr />

　　　　》》》PS

　　　　可以用在段落中，也可以用在段落间；用在段落中时相当于将这个段落的内容分割成了两个段落并且用水平线进行隔开

　　　　》》》属性

　　　　align : 设置线条放置的位置；属性值有：left、right、center

　　　　size : 设置线条的粗细（即：高度）

　　　　width : 设定线条的长度，可以是绝对值（即：一个具体的数字），也可以是相对值（即一个半分比，如：%70），默认为100%

　　　　color : 设置线条的颜色

　　　　noshade : 设置成不要阴影，默认是要阴影

 1 <!DOCTYPE>
 2 <html>
 3     <head>
 4         <meta charset = "utf-8" />
 5         <!-- 翻译：指定编码格式为utf-8 -->
 6         <meta name="Keywords" content="" />
 7         <mata name = "description" content = "" />
 8         <!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
 9         <!-- 翻译：3秒之后自动跳转到百度首页 -->
10         <title>重庆森林</title>
11         <!-- 翻译：指定网页的标题，浏览器的上方显示 -->
12     </head>
13     <body>
14 
15         <!-- 水平标签的使用 -->
16         <p> 
17             Donot aim for your success if you really want to seccess,
18             <hr /> <!-- 用在段落中 -->
19             just stick to do what you love and believe.
20         </p>
21         <hr align="center" width="100" size="3" color="red"/> <!-- 用在段落间 -->
22         <p>
23             Donot aim for your success if you really want to seccess,
24             <br /> <!-- 换行标签 -->
25             just stick to do what you love and believe.
26         </p>
27 
28     </body>
29 </html>

水平标签的使用

　　》》内容居中标签<center>

　　此时center代表是一个标签，而不是一个属性值了。只要是在这个标签里面的内容，都会居于浏览器的中间。

　　　　》》》格式

　　　　<center>需要居中的内容</center>

　　　　》》》PS

　　　　在H5里面不建议使用

　　　　》》》程序

 1 <!DOCTYPE>
 2 <html>
 3     <head>
 4         <meta charset = "utf-8" />
 5         <!-- 翻译：指定编码格式为utf-8 -->
 6         <meta name="Keywords" content="" />
 7         <mata name = "description" content = "" />
 8         <!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
 9         <!-- 翻译：3秒之后自动跳转到百度首页 -->
10         <title>重庆森林</title>
11         <!-- 翻译：指定网页的标题，浏览器的上方显示 -->
12     </head>
13     <body>
14     
15         <!-- 内容居中标签 -->
16         <p>重庆市大足区</p>
17 
18         <hr color="red" size="5"/>
19 
20         <center>
21             <p>大足石刻</p>
22         </center>
23 
24         </body>
25 </html>

内容居中标签的使用

　　　　》》》效果展示

　　》》预定义（格式化）标签<pre>

　　将保留其中的所有的空白字符(空格、换行符)，原封不动的输出结果（告诉浏览器不要忽略空格和空行）

　　PS：真正排网页过程中，<pre>标签几乎用不着。但在PHP中用于打印一个数组时使用。

　　　　》》》格式

　　　　<pre>有格式的内容</pre>

　　　　》》》程序实现

 1 <!DOCTYPE>
 2 <html>
 3     <head>
 4         <meta charset = "utf-8" />
 5         <!-- 翻译：指定编码格式为utf-8 -->
 6         <meta name="Keywords" content="" />
 7         <mata name = "description" content = "" />
 8         <!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
 9         <!-- 翻译：3秒之后自动跳转到百度首页 -->
10         <title>重庆森林</title>
11         <!-- 翻译：指定网页的标题，浏览器的上方显示 -->
12     </head>
13     <body>
14 
15         <!-- 预定义标签的使用 -->
16         <p>
17             大足是个好地方。<br />大足石刻是世界文化遗产
18         </p>
19         <p>
20             <pre>    大足是个好地方。<br />大足石刻是世界文化遗产</pre>
21         </p>
22         <pre>有格式的内容</pre>
23 
24     </body>
25 </html>

预定义标签的使用

　　　　》》》效果展示

　　》》块级标签1<div>

　　标签中的内容作为一个块儿来对待(division)。必须单独占据一行。

　　　　》》》格式

　　　　<div>需要作为一个块的内容</div>

　　　　》》》属性

　　　　align ：设置块的位置；属性值有：left、right、center

　　　　》》》程序实现

 1 <!DOCTYPE>
 2 <html>
 3     <head>
 4         <meta charset = "utf-8" />
 5         <!-- 翻译：指定编码格式为utf-8 -->
 6         <meta name="Keywords" content="" />
 7         <mata name = "description" content = "" />
 8         <!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
 9         <!-- 翻译：3秒之后自动跳转到百度首页 -->
10         <title>重庆森林</title>
11         <!-- 翻译：指定网页的标题，浏览器的上方显示 -->
12     </head>
13     <body>
14         
15         <!-- 块级标签1的使用 -->
16         <div>需要作为一个块的内容</div>
17 
18     </body>
19 </html>

块级标签的使用

　　　　》》》效果展示

　　》》块级标签2<span>

　　<span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的或者说，DIV+CSS来实现各种样式。　　

　　　　》》》格式

　　　　<span>需要进行块级设置的内容</span>

　　　　》》》程序实现

 1 <!DOCTYPE>
 2 <html>
 3     <head>
 4         <meta charset = "utf-8" />
 5         <!-- 翻译：指定编码格式为utf-8 -->
 6         <meta name="Keywords" content="" />
 7         <mata name = "description" content = "" />
 8         <!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
 9         <!-- 翻译：3秒之后自动跳转到百度首页 -->
10         <title>重庆森林</title>
11         <!-- 翻译：指定网页的标题，浏览器的上方显示 -->
12     </head>
13     <body>
14         
15         <!-- 块级标签2的使用 -->
16         <span>需要进行块级设置的内容1</span>
17         <span>需要进行块级设置的内容2</span>
18 
19     </body>
20 </html>

块级标签2

　　　　》》》效果展示

3字体标签

　　3.1标题字体标签<h>

　　标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题。具有align属性，属性值可以是：left、center、right。

　　　　3.1.1格式

　　　　3.1.2程序实现

 1 <!DOCTYPE>
 2 <html>
 3     <head>
 4         <meta charset = "utf-8" />
 5         <!-- 翻译：指定编码格式为utf-8 -->
 6         <meta name="Keywords" content="" />
 7         <mata name = "description" content = "" />
 8         <!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
 9         <!-- 翻译：3秒之后自动跳转到百度首页 -->
10         <title>重庆森林</title>
11         <!-- 翻译：指定网页的标题，浏览器的上方显示 -->
12     </head>
13     <body>
14         
15         <!-- 标题字体标签的使用 -->
16         <h1>1号标题</h1>
17         <h2>2号标题</h2>
18         <h3>3号标题</h3>
19         <h4>4号标题</h4>
20         <h5>5号标题</h5>
21         <h6>6号标题</h6>
22 
23     </body>
24 </html>

标题字体标签的使用

　　　　3.1.3效果展示

　　3.2字体格式标签

　　　　3.2.1属性

　　　　size：设置字体大小。取值范围只能是：1至7。取值时，如果取值大于7那就按照7来算，如果取值小于1那就按照1来算。如果想要更大的字体，那就只能通过css样式来解决。

　　　　color：设置字体的颜色；color="红色"或color="#ff00cc"或color="new rgb(0,0,255)"：设置字体颜色。设置方式：单词 #ff00cc rgb(0,0,255)

　　　　face ：size：设置字体大小。取值范围只能是：1至7。取值时，如果取值大于7那就按照7来算，如果取值小于1那就按照1来算。如果想要更大的字体，那就只能通过css样式来解决。

　　　　3.2.2格式

　　　　<font>需要设置字体格式的内容</font>

　　　　3.2.3程序实现

 1 <!DOCTYPE>
 2 <html>
 3     <head>
 4         <meta charset = "utf-8" />
 5         <!-- 翻译：指定编码格式为utf-8 -->
 6         <meta name="Keywords" content="" />
 7         <mata name = "description" content = "" />
 8         <!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
 9         <!-- 翻译：3秒之后自动跳转到百度首页 -->
10         <title>重庆森林</title>
11         <!-- 翻译：指定网页的标题，浏览器的上方显示 -->
12     </head>
13     <body>
14         
15         <!-- 字体标签的使用 -->
16         <center>
17             <p>
18                 <font color="red" size="5">
19                 重庆火锅
20                 </font>
21             </p>
22         </center>
23 
24         <font>需要设置字体格式的内容</font>
25     </body>
26 </html>

字体标签的使用

　　　　3.2.4效果展示

　　3.3特殊字符标签

　　　　3.3.1种类及格式

　　　　  : 空格

　　　　< : 小于号

　　　　> : 大于号

　　　　& : 符号&

　　　　" : 双引号

　　　　' : 单引号

　　　　™ : 商标

　　　　绐 : 文字绐。其实，#32464是汉字绐的unicode编码。

　　　　比如说，你想把<p>作为一个文本在页面上显示，直接写<p>是肯定不行的，因为这代表的是一个段落标签，所以这里需要用到转义字符。应该这么写：

这是一个HTML语言的<p>标签

　　　　3.3.2程序实现

 1 <!DOCTYPE>
 2 <html>
 3     <head>
 4         <meta charset = "utf-8" />
 5         <!-- 翻译：指定编码格式为utf-8 -->
 6         <meta name="Keywords" content="" />
 7         <mata name = "description" content = "" />
 8         <!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
 9         <!-- 翻译：3秒之后自动跳转到百度首页 -->
10         <title>重庆森林</title>
11         <!-- 翻译：指定网页的标题，浏览器的上方显示 -->
12     </head>
13     <body>
14         
15         <!-- 特殊字符标签的使用 -->
16         <p>这是一个HTML语言的&lt;p&gt;标签</p>
17 
18     </body>
19 </html>

特殊字符标签的使用

　　　　3.3.3效果展示

　　3.4粗体标签<b>或<strong>

　　　　3.4.1格式

　　　　<b>需要加粗的内容</b>

　　　　3.4.2程序实现

 1 <!DOCTYPE>
 2 <html>
 3     <head>
 4         <meta charset = "utf-8" />
 5         <!-- 翻译：指定编码格式为utf-8 -->
 6         <meta name="Keywords" content="" />
 7         <mata name = "description" content = "" />
 8         <!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
 9         <!-- 翻译：3秒之后自动跳转到百度首页 -->
10         <title>重庆森林</title>
11         <!-- 翻译：指定网页的标题，浏览器的上方显示 -->
12     </head>
13     <body>
14         
15         <!-- 粗体标签的使用 -->
16         <p>
17             重庆*<b>大足石刻</b>
18         </p>
19 
20 
21     </body>
22 </html>

粗体标签的使用

　　　　3.4.3效果展示

　　3.5下划线标签<u>

　　　　3.5.1格式

　　　　<u>需要下划线的内容</u>

　　3.6中划线标签<s>

　　　　3.6.1格式

　　　　<s>需要中划线的内容</s>

　　3.7斜体标签<i>或<em>

　　　　3.7.1格式

　　　　<em>需要斜体表示的内容</em>

　　　　3.7.2程序实现

 1 <!DOCTYPE>
 2 <html>
 3     <head>
 4         <meta charset = "utf-8" />
 5         <!-- 翻译：指定编码格式为utf-8 -->
 6         <meta name="Keywords" content="" />
 7         <mata name = "description" content = "" />
 8         <!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
 9         <!-- 翻译：3秒之后自动跳转到百度首页 -->
10         <title>重庆森林</title>
11         <!-- 翻译：指定网页的标题，浏览器的上方显示 -->
12     </head>
13     <body>
14         
15         <!-- 下划线、中划线、斜体标签的使用 -->
16        
17         <p>
18             <u>需要下划线的内容</u> 
19             <s>需要中划线的内容</s> 
20             <em>需要斜体表示的内容</em> 
21         </p>
22         
23 
24     </body>
25 </html>

下划线、中划线、斜体标签的使用

　　　　3.7.3效果展示

　　3.8上标标签

　　　　3.8.1格式

　　　　中间<sup>上标</sup>

　　3.9下标标签

　　　　3.9.1格式

　　　　中间<sub>下标</sub>

　　　　3.9.2程序实现

 1 <!DOCTYPE>
 2 <html>
 3     <head>
 4         <meta charset = "utf-8" />
 5         <!-- 翻译：指定编码格式为utf-8 -->
 6         <meta name="Keywords" content="" />
 7         <mata name = "description" content = "" />
 8         <!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
 9         <!-- 翻译：3秒之后自动跳转到百度首页 -->
10         <title>重庆森林</title>
11         <!-- 翻译：指定网页的标题，浏览器的上方显示 -->
12     </head>
13     <body>
14         
15         <!-- 上标标签、下标标签的使用 -->
16        
17         <p>
18             中间<sup>上标</sup>
19             中间<sub>下标</sub>
20         </p>
21         
22 
23     </body>
24 </html>

上标、下标标签的使用

　　　　3.9.3效果展示

4超链接<a>

　　4.1外部链接：链接到外部文件

　　　　4.1.1格式

　　　　<a href="需要跳转的网址">点击处的提示语</a>

　　　　4.1.2程序实现

 1 <!DOCTYPE>
 2 <html>
 3     <head>
 4         <meta charset = "utf-8" />
 5         <!-- 翻译：指定编码格式为utf-8 -->
 6         <meta name="Keywords" content="" />
 7         <mata name = "description" content = "" />
 8         <!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
 9         <!-- 翻译：3秒之后自动跳转到百度首页 -->
10         <title>重庆森林</title>
11         <!-- 翻译：指定网页的标题，浏览器的上方显示 -->
12     </head>
13     <body>
14         
15         <!-- 利用a标签实现外部链接 -->
16         <p>
17             <a href="http://www.baidu.com">
18                 点击进入百度
19             </a>
20         </p>
21 
22         <a href="需要跳转的网址">点击处的提示语</a>
23         
24 
25     </body>
26 </html>

a标签实现外部链接

　　　　4.1.3效果展示

　　4.2锚链接

　　指给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就是利用到了锚链接。
首先我们要创建一个锚，也就是说，使用name属性给那个特定的位置起个名字。

　　　　4.2.1格式

　　　　设置锚：<a name="name1">顶部</a>

　　　　实现跳转到指定锚点：<a href="#name1">点击此处回到顶部</a>

#表示跳到名为name1的特定位置，这是规定。如果少了#号，点击之后，就会跳到name1这个文件或者name1这个文件夹中去。例如：

表示，点击之后，跳转到a.html页面的name1锚点中去。

　　　　说明：name属性是HTML4.0以前使用的，id属性是HTML4.0后才开始使用。为了向前兼容，因此，name和id这两个属性都要写上，并且值是一样的。

　　　　4.2.2程序实现

 1 <!DOCTYPE>
 2 <html>
 3     <head>
 4         <meta charset = "utf-8" />
 5         <!-- 翻译：指定编码格式为utf-8 -->
 6         <meta name="Keywords" content="" />
 7         <mata name = "description" content = "" />
 8         <!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
 9         <!-- 翻译：3秒之后自动跳转到百度首页 -->
10         <title>重庆森林</title>
11         <!-- 翻译：指定网页的标题，浏览器的上方显示 -->
12     </head>
13     <body>
14         
15         <!-- 利用a标签实现锚链接 -->
16         <a name="name1">顶部</a>
17         <a href="#name2">点击此处跳转到底部</a>
18         <pre>
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         </pre>
82         <a href="#name1">点击此处回到顶部</a>
83         <<a name="name2">底部</a>
84 
85     </body>
86 </html>

利用a标签实现锚链接

　　4.3邮件链接

　　　　4.3.1格式

　　　　<a href="mailto:邮箱">点击进入我的邮箱</a>　

　　　　4.3.2程序实现

 1 <!DOCTYPE>
 2 <html>
 3     <head>
 4         <meta charset = "utf-8" />
 5         <!-- 翻译：指定编码格式为utf-8 -->
 6         <meta name="Keywords" content="" />
 7         <mata name = "description" content = "" />
 8         <!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
 9         <!-- 翻译：3秒之后自动跳转到百度首页 -->
10         <title>重庆森林</title>
11         <!-- 翻译：指定网页的标题，浏览器的上方显示 -->
12     </head>
13     <body>
14         <a href="mailto:412744267@qq.com">点击进入我的邮箱</a>
15     </body>
16 </html>

利用a标签实现邮箱链接

　　　　4.3.3PS

　　　　需要进行配置

　　4.4超链接标签的属性

　　　　href : 目标URL

　　　　name : 主要用于设置一个锚点的名称

　　　　taiget : 主要告诉浏览器用什么方式来打开目标页面

　　　　　　target的属性值

　　　　　　_self : 在同一个网页中显示（默认值）

　　　　　　_blank : 打开新的网页（新的标签页）显示

　　　　　　_parent : 在父窗口显示

　　　　　　_top : 在顶级窗口中显示

　　　　　　ps

　　　　　　_parent 和 _top 只能用在框架中