HTML5核心知識(shí)

HTML語義

什么是HTML：超文本標(biāo)記語言（HyperText Markup Language，簡稱HTML）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)椎標(biāo)記語言。

HTML4常用標(biāo)簽匯總：

  • 基本文檔：html、head、body...
  • 基本標(biāo)簽：h1~h6、p、br、hr、
  • 文本格式化：strong、b、em、i、small、strong、del、sub、sup...
  • 鏈接：a、link
  • 圖片：img、map、area
  • 區(qū)塊：div、span
  • 三大列表：ul li、ol li、dl dt dd
  • 表格：table、caption、th、tr、td、thead、tbody、tfoot
  • 框架：iframe
  • 表單：form、input、select option、textarea、button、label
  • 實(shí)體：&lt、&gt、&copy、&nbsp ...

HTML5常用標(biāo)簽匯總：

  • 圖形新元素：canvas
  • 新多媒體元素：audio、video、source、embed、track
  • 新表單元素：deatalist、keygen、output
  • 新的語義和結(jié)構(gòu)元素：article、aside、bdi、command、details、dialog、summary、figure、figcaption、footer、header、mark、meter、nav、progress、ruby、rt、rp、section、time、wbr

什么叫語義化：

  • 指對(duì)文本內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合乎語義的標(biāo)簽（代碼語義化），便于開發(fā)者閱讀，維護(hù)和寫出更優(yōu)雅的代碼的同時(shí)，讓瀏覽器的爬蟲和輔助技術(shù)更好的解析。通俗理解：用正確的標(biāo)簽做正確的事

語義化的好處：

  • 利于SEO優(yōu)化（也就是搜索引擎的抓取，搜索引擎的爬蟲也依賴于標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重）；
  • 在樣式丟失的時(shí)候，還是可以比較好的呈現(xiàn)結(jié)構(gòu)；
  • 更好的支持各種終端，例如無障礙閱讀和有聲小說等；
  • 利于團(tuán)隊(duì)開發(fā)和維護(hù)，W3C給我們定了一個(gè)標(biāo)準(zhǔn)，那么團(tuán)隊(duì)中都遵循這個(gè)標(biāo)準(zhǔn)，那么代碼的差異就會(huì)縮小，在開發(fā)和維護(hù)的時(shí)候就可以提高效率；

如何寫出更優(yōu)的html：

  • 結(jié)構(gòu)搭建上
  • 代碼校驗(yàn)
  • 良好的代碼排版
  • 語義化設(shè)計(jì)
  • 布局規(guī)范
  • 標(biāo)簽嵌套規(guī)范
  • 網(wǎng)站代碼優(yōu)化

結(jié)構(gòu)搭建上：

  • 采用HTML5標(biāo)準(zhǔn)時(shí)開頭應(yīng)該加上<!DOCTYPE html>；
  • 應(yīng)在head標(biāo)簽中引入CSS文件，這樣瀏覽器就可以在輸出HTML之前獲取CSS信息；
  • 在body標(biāo)簽的末尾引入JS文件，這樣可以在頁面顯示之后再編譯js文件，以加快頁面讀取速度，同時(shí)有助于Js對(duì)頁面中的元素進(jìn)行操作；
  • 對(duì)元素的操作應(yīng)添加在js代碼中，而不要在html中添加，后期難以維護(hù)。

代碼校驗(yàn)：

  • 在項(xiàng)目中加入校驗(yàn)過程：可以在代碼編輯器中使用HTMLHint、SublimeLinter這類代碼校驗(yàn)插件，也可以在build的時(shí)候使用HTMLHint with Grunt這類校驗(yàn)工具，還可以通過W3CHTML validator等網(wǎng)站來在線監(jiān)測代碼；
  • 盡量采用HTML5標(biāo)準(zhǔn)；
  • 確保正確的HTML層級(jí)：嵌套元素時(shí)確保元素首尾完整，在一個(gè)有大量內(nèi)容的元素的結(jié)束標(biāo)簽后應(yīng)添加注釋，這樣有助于后期debug，特別是在使用模板的時(shí)候；
  • 在所有不能自動(dòng)結(jié)束的元素末尾添加結(jié)束標(biāo)簽；
  • li結(jié)束標(biāo)簽不是必須的，所以有些人認(rèn)為可以不寫li，這可以接受，但是ul和ol標(biāo)簽一定要加；
  • video和audio元素必須要有結(jié)束標(biāo)簽。

