2021-3-22 前端達(dá)人
!DOCTYPE html
功能是：告知瀏覽以哪個(gè)版本來解析HTML的元素
注：必須放在第一行
DOCTYPE 文檔聲明定義
document 文檔
type 類型
charset
utf-8
字符編碼集
告訴瀏覽器用哪一個(gè)版本來解析文本（包括標(biāo)點(diǎn)符號，文字）
viewport
視口（可視窗口）
title
標(biāo)簽頁標(biāo)題
HTML元素的組成部分
元素：起始標(biāo)記、內(nèi)容和結(jié)束標(biāo)記
某些元素的起始標(biāo)記內(nèi)有屬性
屬性：屬性名和屬性值
例如:
<a href="/classroom/17">班級</a>
1
起始標(biāo)記：
結(jié)束標(biāo)記：
內(nèi)容：班級
屬性：href="/classroom/17"
屬性名：href
屬性值："/classroom/17"
空元素
類似img元素
<img src="" alt="">
1
沒有元素內(nèi)容和結(jié)束標(biāo)記，稱之為：空元素、自閉合元素
亂序銘文
功能：批量生成文本
書寫格式：lorem數(shù)量（單詞個(gè)數(shù)）
p標(biāo)簽
p標(biāo)簽不能包含（嵌套）p標(biāo)簽，也不能包含標(biāo)題、div，語義化標(biāo)簽
解析
將我們寫出的代碼，轉(zhuǎn)換成計(jì)算機(jī)可以看懂的語言
渲染
再將解析好的語言，通過瀏覽器渲染展示出來，給用戶看。
HTML
是用于定義文檔的結(jié)構(gòu)內(nèi)容（標(biāo)題、圖片等）
HTML英文全稱：Hyper Text Markup Language
中文全稱：超文本標(biāo)記語言
CSS
用于定義HTML文檔的樣式（外觀）
CSS英文全稱：Cascading Style Sheets
中文全稱：層疊樣式表
語義化結(jié)構(gòu)
header 頁面的頭部或者某個(gè)區(qū)域的頭部，一個(gè)頁面可以使用多個(gè)header元素
nav 表示導(dǎo)航欄
article 代表文檔、頁面或其他可獨(dú)立部分，常用于定義一篇日志、一條新聞或用戶評論。
aside 用于表示當(dāng)前頁面或文章相關(guān)的附屬信息，可包含該頁面或內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導(dǎo)航條等
section 用于表示一個(gè)整體的一部分主題
footer 用于表示頁面或者某個(gè)區(qū)域的腳注，可以包含所有放在頁面底部的內(nèi)容
div與語義化結(jié)構(gòu)的區(qū)別
div與語義化結(jié)構(gòu)標(biāo)簽的功能是一樣的，但是使用語義化結(jié)構(gòu)標(biāo)簽可以讓頁面結(jié)構(gòu)更加清晰。
a標(biāo)簽
元素書寫格式
<a href="目標(biāo)">內(nèi)容</a>
1
href屬性
頁面地址（路徑）
多個(gè)頁面中相互跳轉(zhuǎn)
錨點(diǎn)
可以在同一個(gè)頁面之間，相互跳轉(zhuǎn)
先將要跳轉(zhuǎn)的位置加上id屬性
<h1 id="title2">標(biāo)題二</h1>
1
將#+屬性名
<a href="#title2">跳轉(zhuǎn)到標(biāo)題二</a>
1
功能鏈接
打電話
<a href="tel：12345678910">給我打電話</a>
1
發(fā)郵件
<a href="mailto：123456789@163.com">給我發(fā)郵件</a>
1
返回頂部
<a href="#">返回頂部</a>
1
a標(biāo)簽的打開方式
書寫方式：
<a target="_blank" href="目標(biāo)"></a>
1
屬性 target
屬性值
_blank 新頁面打開
_self 當(dāng)前頁面打開（默認(rèn)值）
link外部引用的好處
批量修改
復(fù)用
絕對路徑和相對路徑
絕對路徑
從根目錄開始寫，寫到要找文件的位置
當(dāng)網(wǎng)站部署到服務(wù)器后，網(wǎng)站中的所有資源都可以通過一個(gè)地址（路徑）訪問
書寫格式：協(xié)議：//域名/目錄
使用場景：
訪問站外資源時(shí)，只能使用絕對路徑
訪問站內(nèi)資源時(shí)，若網(wǎng)站已部署到服務(wù)器，可以使用絕對路徑，并可以省略協(xié)議和域名。推薦使用相對路徑
相對路徑
相對路徑是相對于當(dāng)前資源的位置，只能用于訪問站內(nèi)資源
相對路徑的書寫格式為：./路徑
./ 表示當(dāng)前資源所在的目錄，必須作為相對路徑的開始，可省略
…/ 表示返回上一級目錄 （…/…/可以返回上兩級目錄，寫幾次就可以返回幾次
轉(zhuǎn)自：csdn 作者：小王小王 輔助在行
藍(lán)藍(lán)設(shè)計(jì)( m.wtxcl.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.wtxcl.cn