整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML的 <dd> 標簽定義

          帶有項目和描述的描述列表:

          <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標簽都要放在這個標簽的內部。

          <html>

          <head></head>

          <body></body>

          </html>

          三、雙標簽和單標簽。

          在HTML標簽中,有的標簽是成雙成對的,如:<html></html>(如下圖);而有的標簽是單個的,如:<hr>橫線標簽。

          四、head頭部標簽。

          head頭部有以下幾種常用標簽:

          meta:主要提供有關頁面的元信息。

          link:用來定義文檔與外部資源的關系,最常用的是調用CSS樣式文件。

          title:頁面標題的標簽。

          script:用來調用JS文件或JS代碼。當然,script標簽也可以在body主體中使用。

          五、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是它用于標識特定網頁或部分的最重要的標題。

          啟用語義標記的兩種做法

          如果我們要編寫語義標記,必須采用兩種不同的做法。

          1. 語義標記要求根據其預期目的使用 HTML 元素。
          2. 語義標記需要內容和表示的分離。

          正確使用 HTML 元素

          在編寫語義標記時,我們使用 HTML 標簽來告訴瀏覽器元素的內容。在語義標記中,標簽不再只是讓內容以人類可讀的格式顯示在網頁上的一種方式。

          標簽本身成為一種告訴機器(無論是瀏覽器、計算機、智能手機還是其他智能設備)有關內容含義的方式。

          要編寫語義標記,我們必須正確使用 HTML 標簽,以便我們的標記既是人類可讀的,也是機器可讀的。

          分離內容和演示

          過去,通常使用標記來定義樣式和控制網頁布局。

          標題級別的選擇不是基于層次結構,而是基于 Web 瀏覽器應用的樣式,表格用于網頁布局而不是組織表格數據,一些 HTML 標記(例如frameset)是為了明確定義網頁而創建的布局等等。

          當我們編寫語義標記時,我們不能再根據視覺呈現來選擇 HTML 元素。相反,我們根據語義含義選擇 HTML 元素,然后使用CSS定義我們內容的視覺呈現。

          在編寫語義標記時,網頁元素的表示與內容本身的標記完全分離和不同。

          定義語義標記

          考慮到這兩種做法,我們可以這樣定義語義標記:

          語義標記是使用諸如 HTML 之類的標記語言通過正確選擇標記元素來傳達有關文檔中每個元素的含義的信息,并保持標記和文檔中包含的元素的視覺呈現之間的完全分離.

          為什么語義標記很重要?

          好的 CSS 可以使普通網站訪問者看不到不好的標記。然而,再多的樣式也不會讓糟糕的標記對計算機化的訪問者更有意義,例如搜索引擎網絡爬蟲、瀏覽器翻譯工具或屏幕閱讀器等輔助技術。

          根據 Bruce Lawson的說法,HTML 元素的語義使用“增強了可訪問性、可搜索性、國際化和互操作性”。換句話說,如果您希望所有訪問者都可以訪問您的網站、實現較高的搜索引擎排名、可供來自世界各地的訪問者使用以及與其他 Web 服務有效交互,則必須編寫語義標記。

          編寫語義標記是關于創建人類和計算機可讀的 Web 內容。當人類和計算機都可以很好地閱讀網絡時,它就變得更易于訪問,因為計算機能夠更好地分析其內容、索引、交付它,并且開發人員能夠更好地將不同的信息源結合到新的網絡服務中.

          我們如何編寫語義標記?

          我們通過正確選擇和使用 HTML 標記以及通過選擇傳達有關標記所標記信息的某些標記來編寫語義標記。

          HTML 中有語義元素和非語義元素。非語義元素的示例是divspan。這些標簽不會告訴計算機有關元素內容含義的任何信息。

          雖然有用,并且在某些情況下可以很好地使用,但如果語義標簽可用并且適合特定用途,請在使用非語義標簽之前使用它。

          許多語義標簽來自谷歌和Opera等公司完成的網頁標記分析。這些公司發現,許多網站使用idclass屬性來暗示非語義元素內容的含義。

          例如,他們發現了很多看起來像這樣的 div:<div id="nav"><div id="header"><div id="footer">。此類發現有助于 W3C 識別和定位新的語義標簽以包含在 HTML5 中,例如:nav和。我們可以將最常見和最重要的語義元素分為四類:header``footer``article``aside

          • 文檔結構標簽
          • 文本含義標簽
          • 媒體類型標簽
          • 相關標簽

          文件結構

          過去,div元素是識別和分組網站部分的主要方式。然而,隨著 HTML5 的發布,除了標簽提供的分組屬性之外,我們還有幾個新標簽可供使用,這些標簽提供語義含義div

          • header用于網頁標題的容器,通常包含網站徽標、標題元素和網站導航。
          • footer:用于網頁頁腳的容器,除了導航鏈接和返回網頁頂部的鏈接外,通常還包含作者身份、聯系方式和版權信息。
          • main:一個高級元素,用于包含單個網頁獨有的所有內容,并且不會在多個網頁中重復。
          • nav:包含站點導航鏈接塊的元素。該元素通常放置在頁面headerfooter中,也可以在aside(側邊欄)元素中使用。
          • section:該section元素用于標記文檔的各個部分,例如長篇文章的章節或主要部分。
          • aside:用于標識與頁面上的主要內容相關但不屬于文檔主要流程的內容。例如,該什么是語義標記?

          文本含義

          在網絡的早期,通常會看到這樣的標記:

          <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 標記如何為文本內容添加語義含義的一個示例。其他示例包括:

          • h1, h2, h3, h4, h5, 和h6: 標題元素標簽用于標識應該作為標題出現的文本。最高級別或最重要的標題是按照重要性降序排列的標題h1級別。h2``h6
          • strong:帶有標簽的文本strong被賦予了額外的重要性,并且通常以粗體顯示。
          • markmark標簽用于突出在特定上下文中具有特定重要性的文本。例如,它可用于突出顯示搜索結果頁面中搜索詞的每次出現。
          • cite:該cite元素用于標識部分內容源自的原始作品。
          • blockquoteand q: blockquoteand q(quote) 元素用于識別從另一個來源直接引用的文本。
          • time:該time元素可用于告訴瀏覽器、網絡爬蟲和其他智能設備,特定的內容位代表 24 小時制的時間或特定的日歷日期。

          我們的字體和 Web 排版教程提供了大量關于正確使用這些標簽來為文本內容分配語義含義的詳細信息。

          媒體類型

          HTML5 還包括三個標簽,用于標識標簽之間提供的媒體類型。這些標簽有雙重用途。首先,它們向瀏覽器發出信號,需要對特定技術資源(例如視頻播放引擎)進行排隊。其次,他們為內容賦予語義意義。

          • audio:用于向文檔添加一個或多個音頻內容源,并允許瀏覽器根據訪問者的設備和瀏覽器選擇最佳選項。
          • video:類似于audio元素,但用于將視頻內容添加到標記文檔。
          • picture:圖片元素用于允許網絡瀏覽器根據媒體查詢的結果從可用選項中選擇最佳圖像。

          您可以在我們的HTML5 媒體教程中了解有關嵌入audiovideo元素的更多信息。此外,我們關于在網絡上使用圖像的文章提供了有關何時使用該元素以及何時堅持使用該元素的更多信息。picture``img

          相關標簽

          幾個 HTML 元素用于表示多個元素之間的相關性。例如,使用有序列表 ( ol) 告訴瀏覽器列表中的項目彼此相關,需要以特定的順序出現。用于表示多個元素之間相關性的其他元素包括:

          • ul: 無序列表用于表示列表中項目之間的關系,并表明它們不需要按特定順序來理解。
          • figure:該figure元素用于將一段內容(例如圖像、圖表、圖形或文本)和由figcaption標簽標記的標題組合在一起。通過在標簽之間嵌套標題和內容,figure可以識別嵌套元素之間的關系。我們的圖片頁面包含有關實施此有用標簽的更多信息。
          • address:該屬性用于將聯系人信息與包含該address元素的父元素相關聯。例如,當添加到 時article,該address元素提供文章作者的聯系信息,當添加到網頁時footeraddress標識網頁所有者的聯系信息。

          結束的想法

          如果您是 HTML 新手,請花時間學習如何在語義上使用所有這些不同的 HTML 標記。如果您不確定您使用的標簽是否正確,請花幾分鐘時間進行一些研究。正如我們所見,使用正確的標簽很重要。如果您已經使用 HTML 一段時間了,請花點時間了解新的 HTML5 元素以及如何正確使用它們。在過去的幾年里,HTML 變得越來越復雜,繼續使用div帶有classid屬性,但語義 HTML5 標記的可訪問性和互操作性承諾足以接受這些新的語義元素。

          那么你已經了解清楚語義標記了嗎?


          主站蜘蛛池模板: 久久99国产精品一区二区| 日韩精品一区二区三区中文字幕 | 亚洲国产欧美一区二区三区| 国产成人久久精品区一区二区| 国产成人精品一区二区三在线观看| 国产一区二区三区不卡在线观看| 怡红院一区二区在线观看| 色噜噜狠狠一区二区| 无码人妻视频一区二区三区| 亚洲国产精品无码久久一区二区| 久久AAAA片一区二区| 日韩一区二区电影| 久久一区二区明星换脸| 无码人妻精品一区二区三区蜜桃 | 国产一区二区精品久久凹凸| AV天堂午夜精品一区| 91精品一区国产高清在线| 免费无码一区二区三区蜜桃| 久久亚洲AV午夜福利精品一区| 精品无码一区在线观看| 精品人妻少妇一区二区三区不卡 | 亚洲国产欧美一区二区三区| 精品人妻AV一区二区三区| 久久久久人妻一区精品色 | 日韩免费无码一区二区三区| 国产午夜福利精品一区二区三区| 精品视频在线观看你懂的一区 | 亚洲国产精品一区| 成人区人妻精品一区二区不卡视频| 久久精品综合一区二区三区| 无码av免费一区二区三区| 日韩精品中文字幕视频一区 | 久久综合一区二区无码| 波多野结衣一区二区三区高清在线| 四虎一区二区成人免费影院网址| 一区二区三区视频免费| 日本成人一区二区三区| 中文字幕一区二区三区四区| 人妻无码一区二区视频| 国产伦精品一区二区三区无广告| 无码精品不卡一区二区三区|