完整的HTML結(jié)構(gòu)
? 一個(gè)完整的HTML結(jié)構(gòu)包括哪幾部分呢?
? 文檔聲明
? html元素
? head元素
? body元素
文檔聲明 ?HTML最上方的一段文本我們稱之為 文檔類型聲明，用于聲明文檔類型
? <!DOCTYPE html>
? HTML文檔聲明，告訴瀏覽器當(dāng)前頁面是HTML5頁面;
? 讓瀏覽器用HTML5的標(biāo)準(zhǔn)去解析識(shí)別內(nèi)容;
? 必須放在HTML文檔的最前面，不能省略，省略了會(huì)出現(xiàn)兼容性問題;
?HTML5的文檔聲明比HTML 4.01、XHTML 1.0簡(jiǎn)潔非常多(了解即可)
html元素 ?<html> 元素 表示一個(gè) HTML 文檔的根(頂級(jí)元素)，所以它也被稱為根元素。
? 所有其他元素必須是此元素的后代。
? W3C標(biāo)準(zhǔn)建議為html元素增加一個(gè)lang屬性，作用是
? 幫助語音合成工具確定要使用的發(fā)音; ? 幫助翻譯工具確定要使用的翻譯規(guī)則;
? 比如常用的規(guī)則: ? lang=“en”表示這個(gè)HTML文檔的語言是英文; ? lang=“zh-CN”表示這個(gè)HTML文檔的語言是中文;
head元素
? HTML head 元素 規(guī)定文檔相關(guān)的配置信息(也稱之為****元數(shù)據(jù)****)，包括文檔的標(biāo)題，引用的文檔樣式和腳本等。
? 什么是元數(shù)據(jù)(meta data)，是描述數(shù)據(jù)的數(shù)據(jù);
? 這里我們可以理解成對(duì)整個(gè)頁面的配置:
? 常見的設(shè)置有哪些呢?一般會(huì)至少包含如下2個(gè)設(shè)置。
? 網(wǎng)頁的標(biāo)題:title元素
? 網(wǎng)頁的編碼:meta元素
? 可以用于設(shè)置網(wǎng)頁的字符編碼，讓瀏覽器更精準(zhǔn)地顯示每一個(gè)文字，不設(shè)置或者設(shè)置錯(cuò)誤會(huì)導(dǎo)致亂碼;
? 一般都使用utf-8編碼，涵蓋了世界上幾乎所有的文字;
body元素
? body元素里面的內(nèi)容將是你在瀏覽器窗口中看到的東西，也就是網(wǎng)頁的具體內(nèi)容和結(jié)構(gòu)。
- 大部分HTML元素都是在body中編寫呈現(xiàn)的;
HTML元素
? HTML元素本身很多，但是常用的元素就是那么幾個(gè)。
- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
- 我們只需要記住常用的，不常用的學(xué)會(huì)查看文檔即可;
? 常用的元素(暫時(shí)掌握下面幾個(gè)就夠了，90%時(shí)間都在寫這幾個(gè)):
□ 元素、h元素;
□ img元素、a元素、iframe元素;
□ div元素、span元素;
? 下階段看的元素:
□ ul、ol、li元素;
□ button元素、input元素;
□ table、thead、tbody、thead、th、tr、td;
案例分析 – 使用什么元素
常見元素 – h元素
? 在一個(gè)頁面中通常會(huì)有一些比較****重要的文字****作為標(biāo)題，這個(gè)時(shí)候我們可以使用h元素。
? <h1>–<h6> 標(biāo)題 (Heading) 元素呈現(xiàn)了六個(gè)不同的級(jí)別的標(biāo)題
- Heading是頭部的意思，通常會(huì)用來做標(biāo)題
- <h1> 級(jí)別最高，而 <h6> 級(jí)別最低。
? 注意:h元素通常和SEO優(yōu)化有關(guān)系(什么是SEO，后續(xù)再介紹)
常見元素 – p元素
? 如果我們想表示一個(gè)段落，這個(gè)時(shí)候可以使用p元素。
? HTML <p>元素(或者說 HTML 段落元素)表示文本的一個(gè)段落。
p元素是paragraph單詞的縮寫，是段落、分段的意思;
p元素多個(gè)段落之間會(huì)有一定的間距;
常見元素 - img元素
? 我們應(yīng)該如何告訴瀏覽器來顯示一張圖片呢?使用img元素。
? HTML <img> 元素將一份圖像嵌入文檔。
img是image單詞的所以，是圖像、圖像的意思;
事實(shí)上img是一個(gè)可替換元素( replaced element );
? img有兩個(gè)常見的屬性:
- src屬性:source單詞的縮寫，表示源
? 是必須的，它包含了你想嵌入的圖片的文件路徑。
alt屬性:不是強(qiáng)制性的，有兩個(gè)作用
? 作用一:當(dāng)圖片加載不成功(錯(cuò)誤的地址或者圖片資源不存在)，那么會(huì)顯示這段文本;
? 作用二:屏幕閱讀器會(huì)將這些描述讀給需要使用閱讀器的使用者聽，讓他們知道圖像的含義;
某些其他屬性目前已經(jīng)不再使用
? 比如width、height、border
img元素 - 圖片的路徑
? 設(shè)置img的****src****時(shí)，需要給圖片設(shè)置路徑:
- 網(wǎng)絡(luò)圖片:一個(gè)URL地址;
? 網(wǎng)絡(luò)圖片的設(shè)置非常簡(jiǎn)單，給一個(gè)地址即可;
- 本地圖片:本地電腦上的圖片，后續(xù)會(huì)和html一起部署到服務(wù);
? 本地圖片的路徑有兩種方式:
- 方式一:絕對(duì)路徑(幾乎不用);
? 從電腦的根目錄開始一直找到資源的路徑;
- 方式二:相對(duì)路徑(常用);
? 相當(dāng)于當(dāng)前文件的一個(gè)路徑;
? . 代表當(dāng)前文件夾(1個(gè).)，可以省略
? .. 代表上級(jí)文件夾(2個(gè).)
? 對(duì)于網(wǎng)頁來說，不管什么操作系統(tǒng)(Windows、Mac、Linux)，路徑分隔符都是 /，而不是 \
img元素 - 圖片的格式
? img元素支持的圖片格式非常多:
常見元素 – a元素
? 在網(wǎng)頁中我們經(jīng)常需要跳轉(zhuǎn)到另外一個(gè)鏈接，這個(gè)時(shí)候我們使用a元素;
? HTML <a> 元素(或稱錨(anchor)元素):
- 定義超鏈接，用于打開新的URL;
? a元素有兩個(gè)常見的屬性:
- href:Hypertext Reference的簡(jiǎn)稱
? 指定要打開的URL地址;
? 也可以是一個(gè)本地地址;
- target:該屬性指定在何處顯示鏈接的資源。
? _self:默認(rèn)值，在當(dāng)前窗口打開URL;
? _blank:在一個(gè)新的窗口中打開URL;
? 其他不常用;
a元素 - 錨點(diǎn) 鏈接
? 錨點(diǎn)鏈接可以實(shí)現(xiàn):跳轉(zhuǎn)到網(wǎng)頁中的具體位置
? 錨點(diǎn) 鏈接有兩個(gè)重要步驟:
在要跳到的元素上定義一個(gè)id屬性;
定義a元素，并且a元素的href指向?qū)?yīng)的id;
a元素 - 圖片鏈接
? 在很多網(wǎng)站我們會(huì)發(fā)現(xiàn)圖片也是可以點(diǎn)擊進(jìn)行跳轉(zhuǎn)的
- img元素跟a元素一起使用，可以實(shí)現(xiàn)圖片鏈接;
? 實(shí)現(xiàn)思路:
a元素中不存放文字，而是存放一個(gè)img元素;
也就是img元素是a元素的內(nèi)容;
a元素 – 其他 URL 地址
? a元素一定是用來跳轉(zhuǎn)到新網(wǎng)頁的么?
iframe元素
? 利用iframe元素可以實(shí)現(xiàn):在一個(gè)HTML文檔中嵌入其他HTML文檔
? frameborder屬性
- 用于規(guī)定是否顯示邊框
? 1:顯示
? 0:不顯示
? a元素target的其他值:
- _parent:在父窗口中打開URL
- _top:在頂層窗口中打開URL
div元素、span元素的歷史
? 在HTML中有兩個(gè)特殊的元素div元素、span元素:
div元素:division，分開、分配的意思;
span元素:跨域、涵蓋的意思;
? 這兩個(gè)元素有什么作用呢?無所用、無所不用。
? 產(chǎn)生的歷史:
網(wǎng)頁的發(fā)展早期是沒有css，這個(gè)時(shí)候我們必須通過語義化元素來告知瀏覽器一段文字如何顯示;
后來出現(xiàn)了css，結(jié)構(gòu)和樣式需要分離，這個(gè)時(shí)候html只需要負(fù)責(zé)結(jié)構(gòu)即可;
比如h1元素可以是一段普通的文本+CSS修飾樣式;
這個(gè)時(shí)候就出現(xiàn)了div、span來編寫HTML結(jié)構(gòu)所有的結(jié)構(gòu)，樣式都交給css來處理;
? 所以，理論上來說:
我們的頁面可以沒有div、span;
我們的頁面也可以全部都是div、span;
div元素、span元素的區(qū)別
? 這個(gè)時(shí)候有一個(gè)問題:我出現(xiàn)一個(gè)不就可以了嗎?
? div元素和span元素都是“純粹的” 容器，也可以把他們理解成“盒子”，它們都是用來包裹內(nèi)容的;
- div元素:多個(gè)div元素包裹的內(nèi)容會(huì)在不同的行顯示;
? 一般作為其他元素的父容器，把其他元素包住，代表一個(gè)整體
? 用于把網(wǎng)頁分割為多個(gè)獨(dú)立的部分
- span元素:多個(gè)span元素包裹的內(nèi)容會(huì)在同一行顯示; ? 默認(rèn)情況下，跟普通文本幾乎沒差別 ? 用于區(qū)分特殊文本和普通文本，比如用來顯示一些關(guān)鍵字
不常用元素
? strong元素:內(nèi)容加粗、強(qiáng)調(diào);
通常加粗會(huì)使用css樣式來完成;
開發(fā)中很偶爾會(huì)使用一下;
? i元素:內(nèi)容傾斜;
通常斜體會(huì)使用css樣式來完成;
開發(fā)中偶爾會(huì)用它來做字體圖標(biāo)(因?yàn)榭雌饋硐袷莍con的縮寫);
? code元素:用于顯示代碼
- 偶爾會(huì)使用用來顯示等寬字體;
? br 元素:換行元素
- 開發(fā)中已經(jīng)不使用;
? 更多元素詳解，查看MDN文檔:
HTML全局屬性
? 我們發(fā)現(xiàn)某些屬性只能設(shè)置在特定的元素中:
- 比如img元素的src、a元素的href;
? 也有一些屬性是所有HTML都可以設(shè)置和擁有的，這樣的屬性我們稱之為 “全局屬性(Global Attributes)”
? 常見的全局屬性如下:
id:定義唯一標(biāo)識(shí)符(ID)，該標(biāo)識(shí)符在整個(gè)文檔中必須是唯一的。其目的是在鏈接(使用片段標(biāo)識(shí)符)，腳本或樣 式(使用 CSS)時(shí)標(biāo)識(shí)元素。
class:一個(gè)以空格分隔的元素的類名(classes )列表，它允許 CSS 和 Javascript 通過類選擇器或者DOM方法來選 擇和訪問特定的元素;
style:給元素添加內(nèi)聯(lián)樣式;
title:包含表示與其所屬元素相關(guān)信息的文本。 這些信息通?？梢宰鳛樘崾境尸F(xiàn)給用戶，但不是必須的。
字符實(shí)體
? 思考:我們編寫的HTML代碼會(huì)被瀏覽器解析。
? 如下代碼是如何被解析的呢?
如果你使用小于號(hào)(<)，瀏覽器會(huì)將其后的文本解析為一個(gè)tag。
但是某些情況下，我們確實(shí)需要編寫一個(gè)小于號(hào)(<);
這個(gè)時(shí)候我們就可以使用字符實(shí)體;
?HTML 實(shí)體是一段以連字號(hào)(&)開頭、以分號(hào)(;)結(jié)尾的文本(字符串):
實(shí)體常常用于顯示保留字符(這些字符會(huì)被解析為 HTML 代碼)和不可見的字符(如“不換行空格”);
你也可以用實(shí)體來代替其他難以用標(biāo)準(zhǔn)鍵盤鍵入的字符;
常見的字符實(shí)體
認(rèn)識(shí) URL
?URL 代表著是統(tǒng)一資源定位符(Uniform Resource Locator)
?通俗點(diǎn)說:URL 無非就是一個(gè)給定的獨(dú)特資源在 Web 上的地址。
理論上說，每個(gè)有效的 URL 都指向一個(gè)唯一的資源;
這個(gè)資源可以是一個(gè) HTML 頁面，一個(gè) CSS 文檔，一幅圖像，等等;
URL 的格式
? URL的標(biāo)準(zhǔn)格式如下:
和 URI 的區(qū)別
? 和 URI 的區(qū)別:
URI = Uniform Resource Identifier 統(tǒng)一資源標(biāo)志符，用于標(biāo)識(shí) Web 技術(shù)使用的邏輯或物理資源;
URL = Uniform Resource Locator 統(tǒng)一資源定位符，俗稱網(wǎng)絡(luò)地址，相當(dāng)于網(wǎng)絡(luò)中的門牌號(hào);
? URI 在某一個(gè)規(guī)則下能把一個(gè)資源獨(dú)一無二的識(shí)別出來。
URL作為一個(gè)網(wǎng)絡(luò)Web資源的地址，可以唯一將一個(gè)資源識(shí)別出來，所以URL是一個(gè)URI;
所以URL是URI的一個(gè)子集;
但是URI并不一定是URL
?locators are also identifiers, so every URL is also a URI, but there are URIs which are not URLs.
元素的語義化
? 元素的語義化:用正確的元素做正確的事情。
? 理論上來說，所有的HTML元素，我們都能實(shí)現(xiàn)相同的事情:
? 標(biāo)簽語義化的好處
方便代碼維護(hù);
減少讓開發(fā)者之間的溝通成本;
能讓語音合成工具正確識(shí)別網(wǎng)頁元素的用途，以便作出正確的反應(yīng);
有利于SEO;
......
什么是 SEO ?
? 搜索引擎優(yōu)化(英語:search engine optimization，縮寫為SEO)是通過了解搜索引擎的運(yùn)作規(guī)則來調(diào)整網(wǎng)站，以及提高網(wǎng)站 在有關(guān)搜索引擎內(nèi)排名的方式。
? 蛋糕網(wǎng)站為例
? 在后續(xù)我們?cè)倭私釹PA以及SSR相關(guān)的概念
它們也有SEO、首屏渲染速度有關(guān);
到時(shí)候會(huì)具體補(bǔ)充;
認(rèn)識(shí)字符編碼
? 計(jì)算機(jī)是干什么的?
計(jì)算機(jī)一開始發(fā)明出來時(shí)是用來解決數(shù)字計(jì)算問題的，后來人們發(fā)現(xiàn)，計(jì)算機(jī)還可以做更多的事，例如文本處理。
但計(jì)算機(jī)其實(shí)挺笨的，它只“認(rèn)識(shí)”010110111000...這樣由0和1兩個(gè)數(shù)字組成的二進(jìn)制數(shù)字;
這是因?yàn)橛?jì)算機(jī)的底層硬件實(shí)現(xiàn)就是用電路的開和閉兩種狀態(tài)來表示0和1兩個(gè)數(shù)字的。
因此，計(jì)算機(jī)只可以直接存儲(chǔ)和處理二進(jìn)制數(shù)字。
? 為了在計(jì)算機(jī)上也能表示、存儲(chǔ)和處理像文字、符號(hào)等等之類的字符，就必須將這些字符轉(zhuǎn)換成二進(jìn)制數(shù)字。
- 當(dāng)然，肯定不是我們想怎么轉(zhuǎn)換就怎么轉(zhuǎn)換，否則就會(huì)造成同一段二進(jìn)制數(shù)字在不同計(jì)算機(jī)上顯示出來的字符不一樣的情況， 因此必須得定一個(gè)統(tǒng)一的、標(biāo)準(zhǔn)的轉(zhuǎn)換規(guī)則
? 字符編碼的發(fā)展歷史可以閱讀簡(jiǎn)書文章:http://www.itdecent.cn/p/899e749be47c
