初識H5（筆記一）

2024-04-27 15:06:01

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

簡單認(rèn)識HTML

什么是html？html的全稱是 HyperText Markup Language（超文本標(biāo)記語言）

html的作用？ 一個.html文件的本質(zhì)是純文本文件，也就是說在文件當(dāng)中所有的文字是同級別的，純文本本身并不知道每個文字的語義，只會簡單的對文本進行統(tǒng)一處理。

什么是語義？比如說到底那些文字代表一個段落、那些文字代表是一個標(biāo)題呢等。。。

html 的出現(xiàn)？ html的作用就是給純文本文件當(dāng)中的文字添加語義的，比如告訴瀏覽器哪些文字是標(biāo)題、從哪開始到哪結(jié)束是一個段落。

html核心? html核心是學(xué)習(xí)各種標(biāo)簽。

標(biāo)簽是啥？ html中的標(biāo)簽也是文本，只不過這些文本是為其他文本添加語義來的，也稱之為超文本，而且這些標(biāo)簽（超文本）在瀏覽器當(dāng)中是不顯示出來的。

html標(biāo)簽作用的誤區(qū)? html標(biāo)簽只是給特定的文本添加語義的，而并沒有改變文本的樣式。比如 : h1標(biāo)簽只是標(biāo)注哪些文本是標(biāo)題，而并沒有改變文本的大小和粗細(xì)。

HTML的發(fā)展史

HTML是在1993年由國際互聯(lián)網(wǎng)工程任務(wù)組 <The Internet Engineering Task Force，簡稱 IETF > 發(fā)布的1.0版本，并在95年由W3C組織發(fā)布的2.0版本（使得HTML擁有了自己的標(biāo)準(zhǔn)）。IETF組織的作用是定義并管理英特網(wǎng)技術(shù)的所有方面，如數(shù)據(jù)傳輸?shù)?a >ip協(xié)議、域名與IP地址匹配的DNS域名系統(tǒng)、以及發(fā)送郵件所用的SMTP網(wǎng)絡(luò)傳輸協(xié)議。（W3C）萬維網(wǎng)聯(lián)盟創(chuàng)建于1994年，是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國際中立性技術(shù)標(biāo)準(zhǔn)機構(gòu)。

開始編寫html網(wǎng)頁

html網(wǎng)頁基本架構(gòu)格式

<html>	<head>		<title></title>	</head>	<body>	</body></html>    上面的<html></html> 作用1. 標(biāo)簽的作用是 告訴瀏覽器這是一個網(wǎng)頁，或者就是告訴瀏覽器這是一個html文檔。
                                       作用2. 在一個網(wǎng)頁當(dāng)中其他所有的標(biāo)簽都要寫在<html></html>里面，規(guī)范了一個網(wǎng)頁的最外層格式。
    上面的<head></head>作用 : 添加一些網(wǎng)站的配置信息
                                                  比如 : 1. 網(wǎng)站的標(biāo)題 、網(wǎng)站的小圖標(biāo)
                                                            2. 添加網(wǎng)站的SEO相關(guān)信息（指定網(wǎng)站的關(guān)鍵字、網(wǎng)站的描述信息）
                                                            3. 外掛一些外部CSS / JS 文件
                                                            4. 添加一些瀏覽器適配相關(guān)的內(nèi)容
                                           注意點 : 一般寫在head標(biāo)簽內(nèi)的內(nèi)容，都看不到。
    上面的<title></title>作用 : 專門用來指定網(wǎng)站的標(biāo)題，并且指定的標(biāo)題將來還會作為用戶保存網(wǎng)站的默認(rèn)標(biāo)題。
    上面的<body></body>作用 : 專門用于定義html文檔當(dāng)中顯示給用戶查看的內(nèi)容（圖片/文字/音頻/視頻）
                                           注意點 : 雖然給用戶查看的內(nèi)容寫在body標(biāo)簽外也可以查看，但不符合規(guī)范。
                                                        一對html標(biāo)簽內(nèi)部職能有一對body標(biāo)簽。
字符集
    我們編寫的網(wǎng)頁有時出現(xiàn)文字亂碼，究其原因是因為我們沒有設(shè)置字符集。字符集是什么呢？字符集就是字符的集合，相當(dāng)于古代的“活字印刷術(shù)”它用來規(guī)定網(wǎng)頁中文本的顯示種類格式。我們在設(shè)置中文字符集時用到最多的是"GBK" / "UTF-8"這兩種。
