App下載

HTML學(xué)習(xí)筆記之文本標(biāo)簽

猿友 2020-07-28 17:10:04 瀏覽數(shù) (4739)
反饋

作為一名熱愛(ài)學(xué)習(xí)的同學(xué)，每當(dāng)學(xué)習(xí)一點(diǎn)新知識(shí)，咱就做一點(diǎn)筆記，以免學(xué)會(huì)的知識(shí)偷偷跑掉。畢竟“好記性不如爛筆頭”。

p 段落標(biāo)簽

顧名思義，就是寫(xiě)一段話(huà)需要用到的標(biāo)簽，用法如下：

        <p>這是一段話(huà)（此處省略1500字）</p>

br 換行標(biāo)簽

有時(shí)候，寫(xiě)兩句就需要換一下行，就可以用到b標(biāo)簽，與普通文檔中的回車(chē)符意義相同，用法如下：

        <p>這是一段話(huà)（此處省略1500字）<br />這句我就換了行</p>

a 超鏈接標(biāo)簽

頁(yè)面之間跳轉(zhuǎn)就需要用到超鏈接，其中的href屬性用于定義超鏈接的URL，用法如下：

        <a >這是一個(gè)超鏈接</a>

hr 水平線(xiàn)標(biāo)簽

當(dāng)你需要一條長(zhǎng)長(zhǎng)的分割線(xiàn)時(shí)，或許可以考慮一下hr標(biāo)簽，用法如下：

        <p>
            我說(shuō)完了，需要一條分割線(xiàn)結(jié)束
            <hr />
            第二部分
        </p>

h1-h6 標(biāo)題標(biāo)簽

當(dāng)需要字體大小不同的標(biāo)題時(shí)，可以用標(biāo)題標(biāo)簽，字體的大小從h1開(kāi)始到h6越來(lái)越小，h1最大，h6最小，用法如下：

        <h1>這是h1標(biāo)簽，字體很大</h1>
        <h6>這是h6標(biāo)簽，字體很小</h6>

pre 預(yù)先格式化標(biāo)簽

因?yàn)?code>HTML很多標(biāo)簽會(huì)合并空格，所以當(dāng)你想要展示很多個(gè)空格的時(shí)候，往往并不會(huì)像你想的那樣，當(dāng)然，pre標(biāo)簽可以滿(mǎn)足你的要求，被包圍在pre里的文本通常會(huì)保留空格和換行符，并且字體等寬。字體等寬：其實(shí)漢字一般都是等寬的，設(shè)置字體等寬對(duì)于字母比較明顯，可以看下面示例：

        <pre>
             這句話(huà)前面大概有13個(gè)空格
Hello,html (這句話(huà)前沒(méi)有空格，就會(huì)頂行顯示)
        </pre>
        <p>Hello,html (這句話(huà)是用p標(biāo)簽對(duì)比上文字母的字體等寬)</p>

pre 預(yù)先格式化標(biāo)簽

可以看到，pre里的l和o寬度一樣，而p標(biāo)簽里l寬度比o窄，這就是pre標(biāo)簽的字體等寬。

header 頁(yè)眉標(biāo)簽

頁(yè)眉標(biāo)簽即在頁(yè)面最上方展示的內(nèi)容，用法如下：

        <footer>這里是頁(yè)腳</footer>

nav 導(dǎo)航欄標(biāo)簽

一般網(wǎng)頁(yè)在頁(yè)眉下面都有一條包含首頁(yè)之類(lèi)的導(dǎo)航欄，nav實(shí)現(xiàn)的就是這一效果，一般搭配a標(biāo)簽使用，用法如下：

            <nav>
                <a >清華大學(xué)出版社</a>
                <a >w3cschool在線(xiàn)教程</a>
            </nav>

section 節(jié)標(biāo)簽

section標(biāo)簽定義文檔中的節(jié)（section、區(qū)段），比如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其他部分，用法上和div相差不大，用法如下：

        <section>
          <h1>標(biāo)題</h1>
          <p>正文內(nèi)容</p>
        </section>

b 加粗標(biāo)簽

b標(biāo)簽原本含義是加粗，現(xiàn)在表示“文體突出”文字，通俗講就是普通段落文字中突出不安分的文字，并把這部分文本呈現(xiàn)為粗體文本，用法如下：

        <p>這句話(huà)突然有幾個(gè)字被<b>加粗</b></p>

strong 加粗標(biāo)簽

