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