Web前端（簡化總結）筆記
eb前端-HTML
- HTML作用： 負責搭建頁面結構和內容 （蓋房子）
- 學習HTML主要學習的就是有哪些標簽
文本相關標簽
- h1-h6 文本標題, 特點: 獨占一行, 自帶上下間距, 字體加粗
- p 段落標簽, 特點: 獨占一行,自帶上下間距
- hr 水平分割線
- br 換行
- b 加粗
- i 斜體
- u 下劃線
- s 刪除線
列表標簽
- 無序列表: ul和li 組合 unordered list list item 列表項
- 有序列表: ol和li 組合 ordered list
- 列表嵌套: 有序列表和無序列表可以任意無限嵌套 .
圖片標簽img
- 圖片和頁面在同級目錄: 直接寫圖片名
- 圖片在頁面的上級目錄: ../圖片名
- 圖片在頁面的下級目錄: 文件夾名/圖片名
- 絕對路徑: 訪問站外資源, 圖片盜鏈, 有找不到圖片的風險
- alt: 圖片不能正常顯示時顯示的文本
- title: 圖片標題
- width/height: 設置寬高 , 只設置寬度時高度會自動等比例縮放①像素②上級元素百分比
超鏈接a
- href: 資源路徑, 作用類似圖片標簽的src
- a標簽包裹文本為文本超鏈接, 包裹圖片為圖片超鏈接
- 頁面內部跳轉, 在目的地的元素里面添加id=xxx 然后在超鏈接里面添加href="#xxx"
表格table
- 相關標簽: table tr表示行 td表示列 th表頭 caption標題
- 相關屬性: border邊框 colspan跨列 rowspan跨行
表單form
- 作用: 獲取用戶輸入的各種信息 并提交給服務器
- 學習form表單主要學習的就是有哪些控件
分區標簽
- 作用: 可以理解為是一個容器,將多個有相關性的標簽進行統一管理
- 塊級分區標簽div: 特點是獨占一行
- 行內分區標簽span: 特點是共占一行
- 頁面區域如何劃分? 至少分為三大區(頭,體,腳) 每個大的區域再劃分n個小的區域
- HTML5的標準中新增了一些語義更強的分區標簽,為了提高代碼的可讀性. 這幾個標簽的作用和div一樣都是塊級分區標簽
- header頭
- footer腳
- main主體
- section區域
- nav 導航
CSS 層疊樣式表
- Cascading Style Sheet
- 作用: 美化頁面(裝修)
如何在HTML頁面中添加CSS樣式代碼
- 內聯樣式: 在標簽的style屬性中添加樣式代碼, 弊端:不能復用
- 內部樣式: 在head標簽里面添加一個style標簽, 在標簽體內寫樣式代碼, 可以實現復用但是只能本頁面復用
- 外部樣式: 在單獨的css樣式文件中寫樣式代碼, 在html頁面中通過link標簽引入, 可以實現多頁面復用, 可以將html代碼和css樣式代碼分離
選擇器
- 作用: 通過選擇器找到頁面中的元素之后再添加樣式
- 1.標簽名選擇器: 選取頁面中所有同名標簽 格式: 標簽名{樣式代碼}
- 2.id選擇器: 當需要選擇頁面中某一個元素時使用 格式: #id{樣式代碼}
- 3.類選擇器: 當需要選擇多個不相關的元素時,給多個元素添加相同的class屬性,然后通過類選擇器進行選擇 格式: .class{樣式代碼}
- 4.分組選擇器: 分組選擇器可以將多個選擇器合并成一個 格式: h4,#id,.class{樣式代碼}
- 5.屬性選擇器: 通過元素的屬性選擇元素 格式: 標簽名[屬性名="屬性值"]{樣式代碼}
- 6.任意元素選擇器: 選擇頁面中所有標簽 格式: *{樣式代碼}
復制整行快捷鍵 ctrl+D
注釋快捷鍵 ctrl+shift+/
快速進入下一行 shift+回車
選擇器續
- 1.子孫后代選擇器: 通過元素之間的層級關系選擇元素 格式: body div div p{樣式代碼} 匹配body里面的div里面的div里面的所有p標簽(包括后代)
- 2.子元素選擇器: 通過元素之間的層級關系選擇元素 格式: body>div>div>p{樣式代碼} 匹配body里面的div里面的div里面的所有p子元素(不包含后代)
- 3.偽類選擇器: 選擇的是元素的狀態, 元素有哪些狀態? 包括:未訪問狀態,訪問過狀態,懸停狀態,點擊狀態 格式: a:link/visited/hover/active:{樣式代碼}
顏色賦值
三原色: 紅綠藍 ,red green blue rgb ,每個顏色的取值范圍0-255
顏色賦值的幾種方式:
- 顏色單詞: 常見顏色單詞都可以使用
- 6位16進制賦值: #ff0000
- 3位16進制賦值: #f00
- 3位10進制賦值: rgb(255,0,0)
- 4位10進制賦值: rgba(255,0,0,0-1) a=alpha代表透明度
背景圖片
- background-image:url("路徑") 設置背景圖片
- background-size:100px 200px 設置背景圖片尺寸
- background-repeat:no-repeat; 禁止重復
- background-position: 橫向 縱向; 設置背景圖片的位置,兩種方式: 1像素 2百分比
文本和字體相關樣式
- text-align:left/right/center; 文本水平對齊方式
- line-height:20px; 設置行高, 多行文本時可以控制行間距, 單行文本時可以控制垂直居中(因為文本默認是在當前所在行內居中)
- text-decoration:overline上劃線/underline下劃線/line-through刪除線/none去掉文本修飾
- text-shadow:顏色 x偏移值 y偏移值 濃度; 陰影
- font-size:20px; 設置字體大小
- font-weight:bold加粗/normal去掉加粗
- font-style:italic; 設置斜體
- font-family: xxx,xxx,xxx; 設置字體
- font:20px xxx,xxx,xxx; 這只字體大小+字體
元素的顯示方式display
- block: 塊級元素的默認值, 特點: 獨占一行 可以修改寬高, 包括: h1-h6 , p, div
- inline: 行內元素的默認值, 特點: 共占一行 不可以修改寬高, 包括: span, b,i,s,u,超鏈接a
- inline-block:行內塊元素默認值, 特點: 共占一行 并且可以修改寬高, 包括: img,input
- none: 隱藏元素
- 行內元素不能直接修改寬高, 如必須修改則先將元素的顯示方式改成block或inline-block
盒子模型
- 盒子模型用來控制元素的顯示效果包括: 元素內容content+外邊距margin+邊框border+內邊距padding
- 元素內容content:控制元素的顯示尺寸
- 外邊距margin:控制元素的顯示位置
- 邊框border:控制邊框效果
- 內邊距padding:控制元素內容的位置
盒子模型之內容content
- 包括:width和height
- 賦值方式有兩種:①像素②上級元素的百分比
- 行內元素不能直接修改寬高
盒子模型之外邊距margin
- margin-left/right/top/bottom:10px; 單獨某個方向賦值
- margin:10px; 四個方向賦值
- margin:10px 20px; 上下10 左右20
- margin:10px 20px 30px 40px; 上右下左 順時針賦值
- 行內元素上下外邊距無效
- 上下相鄰彼此添加外邊距 取最大值
- 左右相鄰彼此添加外邊距 兩者相加
- 粘連問題: 當元素的上邊緣和上級元素的上邊緣重疊時,給元素添加上外邊距會出現粘連問題,給上級元素添加overflow:hidden解決
盒子模型之邊框border
- border:1px solid red; 給四個方向添加邊框
- border-left/right/top/bottom:1px solid red; 單獨給某個方向添加邊框
- border-radius:10px; 值越大越圓 當值超過寬高的一半時為正圓(前提是正方形)
盒子模型之內邊距padding
- 作用: 控制元素內容的位置
- 賦值方式: 和外邊距類似
- padding-left/right/top/bottom:10px; 單獨某個方向賦值
- padding:10px; 四個方向賦值
- padding:10px 20px; 上下和 左右賦值
- padding:10px 20px 30px 40px; 上右下左順時針賦值
CSS的三大特性
- 繼承: 元素可以繼承上級元素文本和字體相關的樣式,部分標簽自帶的效果不受繼承影響, 比如超鏈接字體顏色
- 層疊:多個選擇器可能選擇到同一個元素,如果添加的樣式不同則全部層疊有效,如果作用的樣式相同 則由優先級決定哪個生效
- 優先級: 指CSS中的選擇器具有優先級, 作用范圍越小優先級越高, !important>id>class>標簽名>繼承(屬于間接選中)
元素的定位方式
- 靜態定位: position:static;
- 相對定位: position:relative;
- 絕對定位:
- 固定定位: position: fixed;
- 浮動定位: float:left/right
靜態定位(文檔流定位)
- 格式: position:static; (默認的定位方式)
- 特點: 元素以左上為基準, 塊級元素從上往下排列,行內元素從左向右依次排列, 默認情況下 無法實現元素的層疊效果
- 如何控制元素的位置? 通過外邊距控制元素的位置
相對定位
- 格式: position:relative;
- 特點: 元素不脫離文檔流(仍然占著原來的位置) ,可以實現元素的層疊效果
- 如何控制元素的位置? 通過left/right/top/bottom 控制元素的顯示位置,參照物是初始位置
- 應用場景: 當希望移動某一個元素其它元素不受影響時使用相對定位, 相對定位可以實現元素的層疊
絕對定位
- 格式:
- 特點: 元素脫離文檔流(不占原來的位置),可以實現元素層疊
- 如何控制元素的位置? 通過left/right/top/bottom控制位置,參照物為窗口(默認)或某一個上級元素(需要在上級元素中添加position:relative作為參照物)
- 應用場景: 當需要往頁面中添加一個元素并且不影響其它元素的顯示位置,并且可以實現層疊效果
固定定位
- 格式: position:fixed;
- 特點: 脫離文檔流
- 如何控制元素的位置? 通過left/right/top/bottom相對于窗口做偏移
- 應用場景: 當需要將元素固定在窗口的某個位置時使用
浮動定位
- 格式: float:left/right;
- 特點: 脫離文檔流, 元素從當前所在行向左或向右浮動,當撞到上級元素邊緣或其它浮動元素時停止.
- 浮動元素一行裝不下時會自動折行, 折行時有可能被卡住
- 當元素的所有子元素全部浮動時,自動識別的高度會為0,后面元素會頂上來導致顯示異常,通過給元素添加overflow:hidden可以解決此問題
- 應用場景: 當需要將縱向排列的元素改成橫向排列時使用.
溢出設置overflow
- visible超出部分顯示(默認)
- hidden超出部分隱藏
- scroll 超出部分滾動顯示
行內元素垂直對齊方式vertical-align
- top 上對齊
- middle中間對齊
- bottom下對齊
- baseline基線對齊(默認)
元素的顯示層級z-index
當兩個元素非靜態定位時可能存在層疊的問題 通過z-index樣式控制顯示層級, 值越大顯示越靠前
JavaScript
- 屬于腳本語言(不需要編譯直接由瀏覽器解析執行)
- 基于面向對象
- 屬于弱類型語言
- 安全性強: JS語言只能訪問瀏覽器內部的數據,瀏覽器以外電腦上的數據禁止訪問.
- 交互性強: 因為JS語言是嵌入到html頁面中最終執行在客戶端的語言 可以和用戶直接進行交互, 而像Java語言是運行在服務器的語言和用戶交互需要借助于網絡,所有交互性JS語言會更強一些
如何在HTML頁面中添加JS語言
- 三種引入方式:
- 內聯: 在標簽的事件屬性中添加js代碼,當事件觸發時執行.
- 事件: 是系統提供的一系列時間點.
- 點擊事件: 當點擊元素時觸發的時間點
- 內部: 在html頁面中的任意位置(推薦寫在/body上面)添加script標簽,標簽體內寫js代碼
- 外部: 在單獨的js文件中寫js代碼, 然后在html頁面中通過script標簽的src屬性引入到html頁面
變量, 數據類型,運算符,各種語句,方法,面向對象
變量
- JS屬于弱類型語言
- let和var關鍵字的區別, 作用域有區別
- 使用let聲明的變量,作用域和Java語言的作用域類似
- 使用var聲明的變量,不管在什么位置聲明 都相當于是一個全局變量
數據類型
- JavaScript中只有對象類型
- 常見的對象類型包括:
- 字符串: string 可以用單引號或雙引號修飾
- 數值: number 相當于Java中所有數值類型的總和
- 布爾值: boolean true和false
- 未定義: undefined 當變量只聲明不賦值時屬于未定義
運算符
- 算數運算符: + - * / % , JS中的除法會根據結果自動轉換整數或小數
- 關系運算符: > < >=<=!===和===
- ==: 先統一兩個變量的類型 再比較值 "666"==666 true
- ===:先比較類型,類型相同后再比較值 "666"===666 false
- 邏輯運算符: && || !
- 賦值運算符:=+=-=*=/=%=++ --
- 三目運算符: 條件?值1:值2
各種語句:
- if else
- for
- while
- do while
- switch case
方法
- java: public 返回值類型 方法名(參數列表){方法體}
- JS: function 方法名(參數列表){方法體}
- 常見的四種方法:
- 無參無返回值
- 有參無返回值
- 無參有返回值
- 有參有返回值
- function 方法名(參數列表){方法體}
- let 方法名=function (參數列表){方法體}
- let 方法名=new Function("參數1","參數2","方法體");
和頁面相關的方法
let 元素對象=document.querySelector("選擇器")
- 元素對象.innerText="xxx"; 修改文本內容
- 元素對象.innerText 獲取文本內容
- 控件對象.value="xxx"; 修改
- 控件對象.value 獲取
NaN
- Not a Number: 不是一個數
- isNaN(x) 判斷變量是否是NaN
JavaScript對象分類
- 內置對象:包括string,number,boolean等
- BOM: Browser Object Model, 瀏覽器對象模型, 包括和瀏覽器相關的內容
- DOM: Document Object Model, 文檔對象模型,包括和頁面標簽相關的內容
BOM瀏覽器對象模型
- window: 此對象里面的屬性和方法稱為全局的屬性和方法,訪問時可以省略掉window.
- window中常見的方法:
- alert("xxx")彈出提示框
- confirm("xxx") 彈出確認框
- prompt("xxx") 彈出文本框
- isNaN(x) 判斷變量是否是NaN
- parseInt()和parseFloat() 把字符串轉成整數或小數
- console.log() 控制臺輸出
- let timer=setInterval(方法,時間間隔) 開啟定時器
- clearInterval(timer) 停止定時器
- setTimeout(方法,時間間隔) 開啟只執行一次的定時器
- location.href 獲取和修改瀏覽器的請求地址
- location.reload() 刷新頁面
- history.length 獲取歷史頁面數量
- history.back() 返回上一頁面
- history.forward() 前往下一頁面
- history.go(n) n=1是前往下1頁面 n=-1 返回上一頁面 n=2 前往下2個頁面 n=0代表刷新
DOM文檔對象模型
let 元素對象=document.querySelector("選擇器")
- 元素對象.innerText="xxx"; 修改文本內容
- 元素對象.innerText 獲取文本內容
- 控件對象.value="xxx"; 修改
- 控件對象.value 獲取
let 元素對象=document.createElement("標簽名");
- document.body.appendChild(元素對象);
- 父元素.appendChild(元素對象);
- 父元素.append(元素對象,元素對象,元素對象);
前端MVC設計模式
- MVC設計模式,其實就是將前端實現某個業務的所有代碼劃分為三部分
- Model: 模型, 指數據模型,這個數據一般來自于服務器
- View: 視圖, 指頁面標簽內容
- Controller:控制器, 指將數據展示到視圖中的過程代碼
- 前端MVC設計模式弊端: 需要在Controller控制器部分頻繁進行DOM(遍歷查找元素的代碼)操作, 會影響執行效率.
M,V,VM設計模式
- Model: 模型, 指數據模型,這個數據一般來自于服務器
- View: 視圖, 指頁面標簽內容
- ViewModel:視圖模型, 將頁面中可能發生改變的元素和某個變量在內存中進行綁定,當變量的值發生改變時會從內存中直接找到對應的元素讓其改變.
Vue
- Vue框架是目前最流行的前端框架
- Vue對象相當于MVVM設計模式中的VM, 負責將頁面中可能發生改變的元素和變量進行綁定, 綁定完之后會不斷監聽變量的改變, 當變量的值發生改變時會自動找到對應的元素并改變其顯示內容.
- 相關指令:
- {{變量}}:插值, 讓此處的文本內容和變量進行綁定
- v-text="變量", 讓元素的文本內容和變量進行綁定
- v-html="變量", 讓元素的html內容和變量進行綁定
- v-bind:屬性名="變量", 讓元素的xxx屬性和變量進行綁定 可以省略掉v-bind
- v-model="變量", 雙向綁定, 當變量的值發生改變頁面會跟著改變, 頁面的內容改變時變量也會跟著改變,只有使用form表單中的控件時才會涉及到雙向綁定.
- v-on:事件名="方法", 事件綁定 簡寫@事件名="方法" , 調用的方法必須聲明在Vue里面的methods里面
Vue指令(續)
- v-for="(變量,i) in 數組"; 遍歷數組 同時重復生成當前標簽,數量和數組中對象的數量一致
- v-if="變量" , 變量值為true時顯示元素 ,為false時 刪除元素
- v-else 和v-if結合使用 取反
- v-show="變量" , 變量值為true時顯示元素 ,為false時 隱藏元素(需要頻繁切換顯示狀態時使用)
ElementUI
- 官網地址: https://element.eleme.cn
筆記保留，如有侵權請聯系刪除
篇文章介紹了<!--...--> 注釋標簽，我個人感覺很容易理解，在日常編碼中，大多數編輯器都有注釋標簽的快捷鍵，如sublime或VS code里在html代碼里，選中想要注釋掉的代碼后，直接按ctrl+/即可。幾乎不用手動輸入了。還是很方便的。
這篇我寫<!DOCTYPE>標簽，說起來這個標簽，很常見，因為它會出現在每一個httml文檔的最開頭，然而，我們很少去重視它，為什么呢？
說到這個標簽，我不得不說起html的版本歷史了。
在大約10年前吧，html5應用還不如今天這么廣泛吧，于是當時的文檔類型聲明如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
很長，也很難記，由于我入行晚，懂得這玩意就只是一個聲明了，比如strict表示嚴格模式。其他的我也不想知道了。
當然html版本的規范從4到5的過渡經歷了太多年，因為要考慮老瀏覽器的兼容性，再加上前期移動設備配置低，不支持較為復雜的媒體元素。于是，一些資歷深的前端開發人員，面對這么長的代碼還是有很長一段時間。
當然，9102年都快過完了，我們這邊已經不需要再考慮這些了，于是，我直接就用html5了。
然后聲明文檔給格式，就變得很簡單了。
<!DOCTYPE html>
最開始我是使用sublime生成的模板練習的，然后，犯懶，直接輸入了<html>就出來下面的代碼：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
然后就開始進行填充了。
直到今天我才注意到原來<!DOCTYPE html>是單獨的一行，與下方<html></html>是兩碼事。
所以，我重新看了下書上的強調內容：
- <!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位于 <html> 標簽之前，沒有結束標簽，對大小寫不敏感。
- <!DOCTYPE> 聲明不是 HTML 標簽；它是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。
- 在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD(文檔類型定義)，因為 HTML 4.01 基于 SGML（標準通用標記語言)）。DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。
- HTML5 不基于 SGML，所以不需要引用 DTD。
關于SGML，參見https://wiki.mbalib.com/wiki/SGML
常用的 DOCTYPE 聲明
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
該 DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
該 DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
該 DTD 等同于 HTML 4.01 Transitional，但允許框架集內容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
該 DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。必須以格式正確的 XML 來編寫標記。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
該 DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。必須以格式正確的 XML 來編寫標記。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
該 DTD 等同于 XHTML 1.0 Transitional，但允許框架集內容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
該 DTD 等同于 XHTML 1.0 Strict，但允許添加模型（例如提供對東亞語系的 ruby 支持）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
最后，雖然上方的html4和xml的文檔類型聲明這么麻煩了，但是這里沒什么知識點了，因為如今，html5應用這么普及了，我們只需在文檔開頭寫<!DOCTYPE html>即可，當然html4的嚴格模式和傳統模式大概知道就行了。
eb標準：
由于不同瀏覽器解析出來的網頁效果可能不同，所以需要通過web標準對其進行約束使其一致，主要包括三個方面：
結構標準：
結構用于對網頁元素進行整理和分類，主要指的是HTML。
表現標準：
表現用于設置網頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS。
行為標準：
行為是指網頁模型的定義及交互的編寫，主要指的是 JavaScript。
初識HTML：
html 全稱 Hyper Text Markup Language ，中文譯為：“超文本標記語言” ，描述網頁的一種語言。
HTML發展：
XHTML 是一個 W3C 標準，可擴展超文本標簽語言（EXtensible HyperText Markup Language），更嚴格更純凈的 HTML 版本，作為一種 XML 應用被重新定義的 HTML。
HTML中的注釋：
<!-- 注釋標簽：注釋的內容 -->
條件注釋：
條件注釋的作用是：定義只有Internet Explorer才執行條件注釋中的html標簽。
<!--[if IE 8]>
.... some HTML here ....
<![endif]-->
HTML骨架：
<!DOCTYPE html> <!-- 聲明文檔類型版本為html5 -->
<html lang="en"> <!-- 網頁的跟標簽,lang=""用來設置網頁語言，其值還有zh-CN中文簡體、fr法語等，設置后當系統設置語言和網頁語言發生沖突時會提示是否翻譯網頁 -->
<head> <!-- 網頁的頭部 -->
<meta charset='UTF-8'> <!-- 聲明字符編碼，其值還有gbk和gb2312 -->
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0"> <!-- 開啟移動端視口 -->
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- 開啟ios快捷啟動方式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 設置iOS頂部通欄樣式 -->
<meta name="format-detection" content="telephone=no"> <!-- 遇到數字不轉成電話號碼 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- X-UA-Compatible是針對IE瀏覽器做兼容的，ie=edge表示兼容edge，若后面ie=7，則表示兼容IE7 -->
<meta name='keywords' content='This is a key words'> <!-- 網站搜索關鍵字 -->
<meta name='description' content='this is description'> <!-- 描述網站的信息 -->
<link rel="shortcut icon" type="image/x-icon" href="圖片路徑 "/> <!-- 網站的圖標，如果圖標是gif圖，則需要改：type="image/gif"，引入網站圖標另一種方法：命名為favicon.ico文件放到網站根目錄下 -->
<link rel="stylesheet" type="text/css" href="css文件路徑"/> <!-- 引用css文件 -->
<base target="_blank"/> <!-- base標簽，定義這個網頁中a鏈接打開窗口的方式，其值還有_self -->
<title>標題</title> <!-- 網站的標題 -->
<style type="text/CSS"> /* 用來寫CSS代碼，type="text/CSS"可以省略 */
div{width:100px; height:100px; color:white;}
</style>
</head>
<body> <!-- 網頁的主體 -->
<h1>標題</h1> <!-- 標題標簽，共六個級，分別為：h1~h6,大小逐級遞減，h1在一個網頁中只允許出現一次。 -->
<p>段落</p> <!-- 段落標簽 -->
<hr/> <!-- 單線標簽,所有單標簽后面的關閉符均可以省略 -->
<br/> <!-- 換行標簽 -->
</div></div> <!-- 無語義化標簽布局用,上面的標簽是語義化標簽 -->
<span>span</span> <!-- 無語義化標簽分割用 -->
<strong>加粗</strong> <!-- 加粗標簽 -->
<b>加粗</b> <!-- 加粗標簽 -->
<i>傾斜</i> <!-- 傾斜標簽 -->
<em>傾斜</em> <!-- 傾斜標簽 -->
<s>刪除線</s> <!-- 刪除標簽 -->
<del>刪除線</del> <!-- 刪除標簽 -->
<u>下劃線</u> <!-- 下劃線標簽 -->
<ins>下劃線</ins> <!-- 下劃線標簽 -->
<img src="圖片路徑" alt="圖片無法加載，提示文字" title="鼠標懸停，提示文體" border="2"/> <!-- 圖像標簽，border是邊框屬性，width和height屬性設置圖像的寬度和高度 -->
<a href="跳轉目標" target="_self">鏈接的命名</a> <!-- 鏈接標簽，target屬性為鏈接頁面打開的方式，默認值_self為自身打開；_blank為新窗口打開；_new為新窗口打開，相同頁面只會打開一個;_top跳出框架-->
<ul> <!-- 無序列表 -->
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
</ul>
<ol type="A"> <!-- 有序列表,屬性type可以控制li序號的樣式，其屬性值有：1、A、a、I、i-->
<li>中國</li>
<li>美國</li>
<li>英國</li>
</ol>
<dl> <!-- 自定義列表 -->
<dt>分類1</dt> <!-- 分類名稱 -->
<dd>分類1第1項</dd> <!-- 類的項 -->
<dd>分類1第2項</dd>
<dt>分類2</dt>
<dd>分類2第1項</dd>
<dd>分類2第2項</dd>
</dl>
<table> <!-- 定義表格，table標簽實際就是一個四方塊框框，里面有單元格才會顯示出表格的樣子 -->
<caption>信息表</caption> <!-- 表格標題 -->
<tr> <!-- 定義行 -->
<th>姓名</th> <!-- 定義表頭，表頭文本有加粗居中效果 -->
<th>年齡</th>
<th>性別</th>
</tr>
<tr> <!-- 定義行 -->
<td>小明</td> <!-- 定義單元格，表格里面沒有列-->
<td>18</td>
<td>男</td>
</tr>
</table>
</body>
</html>
提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者刪除。
筆者：苦海123
其它問題可通過以下方式聯系本人咨詢：
QQ：810665436
微信：ConstancyMan