<html>      <head>      	<meta charset="UTF-8">        <title>這是一個測試網(wǎng)站</title>      </head>      <body>      </body>  </html>     在企業(yè)開發(fā)中對于"GBK" 和 "UTF-8"的選擇，"GBK（GB2312）"存儲的字符較少，僅僅存儲了一些漢字和基本的外文，訪問速度快。"UTF-8"存儲了世界上所有的文字，如果我們開發(fā)的網(wǎng)頁不僅僅包含中文，那就選用UTF-8，但是它的體積相對較大。注意 : html文檔中設(shè)置的字符集類型要與保存時的字符集類型一致，不然仍然可能顯示亂碼。
標(biāo)簽的分類
   按照標(biāo)簽的個數(shù) ：單標(biāo)簽（只有一個開始標(biāo)簽，由一個<>組成的） / 雙標(biāo)簽（由一個開始標(biāo)簽和一個結(jié)束標(biāo)簽組成的）
                                  如 : <meta charset="UTF-8"/>就是一個單標(biāo)簽、<head></head>這個就是一個雙標(biāo)簽。
    按照標(biāo)簽的關(guān)系分為 : 同級標(biāo)簽 和 父子標(biāo)簽
                                如 : head標(biāo)簽 和 body標(biāo)簽就是同級標(biāo)簽、html標(biāo)簽和head標(biāo)簽就是父子標(biāo)簽。
DTD文檔聲明
    什么是DTD文檔聲明?HTML有眾多版本，那么每個版本的規(guī)范是有差異性的，為了讓瀏覽器正確的編譯/解析/渲染我們的網(wǎng)頁，我們需要在html文件的開頭聲明告知瀏覽器需要用哪種規(guī)范來編寫我們的網(wǎng)頁。
    DTD文檔聲明的格式選擇？ 每個HTML版本的DTD文檔聲明的格式都不盡相同，那么目前只要知道H5的文檔聲明格式就可以了。因為第一現(xiàn)在的網(wǎng)頁都基本是使用H5來編寫的；第二HTML的DTD文檔聲明是向下兼容的，只要學(xué)會H5的DTD文檔聲明之前的就基本不用看了。
    H5的DTD文檔聲明格式是?<!DOCTYPE html>
DTD文檔聲明注意點
  1. HTML的DTD文檔聲明必須寫在html文件的第一句；
    2. HTML的DTD文檔是不區(qū)分大小寫的，<!DOCTYPE html> 與 <!doctype html>的作用是一樣的；
    3. HTML的DTD文檔不是HTML標(biāo)簽，可以查看W3C的官方文檔。
    4. HTML的DTD文檔沒有編寫時網(wǎng)頁依然可以顯示，是因為瀏覽器并不是完全依賴于我們編寫的DTD文檔聲明，瀏覽器有自己的一套識別機制；但是HTML的DTD文檔還是必須寫在html文件的開頭，原因是這個規(guī)范是W3C制定的，所以必須遵守。
DTD文檔聲明的其他版本規(guī)范書寫格式（了解）
    兩大分類 : 1.HTML的DTD文檔聲明；2.XHTML的DTD文檔聲明.
   HTML的DTD文檔聲明又分為三小類
                                                     1.Strict（嚴(yán)格的）: 該 DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。如上面提到的 font 標(biāo)簽在這種DTD文檔聲明中是不被允許使用的，因為它身為HTML標(biāo)簽，卻能夠改變文本的樣式（顏色、大小等），這明顯是與HTML標(biāo)簽只添加語義而不改變樣式的規(guī)范相違背的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">             
                                                                             2.Transitional（過度的、普通的、寬松的）：該 DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。在這個DTD文檔聲明中允許使用 font 等可以改變文本樣式的標(biāo)簽，所以相對于上一個Strict較為寬松。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
                                                          
                                                             3.Frameset （帶有框架的頁面）該 DTD 等同于 HTML 4.01 Transitional，但允許框架集內(nèi)容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
    XHTML的DTD文檔聲明也分為三小類，基本等同于HTML的DTD文檔聲明又分為三小類。
HTML XHTML 和 HTML5 都可以用來編寫網(wǎng)頁，區(qū)別？
  HTML 語法非常的寬松容錯性很強
    HTML5 是HTML的下一個版本，所以除了語法寬松容錯性強之外，還增加了很多新的特性
    XHTML 語法和規(guī)范最為嚴(yán)格，要求標(biāo)簽必須小寫，標(biāo)簽必須嚴(yán)格閉合，屬性必須用引號括起來等等