1.什麼是HTML？
-
HTML：超級文本標記語言(HyperText Markup Language)
- “超文本”就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
- “標記”就是使用標籤的方法將需要的內容包括起來。
2.HTML語言的特點
- HTML文件不需要編譯，直接使用瀏覽器閱讀即可
- HTML文件的擴展名是*.html或者*.htm
-
HTML結構都是由標籤組成的
- 標籤名都是定義好的
- 標籤名不區分大小寫
- 通常情況下標籤名都是由開始標籤和結束標籤組成。例如＜a＞＜/a＞
- 如果沒有結束標籤，建議以/結尾。例如：＜img /＞
- HTML結構包括兩部分：頭head和體body
3.HTML頁面的基本結構
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>以上使用的標籤組成了HTML頁面的基本結構。解釋如下：
-
＜html＞是整個頁面的根標籤，理論上一個頁面只需要一個，由頭和體組成。
-
＜head＞是頭標籤，用於引入腳本、導入樣式、提供元信息等。一般情況下頭標籤的內容在瀏覽器端都不顯示。
- ＜title＞是子標籤，用於顯示瀏覽器標題。
- ＜body＞是體標籤，是整個網頁的主題，我們編寫的html代碼基本都在此標籤體內。
-
＜head＞是頭標籤，用於引入腳本、導入樣式、提供元信息等。一般情況下頭標籤的內容在瀏覽器端都不顯示。
4.HTML頁面中的入門標籤介紹
-
標題標籤：HTML中提供＜hn＞系列標籤，用於修飾標題。
- 標題標籤包含＜h1＞＜h2＞＜h3＞＜h4＞＜h5＞＜h6＞，從1到6逐漸變小，加粗顯示，單獨佔用一行。代碼示例如下：
-
標題標籤還包含＜hr＞標籤，他會在HTML頁面中創建一條水平分割線，用於定義內容中的主題變化。屬性如下：
- size屬性：水平線的高度，單位是像素
- noshade屬性：沒有陰影，取值：noshade，表示顯示純色
-
字體標籤＜font＞：用於設置字體大小、顏色等。屬性如下：
- size屬性：設置字體的大小。取值爲1到7的數字，從1到7逐漸變大，超過7的都按照7顯示，瀏覽器一般默認是3。
- color屬性：設置字體的顏色。取值可以是英文單詞或者是16進制，16進制即是使用紅綠藍三原色設置顏色。
- face屬性：設置字體的格式，注意：設置的字體必須是機器上有的。
-
格式化標籤：＜b＞＜i＞＜u＞＜p＞＜br/＞
- ＜b＞標籤：字體加粗標籤
- ＜i＞標籤：斜體標籤
- ＜u＞標籤：下劃線標籤
- ＜p＞標籤：段落標籤，有換行和行間距的作用
- ＜br/＞標籤：換行標籤
-
圖片標籤＜img＞：可以在html頁面中引用一張圖片。屬性如下：
- src屬性：指定需要顯示的圖片URL(路徑)，可以是相對路徑，也可以是絕對路徑。
- alt屬性：圖片無法正常顯示時的替代文本。
- width屬性：設置圖片的寬度，可以是像素值或者百分比。
- height屬性：設置圖片的高度，可以是像素值或者百分比。
-
列表標籤：列表標籤可以分爲有序列表＜ol＞標籤和無序列表＜ul＞標籤
- ＜li＞標籤：定義列表項，是＜ol＞和＜ul＞的子標籤。
-
＜ol＞：有序列表標籤。屬性如下：
- type屬性：定義有序列表的序號，取值有：A、a、I、i、1，字母數字等
- start屬性：規定有序列表的起始值
- reversed屬性：規定有序列表是降序排列
-
＜ul＞：無序列表標籤。屬性如下：
- type屬性：定義無序列表的開頭符號，取值有：disc(實心圓點)、circle(空心圓點)、square(實心方塊)等
-
超鏈接標籤＜a＞：是在html頁面中提供一種可以訪問其他位置的實現方式。屬性如下：
- href屬性：用於確定需要顯示頁面的路徑(URL)
-
target屬性：確定以何種方式打開href所設置的頁面。取值有：_blank、_self等。
- _blank：在新窗口中打開href指定的頁面。
- _self：默認取值，在當前頁面打開href指定的頁面。
- 自定義屬性值，在自定義的frame中打開href指定的頁面。
-
表格標籤＜table＞＜tr＞＜td＞：HTML表格是由＜table＞標籤以及一個或多個＜tr＞、＜th＞或＜td＞標籤組成。
-
＜table＞：是父標籤，相當於整個表格的容器。屬性如下：
- border屬性：設置表格邊框的寬度。取值爲像素值。
- width屬性：設置表格的寬度。取值爲像素值或者百分比。
- height屬性：設置表格的高度。取值爲像素值或者百分比。
- align屬性：設置內容居中、或者靠邊。取值爲center，left，right。
- bgcolor屬性：設置表格背景顏色。取值爲英文單詞或者16進制。
- cellspacing屬性：設置單元格邊框寬度。取值爲像素值。
- cellpadding屬性：設置字體和單元格的間距。取值爲像素值。
- ＜tr＞：是子標籤，用於定義行。
-
＜td＞：是子標籤，用於定義表格的單元格(列)。特有屬性如下：
- colspan屬性：設置單元格橫跨的列數
- rowspan屬性：設置單元格橫跨的行數
- align屬性：設置單元格中的內容水平對齊方式，取值：left左、right右、center居中
- nowrap屬性：單元格中的內容是否折行
- ＜th＞：標籤用於定義表頭。單元格中的內容默認居中、加粗顯示。
-
＜table＞：是父標籤，相當於整個表格的容器。屬性如下：
-
＜frameset＞標籤：是多個窗口頁面整合在一起的一個集合(框架集)。每一個頁面(框架)都是單獨的文檔，需要使用子標籤＜frame＞來確定頁面的位置。＜frameset＞通過列和行來確定整體佈局，使用cols屬性確定列數，使用rows屬性確定行數。多個＜frameset＞可以嵌套使用。
注意：＜frameset＞和＜body＞標籤不能共存。- rows屬性：設置框架集的行數。取值爲：值1，值2，值3….. 一個值表示一行，多個值用逗號隔開。值可以是像素值或者百分比等，最後一個值不想計算可以使用*匹配剩餘的空間。
- cols屬性：設置框架集的列數。取值爲：值1，值2，值3….. 一個值表示一列，多個值用逗號隔開。值可以是像素值或者百分比等，最後一個值不想計算可以使用*匹配剩餘的空間。
-
＜frame＞標籤：用於設置＜frameset＞框架集中的一個頁面(框架)。
- src屬性：確定頁面的路徑。
- noresize屬性：框架分隔先不能移動。
- target屬性：確定需要顯示的頁面在何處顯示。
- name屬性：爲該＜frame＞標籤起名，方便其他標籤定位到他。