整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          這些常用的HTML標簽,你還不知道嗎?

          著互聯(lián)網(wǎng)的不斷發(fā)展與前端開發(fā)技術(shù)的不斷進步,越來越多的人想在前端開發(fā)市場中分一杯羹,而HTML語言憑著它簡單易懂的特性成為了不少計算機萌新的入門語言。那么什么是HTML呢?

          什么是HTML

          HTML,即超文本標記語言,是一種標識性的語言。它包括一系列標簽,通過這些標簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一,使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本,HTML命令可以說明文字,圖形、動畫、聲音、表格、鏈接等。

          使用HTML語言,將所需要表達的信息按某種規(guī)則寫成HTML文件,通過專用的瀏覽器來識別,并將這些HTML文件“翻譯”成可以識別的信息,即現(xiàn)在所見到的網(wǎng)頁。而HTML標簽是HTML語言中最基本的單位,是HTML最重要的組成部分。

          什么是HTML標簽

          • HTML標簽是由一對尖括號括起來的關(guān)鍵詞,像<html>、<body>等。
          • HTML標簽通常是成對出現(xiàn)的,第一個標簽是開始標簽,第二個標簽是結(jié)束標簽。
          • 標簽不區(qū)分大小寫,最好用小寫。
          • 標簽可以嵌套,但是不可以交叉嵌套,如<a><b></a></b>。
          • 有些標簽功能比較簡單.使用一個標簽即可.這種標簽叫做自閉合標簽.如<br/> <hr/> <img />等。

          標簽分類

          標簽一般分為兩種:

          1. 塊級標簽

          占一整行的標簽。如<h>、<p>、<div>、<form>等

          2. 行內(nèi)標簽

          可以多個標簽共同占用一行的標簽。比如:<span>,<a>,<input>,<img>,<label>等

          3. 塊級標簽特點

          • 總是在新行上開始
          • 寬度缺省是它的容器的100%,除非設(shè)定一個寬度
          • 它可以容納內(nèi)聯(lián)元素和其他塊元素

          4. 行內(nèi)標簽特點

          • 和其他元素都在一行上
          • 寬度就是它的文字或圖片的寬度,不可改變
          • 內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素

          HTML特殊字符

          平時寫代碼很少用到HTML的特殊字符,最常用的可能是 (空格)了,但有時在移動端為了節(jié)省時間,可能會用這些字符實現(xiàn)某種特殊效果。

          使用方法:

          • 這些字符屬于unicode字符集,所以,你的文檔需要聲明為UTF-8;
          • 編號用在HTML中時,需要在前面加上&#符號;
          • 用于CSS文件中,但是需要用反斜杠\轉(zhuǎn)義;
          • 用于JavaScript,和CSS用法一樣,不過要用\u來轉(zhuǎn)義。

          常用HTML特殊字符

          HTML基本標簽簡介

          1. <!DOCTYPE html>標簽

          作用:聲明文檔的解析類型(document .compatMode),避免瀏覽器的怪異模式。

          瀏覽器有怪異模式(BackCompat)和標準模式(CSS1Compat)兩種模式,那么何為怪異模式和標準模式呢?

          • BackCompat:怪異模式,瀏覽器使用自己的怪異模式解析渲染頁面。
          • CSS1Compat:標準模式,瀏覽器使用W3C的標準解析渲染頁面。

          如果你的頁面沒有DOCTYPE的聲明,那么compatMode默認就是BackCompat,,如果是這樣的話那就很麻煩了-------瀏覽器按照自己的方式解析渲染頁面,即在不同的瀏覽器顯示不同的樣式。

          但是如果你的頁面添加了<!DOCTYPE html>,那么就等同于開啟了標準模式,瀏覽器就得老老實實的按照W3C的標準解析渲染頁面,這樣一來,你的頁面在所有的瀏覽器里顯示的就都是一個樣子了。

          這就是<!DOCTYPE html>的作用。

          1. <meta>標簽

          <meta>標簽用于提供關(guān)于 HTML 文檔的元數(shù)據(jù)(元數(shù)據(jù)是關(guān)于數(shù)據(jù)的信息),元數(shù)據(jù)不會顯示在頁面上,但是對于機器是可讀的。例如meta被用于設(shè)置關(guān)鍵字設(shè)置頁面描述設(shè)置作者設(shè)置字符集設(shè)置頁面定時跳轉(zhuǎn)等等。meta標簽放置在head標簽中,對meta的設(shè)置對搜索引擎注冊、搜索引擎優(yōu)化排名等有至關(guān)重要的作用。

          <meta>有兩個屬性,分別是http-equiv屬性和name屬性,不同屬性有不同的參數(shù),這些不同的參數(shù)使得名,meta標簽有不同的功能:

          http-equiv屬性

          顧名思義,相當于http的文件頭作用,它可以向瀏覽器傳回一些有用的信息,以幫助正確和精確地顯示網(wǎng)頁內(nèi)容,與之對應(yīng)的屬性值為content,content中的內(nèi)容其實就是各個參數(shù)的變量值。

          • 頁面編碼:

          • 頁面刷新和跳轉(zhuǎn)

          • 解決IE瀏覽器兼容性問題

          name屬性

          name屬性主要用于描述網(wǎng)頁,與之對應(yīng)的屬性值為content,content中的內(nèi)容主要是便于搜索引擎機器人查找信息和分類信息用的。

          • 供搜索引擎使用(關(guān)鍵詞)


          • 網(wǎng)站信息描述

          1. <title>標簽
          • title標簽寫網(wǎng)站頭部信息,即網(wǎng)頁標簽的名稱:

          <title>開云見日</title>

          1. <link>標簽

          link標簽有兩個作用:

          1.設(shè)置標簽頁圖標:


          2.外聯(lián)CSS文件:


          1. <style>標簽

          用于存放或編寫css文件:

          <style type="text/css"></style>

          1. <script>標簽

          1.引進文件

          <script type="text/javasvript" src="http://www.ncerp.cn/js/main.js"></script>

          2.寫js代碼

          <script type="text/javascript">...</script>

          1. 常用標簽
          • <hn>:n的取值范圍是1~6; 從大到小. 用來表示標題.
          • <p>:段落標簽. 包裹的內(nèi)容被換行.并且也上下內(nèi)容之間有一行空白.
          • <b> <strong>:加粗標簽.
          • <strike>:為文字加上一條中線.
          • <em>:文字變成斜體.
          • <sup>和<sub>:上角標 和 下角表.
          • <br>:換行.
          • <hr>:水平線
          • <div>:白板,本身沒有特性,塊級標簽。
          • <span>:白板,本身沒有特性,行內(nèi)標簽。

          <sup>和<sub>的使用

        1. <p>這個文本包含 <sub>下標</sub>文本。</p>
        2. <p>這個文本包含 <sup>上標</sup> 文本。</p>
          1. <a>標簽
          • 作超鏈接:跳轉(zhuǎn)到指定url

          • 作錨點:條轉(zhuǎn)到指定id

          1. <img>標簽

          屬性如下:

        3. src: 要顯示圖片的路徑.
        4. alt: 圖片沒有加載成功時的提示.
        5. title: 鼠標懸浮時的提示信息.
        6. width: 圖片的寬
        7. height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放
        8. HTML還有很多標簽,像<ul>、<ol>、<dl>、<li>、<br>等等。在目前的移動應(yīng)用開發(fā)大潮下,使用web技術(shù)進行移動應(yīng)用開發(fā)正變得越來越流行,慢慢會變成以HTML為核心的技術(shù)棧配合數(shù)據(jù)庫的天下。讓我們找準時代發(fā)展方向,努力學習,成為時代的弄潮兒吧!

          、abbr

          abbr 全稱是 abbreviations,意思是縮寫。應(yīng)用場景也很簡單,為一些文章中的縮寫增加注釋。

          以前在文章中對于縮寫的解釋經(jīng)常會這么做:

          DAU(Daily Active User),日活躍用戶數(shù) ......
          

          那我們用 abbr 標簽?zāi)兀?/span>

          <abbr title="Daily Active User">
              DAU
          </abbr>
          <span>,日活躍用戶數(shù) ......</span>
          

          展示的效果如下:

          這個標簽就可以把全稱隱藏掉,弱化信息量,讓真正不知道該縮寫的用戶主動去獲取縮寫的具體意思,這個在 markdown 里經(jīng)常會出現(xiàn)。

          二、mark

          <mark/> 在 markdown 中也是很常用的,用于將包裹的文本高亮展示。

          <mark>高亮文本</mark>
          

          效果如下:

          如果全文統(tǒng)一高亮樣式,可以專門對 mark 標簽進行樣式重置,這樣就不用對你用的每個 div 加一個 highlight 的類名了,又不語義化,又徒增文檔大小。

          三、sup、sub

          <sup/><sub/>分別表示上標和下標,在 markdown 中出現(xiàn)得也很頻繁,比如數(shù)學公式和引用。

          <div>3<sup>[2]</sup></div>
          <div>4<sub>2</sub></div>
          

          效果如下:

          上標和下標的樣式原理也比較簡單,主要就是利用了 vertical-aligntopsub 屬性值,然后將字號縮小,不過有現(xiàn)成的標簽,干嘛不用呢?

          四、figure

          figure 是用于包裹其它標簽的內(nèi)容的,然后再利用另一個標簽 figcaption ,可以對包裹的內(nèi)容進行一個文本描述,例如:

          <figure>
              <img src="/media/cc0-images/elephant-660-480.jpg"
                   alt="大象">
              <figcaption>這是一張大象的照片</figcaption>
          </figure>
          

          效果如下:

          那要是圖片掛了呢?

          再友好點處理,我們把 img 標簽的 alt 屬性去掉。

          漂亮,終于把我一直厭煩的圖裂 icon 給干掉了,樣式還巨好看。

          當然不止能包裹 img 標簽,其它任何都是可以的。

          嘿嘿,給大家在本文來個實戰(zhàn),下面這個可以點擊,樣式也是利用了 figure 這個標簽。

          我是figure標簽產(chǎn)生的

          五、progress

          說到 <progress/> 這個標簽就很有意思了,去年有段時間我做的業(yè)務(wù)里涉及到了進度條,當時是前同事做的,然后有一些性能問題,我就在研究如何優(yōu)化,減少進度條改變帶來的性能問題。

          雖然最后問題是解決了,但是也有幸收到了張鑫旭大佬的評論,他告訴我 progress 這個標簽就足夠了,既有語義化,又有進度條的功能,性能還好,兼容性也很不錯。后來經(jīng)過一番嘗試,還真是,當時是我孤陋寡聞了,也安利給大家。

          <!-- 進度條最大值為100,當前進度為60,即60% -->
          <progress max="100" value="60"/>
          

          瀏覽器自帶的樣式就已經(jīng)很好看了,效果如下:

          業(yè)務(wù)中我們也就可以通過控制 value 屬性,來改變進度條的進度了。

          六、area

          area 這個標簽也非常有意思,它的作用是為圖片提供點擊熱區(qū),可以自己規(guī)定一張圖的哪些區(qū)域可點擊,且點擊后跳轉(zhuǎn)的鏈接,也可以設(shè)置成點擊下載文件,我們來舉個例子:

            <img src="example.png" width="100" height="100" alt="" usemap="#map">
          
            <map name="map">
              <area shape="rect" coords="0,0,100,50" alt="baidu" href="https://www.baidu.com">
              <area shape="rect" coords="0,50,100,100" alt="sougou" href="https://www.sogou.com/">
            </map>
          

          area 一般要搭配 map 標簽一起使用,每個 area 標簽表示一個熱區(qū),例如上面代碼中,我們定義了兩個熱區(qū),熱區(qū)形狀都為rect(矩形),他們的熱區(qū)分別是:

          • 坐標 (0,0) 到坐標 (100,50) 的一個矩形
          • 坐標 (0,50) 到坐標 (100,100) 的一個矩形

          我們都知道,默認的坐標軸是這樣的:

          因此,我們劃分的兩個熱區(qū)就是:

          最后再來看一下我們的實際效果:

          i

          七、details

          details 字面意思是 "詳情",在 markdown 里也經(jīng)常用,用該標簽包裹了的內(nèi)容默認會被隱藏,只留下一個簡述的文字,我們點擊以后才會展示詳細的內(nèi)容。

          <details>
            <p>我是一段被隱藏的內(nèi)容</p>
          </details>
          

          效果如下:

          這還沒有加任何一行的 js 代碼,我們點擊后,details 標簽上會多一個 open 的屬性,被隱藏的內(nèi)容就展示出來了。

          默認情況下,簡要文字為 "詳情",想要修改這個文字,要搭配 summary 標簽來使用。

          <details>
            <summary>點擊查看更多</summary>
            <p>我是一段被隱藏的內(nèi)容</p>
          </details>
          

          就搞定了!

          八、dialog

          瀏覽器自帶彈窗方法 alertconfirmprompt,樣式固定且每個瀏覽器不同,同時還會阻塞頁面運行,除了這個還提供了一個 dialog 標簽,它的使用方式有點類似于現(xiàn)在各大組件庫的 Modal 組件了,瀏覽器還為該標簽提供了原生的 dom 方法:showModalclose,可以直接控制彈窗的展示和隱藏。

          <dialog id="dialog">
              <input type="text">
              <button id="close">ok</button>
          </dialog>
          <button id="openBtn">打開彈框</button>
          
          <script>
              const dialog = document.getElementById('dialog')
              const openBtn = document.getElementById('openBtn')
              const closeBtn = document.getElementById('close')
            
              openBtn.addEventListener('click', () => {
                  // 打開彈框
                  dialog.showModal()
              })
              closeBtn.addEventListener('click', () => {
                  // 隱藏彈框
                  dialog.close()
              })
          </script>
          

          效果如下:

          細心的你有沒有發(fā)現(xiàn),這原生的彈框還自帶背景蒙層,點擊是關(guān)閉不掉的,但起碼它不會阻塞頁面。

          然后我們在彈窗展示時,也可以通過 esc 鍵來關(guān)閉彈窗。

          九、datalist

          datalist 是用于給輸入框提供可選值的一個列表標簽,類似咱們常用的 Select 組件。

          我可以用其實現(xiàn)一個 "輸入聯(lián)想" 的功能。

          <label> 輸入C開頭的英文單詞:</label>
          <input list="c_words"/>
          
          <datalist id="c_words">
            <option value="China">
            <option value="Click">
            <option value="Close">
            <option value="Const">
            <option value="Count">
          </datalist>
          

          來試一試:

          剛點擊時會把所有推薦的選項都列出來,然后根據(jù)后面輸入的內(nèi)容,會過濾掉不匹配的選項,比如我輸入 cl,會過濾掉不是 cl 開頭的單詞,最后只剩下 ClickClose 了。

          最后我發(fā)現(xiàn),他這個下拉框有點好看啊?為啥這原生的 input 框默認樣式那么丑,啥時候改改。

          十、fieldset

          fieldset 標簽是用于分組管理 form 表單內(nèi)的元素的,若 fieldset 設(shè)置了 disabled 屬性,則被其包裹的所有表單元素都會被禁用置灰,且不會隨著表單一起提交上去,是的就成了擺設(shè)。

          什么意思呢?看個例子:

          <form action="/example">
            <fieldset disabled>
              <legend>被禁用區(qū)域</legend>
              <label>ID:</label>
              <input type="text" name="id" value="1">
              <label>郵箱:</label>
              <input type="text" name="email" value="1234567@163.com">
            </fieldset>
            <label>名字:</label>
            <input type="text" name="name">
            <button type="submit">提交</button>
          </form>
          

          這里我們把 ID郵箱 的表單包裹了起來,且設(shè)置了 disabled,只開放了一個 name 的輸入控件,此時界面如下:

          可以看到除了 name 輸入框,其它的兩個輸入框都被禁用了,此時點提交會是什么樣子呢?

          嗯,只提交了 name 字段。

          十一、noscript

          這個標簽是在瀏覽器不支持或禁用了 javascript 時才展示的,大多用于對 js 強依賴的應(yīng)用,比如現(xiàn)在大部分的 SPA 頁面,一旦不支持 javascript,頁面基本上什么內(nèi)容都沒了,此時可以靠這個標簽做友好提示。

          一般我們不需要特地去使用,大多都是在打包過程中自動插入到 html 靜態(tài)文件里去的,例如:

          // init.js
          const root = document.getElementById('root')
          const button = document.createElement('button')
          button.innerText = '點擊出彈窗'
          root.appendChild(button)
          
          <!-- index.html -->
          <script defer src="./init.js"></script>
          
          <noscript>
            不好意思,你的瀏覽器不支持或禁用了 JavaScript,請更換瀏覽器或啟用 JavaScript
          </noscript>
          
          <div id="root"></div>
          

          未禁用 javascript 時,頁面是這樣的:

          禁用了 javascript 時,是這樣的:

          .標簽語義化

          提到標簽,很多剛?cè)腴T前端開發(fā)的人,肯定都會很納悶,這么多HTML標簽我如何記住呢?我又應(yīng)該根據(jù)什么依據(jù)去正確使用它呢?其實這樣的問題,我剛開始和大家一樣苦悶,但是在我學習Web頁面開發(fā)的過程中,然后不斷的積累,不斷的總結(jié),發(fā)現(xiàn)要想記住HTML標簽以及怎樣更好的去使用這些標簽,需要做到以下三點:

          第一點:不要死記硬背,沒意義,只需要記住常用的哪幾個足矣。

          第二點:根據(jù)內(nèi)容選擇使用HTML標簽,什么意思呢?見下文分解。

          第三點:遵循W3C的規(guī)范。

          首先,第一點咱們就不用說,不讓死記硬背,就是要多寫頁面,多敲代碼,久而久之孰能生巧,巧能生花,慢慢的你就能記住這些標簽了,而且在開發(fā)頁面的過程中,你們會發(fā)現(xiàn),咱們最常用的也就是那么幾個而已。

          其次,第二點根據(jù)內(nèi)容選擇使用HTML標簽,這一點非常關(guān)鍵,因為你掌握了這一點,你能很好地去使用HTML標簽,并且能讓頁面變得很優(yōu)質(zhì),這也會提高你網(wǎng)頁被搜索引擎收錄。

          最后,也就是第三點,這一點自然不用懷疑,如果要想讓頁面更好的在不同的瀏覽器中呈現(xiàn)出一致的效果,那么必須遵循W3C的規(guī)范。

          說了這么多,只是一些學習需要注意的問題,下面才是真正解開怎樣去使用和記住標簽這個謎團的方法。

          我們在使用標簽的過程中,大家會發(fā)現(xiàn)類似的標簽,比如標題標簽(h1-h6)、p(段落標簽)、a(超鏈接標簽)以及圖片標簽(img)等,通過這些標簽的名稱,咱們是不是不難理解吧,很直觀的就知道這些標簽該怎么,用于何處。而這些名稱的含義就是我們所說的標簽語義化。隨著智能手機的出來,移動Web都是通過H5去開發(fā)頁面,而H5中的HTML標簽就比之前版本的HTML標簽更加具有語義化。

          那么什么是標簽語義化呢?所謂的標簽語義化,指的就是標簽所代表的含義。咱們可以通過標簽的含義,正確地去使用它。

          標簽語義化的作用:

          • 通過使用語義化標簽,更能精準地將其把內(nèi)容呈現(xiàn)出來。
          • 通過使用語義化標簽,讓頁面結(jié)構(gòu)更加的清晰,方便代碼的閱讀和維護。
          • 能讓瀏覽器或網(wǎng)絡(luò)爬蟲更好地解析,從而更好地分析和抓取網(wǎng)頁中的內(nèi)容。
          • 使用語義化標簽還能讓搜索引擎得到更好的優(yōu)化。

          如下圖所示,通過使用語義化標簽和沒使用任何標簽,就能直觀感受到語義化標簽的好處。

          普通的文本和使用語義化標簽后的效果對比圖

          那么如何去判斷一個頁面中,語義化是否良好呢?很簡單,直接扒掉CSS這層漂亮的衣服,當我們把CSS去掉后,如果頁面中的結(jié)構(gòu)依然組織有序,并且有良好的可讀性,那么它就是非常良好的。

          如何去使用這些標簽?zāi)兀渴紫雀鶕?jù)內(nèi)容確定語義化的標簽,其次再根據(jù)呈現(xiàn)需求,使用CSS樣式。因此HTML標簽并非通過死記硬背,而是通過在使用的過程中,利用HTML標簽的語義化去記憶。如下圖所示,通過使用語義化標簽,瞬間就能把普通的文本,以更清晰的結(jié)構(gòu)呈現(xiàn)出來。

          使用語義化的普通文本,變得更為結(jié)構(gòu)清晰

          2.常用標簽分類匯總

          通常我們常見的標簽有標題標簽、段落標簽、水平線標簽、換行標簽以及div和span標簽,這些標簽又被統(tǒng)稱為排版標簽。

          在開發(fā)中,排版標簽主要是和CSS搭配使用,主要是用于顯示網(wǎng)頁的整體結(jié)構(gòu),也是網(wǎng)頁布局中常用的標簽。下面我一一了解一下。

          排版標簽:

          【1】標題標簽(h1-h6)

          • 縮寫來源:標題標簽的英文單詞是head,因此它使用它的縮寫h來表示。
          • 語義:標題標簽主要是用于突顯標題內(nèi)容,它是h1-h6(分為1級標題、2級標題、3級標題......6級標題),級別依次遞減。級別越小,標題就會越小。
          • 語法格式如下:


          標題標簽的使用

          呈現(xiàn)的效果如下:

          呈現(xiàn)的效果


          一句話總結(jié):使用了標題標簽的文字會加粗,會根據(jù)級別顯示文字的大小,并且一行只能放一個標題。

          【2】段落標簽(p)

          • 縮寫來源:p標簽的英文單詞是paragraph,表示段落的意思。
          • 語義:p標簽可以把html文檔分割為若干段落。在網(wǎng)頁中要想把文字以段落的形式呈現(xiàn),并且有條不紊的,那么段落就是必備的標簽。
          • 語法格式如下:

          p標簽語法格式


          【3】水平線標簽(hr)

          • 縮寫來源:hr的英文單詞是horizontal,表示橫線的意思。
          • 語義:它表示分隔線,用于將文字內(nèi)容分隔開,讓文檔結(jié)構(gòu)看起來更加清晰,層次分明。當然在網(wǎng)頁中除了使用分隔線(hr)標簽來實現(xiàn),還可以通過圖片插入以及CSS樣式來實現(xiàn),只不過使用hr標簽是最簡單的方式。提示:CSS樣式是頁面中的重點,此處主要是介紹HTML,因此暫不做詳細說明。
          • 語法格式:<hr />。
          • 標簽特點:它是一個單標簽,hr標簽?zāi)J是以水平線的樣式進行顯示。

          【4】換行標簽(br)

          • 縮寫來源:br的英文單詞是break,打斷、換行的意思。
          • 語義:表示換行的意思。在html中,一個段落的文字會從左到右依次排列顯示,直到瀏覽器窗口的最右端,才會自動換行。如果我們在實際開發(fā)中碰到需要將文本內(nèi)容強制換行顯示的,此時就可以使用換行標簽實現(xiàn)。
          • 語法格式:<br />。
          • 標簽特點:它也是一個單標簽。
          • 示例:將以下內(nèi)容通過br標簽強制換行

          文本

          呈現(xiàn)效果:

          使用br標簽后的效果

          【5】div和span標簽

          • 縮寫來源:div的英文是division,表示分割、分區(qū)的意思。span沒有縮寫,表示跨度、跨距和范圍的意思。
          • 語義:div和span標簽,沒有任何語言,主要是用于網(wǎng)頁布局使用。
          • 語法格式:<div>這是一個div盒子</div> <span>這是一個span盒子</span>
          • div和span的區(qū)別:div標簽,主要是用于布局,在沒有使用其它干預的情況下,一行只能放一個div。而span標簽,也是用來布局,在沒有任何其它的干預的情況下,一行上可以放很多span標簽。此處的效果,大家可以根據(jù)語法,自行在實現(xiàn)查看一下對比效果。

          最后給大家來一個完美的總結(jié):

          排版標簽的匯總

          難道這就完了嗎?咱們的標簽就只有這些常用的嗎?那當然不是,咱們接下來再看我們的文本格式化標簽。

          文本格式化標簽

          文本格式化標簽的作用:通常文本格式化標簽主要用于網(wǎng)頁中文字樣式的設(shè)置,比如字體加粗、斜體或下劃線等效果,當然后期也會通過CSS樣式來實現(xiàn),會更加完美。

          常見的文本格式化標簽如下:

          文本格式化標簽

          它們分別的區(qū)別:

          • b和strong:b標簽只是加粗,strong除了加粗,還具有強調(diào)的意思,更具語義化。
          • i和em:i只是讓文本顯示斜體的效果,而em在斜體的效果上加強了語義。
          • s和del:s只是讓文本顯示刪除線,而得了不僅顯示刪除線,還加強了語義。
          • u和ins:u只是添加了下劃線,而ins不僅顯示了下劃線,還加強了語義。

          我么網(wǎng)頁中除了排版標簽、文本格式化標簽,當然還少不了圖片標簽(img),通過圖片的展示,會讓整個頁面更加的生動形象。那么下面再來看一下這個標簽吧。

          圖片標簽(img)

          • 縮寫來源:img的英文單詞是image,表示圖像、影像的意思。
          • 語義:用于顯示圖片內(nèi)容。
          • 語法格式:<img src='圖像url' />,在這個的語法中,我們發(fā)現(xiàn)img標簽使用了src屬性,這個屬性主要是用于指定圖像的文件路徑,也是img的必須屬性。
          • img標簽常見屬性如下所示:

          img標簽屬性

          • 標簽特點:img標簽主要是用于在網(wǎng)頁中插入圖像,它是一個單標簽。
          • 知識點擴展:通過img標簽,我們會發(fā)現(xiàn),html標簽除了自身外,它們還具有一些屬性,這些屬性,我們稱為標簽屬性,通過標簽屬性可以設(shè)置標簽的一些外在特性。標簽屬性的基本語法格式:<標簽名 屬性1="值1" 屬性2="值2" ...>內(nèi)容 </標簽名>。

          標簽屬性的特點:

          • 一個標簽可以擁有多個屬性,必須寫在開始標簽中,位于標簽名后面。
          • 屬性之間不分先后順序,標簽名與屬性、屬性與屬性之間均以空格分開。
          • 任何標簽的屬性都有默認值,省略該屬性則使用默認值。
          • 標簽的屬性采用的是鍵值對的格式key="value"的形式。

          圖片標簽屬性使用

          鏈接標簽

          • 縮寫來源:a標簽的英文單詞是anchor,表示錨、鐵錨的意思。
          • 語義:表示超文本鏈接。
          • 語法格式:<a href ="跳轉(zhuǎn)目標" target="目標窗口的彈出方式">文本或圖像</a>。
          • 常見的屬性:

          a標簽的常見屬性

          提示:

          • 比如添加作為外部鏈接,需要添加外部地址。
          • 內(nèi)部鏈接,就是頁面直接內(nèi)部相互鏈接,因此只需要使用名稱即可,比如

          內(nèi)部鏈接地址

          • 如果沒有確定鏈接目標,通常使用"#"表示暫時空鏈接。
          • 除了可以創(chuàng)建文本鏈接,還可以給網(wǎng)頁中的元素,如圖像、表格、音頻、視頻都可以添加超鏈接。

          注釋標簽

          • 注釋標簽:用于在HTML文檔中添加一些便于閱讀和理解,但又不需要顯示在頁面中的文字說明,此時就需要使用注釋標簽。它是HTML中的一種特殊標簽,它不會在瀏覽器中顯示,但是會在源代碼中查看到。
          • 語法格式:

          注釋標簽


          • 提示:注釋通常是給咱們開發(fā)者看的,程序是不會執(zhí)行這個代碼的。

          好了,各位小伙伴,今天我就給大家分享到這兒了,希望我給大家總結(jié)的內(nèi)容,能幫到正在瀏覽我這篇內(nèi)容的前端開發(fā)者,也希望你們有所收獲。如果喜歡的,可以點擊關(guān)注,會繼續(xù)給大家分享更多的內(nèi)容。


          主站蜘蛛池模板: 在线观看一区二区三区视频| 日韩视频一区二区在线观看| 亚洲一区二区三区四区在线观看 | 人妻互换精品一区二区| 国产精品免费大片一区二区| 国产精品久久久久久一区二区三区| 搡老熟女老女人一区二区| 国产成人精品无码一区二区三区| 丝袜美腿高跟呻吟高潮一区| 日韩在线一区二区三区视频| 狠狠综合久久AV一区二区三区| 免费高清在线影片一区| 中文字幕亚洲综合精品一区| 亚洲综合在线一区二区三区| 无码日韩人妻av一区免费| 无码日韩精品一区二区免费暖暖 | 亚洲国产成人久久一区WWW| 国产成人无码精品一区在线观看| 日本无码一区二区三区白峰美 | 国产成人一区二区三区电影网站| 日本国产一区二区三区在线观看| 色妞色视频一区二区三区四区| 夜夜添无码试看一区二区三区| 亚洲视频一区在线观看| 无码日韩精品一区二区免费暖暖| 国产丝袜无码一区二区三区视频| 国产精品毛片一区二区| 一区二区免费国产在线观看| 变态调教一区二区三区| 国产成人无码精品一区在线观看 | 国产成人欧美一区二区三区| 国产福利91精品一区二区| 日韩视频一区二区在线观看| 精品国产日韩亚洲一区在线| 国产成人久久一区二区三区| 精品一区精品二区| 久久精品一区二区东京热| 亚洲AV无码国产精品永久一区| 日韩免费一区二区三区在线| 国产一区二区三区在线影院| 精品无码一区二区三区电影 |