摘要:作者陳大魚頭鏈接背景最近高級前端工程師劉小夕在上開了個每個工作日布一個前端相關題的,懷著學習的心態我也參與其中,以下為我的回答,如果有不對的地方,非常歡迎各位指出。如果你采用正宗川菜做法,最后只需加入花生米,炒拌幾下就可以起鍋了。
標簽分類作者:陳大魚頭
github: KRISACHAN
鏈接:github.com/YvetteLau/S…
背景:最近高級前端工程師 劉小夕 在 github 上開了個每個工作日布一個前端相關題的 repo,懷著學習的心態我也參與其中,以下為我的回答,如果有不對的地方,非常歡迎各位指出。
在一個 html 文檔中,標簽大致可以分為以下兩個大類:
:聲明文檔類型;
:限定文檔區域;
內又有以下幾類:
1. head標簽用于定義文檔的頭部,它是所有頭部元素的容器。描述了文檔的各種屬性和信息,包括文檔的標題、在 Web 中的位置以及和其他文檔的關系等。 head內可存放標簽有:
:主要用于style文件引入
:樣式表區域
:提供了有關當前HTML元素的元信息 (meta-information)
標簽內存放文檔的內容。 內標簽分類有以下11類:
內容分區
文本內容
內聯文本語義
圖片和多媒體
內嵌內容
腳本
編輯標識
表格內容
表單
交互元素
Web組件
語義化到底重不重要?
我們知道,在HTML中,每個標題是通過標題標簽來定義的,標題標簽一共有6個,分別是:h1~6。例子如下:
<h1>我是一級標題h1>
<h2>我是二級標題h2>
<h3>我是三級標題h3>
<h4>我是四級標題h4>
<h5>我是五級標題h5>
<h6>我是六級標題h6>
如果是連續的標題,則可以用 來連接:
<hgroup>
<h1>我是一級標題h1>
<h2>我是二級標題h2>
<h3>我是三級標題h3>
<h4>我是四級標題h4>
<h5>我是五級標題h5>
<h6>我是六級標題h6>
hgroup>
如果是段落內容,則用 :
<p>我是段落內容p>
如果我們要列一個列表則可以用 或 。如果只是要標記項目,我們可以用 ,例子如下:
<ul>
<li>蘋果li>
<li>香蕉li>
<li>奧特曼li>
<li>橙子li>
ul>
若是標記順序,則用 ,例子如下:
<ol>
<li>向前走300米li>
<li>右轉li>
<li>向前走300米li>
<li>右轉li>
<li>向前走300米li>
ol>
當然我們也可以按需嵌套。
<ol>
<li>先用蛋白一個、鹽半茶匙及淀粉兩大匙攪拌均勻,調成“腌料”,雞胸肉切成約一厘米見方的碎丁并用“腌料”攪拌均勻,腌漬半小時。li>
<li>用醬油一大匙、淀粉水一大匙、糖半茶匙、鹽四分之一茶匙、白醋一茶匙、蒜末半茶匙調拌均勻,調成“綜合調味料”。li>
<li>雞丁腌好以后,色拉油下鍋燒熱,先將雞丁倒入鍋內,用大火快炸半分鐘,炸到變色之后,撈出來瀝干油汁備用。li>
<li>在鍋里留下約兩大匙油,燒熱后將切好的干辣椒下鍋,用小火炒香后,再放入花椒粒和蔥段一起爆香。隨后雞丁重新下鍋,用大火快炒片刻后,再倒入“綜合調味料”繼續快炒。li>
<ul>
<li>如果你采用正宗川菜做法,最后只需加入花生米,炒拌幾下就可以起鍋了。li>
<li>如果你在北方,可加入黃瓜丁、胡蘿卜丁和花生米,翻炒后起鍋。li>
ul>
ol>
在我們平常說話的時候,為了突出重點,我們往往會強調某些詞,就如如下的例子:
<p>我<em>非常em>喜歡加班p>
如果是重音強調,則:
<p>魚頭,明天<strong>別遲到strong>了p>
如果你在項目的一開始就使用HTML語義化,不僅不會花更多的時間,而且又有以下的可訪問性優點:
更便于開發 — 如上所述,你可以使HTML更易于理解,并且可以毫不費力的獲得一些功能。
更適配移動端 — 語義化的HTML文件比非語義化的HTML文件更加輕便,并且更易于響應式開發。
更便于SEO優化 — 比起使用非語義化的
標簽,搜索引擎更加重視在“標題、鏈接等”里面的關鍵字,使用語義化可使網頁更容易被用戶搜索到。(雖然在9012年的今天,SEO并沒太大軟用)
在Web開發無障礙性意味著使盡可能多的人能夠使用Web站點,即使這些人的能力是有限的。這里我們提供關于開發易訪問的內容的信息。
“無障礙性是最常用于描述設施或設施,幫助殘疾人,如“輪椅”。這可以擴展到盲文標識、輪椅坡道,音頻信號在人行橫道,輪廓人行道,網站設計,等等。"
WAI-ARIAWAI-ARIA 是一項技術,它可以通過瀏覽器和一些輔助技術來幫助我們進一步地識別以及實現語義化,這樣一來能幫助我們解決問題,也讓用戶可以了解發生了什么。
WAI-ARIA 是W3C編寫的規范,定義了一組可用于其他元素的HTML 特性,用于提供額外的語義化以及改善缺乏的可訪問性。以下是規范中三個主要的特性:
角色(role):這定義了元素是干什么的;
屬性: 通過定義一些屬性給元素,讓他們具備更多的語義;
狀態:用于表達元素當前的條件的特殊屬性。
HTML語義化非常地重要,雖然在組件化開發的今天,利益沒那么明顯,但是對于后期維護,用戶訪問以及用戶友好度來說都是非常重要的,在某些國家,語義化跟無障礙標準化甚至是衡量一個線上產品能否上線的標準。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/7082.html
摘要:作者陳大魚頭鏈接背景最近高級前端工程師劉小夕在上開了個每個工作日布一個前端相關題的,懷著學習的心態我也參與其中,以下為我的回答,如果有不對的地方,非常歡迎各位指出。如果你采用正宗川菜做法,最后只需加入花生米,炒拌幾下就可以起鍋了。 作者:陳大魚頭 github: KRISACHAN 鏈接:github.com/YvetteLau/S… 背景:最近高級前端工程師 劉小夕 在 github 上...
摘要:還有天,年便過去了,回頭看看,這段時間自己有出去面試過,也遇到了很多面試題,以下是我的一些總結,這篇關于面試的文章,我也會不定時的更新。然而,如果前一個定時器尚未執行,其實就是將其替換為一個新的定時器。 還有7天,2018年便過去了,回頭看看,這段時間自己有出去面試過,也遇到了很多面試題,以下是我的一些總結,這篇關于面試的文章,我也會不定時的更新。 HTML 1.說一下你對HTML語義...
閱讀 713·2023-04-25 19:43
閱讀 3910·2021-11-30 14:52
閱讀 3784·2021-11-30 14:52
閱讀 3852·2021-11-29 11:00
閱讀 3783·2021-11-29 11:00
閱讀 3869·2021-11-29 11:00
閱讀 3557·2021-11-29 11:00
閱讀 6105·2021-11-29 11:00