整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
語義化是指根據內容的結構化（內容語義化），選擇合適的標簽（代 碼語義化）。通俗來講就是用正確的標簽做正確的事情。
語義化的優點如下：
對機器友好，帶有語義的文字表現力豐富，更適合搜索引擎的爬蟲爬 取有效信息，有利于 SEO。除此之外，語義類還支持讀屏軟件，根據 文章可以自動生成目錄；
對開發者友好，使用語義類標簽增強了可讀性，結構更加清晰，開發 者能清晰地看出網頁的結構，便于團隊的開發與維護。
常見的語義化標簽：
DOCTYPE 是 HTML5 中一種標準通用標記語言的文檔類型聲明，它的目 的是告訴瀏覽器（解析器）應該以什么樣（html 或 xhtml）的文檔類 行定義來解析文檔，不同的渲染模式會影響瀏覽器對 CSS 代碼甚?JavaScript 腳本的解析。它必須聲明在 HTML?檔的第??。
瀏覽器渲染頁面的兩種模式（可通過 document.compatMode 獲取，比 如，語雀官網的文檔類型是 CSS1Compat）：
CSS1Compat：標準模式（Strick mode），默認模式，瀏覽器使用 W3C 的標準解析渲染頁面。在標準模式中，瀏覽器以其支持的最高標準呈 現頁面。
BackCompat：怪異模式(混雜模式)(Quick mode)，瀏覽器使用自己的 怪異模式解析渲染頁面。在怪異模式中，頁面以一種比較寬松的向后 兼容的方式顯示。
如果沒有 defer 或 async 屬性，瀏覽器會立即加載并執行相應的腳本。它不會等待后續加載的文檔元素，讀取到就會開始加載和執行，這樣 就阻塞了后續文檔的加載。
下圖可以直觀地看出三者之間的區別:
其中藍色代表 js 腳本網絡加載時間，紅色代表 js 腳本執行時間，綠 色代表 html 解析。
defer 和 async 屬性都是去異步加載外部的 JS 腳本文件，它們都不 會阻塞頁面的解析，其區別如下：
執行順序：多個帶 async 屬性的標簽，不能保證加載的順序；多個帶 defer 屬性的標簽，按照加載順序執行；
腳本是否并行執行：async 屬性，表示后續文檔的加載和執行與 js 腳本的加載和執行是并行進行的，即異步執行；defer 屬性，加載后 續文檔的過程和 js 腳本的加載(此時僅加載不執行)是并行進行的(異步)，js 腳本需要等到文檔所有元素解析完成之后才執行，DOMContentLoaded 事件觸發執行之前。
行內元素有：a b span img input select strong；
塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；
空元素，即沒有內容的 HTML 元素。空元素是在開始標簽中關閉的，也就是空元素沒有閉合標簽：
常見的有：<br>、<hr>、<img>、<input>、<link>、<meta>；
鮮見的有：<area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>、<source>、<track>、<wbr>。
在線的情況下，瀏覽器發現 html 頭部有 manifest 屬性，它會請求 manifest 文件，如果是第一次訪問頁面 ，那么瀏覽器就會根據 manifest 文件的內容下載相應的資源并且進行離線存儲。如果已經 訪問過頁面并且資源已經進行離線存儲了，那么瀏覽器就會使用離線 的資源加載頁面，然后瀏覽器會對比新的 manifest 文件與舊的 manifest 文件，如果文件沒有發生改變，就不做任何操作，如果文 件改變了，就會重新下載文件中的資源并進行離線存儲。
離線的情況下，瀏覽器會直接使用離線存儲的資源。
（1）SVG：
SVG 可縮放矢量圖形（Scalable Vector Graphics）是基于可擴展標 記語言 XML 描述的 2D 圖形的語言，SVG 基于 XML 就意味著 SVG DOM 中的每個元素都是可用的，可以為某個元素附加 Javascript 事件處 理器。在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象 的屬性發生變化，那么瀏覽器能夠自動重現圖形。
其特點如下：
不依賴分辨率
支持事件處理器
最適合帶有大型渲染區域的應用程序（比如谷歌地圖）
復雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）不適合游戲應用
（2）Canvas：
Canvas 是畫布，通過 Javascript 來繪制 2D 圖形，是逐像素進行渲 染的。其位置發生改變，就會重新進行繪制。
其特點如下：
依賴分辨率
不支持事件處理器
弱的文本渲染能力
能夠以 .png 或 .jpg 格式保存結果圖像
最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪
注：矢量圖，也稱為面向對象的圖像或繪圖圖像，在數學上定義為一 系列由線連接的點。矢量文件中的圖形元素稱為對象。每個對象都是
一個自成一體的實體，它具有顏色、形狀、輪廓、大小和屏幕位置等 屬性。
dragstart：事件主體是被拖放元素，在開始拖放被拖放元素時觸發。
darg：事件主體是被拖放元素，在正在拖放被拖放元素時觸發。dragenter：事件主體是目標元素，在被拖放元素進入某元素時觸發。dragover：事件主體是目標元素，在被拖放在某元素內移動時觸發。dragleave：事件主體是目標元素，在被拖放元素移出目標元素是觸 發。
drop：事件主體是目標元素，在目標元素完全接受被拖放元素時觸發。
dragend：事件主體是被拖放元素，在整個拖放操作結束時觸發。
lt;hr>水平線
<hr size="9" /> 水平線(設定大小,單位:像素)
<hr width="80%" /> 水平線(設定寬度,單位:像素或百分比)
<hr color="#ff0000" /> 水平線對齊方式
<hr align="left" /> 水平線水平位置
<hr noshade /> 去掉水平線的陰影
align屬性值:center(默認值) left right
<hr width="30%" color="blue" size="9" align="left"/>
<center></center>水平居中.
<br/> 換行
<p></p> 標簽定義段落
<p align=""></p>將段落按左、中、右對齊;
align屬性值:left(默認值) right center justify
注意：
<h1>...<h6>標題標記與<p>段落標記都只有一個屬性align
<pre></pre> 定義預格式化的文本
<blockquote></blockquote> 設置段落縮進(可以縮進5個字符)
手冊上沒有的標記
<xmp></xmp> 忽略HTML標記
<nobr>…</nobr> 禁止換行
<wbr> 指定軟換行（或單詞換行），用在nobr標記中，即使用 <nobr> 禁止了換行，使用 <wbr> 仍然可以換行
<nobr>中華人民共和國上海市<wbr>黃浦區</wbr></nobr>
您將了解到11個非常有用的單行代碼，它能幫助我們做很多事，不要小瞧了HTML哦!!!
HTML 和 CSS 是前端開發世界的支柱。雖然精通 CSS 和 JavaScript 對于創建出色的網站至關重要，但人們經常低估您僅使用一個普通的舊 HTML 文件就可以完成的工作。從延遲加載圖像到為視頻添加字幕，HTML 能夠完成大多數開發人員并不完全了解的許多事情。以下是您可以立即使用的 11 個 HTML 單行代碼
向 HTML 元素添加簡單的工具提示不需要 CSS 或 JavaScript。 使用 title 屬性，您可以輕松添加工具提示以向用戶提供額外信息。
<body>
<p>
<abbr title="World Health Organization">WHO</abbr> was founded in 1948.
</p>
<p title="Free Web tutorials">W3Schools</p>
</body>
當您希望用戶下載鏈接而不是導航到文件時，下載屬性非常有用。 此外，您還可以設置用戶將下載的文件的文件名
<a href="/images/myw3schoolsimage.jpg" download>
<a href="link/to/your/file" download="filename">Download link</a>
沒有人喜歡HTML在不該打斷的地方打斷文字。 使用<wbr>，您可以輕松地找到可以打斷單詞的點(機會)。 當單詞太長，瀏覽器很有可能會在不正確的地方打斷它時，這很有用。
<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p>
使用DIR =“AUTO”，瀏覽器將根據內容的語言更改文本對齊。當您處理不遵循左邊的語言時，這非常有用。使用此屬性的潛在地點是社交媒體聊天應用程序。
<p dir="auto">This text is following dir=auto</p>
通過使用細節和摘要語義元素，您可以創建一個非常基本但很容易的手風琴。將accordion元素與details元素打包，而標題則使用summary元素。最后，使用p段落元素來編寫手風琴的主要內容。
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
通過將contentteditable屬性設置為true，可以使任何內容都可編輯。 不管它是div還是p，它都是可編輯的。 此外，還可以使用isContentEditable屬性來查找某個元素是否可編輯。
<p contenteditable='true'>This is a paragraph. Click the button to make me editable.</p>
只需使用 HTML，您就可以使用 <track> 元素為視頻文件添加字幕。 使用 src 屬性指向字幕文件，使用 srclang 屬性設置語言。
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>
你可以通過設置加載屬性為“lazy”來按需加載圖片(也叫惰性加載)。 這是一種簡單但非常有效的優化技術，只加載對用戶可見的部分，其他圖像稍后根據用戶的需要加載。
<img src="/w3images/wedding.jpg" alt="Wedding" style="width:100%">
<img src="/w3images/rocks.jpg" alt="Rocks" style="width:100%">
<!-- off-screen images -->
<img src="/w3images/paris.jpg" alt="Paris" style="width:100%" loading="lazy">
<img src="/w3images/nature.jpg" alt="Nature" style="width:100%" loading="lazy">
<img src="/w3images/underwater.jpg" alt="Underwater" style="width:100%" loading="lazy">
<img src="/w3images/ocean.jpg" alt="Ocean" style="width:100%" loading="lazy">
<img src="/w3images/mountainskies.jpg" alt="Mountains" style="width:100%" loading="lazy">
如果您在您的網站上多次調用一個公共域，您可以使用**<base>**元素來設置一個基本URL，如下面提供的代碼片段所示。 現在，src在圖像元素中的實際值是“www.w3schools.com/images/stic… 如果您使用過像Axios這樣的庫，那么設置基URL是一種非常常見的做法。
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
您可以在使用右鍵單擊時收聽事件，也可以嘗試使用OnContextMenu和OnPaste屬性粘貼內容并處理這些事件。如果您不希望用戶能夠粘貼到密碼等某些字段上，則可以在該輸入字段上寫入Onpaste =“返回false”，用戶將無法粘貼到那里。同樣，oncontextmenu在用戶右鍵單擊該元素時會觸發。
<input type="text" onpaste="return false" value="Paste something in here">
<div oncontextmenu="myFunction()" contextmenu="mymenu">
當設置為 true 時，拼寫檢查屬性會告訴瀏覽器必須檢查用戶在此元素中輸入的語法和拼寫錯誤。 這是一個方便的屬性，可幫助用戶編寫正確無誤的內容。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
