時間: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)成,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 核心的部分莫過于標簽( tag )。標簽,是用來描述文檔中的各自內(nèi)容的基本單元,不同的標簽表示不同的含義,標簽間的嵌套表示了內(nèi)容間的結(jié)構(gòu)。
學習 HTML,應(yīng)當了解每個標簽的作用、屬性和默認樣式。
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" />
主要和 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<details> <summary>Copyright 2018.</summary> <p>整合分析、記錄點滴</p></details>
<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ǔ)
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。