例
帶有項目和描述的描述列表:
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
瀏覽器支持
所有主流瀏覽器都支持 <dd> 標簽。
標簽定義及使用說明
<dd> 標簽被用來對一個描述列表中的項目/名字進行描述。
<dd> 標簽與 <dl> (定義一個描述列表)和 <dt> (定義項目/名字)一起使用。
在 <dd> 標簽內,您能放置段落、換行、圖片、鏈接、列表等等。
HTML 4.01 與 HTML5之間的差異
在 HTML 4.01 中,<dd> 標簽被用來描述一個定義列表中的條目。
在 HTML5 中,<dd> 標簽被用來描述一個描述列表的項目/名字。
全局屬性
<dd> 標簽支持 HTML 的全局屬性。
事件屬性
<dd> 標簽支持 HTML 的事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
果想開發一個網站,除了要精通后端開發語言(如:php)外,還要精通HTML代碼。那么,什么是HTML呢?HTML是一種超文本標記語言,它包含有眾多的標簽,我們可以通過這些標簽,把不同的internet資源(如:文字、圖片、視頻、音頻、表單等等)整合在一個統一的文檔中,這就形成了我們可以看得見的網頁。那么,HTML都有哪些常用的標簽呢?
html5文檔類型聲明:<!doctype html>
html4文檔類型聲明:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
這個標簽是html最外層的標簽,所有其它的HTML標簽都要放在這個標簽的內部。
<html>
<head></head>
<body></body>
</html>
在HTML標簽中,有的標簽是成雙成對的,如:<html></html>(如下圖);而有的標簽是單個的,如:<hr>橫線標簽。
head頭部有以下幾種常用標簽:
meta:主要提供有關頁面的元信息。
link:用來定義文檔與外部資源的關系,最常用的是調用CSS樣式文件。
title:頁面標題的標簽。
script:用來調用JS文件或JS代碼。當然,script標簽也可以在body主體中使用。
1、塊級標簽。
塊級標簽的特性是:獨自占有一行;標簽的高與寬、邊距可以修改;沒有設置寬與高時,默認繼承父標簽。例如:
<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
前端頁面顯示的效果如下圖:
常用的塊級標簽有:div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。
2、內聯標簽。
內聯標簽與塊級標簽不同,它不能獨自占有一行,會與其它內聯標簽在同一樣展示;內聯標簽的高與寬、上下邊距是不能修改的,它里面的文字或圖片有多高,它就是多高。例如如下代碼:
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>
CSS樣式代碼跟塊級標簽的例子是一樣的,而顯示的效果就不一樣了,寬與高、上下邊距沒有效果。如下圖:
常用的內聯標簽有:span、a、b、strong、i、em 。
3、內聯塊級標簽。
內聯塊級標簽,既有一些內聯標簽的特性,也有一些塊級標簽的特點:它不能獨自占有一行,但是可以修改它的寬度和高度。例如下面這段代碼:
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">
CSS樣式代碼跟塊級標簽的那個例子仍然是一樣的,圖片的寬和高、上下邊距修改成功,而2個圖片不能獨自占有一行,而是在同一行。如下圖:
常用的內聯塊級標簽有:img、input、textarea。
4、區域標簽。
所謂區域標簽,就是主要用來劃分布局頁面區域的。如:頭部、主體內容、側邊欄、底部。這樣劃分的好處是:讓頁面布局更加清晰明了。
常用的區域標簽有:header(頭部)、footer(底部)、nav(導航)、aside(側邊欄)、section(主體)、article(獨立內容)。
5、表單標簽。
這個表單標簽我們也是會經常用到的,如:登錄網站的時候、提交數據的時候。如下圖的評論表單:
?表單常用的標簽有:form、input、select、option、textarea 。
以上就是我們開發網頁時,會常用到的HTML標簽。當然,HTML標簽遠不止這些,尤其是html5出來后,新增了許多的新標簽。但是,有些標簽在我們開發中很少用到,所以,這里就沒有做相應的介紹。
您了解 HTML 和 Web 時,您可能會發現反復遇到一個通常未定義的特定單詞。那個詞是語義的。
你可能會讀到諸如“我們去尋找語義元素”或“我們盡量做到語義化”之類的陳述,但永遠無法清楚地了解語義這個詞的含義。在本文中,我們將探索語義標記的世界,提出術語的有效定義,并將該概念應用于我們編寫 HTML 標記的方式。
根據 Dictionary.com 的說法,語義是指對單詞或句子含義的正確解釋。
從語義上使用一個詞就是以一種與該詞的含義正確對齊的方式使用它。當我們誤用一個詞時,我們并不是在語義上使用它。
許多 HTML 標簽具有語義含義。也就是說,元素本身傳達了一些關于包含在開始標簽和結束標簽之間的內容類型的信息。
例如,當瀏覽器遇到一個h1標題時,它會將該標記解釋為表示該元素的內容h1構成了包含該元素的部分的最重要的標題。標簽的語義含義h1是它用于標識特定網頁或部分的最重要的標題。
如果我們要編寫語義標記,必須采用兩種不同的做法。
在編寫語義標記時,我們使用 HTML 標簽來告訴瀏覽器元素的內容。在語義標記中,標簽不再只是讓內容以人類可讀的格式顯示在網頁上的一種方式。
標簽本身成為一種告訴機器(無論是瀏覽器、計算機、智能手機還是其他智能設備)有關內容含義的方式。
要編寫語義標記,我們必須正確使用 HTML 標簽,以便我們的標記既是人類可讀的,也是機器可讀的。
過去,通常使用標記來定義樣式和控制網頁布局。
標題級別的選擇不是基于層次結構,而是基于 Web 瀏覽器應用的樣式,表格用于網頁布局而不是組織表格數據,一些 HTML 標記(例如frameset)是為了明確定義網頁而創建的布局等等。
當我們編寫語義標記時,我們不能再根據視覺呈現來選擇 HTML 元素。相反,我們根據語義含義選擇 HTML 元素,然后使用CSS定義我們內容的視覺呈現。
在編寫語義標記時,網頁元素的表示與內容本身的標記完全分離和不同。
考慮到這兩種做法,我們可以這樣定義語義標記:
語義標記是使用諸如 HTML 之類的標記語言通過正確選擇標記元素來傳達有關文檔中每個元素的含義的信息,并保持標記和文檔中包含的元素的視覺呈現之間的完全分離.
好的 CSS 可以使普通網站訪問者看不到不好的標記。然而,再多的樣式也不會讓糟糕的標記對計算機化的訪問者更有意義,例如搜索引擎網絡爬蟲、瀏覽器翻譯工具或屏幕閱讀器等輔助技術。
根據 Bruce Lawson的說法,HTML 元素的語義使用“增強了可訪問性、可搜索性、國際化和互操作性”。換句話說,如果您希望所有訪問者都可以訪問您的網站、實現較高的搜索引擎排名、可供來自世界各地的訪問者使用以及與其他 Web 服務有效交互,則必須編寫語義標記。
編寫語義標記是關于創建人類和計算機可讀的 Web 內容。當人類和計算機都可以很好地閱讀網絡時,它就變得更易于訪問,因為計算機能夠更好地分析其內容、索引、交付它,并且開發人員能夠更好地將不同的信息源結合到新的網絡服務中.
我們通過正確選擇和使用 HTML 標記以及通過選擇傳達有關標記所標記信息的某些標記來編寫語義標記。
HTML 中有語義元素和非語義元素。非語義元素的示例是div和span。這些標簽不會告訴計算機有關元素內容含義的任何信息。
雖然有用,并且在某些情況下可以很好地使用,但如果語義標簽可用并且適合特定用途,請在使用非語義標簽之前使用它。
許多語義標簽來自谷歌和Opera等公司完成的網頁標記分析。這些公司發現,許多網站使用id和class屬性來暗示非語義元素內容的含義。
例如,他們發現了很多看起來像這樣的 div:<div id="nav">、<div id="header">和<div id="footer">。此類發現有助于 W3C 識別和定位新的語義標簽以包含在 HTML5 中,例如:nav和。我們可以將最常見和最重要的語義元素分為四類:header``footer``article``aside
過去,div元素是識別和分組網站部分的主要方式。然而,隨著 HTML5 的發布,除了標簽提供的分組屬性之外,我們還有幾個新標簽可供使用,這些標簽提供語義含義div:
在網絡的早期,通常會看到這樣的標記:
<style>
.italics { font-style: italic; }
</style>
<p>Some paragraph content including one
<span class="italics">italicized</span> word.
</p>
今天我們(希望)不會夢想做這樣的事情,因為span元素告訴瀏覽器和其他計算機訪問者完全沒有關于嵌套在開始和結束標記之間的文本的含義或目的。我們不會使用非語義標簽,而是在應該以斜體顯示的單詞周圍span添加標簽。em通過使用em標簽,使用屏幕閱讀器或訪問內容的其他計算機的訪問者將了解應用標簽以增加對已標記內容的強調。該em元素只是 HTML 標記如何為文本內容添加語義含義的一個示例。其他示例包括:
我們的字體和 Web 排版教程提供了大量關于正確使用這些標簽來為文本內容分配語義含義的詳細信息。
HTML5 還包括三個標簽,用于標識標簽之間提供的媒體類型。這些標簽有雙重用途。首先,它們向瀏覽器發出信號,需要對特定技術資源(例如視頻播放引擎)進行排隊。其次,他們為內容賦予語義意義。
您可以在我們的HTML5 媒體教程中了解有關嵌入audio和video元素的更多信息。此外,我們關于在網絡上使用圖像的文章提供了有關何時使用該元素以及何時堅持使用該元素的更多信息。picture``img
幾個 HTML 元素用于表示多個元素之間的相關性。例如,使用有序列表 ( ol) 告訴瀏覽器列表中的項目彼此相關,需要以特定的順序出現。用于表示多個元素之間相關性的其他元素包括:
如果您是 HTML 新手,請花時間學習如何在語義上使用所有這些不同的 HTML 標記。如果您不確定您使用的標簽是否正確,請花幾分鐘時間進行一些研究。正如我們所見,使用正確的標簽很重要。如果您已經使用 HTML 一段時間了,請花點時間了解新的 HTML5 元素以及如何正確使用它們。在過去的幾年里,HTML 變得越來越復雜,繼續使用div帶有class和id屬性,但語義 HTML5 標記的可訪問性和互操作性承諾足以接受這些新的語義元素。
那么你已經了解清楚語義標記了嗎?
*請認真填寫需求信息,我們會在24小時內與您取得聯系。