PythonNote01_HTML标签
》頭標簽<head>
》》位置
頭標簽要放在頭部之間
》》種類
<title> :?指定整個網(wǎng)頁的標題，在瀏覽器最上方顯示。
<meta> :?提供有關(guān)頁面的基本信息。
<meta http-equiv="refresh" content="3;http://www.baidu.com">
這個meta標簽的意思是：3秒之后，自動跳轉(zhuǎn)到百度頁面。（記住）
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秒之后自動跳轉(zhuǎn)到百度首頁 --> 8 <title>重慶森林</title> 9 <!-- 翻譯：指定網(wǎng)頁的標題，瀏覽器的上方顯示 --> 10 11 </head> 頭標簽》body標簽<body>
》》屬性
bgcolor :?設(shè)置整個網(wǎng)頁的背景顏色。
background :?設(shè)置整個網(wǎng)頁的背景圖片。
text :?設(shè)置網(wǎng)頁中的文本顏色。
》排版標簽
》》段落標簽<p>
》》》格式
?<p>段落內(nèi)容</p>
》》》PS
段落前后會自動空一行
輸入段落內(nèi)容后 --> ?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秒之后自動跳轉(zhuǎn)到百度首頁 --> 10 <title>重慶森林</title> 11 <!-- 翻譯：指定網(wǎng)頁的標題，瀏覽器的上方顯示 --> 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>
當你打算結(jié)束一行，而又不想開始一個新段落時，<br>標簽就派上用場了。無論你將它置于何處，<br>標簽都會產(chǎn)生一個強制的換行。
》》》格式
<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秒之后自動跳轉(zhuǎn)到百度首頁 --> 10 <title>重慶森林</title> 11 <!-- 翻譯：指定網(wǎng)頁的標題，瀏覽器的上方顯示 --> 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
可以用在段落中，也可以用在段落間；用在段落中時相當于將這個段落的內(nèi)容分割成了兩個段落并且用水平線進行隔開
? 》》》屬性
align : 設(shè)置線條放置的位置；屬性值有：left、right、center
size : 設(shè)置線條的粗細（即：高度）
width : 設(shè)定線條的長度，可以是絕對值（即：一個具體的數(shù)字），也可以是相對值（即一個半分比，如：%70），默認為100%
color : 設(shè)置線條的顏色
noshade : 設(shè)置成不要陰影，默認是要陰影
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秒之后自動跳轉(zhuǎn)到百度首頁 --> 10 <title>重慶森林</title> 11 <!-- 翻譯：指定網(wǎng)頁的標題，瀏覽器的上方顯示 --> 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> 水平標簽的使用》》內(nèi)容居中標簽<center>
此時center代表是一個標簽，而不是一個屬性值了。只要是在這個標簽里面的內(nèi)容，都會居于瀏覽器的中間。
》》》格式
<center>需要居中的內(nèi)容</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秒之后自動跳轉(zhuǎn)到百度首頁 --> 10 <title>重慶森林</title> 11 <!-- 翻譯：指定網(wǎng)頁的標題，瀏覽器的上方顯示 --> 12 </head> 13 <body> 14 15 <!-- 內(nèi)容居中標簽 --> 16 <p>重慶市大足區(qū)</p> 17 18 <hr color="red" size="5"/> 19 20 <center> 21 <p>大足石刻</p> 22 </center> 23 24 </body> 25 </html> 內(nèi)容居中標簽的使用》》》效果展示
》》預定義（格式化）標簽<pre>
將保留其中的所有的空白字符(空格、換行符)，原封不動的輸出結(jié)果（告訴瀏覽器不要忽略空格和空行）
PS：真正排網(wǎng)頁過程中，<pre>標簽幾乎用不著。但在PHP中用于打印一個數(shù)組時使用。
》》》格式
<pre>有格式的內(nèi)容</pre>
》》》程序?qū)崿F(xiàn)
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秒之后自動跳轉(zhuǎn)到百度首頁 --> 10 <title>重慶森林</title> 11 <!-- 翻譯：指定網(wǎng)頁的標題，瀏覽器的上方顯示 --> 12 </head> 13 <body> 14 15 <!-- 預定義標簽的使用 --> 16 <p> 17 大足是個好地方。<br />大足石刻是世界文化遺產(chǎn) 18 </p> 19 <p> 20 <pre> 大足是個好地方。<br />大足石刻是世界文化遺產(chǎn)</pre> 21 </p> 22 <pre>有格式的內(nèi)容</pre> 23 24 </body> 25 </html> 預定義標簽的使用》》》效果展示
》》塊級標簽1<div>
標簽中的內(nèi)容作為一個塊兒來對待(division)。必須單獨占據(jù)一行。
》》》格式
<div>需要作為一個塊的內(nèi)容</div>
》》》屬性
align ：設(shè)置塊的位置；屬性值有：left、right、center
》》》程序?qū)崿F(xiàn)
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秒之后自動跳轉(zhuǎn)到百度首頁 --> 10 <title>重慶森林</title> 11 <!-- 翻譯：指定網(wǎng)頁的標題，瀏覽器的上方顯示 --> 12 </head> 13 <body> 14 15 <!-- 塊級標簽1的使用 --> 16 <div>需要作為一個塊的內(nèi)容</div> 17 18 </body> 19 </html> 塊級標簽的使用》》》效果展示
》》塊級標簽2<span>
<span>和<div>唯一的區(qū)別在于：<span>是不換行的，而<div>是換行的。如果單獨在網(wǎng)頁中插入這兩個元素，不會對頁面產(chǎn)生任何的影響。這兩個元素是專門為定義CSS樣式而生的或者說，DIV+CSS來實現(xiàn)各種樣式。
》》》格式
<span>需要進行塊級設(shè)置的內(nèi)容</span>
》》》程序?qū)崿F(xiàn)
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秒之后自動跳轉(zhuǎn)到百度首頁 --> 10 <title>重慶森林</title> 11 <!-- 翻譯：指定網(wǎng)頁的標題，瀏覽器的上方顯示 --> 12 </head> 13 <body> 14 15 <!-- 塊級標簽2的使用 --> 16 <span>需要進行塊級設(shè)置的內(nèi)容1</span> 17 <span>需要進行塊級設(shè)置的內(nèi)容2</span> 18 19 </body> 20 </html> 塊級標簽2》》》效果展示
3字體標簽
3.1標題字體標簽<h>
標題使用<h1>至<h6>標簽進行定義。<h1>定義最大的標題，<h6>定義最小的標題。具有align屬性，屬性值可以是：left、center、right。
3.1.1格式
<h1>1號標題</h1>
<h2>2號標題</h2>
<h3>3號標題</h3>
<h4>4號標題</h4>
<h5>5號標題</h5>
<h6>6號標題</h6>
3.1.2程序?qū)崿F(xiàn)
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秒之后自動跳轉(zhuǎn)到百度首頁 --> 10 <title>重慶森林</title> 11 <!-- 翻譯：指定網(wǎng)頁的標題，瀏覽器的上方顯示 --> 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：設(shè)置字體大小。 取值范圍只能是：1至7。取值時，如果取值大于7那就按照7來算，如果取值小于1那就按照1來算。如果想要更大的字體，那就只能通過css樣式來解決。
color：設(shè)置字體的顏色；color="紅色"或color="#ff00cc"或color="new rgb(0,0,255)"：設(shè)置字體顏色。設(shè)置方式：單詞 \ #ff00cc \ rgb(0,0,255)
face ：size：設(shè)置字體大小。 取值范圍只能是：1至7。取值時，如果取值大于7那就按照7來算，如果取值小于1那就按照1來算。如果想要更大的字體，那就只能通過css樣式來解決。
3.2.2格式
<font>需要設(shè)置字體格式的內(nèi)容</font>
3.2.3程序?qū)崿F(xiàn)
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秒之后自動跳轉(zhuǎn)到百度首頁 --> 10 <title>重慶森林</title> 11 <!-- 翻譯：指定網(wǎng)頁的標題，瀏覽器的上方顯示 --> 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>需要設(shè)置字體格式的內(nèi)容</font> 25 </body> 26 </html> 字體標簽的使用3.2.4效果展示
3.3特殊字符標簽
3.3.1種類及格式
: 空格
< : 小于號
> : 大于號
& : 符號&
" : 雙引號
' : 單引號
© : 版權(quán)
™ : 商標
绐 :?文字紿。其實，#32464是漢字紿的unicode編碼。
比如說，你想把<p>作為一個文本在頁面上顯示，直接寫<p>是肯定不行的，因為這代表的是一個段落標簽，所以這里需要用到轉(zhuǎn)義字符。應該這么寫：
這是一個HTML語言的<p>標簽
3.3.2程序?qū)崿F(xiàn)
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秒之后自動跳轉(zhuǎn)到百度首頁 --> 10 <title>重慶森林</title> 11 <!-- 翻譯：指定網(wǎng)頁的標題，瀏覽器的上方顯示 --> 12 </head> 13 <body> 14 15 <!-- 特殊字符標簽的使用 --> 16 <p>這是一個HTML語言的<p>標簽</p> 17 18 </body> 19 </html> 特殊字符標簽的使用3.3.3效果展示
3.4粗體標簽<b>或<strong>
3.4.1格式
<b>需要加粗的內(nèi)容</b>
3.4.2程序?qū)崿F(xiàn)
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秒之后自動跳轉(zhuǎn)到百度首頁 --> 10 <title>重慶森林</title> 11 <!-- 翻譯：指定網(wǎng)頁的標題，瀏覽器的上方顯示 --> 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>需要下劃線的內(nèi)容</u>
3.6中劃線標簽<s>
3.6.1格式
<s>需要中劃線的內(nèi)容</s>
3.7斜體標簽<i>或<em>
3.7.1格式
<em>需要斜體表示的內(nèi)容</em>
3.7.2程序?qū)崿F(xiàn)
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秒之后自動跳轉(zhuǎn)到百度首頁 --> 10 <title>重慶森林</title> 11 <!-- 翻譯：指定網(wǎng)頁的標題，瀏覽器的上方顯示 --> 12 </head> 13 <body> 14 15 <!-- 下劃線、中劃線、斜體標簽的使用 --> 16 17 <p> 18 <u>需要下劃線的內(nèi)容</u> 19 <s>需要中劃線的內(nèi)容</s> 20 <em>需要斜體表示的內(nèi)容</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程序?qū)崿F(xiàn)
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秒之后自動跳轉(zhuǎn)到百度首頁 --> 10 <title>重慶森林</title> 11 <!-- 翻譯：指定網(wǎng)頁的標題，瀏覽器的上方顯示 --> 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="需要跳轉(zhuǎn)的網(wǎng)址">點擊處的提示語</a>
4.1.2程序?qū)崿F(xiàn)
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秒之后自動跳轉(zhuǎn)到百度首頁 --> 10 <title>重慶森林</title> 11 <!-- 翻譯：指定網(wǎng)頁的標題，瀏覽器的上方顯示 --> 12 </head> 13 <body> 14 15 <!-- 利用a標簽實現(xiàn)外部鏈接 --> 16 <p> 17 <a href="http://www.baidu.com"> 18 點擊進入百度 19 </a> 20 </p> 21 22 <a href="需要跳轉(zhuǎn)的網(wǎng)址">點擊處的提示語</a> 23 24 25 </body> 26 </html> a標簽實現(xiàn)外部鏈接4.1.3效果展示
4.2錨鏈接
? 指給超鏈接起一個名字，作用是在本頁面或者其他頁面的的不同位置進行跳轉(zhuǎn)。比如說，在網(wǎng)頁底部有一個向上箭頭，點擊箭頭后回到頂部，這個就是利用到了錨鏈接。
? ? ? 首先我們要創(chuàng)建一個錨，也就是說，使用name屬性給那個特定的位置起個名字。
4.2.1格式
設(shè)置錨：<a name="name1">頂部</a> ? ??
實現(xiàn)跳轉(zhuǎn)到指定錨點：<a href="#name1">點擊此處回到頂部</a> ?
#表示跳到名為name1的特定位置，這是規(guī)定。如果少了#號，點擊之后，就會跳到name1這個文件或者name1這個文件夾中去。例如：
<a href="a.hhml#name1">回到頂部</a>
表示，點擊之后，跳轉(zhuǎn)到a.html頁面的name1錨點中去。
說明：name屬性是HTML4.0以前使用的，id屬性是HTML4.0后才開始使用。為了向前兼容，因此，name和id這兩個屬性都要寫上，并且值是一樣的。
4.2.2程序?qū)崿F(xiàn)
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秒之后自動跳轉(zhuǎn)到百度首頁 --> 10 <title>重慶森林</title> 11 <!-- 翻譯：指定網(wǎng)頁的標題，瀏覽器的上方顯示 --> 12 </head> 13 <body> 14 15 <!-- 利用a標簽實現(xiàn)錨鏈接 --> 16 <a name="name1">頂部</a> 17 <a href="#name2">點擊此處跳轉(zhuǎn)到底部</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標簽實現(xiàn)錨鏈接4.3郵件鏈接
4.3.1格式
<a href="mailto:郵箱">點擊進入我的郵箱</a>
4.3.2程序?qū)崿F(xiàn)
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秒之后自動跳轉(zhuǎn)到百度首頁 --> 10 <title>重慶森林</title> 11 <!-- 翻譯：指定網(wǎng)頁的標題，瀏覽器的上方顯示 --> 12 </head> 13 <body> 14 <a href="mailto:412744267@qq.com">點擊進入我的郵箱</a> 15 </body> 16 </html> 利用a標簽實現(xiàn)郵箱鏈接4.3.3PS
需要進行配置
4.4超鏈接標簽的屬性
href : 目標URL
name : 主要用于設(shè)置一個錨點的名稱
taiget : 主要告訴瀏覽器用什么方式來打開目標頁面
target的屬性值
_self : 在同一個網(wǎng)頁中顯示（默認值）
_blank : 打開新的網(wǎng)頁（新的標簽頁）顯示
_parent : 在父窗口顯示
_top : 在頂級窗口中顯示
ps
_parent 和 _top 只能用在框架中
?
轉(zhuǎn)載于:https://www.cnblogs.com/NeverCtrl-C/p/6253259.html
總結(jié)
以上是生活随笔為你收集整理的PythonNote01_HTML标签的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css3的新特性transform,tr
- 下一篇： 浏览器在DPI缩放时变化问题