HTML從這裏開始
一. 什麼是HTML?
HTML 是用來描述網頁的一種語言。
- HTML 指的是超文本標記語言 (Hyper Text Markup Language)
- HTML 不是一種編程語言，而是一種標記語言 (markup language)
- 標記語言是一套標記標籤 (markup tag)
- HTML 使用標記標籤來描述網頁
二. HTML 標籤
HTML 標記標籤通常被稱爲 HTML 標籤 (HTML tag)。
- HTML 標籤是由尖括號包圍的關鍵詞，比如
<html> - HTML 標籤通常是成對出現的，比如
<b>和</b> - 標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
- 開始和結束標籤也被稱爲開放標籤和閉合標籤
三. HTML語法結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
四. HTML 語法執行順序
從上至下
五. HTML 基本標籤
1. 標題標籤
<h>系列
<h1>一級</h1>
<h2>二級</h2>
<h3>三級</h3>
<h4>四級</h4>
<h5>五級</h5>
<h6>六級</h6>
頁面展示：
2. 段落標籤
<p></p>
<p>這是段落標籤</p>
<p>這是段落標籤</p>
頁面展示：
3. 行內標籤
<span></span>
<span>這是一行！</span>
<span>這是一行！</span>
頁面展示：
4.換行標籤
<br/>
<span>這是一行！</span>
<br/>
<span>這是一行！</span>
頁面展示：
5. 水平線分割標籤
<hr/>
<hr/>
頁面展示：
6. 上標，下標
上標：<sup></sup>
下標：<sub></sub>
M<sup>2</sup>
<br/>
H<sub>2</sub>O
頁面展示：
7. 加粗標籤
<strong></strong>
<p>未加粗</p>
<strong>加粗</strong>
頁面展示：
8. 標記標籤
<em></em>
<em>標記標籤</em>
頁面展示：
9. 引用標籤
<q></q>
<q>引用標籤</q>
頁面展示：
10.塊級標籤
<div></div>
<div>塊級標籤</div>
<div>塊級標籤</div>
頁面展示：
11. 有序列表
<ol>
<li>標籤</li>
<li>標籤</li>
</ol>
頁面展示：
12. 無序列表
ul無序列表變遷默認類型爲type="disc",黑色實心圓點
type="circle"，黑色空心圓點
type="square"，黑絲實心方塊
<ul>
<li>標籤</li>
<li>標籤</li>
</ul>
頁面展示：
13. 定義列表
<dl>
<dt>一級</dt>
<dd>二級</dd>
<dd>二級</dd>
<dt>一級</dt>
<dd>二級</dd>
<dd>二級</dd>
</dl>
頁面展示：
14. 文本顯示方向
<bdo></bdo>
<bdo dir="ltr">從左開始</bdo>
<br/>
<bdo dir="rtl">從右開始</bdo>
頁面展示：
15. 常用特殊符號
空格
>大於號（>)
<小於號（<）
"引號（"）
©版權號（©）
16. 註釋
<!---->
<!--內容-->
不會在頁面進行顯示
六. a 超鏈接標籤
1. 超鏈接
<a href="" target="">跳轉</a>
- href：鏈接指向的頁面的 URL。
- target：打開鏈接的方式。默認爲_sel。
_self：在本頁面打開鏈接。
_blank：在新的頁面打開鏈接。 - download：下載超鏈接目標。
2. 錨點設置
- 回到頁面頂部
<a href="#top">頂部</a>
- 回到頁面指定位置
<p id="aaa">跳到這裏</p>
<a href="#aaa">指定位置</a>
七. img 圖片標籤
<img src="" alt="">
- src：必需的屬性。它的值是圖片的URL地址，也就是圖片路徑地址。
- alt：圖像的替代文本。如果圖片因爲某些原因無法顯示，瀏覽器將顯示代替文本。
- title：鼠標放上去顯示的文字。
- width：設置圖片的寬度。
- height：設置圖片的高度。
- align：圖片的對其方式。
top：以頂部對其。
right：以右面對其。
buttom：以底部對其。
left：以左邊對其。
middle：中間顯示。
八. 媒體標籤
1. audio 音頻標籤
<audio src=""></audio>
- src：必需的屬性。它的值是音頻的URL地址，也就是音頻路徑地址。
- autoplay：自動播放
autoplay=“autoplay” - controls：控制檯
controls=“controls” - hidden：隱藏控制檯
hidden=“hidden” - loop：每當音頻結束時重新開始播放
loop=“loop”
2. video 視頻標籤
<video src=""></video>
- src：必需的屬性。它的值是視頻的URL地址，也就是視頻路徑地址。
- autoplay：自動播放
autoplay=“autoplay” - controls：控制檯
controls=“controls” - hidden：隱藏控制檯
hidden=“hidden” - loop：每當音頻結束時重新開始播放
loop=“loop” - height：視頻播放器的高度
- width：視頻播放器的寬度
3. embed 嵌入標籤
<embed src="" type=""></embed>
- src：嵌入內容的 URL
- type：嵌入內容的類型
- height：嵌入內容的高度
- width：嵌入內容的寬度
九. marquee 飄動標籤
用來插入一段滾動的文字。目前此標籤已經過時，不推薦使用。
<marquee>飄動內容</marquee>
- loop：飄動的次數
- scrollamount：飄動的速度
- direction：飄動方向
left：從右向左
right：從左向右 - direction：飄動方向
- behavior：滾動方式
scroll：循環滾動，默認。
slide：滾動一次
alternate：兩端來回滾動
十. table 表格標籤
<table>
<caption>表頭</caption>
<tr>
<th>標題1</th>
<th>標題2</th>
<th>標題3</th>
</tr>
<tr>
<td>一行一列</td>
<td>一行二列</td>
<td>一行三列</td>
</tr>
<tr>
<td>二行一列</td>
<td>二行二列</td>
<td>二行三列</td>
</tr>
</table>
- caption：表頭
- th：文本自動居中、加粗
- tr：控制表格的行
- td：控制行中的單元格（列）
- border：表格的邊框線
- bgcolor：背景顏色
- width：表格的寬度
- height：表格的高度
- cellpadding：單元格的內容與單元格之間的距離
- cellspacing：單元格與單元格之間的距離
- rowspan：設置單元格所佔的行數（設置 td）
- colspan：設置單元格所佔的列數（設置 td）
- align：設置文本的對齊方式（設置 td）
left：左對齊
center：居中對齊
right右對齊
十一. form 表單標籤
<form action="http://www.baidu.com">
<input type="submit" value="提交">
</form>
- action：表單提交的URL地址
- method：表單的提交方式
get：默認的提交方式。提交的數據會顯示在地址欄上。
post：提交的數據不會顯示在地址欄上，傳送的數據一般不受限制。 - name：表單的名稱
十二. input 輸入標籤
<input type="">
- type： input 元素的類型
- value：input 元素的初始值
- placeholder：幫助用戶填寫輸入字段的提示
- maxlength：輸入字段中的字符的最大長度
- size：輸入字段的寬度
- name：input 元素的名稱
1. text 文本框
<input type="text">
2. password 密碼框
<input type="password">
以小黑點形式顯示輸入的內容，比較安全。
3. file 文件上傳
<input type="file">
- multiple：多選
multiple=“multiple”
4. radio 單選框
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
name名稱相同情況下，只能單選
5. checkbox 多選框
<input type="checkbox" name="fruits">西瓜
<input type="checkbox" name="fruits">香蕉
<input type="checkbox" name="fruits">葡萄
- checked：默認選擇的
checked=“checked” - disabled：不可選的，禁止選擇
disabled=“disabled”
6. image 圖片
<input type="image" src="" alt="錯誤" />
- src：圖片的URL地址
- alt：圖片無法顯示情況，提示的文字
7. submit 提交按鈕
<input type="submit" value="提交">
提交按鈕用於向服務器發送表單數據。數據會發送到表單的 action 屬性中指定的頁面。
8. reset 重置按鈕
<input type="reset" />
重置按鈕會清除表單中的所有數據。
9.普通按鈕
<input type="button" onclick="to()" />
定義可點擊的按鈕，但沒有任何行爲。可以結合onclick事件使用。
十三. textarea 文本域
<textarea rows="3" cols="20">
這是一個文本域。。
</textarea>
- rows：文本區內的可見行數
- cols：文本區內的可見寬度
- maxlength：文本區域的最大字符數
- placeholder：文本區域預期值的文字提示
- readonly：文本區爲只讀
十四. select 選擇列表
1.選擇列表
select>
<option>葡萄</option>
<option>香蕉</option>
<option>西瓜</option>
</select>
- size：下拉列表中可見選項的數目
- name：下拉列表的名稱
- disabled：禁止該下拉列表項（設置option）
- selected：選項（在首次顯示在列表中時）表現爲選中狀態
2.選項組
<select>
<optgroup label="一組"></optgroup>
<option>A</option>
<option>B</option>
<option>C</option>
<optgroup label="二組"></optgroup>
<option>D</option>
<option>E</option>
<option>F</option>
</select>
- label：定義當使用 時所使用的標註，選項組的名稱。
十五. 行內標籤、塊級標籤、行內塊標籤、行標籤與塊標籤相互轉換
1. 行內標籤
可以多個標籤存在一行，不能直接設置行內標籤的寬、高，完全靠內容撐開寬和高。
常用的行內標籤：
<span>、 <a>、 <big>、 <em>、 <i>、 <lable>、 <input>、 <select>、 <small> 、<strong>、 <sub> 、<sup>、 <u>、 <textarea>、 <img>
2. 塊級標籤
獨佔一行，可以設置寬、高。
如果不給寬度，塊級標籤的寬度將默認爲瀏覽器的寬度，即100%。
常用的塊級標籤
<div>、 h系列、 <li>、 <p>、 <form>、 <ul>、 <ol>、 <table>、 <hr>、 <address>、 <dl>、 <dt>、 <dd>
3. 行內塊標籤
結合行內和塊級標籤的優點，不僅可以對寬、高屬性生效，還可以多個標籤存在一行顯示。
常用的行內塊標籤：
<img>
4. 行標籤與塊標籤相互轉換
- 行標籤轉塊標籤：
display:block;
- 塊標籤轉行標籤：
display:inline;
- 轉換爲行內塊標籤：
display:inline-block;
十六. HTML三種常見頁面佈局方式
1. Frameset 佈局
一些常見的後臺管理系統大部分是用 Frameset 來佈局的，所以固定了結構類的佈局用 Frameset 來實現比較好。
2. Table 佈局
是一種舊的佈局方式，在現在的項目中還是很常見，Table 實際上它更適合做數據的展示，而非佈局。但在 DIV + CSS 佈局還沒有流行起來之前，大量的網站是 Table 來佈局。包括現在依然有人在使用。
缺點：
Table佈局的話，只有把Table內的所有內容加載完成了，纔會加載樣式，所以加載速度要慢一些。Table佈局屬於表格形式，不利於SEO優化。Table對於頁面佈局來說，從語法上看是不正確的。
3. DIV 佈局
現在最流行的一種佈局方式，它相比比 Table 更靈活，定位比 Table 更好用，簡單，修改起來也方便。