01HTML基礎-認識HTML
01HTML基礎-認識HTML
什麼是HTML
- HTML其實是HyperText Markup Language的縮寫, 超文字標記語言
HTML的作用
- 1.首先利用記事本儲存了一個標題和兩段描述, 然後修改純文字檔案的副檔名為.html, 然後再利用瀏覽器開啟
鄭伊健
鄭伊健，1967年10月4日出生於中國香港，籍貫廣東恩平，香港影視演員、流行男歌手。1988年參加新秀歌唱大賽加入無線電視，因拍攝“陽光檸檬茶”廣告而入行，拜羅文為師。[1]
1991年加盟BMG唱片公司以歌手身份出道。1995
- 2.開啟之後發現顯示的格式不對, 不對的原因是因為在純文字檔案中所有文字都是同級別的, 瀏覽器不知道哪些文字代表什麼意思. 也就是瀏覽器不知道哪些文字是標題, 哪些文字是段落...., 所以導致了顯示的格式不正確
- 3.正是因為如此, 所以HTML應用而生. HTML就只有一個作用, 它是專門用來描述文字的語義的. 也就是說我們可以利用HTML來告訴瀏覽器哪些是標題, 哪些是段落.
- 這些用於描述其它文字語義的文字, 我們稱之為標籤. 並且這些用於描述文字語義的標籤將來在瀏覽器中是不會被顯示出來的
- 所以正是因為HTML的這些標籤是專門用來描述其它文字語義的, 並且在瀏覽器中不會被顯示出來, 所以我們稱這些文字為"超文字", 而這些文字又叫做標籤, 所以HTML被稱之為"超文字標記語言"
- 這些用於描述其它文字語義的文字
<h1>鄭伊健</h1>
<p>鄭伊健，1967年10月4日出生於中國香港，籍貫廣東恩平，香港影視演員、流行男歌手。1988年參加新秀歌唱大賽加入無線電視，因拍攝“陽光檸檬茶”廣告而入行，拜羅文為師。[1] </p>
<p>1991年加盟BMG唱片公司以歌手身份出道。1995年開始，憑藉在《古惑仔》系列電影中飾演陳浩南一角走紅。1996年憑藉《古惑仔》主題曲《友情歲月》獲得十大中文金曲獎。1996年至1997年連續兩次獲得”臺灣十大偶像”獎。</p>
-
- 注意事項:
- 雖然我們利用H1標籤描述一段文字之後, 這段文字在瀏覽器中顯示出來會被放大和加粗, 看上去我們是利用HTML的標籤修改了被描述的那段文字的樣式. 但是一定要記住, HTML只有一個作用, 它是專門用來給文字新增語義的, 而不是用來修改文字的樣式的
- H1標籤它的作用是什麼?
- 錯誤: H1標籤可以用來修改文字的大小, 並且還可以將文字加粗
- 正確: H1標籤的作用是用來告訴瀏覽器, 哪些文字是標題. 也就是H1標籤是專門用於給指定的文字新增標題語義的。
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來定製的。
Tim Berners-Lee（蒂姆·伯納斯-李），全球資訊網之父、html設計者、w3c創始人
百度百科
網頁的固定格式
- 1.編寫網頁和寫信一樣都有一套規範和要求, 這套規範和要求中規定了寫信的固定格式
- 2.寫信基本結構
敬愛的江哥:
您好!
正文正文正文正文正文正文正文正文正文正文正文正文
正文正文正文正文正文正文正文正文正文正文正文正文
此致
敬禮!
你的朋友 伊健
2066年6月6日
- 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標籤
- 作用:
- 用於給網站新增一些配置資訊
o 例如:
§ 指定網站的標題 / 指定網站的小圖片
§ 新增網站的SEO相關的資訊(指定網站的關鍵字/指定網站的描述資訊)
§ 外掛一些外部的css/js檔案
§ 新增一些瀏覽器適配相關的內容
- 注意點:
- 一般情況下, 寫在head標籤內部的內容都不會顯示給使用者檢視, 也就是說一般情況下寫在head標籤內部的內容我們都看不到
title標籤
- 作用:
- 專門用於指定網站的標題, 並且這個指定的標題將來還會作為使用者儲存網站的預設標題
- 注意點:
- title標籤必須寫在head標籤裡面
body標籤
- 作用:
- 專門用於定義HTML文件中需要顯示給使用者檢視的內容(文字/圖片/音訊/視訊)
- 注意點:
- 雖然說有時候你可能將內容寫到了別的地方在網頁中也能看到, 但是千萬不要這麼幹, 一定要將需要顯示的內容寫在body中
- 一對html標籤中(一個html開始標籤和一個html結束標籤)只能有一對body標籤
head內部標籤
meta標籤
-
- 1.為什麼會有亂碼現象?
- 因為我們在編寫網頁的時候沒有指定字符集
- 1.為什麼會有亂碼現象?
- 2.如何解決亂碼現象?
- 在head標籤中新增<meta charset="GBK" />, 指定字符集
- 3.什麼是字符集
- 字符集就是字元的集合, 也就是很多字元堆在一起. 其實字符集很像我們古代的"活字印刷術", 在活字印刷術中就是將很多刻有漢字的小章放到一個盒子中, 然後需要印刷文字的時候再去盒子中取這個小章出來用, 正是因為如此, 所以導致了亂碼問題
- 假設北方人和南方人都擁有裝滿小章的盒子, 但是南方人和北方人在盒子中儲存小章的順序不太一樣, 那麼這個時候如果北方人和南方人都需要去取"李"字, 在南方人記憶中李字在第6個盒子的第6行的第6列中(666), 在北方人的記憶中李字在第8個盒子的第8行的第8列中(888). 那麼此時如果讓一個南方人去北方人的盒子中取"李"字的小章, 必然找不到,, 所以就導致了亂碼問題
- 這個地方北方人的儲存小章的盒子和南方人儲存小章的盒子就對應網頁中指定的字符集, 在網頁中我們常見的字符集有兩個GBK/UTF-8, GBK就對應北方人儲存的盒子, UTF-8就對應南方人儲存的盒子
- 所以在網頁中指定字符集的意義就在於告訴瀏覽器我用的是哪個盒子, 你應該如何去查詢才能找到對應的正確的內容
- 2.如何解決亂碼現象?
-
-
- 4.GBK(GB2312)和UTF-8區別
- GBK(GB2312)裡面儲存的字元比較少, 僅僅儲存了漢字和一些常用外文
- 體積比較小
- UTF-8裡面儲存的世界上所有的文字
- 提交比較大
- GBK(GB2312)裡面儲存的字元比較少, 僅僅儲存了漢字和一些常用外文
- 5.那麼在企業開發中我們應該使用GBK(GB2312)還是UTF-8呢?
- 如果你的網站僅僅包含中文, 那麼推薦使用GB2312, 因為它的體積更小, 訪問速度更快
- 如果你的網站除了中文以外, 還包含了一些其它國家的語言 , 那麼推薦使用UTF-8
- 懶人推薦: 不管三七二十一, 一律寫UTF-8即可
- 6.注意點:
- 在HTML檔案中指定的字符集必須和儲存這個檔案的字符集一致, 否則還是會出現亂碼
- 所以僅僅指定字符集不一定能解決亂碼問題, 還需要儲存檔案的時候, 檔案的儲存格式必須和指定的字符集一致才能保證沒有亂碼問題
-
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命名格式存在的
注：需要原始碼的私信我郵箱地址，看到的話會打包發給你。