整合營銷服務商

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

          免費咨詢熱線:

          html基礎必備-圖像標記,前端小白一看就會

          HTML文檔中使用的圖像的目的有:第一,使頁面具有視覺效果;第二個:顯示有用信息。此外,圖像也可以用作鏈接。

          雖然使用圖像有很多好處,但是包含太多圖像的頁面通常看起來過于雜亂,并且可能需要花費太長的時間來加載。

          圖像 - <img src=“url”>

          要顯示圖像,需要使用src屬性來指定圖像的路徑,如下所示有幾個方法來實現:

          • src="picture.jpg" - 當圖片與html文件在同一個目錄下時,直接指定圖片名
          • src="images/picture.jpg" - 當圖片位于其它目錄時,使用相對路徑來指定
          • src="http://www.htmlbasic.com/images/photo.jpg" - 當指定網絡圖片時

          替代文字 - <img alt="?">

          img標記的alt屬性定義當圖像無法加載時顯示的文本來代替該圖像。對一個考慮周到的html來說這是一個必需屬性,簡要地描述圖像是什么。

          圖像大小 - <img width="?" height="?">

          圖像通常顯示為它實際的大小,但通過使用width和height屬性,可以更改它顯示的大小。以像素或百分比形式指定圖像的大小。技巧提示:使用圖像的實際大小(以像素為單位)來指定其顯示大小,以強制瀏覽器在圖像加載之前為其分配空間,以確保無論圖像是否顯示,頁面布局都保持不變。

          圖像邊框 - <img border="?">

          img標記的border屬性通過指定以像素為單位的厚度來添加邊框。您還可以設置border=“0”以刪除將圖像用作鏈接時添加的邊框。

          圖像對齊 - <img align="?">

          默認情況下,圖像顯示在html代碼中指定的位置(與任何其他標記一樣)。但是,可以通過設置align=“left | right | top | bottom | middle”中的任意一個值來將圖像與周圍的文本或段落對齊。

          圖像空白 - <img ... vspace="?" hspace="?">

          調整圖像周圍的空白,以像素為單位。使用vspace調整上下垂直間距,或左右兩側使用hspace。

          例子

          下面是以上標記的示例:

          瀏覽器顯示內容如下所示:

          您了解 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 標記的可訪問性和互操作性承諾足以接受這些新的語義元素。

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

          TML(超文本標記語言)的歷史可以追溯到互聯網的早期。以下是HTML的主要歷史事件和版本:

          ·HTML2.0于1993年發布,引入了一些新元素和屬性如表格表單和圖像。

          ·HTML3.0于1995年發布,增加了更多的標記和樣式選項,以支持更復雜的頁面布局和樣式。

          ·HTML4.0于1997年發布,引入了框架樣式表和腳本等新特性,使得網頁設計更加靈活和豐富。在HTML 4.0之后HTML標準進一步發展為XHTML(可擴展超文本標記語言)1.0。XHTML1.0更加嚴格,強調語法和文檔結構的一致性,使其更適合XML應用。

          ·HTML5于2010年正式發布標志著HTML的重大轉變。HTML5引入了許多新的元素和API,如<video><audio><canvas><local storage>等,使網頁開發更加豐富和交互。此外HTML5還引入了語義元素,如:NY NEOL以提高文檔結構的語義化。

          自HTML5發布以來,HTML已經成為一個不斷發展的標準,被維護為"HTML Living Standard",這意味著HTML不再按照傳統的版本號發布,而是持續演進新特性和改進不斷加入。

          HTML的歷史反映了互聯網的不斷發展和網頁技術的演進,從最初的簡單文本鏈接到,現代的富媒體和互動性網頁一直是構建網頁的基礎,為全球互聯網的發展做出了重要貢獻。


          主站蜘蛛池模板: 精品无码一区二区三区在线| 免费日本一区二区| 国产精品成人一区二区三区| 国产小仙女视频一区二区三区| 国产精品无码一区二区在线观| 国产精品亚洲产品一区二区三区 | 无码中文字幕人妻在线一区二区三区 | 日韩高清国产一区在线| 亚洲AV无码一区东京热久久| 人妻无码一区二区视频| 国产精品99精品一区二区三区| 亚洲综合无码AV一区二区| 精品一区二区三区视频在线观看| 国产大秀视频在线一区二区| 国产精品毛片a∨一区二区三区| 中文字幕日韩欧美一区二区三区 | 男人的天堂av亚洲一区2区| 亚欧色一区W666天堂| 中文字幕在线观看一区| 国产精品视频无圣光一区| 伊人色综合一区二区三区影院视频 | 国产精品视频一区二区三区经| 夜夜嗨AV一区二区三区| 在线观看国产区亚洲一区成人| 精品一区二区三区无码视频| 精品国产免费一区二区| 亚洲.国产.欧美一区二区三区| AA区一区二区三无码精片| 亚洲天堂一区在线| 91精品一区二区三区久久久久| 久久久久无码国产精品一区| 中文字幕无码一区二区三区本日 | 日亚毛片免费乱码不卡一区| 亚洲一区二区无码偷拍| 久久中文字幕无码一区二区| 精品成人乱色一区二区| 亚无码乱人伦一区二区| 无码一区二区三区亚洲人妻| 国产免费一区二区三区免费视频| 黑巨人与欧美精品一区| 精品女同一区二区三区在线|