制作網(wǎng)頁時,使用語義化標簽描述網(wǎng)頁。

所以,HTML 的作用是:

使用標簽描述網(wǎng)頁,把網(wǎng)頁內(nèi)容在瀏覽器中展現(xiàn)出來,瀏覽器不會顯示 HTML 標簽," />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁 > 營銷資訊 > 網(wǎng)站運營 > 「 前端技術(shù)基礎(chǔ) 」HTML 語義化標簽

「 前端技術(shù)基礎(chǔ) 」HTML 語義化標簽

時間:2023-07-25 01:00:02 | 來源:網(wǎng)站運營

時間:2023-07-25 01:00:02 來源:網(wǎng)站運營

「 前端技術(shù)基礎(chǔ) 」HTML 語義化標簽:HTML 文檔被稱為網(wǎng)頁,由嵌套的 HTML 元素構(gòu)成,

制作網(wǎng)頁時,使用語義化標簽描述網(wǎng)頁。

所以,HTML 的作用是:

使用標簽描述網(wǎng)頁,把網(wǎng)頁內(nèi)容在瀏覽器中展現(xiàn)出來,瀏覽器不會顯示 HTML 標簽,而是用標簽來解釋頁面的內(nèi)容。


HTML 文檔的后綴一般是 .html。
但在以前,使用 .htm 作為后綴的也不少,它們都代表 HTML 文檔,實際上也沒有本質(zhì)的區(qū)別。
// 實際上,.htm 是在 win32 時代,系統(tǒng)只能識別 3 位擴展名時使用的

理解“語義化”

所謂“語義化”,即標簽本身的含義。

你需要:
理解每個標簽的用途( 作用、屬性和默認樣式 ),用正確的標簽描述頁面( 內(nèi)容 )

作用:利于 SEO、可訪問性( 盲人閱讀器 )、可讀性( 開發(fā)維護 — 先寫語義化的 HTML,再選合適的 CSS )
判斷:當去掉 CSS 之后,網(wǎng)頁結(jié)構(gòu)依然組織有序,且具有良好的可讀性,則說明語義化良好
拓展( 瀏覽器兼容 ):主流瀏覽器都兼容 HTML5 的新標簽,對于 IE8 及以下版本不認識 HTML5 的新元素,可以使用 JS 創(chuàng)建一個沒用的元素來解決。
<script>document.createElement("header");</script>

HTML 元素分類( 語義化標簽 )

HTML 核心的部分莫過于標簽( tag )。
學習 HTML,應(yīng)當了解每個標簽的作用、屬性和默認樣式。
標簽,是用來描述文檔中的各自內(nèi)容的基本單元,不同的標簽表示不同的含義,標簽間的嵌套表示了內(nèi)容間的結(jié)構(gòu)。








[1] 根元素 html

html 表示 HTML 文檔的根( root ),定義了整個 HTML 文檔,是一個頂級元素,其他所有元素都是該元素的后代。
<html xmlns="http://www.w3.org/1999/xhtml"></html> // xmlns 屬性用于指派文檔的 XML 命名空間。// 預(yù)設(shè)值是 "http://www.w3.org/1999/xhtml",這在 XHTML 中是必要的,而 HTML 中則是可選的。[2] 元數(shù)據(jù)和腳本

可以定義文檔的一些基本信息,如標題、樣式、字符編碼等,方便瀏覽器解析或搜索引擎搜索等

// base 標簽// 描述了基本的鏈接地址 / 鏈接目標,即:作為 HTML 文檔中所有的鏈接標簽的默認鏈接<base href="http://www.webpiece.cn" target="_blank" />[3] 文檔章節(jié)

主要和 css 搭配使用,顯示網(wǎng)頁結(jié)構(gòu)的標簽,是網(wǎng)頁布局中最常用的標簽
body、header、nav、article、section、address、footer、main、h1~h6、hgroup[4] 組合內(nèi)容

div、p、hr、pre、blockquote + 列表( ul、ol、li、dl、dt、dd )+ figure、figcaption[5] 文本級別語義

span、a、em/strong、cite/q、code/kbd/samp/var、b/i/u、s、mark、small、dfn/abbr、wbr、br、sub/sup、time、ruby/rb/rt/rtc/rp、ins、del、bdi、bdo、data[6] 嵌入內(nèi)容

picture、source、img、iframe、embed、object、param、video、audio、track、map、area、template、canvas[7] 表格元素

table、caption、colgroup、col、tbody、thead、tfoot、tr、td、th[8] 表單元素

form、label、input、button、select、datalist、optgroup、option、textarea、output、progress、meter、fieldset、legend[9] 交互( 不常用 ):details、summary、dialog

HTML5 不僅新增了語義型區(qū)塊級元素及表單類元素,也新增了一些其他的功能性元素,

這些元素由于瀏覽器支持等各種原因,并沒有被廣泛使用。


標題是可見的,用戶點擊標題時,顯示出 details,這兩個標簽只有 chrome 和 opera 支持。
details 僅有一個 open 屬性,用來定義 details 是否可見( 默認為不可見狀態(tài) )。

<details> <summary>Copyright 2018.</summary> <p>整合分析、記錄點滴</p></details>該標簽只有一個 open 屬性,用來定義對話框是否可見( 默認為不可見 ),只有 chrome 和 opera 支持。

<button>顯示對話框</button><dialog>我是對話框的內(nèi)容</dialog><script> var oBtn = document.getElementsByTagName('button')[0]; var oDia = document.getElementsByTagName('dialog')[0]; oBtn.onclick = function(){ console.log(oDia.getAttribute('open')) if(!oDia.getAttribute('open')){ oDia.setAttribute('open','open'); this.innerHTML ='隱藏文本框'; }else{ oDia.removeAttribute('open'); this.innerHTML = '顯示文本框'; } }</script>


關(guān)鍵詞:標簽,技術(shù),基礎(chǔ)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