教你寫一個簡單的網頁（html網頁開發入門）
網頁的組成
HTML
網頁的具體內容和結構
CSS
網頁的樣式（美化網頁最重要的一塊）
JavaScript
網頁的互動效果，比如對使用者滑鼠事件作出響應
HTML
什麼是HTML
HTML的全稱是HyperTextMarkupLanguage，超文字標記語言
其實它就是文字，由瀏覽器負責將它解析成具體的網頁內容
比如，瀏覽器會將下面的HTML程式碼
<ul>
<li>知乎</li>
<li>CSDN</li>
<li>部落格園</li>
</ul>- 1
- 2
- 3
- 4
- 5
轉化為
知乎
黑馬
CSDN
的網頁內容
HTML的組成
跟XML類似，HTML由N個標籤（節點、元素、標記）組成
HTML語法非常鬆散
常見的HTML標籤
- 標題：h1,h2,h3,h4,h5…
- 段落：p
- 換行：br
- 容器：div,span（用來容納其他標籤）
- 表格：table,tr,td
- 列表：ul,ol,li
- 圖片：img
- 表單：input
- 連結：a
推薦開發工具（網路三劍客）dreamweawer、flash、fireworks；WebStorm.
<html>
<!-- 網頁的標題、圖示... -->
<head>
<mate - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
CSS
什麼是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>- 1
- 內頁樣式：在本網頁的style標籤中書寫
<span>123</span>
<style type="text/css">
span {
color:yellow;
background-color:blue
}
</style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
外部樣式：在單獨的CSS檔案中書寫，然後在網頁中用link標籤引用
test.css
span {
color:yellow;
background-color:blue
}- 1
- 2
- 3
- 4
test.html
<span>123</span>
<link rel="stylesheet" herf="test.css">- 1
- 2
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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
偽類
| 屬性 | 描述 |
|---|---|
| :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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
選擇器優先順序
針對性越強，優先順序越高
選擇器的權值
通配選擇符（*）: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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
內容（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 | 設 |