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