整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
篇目錄
本篇目錄
什么是HTML
HTML的作用
HTML發(fā)展史
IETF簡介
W3C簡介
網(wǎng)頁的固定格式
html標(biāo)簽
head標(biāo)簽
title標(biāo)簽
body標(biāo)簽
head內(nèi)部標(biāo)簽
meta標(biāo)簽
HTML標(biāo)簽
HTML標(biāo)簽分類
HTML標(biāo)簽關(guān)系分類
DTD文檔聲明
HTML和XHTML、HTML5區(qū)別
htm 和 .html擴展名區(qū)別
什么是HTML
HTML其實是HyperText Markup Language的縮寫, 超文本標(biāo)記語言
HTML的作用
1.首先利用記事本保存了一個標(biāo)題和兩段描述, 然后修改純文本文件的擴展名為.html, 然后再利用瀏覽器打開
2.打開之后發(fā)現(xiàn)顯示的格式不對, 不對的原因是因為在純文本文件中所有文字都是同級別的, 瀏覽器不知道哪些文字代表什么意思. 也就是瀏覽器不知道哪些文字是標(biāo)題, 哪些文字是段落…., 所以導(dǎo)致了顯示的格式不正確
正是因為如此, 所以HTML應(yīng)用而生. HTML就只有一個作用, 它是專門用來描述文本的語義的. 也就是說我們可以利用HTML來告訴瀏覽器哪些是標(biāo)題, 哪些是段落.
這些用于描述其它文本語義的文本, 我們稱之為標(biāo)簽. 并且這些用于描述文本語義的標(biāo)簽將來在瀏覽器中是不會被顯示出來的
所以正是因為HTML的這些標(biāo)簽是專門用來描述其它文本語義的, 并且在瀏覽器中不會被顯示出來, 所以我們稱這些文本為"超文本", 而這些文本又叫做標(biāo)簽, 所以HTML被稱之為"超文本標(biāo)記語言"
注意事項:
雖然我們利用H1標(biāo)簽描述一段文本之后, 這段文本在瀏覽器中顯示出來會被放大和加粗, 看上去我們是利用HTML的標(biāo)簽修改了被描述的那段文本的樣式. 但是一定要記住, HTML只有一個作用, 它是專門用來給文本添加語義的, 而不是用來修改文本的樣式的
H1標(biāo)簽它的作用是什么?
錯誤: H1標(biāo)簽可以用來修改文字的大小, 并且還可以將文字加粗
正確: H1標(biāo)簽的作用是用來告訴瀏覽器, 哪些文字是標(biāo)題. 也就是H1標(biāo)簽是專門用于給指定的文字添加標(biāo)題語義的
HTML發(fā)展史
IETF簡介
IETF是英文Internet Engineering Task Force的縮寫, 翻譯過來就是”互聯(lián)網(wǎng)工程任務(wù)組”
IETF負(fù)責(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ù)標(biāo)準(zhǔn)化組織.
W3C于1994年10月在麻省理工學(xué)院計算機科學(xué)實驗室成立。創(chuàng)建者是萬維網(wǎng)的發(fā)明者Tim Berners-Lee
W3C負(fù)責(zé)web方面標(biāo)準(zhǔn)的制定，像HTML、XHTML、CSS、XML的標(biāo)準(zhǔn)就是由W3C來定制的。
Tim Berners-Lee（蒂姆·伯納斯-李），萬維網(wǎng)之父、html設(shè)計者、w3c創(chuàng)始人
百度百科
網(wǎng)頁的固定格式
1.編寫網(wǎng)頁和寫信一樣都有一套規(guī)范和要求, 這套規(guī)范和要求中規(guī)定了寫信的固定格式
2.寫信基本結(jié)構(gòu)
3.編寫網(wǎng)頁的步驟:
3.1.新建一個文本文檔
3.2.利用記事本打開
3.3.編寫THML代碼
3.4.保存并且修改純文本文檔的擴展名為.html
3.5.利用瀏覽器打開編寫好的文件
4.網(wǎng)頁基本結(jié)構(gòu):
5.通過觀察我們發(fā)現(xiàn), HTML基本結(jié)構(gòu)中所有的標(biāo)簽都是成對出現(xiàn)的, 這些成對出現(xiàn)的標(biāo)簽中有一個帶/有一個不帶/, 那么這些不帶/的標(biāo)簽我們稱之為開始標(biāo)簽, 這些帶/的我們稱之為結(jié)束標(biāo)簽html標(biāo)簽
作用:
用于告訴瀏覽器這是一個網(wǎng)頁, 也就是說告訴瀏覽器我是一個HTML文檔
注意點:
其它所有的標(biāo)簽都必須寫在html標(biāo)簽里面, 也就是寫在html開始標(biāo)簽和結(jié)束標(biāo)簽中間
head標(biāo)簽
作用:
指定網(wǎng)站的標(biāo)題 / 指定網(wǎng)站的小圖片
添加網(wǎng)站的SEO相關(guān)的信息(指定網(wǎng)站的關(guān)鍵字/指定網(wǎng)站的描述信息)
外掛一些外部的css/js文件
添加一些瀏覽器適配相關(guān)的內(nèi)容
用于給網(wǎng)站添加一些配置信息
例如:
注意點:
一般情況下, 寫在head標(biāo)簽內(nèi)部的內(nèi)容都不會顯示給用戶查看, 也就是說一般情況下寫在head標(biāo)簽內(nèi)部的內(nèi)容我們都看不到
title標(biāo)簽
作用:
專門用于指定網(wǎng)站的標(biāo)題, 并且這個指定的標(biāo)題將來還會作為用戶保存網(wǎng)站的默認(rèn)標(biāo)題
注意點:
title標(biāo)簽必須寫在head標(biāo)簽里面
body標(biāo)簽
作用:
專門用于定義HTML文檔中需要顯示給用戶查看的內(nèi)容(文字/圖片/音頻/視頻)
注意點:
雖然說有時候你可能將內(nèi)容寫到了別的地方在網(wǎng)頁中也能看到, 但是千萬不要這么干, 一定要將需要顯示的內(nèi)容寫在body中
一對html標(biāo)簽中(一個html開始標(biāo)簽和一個html結(jié)束標(biāo)簽)只能有一對body標(biāo)簽
head內(nèi)部標(biāo)簽
meta標(biāo)簽
1.為什么會有亂碼現(xiàn)象?
因為我們在編寫網(wǎng)頁的時候沒有指定字符集
2.如何解決亂碼現(xiàn)象?
在head標(biāo)簽中添加<meta charset="GBK" />, 指定字符集
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里面存儲的世界上所有的文字
5.那么在企業(yè)開發(fā)中我們應(yīng)該使用GBK(GB2312)還是UTF-8呢?
如果你的網(wǎng)站僅僅包含中文, 那么推薦使用GB2312, 因為它的體積更小, 訪問速度更快
如果你的網(wǎng)站除了中文以外, 還包含了一些其它國家的語言 , 那么推薦使用UTF-8
懶人推薦: 不管三七二十一, 一律寫UTF-8即可
6.注意點:
在HTML文件中指定的字符集必須和保存這個文件的字符集一致, 否則還是會出現(xiàn)亂碼
所以僅僅指定字符集不一定能解決亂碼問題, 還需要保存文件的時候, 文件的保存格式必須和指定的字符集一致才能保證沒有亂碼問題
HTML標(biāo)簽
HTML標(biāo)簽分類
單標(biāo)簽
只有開始標(biāo)簽沒有結(jié)束標(biāo)簽, 也就是由一個<>組成的
雙標(biāo)簽
有開始標(biāo)簽和結(jié)束標(biāo)簽, 也就是由一個<>和一個</>組成的
HTML標(biāo)簽關(guān)系分類
并列關(guān)系(兄弟/平級)
嵌套關(guān)系(父子/上下級)
DTD文檔聲明
什么是DTD文檔聲明?
由于HTML有很多個版本的規(guī)范, 每個版本的規(guī)范之間又有一定的差異. 所以為了讓瀏覽器能夠正確的編譯/解析/渲染我們的網(wǎng)頁, 我們需要在HTML文件的第一行告訴瀏覽器, 我們當(dāng)前這個網(wǎng)頁是用哪一個版本的HTML規(guī)范來編寫的. 瀏覽器只要知道了我們是用哪一個版本的規(guī)范來編寫之后, 它就能夠正確的編譯/解析/渲染我們的網(wǎng)頁
DTD文檔聲明格式:
注意事項:
不寫也能運行
H5網(wǎng)頁里面用H4也能運行
<!DOCTYPE>聲明必須是 HTML 文檔的第一行，位于 <html> 標(biāo)簽之前
<!DOCTYPE> 聲明不是 HTML 標(biāo)簽
<!DOCTYPE> 聲明沒有結(jié)束標(biāo)簽
<!DOCTYPE> 聲明對大小寫不敏感
這個聲明瀏覽器會看, 但是并不是完全依賴于這個聲明, 瀏覽器有一套自己的默認(rèn)的處理機制
HTML5之前有2大種規(guī)范, 每種規(guī)范中又有3小種規(guī)范
| 大規(guī)范 | 小規(guī)范 |
|---|---|
| HTML | Strict (嚴(yán)格的) |
| HTML | Transitional(過度的,普通的,寬松的) |
| HTML | Frameset(帶有框架的頁面) |
| XHTML | Strict (嚴(yán)格的) |
| XHTML | Transitional(過度的,普通的,寬松的) |
| XHTML | Frameset(帶有框架的頁面) |
HTML的DTD文檔聲明和XHTML的DTD文檔聲明有何區(qū)別?
XHTML本身規(guī)定比如標(biāo)簽必須小寫、必須嚴(yán)格閉合、必須使用引號引起屬性等等, 而HTML會更加松散沒有這么嚴(yán)格
Strict表示嚴(yán)格的, 這種模式里面的要求更為嚴(yán)格.這種嚴(yán)格主要體現(xiàn)在有一些標(biāo)簽不能使用
例如font標(biāo)簽/u標(biāo)簽等
font標(biāo)簽可以修改一個文本的字號、顏色、字體,但這和HTML的本質(zhì)有沖突,因為HTML只能負(fù)責(zé)語義,不能負(fù)責(zé)樣式,而font標(biāo)簽是用于修改樣式的,所以在Strict中是不能使用font標(biāo)簽
u標(biāo)簽可以給一個文本加上下劃線,但這和HTML的本質(zhì)有沖突,因為HTML只能負(fù)責(zé)語義,不能負(fù)責(zé)樣式,而u標(biāo)簽是用于添加下劃線是樣式.所以在Strict中是不能使用u標(biāo)簽
Transitional表示普通的, 這種模式是沒有一些別的要求
例如可以使用font標(biāo)簽、u標(biāo)簽等
但是在企業(yè)開發(fā)中不會使用這些標(biāo)簽,因為這違背了HTML的本質(zhì), 而是將這些標(biāo)簽作為css的鉤子使用
Frameset表示框架, 在框架的頁面使用
后面學(xué)到框架/NodeJS 再做詳細(xì)了解
常見的DOCTYPE有如下幾種
有這么多規(guī)范我們學(xué)習(xí)過程中到底使用哪一種比較合適呢?
www.baidu.com (B)
www.taobao.com (A)
www.qq.com (T)
www.sohu.com(大奇葩)
無論是HTML還是XHTML,過去企業(yè)級開發(fā)中用的比較多的大部分都是Transitional類型的文檔聲明
但是HTML5的時代已經(jīng)到來,以上6中規(guī)范僅僅作為了解, 以后都用HTML5類型的文檔聲明, HTML5向下兼容(求此刻WC3心里陰影面積)
目前國內(nèi)一線網(wǎng)站都更新到了HTML5的文檔聲明, 所以后續(xù)授課也是全程使用HTML5的文檔聲明
HTML和XHTML、HTML5區(qū)別
在HTML的早期發(fā)展中，大部分標(biāo)準(zhǔn)都是所謂的retro-spec，即先有實現(xiàn)后有標(biāo)準(zhǔn)。在這種情況下，HTML標(biāo)準(zhǔn)不是很規(guī)范，瀏覽器也對HTML頁面中的錯誤相當(dāng)寬容。這反過來又導(dǎo)致了HTML開發(fā)者寫出了大量含有錯誤的HTML頁面
html語言本身有一些缺陷（例如： 內(nèi)容和形式不能分離；標(biāo)簽單一；數(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標(biāo)準(zhǔn)，這個標(biāo)準(zhǔn)沒有增加任何新的標(biāo)簽，只是按照XML的要求來規(guī)范HTML，并定義了一個新的MIME type application/xhtml+xml。W3C的初衷是要求瀏覽器對這個MIME type實行強錯誤檢查，如果頁面有HTML錯誤，就要顯示錯誤信息。但是由于已有的web頁面中已經(jīng)有了大量的錯誤，很多開發(fā)者拒絕使用新的MIME type。W3C不得已，在XHTML 1.0的標(biāo)準(zhǔn)之后增加了一個附錄C，允許開發(fā)者使用XHTML語法來寫頁面，同時使用舊的MIME type，application/html，來分發(fā)頁面
W3C隨后在XHTML 1.1中取消了附錄C，即使用XHTML 1.1標(biāo)準(zhǔn)的頁面必須用新的MIME type來分發(fā)。于是這個標(biāo)準(zhǔn)并沒有很多人采用
有了XHTML的教訓(xùn)，W3C在制定下一代HTML標(biāo)準(zhǔn)時（HTML5），就將向后兼容作為了一個很重要的原則。HTML5確實引入了許多新的特性，但是它最重要的一個特性是，不會break已有的網(wǎng)頁。你可以將任何已有的網(wǎng)頁的第一行改成<!DOCTYPE html>，它就成也一個HTML5頁面，并且可以照樣在瀏覽器里正常的展示。
簡而言之
HTML語法非常寬松容錯性強;
XHTML更為嚴(yán)格,它要求標(biāo)簽必須小寫、必須嚴(yán)格閉合、標(biāo)簽中的屬性必須使用引號引起等等;
HTML5是HTML的下一個版本所以除了非常寬松容錯性強以外,還增加許多新的特性
.htm 和 .html擴展名區(qū)別
DOS操作系統(tǒng)（win95或win98）下只能支持長度為3的后綴名，所以是htm
但在windows后綴長度可以大于3位，所以windows下無所謂htm與html，html是為長文件的格式命名的
所以htm是為了兼容過去的DOS命名格式存在的
關(guān)于課程的疑問和討論，可以登錄http://bbs.520it.com/forum.php?mod=viewthread&tid=2423。
在 Html 文件中輸入 html:5 按下回車鍵，可快速生成 HTML5 頁面模板：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>html:5
在 html 文件中輸入 div#id>ul.list>li.item*5 按下回車鍵，可快速生成父子關(guān)系的結(jié)構(gòu)：
<div id="id">
<ul class="list">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
</div>父子關(guān)系構(gòu)建
重復(fù)元素: 使用 * 加上數(shù)字來創(chuàng)建多個相同的標(biāo)簽。例如，p*3 后按 Tab 會產(chǎn)生三個 <p> 段落標(biāo)簽。
<p></p>
<p></p>
<p></p><div class="container"></div><div id="main"></div><a href="https://example.com"></a><nav>
<ul>
<li class="item1"><a href="#">item 1</a></li>
<li class="item2"><a href="#">item 2</a></li>
<li class="item3"><a href="#">item 3</a></li>
<li class="item4"><a href="#">item 4</a></li>
</ul>
</nav>人認(rèn)為現(xiàn)在市面上不用編寫代碼就能輕松制作生成 h5 頁面的工具都是一些噱頭，其大致都是套用現(xiàn)成的模板，替換里面的文字或者圖片，作為一個開發(fā)者使用類似網(wǎng)站這些功能根本不能真正意義上達(dá)到自己想要的效果，目前這類工具以邀請函、生日卡、企業(yè)宣傳等為主，以下是一些我了解到的網(wǎng)站僅做參考
1、戰(zhàn)鼓
這個網(wǎng)站部分免費 沒有登錄時候可以進(jìn)入制作頁面 但是具體使用還是要登錄后使用 頁面可自由操作的比較多 但是大多都是聚焦在文字、圖片的修改，使用起來還是比較簡單
2、八圖
八圖網(wǎng)也是部分免費 和上面戰(zhàn)鼓不同的是 需要登錄后才能進(jìn)入制作頁面 能夠DIY 的東西略多 多了一個特效功能 使用起來制作過程比較簡單
3、歡慶網(wǎng)
制作頁面和功能和戰(zhàn)鼓差不多 登錄后才能制作這個功能也是一毛一樣 在此就不過多的介紹了
4、兔展
這個網(wǎng)站目前在同類網(wǎng)站中知名度較高 模板也比較多 但是大多都是收費的 幾十塊錢一個模板收費不等 需要購買后才能進(jìn)入制作頁面
總結(jié)：其實這類網(wǎng)站現(xiàn)在還是很多 但是都是大同小異 套用模板 如果真正想要比較特別的還是自己寫出來的比較實在沒有局限性 而且也許在這些制作上就會花一天兩天去改還是比較耗費時間 但是寫出來的東西并不是獨一無二 所以個人還是認(rèn)為自己學(xué)習(xí)自己寫比較好 畢竟是自己的東西 再丑也是親生的對吧。
?來源：千鋒web前端
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
