html body中的标签
HTML中的標(biāo)簽有兩類
一.字體標(biāo)簽
字體標(biāo)簽包含:h1~h6、<font>、<u>、<b>、<strong><em>、<sup>、<sub>
標(biāo)題
標(biāo)題使用<h1>至<h6>標(biāo)簽進(jìn)行定義.<h1>定義最大的標(biāo)題,<h6>定義最小的標(biāo)題.具有align屬性,屬性值可以是:left,center,right.
<h1>路飛學(xué)城</h1>
<h2>路飛學(xué)城</h2>
<h3>路飛學(xué)城</h3>
<h4>路飛學(xué)城</h4>
<h5>路飛學(xué)城</h5>
<h6>路飛學(xué)城</h6>
字體標(biāo)簽<font>(已廢棄)
color="紅色"或color="#ff00cc"或color="new rgb(0,0,255)"：設(shè)置字體顏色。設(shè)置方式：?jiǎn)卧~ #ff00cc rgb(0,0,255)
size：設(shè)置字體大小。 取值范圍只能是：1至7。取值時(shí)，如果取值大于7那就按照7來算，如果取值小于1那就按照1來算。如果想要更大的字體，那就只能通過css樣式來解決
face="微軟雅黑"：設(shè)置字體類型。注意在寫字體時(shí)，“微軟雅黑”這個(gè)字不能寫錯(cuò)。
實(shí)例
<font face="微軟雅黑" color="green" size="8">字體</font>
粗體標(biāo)簽<b>或<strong>(已放棄)
示例：
小馬哥 <b>小馬哥</b> <strong>小馬哥</strong>
效果：
下劃線標(biāo)記<u>中劃線標(biāo)記<s>（已廢棄）
示例：
<u>小馬哥</u> <s>小馬哥</s>
效果：
斜體標(biāo)記<i>或<em>（已廢棄）
示例：
小馬哥 <i>小馬哥</i> <em>小馬哥</em>
效果：
上標(biāo)<sup> 下標(biāo)<sub>
上小標(biāo)這兩個(gè)標(biāo)簽容易混淆，怎么記呢？這樣記：b的意思是bottom：底部
例子：
5<sup>2</sup> 8<sub>2</sub>
效果：
特殊字符
：空格 （non-breaking spacing，不斷打空格）
<：小于號(hào)（less than）
>：大于號(hào)（greater than）
&：符號(hào)&
"：雙引號(hào)
'：?jiǎn)我?hào)
©：版權(quán)?
™：商標(biāo)™
要求大家背過的特殊字符： 、<、>、©
比如說，你想把<p>作為一個(gè)文本在頁面上顯示，直接寫<p>是肯定不行的，因?yàn)檫@代表的是一個(gè)段落標(biāo)簽，所以這里需要用到轉(zhuǎn)義字符。應(yīng)該這么寫：
這是一個(gè)HTML語言的<p>標(biāo)簽
效果顯示：
如果還想知道其它的HTML特殊字符：HTML特殊字符參考表
二、排版標(biāo)簽
段落標(biāo)簽<p>
段落：是英文paragraph的縮寫。
屬性：
align='屬性值'：對(duì)齊方式。屬性值包括：left、center、right
示例：
<p>這是一個(gè)段落</p> <p align="center">這是另一個(gè)段落</p>
效果：
ok,下面這幾句話，大家一定牢牢記住。HTML標(biāo)簽是分等級(jí)的。HTML將所有的標(biāo)簽分為兩種：
文本級(jí)標(biāo)簽：p、span、a、b、i、u、em。文本標(biāo)簽里只能放文字、圖片、表單元素。
容器級(jí)標(biāo)簽：div、h系列、li、dt、dd。容器級(jí)標(biāo)簽里可以放任何東西。
從學(xué)習(xí)p的第一天開始，就要死死記住：p標(biāo)簽是一個(gè)文本級(jí)標(biāo)簽，p里面只能放文字、圖片、表單元素。其他的一律不能放。
錯(cuò)誤寫法：（把h系列的標(biāo)簽放到p里）
<p>
我是個(gè)段落
<h2>我是二級(jí)標(biāo)題</h2>
</p>
效果如下：
上圖顯示，瀏覽器不允許你這么做。我們使用Chrome的F12審查元素發(fā)現(xiàn)，瀏覽器自己把p封閉掉了，不讓你去包裹h2。
PS：Chrome瀏覽器是世界上HTML5支持最好的瀏覽器。提供了非常好的開發(fā)工具，非常適合我們開發(fā)人員使用。審查元素功能的快捷鍵是F12。
塊級(jí)標(biāo)簽 <div>和<span>
div和span是非常重要的標(biāo)簽，div的語義是division“分割”； span的語義就是span“范圍、跨度”。CSS課程中你將知道，這兩個(gè)東西，都是最最重要的“盒子”。
div：把標(biāo)簽中的內(nèi)容作為一個(gè)塊兒來對(duì)待(division)。必須單獨(dú)占據(jù)一行。
div標(biāo)簽的屬性：
align="屬性值"：設(shè)置塊兒的位置。屬性值可選擇：left、right、 center
<span>和<div>唯一的區(qū)別在于：<span>是不換行的，而<div>是換行的。
如果單獨(dú)在網(wǎng)頁中插入這兩個(gè)元素，不會(huì)對(duì)頁面產(chǎn)生任何的影響。這兩個(gè)元素是專門為定義CSS樣式而生的。或者說，DIV+CSS來實(shí)現(xiàn)各種樣式。
示例：
<body>
<div>
導(dǎo)航欄
</div>
<div>
中心banner
</div>
<span>路飛</span>
<span>alex</span>
</body>
效果：
div在瀏覽器中，默認(rèn)是不會(huì)增加任何的效果的，但是語義變了，div中的所有元素是一個(gè)小區(qū)域。
div標(biāo)簽是一個(gè)容器級(jí)標(biāo)簽，里面什么都能放，甚至可以放div自己。
span也是表達(dá)“小區(qū)域、小跨度”的標(biāo)簽，但是是一個(gè)文本級(jí)的標(biāo)簽。
就是說，span里面只能放置文字、圖片、表單元素。span里面不能放p、h、ul、dl、ol、div。
span舉例：
<p>
商品簡(jiǎn)介:
<span>
<a href="">詳細(xì)信息</a>
<a href="">生產(chǎn)日期</a>
</span>
</p>
div舉例：
<div class="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<div class="content">
<div class="guanggao"></div>
<div class="shop"></div>
</div>
<div class="footer"></div>
所以，我們親切的稱呼這種模式叫做“div+css”。div標(biāo)簽負(fù)責(zé)布局，負(fù)責(zé)結(jié)構(gòu)，負(fù)責(zé)分塊。css負(fù)責(zé)樣式。
ps:這個(gè)class屬性名就與css有很大關(guān)聯(lián)，講到css模塊會(huì)詳細(xì)講這塊內(nèi)容。
換行標(biāo)簽<br> （已廢棄）
當(dāng)你打算結(jié)束一行，而又不想開始一個(gè)新段落時(shí)，<br>標(biāo)簽就派上用場(chǎng)了。無論你將它置于何處，<br>標(biāo)簽都會(huì)產(chǎn)生一個(gè)強(qiáng)制的換行。
示例：
This <br> is a para<br>graph with line breaks
效果：
上圖顯示，<p>標(biāo)簽和<br>標(biāo)簽的區(qū)別在于：<p>標(biāo)簽會(huì)在段落的前后自動(dòng)插入一個(gè)空行，而<br>標(biāo)簽沒有空行；而且<br>標(biāo)簽沒有屬性。
注意<br>沒有結(jié)束標(biāo)簽，把<br>標(biāo)簽寫為<br/>是經(jīng)得起未來考驗(yàn)的做法，XHTML 和 XML 都接受在打開的標(biāo)簽內(nèi)部來關(guān)閉標(biāo)簽的做法。
水平線標(biāo)簽<hr>（已廢棄）
水平分隔線（horizontal rule）可以在視覺上將文檔分隔成各個(gè)部分
示例：
<p>小馬哥</p>
<hr>
<hr>
<p>我是段落</p>
This <br> is a para<br>graph with line breaks
效果如下：
內(nèi)容居中標(biāo)簽<center>
此時(shí)center代表是一個(gè)標(biāo)簽，而不是一個(gè)屬性值了。只要是在這個(gè)標(biāo)簽里面的內(nèi)容，都會(huì)居于瀏覽器的中間。
示例：
<center>
<p>小馬哥</p>
</center>
效果如下：
到了H5里面，center標(biāo)簽不建議使用。
預(yù)定義（預(yù)格式化）標(biāo)簽：<pre>
含義：將保留其中的所有的空白字符(空格、換行符)，原封不動(dòng)的輸出結(jié)果（告訴瀏覽器不要忽略空格和空行）
說明：真正排網(wǎng)頁過程中，<pre>標(biāo)簽幾乎用不著。但在PHP中用于打印一個(gè)數(shù)組時(shí)使用。
示例：
<pre>
鵝鵝鵝
作者：李白
曲項(xiàng)向天歌
白毛浮綠水
</pre>
效果如下：
上圖中，好像pre標(biāo)簽部分的字體變小了，而且還出現(xiàn)了縮進(jìn)，好吧， 這個(gè)其實(shí)是瀏覽器搞的鬼。
為什么要有<pre>這個(gè)標(biāo)簽?zāi)兀看鸢甘牵?/p>
所有的瀏覽器默認(rèn)情況下都會(huì)忽略空格和空行。
好吧，其實(shí)這個(gè)標(biāo)簽也用的比較少。排版標(biāo)簽就給大家介紹到這里。
三、超鏈接
超鏈接有三種形式：
1、外部鏈接：鏈接到外部文件。舉例：
<a href="new.html">點(diǎn)擊進(jìn)入到新網(wǎng)頁</a>
a是英語anchor“錨”的意思，就好像這個(gè)頁面往另一個(gè)頁面扔出了一個(gè)錨。是一個(gè)文本級(jí)的標(biāo)簽。
href是英語hypertext reference超文本地址的縮寫。讀作“喝瑞夫”，不要讀作“喝夫”。
效果：
當(dāng)然，我們也可以直接點(diǎn)進(jìn)鏈接，訪問一個(gè)網(wǎng)址。舉例如下；
<a target="_blank">進(jìn)入百度</a>
2、錨鏈接：
指給超鏈接起一個(gè)名字，作用是在本頁面或者其他頁面的的不同位置進(jìn)行跳轉(zhuǎn)。比如說，在網(wǎng)頁底部有一個(gè)向上箭頭，點(diǎn)擊箭頭后回到頂部，這個(gè)就是利用到了錨鏈接。
首先我們要?jiǎng)?chuàng)建一個(gè)錨點(diǎn)，也就是說，使用name屬性或者id屬性給那個(gè)特定的位置起個(gè)名字。效果如下：
上圖中解釋：
11行代碼表示，頂部這個(gè)錨的名字叫做top。
然后在底部設(shè)置超鏈接，點(diǎn)擊時(shí)將回到頂部（此時(shí)，網(wǎng)頁中的url的末尾也出現(xiàn)了#top）。注意上圖中紅框部分的#號(hào)不要忘記了，表示跳到名為top的特定位置，這是規(guī)定。如果少了#號(hào)，點(diǎn)擊之后，就會(huì)跳到top這個(gè)文件或者top這個(gè)文件夾中去。
如果我們將上圖中的第23行代碼寫成：
<a href="new.hhml#top">回到頂部</a>
就表示，點(diǎn)擊之后，跳轉(zhuǎn)到new.html頁面的top錨點(diǎn)中去。
說明：name屬性是HTML4.0以前使用的，id屬性是HTML4.0后才開始使用。為了向前兼容，因此，name和id這兩個(gè)屬性都要寫上，并且值是一樣的。
3、郵件鏈接：
代碼舉例：
<a href="mailto:zhaoxu@tedu.cn">聯(lián)系我們</a>
效果：點(diǎn)擊之后，會(huì)彈出outlook，作用不大。
前提：計(jì)算機(jī)中必須安裝郵件客戶端，并且配置好了郵件相關(guān)信息
特殊幾個(gè)鏈接：
返回頁面頂部的位置
<a href="#">跳轉(zhuǎn)到頂部</a>
與js有關(guān)：
<a href="javascript:alert(1)">內(nèi)容</a> <a href="javascript:;">內(nèi)容</a>
javascript:;表示什么都不執(zhí)行，這樣點(diǎn)擊<a>時(shí)就沒有任何反應(yīng) 例如：<ahref="javascrip:;">內(nèi)容</2
javascript:是表示在觸發(fā)<a>默認(rèn)動(dòng)作時(shí)，執(zhí)行一段JavaScript代碼。 例如：<ahref="javascript:alert()">內(nèi)容</a>
超鏈接的屬性
href：目標(biāo)URL
title：懸停文本。
name：主要用于設(shè)置一個(gè)錨點(diǎn)的名稱。
target：告訴瀏覽器用什么方式來打開目標(biāo)頁面。target屬性有以下幾個(gè)值：
_self：在同一個(gè)網(wǎng)頁中顯示（默認(rèn)值）
_blank：在新的窗口中打開。
_parent：在父窗口中顯示
_top：在頂級(jí)窗口中顯示
blank就是“空白”的意思，就表示新建一個(gè)空白窗口。為啥有一個(gè)_ ，就是規(guī)定，沒啥好解釋的。
也就是說，如果不寫target=”_blank”那么就是在相同的標(biāo)簽頁打開，如果寫了target=”_blank”，就是在新的空白標(biāo)簽頁中打開。
ps:a是一個(gè)文本級(jí)的標(biāo)簽
比如一個(gè)段落中的所有文字都能夠被點(diǎn)擊，那么應(yīng)該是p包含a；
<p>
<a href="">段落段落段落段落段落段落</a>
</p>
而不是a包裹p：
<a href="">
<p>
段落段落段落段落段落段落
</p>
</a>
a的語義要小于p，a就是可以當(dāng)做文本來處理，所以p里面相當(dāng)于放的就是純文字。
四、圖片標(biāo)簽 <img />
img: 代表的就是一張圖片。是單邊標(biāo)記。
img是自封閉標(biāo)簽，也稱為單標(biāo)簽。
能插入的圖片類型：
能夠插入的圖片類型是：jpg(jpeg)、gif、png、bmp。類型和類型之間有什么區(qū)別，css課上講。
不能往網(wǎng)頁中插入的圖片格式是：psd、ai
HTML頁面不是直接插入圖片，而是插入圖片的引用地址，所以也要把圖片上傳到服務(wù)器上。
src屬性：圖片的相對(duì)路徑和絕對(duì)路徑
這里涉及到圖片的一個(gè)屬性：
src屬性：指圖片的路徑。
在寫圖片的路徑時(shí)，有兩種寫法：相對(duì)路徑、絕對(duì)路徑
1、寫法一：相對(duì)路徑
相對(duì)當(dāng)前頁面所在的路徑。兩個(gè)標(biāo)記.和..分表代表當(dāng)前目錄和父路徑。
舉例1：
<!-- 當(dāng)前目錄中的圖片 --> <img src="2.jpg"> <img src=".2.jpg"> <!-- 上一級(jí)目錄中的圖片 --> <img src="..2.jpg">
img 是image“圖片”的簡(jiǎn)寫，src 是英語source“資源”的縮寫。
舉例2：
<img src="images/1.jpg">
上方代碼的意思是說，當(dāng)前頁面有一個(gè)并列的文件夾images，在文件夾images中存放了一張圖片1.jpg
2、寫法二：絕對(duì)路徑
（1）以盤符開始的絕對(duì)路徑。舉例：
<img src="C:UsersaaaDesktophtml-01images1.jpg">
（2）網(wǎng)絡(luò)路徑。舉例：
<img src="http://www.baidu.com/2016040102.jpg">
相對(duì)路徑和絕對(duì)路徑的總結(jié)
相對(duì)路徑的好處：站點(diǎn)不管拷貝到哪里，文件和圖片的相對(duì)路徑關(guān)系都是不變的。
相對(duì)路徑使用有一個(gè)前提，就是網(wǎng)頁文件和你的圖片，必須在一個(gè)服務(wù)器上。
問題：我的網(wǎng)頁在C盤，圖片卻在D盤，能不能插入呢？
答案： 用相對(duì)路徑不能，用絕對(duì)路徑也不能。
注意：可以使用file://來插入，但是這種方法，沒有任何意義！因?yàn)榉?wù)器上沒有所謂c盤、d盤。
下面的方法是行的，但是沒有任何工程上的意義，這是因?yàn)榉?wù)器沒有盤符，linux系統(tǒng)沒有盤符：
<img src="file://C:UsersDannyPictures明星1.jpg" alt="" />
總結(jié)一下：
我們現(xiàn)在無論是在a標(biāo)簽、img標(biāo)簽，如果要用路徑。只有兩種路徑能用，就是相對(duì)路徑和絕對(duì)路徑。
相對(duì)路徑，就是../ image/ 這種路徑。從自己出發(fā)，找到別人；
絕對(duì)路徑，就是http://開頭的路徑。
絕對(duì)不允許使用file://開頭的東西，這個(gè)是完全錯(cuò)誤的！
img標(biāo)簽的常用其它屬性
width：寬度
height：高度
title：提示性文本。公有屬性。也就是鼠標(biāo)懸停時(shí)出現(xiàn)的文本。
align：指圖片的水平對(duì)齊方式，屬性值可以是：left、center、right
alt：當(dāng)圖片顯示不出來的時(shí)候，代替圖片顯示的內(nèi)容。alt是英語 alternate “替代”的意思。（有的瀏覽器不支持）
舉例：
示例：
嘿嘿<img src="images/bojie.jpeg" alt="波姐" title='波多野結(jié)衣' width="400" height="400">幺幺
文本級(jí)的標(biāo)簽顯示在瀏覽器上時(shí)，不管你的圖片多高，它總會(huì)底邊對(duì)齊，這是一種現(xiàn)象，“高矮不齊，底邊對(duì)齊”。
此時(shí)大家可以給圖片設(shè)置align屬性，來查看效果吧！
注意事項(xiàng)：
（1）如果要想保證圖片等比例縮放，請(qǐng)只設(shè)置width和height中其中一個(gè)。
（2）如果想實(shí)現(xiàn)圖文混排的效果，請(qǐng)使用align屬性，取值為left或right
如果想點(diǎn)擊圖片的時(shí)候跳轉(zhuǎn)到某個(gè)鏈接，應(yīng)該是：
<a> <img src="images/bojie.jpeg" alt="波姐" title='波多野結(jié)衣'> </a>
總結(jié)
以上是生活随笔為你收集整理的html body中的标签的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Silver Cow Party POJ
- 下一篇： 最长上升子序列三种模板（n^2模板，二分