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