摘要:一什么是是超文本標(biāo)記語言,超文本的意思就是指頁面內(nèi)可以包含圖片鏈接,甚至音樂程序等非文字元素。這表示著元素的結(jié)尾這表示元素在此結(jié)束在本例中即段落在此結(jié)束。元素指定了當(dāng)前的字符編碼是,它包括了非常多人類已知語言的字符。
一·什么是HTML
HTML(HyperText Markup Language)是超文本標(biāo)記語言,“超文本”的意思就是指頁面內(nèi)可以包含圖片、鏈接,甚至音樂、程序等非文字元素。不僅如此,它還可以從一個(gè)文件跳轉(zhuǎn)到另一個(gè)文件,與世界各地主機(jī)的文件連接。HTML不是一種編程語言,而是一種標(biāo)記語言。所謂的標(biāo)記語言實(shí)際上就是一套標(biāo)記標(biāo)簽。總之,HTML的作用就是通過標(biāo)記標(biāo)簽來描述網(wǎng)頁,使得網(wǎng)頁的結(jié)構(gòu)在瀏覽器中展現(xiàn)出來。
二·HTML的結(jié)構(gòu) 1.骨架HTML有自己的語法骨架格式:
2.標(biāo)簽My test page
以下圖這個(gè)
標(biāo)簽為例
這樣的標(biāo)簽一般包括以下幾部分:
1.開始標(biāo)簽(The opening tag):這里包含了元素的名稱(本例為p),被開、閉尖括號(hào)所包圍。這表示元素從此開始或者開始起作用——在本例中即段落由此開始。
2.閉合標(biāo)簽(The closing tag):與開始標(biāo)簽相似,只是其在元素名之前包含了一個(gè)斜杠。這表示著元素的結(jié)尾——這表示元素在此結(jié)束——在本例中即段落在此結(jié)束。
3.內(nèi)容(The content):這是一個(gè)元素的內(nèi)容,這個(gè)例子中就是所輸入的文本本身。
4.元素(The element):開標(biāo)簽、閉標(biāo)簽與內(nèi)容相結(jié)合,便是一個(gè)完整的元素。
元素有時(shí)候會(huì)有屬性,比如下圖:
屬性(Attribute)包含了關(guān)于元素的一些額外信息,這些信息不會(huì)出現(xiàn)在內(nèi)容中,但是一般會(huì)影響元素的顯示或者動(dòng)作。上面的例子中,class是一個(gè)屬性名,editor-note是屬性的值。
一個(gè)屬性一般包括以下三點(diǎn):
在屬性與元素名稱(或上一個(gè)屬性,如果有超過一個(gè)屬性的話)之間的空格符。
屬性的名稱,并接上一個(gè)等號(hào)。
由引號(hào)所包圍的屬性值。
4.元素之間的嵌套我們可以將一個(gè)元素置于其他元素之中,這種方式被稱為嵌套,例如我們強(qiáng)調(diào)某一部分文字,可以使用元素包裹,意味著這段文字被強(qiáng)調(diào):
My cat is very grumpy.
My cat is very grumpy.
5.空元素有一些元素并不包含內(nèi)容,也沒有閉標(biāo)簽,例如“骨架”中的元素:
它包含了兩個(gè)屬性,但是這里并沒有 閉合標(biāo)簽,也沒有內(nèi)部?jī)?nèi)容。因?yàn)閳D像元素不需要包含內(nèi)容來產(chǎn)生效果,它的作用是向其所在的位置嵌入一個(gè)圖像。
我們?cè)倩仡^看我們的HTML骨架:
My test page
用于聲明文檔類型,文檔類型的聲明必須位于HTML的第一行,它的意思是該HTML是HTML5。如果是其他版本的HTML那么聲明方法會(huì)不同,但是我們現(xiàn)在只要用HTML5的聲明就可以了。具體其他HTML版本的聲明可以參考HTML 標(biāo)簽
瀏覽器解析HTML有三種方式:
1.標(biāo)準(zhǔn)模式(非怪異模式):在該模式中,頁面按照HTML與CSS的定義渲染。
2.怪異模式:在該模式中則嘗試模擬更舊的瀏覽器的行為。
3.部分怪異(近乎標(biāo)準(zhǔn))模式: 一些瀏覽器(例如,那些基于Mozilla的Gecko渲染引擎的,或者Internet Explorer 8在strict mode下)也使用一種嘗試于這兩者之間妥協(xié)的“近乎標(biāo)準(zhǔn)”(almost standards)模式,實(shí)施了一種表單元格尺寸的怪異行為,除此之外符合標(biāo)準(zhǔn)定義。
總結(jié):一個(gè)不含任何 DOCTYPE 的網(wǎng)頁將會(huì)以 怪異(quirks) 模式渲染。HTML5提供的是標(biāo)準(zhǔn)模式,向后兼容的, 等同于開啟了標(biāo)準(zhǔn)模式,那么瀏覽器就得老老實(shí)實(shí)的按照W3C的 標(biāo)準(zhǔn)解析渲染頁面,這樣一來,你的頁面在所有的瀏覽器里顯示的就都是一個(gè)樣子了。
元素包含了整個(gè)頁面的內(nèi)容,有時(shí)也被稱作根元素或根標(biāo)簽。
元素規(guī)定了文檔相關(guān)的配置信息,包括文檔的標(biāo)題,引用的樣式和腳本等等,
標(biāo)簽中的內(nèi)容一般不會(huì)直接出現(xiàn)在頁面中。具體內(nèi)容可以參考標(biāo)簽里有什么? Metadata-HTML中的元數(shù)據(jù)元素含了想讓用戶在訪問頁面時(shí)看到的內(nèi)容,不管是文本,圖像,視頻,游戲,可播放的音軌或其他內(nèi)容。
元素指定了當(dāng)前的字符編碼是UTF-8,它包括了非常多人類已知語言的字符?;旧?UTF-8 可以處理任何文本內(nèi)容,具體的字符編碼原理可以參考字符編碼筆記:ASCII,Unicode 和 UTF-8
元素用于表述那些不能由其他元素表述的任何元數(shù)據(jù),包括頁面的說明,關(guān)鍵字,最后修改日期,和其它的元數(shù)據(jù)。具體可以參考HTML meta標(biāo)簽總結(jié)與屬性使用介紹、 - HTML(超文本標(biāo)記語言) | MDN
有時(shí)候我們會(huì)看到一些屬性沒有值,但是仍然合法,例如:(disabled屬性用于使表單輸入變?yōu)椴豢捎?變灰色),此時(shí)用戶不能向他們輸入任何數(shù)據(jù)。)只有當(dāng)屬性值和屬性名相等的時(shí)候才能這樣使用屬性,這是一種簡(jiǎn)寫。
(2)屬性值的引號(hào)有一些粗糙的網(wǎng)站中會(huì)用一些奇怪的標(biāo)記風(fēng)格,有的開發(fā)者會(huì)不給屬性值加引號(hào),有時(shí)瀏覽器會(huì)誤解我們的標(biāo)記,始終添加引號(hào)會(huì)避免很多問題,使得代碼更易讀。
(3)單引號(hào)或雙引號(hào)屬性值用單引號(hào)或者雙引號(hào)都可以,這只是代碼風(fēng)格的問題,但是千萬不要在一條屬性值里混用,盡量避免在同一套代碼中混用,這樣可以增加你代碼的易讀性。而如果你已經(jīng)使用了一種引號(hào),在這個(gè)引號(hào)中你可以嵌套另外一種引號(hào)。
2.HTML中的空白有一些代碼中會(huì)包含很多的空格,但是實(shí)際上這是沒有必要的,例如下面兩端代碼是等價(jià)的:
Dogs are silly.
Dogs are silly.
無論用了多少空白(包括空白字符和換行),當(dāng)我們渲染這些代碼的時(shí)候,HTML解釋器會(huì)將連續(xù)出現(xiàn)的空白字符減少為一個(gè)多帶帶的空格符·
3.HTML中的特殊字符在HTML中,<、>、"、"、&是特殊字符,它們本身就是HTML語法的一部分,因此,如果直接把它們包含進(jìn)我們的文本中有時(shí)會(huì)出現(xiàn)錯(cuò)誤,如果想要在文本中使用它們就必須使用字符引用(表示字符的特殊編碼),它們每個(gè)字符以&開始,以;結(jié)束,具體如下表:
原義字符 | 等價(jià)字符引用 |
---|---|
< | < |
> | > |
" | " |
" | ' |
& | & |
維基百科這一篇中收錄了全部的字符引用表:XML和HTML字符實(shí)體引用列表
4.HTML注釋就如同大部分的編程語言一樣,在HTML中也可以書寫注釋,注釋是被瀏覽器忽略,且對(duì)用戶不可見的,它們的目的是允許我們來描述代碼的工作的。如果我們?cè)谌舾赡暌院笾匦虏榭次覀兊拇a庫,或者處理別人的代碼,注釋是很有用的。為HTML添加注釋,需要特殊記號(hào):包括起來,例如:
5.HTML標(biāo)簽的語義化I"m not inside a comment
語義化的標(biāo)簽,旨在讓標(biāo)簽有自己的含義,選擇最合適最正確的標(biāo)簽,具體左右有三:
代碼結(jié)構(gòu)清晰,方便閱讀,有利于團(tuán)隊(duì)合作開發(fā)。
方便其他設(shè)備解析(如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備)以語義的方式來渲染網(wǎng)頁。
3.搜索引擎的爬蟲依賴于標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重,利于 SEO。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/53277.html
摘要:學(xué)習(xí)用時(shí)小時(shí)學(xué)習(xí)目標(biāo)第二天任務(wù)目標(biāo)是否已達(dá)成麻麻嘚。摘錄一個(gè)筆記第二天筆記以下是原文愛上前端,用技術(shù)帶給用戶最優(yōu)美的體驗(yàn)。為文本框命名,以備后臺(tái)程序使用。 codepen好像崩了?-_-|| 2019.3.6 怎么也要至少過一遍鴨。學(xué)習(xí)用時(shí):3小時(shí)學(xué)習(xí)目標(biāo):第二天任務(wù)目標(biāo)是否已達(dá)成:麻麻嘚。 今天學(xué)了什么? 勉強(qiáng)再認(rèn)了一次各種標(biāo)簽(雖然感覺還是認(rèn)不?。?,ol,ul,li和dl,dt,d...
摘要:如何在中使用動(dòng)畫前端掘金本文講一下中動(dòng)畫應(yīng)用的部分。與的快速入門指南推薦前端掘金是非常棒的框架,能夠創(chuàng)建功能強(qiáng)大,動(dòng)態(tài)功能的。自發(fā)布以來,已經(jīng)廣泛應(yīng)用于開發(fā)中。 如何在 Angular 中使用動(dòng)畫 - 前端 - 掘金本文講一下Angular中動(dòng)畫應(yīng)用的部分。 首先,Angular本生不提供動(dòng)畫機(jī)制,需要在項(xiàng)目中加入Angular插件模塊ngAnimate才能完成Angular的動(dòng)畫機(jī)制...
摘要:注意對(duì)于中文網(wǎng)頁需要使用聲明編碼,否則會(huì)出現(xiàn)亂碼。聲明不是標(biāo)簽它是指示瀏覽器關(guān)于頁面使用哪個(gè)版本進(jìn)行編寫的指令。這兩個(gè)元素是專門為定義樣式而生的。點(diǎn)擊點(diǎn)我會(huì)自動(dòng)打開一個(gè)新窗口跳轉(zhuǎn)到頁面點(diǎn)我直接跳轉(zhuǎn)到百度頁面點(diǎn)我HTML是什么? 超文本標(biāo)記語言(Hypertext Markup Language, HTML)是一種用于創(chuàng)建網(wǎng)頁的標(biāo)記語言。 本質(zhì)上是瀏覽器可識(shí)別的規(guī)則,我們按照規(guī)則寫網(wǎng)頁,瀏覽...
摘要:注意對(duì)于中文網(wǎng)頁需要使用聲明編碼,否則會(huì)出現(xiàn)亂碼。聲明不是標(biāo)簽它是指示瀏覽器關(guān)于頁面使用哪個(gè)版本進(jìn)行編寫的指令。這兩個(gè)元素是專門為定義樣式而生的。點(diǎn)擊點(diǎn)我會(huì)自動(dòng)打開一個(gè)新窗口跳轉(zhuǎn)到頁面點(diǎn)我直接跳轉(zhuǎn)到百度頁面點(diǎn)我HTML是什么? 超文本標(biāo)記語言(Hypertext Markup Language, HTML)是一種用于創(chuàng)建網(wǎng)頁的標(biāo)記語言。 本質(zhì)上是瀏覽器可識(shí)別的規(guī)則,我們按照規(guī)則寫網(wǎng)頁,瀏覽...
摘要:什么是什么是什么叫做呢的全稱是文檔對(duì)象模型,定義了表示和修改文檔所需的對(duì)象這些對(duì)象的行為和屬性以及這些對(duì)象之間的關(guān)系。對(duì)象即為宿主對(duì)象,由瀏覽器廠商定義,用來操作的功能的一類對(duì)象和集合。簡(jiǎn)單來說,就是用來操作和的,它是一系列對(duì)象的集合。什么是DOM 什么叫做DOM呢? ? DOM的全稱是Document Object Model 文檔對(duì)象模型,DOM定義了表示和修改文檔所需的對(duì)象、這些對(duì)象的...
閱讀 3019·2021-11-24 10:21
閱讀 1588·2021-10-11 10:57
閱讀 2804·2021-09-22 15:24
閱讀 2659·2021-09-22 14:58
閱讀 2331·2019-08-30 13:16
閱讀 3478·2019-08-29 13:05
閱讀 3411·2019-08-29 12:14
閱讀 3441·2019-08-27 10:55