良好的代碼排版：

  • 在項(xiàng)目中保持同意的HTML代碼風(fēng)格；
  • 使用代碼編輯器來幫助你自動(dòng)排版，比如在Sublime Text中可以使用自帶的Reindent，也可以找一些自動(dòng)排版插件來幫助你。同樣也可以使用一些在線工具比如：CSS Beautifier和JS Beautifier；
  • 在HTML中用縮進(jìn)來分層更易于閱讀，如果代碼編輯器沒有自動(dòng)縮進(jìn)功能的話可以自行修改相應(yīng)的設(shè)置。當(dāng)你發(fā)現(xiàn)你的HTML層級(jí)過深的時(shí)候，那就表示你需要重構(gòu)一下你的HTML了；
  • 用更直接易讀的方式寫HTML代碼，注意標(biāo)簽的相互嵌套關(guān)系；
  • 元素要按常規(guī)放置，比如footer元素最好是放在HTML頁面的底部，雖然理論上把它放在任何地方都可以正常運(yùn)行
  • 統(tǒng)一所有引號(hào)的使用規(guī)則，不要這里用雙引號(hào)，那里又用單引號(hào)
  • 使用小寫字母來寫標(biāo)簽和屬性，大寫字母很不易讀。

語義化設(shè)計(jì)

  • 標(biāo)題使用h1(h2、h3、...)，列表使用ul或者ol；
  • 在適當(dāng)?shù)牡胤绞褂肏TML5的新元素，比如header、footer、nav、aside；
  • 正文中的文本內(nèi)容要用p標(biāo)簽，內(nèi)容的結(jié)構(gòu)化可以使用HTML5的新元素（或者div）；
  • 修改文字樣式時(shí)，em和strong要比i和b更好些，因?yàn)榍罢哒Z義更加明顯；
  • form中要包含label元素，input要有type、placeholder以及其他必要的屬性，即使值為空都可以；
  • 盡量減少使用無意義的標(biāo)簽，例如span和div；
  • 盡量不使用標(biāo)簽本身的CSS屬性，例如b、font、s等標(biāo)簽，如果需要這些樣式，那么使用CSS樣式進(jìn)行添加；
  • 在需要強(qiáng)調(diào)的部分，使用strong、em，但是樣式盡量使用CSS樣式來描述；
  • 使用表格時(shí)，標(biāo)題用caption，表頭用thead，主題部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開，表頭用th，單元格用td；
  • 列表搭建時(shí)，使用 ul無序列表、ol有序列表、dl定義列表；
  • 每個(gè)input標(biāo)簽對(duì)應(yīng)的說明文本都需要使用label標(biāo)簽，并且通過為input設(shè)置id屬性，在lable標(biāo)簽中設(shè)置for=id來讓說明文本和對(duì)應(yīng)的input關(guān)聯(lián)起來，或直接在lable中內(nèi)嵌控件

布局規(guī)范：

  • p元素用來放文字，而不是用來布局。在瀏覽器自身的樣式中默認(rèn)p有margin和其他樣式；
  • 想實(shí)現(xiàn)換行可以使用block元素或者CSS的display屬性，盡量避免使用br來換行。文字內(nèi)容中的換行可以用br，但通常也很少這樣用；
  • 不要濫用div，W3C對(duì)div的描述是這樣的：當(dāng)沒有其他元素可用時(shí)才能使用div，如果想讓link和img這類元素能夠在結(jié)尾換行，可以在樣式中添加display:block，這樣要比把他們放進(jìn)div或者使用br來換行要好很多；
  • 必須知道哪些是塊級(jí)元素，這樣就可以避免把塊級(jí)元素放到div里面，比如列表就不需要放到div里面；
  • table是用來放表格數(shù)據(jù)的，不是用來布局的；
  • flex box現(xiàn)在越來越流行，學(xué)一學(xué)沒有壞處；
  • 盒模型一定要掌握，必須知道什么時(shí)候該用padding，什么時(shí)候該用margin；是top和left
  • 使用margin的規(guī)則：通常情況下，margin都是添加在元素的bottom和right，有時(shí)候也可以是top或者left。無論如何，盡量避免同時(shí)在bottom和top，或者right和left添加margin，可以用last-of-type選擇器來去掉最后一子元素的margin；

