例
對文檔中的文本進行格式化:
<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標簽更加具有語義化。
那么什么是標簽語義化呢?所謂的標簽語義化,指的就是標簽所代表的含義。咱們可以通過標簽的含義,正確地去使用它。
標簽語義化的作用:
如下圖所示,通過使用語義化標簽和沒使用任何標簽,就能直觀感受到語義化標簽的好處。
普通的文本和使用語義化標簽后的效果對比圖
那么如何去判斷一個頁面中,語義化是否良好呢?很簡單,直接扒掉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)
標題標簽的使用
呈現(xiàn)的效果如下:
呈現(xiàn)的效果
一句話總結(jié):使用了標題標簽的文字會加粗,會根據(jù)級別顯示文字的大小,并且一行只能放一個標題。
【2】段落標簽(p)
p標簽語法格式
【3】水平線標簽(hr)
【4】換行標簽(br)
文本
呈現(xiàn)效果:
使用br標簽后的效果
【5】div和span標簽
最后給大家來一個完美的總結(jié):
排版標簽的匯總
難道這就完了嗎?咱們的標簽就只有這些常用的嗎?那當然不是,咱們接下來再看我們的文本格式化標簽。
文本格式化標簽
文本格式化標簽的作用:通常文本格式化標簽主要用于網(wǎng)頁中文字樣式的設置,比如字體加粗、斜體或下劃線等效果,當然后期也會通過CSS樣式來實現(xiàn),會更加完美。
常見的文本格式化標簽如下:
文本格式化標簽
它們分別的區(qū)別:
我么網(wǎng)頁中除了排版標簽、文本格式化標簽,當然還少不了圖片標簽(img),通過圖片的展示,會讓整個頁面更加的生動形象。那么下面再來看一下這個標簽吧。
圖片標簽(img)
img標簽屬性
標簽屬性的特點:
圖片標簽屬性使用
鏈接標簽
a標簽的常見屬性
提示:
內(nèi)部鏈接地址
注釋標簽
注釋標簽
好了,各位小伙伴,今天我就給大家分享到這兒了,希望我給大家總結(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,我們一起飛!
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。