HTML文檔中使用的圖像的目的有:第一,使頁面具有視覺效果;第二個:顯示有用信息。此外,圖像也可以用作鏈接。
雖然使用圖像有很多好處,但是包含太多圖像的頁面通常看起來過于雜亂,并且可能需要花費太長的時間來加載。
要顯示圖像,需要使用src屬性來指定圖像的路徑,如下所示有幾個方法來實現:
img標記的alt屬性定義當圖像無法加載時顯示的文本來代替該圖像。對一個考慮周到的html來說這是一個必需屬性,簡要地描述圖像是什么。
圖像通常顯示為它實際的大小,但通過使用width和height屬性,可以更改它顯示的大小。以像素或百分比形式指定圖像的大小。技巧提示:使用圖像的實際大小(以像素為單位)來指定其顯示大小,以強制瀏覽器在圖像加載之前為其分配空間,以確保無論圖像是否顯示,頁面布局都保持不變。
img標記的border屬性通過指定以像素為單位的厚度來添加邊框。您還可以設置border=“0”以刪除將圖像用作鏈接時添加的邊框。
默認情況下,圖像顯示在html代碼中指定的位置(與任何其他標記一樣)。但是,可以通過設置align=“left | right | top | bottom | middle”中的任意一個值來將圖像與周圍的文本或段落對齊。
調整圖像周圍的空白,以像素為單位。使用vspace調整上下垂直間距,或左右兩側使用hspace。
下面是以上標記的示例:
瀏覽器顯示內容如下所示:
您了解 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 標記的可訪問性和互操作性承諾足以接受這些新的語義元素。
那么你已經了解清楚語義標記了嗎?
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的歷史反映了互聯網的不斷發展和網頁技術的演進,從最初的簡單文本鏈接到,現代的富媒體和互動性網頁一直是構建網頁的基礎,為全球互聯網的發展做出了重要貢獻。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。