標(biāo)簽嵌套規(guī)范

  • 塊元素可以包含內(nèi)聯(lián)元素或者塊元素，但內(nèi)聯(lián)元素卻不能包含塊元素，它只能包含其他的內(nèi)聯(lián)元素
    • div里可以放h1，正確
    • a里可以放span，正確
    • span里可以放div，錯(cuò)誤
  • 塊級(jí)元素不能放在p里面
    • p里放ol，錯(cuò)誤
    • p里放div，錯(cuò)誤
  • 有幾個(gè)特殊的塊級(jí)元素只能包含內(nèi)嵌元素，不能再包含塊級(jí)元素，這幾個(gè)特殊的標(biāo)簽是h1~h6、p、dt
    • h1里放div，錯(cuò)誤
    • p里放div，錯(cuò)誤
    • dt里放div，錯(cuò)誤
  • ul, li；ol, li；dl, dt, dd 擁有父子級(jí)關(guān)系的標(biāo)簽；ul、ol下都只能跟li，dl下只能跟dt, dd
    • ul下不放li，直接放a，錯(cuò)誤
    • dl下放dt，dt下放a，正確
    • dl下直接放a，錯(cuò)誤
  • a標(biāo)簽不能嵌套a標(biāo)簽

網(wǎng)站代碼優(yōu)化

  • 要多為用戶考慮，不同的設(shè)備條件、使用環(huán)境以及輸入法等都會(huì)給你的HTML帶來不同的體驗(yàn)
    • 網(wǎng)頁的title，keywords，description一定要寫，要精簡全面
    • 網(wǎng)頁使用語義化代碼
    • a標(biāo)簽要設(shè)置title屬性；外部鏈接還要設(shè)置rel屬性——rel="nofollow"，nofollow值會(huì)使得網(wǎng)絡(luò)爬蟲不順著鏈接爬出
    • 所有的標(biāo)題使用h1標(biāo)簽，樣式可以使用CSS設(shè)置
    • br標(biāo)簽只能用于文本換行
    • table一定要使用caption設(shè)置表格題目
    • strong用來設(shè)置重標(biāo)，em設(shè)置斜體
    • img標(biāo)簽一定要設(shè)置其alt屬性

HTML及擴(kuò)展

DOCTYPE

  • 文檔聲明；
  • 聲明幫助瀏覽器正確地顯示網(wǎng)頁；
  • 定義這個(gè)文檔的類型，瀏覽器會(huì)先識(shí)別這句話，會(huì)按照這個(gè)類型去解析這個(gè)文檔；
  • HTML也有多個(gè)不同的版本，只有完全明白頁面中使用的確切HTML版本，瀏覽器才能完全正確地顯示出HTML頁面；
  • 一般高版本兼容低版本，所以在工作中我們默認(rèn)寫高版本就可以了（html5文檔聲明）；
  • 文檔聲明不區(qū)分大小寫；
  • 文檔聲明必須放在第一行（因?yàn)闉g覽器是從上到下解析的）；
  • 必須寫文檔聲明，如果不寫就會(huì)發(fā)生怪異事件；
  • 文檔聲明不是一個(gè)標(biāo)簽，它只是一個(gè)聲明