strong在HTML4中，表示strong emphasized text，即“更強(qiáng)調(diào)的文本”，在HTML5中其含義變成了important text，即“重要的文本”。其效果大致與b相同，都是對(duì)文本進(jìn)行加粗，用法如下：

        <p>是該<strong>強(qiáng)調(diào)</strong>幾句話(huà)了</p>

i 傾斜標(biāo)簽

i標(biāo)簽原本只是傾斜，現(xiàn)在用來(lái)體現(xiàn)與文本中其余部分不同的部分，并把這部分文本呈現(xiàn)為斜體文本，用法如下：

        <p>有幾個(gè)字走著走著就<i>倒</i>了</p>

em 傾斜標(biāo)簽

em在HTML4和HTML5中，都表示emphasized text，即“強(qiáng)調(diào)的文本”，也有說(shuō)法認(rèn)為HTML5中，em表示有壓力的強(qiáng)調(diào)，意義基本一致。其效果大致與i相同，都是對(duì)文本進(jìn)行傾斜處理，用法如下：

        <p>又有幾個(gè)字也<em>倒</em>了下來(lái)</p>

cite 作品標(biāo)題

cite用來(lái)定義作品（比如書(shū)籍、歌曲、電影、電視節(jié)目、繪畫(huà)、雕塑等）的標(biāo)題，其效果與傾斜類(lèi)似，用法如下：

        <p>莊子的<cite>《逍遙游》</cite>我并沒(méi)有看過(guò)</p>

small 小型文本標(biāo)簽

small將旁注呈現(xiàn)為小型文本。免責(zé)聲明、注意事項(xiàng)、法律限制或版權(quán)聲明等通常都使用小型文本，小型文本有時(shí)也用于新聞來(lái)源、許可要求等。對(duì)于由em元素強(qiáng)調(diào)過(guò)的或由strong元素標(biāo)記為重要的文本，small元素不會(huì)取消對(duì)文本的強(qiáng)調(diào)，也不會(huì)降低這些文本的重要性。當(dāng)然，b和i標(biāo)簽也可以應(yīng)用在small里，用法如下：

        <small>這里是<em>小型文本</em><strong>標(biāo)簽</strong></small>

ins&del 標(biāo)記文本改變標(biāo)簽

ins標(biāo)記定義文檔中的插入文本，和del標(biāo)記一起使用，來(lái)描述對(duì)文檔的更新和修正。del表示刪除的文本，瀏覽器中通常以刪除線(xiàn)文本顯示，ins表示新添加的文本，瀏覽器中通常以下劃線(xiàn)文本顯示。用法及效果如下：

        <ins>這句是新添加的文本</ins>
        <del>這句是剛剛刪除的文本</del>

標(biāo)記文本改變標(biāo)簽

sub&sup 文字上下標(biāo)標(biāo)簽

sub標(biāo)記可定義下標(biāo)文本，sup標(biāo)記可定義上標(biāo)文本。用法及效果如下：

        <p>
            因式分解得：(x+1)<sup>2</sup>=4
            <br />
            解得：x<sub>1</sub>=-3, x<sub>2</sub>=1
        </p>

文字上下標(biāo)標(biāo)簽

time 時(shí)間標(biāo)簽

time標(biāo)記是HTML5的新增標(biāo)記，用來(lái)定義日期時(shí)間。網(wǎng)頁(yè)中經(jīng)常會(huì)出現(xiàn)日期和時(shí)間信息，但過(guò)去一直沒(méi)有標(biāo)準(zhǔn)的方式來(lái)標(biāo)注，time標(biāo)記的出現(xiàn)便是為了解決這個(gè)問(wèn)題，其目的是讓搜索引擎等其它程序可以更容易的提取日期時(shí)間信息，但在頁(yè)面上似乎并不顯示其內(nèi)容，用法如下：

        <p>
            我每天早上<time>6:00</time>起床。
            我姐姐的<time datetime="1995-10-13">生日</time>馬上要到了。
        </p>

var 變量標(biāo)簽

var標(biāo)簽經(jīng)常與 code和pre標(biāo)簽一起使用，用來(lái)顯示計(jì)算機(jī)編程代碼范例及類(lèi)似方面的特定元素，用var標(biāo)簽標(biāo)記的文本通常顯示為斜體。

address 聯(lián)系信息標(biāo)簽

