一：什麼是 HTML 文件？
1):HTML 指超文本標籤語言。
2):HTML 文件是包含一些標籤的文本文件。
3):這些標籤告訴 WEB 瀏覽器如何顯示頁面。
4):HTML 文件必須使用 htm 或者 html 作爲文件擴展名。
5):HTML 文件可以通過簡單的文本編輯器來創建。
二：結構
4 HTML語言的結構
<html>
<head> 編碼規範的(gbk/utf-8) -頭文件標籤
<title>標題標籤</title>
</head>
<body>
html主體部分:這些內容最終會在瀏覽器中顯示
</body>
</html> -有標籤體的標籤
三：HTML標籤的分類
1) 標題標籤:從<h1>到<h6>,<h1> 定義最大的標題。<h6> 定義最小的標題。
2) 換行標籤：<br>
3) 水平線標籤:<hr>
4)換行標籤:<br/>
5)段落標籤:<p>
6)段落縮進:<blockquote>
7)上下標標籤:<sup>和<sub>
8)原樣輸出標籤:<pre>
9)字體標籤:<font>
10)居中標籤:<center>
11)圖像標籤:img 空標籤體
<img/>
屬性:
src:鏈接到的資源圖片
width:圖片的寬度 兩種方式:一種指定px(像素) 第二種:百分比
title:懸停狀態,會顯示文字
alt:當圖片失效的時候,用來解釋說明該圖片
height:圖片的高度
12)轉義字符:
空格: 注意事項(分號一定要帶上)
<: < ; (letter than)
:>(greater than)
<h1></h1>
註冊商標:® ®
版權所有:© ©
13)有序列標籤
ol li列表項
14)無序列標籤
ul li列表項
15)超鏈接標籤
1>連接到某個資源文件或者資源地址(URL)
2> 作爲錨連接來使用
在同一個html頁面下:
a> 打錨點:
<a name=”錨點名稱”></a>
b)創建跳轉
<a href=”#錨點名稱”>跳轉</a>
不同頁html頁面下:
c)打錨點:
<a name=”錨點名稱”></a>
d)創建跳轉標記
<a href=”資源文件或者資源地址#錨點名稱”>跳轉</a>16)表格標籤:
1>table標籤
屬性:border 表格的邊框 width 表格的寬度 height表格的高度
2>align:標籤在瀏覽器中的對齊方式 bgColor:背景色
3>tr:行標籤
4>td:列(單元格)
5>th:表頭標籤(默認爲：居中,加粗)
6>行合併:rospan
7>列合併:colspan
四：CSS網頁佈局
1）css的使用方法有三種：
1> 行內樣式
標籤 style屬性:指定樣式
弊端:style屬性它和html標籤混合使用,不利於後期維護
2>內部樣式
書寫格式:
選中某個標籤名{
書寫樣式;
}
3> 外部方式
a) 創建css文件:指定標籤的樣式
標籤選擇器{
書寫樣式;
}
b) 需要外部導入該css文件
rel屬性:關聯層疊樣式表
<link href=”需要被導入的css文件” ref=”stylesheet”>
2)css背景
1> 背景邊框的設置:首先在頭文件中加入<style type="text/css">
2>在body屬性中進行顏色的選擇 body {background-color: yellow}
3)css文本
1>文本顏色的設置<style type="text/css">
eg： h1 {color: #00ff00}
</style>
</head>
<body>
<h1>This is header 1</h1>
</body>
4)css字體
1>首先在頭文件中加入<style type="text/css">
2>在p {font-family: .......}進行設定
<head>
<style type="text/css">
p {font-family: courier}
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>
5)css邊框的設定
1>首先在頭文件中加入<style type="text/css">
2>在p.* {border-style：....:}進行邊框樣式的設定
eg： <head>
<style type="text/css">
p.dotted {border-style: dotted}
</style>
</head>
<body>
<p class="dotted">A dotted border</p>
</body>
3>在p. { border-color: .......}進行顏色的設定
eg: <html>
<head>
<style type="text/css">
p.one
{
border-style: solid;
border-color: #0000ff
}
</style>
</head>
<body>
<p class="one">One-colored border!</p>
</body>
</html>6)css邊距
1>首先在頁面中建立一個<div>....</div>塊標籤
2>塊標籤的位置可以根據
a>magin的屬性值來進行設定
b>可以用浮動來進行移動（多個圖片重疊在一起的時候）
7）選擇器的分類
1)標籤選擇器
標籤名稱{
樣式;
}
eg; div{
font-size: 24px;
color: #f00;
}
2)id選擇器
在使用的時候,給標籤一定要指定id屬性且指定id屬性值
#id屬性值{
樣式;
}
eg: #dl1{
font-size: 24px;
color: #0f0;
}
（在同一個html頁面下,不要給多個標籤指定同名的id屬性,id屬性唯一的
javascript:根據id屬性值獲取當前的標籤對象
document.getElementById("id是唯一的") ;
3)類選擇器
在使用的時候,給標籤一定要指定class屬性且指定class屬性值
.class屬性值{
樣式;
}
eg: .cls1{
font-size: 36px;
color: #00f;}
(在同一個html頁面中可以給多個標籤指定同名class屬性)
派生選擇器:
1)並集選擇器
選擇器1,選擇器2,選擇器3{
樣式;
}
eg: #dl1,.cls1{
font-size: 24px;
color: #ff0;}
2)交集選擇器
選擇器1 選擇器2 選擇器3{
樣式;
}
eg: #dl1 span{
font-size: 36px;
color: #000;}
3)通用選擇器
* :所有的意思,通配符號
*
8)css僞類選擇器
1>僞類選擇器有4種狀態:
a)鼠標沒有訪問過的狀態 link
b)鼠標經過的狀態 hover
c)鼠標激活狀態(鼠標點擊了,但是沒有鬆開的狀態)active
d)鼠標已經訪問過的狀態(點擊了,並且鬆開的狀態) visited
2>格式爲
標籤名稱:分別四種狀態
1> a:link{
color: ****;
}
2> a:visited{
color:***** ;
}
3> a:hover{
text-decoration: none;/
color: ****;
}
4> a:active{
text-decoration: underline;
color: ****;
}注意：在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 之後，纔是有效的。
注意：在 CSS 定義中，a:active 必須被置於 a:hover 之後，纔是有效的。