!DOCTYPE html

功能是：告知瀏覽以哪個(gè)版本來(lái)解析HTML的元素

注：必須放在第一行

DOCTYPE 文檔聲明定義

document 文檔

type 類(lèi)型

charset

utf-8



字符編碼集



告訴瀏覽器用哪一個(gè)版本來(lái)解析文本（包括標(biāo)點(diǎn)符號(hào)，文字）



viewport

視口（可視窗口）



title

標(biāo)簽頁(yè)標(biāo)題



HTML元素的組成部分

元素：起始標(biāo)記、內(nèi)容和結(jié)束標(biāo)記



某些元素的起始標(biāo)記內(nèi)有屬性



屬性：屬性名和屬性值



例如:



<a href="/classroom/17">班級(jí)</a>

1

起始標(biāo)記：



結(jié)束標(biāo)記：



內(nèi)容：班級(jí)



屬性：href="/classroom/17"



屬性名：href



屬性值："/classroom/17"



空元素

類(lèi)似img元素



<img src="" alt="">

1

沒(méi)有元素內(nèi)容和結(jié)束標(biāo)記，稱(chēng)之為：空元素、自閉合元素



亂序銘文

功能：批量生成文本

書(shū)寫(xiě)格式：lorem數(shù)量（單詞個(gè)數(shù)）

p標(biāo)簽

p標(biāo)簽不能包含（嵌套）p標(biāo)簽，也不能包含標(biāo)題、div，語(yǔ)義化標(biāo)簽



解析

將我們寫(xiě)出的代碼，轉(zhuǎn)換成計(jì)算機(jī)可以看懂的語(yǔ)言



渲染

再將解析好的語(yǔ)言，通過(guò)瀏覽器渲染展示出來(lái)，給用戶(hù)看。



HTML

是用于定義文檔的結(jié)構(gòu)內(nèi)容（標(biāo)題、圖片等）

HTML英文全稱(chēng)：Hyper Text Markup Language

中文全稱(chēng)：超文本標(biāo)記語(yǔ)言

CSS

用于定義HTML文檔的樣式（外觀(guān)）

CSS英文全稱(chēng)：Cascading Style Sheets

中文全稱(chēng)：層疊樣式表

語(yǔ)義化結(jié)構(gòu)

header 頁(yè)面的頭部或者某個(gè)區(qū)域的頭部，一個(gè)頁(yè)面可以使用多個(gè)header元素

nav 表示導(dǎo)航欄

article 代表文檔、頁(yè)面或其他可獨(dú)立部分，常用于定義一篇日志、一條新聞或用戶(hù)評(píng)論。

aside 用于表示當(dāng)前頁(yè)面或文章相關(guān)的附屬信息，可包含該頁(yè)面或內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導(dǎo)航條等

section 用于表示一個(gè)整體的一部分主題

footer 用于表示頁(yè)面或者某個(gè)區(qū)域的腳注，可以包含所有放在頁(yè)面底部的內(nèi)容

div與語(yǔ)義化結(jié)構(gòu)的區(qū)別

div與語(yǔ)義化結(jié)構(gòu)標(biāo)簽的功能是一樣的，但是使用語(yǔ)義化結(jié)構(gòu)標(biāo)簽可以讓頁(yè)面結(jié)構(gòu)更加清晰。



a標(biāo)簽

元素書(shū)寫(xiě)格式

<a href="目標(biāo)">內(nèi)容</a>

1

href屬性

頁(yè)面地址（路徑）



多個(gè)頁(yè)面中相互跳轉(zhuǎn)



錨點(diǎn)



可以在同一個(gè)頁(yè)面之間，相互跳轉(zhuǎn)



先將要跳轉(zhuǎn)的位置加上id屬性



<h1 id="title2">標(biāo)題二</h1>

1

將#+屬性名



<a href="#title2">跳轉(zhuǎn)到標(biāo)題二</a>

1

功能鏈接



打電話(huà)



<a href="tel：12345678910">給我打電話(huà)</a>

1

發(fā)郵件



<a href="mailto：123456789@163.com">給我發(fā)郵件</a>

1

返回頂部

<a href="#">返回頂部</a>

1

a標(biāo)簽的打開(kāi)方式

書(shū)寫(xiě)方式：



<a target="_blank" href="目標(biāo)"></a>

1

屬性 target



屬性值



_blank 新頁(yè)面打開(kāi)



_self 當(dāng)前頁(yè)面打開(kāi)（默認(rèn)值）



link外部引用的好處

批量修改

復(fù)用

絕對(duì)路徑和相對(duì)路徑

絕對(duì)路徑

從根目錄開(kāi)始寫(xiě)，寫(xiě)到要找文件的位置



當(dāng)網(wǎng)站部署到服務(wù)器后，網(wǎng)站中的所有資源都可以通過(guò)一個(gè)地址（路徑）訪(fǎng)問(wèn)



書(shū)寫(xiě)格式：協(xié)議：//域名/目錄



使用場(chǎng)景：



訪(fǎng)問(wèn)站外資源時(shí)，只能使用絕對(duì)路徑



訪(fǎng)問(wèn)站內(nèi)資源時(shí)，若網(wǎng)站已部署到服務(wù)器，可以使用絕對(duì)路徑，并可以省略協(xié)議和域名。推薦使用相對(duì)路徑



相對(duì)路徑

相對(duì)路徑是相對(duì)于當(dāng)前資源的位置，只能用于訪(fǎng)問(wèn)站內(nèi)資源



相對(duì)路徑的書(shū)寫(xiě)格式為：./路徑



./ 表示當(dāng)前資源所在的目錄，必須作為相對(duì)路徑的開(kāi)始，可省略

…/ 表示返回上一級(jí)目錄 （…/…/可以返回上兩級(jí)目錄，寫(xiě)幾次就可以返回幾次

轉(zhuǎn)自：csdn 作者：小王小王 輔助在行

藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)