什么是HTML
- HTML其實是HyperText Markup Language的縮寫, 超文本標記語言
HTML發展史
IETF簡介
- IETF是英文Internet Engineering Task Force的縮寫, 翻譯過來就是'互聯網工程任務組'
- IETF負責定義并管理因特網技術的所有方面。包括用于數據傳輸的IP協議、讓域名與IP地址匹配的域名系統（DNS）、用于發送郵件的簡單郵件傳輸協議（SMTP）等
W3C簡介
- W3C是英文World Wide Web Consortium的縮寫， 翻譯過來就是W3C理事會或萬維網聯盟, W3C是全球互聯網最具權威的技術標準化組織.
- W3C于1994年10月在麻省理工學院計算機科學實驗室成立。創建者是萬維網的發明者Tim Berners-Lee
- W3C負責web方面標準的制定，像HTML、XHTML、CSS、XML的標準就是由W3C來定制的。
網頁的固定格式
- 1.編寫網頁和寫信一樣都有一套規范和要求, 這套規范和要求中規定了寫信的固定格式
- 2.寫信基本結構
- 3.編寫網頁的步驟:
- 3.1.新建一個文本文檔
- 3.2.利用記事本打開
- 3.3.編寫THML代碼
- 3.4.保存并且修改純文本文檔的擴展名為.html
- 3.5.利用瀏覽器打開編寫好的文件
- 4.網頁基本結構:
<html> <head> <title></title> </head> <body> </body></html>
- 5.通過觀察我們發現, HTML基本結構中所有的標簽都是成對出現的, 這些成對出現的標簽中有一個帶/有一個不帶/, 那么這些不帶/的標簽我們稱之為開始標簽, 這些帶/的我們稱之為結束標簽
html標簽
- 作用:
- 用于告訴瀏覽器這是一個網頁, 也就是說告訴瀏覽器我是一個HTML文檔
- 注意點:
- 其它所有的標簽都必須寫在html標簽里面, 也就是寫在html開始標簽和結束標簽中間
head標簽
- 作用:
- 用于給網站添加一些配置信息
- 例如:
- 指定網站的標題 / 指定網站的小圖片
- 添加網站的SEO相關的信息(指定網站的關鍵字/指定網站的描述信息)
- 外掛一些外部的css/js文件
- 添加一些瀏覽器適配相關的內容
- 注意點:
- 一般情況下, 寫在head標簽內部的內容都不會顯示給用戶查看, 也就是說一般情況下寫在head標簽內部的內容我們都看不到
title標簽
- 作用:
- 專門用于指定網站的標題, 并且這個指定的標題將來還會作為用戶保存網站的默認標題
- 注意點:
- title標簽必須寫在head標簽里面
body標簽
- 作用:
- 專門用于定義HTML文檔中需要顯示給用戶查看的內容(文字/圖片/音頻/視頻)
- 注意點:
- 雖然說有時候你可能將內容寫到了別的地方在網頁中也能看到, 但是千萬不要這么干, 一定要將需要顯示的內容寫在body中
- 一對html標簽中(一個html開始標簽和一個html結束標簽)只能有一對body標簽
HTML標簽
HTML標簽分類
- 單標簽
- 只有開始標簽沒有結束標簽, 也就是由一個<>組成的
<meta charset='UTF-8' />
- 雙標簽
- 有開始標簽和結束標簽, 也就是由一個<>和一個</>組成的
<html></html>
HTML標簽關系分類
<head></head><body></body>
<head> <meta charset='UTF-8' /> <title>百度一下,你就知道123</title></head>
DTD文檔聲明
- 什么是DTD文檔聲明?
- 由于HTML有很多個版本的規范, 每個版本的規范之間又有一定的差異. 所以為了讓瀏覽器能夠正確的編譯/解析/渲染我們的網頁, 我們需要在HTML文件的第一行告訴瀏覽器, 我們當前這個網頁是用哪一個版本的HTML規范來編寫的. 瀏覽器只要知道了我們是用哪一個版本的規范來編寫之后, 它就能夠正確的編譯/解析/渲染我們的網頁
- DTD文檔聲明格式:
<!DOCTYPE html>
- 注意事項:<!DOCTYPE>聲明必須是 HTML 文檔的第一行，位于 <html> 標簽之前
- <!DOCTYPE> 聲明不是 HTML 標簽
- <!DOCTYPE> 聲明沒有結束標簽
- <!DOCTYPE> 聲明對大小寫不敏感
- 這個聲明瀏覽器會看, 但是并不是完全依賴于這個聲明, 瀏覽器有一套自己的默認的處理機制
- 不寫也能運行
- H5網頁里面用H4也能運行
- HTML5之前有2大種規范, 每種規范中又有3小種規范
- 大規范 小規范 HTML Strict (嚴格的) HTML Transitional(過度的,普通的,寬松的) HTML Frameset(帶有框架的頁面) XHTML Strict (嚴格的) XHTML Transitional(過度的,普通的,寬松的) XHTML Frameset(帶有框架的頁面) HTML的DTD文檔聲明和XHTML的DTD文檔聲明有何區別?
- XHTML本身規定比如標簽必須小寫、必須嚴格閉合、必須使用引號引起屬性等等, 而HTML會更加松散沒有這么嚴格
- Strict表示嚴格的, 這種模式里面的要求更為嚴格.這種嚴格主要體現在有一些標簽不能使用
- 例如font標簽/u標簽等
- font標簽可以修改一個文本的字號、顏色、字體,但這和HTML的本質有沖突,因為HTML只能負責語義,不能負責樣式,而font標簽是用于修改樣式的,所以在Strict中是不能使用font標簽
- u標簽可以給一個文本加上下劃線,但這和HTML的本質有沖突,因為HTML只能負責語義,不能負責樣式,而u標簽是用于添加下劃線是樣式.所以在Strict中是不能使用u標簽
- Transitional表示普通的, 這種模式是沒有一些別的要求
- 例如可以使用font標簽、u標簽等
- 但是在企業開發中不會使用這些標簽,因為這違背了HTML的本質, 而是將這些標簽作為css的鉤子使用
- Frameset表示框架, 在框架的頁面使用
- 后面學到框架/NodeJS 再做詳細了解
- 常見的DOCTYPE有如下幾種
HTML4.01:<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN''http://www.w3.org/TR/html4/loose.dtd'>XHTML 1.0<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN''http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>HTML5: <!DOCTYPE html>
- 有這么多規范我們學習過程中到底使用哪一種比較合適呢?
- 無論是HTML還是XHTML,過去企業級開發中用的比較多的大部分都是Transitional類型的文檔聲明
- 但是HTML5的時代已經到來,以上6中規范僅僅作為了解, 以后都用HTML5類型的文檔聲明, HTML5向下兼容(求此刻WC3心里陰影面積)
- 目前國內一線網站都更新到了HTML5的文檔聲明, 所以后續授課也是全程使用HTML5的文檔聲明
- www.baidu.com (B)
- www.taobao.com (A)
- www.qq.com (T)
- www.sohu.com(大奇葩)
HTML和XHTML、HTML5區別
- 在HTML的早期發展中，大部分標準都是所謂的retro-spec，即先有實現后有標準。在這種情況下，HTML標準不是很規范，瀏覽器也對HTML頁面中的錯誤相當寬容。這反過來又導致了HTML開發者寫出了大量含有錯誤的HTML頁面
- html語言本身有一些缺陷（例如： 內容和形式不能分離；標簽單一；數據不能復用等等），隨著xml的興起人們希望xml來彌補html的不足，但是目前有成千上萬的網頁都是用html編寫的，所以完全使用xml來替代html還為時過早，于是W3C在2000年推出了xhtml1.0， 建立xhtml的目的就是實現從html向xml的過度
- 為了規范HTML，W3C結合XML制定了XHTML 1.0標準，這個標準沒有增加任何新的標簽，只是按照XML的要求來規范HTML，并定義了一個新的MIME type application/xhtml xml。W3C的初衷是要求瀏覽器對這個MIME type實行強錯誤檢查，如果頁面有HTML錯誤，就要顯示錯誤信息。但是由于已有的web頁面中已經有了大量的錯誤，很多開發者拒絕使用新的MIME type。W3C不得已，在XHTML 1.0的標準之后增加了一個附錄C，允許開發者使用XHTML語法來寫頁面，同時使用舊的MIME type，application/html，來分發頁面
- W3C隨后在XHTML 1.1中取消了附錄C，即使用XHTML 1.1標準的頁面必須用新的MIME type來分發。于是這個標準并沒有很多人采用
- 有了XHTML的教訓，W3C在制定下一代HTML標準時（HTML5），就將向后兼容作為了一個很重要的原則。HTML5確實引入了許多新的特性，但是它最重要的一個特性是，不會break已有的網頁。你可以將任何已有的網頁的第一行改成<!DOCTYPE html>，它就成也一個HTML5頁面，并且可以照樣在瀏覽器里正常的展示。
- 簡而言之
- HTML語法非常寬松容錯性強;
- XHTML更為嚴格,它要求標簽必須小寫、必須嚴格閉合、標簽中的屬性必須使用引號引起等等;
- HTML5是HTML的下一個版本所以除了非常寬松容錯性強以外,還增加許多新的特性
.htm 和 .html擴展名區別
- DOS操作系統（win95或win98）下只能支持長度為3的后綴名，所以是htm
- 但在windows后綴長度可以大于3位，所以windows下無所謂htm與html，html是為長文件的格式命名的
- 所以htm是為了兼容過去的DOS命名格式存在的
