網頁的組成
HTML
網頁的具體內容和結構
CSS
網頁的樣式（美化網頁最重要的一塊）
JavaScript
網頁的交互效果，比如對用戶鼠標事件作出響應
什麼是HTML
HTML的全稱是HyperTextMarkupLanguage，超文本標記語言
其實它就是文本，由瀏覽器負責將它解析成具體的網頁內容
跟XML類似，HTML由N個標籤（節點、元素、標記）組成
- HTML語法非常鬆散
- 常見的HTML標籤
- 標題：h1,h2,h3,h4,h5…
- 段落：p
- 換行：br
- 容器：div,span（用來容納其他標籤）
- 表格：table,tr,td
- 列表：ul,ol,li
- 圖片：img
- 表單：input
- 鏈接：a
推薦開發工具VSCODE、dreamweawer、flash、fireworks；WebStorm.
<html>
<!-- 網頁的標題、圖標... -->
<head>
<mate charset="utf-8">
<title>第一個網頁</title>
</head>
<!-- 網頁的具體內容 -->
<body>
這是網頁的內容
<a href="https://web4theme.com" target="_blank">Web4theme</a>
<h1>666666666</h1>
<h2>666666666</h2>
<h3>666666666</h3>
<h4>666666666</h4>
<h5>666666666</h5>
<p>ppppppppppp</p>
<div>
<p>ppppppppppp</p>
</div>
<ul>
<li>hahaha</li>
<li>hahaha</li>
<li>hahaha</li>
</ul>
<ol>
<li>ahahah</li>
<li>ahahah</li>
<li>ahahah</li>
</ol>
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</body>
</html>
什麼是CSS
CSS的全稱是Cascading Style Sheets,層疊樣式表
它用來控制HTML標籤的樣式，在美化網頁中起到非常重要的作用
CSS的編寫格式是鍵值對形式的，比如
color : red
background-color : blue
font-size : 20px
冒號左邊的是屬性名，冒號右邊的是屬性值
CSS三種書寫方式
行內樣式：（內聯樣式）直接在標籤的style屬性中書寫
<span style="color:red;background-color:red;">123</span>內頁樣式：在本網頁的style標籤中書寫
<span>123</span>
<style type="text/css">
span {
color:yellow;
background-color:blue
}
</style>外部樣式：在單獨的CSS文件中書寫，然後在網頁中用link標籤引用test.css
test.css文件內容
span {
color:yellow;
background-color:blue
}
test.html引用test.css的代碼：
<span>123</span>
<link rel="stylesheet" herf="test.css">CSS選擇器
選擇器的作用
選擇對應的標籤，為之添加樣式
標籤選擇器 根據標籤名找到標籤
類選擇器 標籤可以有多個類
id選擇器 id是唯一的，不能一樣
選擇器組合 中間不留空格，粘在一起
後代選擇器 中間一個空格，不管嵌套多少層
相鄰兄弟選擇器
屬性選擇器
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*標籤選擇器*/
p{
color:red;
}
/*類選擇器*/
.first{
color:red;
}
.second{
color:blue;
}
/*id選擇器*/
#first{
color:yollew;
}
#second{
color:green;
}
/*群組選擇器*/
.first, #second, h1{
}
/*選擇器組合*/
div.first{
}
/*後代選擇器*/
div p{
}
/*子標籤選擇器*/
div > p{
}
/*相鄰兄弟選擇器*/
div ＋ p{
}
/*屬性選擇器*/
div[name]{
}
div[name][age]{
}
div[name="jack"]{
}
</style>
</head>
<body>
<div>
<p>p1</p>
<span>
<p>p2</p>
</span>
</div>
<div name="jack">div1</div>
<div age="10">div2</div>
<p>與div相鄰的p</p>
<div class="first">123</div>
<div id="first">123</div>
<p class="first second">123</p>
<p id="second">123</p>
<h1>hhh</h1>
</body>
</html>偽類
| 屬性 | 描述 |
| :active | 向被啟動的元素添加樣式 |
| :focus | 向擁有鍵盤輸入焦點的元素添加樣式 |
| :hover | 當滑鼠懸浮在元素上方時，向元素添加樣式 |
| :link | 向未被訪問的鏈接添加樣式 |
| :visited | 向已被訪問的鏈接添加樣式 |
| :first-child | 向元素的第一個子元素添加樣式 |
| :lang | 向帶有指定lang屬性的元素添加樣式 |
| :first-letter | 向文本的第一個字母添加特殊樣式 |
| :first-line | 向文本的首行添加特殊樣式 |
| :before | 在元素之前添加內容 |
| after | 在元素之後添加內容 |
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width:100px;
height:100px;
background-color:red;
}
div:hover{
background-color:blue;
}
div:before{
content:"666";
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>選擇器優先級
針對性越強，優先級越高
選擇器的權值
通配選擇符（*）:0
標籤：1
類：10
屬性：10
偽類：10
偽元素：1
id：100
important：1000
原則：選擇器的權值加到一起，大的優先；如果權值相同，後定義的優先
important > 內聯 > id > 類 > 標籤｜偽類｜屬性選擇器 > 偽元素 > 通配符 > 繼承
CSS標籤的類型
HTML有N多標籤，根據顯示的類型，主要可以分為2大類
塊級標籤，獨佔一行的標籤
行內標籤（內聯標籤），多個行內標籤能同時顯示在一行
修改標籤的顯示類型
CSS中有個display屬性，能修改標籤的顯示類型
| 屬性 | 說明 |
| none | 隱藏標籤 |
| block | 塊級類型，獨佔一行,能隨時設置寬度和高度 |
| inline | 行內類型（內聯類型），多個行內標籤可以顯示在同一行，寬度和高度取決於內容尺寸 |
| inline-block | 行d內-塊級類型（內聯－塊級類型），多個行內標籤可以顯示在同一行，能隨時設置寬度和高度 |
CSS屬性
CSS有N多屬性，根據繼承性，主要可以分為2大類
可繼承屬性
- 父標籤的屬性值會傳遞給子標籤
- 一般是文字控制屬性
不可繼承屬性
- 父標籤的屬性值不能傳遞給子標籤
- 一般是區塊控制屬性
CSS屬性－可繼承屬性
所有標籤可繼承
visibility、cursor
內聯標籤可繼承
letter-spacing、word-spacing、shite-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
塊級標籤可繼承
text-indent、text-align
列表標籤
list-style、list-style-type、list-style-position、list-style-image
CSS屬性－不可繼承屬性
display、margin、border、padding、background
height、min-height、max-height、width、min-width、max-width
over-flow、position、left、right、top、bottom、z-index
float、clear
table-layout、vertical-align
page-break-after、page-bread-before
unicode-bidi
盒子模型
網頁上每一個標籤都是一個盒子
每個盒子都有四個屬性
| 屬性 | 說明 |
| 內容（content） | 盒子裏裝的東西，網頁中通常是指文字和圖片 |
| 填充（padding，內邊距） | 怕盒子裏裝的（貴重的）東西損壞，而添加的泡沫或者其他抗震的輔料 |
| 邊框（border） | 盒子本身 |
| 邊界（margin，外邊距） | 盒子擺放的時候不能全部堆在一起，盒子之間要留一定空隙保持通風，同時也為了方便取出 |
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: blue;
margin-top: 20px;
padding-top: 20px;
border: 20px solid red;
border: 5px dashed red;/*虛線*/
}
</style>
</head>
<body>
<div>123</div>
<div>456</div>
</body>
</html>內容（content）屬性
| 屬性 | 描述 |
| height | 設置元素高度 |
| max-height | 設置元素的最大高度 |
| max-width | 設置元素的最大寬度 |
| min-height | 設置元素的最小高度 |
| min-width | 設置元素的最小寬度 |
| width | 設置元素的寬度 |
填充（padding，內邊距）屬性
| 屬性 | 描述 |
| padding | 在一個聲明中設置所有內邊距屬性 |
| padding-bottom | 設置元素的下內邊距 |
| padding-left | 設置元素的做內邊距 |
| padding-right | 設置元素的有內邊距 |
| padding-top | 設置元素的上內邊距 |
邊框border屬性
| 屬性 | 描述 |
| border-width | 寬度 |
| border-style | 樣式 |
| border-color | 顏色 |
| border-radius | 圓角 |
邊界margin屬性
| 屬性 | 描述 |
| margin | 在一個聲明中設置所有外邊距屬性 |
| margin-bottom | 設置元素的下外邊距 |
| margin-left | 設置元素的左外邊距 |
| margin-right | 設置元素的右外邊距 |
| margin-top | 設置元素的上外邊距 |