meta

  • meta：元信息，該標(biāo)簽提供關(guān)于HTML文檔的元數(shù)據(jù)。元數(shù)據(jù)不會(huì)顯示在頁面上，但是對(duì)于機(jī)器是可讀的。它可用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他web服務(wù)。

  • <meta charset = "UTF-8"/> 申明編碼

  • <meta name = "keywords" content=""/> 頁面關(guān)鍵詞

  • <meta name = "description" content=""/> 頁面描述

  • <meta name = "viewport" content="width=device-width, initial-scale=1"/> 視口-移動(dòng)設(shè)備

  • <meta name = "author" content ="author name"/> 定義網(wǎng)頁作者

  • <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 先使用IE最新版本和Chrome

HTML Entity

    在編寫HTML頁面時(shí)，需要用到“<”、“>”、“空格”等符號(hào)，直接輸入這些符號(hào)時(shí)，會(huì)錯(cuò)誤的把它們與標(biāo)記混在一起，非常不利于編碼。那么就需要把這些字符進(jìn)行轉(zhuǎn)移，以另一種方式書寫，以相同的形式展示。
  • 在HTML中，這些字符可稱為HTML Entity，即HTML字符實(shí)體
  • 一個(gè)HTML Entity都含有2種轉(zhuǎn)義格式：Entity Name和Entity Number

作用：

  • 顯示HTML保留字符，如 <、>、&、" 等（聯(lián)想到XSS攻擊）
  • 表示難以用常規(guī)輸入設(shè)備輸入的字符，如?、?、± 等
  • 表示給定的字符編碼可能無法表達(dá)文檔字符集的其他字符，如ASCII編碼想顯示中文，使用&#x6C34,表示“水”；

Entity Name

格式：&entityName;

  • 說明：“&”開頭，“;”結(jié)尾，以語義的形式描述字符。如字符“<”，英文名稱為“l(fā)ess than”，Entity Name為“&lt;”，取自“l(fā)ess than”2個(gè)單詞的首字母。

Entity Number

格式：&#entityNumber;

  • 說明：“&#”開頭，“;”結(jié)尾，以編號(hào)的形式描述字符。此編號(hào)可以為十進(jìn)制或十六進(jìn)制（以“&#x”開頭）等數(shù)字格式。

SVG矢量圖形

  • SVG指可伸縮矢量圖形（Scalable Vector Graphics）
  • SVG用來定義用于網(wǎng)絡(luò)的基于矢量的圖形
  • SVG使用XML格式定義圖形
  • SVG圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有所損失
  • SVG是萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)
  • SVG與諸如DOM和XSL之類的W3C標(biāo)準(zhǔn)是一個(gè)整體

SVG優(yōu)勢：與其他圖像格式相比（比如jpeg和gif），使用SVG的優(yōu)勢在于：

  • SVG圖像可通過文本編輯器來創(chuàng)建和修改
  • SVG圖像可被搜索、索引、腳本化或壓縮
  • SVG是可伸縮的
  • SVG圖像可在任何的分辨率下被高質(zhì)量地打印
  • SVG可在圖像質(zhì)量不下降的情況下被放大

瀏覽器支持：

  • IE9+、Firefox、Opera、Chrome和Safari支持內(nèi)聯(lián)SVG

SVG使用-把SVG直接嵌入HTML頁面

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:red;stroke:black;stroke-width:5;fill-rule:evenodd;"></svg>
  • SVG代碼以<svg>元素開始，包括開啟標(biāo)簽<svg>和關(guān)閉標(biāo)簽</svg>。這是根元素。
  • width和height屬性可設(shè)置此SVG文檔的寬度和高度。
  • version屬性可定義所使用的SVG版本，xmlns屬性可定義SVG命名空間
  • stroke和stroke-width屬性控制如何顯示形狀的輪廓。我們把圓的輪廓設(shè)置為5px款，黑邊框
  • fill屬性設(shè)置形狀內(nèi)的顏色。我們把填充顏色設(shè)置為紅色
  • polygon用來創(chuàng)建含有不少于三個(gè)邊的圖形
  • points屬性定義多邊形每個(gè)角的x和y坐標(biāo)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容