整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
本篇文章開(kāi)始成哥將帶大家一起學(xué)習(xí)一下前端的基礎(chǔ)知識(shí)，我們先講解前端的基礎(chǔ)HTML與CSS，這個(gè)講完我們將講解VUE前端框架，最后我們?cè)僦v講Ant Design的VUE前端框架，從而形成前端一個(gè)系列的教程，下面就開(kāi)始我們今天的內(nèi)容吧！
HTML的英文全稱是 Hyper Text Markup Language，即超文本標(biāo)記語(yǔ)言。
HTML是由Web的發(fā)明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年創(chuàng)立的一種標(biāo)記語(yǔ)言，它是標(biāo)準(zhǔn)通用化標(biāo)記語(yǔ)言SGML的應(yīng)用。用HTML編寫的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺(tái)(如UNIX， Windows等)。
使用HTML語(yǔ)言，將所需要表達(dá)的信息按某種規(guī)則寫成HTML文件，通過(guò)專用的瀏覽器來(lái)識(shí)別，并將這些HTML文件"翻譯"成可以識(shí)別的信息，即現(xiàn)在所見(jiàn)到的網(wǎng)頁(yè)。HTML 不需要編譯，可以直接由瀏覽器執(zhí)行，非常方便開(kāi)發(fā)時(shí)調(diào)試。
我們現(xiàn)在創(chuàng)建一個(gè)典型的HTML結(jié)構(gòu)具體如下：
1. <!DOCTYPE html>
2. <html lang="ch">
3. <head>
4. <meta charset="UTF-8">
5. <title>HTML實(shí)例</title>
6. </head>
7. <body>
8. <h1>我是標(biāo)題</h1>
9. <p>我是段落。</p>
10. </body>
11. </html> 如上頁(yè)面中各個(gè)標(biāo)簽代表的意思如下：
1）<!DOCTYPE html>是文檔聲明頭，它告訴游覽器當(dāng)前處理的內(nèi)容是HTML頁(yè)面
2）html是 HTML 頁(yè)面的根元素，用于標(biāo)識(shí)HTML內(nèi)容的開(kāi)始與結(jié)束
3） head是HTML頁(yè)面的頭，包含了文檔的一些屬性。其中meta是元數(shù)據(jù)這邊charset="UTF-8"標(biāo)識(shí)當(dāng)前頁(yè)面編碼格式為UTF-8，title為文檔的標(biāo)題
4）body是HTML主體也是游覽器在顯示頁(yè)面時(shí)的內(nèi)容。h1是body內(nèi)容中定義的標(biāo)題，p是body內(nèi)容中定義的段落
我們現(xiàn)在通過(guò)游覽器打開(kāi)編寫的HTML內(nèi)容，具體內(nèi)容如下
在HTML中的內(nèi)容可以通過(guò)以下格式進(jìn)行內(nèi)容注釋具體如下：
（1）HTML標(biāo)簽
HTML 標(biāo)簽是 HTML 語(yǔ)言中最基本的單位，HTML 標(biāo)簽是 HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）最重要的組成部分。HTML標(biāo)簽具有如下特點(diǎn)：
1）標(biāo)簽一般是成對(duì)出現(xiàn)的 如:<div></div>;也有空標(biāo)簽 如:<br />
2）標(biāo)簽由<>包括,分為開(kāi)始標(biāo)簽(開(kāi)放標(biāo)簽)和結(jié)束標(biāo)簽(閉合標(biāo)簽)
3）標(biāo)簽不區(qū)分大小寫,根據(jù)W3C(萬(wàn)維網(wǎng)聯(lián)盟)推薦,統(tǒng)一使用小寫字母
標(biāo)簽的示列如下：
標(biāo)簽按照<>的對(duì)數(shù)可以分為如下兩類分別為雙標(biāo)簽與單標(biāo)簽，下面我們具體來(lái)了解一下這兩類標(biāo)簽。
1）雙標(biāo)簽
雙標(biāo)簽指由開(kāi)始和結(jié)束兩個(gè)標(biāo)記符組成的標(biāo)記。其基本語(yǔ)法格式如下：
1. <標(biāo)記名></標(biāo)記名>
常見(jiàn)的雙標(biāo)簽有如下幾種：
1. <html></html>
2. <head></head>
3. <title></title>
4. <body></body>
5. <h1></h1>
6. <p></p>
7.
8. <!-- 塊級(jí)元素 -->
9. <div></div>
10. <span></span>
11.
12. <!-- 超鏈接元素 -->
13. <a></a>
14.
15. <!-- 列表元素 -->
16. <ul></ul> 2）單標(biāo)簽
單標(biāo)簽是指用一個(gè)標(biāo)記符號(hào)即可完整地描述某個(gè)功能的標(biāo)記。其基本語(yǔ)法格式如下：
1. <標(biāo)記名/>
常見(jiàn)的單標(biāo)簽有如下幾種：
1. <!-- 換行標(biāo)簽 -->
2. <br />
3.
4. <!-- 分隔線標(biāo)簽 -->
5. <hr />
6.
7. <!-- 圖片標(biāo)簽 -->
8. <img /> （2）HTML元素
HTML 元素指的是從開(kāi)始標(biāo)簽（start tag）到結(jié)束標(biāo)簽（end tag）的所有代碼，如<p>段落</p>。元素可以進(jìn)行嵌套具體如下：
1. <div>
2. <h1>我是標(biāo)題</h1>
3.
4. <div>
5. <p>元素嵌套示列</p>
6. </div>
7.
8. </div> （3）HTML屬性
屬性為 HTML 元素提供附加信息，可分為全局屬性（即所有元素均可使用的屬性，如id,class等）和元素屬性（部分元素可使用的屬性，例如<a href="http://www.baidu.com">搜索</a>），屬性通常由屬性名="屬性值"構(gòu)成,存在于開(kāi)始標(biāo)簽中，示列如下:
（4）HTML實(shí)體編碼
對(duì)于部分不易通過(guò)鍵盤輸入的或和HTML沖突的部分符合,引入對(duì)應(yīng)的"實(shí)體編碼"，如< <> >空格 。
（5）HTML事件
通過(guò)某個(gè)動(dòng)作,執(zhí)行某個(gè)操作/JS腳本的能力。如點(diǎn)擊按鈕,改變顏色，事件可以分為多類比多鼠標(biāo)點(diǎn)擊、鼠標(biāo)聚焦等，下面我看看看一個(gè)事件編寫示列：
（1）h標(biāo)簽
h 標(biāo)簽有六種分別為h1、h2、h3、h4、h5、h6，這六個(gè)分別對(duì)應(yīng)六種樣式的標(biāo)題，我們現(xiàn)在來(lái)編寫這六種h標(biāo)簽，演示代碼如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎(chǔ)教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <h1>H1標(biāo)題</h1>
9. <h2>H2標(biāo)題</h2>
10. <h3>H3標(biāo)題</h3>
11. <h4>H4標(biāo)題</h4>
12. <h5>H5標(biāo)題</h5>
13. <h6>H6標(biāo)題</h6>
14. </body>
15. </html> 我們來(lái)運(yùn)行該HTML文件，來(lái)看看這六種h標(biāo)簽有什么樣式差異，從示列中可以發(fā)現(xiàn)h1標(biāo)簽字體最大然后依次減小。
（2）p標(biāo)簽
p 標(biāo)簽是文本標(biāo)簽，現(xiàn)在我們來(lái)編寫一段含有p標(biāo)簽的html文本，然后運(yùn)行了看看p標(biāo)簽的樣式具體操作如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎(chǔ)教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <h4>標(biāo)題一</h4>
10. <p>我是段落1</p>
11.
12. <h4>標(biāo)題二</h4>
13. <p>我是段落2</p>
14.
15. </body>
16. </html> （3）a標(biāo)簽
a標(biāo)簽是超鏈接標(biāo)簽，點(diǎn)擊a標(biāo)簽可以跳轉(zhuǎn)到其設(shè)置的網(wǎng)站，具體示列如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎(chǔ)教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <div>
9. <a href="http://www.baidu.com">點(diǎn)我跳轉(zhuǎn)到百度頁(yè)面</a>
10. </div>
11.
12. <div>
13. <a href="http://www.qq.com">點(diǎn)我跳轉(zhuǎn)到騰訊頁(yè)面</a>
14. </div>
15.
16. </body>
17. </html> （4）div標(biāo)簽
div標(biāo)簽是一個(gè)塊級(jí)元素，它可用于組合其他 HTML 元素的容器。可以把div看成一個(gè)盒子，我們可以為這個(gè)盒子設(shè)置各種各樣屬性（如高度、寬度、顏色等），下面我們編寫一個(gè)div標(biāo)簽并設(shè)置其長(zhǎng)為300px，寬度為200px，同時(shí)給其一個(gè)背景顏色，具體如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎(chǔ)教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <div style="width: 200px;height: 300px;background: #2eabff">我是div元素</div>
10.
11. </body>
12. </html> （5）列表標(biāo)簽
列表作為網(wǎng)頁(yè)設(shè)計(jì)的重要內(nèi)容之一，能夠用來(lái)制作導(dǎo)航欄和新聞列表等。HTML 列表分為：有序列表（ol），無(wú)序列表（ul）以及自定義列表（dl）
1）有序列表ul
有序列表的順序是有序的，默認(rèn)情況下會(huì)以數(shù)字來(lái)排列，但也可以通過(guò)設(shè)置其type屬性以大寫字母、小寫字母、大寫羅馬數(shù)字、小寫羅馬數(shù)字來(lái)排列，我們現(xiàn)在來(lái)寫一個(gè)示列，具體如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎(chǔ)教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <!-- 有序列表，以默認(rèn)方式數(shù)字排列 -->
10. <p>有序列表默認(rèn)方式數(shù)字排列</p>
11. <ol>
12. <li>列表1</li>
13. <li>列表2</li>
14. <li>列表3</li>
15. </ol>
16.
17. <!-- 有序列表，以大寫字母排列 -->
18. <p>有序列表大寫字母排列</p>
19. <ol type="A">
20. <li>列表1</li>
21. <li>列表2</li>
22. <li>列表3</li>
23. </ol>
24.
25. </body>
26. </html> 2）無(wú)序列表ol
無(wú)序列表的順序是無(wú)序的，不會(huì)按照某個(gè)值來(lái)排序，無(wú)序列表中每個(gè)列表前默認(rèn)都有一個(gè)實(shí)心圓，也可以通過(guò)type屬性來(lái)設(shè)置成空心圓或者小方塊，無(wú)序列表示列如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎(chǔ)教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <p>無(wú)序列表默認(rèn)type樣式</p>
10. <ul>
11. <li>列表1</li>
12. <li>列表2</li>
13. <li>列表3</li>
14. </ul>
15.
16. <p>無(wú)序列表方塊樣式</p>
17. <ul type="square">
18. <li>列表1</li>
19. <li>列表2</li>
20. <li>列表3</li>
21. </ul>
22.
23. </body>
24. </html> 3）自定義列表dl
自定義列表以 <dl> 標(biāo)簽開(kāi)始。每個(gè)自定義列表項(xiàng)以 <dt> 開(kāi)始，其列表內(nèi)容是以<dd> 開(kāi)始，自定義列表前面沒(méi)有任何標(biāo)識(shí)，其具體示例如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎(chǔ)教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <p>自定義列表</p>
10. <dl>
11. <dt>東岳</dt>
12. <dd>泰山</dd>
13.
14. <dt>南岳</dt>
15. <dd>衡山</dd>
16.
17. <dt>西岳</dt>
18. <dd>華山</dd>
19.
20. <dt>北岳</dt>
21. <dd>恒山</dd>
22.
23. <dt>中岳</dt>
24. <dd>嵩山</dd>
25. </dl>
26.
27. </body>
28. </html> （6）其它標(biāo)簽
1）換行標(biāo)簽<br/>
在HTML中如果想給內(nèi)容進(jìn)行換行可以使用換行標(biāo)簽，具體示列如下：
2）分割線標(biāo)簽<hr/>
<hr/> 標(biāo)簽用于在 HTML創(chuàng)建一條分割線，具體示列如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎(chǔ)教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <p>我是張三</p>
10. <!-- 分割線標(biāo)簽 -->
11. <hr/>
12. <p>我是李四</p>
13. </body>
14. </html> 至此我們《HTML基礎(chǔ)教程上篇》就講完了，下篇內(nèi)容主要講解HTML樣式、HTML表單、Tabel等，敬請(qǐng)期待。最后如果喜歡本篇文章不要忘了點(diǎn)贊、關(guān)注與轉(zhuǎn)發(fā)哦！
-END-
@IT管理局專注計(jì)算機(jī)領(lǐng)域技術(shù)、大學(xué)生活、學(xué)習(xí)方法、求職招聘、職業(yè)規(guī)劃、職場(chǎng)感悟等類型的原創(chuàng)內(nèi)容。期待與你相遇，和你一同成長(zhǎng)。
文章推薦：
篇目錄
本篇目錄
什么是HTML
HTML的作用
HTML發(fā)展史
IETF簡(jiǎn)介
W3C簡(jiǎn)介
網(wǎng)頁(yè)的固定格式
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擴(kuò)展名區(qū)別
什么是HTML
HTML其實(shí)是HyperText Markup Language的縮寫, 超文本標(biāo)記語(yǔ)言
HTML的作用
1.首先利用記事本保存了一個(gè)標(biāo)題和兩段描述, 然后修改純文本文件的擴(kuò)展名為.html, 然后再利用瀏覽器打開(kāi)
2.打開(kāi)之后發(fā)現(xiàn)顯示的格式不對(duì), 不對(duì)的原因是因?yàn)樵诩兾谋疚募兴形淖侄际峭?jí)別的, 瀏覽器不知道哪些文字代表什么意思. 也就是瀏覽器不知道哪些文字是標(biāo)題, 哪些文字是段落…., 所以導(dǎo)致了顯示的格式不正確
正是因?yàn)槿绱? 所以HTML應(yīng)用而生. HTML就只有一個(gè)作用, 它是專門用來(lái)描述文本的語(yǔ)義的. 也就是說(shuō)我們可以利用HTML來(lái)告訴瀏覽器哪些是標(biāo)題, 哪些是段落.
這些用于描述其它文本語(yǔ)義的文本, 我們稱之為標(biāo)簽. 并且這些用于描述文本語(yǔ)義的標(biāo)簽將來(lái)在瀏覽器中是不會(huì)被顯示出來(lái)的
所以正是因?yàn)镠TML的這些標(biāo)簽是專門用來(lái)描述其它文本語(yǔ)義的, 并且在瀏覽器中不會(huì)被顯示出來(lái), 所以我們稱這些文本為"超文本", 而這些文本又叫做標(biāo)簽, 所以HTML被稱之為"超文本標(biāo)記語(yǔ)言"
注意事項(xiàng):
雖然我們利用H1標(biāo)簽描述一段文本之后, 這段文本在瀏覽器中顯示出來(lái)會(huì)被放大和加粗, 看上去我們是利用HTML的標(biāo)簽修改了被描述的那段文本的樣式. 但是一定要記住, HTML只有一個(gè)作用, 它是專門用來(lái)給文本添加語(yǔ)義的, 而不是用來(lái)修改文本的樣式的
H1標(biāo)簽它的作用是什么?
錯(cuò)誤: H1標(biāo)簽可以用來(lái)修改文字的大小, 并且還可以將文字加粗
正確: H1標(biāo)簽的作用是用來(lái)告訴瀏覽器, 哪些文字是標(biāo)題. 也就是H1標(biāo)簽是專門用于給指定的文字添加標(biāo)題語(yǔ)義的
HTML發(fā)展史
IETF簡(jiǎn)介
IETF是英文Internet Engineering Task Force的縮寫, 翻譯過(guò)來(lái)就是”互聯(lián)網(wǎng)工程任務(wù)組”
IETF負(fù)責(zé)定義并管理因特網(wǎng)技術(shù)的所有方面。包括用于數(shù)據(jù)傳輸?shù)腎P協(xié)議、讓域名與IP地址匹配的域名系統(tǒng)（DNS）、用于發(fā)送郵件的簡(jiǎn)單郵件傳輸協(xié)議（SMTP）等
W3C簡(jiǎn)介
W3C是英文World Wide Web Consortium的縮寫， 翻譯過(guò)來(lái)就是W3C理事會(huì)或萬(wàn)維網(wǎng)聯(lián)盟, W3C是全球互聯(lián)網(wǎng)最具權(quán)威的技術(shù)標(biāo)準(zhǔn)化組織.
W3C于1994年10月在麻省理工學(xué)院計(jì)算機(jī)科學(xué)實(shí)驗(yàn)室成立。創(chuàng)建者是萬(wàn)維網(wǎng)的發(fā)明者Tim Berners-Lee
W3C負(fù)責(zé)web方面標(biāo)準(zhǔn)的制定，像HTML、XHTML、CSS、XML的標(biāo)準(zhǔn)就是由W3C來(lái)定制的。
Tim Berners-Lee（蒂姆·伯納斯-李），萬(wàn)維網(wǎng)之父、html設(shè)計(jì)者、w3c創(chuàng)始人
百度百科
網(wǎng)頁(yè)的固定格式
1.編寫網(wǎng)頁(yè)和寫信一樣都有一套規(guī)范和要求, 這套規(guī)范和要求中規(guī)定了寫信的固定格式
2.寫信基本結(jié)構(gòu)
3.編寫網(wǎng)頁(yè)的步驟:
3.1.新建一個(gè)文本文檔
3.2.利用記事本打開(kāi)
3.3.編寫THML代碼
3.4.保存并且修改純文本文檔的擴(kuò)展名為.html
3.5.利用瀏覽器打開(kāi)編寫好的文件
4.網(wǎng)頁(yè)基本結(jié)構(gòu):
5.通過(guò)觀察我們發(fā)現(xiàn), HTML基本結(jié)構(gòu)中所有的標(biāo)簽都是成對(duì)出現(xiàn)的, 這些成對(duì)出現(xiàn)的標(biāo)簽中有一個(gè)帶/有一個(gè)不帶/, 那么這些不帶/的標(biāo)簽我們稱之為開(kāi)始標(biāo)簽, 這些帶/的我們稱之為結(jié)束標(biāo)簽html標(biāo)簽
作用:
用于告訴瀏覽器這是一個(gè)網(wǎng)頁(yè), 也就是說(shuō)告訴瀏覽器我是一個(gè)HTML文檔
注意點(diǎn):
其它所有的標(biāo)簽都必須寫在html標(biāo)簽里面, 也就是寫在html開(kāi)始標(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)站添加一些配置信息
例如:
注意點(diǎn):
一般情況下, 寫在head標(biāo)簽內(nèi)部的內(nèi)容都不會(huì)顯示給用戶查看, 也就是說(shuō)一般情況下寫在head標(biāo)簽內(nèi)部的內(nèi)容我們都看不到
title標(biāo)簽
作用:
專門用于指定網(wǎng)站的標(biāo)題, 并且這個(gè)指定的標(biāo)題將來(lái)還會(huì)作為用戶保存網(wǎng)站的默認(rèn)標(biāo)題
注意點(diǎn):
title標(biāo)簽必須寫在head標(biāo)簽里面
body標(biāo)簽
作用:
專門用于定義HTML文檔中需要顯示給用戶查看的內(nèi)容(文字/圖片/音頻/視頻)
注意點(diǎn):
雖然說(shuō)有時(shí)候你可能將內(nèi)容寫到了別的地方在網(wǎng)頁(yè)中也能看到, 但是千萬(wàn)不要這么干, 一定要將需要顯示的內(nèi)容寫在body中
一對(duì)html標(biāo)簽中(一個(gè)html開(kāi)始標(biāo)簽和一個(gè)html結(jié)束標(biāo)簽)只能有一對(duì)body標(biāo)簽
head內(nèi)部標(biāo)簽
meta標(biāo)簽
1.為什么會(huì)有亂碼現(xiàn)象?
因?yàn)槲覀冊(cè)诰帉懢W(wǎng)頁(yè)的時(shí)候沒(méi)有指定字符集
2.如何解決亂碼現(xiàn)象?
在head標(biāo)簽中添加<meta charset="GBK" />, 指定字符集
3.什么是字符集
字符集就是字符的集合, 也就是很多字符堆在一起. 其實(shí)字符集很像我們古代的”活字印刷術(shù)”, 在活字印刷術(shù)中就是將很多刻有漢字的小章放到一個(gè)盒子中, 然后需要印刷文字的時(shí)候再去盒子中取這個(gè)小章出來(lái)用, 正是因?yàn)槿绱? 所以導(dǎo)致了亂碼問(wèn)題
假設(shè)北方人和南方人都擁有裝滿小章的盒子, 但是南方人和北方人在盒子中存儲(chǔ)小章的順序不太一樣, 那么這個(gè)時(shí)候如果北方人和南方人都需要去取”李”字, 在南方人記憶中李字在第6個(gè)盒子的第6行的第6列中(666), 在北方人的記憶中李字在第8個(gè)盒子的第8行的第8列中(888). 那么此時(shí)如果讓一個(gè)南方人去北方人的盒子中取”李”字的小章, 必然找不到,, 所以就導(dǎo)致了亂碼問(wèn)題
這個(gè)地方北方人的存儲(chǔ)小章的盒子和南方人存儲(chǔ)小章的盒子就對(duì)應(yīng)網(wǎng)頁(yè)中指定的字符集, 在網(wǎng)頁(yè)中我們常見(jiàn)的字符集有兩個(gè)GBK/UTF-8, GBK就對(duì)應(yīng)北方人存儲(chǔ)的盒子, UTF-8就對(duì)應(yīng)南方人存儲(chǔ)的盒子
所以在網(wǎng)頁(yè)中指定字符集的意義就在于告訴瀏覽器我用的是哪個(gè)盒子, 你應(yīng)該如何去查找才能找到對(duì)應(yīng)的正確的內(nèi)容
4.GBK(GB2312)和UTF-8區(qū)別
提交比較大
體積比較小
GBK(GB2312)里面存儲(chǔ)的字符比較少, 僅僅存儲(chǔ)了漢字和一些常用外文
UTF-8里面存儲(chǔ)的世界上所有的文字
5.那么在企業(yè)開(kāi)發(fā)中我們應(yīng)該使用GBK(GB2312)還是UTF-8呢?
如果你的網(wǎng)站僅僅包含中文, 那么推薦使用GB2312, 因?yàn)樗捏w積更小, 訪問(wèn)速度更快
如果你的網(wǎng)站除了中文以外, 還包含了一些其它國(guó)家的語(yǔ)言 , 那么推薦使用UTF-8
懶人推薦: 不管三七二十一, 一律寫UTF-8即可
6.注意點(diǎn):
在HTML文件中指定的字符集必須和保存這個(gè)文件的字符集一致, 否則還是會(huì)出現(xiàn)亂碼
所以僅僅指定字符集不一定能解決亂碼問(wèn)題, 還需要保存文件的時(shí)候, 文件的保存格式必須和指定的字符集一致才能保證沒(méi)有亂碼問(wèn)題
HTML標(biāo)簽
HTML標(biāo)簽分類
單標(biāo)簽
只有開(kāi)始標(biāo)簽沒(méi)有結(jié)束標(biāo)簽, 也就是由一個(gè)<>組成的
雙標(biāo)簽
有開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽, 也就是由一個(gè)<>和一個(gè)</>組成的
HTML標(biāo)簽關(guān)系分類
并列關(guān)系(兄弟/平級(jí))
嵌套關(guān)系(父子/上下級(jí))
DTD文檔聲明
什么是DTD文檔聲明?
由于HTML有很多個(gè)版本的規(guī)范, 每個(gè)版本的規(guī)范之間又有一定的差異. 所以為了讓瀏覽器能夠正確的編譯/解析/渲染我們的網(wǎng)頁(yè), 我們需要在HTML文件的第一行告訴瀏覽器, 我們當(dāng)前這個(gè)網(wǎng)頁(yè)是用哪一個(gè)版本的HTML規(guī)范來(lái)編寫的. 瀏覽器只要知道了我們是用哪一個(gè)版本的規(guī)范來(lái)編寫之后, 它就能夠正確的編譯/解析/渲染我們的網(wǎng)頁(yè)
DTD文檔聲明格式:
注意事項(xiàng):
不寫也能運(yùn)行
H5網(wǎng)頁(yè)里面用H4也能運(yùn)行
<!DOCTYPE>聲明必須是 HTML 文檔的第一行，位于 <html> 標(biāo)簽之前
<!DOCTYPE> 聲明不是 HTML 標(biāo)簽
<!DOCTYPE> 聲明沒(méi)有結(jié)束標(biāo)簽
<!DOCTYPE> 聲明對(duì)大小寫不敏感
這個(gè)聲明瀏覽器會(huì)看, 但是并不是完全依賴于這個(gè)聲明, 瀏覽器有一套自己的默認(rèn)的處理機(jī)制
HTML5之前有2大種規(guī)范, 每種規(guī)范中又有3小種規(guī)范
| 大規(guī)范 | 小規(guī)范 |
|---|---|
| HTML | Strict (嚴(yán)格的) |
| HTML | Transitional(過(guò)度的,普通的,寬松的) |
| HTML | Frameset(帶有框架的頁(yè)面) |
| XHTML | Strict (嚴(yán)格的) |
| XHTML | Transitional(過(guò)度的,普通的,寬松的) |
| XHTML | Frameset(帶有框架的頁(yè)面) |
HTML的DTD文檔聲明和XHTML的DTD文檔聲明有何區(qū)別?
XHTML本身規(guī)定比如標(biāo)簽必須小寫、必須嚴(yán)格閉合、必須使用引號(hào)引起屬性等等, 而HTML會(huì)更加松散沒(méi)有這么嚴(yán)格
Strict表示嚴(yán)格的, 這種模式里面的要求更為嚴(yán)格.這種嚴(yán)格主要體現(xiàn)在有一些標(biāo)簽不能使用
例如font標(biāo)簽/u標(biāo)簽等
font標(biāo)簽可以修改一個(gè)文本的字號(hào)、顏色、字體,但這和HTML的本質(zhì)有沖突,因?yàn)镠TML只能負(fù)責(zé)語(yǔ)義,不能負(fù)責(zé)樣式,而font標(biāo)簽是用于修改樣式的,所以在Strict中是不能使用font標(biāo)簽
u標(biāo)簽可以給一個(gè)文本加上下劃線,但這和HTML的本質(zhì)有沖突,因?yàn)镠TML只能負(fù)責(zé)語(yǔ)義,不能負(fù)責(zé)樣式,而u標(biāo)簽是用于添加下劃線是樣式.所以在Strict中是不能使用u標(biāo)簽
Transitional表示普通的, 這種模式是沒(méi)有一些別的要求
例如可以使用font標(biāo)簽、u標(biāo)簽等
但是在企業(yè)開(kāi)發(fā)中不會(huì)使用這些標(biāo)簽,因?yàn)檫@違背了HTML的本質(zhì), 而是將這些標(biāo)簽作為css的鉤子使用
Frameset表示框架, 在框架的頁(yè)面使用
后面學(xué)到框架/NodeJS 再做詳細(xì)了解
常見(jiàn)的DOCTYPE有如下幾種
有這么多規(guī)范我們學(xué)習(xí)過(guò)程中到底使用哪一種比較合適呢?
www.baidu.com (B)
www.taobao.com (A)
www.qq.com (T)
www.sohu.com(大奇葩)
無(wú)論是HTML還是XHTML,過(guò)去企業(yè)級(jí)開(kāi)發(fā)中用的比較多的大部分都是Transitional類型的文檔聲明
但是HTML5的時(shí)代已經(jīng)到來(lái),以上6中規(guī)范僅僅作為了解, 以后都用HTML5類型的文檔聲明, HTML5向下兼容(求此刻WC3心里陰影面積)
目前國(guó)內(nèi)一線網(wǎng)站都更新到了HTML5的文檔聲明, 所以后續(xù)授課也是全程使用HTML5的文檔聲明
HTML和XHTML、HTML5區(qū)別
在HTML的早期發(fā)展中，大部分標(biāo)準(zhǔn)都是所謂的retro-spec，即先有實(shí)現(xiàn)后有標(biāo)準(zhǔn)。在這種情況下，HTML標(biāo)準(zhǔn)不是很規(guī)范，瀏覽器也對(duì)HTML頁(yè)面中的錯(cuò)誤相當(dāng)寬容。這反過(guò)來(lái)又導(dǎo)致了HTML開(kāi)發(fā)者寫出了大量含有錯(cuò)誤的HTML頁(yè)面
html語(yǔ)言本身有一些缺陷（例如： 內(nèi)容和形式不能分離；標(biāo)簽單一；數(shù)據(jù)不能復(fù)用等等），隨著xml的興起人們希望xml來(lái)彌補(bǔ)html的不足，但是目前有成千上萬(wàn)的網(wǎng)頁(yè)都是用html編寫的，所以完全使用xml來(lái)替代html還為時(shí)過(guò)早，于是W3C在2000年推出了xhtml1.0， 建立xhtml的目的就是實(shí)現(xiàn)從html向xml的過(guò)度
為了規(guī)范HTML，W3C結(jié)合XML制定了XHTML 1.0標(biāo)準(zhǔn)，這個(gè)標(biāo)準(zhǔn)沒(méi)有增加任何新的標(biāo)簽，只是按照XML的要求來(lái)規(guī)范HTML，并定義了一個(gè)新的MIME type application/xhtml+xml。W3C的初衷是要求瀏覽器對(duì)這個(gè)MIME type實(shí)行強(qiáng)錯(cuò)誤檢查，如果頁(yè)面有HTML錯(cuò)誤，就要顯示錯(cuò)誤信息。但是由于已有的web頁(yè)面中已經(jīng)有了大量的錯(cuò)誤，很多開(kāi)發(fā)者拒絕使用新的MIME type。W3C不得已，在XHTML 1.0的標(biāo)準(zhǔn)之后增加了一個(gè)附錄C，允許開(kāi)發(fā)者使用XHTML語(yǔ)法來(lái)寫頁(yè)面，同時(shí)使用舊的MIME type，application/html，來(lái)分發(fā)頁(yè)面
W3C隨后在XHTML 1.1中取消了附錄C，即使用XHTML 1.1標(biāo)準(zhǔn)的頁(yè)面必須用新的MIME type來(lái)分發(fā)。于是這個(gè)標(biāo)準(zhǔn)并沒(méi)有很多人采用
有了XHTML的教訓(xùn)，W3C在制定下一代HTML標(biāo)準(zhǔn)時(shí)（HTML5），就將向后兼容作為了一個(gè)很重要的原則。HTML5確實(shí)引入了許多新的特性，但是它最重要的一個(gè)特性是，不會(huì)break已有的網(wǎng)頁(yè)。你可以將任何已有的網(wǎng)頁(yè)的第一行改成<!DOCTYPE html>，它就成也一個(gè)HTML5頁(yè)面，并且可以照樣在瀏覽器里正常的展示。
簡(jiǎn)而言之
HTML語(yǔ)法非常寬松容錯(cuò)性強(qiáng);
XHTML更為嚴(yán)格,它要求標(biāo)簽必須小寫、必須嚴(yán)格閉合、標(biāo)簽中的屬性必須使用引號(hào)引起等等;
HTML5是HTML的下一個(gè)版本所以除了非常寬松容錯(cuò)性強(qiáng)以外,還增加許多新的特性
.htm 和 .html擴(kuò)展名區(qū)別
DOS操作系統(tǒng)（win95或win98）下只能支持長(zhǎng)度為3的后綴名，所以是htm
但在windows后綴長(zhǎng)度可以大于3位，所以windows下無(wú)所謂htm與html，html是為長(zhǎng)文件的格式命名的
所以htm是為了兼容過(guò)去的DOS命名格式存在的
關(guān)于課程的疑問(wèn)和討論，可以登錄http://bbs.520it.com/forum.php?mod=viewthread&tid=2423。
、定義
<meta> 標(biāo)簽提供關(guān)于 HTML 文檔的元數(shù)據(jù)。它不會(huì)顯示在頁(yè)面上，但是對(duì)于機(jī)器是可讀的。可用于瀏覽器（如何顯示內(nèi)容或重新加載頁(yè)面），搜索引擎（關(guān)鍵詞），或其他 web 服務(wù)。
2、作用
meta里的數(shù)據(jù)是供機(jī)器解讀的，告訴機(jī)器該如何解析這個(gè)頁(yè)面，還有一個(gè)用途是可以添加服務(wù)器發(fā)送到瀏覽器的http頭部?jī)?nèi)容，例如我們?yōu)轫?yè)面中添加如下meta標(biāo)簽：
瀏覽器的頭部就會(huì)包括這些:
只有瀏覽器可以接受這些附加的頭部字段，并能以適當(dāng)?shù)姆绞绞褂盟鼈儠r(shí)，這些字段才有意義。
3、meta的必需屬性和可選屬性
meta的必需屬性是content，當(dāng)然并不是說(shuō)meta標(biāo)簽里一定要有content，而是當(dāng)有http-equiv或name屬性的時(shí)候，一定要有content屬性對(duì)其進(jìn)行說(shuō)明。例如：
必需屬性
<meta name="keywords" content="HTML,ASP,PHP,SQL">
這里面content里的屬性就是對(duì)keywords進(jìn)行的說(shuō)明，所以呢也可以理解成一個(gè)鍵值對(duì)吧，就是{keywords:"HTML,ASP,PHP,SQL"}。
可選屬性
在W3school中，對(duì)于meta的可選屬性說(shuō)到了三個(gè)，分別是http-equiv、name和scheme。考慮到scheme不是很常用，所以就只說(shuō)下前兩個(gè)屬性吧。
http-equiv
http-equiv屬性是添加http頭部?jī)?nèi)容，對(duì)一些自定義的，或者需要額外添加的http頭部?jī)?nèi)容，需要發(fā)送到瀏覽器中，我們就可以是使用這個(gè)屬性。在上面的meta作用中也有簡(jiǎn)單的說(shuō)明，那么現(xiàn)在再舉個(gè)例子。例如我們不想使用js來(lái)重定向，用http頭部?jī)?nèi)容控制，那么就可以這樣控制：
<meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />
在頁(yè)面中加入這個(gè)后，5秒鐘后就會(huì)跳轉(zhuǎn)到指定頁(yè)面啦，效果可看W3school的例子
name
第二個(gè)可選屬性是name，這個(gè)屬性是供瀏覽器進(jìn)行解析，對(duì)于一些瀏覽器兼容性問(wèn)題，name屬性是最常用的，當(dāng)然有個(gè)前提就是瀏覽器能夠解析你寫進(jìn)去的name屬性才可以，不然就是沒(méi)有意義的。還是舉個(gè)例子吧:
<meta name="renderer" content="webkit">
這個(gè)meta標(biāo)簽的意思就是告訴瀏覽器，用webkit內(nèi)核進(jìn)行解析，當(dāng)然前提是瀏覽器有webkit內(nèi)核才可以，不然就是沒(méi)有意義的啦。當(dāng)然看到這個(gè)你可能會(huì)有疑問(wèn)，這個(gè)renderer是從哪里冒出來(lái)的，我要怎么知道呢？這個(gè)就是在對(duì)應(yīng)的瀏覽器的開(kāi)發(fā)文檔里就會(huì)有表明的，例如這個(gè)renderer是在360瀏覽器里說(shuō)明的。360瀏覽器內(nèi)核控制Meta標(biāo)簽說(shuō)明文檔
常用meta標(biāo)簽大總結(jié)
接下來(lái)就是常用的meta標(biāo)簽大總結(jié)啦，我會(huì)盡可能的做到全
charset
charset是聲明文檔使用的字符編碼，解決亂碼問(wèn)題主要用的就是它，值得一提的是，這個(gè)charset一定要寫第一行，不然就可能會(huì)產(chǎn)生亂碼了。
charset有兩種寫法
兩個(gè)都是等效的。
百度禁止轉(zhuǎn)碼
百度會(huì)自動(dòng)對(duì)網(wǎng)頁(yè)進(jìn)行轉(zhuǎn)碼，這個(gè)標(biāo)簽是禁止百度的自動(dòng)轉(zhuǎn)碼
<meta http-equiv="Cache-Control" content="no-siteapp" />
SEO 優(yōu)化部分
viewport
viewport主要是影響移動(dòng)端頁(yè)面布局的，例如：
content 參數(shù)：
各瀏覽器平臺(tái)
Microsoft Internet Explorer
Google Chrome
360瀏覽器
UC手機(jī)瀏覽器
UCBrowser_U3_API
QQ手機(jī)瀏覽器
Apple iOS
Google Android
App Links
最后——移動(dòng)端常用的meta
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
