HTML學習3：常用標簽之文本標簽 · Web前端HTML+CSS+JS初級入門

前面說到HTML是一種標記語言，在HTML中就是用一個個標簽來標記網頁的，下面就來進行常用標簽的學習。我們說到網頁，首先關注到的就是網頁中顯示的文本內容，而這些文本內容就是用文本標簽來標記的。在說常用的標簽之前，我們先來說說標簽的組成。 HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。 1HTML 標簽是由尖括號包圍的關鍵詞，比如 <html> 2HTML 標簽通常是成對出現的，比如 < b > 和 < /b > 3標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽 4開始和結束標簽也被稱為開放標簽和閉合標簽 HTML的基本結構在《初始HTML》大家已經看到，最基本的有四個文本標簽： ~~~ <span style="font-size:18px;"><html> <head> <title>網頁標題</title> </head> <body> 網頁內容 </body> </html></span> ~~~ 說明： 1)html：告知各瀏覽器，此文檔是Web文檔，要按照HTML語言規則對文檔中的內容進行解釋，用來描述網頁。 2)head：描述文檔的頭信息。常用的子標簽有：<link>、<meta>、<script>、<style>、<title>。 3)title：加載網頁中最先看到的網頁標題。 4)body：正文標記，包含了網頁文檔的內容。文字，圖像，動畫，超鏈拉以及其他的HTML標記均位于該標記中，是網頁中可見的文本內容。此外還有一個就是和其他語言相似的一個注釋標記：。文本標簽是網頁中最基礎的標記，包括< p>、< br>、< hn>(n從1到6)、< hr>、< font>、< b>、< i>、< u>、< s>、< sup>、< sub>、< big>、< small>、< strike> 等等。我們只是介紹一些最常用的文本標簽。 ### 一，標題標簽：HTML 標題是通過 < h1> - < h6> 等標簽進行定義的 ~~~ <span style="font-size:18px;"><html> <head> <title>文本標簽演示</title> </head> <body>  <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6>  <p>請僅僅把標題標簽用于標題文本。不要僅僅為了產生粗體文本而使用它們。請使用其它標簽或 CSS 代替。</p> </body> </html></span> ~~~ 網頁顯示結果為： ![](https://box.kancloud.cn/2016-04-28_57215586c2965.jpg) ### 二，段落標簽：HTML段落是通過 < p> 標簽進行定義的 ~~~ <span style="font-size:18px;"><html> <head> <title>文本標簽演示</title> </head> <body> <p>這是段落1。生活的無奈，有時并不源于自我，別人無心的筑就，那是一種陰差陽錯。生活本就是矛盾的，白天與黑夜間的距離，春夏秋冬之間的輪回，于是有了挑剔的喜愛，讓無奈加上了喜悅的等待。</p> <p>這是段落2。心有明燈，便不會迷路，便可拒絕黑暗、膽怯，擁有一份明朗的心情，一份必勝的信念，一份坦蕩的胸懷……心有小窗，便有亮麗的陽光進來，小酌一些溫暖的故事，便有自由清風邀約一些花香或者白云。心有琴弦，縱然客去茶涼，仍有小曲緩緩響起，仍有滿樹桂花知音而化為酒香。</p> <p>這是段落3。驚濤拍岸，卷起千堆雪，是一道風景；東風栽柳，碧如絲絳，是一道風景；小荷初露，涓涓清泉，是一道風景；可是，你可知道，聰明的你就是一道風景：雖然沒有東風栽柳的多情，沒有小荷初露的恬美；但是你有青春的活力，你有抵御艱難的柔韌，你有閃光的心靈。</p> <p>段落元素由 p 標簽定義。</p> </body> </html></span> ~~~ 網頁結果顯示為： ![](https://box.kancloud.cn/2016-04-28_57215586d117a.jpg) ### 三，HTML < font> 標簽：<font> 規定文本的字體、字體尺寸、字體顏色 ~~~ <span style="font-size:18px;"><html> <head> <title>文本標簽演示</title> </head> <body> <h1>這是<font face="宋體" size="+6" color="#FF0000">一級</font>標題</h1> </body> </html></span> ~~~ 網頁顯示結果為： ![](https://box.kancloud.cn/2016-04-28_57215586e1ab4.jpg) ### 四，HTML < b> 標簽：< b> 標簽規定粗體文本 ~~~ <span style="font-size:18px;"><html> <head> <title>文本標簽演示</title> </head> <body> <p>這是普通文本</p> <hr /> <b>這是粗體文本</b> </body> </html></span> ~~~ 網頁顯示的結果為： ![](https://box.kancloud.cn/2016-04-28_5721558700a5c.jpg) ### 五，HTML?< i>、< u>、< s>、< sup>、< sub>、< big>、< small>等等一些標簽，還有其他的一些文本標簽我們就不再一一列舉了。好的HTML編輯器都會有這些文本標簽。 ~~~ ? ? ?<i> 標簽顯示斜體文本效果。 ? ? ?<u> 標簽可定義下劃線文本。 ? ? ?<s> 標簽可定義加刪除線文本定義。 ? ? ?<sup> 標簽可定義上標文本。 ? ? ?<sub> 標簽可定義下標文本。 ? ? ?<big> 標簽呈現大號字體效果。 ? ? ?<small> 標簽呈現小號字體效果。 ? ? ?六，換行標簽<br />和水平制表符標簽<hr /> ~~~ ~~~ <span style="font-size:18px;"><html> <head> <title>文本標簽演示</title> </head> <body> <p>山一程，水一程。身向榆關那畔行，夜深千帳燈。風一更，雪一更。聒碎鄉心夢不成，故園無此聲。</p> <hr /> <p>誰念西風獨自涼，蕭蕭黃葉閉疏窗。沉思往事立殘陽。被酒莫驚春睡重，賭書消得潑茶香，當時只道是尋常。</p> <br /> 人生若只如初見，何事秋風悲畫扇。等閑變卻故人心，卻道故人心易變。 </body> </html></span> ~~~ 網頁結果顯示為： ![](https://box.kancloud.cn/2016-04-28_5721558710cc7.jpg) 關于文本標簽就先說到這里，后面學習了CSS樣式列表我們還會重新進行更豐富的變化。 ? ? ?? ? ? ??