整合營銷服務商

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

          免費咨詢熱線:

          HTML <code> 標簽

          對文檔中的文本進行格式化:

          <code>一段電腦代碼</code>


          瀏覽器支持

          所有主流瀏覽器都支持 <code> 標簽。


          標簽定義及使用說明

          <code> 標簽是一個短語標簽,用來定義計算機代碼文本。

          提示:我們并不反對使用這個標簽,但是如果您只是為了達到某種視覺效果而使用這個標簽的話,我們建議您使用 CSS ,這樣可能會取得更豐富的效果。

          所有短語標簽:

          標簽描述
          <em>呈現(xiàn)為被強調(diào)的文本。
          <strong>定義重要的文本。
          <dfn>定義一個定義項目。
          <code>定義計算機代碼文本。
          <samp>定義樣本文本。
          <kbd>定義鍵盤文本。它表示文本是從鍵盤上鍵入的。它經(jīng)常用在與計算機相關(guān)的文檔或手冊中。
          <var>定義變量。您可以將此標簽與 <pre> 及 <code> 標簽配合使用。

          HTML 4.01 與 HTML5之間的差異

          無。


          全局屬性

          <code> 標簽支持 HTML 的全局屬性。


          事件屬性

          <code> 標簽支持 HTML 的事件屬性。

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          .標簽語義化

          提到標簽,很多剛?cè)腴T前端開發(fā)的人,肯定都會很納悶,這么多HTML標簽我如何記住呢?我又應該根據(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)絡爬蟲更好地解析,從而更好地分析和抓取網(wǎng)頁中的內(nèi)容。
          • 使用語義化標簽還能讓搜索引擎得到更好的優(yōu)化。

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

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

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

          如何去使用這些標簽呢?首先根據(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標簽默認是以水平線的樣式進行顯示。

          【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)頁中文字樣式的設置,比如字體加粗、斜體或下劃線等效果,當然后期也會通過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標簽除了自身外,它們還具有一些屬性,這些屬性,我們稱為標簽屬性,通過標簽屬性可以設置標簽的一些外在特性。標簽屬性的基本語法格式:<標簽名 屬性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)容。

          在文檔中格式化文本:

          <kbd>鍵盤輸入</kbd>


          瀏覽器支持

          目前大多數(shù)瀏覽器支持 <kbd> 標簽。


          標簽定義及使用說明

          <kbd> 標簽定義鍵盤文本。

          提示: <kbd> 標簽已廢棄,不推薦使用,但 是可以通過CSS實現(xiàn)豐富的效果。

          所有標簽短語:

          標簽描述
          <em>呈現(xiàn)為被強調(diào)的文本。
          <strong>定義重要的文本。
          <dfn>定義一個定義項目。
          <code>定義計算機代碼文本。
          <samp>定義樣本文本。
          <kbd>定義鍵盤文本。它表示文本是從鍵盤上鍵入的。它經(jīng)常用在與計算機相關(guān)的文檔或手冊中。
          <var>定義變量。您可以將此標簽與 <pre> 及 <code> 標簽配合使用。

          HTML 4.01 與 HTML5之間的差異

          無。


          全局屬性

          <kbd> 標簽支持全局屬性,查看完整屬性表 HTML全局屬性。


          事件屬性

          <kbd> 標簽支持所有 HTML事件屬性。

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!


          主站蜘蛛池模板: 无码精品人妻一区| 亚洲一区二区三区免费观看| 一区二区三区四区免费视频| 国产麻豆媒一区一区二区三区 | 亚洲av乱码中文一区二区三区| 国产精品无圣光一区二区| 精品国产一区二区麻豆| 日韩亚洲AV无码一区二区不卡 | 四虎永久在线精品免费一区二区 | 国产亚洲福利一区二区免费看 | 韩国精品一区二区三区无码视频| 久久亚洲日韩精品一区二区三区| 熟女大屁股白浆一区二区| 亚洲一区精品伊人久久伊人| 国产在线无码视频一区| 国产裸体舞一区二区三区| 多人伦精品一区二区三区视频| 精品国产鲁一鲁一区二区| 无码国产精品一区二区免费式影视| 国产激情无码一区二区app| 成人精品视频一区二区三区不卡| 亚洲国产综合精品一区在线播放| 精品一区二区三区在线视频观看| 日本免费精品一区二区三区| 波多野结衣一区在线| 一区在线免费观看| 国产成人一区二区三区在线| 伊人色综合一区二区三区 | 久久精品一区二区| 久久久无码一区二区三区| 日韩一区二区视频| 国产伦精品一区二区三区免费下载 | 色欲AV蜜臀一区二区三区| 久久国产精品无码一区二区三区 | 亚洲色无码一区二区三区| 无码人妻精品一区二区三区在线| 久草新视频一区二区三区| 亚洲一区二区三区乱码在线欧洲| 国产精品视频一区二区猎奇| 国产一区二区三区美女 | 亚洲一区精彩视频|