address標(biāo)簽定義文檔或文章的作者/擁有者的聯(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 塊級(jí)容器標(biāo)簽

div元素是塊級(jí)元素，它是可用于組合其它HTML元素的容器，div元素沒(méi)有特定的含義，如果與 CSS 一同使用，div元素可用于對(duì)大的內(nèi)容塊設(shè)置樣式屬性。在HTML5中header等結(jié)構(gòu)化元素出現(xiàn)之前，最常用的組容器就是div元素，它代表一個(gè)通用的內(nèi)容塊，結(jié)合CSS對(duì)文檔賦予結(jié)構(gòu)。其用法如下：

        <div style="color: red;">
            <h3>標(biāo)題</h3>
            <p>文本內(nèi)容</p>
        </div>

span 行內(nèi)容器標(biāo)簽

span元素是一個(gè)行內(nèi)元素，它是div元素的一位表親，同樣是一個(gè)沒(méi)有語(yǔ)義的通用元素，就其本身而言，span元素對(duì)文檔的視覺(jué)效果沒(méi)有任何影響，配合CSS使用時(shí)會(huì)發(fā)生變化，用法及效果如下：

        <p>
            在無(wú)數(shù)藍(lán)色的眼睛和褐色的眼睛之中，我有著一雙寶石般的黑色眼睛，<span>我驕傲，我是<strong>中國(guó)</strong>人！</span>
        </p>
        <p>
            在無(wú)數(shù)藍(lán)色的眼睛和褐色的眼睛之中，我有著一雙寶石般的黑色眼睛，<span style="color: red;">我驕傲，我是<strong>中國(guó)</strong>人！</span>
        </p>

span 行內(nèi)容器標(biāo)簽

ul 無(wú)序列表標(biāo)簽

無(wú)序列表類(lèi)似于word中的項(xiàng)目符號(hào)列表，列表項(xiàng)排列沒(méi)有順序，只以項(xiàng)目符號(hào)作為分項(xiàng)標(biāo)識(shí)。無(wú)序列表使用ul標(biāo)記，需要為每一個(gè)列表項(xiàng)使用標(biāo)記li標(biāo)記，用法如下：

        <ul>
            <li>唱</li>
            <li>跳</li>
            <li>rap</li>
            <li>籃球</li>
        </ul>

ol 有序列表標(biāo)簽

有序列表使用標(biāo)記ol，其列表項(xiàng)仍然使用標(biāo)記li，當(dāng)需要子菜單或更多層次時(shí)，需要使用嵌套的方式實(shí)現(xiàn)，具體代碼及效果如下：

        <ol>
            <li>一級(jí)菜單第一個(gè)</li>
            <ol>
                <li>二級(jí)菜單第一個(gè)</li>
                <ol>
                    <li>三級(jí)菜單第一個(gè)</li>
                </ol>
                <li>二級(jí)菜單第二個(gè)</li>
            </ol>
            <li>一級(jí)菜單第二個(gè)</li>
            <li>一級(jí)菜單第三個(gè)</li>
        </ol>

ol 有序列表標(biāo)簽

dl 描述列表標(biāo)簽

dl元素代表了一個(gè)描述列表，由0到多個(gè)“術(shù)語(yǔ)-描述”組構(gòu)成，每一組都與一個(gè)或多個(gè)“術(shù)語(yǔ)”（dt元素的內(nèi)容）以及一個(gè)或多個(gè)“描述”（dd元素的內(nèi)容）相關(guān)，具體代碼及效果如下：

        <dl>
            <dt>赤鷩</dt>
            <dd>鳥(niǎo)，可以御火</dd>
            <dd>赤鷩，山雞之屬，胸腹洞赤，冠金，背黃，頭綠，尾中有赤，毛彩鮮明。</dd>
            <dt>鱧魚(yú)</dt>
            <dd>魚(yú)，其狀如鱉，其音如羊</dd>
            <dt>肥囗</dt>
            <dd>蛇，六足四翼，見(jiàn)則天下大旱</dd>
        </dl>

附：使用字符實(shí)體表示特殊字符

大多數(shù)字母數(shù)字字符都可以在HTML文檔中直接使用而不會(huì)有任何問(wèn)題，然而，有一些字符在HTML中具有特殊含義，瀏覽器很可能會(huì)錯(cuò)誤理解，這時(shí)，就需要使用一組不同的字符代替這些特殊字符，這就是字符實(shí)體（也叫轉(zhuǎn)義字符），部分常用符號(hào)如下：

特殊字符

以上就是關(guān)于HTML文本標(biāo)簽的筆記了。有興趣的同學(xué)可以用HTML編輯器測(cè)試一下代碼效果。

想學(xué)習(xí)HTML的請(qǐng)往這走：

HTML教程：http://www.o2fo.com/html/

HTML零基礎(chǔ)入門(mén)：http://www.o2fo.com/minicourse/play/html_txy

HTML 前端

0 人點(diǎn)贊