作為一名熱愛學(xué)習(xí)的同學(xué),每當學(xué)習(xí)一點新知識,咱就做一點筆記,以免學(xué)會的知識偷偷跑掉。畢竟“好記性不如爛筆頭”。
p 段落標簽
顧名思義,就是寫一段話需要用到的標簽,用法如下:
<p>這是一段話(此處省略1500字)</p>
br 換行標簽
有時候,寫兩句就需要換一下行,就可以用到b
標簽,與普通文檔中的回車符意義相同,用法如下:
<p>這是一段話(此處省略1500字)<br />這句我就換了行</p>
a 超鏈接標簽
頁面之間跳轉(zhuǎn)就需要用到超鏈接,其中的href
屬性用于定義超鏈接的URL
,用法如下:
<a >這是一個超鏈接</a>
hr 水平線標簽
當你需要一條長長的分割線時,或許可以考慮一下hr
標簽,用法如下:
<p>
我說完了,需要一條分割線結(jié)束
<hr />
第二部分
</p>
h1-h6 標題標簽
當需要字體大小不同的標題時,可以用標題標簽,字體的大小從h1
開始到h6
越來越小,h1
最大,h6
最小,用法如下:
<h1>這是h1標簽,字體很大</h1>
<h6>這是h6標簽,字體很小</h6>
pre 預(yù)先格式化標簽
因為HTML
很多標簽會合并空格,所以當你想要展示很多個空格的時候,往往并不會像你想的那樣,當然,pre
標簽可以滿足你的要求,被包圍在pre
里的文本通常會保留空格和換行符,并且字體等寬。字體等寬:其實漢字一般都是等寬的,設(shè)置字體等寬對于字母比較明顯,可以看下面示例:
<pre>
這句話前面大概有13個空格
Hello,html (這句話前沒有空格,就會頂行顯示)
</pre>
<p>Hello,html (這句話是用p標簽對比上文字母的字體等寬)</p>
可以看到,pre
里的l
和o
寬度一樣,而p標簽里l
寬度比o
窄,這就是pre
標簽的字體等寬。
header 頁眉標簽
頁眉標簽即在頁面最上方展示的內(nèi)容,用法如下:
<footer>這里是頁腳</footer>
nav 導(dǎo)航欄標簽
一般網(wǎng)頁在頁眉下面都有一條包含首頁之類的導(dǎo)航欄,nav實現(xiàn)的就是這一效果,一般搭配a標簽使用,用法如下:
<nav>
<a >清華大學(xué)出版社</a>
<a >w3cschool在線教程</a>
</nav>
section 節(jié)標簽
section
標簽定義文檔中的節(jié)(section、區(qū)段),比如章節(jié)、頁眉、頁腳或文檔中的其他部分,用法上和div
相差不大,用法如下:
<section>
<h1>標題</h1>
<p>正文內(nèi)容</p>
</section>
b 加粗標簽
b
標簽原本含義是加粗,現(xiàn)在表示“文體突出”文字,通俗講就是普通段落文字中突出不安分的文字,并把這部分文本呈現(xiàn)為粗體文本,用法如下:
<p>這句話突然有幾個字被<b>加粗</b></p>
strong 加粗標簽
strong
在HTML4中,表示strong emphasized text
,即“更強調(diào)的文本”,在HTML5
中其含義變成了important text
,即“重要的文本”。其效果大致與b相同,都是對文本進行加粗,用法如下:
<p>是該<strong>強調(diào)</strong>幾句話了</p>
i 傾斜標簽
i
標簽原本只是傾斜,現(xiàn)在用來體現(xiàn)與文本中其余部分不同的部分,并把這部分文本呈現(xiàn)為斜體文本,用法如下:
<p>有幾個字走著走著就<i>倒</i>了</p>
em 傾斜標簽
em
在HTML4
和HTML5
中,都表示emphasized text
,即“強調(diào)的文本”,也有說法認為HTML5
中,em
表示有壓力的強調(diào),意義基本一致。其效果大致與i
相同,都是對文本進行傾斜處理,用法如下:
<p>又有幾個字也<em>倒</em>了下來</p>
cite 作品標題
cite
用來定義作品(比如書籍、歌曲、電影、電視節(jié)目、繪畫、雕塑等)的標題,其效果與傾斜類似,用法如下:
<p>莊子的<cite>《逍遙游》</cite>我并沒有看過</p>
small 小型文本標簽
small
將旁注呈現(xiàn)為小型文本。免責(zé)聲明、注意事項、法律限制或版權(quán)聲明等通常都使用小型文本,小型文本有時也用于新聞來源、許可要求等。對于由em
元素強調(diào)過的或由strong
元素標記為重要的文本,small
元素不會取消對文本的強調(diào),也不會降低這些文本的重要性。當然,b
和i
標簽也可以應(yīng)用在small
里,用法如下:
<small>這里是<em>小型文本</em><strong>標簽</strong></small>
ins&del 標記文本改變標簽
ins
標記定義文檔中的插入文本,和del
標記一起使用,來描述對文檔的更新和修正。del
表示刪除的文本,瀏覽器中通常以刪除線文本顯示,ins
表示新添加的文本,瀏覽器中通常以下劃線文本顯示。用法及效果如下:
<ins>這句是新添加的文本</ins>
<del>這句是剛剛刪除的文本</del>
sub&sup 文字上下標標簽
sub
標記可定義下標文本,sup
標記可定義上標文本。用法及效果如下:
<p>
因式分解得:(x+1)<sup>2</sup>=4
<br />
解得:x<sub>1</sub>=-3, x<sub>2</sub>=1
</p>
time 時間標簽
time
標記是HTML5
的新增標記,用來定義日期時間。網(wǎng)頁中經(jīng)常會出現(xiàn)日期和時間信息,但過去一直沒有標準的方式來標注,time
標記的出現(xiàn)便是為了解決這個問題,其目的是讓搜索引擎等其它程序可以更容易的提取日期時間信息,但在頁面上似乎并不顯示其內(nèi)容,用法如下:
<p>
我每天早上<time>6:00</time>起床。
我姐姐的<time datetime="1995-10-13">生日</time>馬上要到了。
</p>
var 變量標簽
var
標簽經(jīng)常與 code
和pre
標簽一起使用,用來顯示計算機編程代碼范例及類似方面的特定元素,用var
標簽標記的文本通常顯示為斜體。
address 聯(lián)系信息標簽
address
標簽定義文檔或文章的作者/擁有者的聯(lián)系信息,address
元素中的文本通常呈現(xiàn)為斜體,address
元素通常連同其他信息被包含在footer
元素中,其用法如下
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
div 塊級容器標簽
div
元素是塊級元素,它是可用于組合其它HTML
元素的容器,div
元素沒有特定的含義,如果與 CSS
一同使用,div
元素可用于對大的內(nèi)容塊設(shè)置樣式屬性。在HTML5
中header
等結(jié)構(gòu)化元素出現(xiàn)之前,最常用的組容器就是div
元素,它代表一個通用的內(nèi)容塊,結(jié)合CSS
對文檔賦予結(jié)構(gòu)。其用法如下:
<div style="color: red;">
<h3>標題</h3>
<p>文本內(nèi)容</p>
</div>
span 行內(nèi)容器標簽
span
元素是一個行內(nèi)元素,它是div
元素的一位表親,同樣是一個沒有語義的通用元素,就其本身而言,span
元素對文檔的視覺效果沒有任何影響,配合CSS
使用時會發(fā)生變化,用法及效果如下:
<p>
在無數(shù)藍色的眼睛和褐色的眼睛之中,我有著一雙寶石般的黑色眼睛,<span>我驕傲,我是<strong>中國</strong>人!</span>
</p>
<p>
在無數(shù)藍色的眼睛和褐色的眼睛之中,我有著一雙寶石般的黑色眼睛,<span style="color: red;">我驕傲,我是<strong>中國</strong>人!</span>
</p>
ul 無序列表標簽
無序列表類似于word
中的項目符號列表,列表項排列沒有順序,只以項目符號作為分項標識。無序列表使用ul
標記,需要為每一個列表項使用標記li
標記,用法如下:
<ul>
<li>唱</li>
<li>跳</li>
<li>rap</li>
<li>籃球</li>
</ul>
ol 有序列表標簽
有序列表使用標記ol
,其列表項仍然使用標記li
,當需要子菜單或更多層次時,需要使用嵌套的方式實現(xiàn),具體代碼及效果如下:
<ol>
<li>一級菜單第一個</li>
<ol>
<li>二級菜單第一個</li>
<ol>
<li>三級菜單第一個</li>
</ol>
<li>二級菜單第二個</li>
</ol>
<li>一級菜單第二個</li>
<li>一級菜單第三個</li>
</ol>
dl 描述列表標簽
dl
元素代表了一個描述列表,由0到多個“術(shù)語-描述”組構(gòu)成,每一組都與一個或多個“術(shù)語”(dt元素的內(nèi)容)以及一個或多個“描述”(dd元素的內(nèi)容)相關(guān),具體代碼及效果如下:
<dl>
<dt>赤鷩</dt>
<dd>鳥,可以御火</dd>
<dd>赤鷩,山雞之屬,胸腹洞赤,冠金,背黃,頭綠,尾中有赤,毛彩鮮明。</dd>
<dt>鱧魚</dt>
<dd>魚,其狀如鱉,其音如羊</dd>
<dt>肥囗</dt>
<dd>蛇,六足四翼,見則天下大旱</dd>
</dl>
附:使用字符實體表示特殊字符
大多數(shù)字母數(shù)字字符都可以在HTML
文檔中直接使用而不會有任何問題,然而,有一些字符在HTML
中具有特殊含義,瀏覽器很可能會錯誤理解,這時,就需要使用一組不同的字符代替這些特殊字符,這就是字符實體(也叫轉(zhuǎn)義字符),部分常用符號如下:
以上就是關(guān)于HTML
文本標簽的筆記了。有興趣的同學(xué)可以用HTML編輯器測試一下代碼效果。
想學(xué)習(xí)HTML的請往這走:
HTML教程:http://m.hgci.cn/html/
HTML零基礎(chǔ)入門:http://m.hgci.cn/minicourse/play/html_txy