摘要:年月日作為推薦標(biāo)準(zhǔn)發(fā)布年月日作為提案被提出年月作為推薦標(biāo)準(zhǔn)發(fā)布年月日作為推薦標(biāo)準(zhǔn)發(fā)布年月日作為推薦標(biāo)準(zhǔn)發(fā)布。規(guī)定元素的上下文菜單。上下文菜單在用戶(hù)點(diǎn)擊元素時(shí)顯示。規(guī)定元素仍未或不再相關(guān)。規(guī)定是否對(duì)元素進(jìn)行拼寫(xiě)和語(yǔ)法檢查。規(guī)定元素的行內(nèi)樣式。
作者:陳大魚(yú)頭
github: KRISACHAN
上一篇分享了CSS的邏輯屬性與盒子模型中分享了一些有關(guān)設(shè)備屏幕的知識(shí)以及瀏覽器視口的坐標(biāo)構(gòu)成。本篇?jiǎng)t會(huì)分享HTML相關(guān)的一些知識(shí)。
我們?cè)谛蛘碌拈_(kāi)頭就簡(jiǎn)單的講解了HTML的誕生歷史,本篇不作詳細(xì)講解,有興趣的可以去看wikipedia。
HTML大事記首先我們簡(jiǎn)單地來(lái)看一下HTML的發(fā)展歷程(具體各個(gè)版本的區(qū)別亦不做講解)。
1982年Tim Berners-Lee創(chuàng)建了html;
1989年Tim Berners-Lee規(guī)定HTML并在1990年底寫(xiě)出瀏覽器和服務(wù)器軟件;
1991年底Tim Berners-Lee提及HTML標(biāo)簽(它描述18個(gè)元素,包括HTML初始的、相對(duì)簡(jiǎn)單的設(shè)計(jì));
1993年互聯(lián)網(wǎng)工程任務(wù)組(IETF)發(fā)布首個(gè)HTML規(guī)范的提案;
1994年IETF創(chuàng)建一個(gè)HTML工作組;
1995年11月24日HTML 2.0作為IETF RFC 1866發(fā)布;
IETF于1996年9月12日關(guān)閉它的HTML工作組;
1997年1月14日HTML 3.2作為W3C推薦標(biāo)準(zhǔn)發(fā)布。這是首個(gè)完全由W3C開(kāi)發(fā)并標(biāo)準(zhǔn)化的版本;
1997年12月18日HTML 4.0作為W3C推薦標(biāo)準(zhǔn)發(fā)布;
1998年4月24日進(jìn)行微調(diào),不增加版本號(hào);
1999年12月24日HTML 4.01作為W3C推薦標(biāo)準(zhǔn)發(fā)布;
2000年5月ISO/IEC 15445:2000("ISO HTML",基于HTML 4.01嚴(yán)格版)作為ISO/IEC國(guó)際標(biāo)準(zhǔn)發(fā)布。
2014年10月28日HTML 5作為W3C推薦標(biāo)準(zhǔn)發(fā)布;
2015年3月20日HTML6作為提案被W3C提出;
2016年11月HTML5.1作為W3C推薦標(biāo)準(zhǔn)發(fā)布;
2017年12月14日HTML5.2作為W3C推薦標(biāo)準(zhǔn)發(fā)布;
2018年10月18日HTML5.3作為W3C推薦標(biāo)準(zhǔn)發(fā)布。
魚(yú)頭注:上面某些信息看得真讓人發(fā)愁。。。。。。
HTML標(biāo)簽對(duì)于應(yīng)付日常的業(yè)務(wù),寫(xiě)在同一行的就用span,需要換行的就用div,如果有超鏈接就用a。長(zhǎng)得丑?加color啊,不夠大?用font-size: xx-large啊。嗯,沒(méi)有任何問(wèn)題,精通HTML。: )
此刻正在看這篇文章的你估計(jì)會(huì)覺(jué)得:“HTML有什么好說(shuō)的,每天都寫(xiě),鍵盤(pán)上div那幾個(gè)字母都要被我按爛了,這只有初學(xué)者才需要學(xué)。”
嗯,說(shuō)得對(duì)。那本篇結(jié)束,再見(jiàn)!
咦,不對(duì),其實(shí)在魚(yú)頭看來(lái)HTML并不簡(jiǎn)單,作為一門(mén)原本是為了學(xué)者們的交流而誕生的語(yǔ)言,本身就是充滿(mǎn)嚴(yán)謹(jǐn)性的,加上又已經(jīng)發(fā)展了37個(gè)年頭,更是不簡(jiǎn)單。
魚(yú)頭注:本篇不會(huì)對(duì)HTML的標(biāo)簽結(jié)構(gòu)跟文件組成進(jìn)行介紹,有需要了解的童鞋可以參考MDN跟W3school
首先我們來(lái)看一個(gè)基本的HTML頁(yè)面會(huì)有什么東西:
hello world hello world
從上面我們可以知道一個(gè)基本的HTML頁(yè)面會(huì)有定義文檔類(lèi)型的,告知瀏覽器這是一個(gè)HTML文檔的,定義各種文檔屬性的,以及定義內(nèi)容主體的。
首先我們一起來(lái)看看這幾大標(biāo)簽的具體情況以及子標(biāo)簽詳情。
DOCTYPE是個(gè)聲明而不是標(biāo)簽,它必須在HTML 文檔的第一行,位于 標(biāo)簽之前。它是指示 web 瀏覽器關(guān)于頁(yè)面使用哪個(gè) HTML 版本進(jìn)行編寫(xiě)的指令。必須始終向 HTML 文檔添加 聲明,這樣瀏覽器才能獲知文檔類(lèi)型。詳情請(qǐng)參考HTML 元素和有效的 DTD。
html限定了文檔的開(kāi)始點(diǎn)和結(jié)束點(diǎn),在它們之間是文檔的頭部和主體。我們來(lái)看看在標(biāo)簽中可添加的專(zhuān)屬屬性有哪些:
屬性 | 值 | 描述 |
---|---|---|
manifest | url | 定義一個(gè) URL,在這個(gè) URL 上描述了文檔的緩存信息。(已廢棄) |
xmlns | http://www.w3.org/1999/xhtml | 定義 XML namespace 屬性。 |
HTML 屬性賦予元素意義和語(yǔ)境。下面的全局屬性可用于任何 HTML 元素。
屬性 | 描述 |
---|---|
accesskey | 規(guī)定激活元素的快捷鍵。 |
class | 規(guī)定元素的一個(gè)或多個(gè)類(lèi)名(引用樣式表中的類(lèi))。 |
contenteditable | 規(guī)定元素內(nèi)容是否可編輯。 |
contextmenu | 規(guī)定元素的上下文菜單。上下文菜單在用戶(hù)點(diǎn)擊元素時(shí)顯示。 |
data-* | 用于存儲(chǔ)頁(yè)面或應(yīng)用程序的私有定制數(shù)據(jù)。 |
dir | 規(guī)定元素中內(nèi)容的文本方向。 |
draggable | 規(guī)定元素是否可拖動(dòng)。 |
dropzone | 規(guī)定在拖動(dòng)被拖動(dòng)數(shù)據(jù)時(shí)是否進(jìn)行復(fù)制、移動(dòng)或鏈接。 |
hidden | 規(guī)定元素仍未或不再相關(guān)。 |
id | 規(guī)定元素的唯一 id。 |
lang | 規(guī)定元素內(nèi)容的語(yǔ)言。 |
spellcheck | 規(guī)定是否對(duì)元素進(jìn)行拼寫(xiě)和語(yǔ)法檢查。 |
style | 規(guī)定元素的行內(nèi) CSS 樣式。 |
tabindex | 規(guī)定元素的 tab 鍵次序。 |
title | 規(guī)定有關(guān)元素的額外信息。 |
translate | 規(guī)定是否應(yīng)該翻譯元素內(nèi)容。 |
標(biāo)簽用于定義文檔的頭部,它是所有頭部元素的容器。描述了文檔的各種屬性和信息,包括文檔的標(biāo)題、在 Web 中的位置以及和其他文檔的關(guān)系等。
那么有哪些標(biāo)簽是可以放在內(nèi)的呢?
首先是
通常情況下,瀏覽器會(huì)從當(dāng)前文檔的 URL 中提取相應(yīng)的元素來(lái)填寫(xiě)相對(duì) URL 中的空白。
使用
根據(jù)上面的DEMO
/head-base.html)我們可以發(fā)現(xiàn),在設(shè)置了
其次是scheme,此屬性是用來(lái)設(shè)置或返回用于解釋 content 屬性的值的格式。例子如下:
有趣的是,MDN上有這么一段描述:
Notes: Do not use this attribute as it is obsolete. There is no replacement for it as there was no real usage for it. Omit it altogether.
意思就是不要用這屬性,因?yàn)檫@屬性并沒(méi)什么用處。: )
然后是name,此屬性定義文檔級(jí)元數(shù)據(jù)的名稱(chēng)。值得注意的是,如果定義的元數(shù)據(jù)設(shè)置了itemprop, http-equiv or charset ,就不能再設(shè)置name了。
name的值含義如下
值 | 描述 |
---|---|
application-name | 定義正運(yùn)行在該網(wǎng)頁(yè)上的網(wǎng)絡(luò)應(yīng)用名稱(chēng) |
author | 文檔作者 |
description | 其中包含頁(yè)面內(nèi)容的簡(jiǎn)短和精確的描述。一些瀏覽器,如Firefox和Opera,將其用作書(shū)簽頁(yè)面的默認(rèn)描述。 |
generator | 包含生成頁(yè)面的軟件的標(biāo)識(shí)符。 |
keywords | 包含與逗號(hào)分隔的頁(yè)面內(nèi)容相關(guān)的單詞。 |
referrer | 控制所有從該文檔發(fā)出的 HTTP 請(qǐng)求中HTTP Referer 首部的內(nèi)容。 |
others | 其他的內(nèi)容。 |
詳細(xì)name值,可以訪問(wèn)https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta#屬性。
最后我們來(lái)看看http-equiv,此屬性把content屬性連接到HTTP頭部。
值 | 描述 |
---|---|
content-security-policy | 允許站點(diǎn)管理者在指定的頁(yè)面控制用戶(hù)代理的資源。除了少數(shù)例外,這條政策將極大地指定服務(wù)源 以及腳本端點(diǎn)。這將幫助防止跨站腳本攻擊。 |
default-style | 這個(gè)屬性指定了在頁(yè)面上使用的首選樣式表. content屬性必須包含 元素的標(biāo)題, href屬性鏈接到CSS樣式表或包含CSS樣式表的元素的標(biāo)題。 |
refresh | 這個(gè)屬性指定如果 |
詳細(xì)http-equiv值,可以訪問(wèn)https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta#屬性。
body標(biāo)簽內(nèi)存放文檔的內(nèi)容。內(nèi)可使用的標(biāo)簽大概有357個(gè),其中MDN給內(nèi)的元素分了11類(lèi)。有需要了解的可參考https://developer.mozilla.orgzh-CN/docs/Web/HTML/Element。
按照MDN的劃分,一共有以下11類(lèi)標(biāo)簽:
1. 內(nèi)容分區(qū):
內(nèi)容分區(qū)元素允許你將文檔內(nèi)容從邏輯上進(jìn)行組織劃分。
2. 文本內(nèi)容
使用 HTML 文本內(nèi)容元素來(lái)組織在開(kāi)標(biāo)簽 `](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/body) 和閉標(biāo)簽 ` 里的塊或章節(jié)的內(nèi)容。這些元素能標(biāo)識(shí)內(nèi)容的宗旨或結(jié)構(gòu),而這對(duì)于 [accessibility 和 SEO 很重要。
3. 內(nèi)聯(lián)文本語(yǔ)義
使用 HTML 內(nèi)聯(lián)文本語(yǔ)義(Inline text semantics)定義一個(gè)單詞、一行內(nèi)容,或任意文字的語(yǔ)義、結(jié)構(gòu)或樣式。
4. 圖片和多媒體
HTML 支持各種多媒體資源,例如圖像,音頻和視頻。
5. 內(nèi)嵌內(nèi)容
除了常規(guī)的多媒體內(nèi)容,HTML 可以包括各種其他的內(nèi)容,即使它并不容易交互。
6. 腳本
為了創(chuàng)建動(dòng)態(tài)內(nèi)容和 Web 應(yīng)用程序,HTML 支持使用腳本語(yǔ)言,最突出的就是 JavaScript。某些元素支持此功能。
7. 編輯標(biāo)識(shí)
這些元素能標(biāo)示出某個(gè)文本被更改過(guò)的部分。
8. 表格內(nèi)容
這里的元素用于創(chuàng)建和處理表格數(shù)據(jù)。
9. 表單
HTML 提供了許多可一起使用的元素,這些元素能用來(lái)創(chuàng)建一個(gè)用戶(hù)可以填寫(xiě)并提交到網(wǎng)站或應(yīng)用程序的表單。
10. 交互元素
HTML 提供了一系列有助于創(chuàng)建交互式用戶(hù)界面對(duì)象的元素。
11. Web組件
Web 組件是一種與 HTML 相關(guān)聯(lián)(HTML-related)的技術(shù),簡(jiǎn)單來(lái)說(shuō),它允許創(chuàng)建自定義元素,并如同普通的 HTML 一樣使用它們。此外,你甚至可以創(chuàng)建經(jīng)過(guò)自定義的標(biāo)準(zhǔn) HTML 元素。標(biāo)簽語(yǔ)義化
語(yǔ)義化到底重不重要?
有的人認(rèn)為,在可以“競(jìng)價(jià)排名”以及“軟件界面”的場(chǎng)景多于“富文本”的前提下,HTML語(yǔ)意并不重要。只要div、span、a標(biāo)簽差不多就能走天下了,最有意思的是,百度百科跟維基百科這類(lèi)文檔類(lèi)網(wǎng)站,HTML結(jié)構(gòu)大多數(shù)都是上述的情況。
但是,標(biāo)簽語(yǔ)義化真的不重要嗎?
這個(gè)問(wèn)題魚(yú)頭暫時(shí)不回答,但會(huì)在后續(xù)的文章中體現(xiàn)并實(shí)踐魚(yú)頭的想法。如果你對(duì)這個(gè)問(wèn)題感興趣,也可以通過(guò)留言或者加魚(yú)頭好友或者進(jìn)魚(yú)頭的微信群來(lái)討論,聯(lián)系方式在文章底部。
我們知道,在HTML中,每個(gè)標(biāo)題是通過(guò)標(biāo)題標(biāo)簽來(lái)定義的,標(biāo)題標(biāo)簽一共有6個(gè),分別是:h1~6。例子如下:
我是一級(jí)標(biāo)題
我是二級(jí)標(biāo)題
我是三級(jí)標(biāo)題
我是四級(jí)標(biāo)題
我是五級(jí)標(biāo)題
我是六級(jí)標(biāo)題
如果是連續(xù)的標(biāo)題,則可以用 來(lái)連接:
我是一級(jí)標(biāo)題
我是二級(jí)標(biāo)題
我是三級(jí)標(biāo)題
我是四級(jí)標(biāo)題
我是五級(jí)標(biāo)題
我是六級(jí)標(biāo)題
如果是段落內(nèi)容,則用 :
我是段落內(nèi)容
如果我們要列一個(gè)列表則可以用 或 。如果只是要標(biāo)記項(xiàng)目,我們可以用 ,例子如下:
若是標(biāo)記順序,則用 ,例子如下:
- 向前走300米
- 右轉(zhuǎn)
- 向前走300米
- 右轉(zhuǎn)
- 向前走300米
當(dāng)然我們也可以按需嵌套。
- 先用蛋白一個(gè)、鹽半茶匙及淀粉兩大匙攪拌均勻,調(diào)成“腌料”,雞胸肉切成約一厘米見(jiàn)方的碎丁并用“腌料”攪拌均勻,腌漬半小時(shí)。
- 用醬油一大匙、淀粉水一大匙、糖半茶匙、鹽四分之一茶匙、白醋一茶匙、蒜末半茶匙調(diào)拌均勻,調(diào)成“綜合調(diào)味料”。
- 雞丁腌好以后,色拉油下鍋燒熱,先將雞丁倒入鍋內(nèi),用大火快炸半分鐘,炸到變色之后,撈出來(lái)瀝干油汁備用。
- 在鍋里留下約兩大匙油,燒熱后將切好的干辣椒下鍋,用小火炒香后,再放入花椒粒和蔥段一起爆香。隨后雞丁重新下鍋,用大火快炒片刻后,再倒入“綜合調(diào)味料”繼續(xù)快炒。
- 如果你采用正宗川菜做法,最后只需加入花生米,炒拌幾下就可以起鍋了。
- 如果你在北方,可加入黃瓜丁、胡蘿卜丁和花生米,翻炒后起鍋。
在我們平常說(shuō)話(huà)的時(shí)候,為了突出重點(diǎn),我們往往會(huì)強(qiáng)調(diào)某些詞,就如如下的例子:
我非常喜歡加班
如果是重音強(qiáng)調(diào),則:
魚(yú)頭,明天別遲到了
在我們身邊任何的地方都是非常需要語(yǔ)義學(xué)的,我們依靠過(guò)去的學(xué)習(xí)經(jīng)驗(yàn),通過(guò)所見(jiàn)的物體就可以知道它代表的意義。例如“紅燈停,綠燈行”。如果這個(gè)語(yǔ)義出錯(cuò)或者弄反了,造成的影響是不堪設(shè)想的。
同樣的道理,我們需要確保使用了正確的元素來(lái)給予內(nèi)容正確的意思、作用以及外形。
每個(gè)標(biāo)簽都有自己的使用場(chǎng)景,如果要全部列出來(lái),也不是一篇文章能寫(xiě)得完的。更多的需要能堅(jiān)持看到這里的你來(lái)探索,當(dāng)然也非常歡迎你來(lái)跟魚(yú)頭一起討論標(biāo)簽語(yǔ)義化的問(wèn)題。
參考資料:HTML
HTML(超文本標(biāo)記語(yǔ)言)
HTML元素參考
HTML元素
HTML 文字處理基礎(chǔ)
HTML 元素和有效的 DTD
HTML全局屬性
HTML 標(biāo)簽
HTML DOM Meta 對(duì)象
MDN 標(biāo)簽
重學(xué)前端
HTML4
HTML5
HTML5.1
10個(gè)HTML 5.1的新功能
HTML5.2
HTML5.3
html6test
HTML6提案
ARIA in HTML
文檔對(duì)象模型
如果存在呢?HTML6-廣義概念
【Hello CSS】系列【Hello CSS】是以CSS基礎(chǔ)概念為主題的系列文章,旨在幫助大家更深刻地了解并且提高CSS在各位開(kāi)發(fā)者心目中的地位。由于魚(yú)頭我水平有限,文筆有限,如果各位在文章中發(fā)現(xiàn)有任何不合理,不正確的地方,還煩不吝指出,我會(huì)非常感謝的;如果通過(guò)文章有任何想法或疑問(wèn),也希望各位能積極留言,我們互相探討;如果通過(guò)本系列文章有所收獲,這就讓魚(yú)頭我喜不自勝了!
如果你也喜歡 CSS,喜歡探討技術(shù),或者對(duì)本文,本系列有任何的意見(jiàn)或建議,你可以?huà)呙柘路蕉S碼,關(guān)注微信公眾號(hào)“ 魚(yú)頭的Web海洋 ”,隨時(shí)與魚(yú)頭互動(dòng)。歡迎!衷心希望可以遇見(jiàn)你。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/115008.html
摘要:年月日作為推薦標(biāo)準(zhǔn)發(fā)布年月日作為提案被提出年月作為推薦標(biāo)準(zhǔn)發(fā)布年月日作為推薦標(biāo)準(zhǔn)發(fā)布年月日作為推薦標(biāo)準(zhǔn)發(fā)布。規(guī)定元素的上下文菜單。上下文菜單在用戶(hù)點(diǎn)擊元素時(shí)顯示。規(guī)定元素仍未或不再相關(guān)。規(guī)定是否對(duì)元素進(jìn)行拼寫(xiě)和語(yǔ)法檢查。規(guī)定元素的行內(nèi)樣式。 作者:陳大魚(yú)頭 github: KRISACHAN 上一篇分享了CSS的邏輯屬性與盒子模型中分享了一些有關(guān)設(shè)備屏幕的知識(shí)以及瀏覽器視口的坐標(biāo)...
摘要:內(nèi)聯(lián)樣式標(biāo)簽魚(yú)頭注根據(jù)張?chǎng)涡窭蠋熢谟腥€(gè)選擇器可以干掉個(gè)選擇器分享過(guò)個(gè)級(jí)聯(lián)選擇器可以擊敗個(gè)選擇器目前已無(wú)此現(xiàn)象。 作者:陳大魚(yú)頭 github: KRISACHAN 在上一篇的HTML的標(biāo)簽與語(yǔ)意中簡(jiǎn)單的介紹了HTML標(biāo)簽跟其一些屬性,向各位堅(jiān)持看到這里的親表示真誠(chéng)的感謝。本篇主要會(huì)分享一些跟CSS選擇器(CSS Selectors)相關(guān)的內(nèi)容,有興趣的請(qǐng)繼續(xù)往下看。 CSS選擇...
摘要:不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)標(biāo)準(zhǔn)模式的排版和運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。又稱(chēng)內(nèi)核及以上版本,等內(nèi)核及以上。內(nèi)核原為,現(xiàn)為內(nèi)核等。如果不能確定時(shí),首選使用自然樣式標(biāo)簽 HTML 語(yǔ)義化 HTML標(biāo)簽的語(yǔ)義化是指:通過(guò)使用包含語(yǔ)義的標(biāo)簽(如h1-h6)恰當(dāng)?shù)乇硎疚臋n結(jié)構(gòu) css命名的語(yǔ)義化是指:為html標(biāo)簽添加有意義的class 為什么需要語(yǔ)義化: 去...
摘要:不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)標(biāo)準(zhǔn)模式的排版和運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。又稱(chēng)內(nèi)核及以上版本,等內(nèi)核及以上。內(nèi)核原為,現(xiàn)為內(nèi)核等。如果不能確定時(shí),首選使用自然樣式標(biāo)簽 HTML 語(yǔ)義化 HTML標(biāo)簽的語(yǔ)義化是指:通過(guò)使用包含語(yǔ)義的標(biāo)簽(如h1-h6)恰當(dāng)?shù)乇硎疚臋n結(jié)構(gòu) css命名的語(yǔ)義化是指:為html標(biāo)簽添加有意義的class 為什么需要語(yǔ)義化: 去...
閱讀 3495·2023-04-26 02:44
閱讀 1632·2021-11-25 09:43
閱讀 1523·2021-11-08 13:27
閱讀 1888·2021-09-09 09:33
閱讀 906·2019-08-30 15:53
閱讀 1768·2019-08-30 15:53
閱讀 2780·2019-08-30 15:53
閱讀 3114·2019-08-30 15:44