注：將自己學到的記下來，不要嫌少，內容會持續更新。
web前端基礎的三件套：HTML，CSS，Javascript。
個人理解：HTML就相當於框架，CSS則是裝飾，Javascript是執行動作。
HTML
HTML是什麼？
- HTML 指的是超文字標記語言 (Hyper Text Markup Language)
- HTML 不是一種程式語言，而是一種標記語言 (markup language)
- 標記語言是一套標記標籤 (markup tag)
- HTML 使用標記標籤來描述網頁
HTML基本結構
<!DOCTYPE html> <!-- 宣告是HTML文件型別 -->
<html> <!-- ----根控制標記 -->
<head> <!-- ---頭控制標記 -->
<title>這是標題</title> <!-- ----標題標記 -->
</head> <!-- ----頭控制標記 -->
<body>
<!-- ---- 我是Body！！！-->
</body>
</html> <!-- ----根控制標記 -->
head部分常用的標籤
<title>、<base>、<link>、<meta>、<script> 以及 <style>
title
- 定義瀏覽器工具欄中的標題
- 提供頁面被新增到收藏夾時顯示的標題
- 顯示在搜尋引擎結果中的頁面標題
meta
-
文件描述【網站在搜尋時，進行描述。】
-
<meta name="description" content="汽車之家為您提供最新汽車報價，汽車圖片，汽車價格大全，最精彩的汽車新聞、行情、評測、導購內容，是提供資訊最快最全的中國汽車網站。">
-
-
文件關鍵詞【網站在搜尋時，進行關鍵字匹配】
-
<meta name="keywords" content="汽車,汽車之家,汽車網,汽車報價,汽車圖片,新聞,評測,社群,俱樂部">
-
-
重定向【頁面重定向】
-
<meta http-equiv="Refresh"content="2;URL=https://www.baidu.com">
-
link用於匯入css
-
<link rel="stylesheet" type="text/css" href="mystyle.css" />
script用於匯入js
-
<script type="text/javascript">document.write("Hello World!")</script>
style用於定義css
<style>
p {
background-color:red;
font-size:15px;
}
</style>
base:定義頁面上所有連結的預設地址或預設目標.
<base href="http://www.w3school.com.cn/i/" />
<img src="eg_smile.gif" /><br /> #引入圖片時，會和base進行拼接後再查詢圖片。
body部分常用的標籤
常用標籤:
<h1~h6>:從大到小. 表示標題.
<p>: 段落標籤. 包裹的內容被換行.並且也上下內容之間有一行空白.
<b> <strong>: 加粗標籤.
<strike>: 為文字加上一條中線.
<em>: 文字變成斜體.
<sup>和<sub>: 上角標 和 下角表.
<br/>:換行. 單標籤
<hr>:水平線
<div> :塊，主要用於佈局
<span>：內聯標籤
塊級標籤特點：
① 佔一整行，新增元素新起一行；
② 高度，行高以及外邊距和內邊距都可調整；
③ 寬度預設是它的容器的100%，除非設定一個寬度，一般都是佔滿一行。
④ 它可以容納內聯元素和其他塊元素
內聯標籤特點：
① 和其他元素都在一行上；
② 高，行高及外邊距和內邊距不可改變；
③ 寬度就是它的文字或圖片的寬度，不可改變
④ 內聯元素只能容納文字或者其他內聯元素注：設定寬度無效，高度可以通過line-height來設定，設定margin只有左右margin有效，上下無效。-padding同上，注意元素範圍是增大了，但是對元素周圍的內容是沒影響的。
圖形標籤:
<img>
- src: 要顯示圖片的路徑.
- alt: 圖片沒有載入成功時的提示.
- title: 滑鼠懸浮時的提示資訊.
- width: 圖片的寬
- height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
超連結標籤:
<a>
- href:要連線的資源路徑 格式如下: href="http://www.baidu.com"
- target: _blank : 在新的視窗開啟超連結. _self：在當前視窗開啟
- name: 定義一個頁面的書籤.
- 錨點跳轉 href : #love就會跳轉到id="love"的地方
- href設定成javascript: 時，不會進行任何操作
注意：target設定為_blank時，會開啟一個新頁籤。設定為#時，在本頁，相當於重新整理頁面。
超連結標籤預設是有下劃線的，可以用
a{ text-decoration:none; }去掉下劃線。
列表標籤:
<ul><ol><dl>
-
<ul>: 無序列表 -
<ol>:有序列表 -
<li>:列表中的每一項. -
<dl>定義列表 -
<dt>列表標題 -
<dd>列表項
注意：
ul：type 有：circle 空心圓，disc 實心圓，square 實心正方形， none ：前面無符號;
ol：type 有：1 ：表示有序的1,2,3； a ：表示有序的a，b，c；i ：羅馬數字i,ii,iii；雖然還可以定義為：circle、disc、square、none但現實都為1,2,3等序列；
等等，太多了寫不完的，大家在需要用到的時候可以查一查順手給記下！
CSS
CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素。
當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文件進行格式化（渲染）。
CSS組成：選擇器和宣告。宣告又包括屬性和屬性值。每個宣告之後用分號結束。
行內樣式
標記的style屬性中設定css樣式，不推薦大規模使用。
<p style="color: red">Hello world.</p>
內部樣式
將css樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
外部樣式
外部樣式就是將css寫在一個單獨的檔案中，然後在頁面進行引入即可。推薦使用此方式。
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
CSS選擇器
基本選擇器
元素選擇器
p {color: "red";}
ID選擇器
#i1 {
background-color: red;
}
類選擇器
.c1 {
font-size: 14px;
}p.c1 { color: red;}
注意：
樣式類名不要用數字開頭（有的瀏覽器不認）。
標籤中的class屬性如果有多個，要用空格分隔。
通用選擇器
* {
color: white;
}
組合選擇器
交集選擇器
/*由兩個選擇器組合，其中一個為標籤選擇器，另一個為類選擇器或ID選擇器。兩個選擇器之間不能有空格*/
標籤選擇器.類選擇器|ID選擇器
{
屬性1：屬性值1；
....
}
後代選擇器
/*li內部的a標籤設定字型顏色, 後代選擇器有空格！可以有多個標籤，用空格隔開。*/
li a {
color: green;
}
兒子選擇器
/*選擇所有父級是 <div> 元素的 <p> 元素*/
div>p {
font-family: "Arial Black", arial-black, cursive;
}
相鄰選擇器
/*選擇所有緊接著<div>元素之後的<p>元素*/
div+p {
margin: 5px;
}
兄弟選擇器
/*i1後面所有的兄弟p標籤，兄弟標籤也就是同級的標籤*/
#i1~p {
border: 2px solid royalblue;
}
屬性選擇器
/*用於選取帶有指定屬性的元素。*/
p[title] {
color: red;
}
/*用於選取帶有指定屬性和值的元素。*/
p[title="213"] {
color: green;
}
/*注：比較少用！*/
分組和巢狀
分組
當多個元素的樣式相同的時候，我們沒有必要重複地為每個元素都設定樣式，我們可以通過在多個選擇器之間使用逗號分隔的分組選擇器來統一設定元素樣式。
例如：
div, p {
color: red;
}
上面的程式碼為div標籤和p標籤統一設定字型為紅色。
通常，我們會分兩行來寫，更清晰:
div,
p {
color: red;
}
巢狀
多種選擇器可以混合起來使用，比如：.c1類內部所有p標籤設定字型顏色為紅色。
.c1 p {
color: red;
}
偽類選擇器
偽類可以在目標元素出現某種特殊的狀態時應用樣式**，例如：狀態可以是滑鼠指標停留在某個標籤上，或者訪問一個超連結。
/* 未訪問的連結 */
a:link {
color: #FF0000
}
/* 已訪問的連結 */
a:visited {
color: #00FF00
}
/* 滑鼠移動到連結上 */
a:hover {
color: #FF00FF
}
/* 選定的連結 */
a:active {
color: #0000FF
}
/*input輸入框獲取焦點時樣式*/
input:focus {
outline: none;
background-color: #eee;}
選擇器的優先順序
CSS繼承
繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的。繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於它的後代。例如一個body定義了的字型顏色值也會應用到段落的文字中。
body {
color: red;
}
此時頁面上所有標籤都會繼承body的字型顏色。然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低的0。
我們只要給對應的標籤設定字型顏色就可覆蓋掉它繼承的樣式。
p {
color: green;
}
此外，繼承是CSS重要的一部分，我們甚至不用去考慮它為什麼能夠這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。
選擇器的優先順序
我們上面學了很多的選擇器，也就是說在一個HTML頁面中有很多種方式找到一個元素並且為其設定樣式，那瀏覽器根據什麼來決定應該應用哪個樣式呢？
其實是按照不同選擇器的權重來決定的，具體的選擇器權重計算方式如下圖：
除此之外還可以通過新增 !important方式來強制讓樣式生效，但並不推薦使用。因為如果過多的使用!important會使樣式檔案混亂不易維護。
萬不得已可以使用!important
推薦一個HTML&CSS全面語法教程連結：
HTML：https://www.w3cschool.cn/html/
CSS：https://www.w3cschool.cn/css/