什么是HTML
- HTML其實是HyperText Markup Language的縮寫, 超文本標記語言
HTML的作用
- 1.首先利用記事本保存了一個標題和兩段描述, 然后修改純文本文件的擴展名為.html, 然后再利用瀏覽器打開
鄭伊健
鄭伊健，1967年10月4日出生于中國香港，籍貫廣東恩平，香港影視演員、流行男歌手。1988年參加新秀歌唱大賽加入無線電視，因拍攝“陽光檸檬茶”廣告而入行，拜羅文為師。[1]
1991年加盟BMG唱片公司以歌手身份出道。1995年開始，憑借在《古惑仔》系列電影中飾演陳浩南一角走紅。1996年憑借《古惑仔》主題曲《友情歲月》獲得十大中文金曲獎。1996年至1997年連續(xù)兩次獲得”臺灣十大偶像”獎。
2.打開之后發(fā)現(xiàn)顯示的格式不對, 不對的原因是因為在純文本文件中所有文字都是同級別的, 瀏覽器不知道哪些文字代表什么意思. 也就是瀏覽器不知道哪些文字是標題, 哪些文字是段落...., 所以導(dǎo)致了顯示的格式不正確
-
3.正是因為如此, 所以HTML應(yīng)用而生. HTML就只有一個作用,
它是專門用來描述文本的語義的. 也就是說我們可以利用HTML來告訴瀏覽器哪些是標題, 哪些是段落.- 這些用于描述其它文本語義的文本, 我們稱之為
標簽. 并且這些用于描述文本語義的標簽將來在瀏覽器中是不會被顯示出來的 - 所以正是因為HTML的這些標簽是專門用來描述其它文本語義的, 并且在瀏覽器中不會被顯示出來, 所以我們稱這些文本為
"超文本", 而這些文本又叫做標簽, 所以HTML被稱之為"超文本標記語言"
- 這些用于描述其它文本語義的文本, 我們稱之為
<h1>鄭伊健</h1>
<p>鄭伊健，1967年10月4日出生于中國香港，籍貫廣東恩平，香港影視演員、流行男歌手。1988年參加新秀歌唱大賽加入無線電視，因拍攝“陽光檸檬茶”廣告而入行，拜羅文為師。[1] </p>
<p>1991年加盟BMG唱片公司以歌手身份出道。1995年開始，憑借在《古惑仔》系列電影中飾演陳浩南一角走紅。1996年憑借《古惑仔》主題曲《友情歲月》獲得十大中文金曲獎。1996年至1997年連續(xù)兩次獲得”臺灣十大偶像”獎。</p>
-
注意事項:
- 雖然我們利用H1標簽描述一段文本之后, 這段文本在瀏覽器中顯示出來會被放大和加粗, 看上去我們是利用HTML的標簽修改了被描述的那段文本的樣式. 但是一定要記住,
HTML只有一個作用, 它是專門用來給文本添加語義的, 而不是用來修改文本的樣式的
- 雖然我們利用H1標簽描述一段文本之后, 這段文本在瀏覽器中顯示出來會被放大和加粗, 看上去我們是利用HTML的標簽修改了被描述的那段文本的樣式. 但是一定要記住,
-
H1標簽它的作用是什么?
- 錯誤: H1標簽可以用來修改文字的大小, 并且還可以將文字加粗
- 正確: H1標簽的作用是用來告訴瀏覽器, 哪些文字是標題. 也就是H1標簽是專門用于給指定的文字
添加標題語義的
HTML發(fā)展史
IETF簡介
- IETF是英文Internet Engineering Task Force的縮寫, 翻譯過來就是"互聯(lián)網(wǎng)工程任務(wù)組"
- IETF負責(zé)定義并管理因特網(wǎng)技術(shù)的所有方面。包括用于數(shù)據(jù)傳輸?shù)腎P協(xié)議、讓域名與IP地址匹配的域名系統(tǒng)（DNS）、用于發(fā)送郵件的簡單郵件傳輸協(xié)議（SMTP）等
W3C簡介
- W3C是英文World Wide Web Consortium的縮寫， 翻譯過來就是W3C理事會或萬維網(wǎng)聯(lián)盟, W3C是全球互聯(lián)網(wǎng)最具權(quán)威的技術(shù)標準化組織.
- W3C于1994年10月在麻省理工學(xué)院計算機科學(xué)實驗室成立。創(chuàng)建者是萬維網(wǎng)的發(fā)明者Tim Berners-Lee
- W3C負責(zé)web方面標準的制定，像HTML、XHTML、CSS、XML的標準就是由W3C來定制的。
Tim Berners-Lee（蒂姆·伯納斯-李），萬維網(wǎng)之父、html設(shè)計者、w3c創(chuàng)始人
百度百科
網(wǎng)頁的固定格式
- 1.編寫網(wǎng)頁和寫信一樣都有一套規(guī)范和要求, 這套規(guī)范和要求中規(guī)定了寫信的固定格式
- 2.寫信基本結(jié)構(gòu)
敬愛的江哥:
您好!
正文正文正文正文正文正文正文正文正文正文正文正文
正文正文正文正文正文正文正文正文正文正文正文正文
此致
敬禮!
你的朋友 伊健
2066年6月6日
3.編寫網(wǎng)頁的步驟:
3.1.新建一個文本文檔
3.2.利用記事本打開
3.3.編寫THML代碼
3.4.保存并且修改純文本文檔的擴展名為.html
3.5.利用瀏覽器打開編寫好的文件4.網(wǎng)頁基本結(jié)構(gòu):
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
- 5.通過觀察我們發(fā)現(xiàn), HTML基本結(jié)構(gòu)中所有的標簽都是成對出現(xiàn)的, 這些成對出現(xiàn)的標簽中有一個帶/有一個不帶/, 那么這些不帶/的標簽我們稱之為開始標簽, 這些帶/的我們稱之為結(jié)束標簽
html標簽
- 作用:
- 用于告訴瀏覽器這是一個網(wǎng)頁, 也就是說告訴瀏覽器我是一個HTML文檔
- 注意點:
- 其它所有的標簽都必須寫在html標簽里面, 也就是寫在html開始標簽和結(jié)束標簽中間
head標簽
- 作用:
- 用于給網(wǎng)站添加一些配置信息
- 例如:
- 指定網(wǎng)站的標題 / 指定網(wǎng)站的小圖片
- 添加網(wǎng)站的SEO相關(guān)的信息(指定網(wǎng)站的關(guān)鍵字/指定網(wǎng)站的描述信息)
- 外掛一些外部的css/js文件
- 添加一些瀏覽器適配相關(guān)的內(nèi)容
- 注意點:
- 一般情況下, 寫在head標簽內(nèi)部的內(nèi)容都不會顯示給用戶查看, 也就是說一般情況下寫在head標簽內(nèi)部的內(nèi)容我們都看不到
title標簽
- 作用:
- 專門用于指定網(wǎng)站的標題, 并且這個指定的標題將來還會作為用戶保存網(wǎng)站的默認標題
- 注意點:
- title標簽必須寫在head標簽里面
body標簽
- 作用:
- 專門用于定義HTML文檔中需要顯示給用戶查看的內(nèi)容(文字/圖片/音頻/視頻)
- 注意點:
- 雖然說有時候你可能將內(nèi)容寫到了別的地方在網(wǎng)頁中也能看到, 但是千萬不要這么干, 一定要將需要顯示的內(nèi)容寫在body中
- 一對html標簽中(一個html開始標簽和一個html結(jié)束標簽)只能有一對body標簽
head內(nèi)部標簽
meta標簽
-
1.為什么會有亂碼現(xiàn)象?
- 因為我們在編寫網(wǎng)頁的時候沒有指定字符集
-
2.如何解決亂碼現(xiàn)象?
- 在head標簽中添加
<meta charset="GBK" />, 指定字符集
- 在head標簽中添加
-
3.什么是字符集
- 字符集就是字符的集合, 也就是很多字符堆在一起. 其實字符集很像我們古代的"活字印刷術(shù)", 在活字印刷術(shù)中就是將很多刻有漢字的小章放到一個盒子中, 然后需要印刷文字的時候再去盒子中取這個小章出來用, 正是因為如此, 所以導(dǎo)致了亂碼問題
- 假設(shè)北方人和南方人都擁有裝滿小章的盒子, 但是南方人和北方人在盒子中存儲小章的順序不太一樣, 那么這個時候如果北方人和南方人都需要去取"李"字, 在南方人記憶中李字在第6個盒子的第6行的第6列中(666), 在北方人的記憶中李字在第8個盒子的第8行的第8列中(888). 那么此時如果讓一個南方人去北方人的盒子中取"李"字的小章, 必然找不到,, 所以就導(dǎo)致了亂碼問題
- 這個地方北方人的存儲小章的盒子和南方人存儲小章的盒子就對應(yīng)網(wǎng)頁中指定的字符集, 在網(wǎng)頁中我們常見的字符集有兩個GBK/UTF-8, GBK就對應(yīng)北方人存儲的盒子, UTF-8就對應(yīng)南方人存儲的盒子
- 所以在網(wǎng)頁中指定字符集的意義就在于告訴瀏覽器我用的是哪個盒子, 你應(yīng)該如何去查找才能找到對應(yīng)的正確的內(nèi)容
-
4.GBK(GB2312)和UTF-8區(qū)別
- GBK(GB2312)里面存儲的字符比較少, 僅僅存儲了漢字和一些常用外文
- 體積比較小
- UTF-8里面存儲的世界上所有的文字
- 提交比較大
- GBK(GB2312)里面存儲的字符比較少, 僅僅存儲了漢字和一些常用外文
-
5.那么在企業(yè)開發(fā)中我們應(yīng)該使用GBK(GB2312)還是UTF-8呢?
- 如果你的網(wǎng)站僅僅包含中文, 那么推薦使用GB2312, 因為它的體積更小, 訪問速度更快
- 如果你的網(wǎng)站除了中文以外, 還包含了一些其它國家的語言 , 那么推薦使用UTF-8
- 懶人推薦: 不管三七二十一, 一律寫UTF-8即可
-
6.注意點:
- 在HTML文件中指定的字符集必須和保存這個文件的字符集一致, 否則還是會出現(xiàn)亂碼
- 所以僅僅指定字符集不一定能解決亂碼問題, 還需要保存文件的時候, 文件的保存格式必須和指定的字符集一致才能保證沒有亂碼問題
HTML標簽
HTML標簽分類
- 單標簽
- 只有開始標簽沒有結(jié)束標簽, 也就是由一個<>組成的
<meta charset="UTF-8" />
- 雙標簽
- 有開始標簽和結(jié)束標簽, 也就是由一個<>和一個</>組成的
<html>
</html>
HTML標簽關(guān)系分類
- 并列關(guān)系(兄弟/平級)
<head>
</head>
<body>
</body>
- 嵌套關(guān)系(父子/上下級)
<head>
<meta charset="UTF-8" />
<title>百度一下,你就知道123</title>
</head>
DTD文檔聲明
-
什么是DTD文檔聲明?
- 由于HTML有很多個版本的規(guī)范, 每個版本的規(guī)范之間又有一定的差異. 所以為了讓瀏覽器能夠正確的編譯/解析/渲染我們的網(wǎng)頁, 我們需要在HTML文件的第一行告訴瀏覽器, 我們當前這個網(wǎng)頁是
用哪一個版本的HTML規(guī)范來編寫的. 瀏覽器只要知道了我們是用哪一個版本的規(guī)范來編寫之后, 它就能夠正確的編譯/解析/渲染我們的網(wǎng)頁
- 由于HTML有很多個版本的規(guī)范, 每個版本的規(guī)范之間又有一定的差異. 所以為了讓瀏覽器能夠正確的編譯/解析/渲染我們的網(wǎng)頁, 我們需要在HTML文件的第一行告訴瀏覽器, 我們當前這個網(wǎng)頁是
DTD文檔聲明格式:
<!DOCTYPE html>
-
注意事項:-
<!DOCTYPE>聲明必須是 HTML 文檔的第一行，位于 <html> 標簽之前 -
<!DOCTYPE> 聲明不是 HTML 標簽 -
<!DOCTYPE> 聲明沒有結(jié)束標簽 -
<!DOCTYPE> 聲明對大小寫不敏感 - 這個聲明瀏覽器會看, 但是并不是完全依賴于這個聲明, 瀏覽器有一套自己的默認的處理機制
- 不寫也能運行
- H5網(wǎng)頁里面用H4也能運行
-
- HTML5
之前有2大種規(guī)范, 每種規(guī)范中又有3小種規(guī)范
| 大規(guī)范 | 小規(guī)范 |
|---|---|
| HTML | Strict (嚴格的) |
| HTML | Transitional(過度的,普通的,寬松的) |
| HTML | Frameset(帶有框架的頁面) |
| XHTML | Strict (嚴格的) |
| XHTML | Transitional(過度的,普通的,寬松的) |
| XHTML | Frameset(帶有框架的頁面) |
- HTML的DTD文檔聲明和XHTML的DTD文檔聲明有何區(qū)別?
- XHTML本身規(guī)定比如標簽必須小寫、必須嚴格閉合、必須使用引號引起屬性等等, 而HTML會更加松散沒有這么嚴格
-
Strict表示
嚴格的, 這種模式里面的要求更為嚴格.這種嚴格主要體現(xiàn)在有一些標簽不能使用- 例如font標簽/u標簽等
- font標簽可以修改一個文本的字號、顏色、字體,但這和HTML的本質(zhì)有沖突,因為HTML只能負責(zé)語義,不能負責(zé)樣式,而font標簽是用于修改樣式的,所以在Strict中是不能使用font標簽
- u標簽可以給一個文本加上下劃線,但這和HTML的本質(zhì)有沖突,因為HTML只能負責(zé)語義,不能負責(zé)樣式,而u標簽是用于添加下劃線是樣式.所以在Strict中是不能使用u標簽
-
Transitional表示
普通的, 這種模式是沒有一些別的要求- 例如可以使用font標簽、u標簽等
- 但是在企業(yè)開發(fā)中不會使用這些標簽,因為這違背了HTML的本質(zhì), 而是將這些標簽作為css的鉤子使用
-
Frameset表示
框架, 在框架的頁面使用- 后面學(xué)到框架/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>
- 有這么多規(guī)范我們學(xué)習(xí)過程中到底使用哪一種比較合適呢?
- 無論是HTML還是XHTML,
過去企業(yè)級開發(fā)中用的比較多的大部分都是Transitional類型的文檔聲明 - 但是
HTML5的時代已經(jīng)到來,以上6中規(guī)范僅僅作為了解,以后都用HTML5類型的文檔聲明, HTML5向下兼容(求此刻WC3心里陰影面積) - 目前國內(nèi)一線網(wǎng)站都更新到了HTML5的文檔聲明, 所以后續(xù)授課也是全程使用HTML5的文檔聲明
- www.baidu.com (B)
- www.taobao.com (A)
- www.qq.com (T)
- www.sohu.com(大奇葩)
- 無論是HTML還是XHTML,
HTML和XHTML、HTML5區(qū)別
在HTML的早期發(fā)展中，大部分標準都是所謂的retro-spec，即
先有實現(xiàn)后有標準。在這種情況下，HTML標準不是很規(guī)范，瀏覽器也對HTML頁面中的錯誤相當寬容。這反過來又導(dǎo)致了HTML開發(fā)者寫出了大量含有錯誤的HTML頁面html語言本身有一些缺陷（例如： 內(nèi)容和形式不能分離；標簽單一；數(shù)據(jù)不能復(fù)用等等），隨著xml的興起人們希望xml來彌補html的不足，但是目前有成千上萬的網(wǎng)頁都是用html編寫的，所以完全使用xml來替代html還為時過早，于是W3C在2000年推出了xhtml1.0，建立xhtml的目的就是實現(xiàn)從html向xml的過度為了規(guī)范HTML，W3C結(jié)合XML制定了XHTML 1.0標準，這個標準沒有增加任何新的標簽，只是按照XML的要求來規(guī)范HTML，并定義了一個新的MIME type application/xhtml+xml。W3C的初衷是要求瀏覽器對這個MIME type實行強錯誤檢查，如果頁面有HTML錯誤，就要顯示錯誤信息。但是由于已有的web頁面中已經(jīng)有了大量的錯誤，很多開發(fā)者拒絕使用新的MIME type。W3C不得已，在XHTML 1.0的標準之后增加了一個附錄C，允許開發(fā)者使用XHTML語法來寫頁面，同時使用舊的MIME type，application/html，來分發(fā)頁面W3C隨后
在XHTML 1.1中取消了附錄C，即使用XHTML 1.1標準的頁面必須用新的MIME type來分發(fā)。于是這個標準并沒有很多人采用有了XHTML的教訓(xùn)，W3C在制定下一代HTML標準時（HTML5），就將
向后兼容作為了一個很重要的原則。HTML5確實引入了許多新的特性，但是它最重要的一個特性是，不會break已有的網(wǎng)頁。你可以將任何已有的網(wǎng)頁的第一行改成<!DOCTYPE html>，它就成也一個HTML5頁面，并且可以照樣在瀏覽器里正常的展示。-
簡而言之
- HTML語法非常寬松容錯性強;
- XHTML更為嚴格,它要求標簽必須小寫、必須嚴格閉合、標簽中的屬性必須使用引號引起等等;
- HTML5是HTML的下一個版本所以除了非常寬松容錯性強以外,還增加許多新的特性
.htm 和 .html擴展名區(qū)別
- DOS操作系統(tǒng)（win95或win98）下只能支持
長度為3的后綴名，所以是htm - 但在windows后綴長度可以大于3位，所以windows下無所謂htm與html，html是為長文件的格式命名的
- 所以htm是為了兼容過去的DOS命名格式存在的
學(xué)習(xí)交流方式:
1.微信公眾賬號搜索: 李南江(配套視頻,代碼,資料各種福利獲取)
2.加入前端學(xué)習(xí)交流群:
302942894 / 289964053 / 11550038
