标題标簽h：

html中一共有六級标簽 —> h1最大 h6最小

6級标題中 h1最重要表示一個網頁中的主要内容 h2到h6的重要性依次遞減

對于搜尋引擎來說，h1的重要性僅次于title。搜尋引擎檢索完title,會立即檢視h1中的内容。h1會影響頁面在搜尋引擎中的排名。

一個頁面隻能寫一個h1

段落标簽p:

p标簽獨占一行

換行标簽br和水準線标簽hr：

在html中，字元之間寫再多空格，也隻當做一個空格解析。換行也當做一個空格解析。

使用br換行（自結束标簽），多個br标簽可以連續使用，使用了多少個br标簽就會換多少行。

hr在頁面中生成一條水準線（自結束标簽）

圖檔标簽img：

使用img标簽向網頁中引入外部圖檔

<img src='url' alt='text' width='200' height='200'/>

1. text：

當圖檔無法顯示時的替換文字。而且搜尋引擎通過alt中的文字來識别不同的圖檔。如果不寫alt屬性，則搜尋引擎不會對img中的圖檔進行收錄。

2.width和height：

用來設定圖檔的寬高。預設機關是px。

（當寬度和高度屬性隻設定一個時，另一個也會同時等比例調整大小。）

手動指定圖檔的寬高，可能會導緻圖檔變形。隻指定其中一個（寬or高）不會變形

3. title：

當滑鼠懸停在圖檔上時，彈出的提示框中顯示的内容

4.圖檔的格式：

JPEG(JPG) ：支援的顔色多，可壓縮，不支援透明。一般用來儲存照片等顔色豐富的圖檔。

GIF：支援動态圖，支援的顔色少，支援簡單的透明。一般在顔色圖檔單一或動态圖時使用GIF。

PNG：支援的顔色多，支援複雜的透明。用來顯示顔色複雜的透明圖檔。

圖檔的使用原則：效果不一緻，使用效果好的。效果一緻，使用小的。

路徑：

相對路徑：都是從目前.html檔案所在的檔案夾開始查找

1.同級：圖檔和.html檔案存儲在同一個檔案夾中

格式：src=“QRCode.jpg” 在.html檔案所在的檔案夾中尋找名為QRCode.jpg的圖檔

2.下級：存儲圖檔的檔案夾和.html檔案存儲在同一個檔案夾中

格式：src=“images/QRCode.jpg” 在.html檔案所在的檔案夾中尋找名為images的檔案夾，然後在images檔案夾中尋找名為QRCode.jpg

3.上級：圖檔所在的位置和存在.html檔案的檔案夾在同一個檔案夾中

格式：src="…/QRCode.jpg" 在.html檔案所在的檔案夾中找到該檔案夾所在的上一級檔案夾，然後在上一級檔案夾中尋找圖檔

使用 …/ 傳回目前html所在的上一級目錄

絕對路徑：從指定的盤符開始查找

格式: src=“C:\Users\Jonathan_Lee\Desktop\HTML基礎\QRCode.jpg”

使用路徑要注意的問題：

路徑中不要出現中文，否則可能出現未知的問題

通過相對路徑指定圖檔，不能跨盤符。例如.html檔案在C槽, 那麼不能去查找D盤圖檔

路徑使用反斜杠/，不要使用正斜杠\。

超連結a：

一個未通路過的連結顯示為藍色字型并帶有下劃線。通路過的連結顯示為紫色并帶有下劃線。點選連結時，連結顯示為紅色并帶有下劃線。

1. href 屬性：

指定連結的位址

<a href="url" target="_blank" rel="external nofollow" >連結文本或圖檔等</a>

2.實作點選超連結後不跳轉：

<a href="javascript:;" target="_blank" rel="external nofollow" >内容</a>

2 在onclick響應函數的最後，return false 取消預設行為

3.href=’#’ 點選該超連結，會自動跳轉到目前頁面的頂部。

3.錨點：

href=’#id名’ 可跳轉到目前頁面具有該id名的元素位置處。

使用錨點，直接跳轉到指定位置，不會出現過度的滾動動畫。

在url後添加#id名，可以直接跳轉到指定url的指定id名所在的位置。

如

<a href="13-錨點測試界面.html#bottom" target="_blank" rel="external nofollow" target="_blank">

跳轉到錨點測試界面` 跳轉到該html檔案中id名為bottom所在的位置

4.發送郵件的超連結mailto：

點選連結後會自動打開計算機中預設的郵件用戶端，并将收件人自動設定為mailto後的郵箱位址（[email protected]）。

5.target屬性：

用來指定打開連結的位置：預設target=’_self ’ 在目前頁面打開

target="_blank" 在新視窗打開連結的文檔（網頁）

target = ‘name’ name是内聯架構中name屬性的值，可以在内聯架構中打開連結。

6.title屬性：

和img标簽中的title屬性相同，都是控制滑鼠懸停時提示框中顯示的内容。

7.base标簽：

放在head标簽中，用來統一指定超連結的打開方式

如

<base target="_blank">

則該網頁中所有超連結都在新視窗中打開。

如果同時在head中的base标簽和body中的a标簽中指定a的打開方式，按照a的打開方式執行。

清單：

1.無序清單ul：資料無先後之分

ul中最好隻包含li标簽，但是在li标簽中可以繼續添加其他标簽。

預設用粗體小黑圓圈标記(disc)，通過type屬性修改項目前符号，但是一般在css中修改。

應用場景：新聞清單 / 商品清單 / 導覽列等。

<ul>
    <li>需要顯示的條目内容</li>
	<li>需要顯示的條目内容</li>
	<li>需要顯示的條目内容</li>
	<li>需要顯示的條目内容</li>
</ul>

2.有序清單ol:資料有先後之分

<ol>
    <li>演員</li>
    <li>小醜</li>
    <li>女人不應該讓男人太累</li>
    <li>男人不應該讓女人流淚</li>
</ol>

3.自定義清單dl：

應用場景：做網站的尾部資訊 / 圖文混排

<dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
</dl>
//dt(definition title), 定義清單中的标題
//dd(definition description), 定義标題對應的描述
//一個dt可以沒有對應的dd，也可以有多個對應的dd，建議使用一個dt對應一個dd

表格标簽table：

<table> //table代表整個表格
    <tr>  //tr是表格中的一行
        <td>需要顯示的内容</td>  //td是一行中的一個單元格
    </tr>
</table>

注意：表格标簽有一個邊框屬性，這個屬性決定了邊框的寬度。預設情況下這個屬性的值是0, 是以看不到邊框

1.table的屬性：

<!--
1.寬度和高度的屬性：table标簽和td标簽使用
1.1表格的寬度和高度預設是按照内容的尺寸來調整的, 也可以通過給table标簽設定width/height屬性的方式來手動指定表格的寬度和高度
1.2如果給td标簽設定widht/height屬性, 會修改目前單元格所在行/列的寬度和高度, 不會影響整個表格的寬度和高度

2.水準對齊align：table标簽 , tr标簽和td标簽使用
  table的align屬性：控制表格在水準方向的對齊方式
  tr的align屬性：控制目前行中所有單元格内容的水準方向的對齊方式
  td的align屬性：控制目前單元格中内容在水準方向的對齊方式
注意點: 如果td中設定了align屬性, tr中也設定了align屬性, 那麼單元格中的内容會按照td中設定的來對齊

3.垂直對齊valign：隻能給tr标簽和td标簽使用
  tr的valign屬性：控制目前行中所有單元格中的内容在垂直方向的對齊方式
  td的valign屬性：控制目前單元格中的内容在垂直方向的對齊方式
注意點:  如果td中設定了valign屬性, tr中也設定了valign屬性, 那麼單元格中的内容會按照td中設定的來對齊

3.外邊距和内邊距的屬性：隻能給table标簽使用
3.1.外邊距cellpadding：單元格和單元格之間的距離  預設情況下是2px
3.2 内邊距cellspacing：單元格的邊框和文字之間的間隙  預設情況下是1

-->

<table  width="300px" height="300px" align="right" cellspacing="12px" cellpadding="1">
    <tr valign="bottom">
        <td width="50px" height="50px">1.1</td>
        <td valign="top">1.2</td>
    </tr>
    <tr align="center">
        <td align="right">2.1</td>
        <td>2.2</td>
    </tr>
</table>

2.表格标題caption和表頭th

<!--
1.表格标題caption
将标題寫在caption标簽中, 那麼标題就會自動相對于表格的寬度居中
注意點:caption一定要寫在table标簽中, 否則無效, 并且要緊跟在table标簽後面

2.标題單元格标簽th（表頭：表格第一行）th标簽在單元格中 自動居中+文字加粗

3.td：存儲資料  th：存儲目前列的标題
-->

<table bgcolor="black" cellspacing="1px" width="800px" align="center">
    <caption>
        <h2>今日小說排行榜</h2>
    </caption>
    <tr bgcolor="#a9a9a9">
        <th>排名</th>
        <th>關鍵詞</th>
        <th>趨勢</th>
        <th>今日搜尋</th>
        <th>最近七日</th>
        <th>相關連結</th>
    </tr>
    <tr bgcolor="white" align="center">
        <td>1</td>
        <td align="left">暴走大事件</td>
        <td>
            <img src="images/up.jpg">
        </td>
        <td>623557</td>
        <td>4088311</td>
        <td>
            <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >貼吧</a>
            <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >圖檔</a>
            <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >百科</a>
        </td>
    </tr>
    <tr bgcolor="white" align="center">
        <td>1</td>
        <td align="left">暴走大事件</td>
        <td>
            <img src="images/up.jpg">
        </td>
        <td>623557</td>
        <td>4088311</td>
        <td>
            <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >貼吧</a>
            <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >圖檔</a>
            <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >百科</a>
        </td>
    </tr>
</table>

3.表格的結構

表格分為：标題caption+ 表頭thead + 主體tbody + 頁尾tfoot

<table>
    <caption>表格的标題</caption>
    <thead>
        <tr>
            <th>每一列的标題</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>資料</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>資料</td>
        </tr>
    </tfoot>
</table>
//如果沒寫tbody, 系統會系統添加tbody
//如果指定了thead和tfoot, 那麼在修改整個表格的高度時, thead和tfoot有自己預設的高度, 不會随着表格的高度變化而變化
//tr并不是table的子元素 而是tbody的子元素 通過 table > tr 無法選中行 隻能通過 tbody > tr 選中行

4.合并單元格

<!--
1.水準方向上的單元格合并colspan 把某一個單元格當做多個單元格來看待(水準方向)
例如:
<td colspan="2"></td>
含義: 把目前單元格當做兩個單元格來看待

注意點:
1.由于把某一個單元格當做了多個單元格來看到, 會多出一些單元格, 是以需要删掉一些單元格才能正常顯示
2.一定要記住單元格合并永遠都是向後或者向下合并, 而不能向前或者向上合并

2.垂直方向上的單元格合并rowspan屬性 把某一個單元格當做多個單元格來看待(垂直方向)
例如:
<td rowspan="2"></td>
含義: 把目前單元格當做兩個單元格來看待
-->
<table bgcolor="black" width="500px" height="300px" align="center">
    <tr bgcolor="white">
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>
    <tr bgcolor="white">
        <!--<td></td>-->
        <td></td>
        <td></td>
    </tr>
    <tr bgcolor="white">
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

表單标簽form:

表單的結構和常用表單項：

<form>
    <!--文本輸入框-->
    賬号:<input type="text"><br>
    <!--密碼輸入框-->
    密碼:<input type="password"><br>
    <!--value屬性設定預設值-->
    賬号:<input type="text" value="jiaody"><br>
    <!--單選框:預設情況下單選框不會互斥(互斥指隻能選中一個), 要想單選框互斥,必須給每一個單選框标簽都設定一個name屬性(name屬性值相同的是一組，在同一組中的單選框會互斥) -->
    性别:
    <input type="radio" name="xx" checked>男
    <input type="radio" name="xx">女
    <input type="radio" name="xx" >保密<br>
    <!--多選框-->
    愛好:
    <input type="checkbox">籃球
    <input type="checkbox">足球
    <input type="checkbox" checked="checked">棒球
    <input type="checkbox" checked="checked">足浴
     <!--定義一個普通按鈕-->
	<input type="button" value="我是按鈕" >
	<!--
	定義重置按鈕:清空表單中的資料
	注意點:
	重置按鈕有預設的按鈕标題, 預設叫做 重置
	也可以通過value屬性來修改預設标題
	-->
	<input type="reset" value="清空">
	
	<!--
	表單送出按鈕: 将表單中的資料送出到遠端伺服器
	注意點:
	要想把表單中的資料送出到遠端伺服器,必須滿足兩個條件
	1.告訴表單需要送出到哪個伺服器(form标簽的action屬性)
	2.隻有設定name屬性的表單項才會被送出
	-->
	<input type="submit">
	<!--
	隐藏域：不會出現在界面中 但是如果設定name屬性，在表單送出時會以鍵值對的形式送出
	-->
	<input type="hidden" name="aaa" value="it666">
</form>

<!-- 表單：将使用者資訊送出給伺服器 （應用場景：搜尋引擎的搜尋框 注冊登入等）
		form标簽中有action屬性，指向的是一個伺服器的位址。
		 當送出表單時會送出到action屬性對應的位址
		
	    input
	    type='text' (預設）單行文本框  (value屬性是預設值)
	    type='password' 密碼框 (value屬性是預設值)
        type='radio' 單選按鈕 
        type='checkbox' 多選按鈕 
        type='button' 按鈕
        type='reset' 重置按鈕
        type='submit' 表單送出按鈕 (預設送出按鈕的文字是“送出”，通過value屬性可以改變）
        type='hidden' 隐藏按鈕 不會在頁面中顯示 設定name屬性可以送出
        單選和多選按鈕都通過name屬性進行分組 name相同的是一組
        預設選中 checked='checked'
        如果屬性的取值和屬性的名稱一樣(checked = 'checked')，可以簡寫(checked)，但是在XHTML中必須寫上取值
		需要使用者選擇但是不需要使用者直接填寫内容的表單項（單選和多選等） 還必須指定一個value屬性，這樣被選中的表單項的value屬性将會最終送出給伺服器
	    
		如果希望表單項的資料送出到伺服器中還需給表單項設定name屬性 
		使用者填寫的資訊會附在url位址後 以查詢字元串的形式發送給伺服器：url位址？查詢字元串
		格式： 屬性名=屬性值&屬性名=屬性值&屬性名=屬性值
     
		-->

表單标簽：h5

<!--
    可以自動校驗輸入的内容是否符合郵箱的格式
    -->
    郵箱:<input type="email"><br>
    <!--
    可以自動校驗輸入的内容是否是URL位址
    -->
    域名:<input type="url"><br>
    <!--
    輸入框中隻能輸入數字
    -->
    電話:<input type="number"><br>
    <!--
    可以通過月曆來選擇時間
    -->
    時間:<input type="date"><br>

    <!--
    可以通過取色闆來選擇顔色
    -->
    顔色: <input type="color"><br>

label标簽：

<!--
  label标簽的作用：點選輸入框前的文字時，使對應的輸入框聚焦（将文字和輸入框綁定在一起）
  綁定的格式：
  1.将文字用label标簽包裹起來，并添加for屬性 
  2.給輸入框添加id 
  3.label中for屬性值和input中id屬性值相同的會綁定在一起
-->
<form action="">
    <label for="account">賬号:</label><input type="text" id="account"><br>
    <label for="pwd">密碼:</label><input type="password" id="pwd"><br>
</form>

待選項datalist：

<!--
datalist标簽: 給輸入框綁定待選項（當點選輸入框或者輸入不完整的内容時，會在輸入框下方彈出待選項）
格式:
<datalist>
    <option>待選項内容</option>
</datalist>

給輸入框綁定待選清單：
1.添加一個輸入框，設定list屬性
2.添加一個datalist清單，添加id,屬性值和輸入框的list屬性值相同

-->

請輸入你的車型: <input type="text" list="cars">

<datalist id="cars">
    <option>奔馳</option>
    <option>寶馬</option>
    <option>奧迪</option>
    <option>路虎</option>
    <option>賓利</option>
</datalist>

下拉清單select和多行輸入textarea:

<!--
select标簽：下拉清單(不能輸入内容, 但是可以直接在清單中選擇内容)
selected屬性  預設選中
格式:
<select>
    <optgroup label="分組名稱">
        <option>清單資料</option>
    </optgroup>
</select>

textarea标簽: 多行輸入框
格式:
<textarea>
</textarea>
注意點:
1.預設情況下多行輸入框可以無限換行，有自己的寬高，并且可以手動拉伸
2.可以通過cols和rows來指定輸入框的寬度和高度, 指定以後還可以無限往下輸入
-->

<select>
    <optgroup label="北京">
        <option>朝陽區</option>
        <option>昌平區</option>
        <option>通州區</option>
    </optgroup>
    <optgroup label="廣州">
        <option>天河區</option>
        <option>越秀區</option>
        <option>黃浦區</option>
    </optgroup>
</select>
<hr>
<textarea cols="20" rows="5">
</textarea>

分組fileset和分組标題legend

fieldset标簽會在包含的文本和input等表單元素外面形成一個方框，legend元素作為标題。

表單練習

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://www.baidu.com">
    <fieldset>
        <legend>使用者資訊</legend>
<p>
    賬号：<input type="text" name="account">
</p>
<p>
    密碼：<input type="password" name="pwd">
</p>
<p>
    性别：<input type="radio" name="sex" value="male" checked>男</input>
<input type="radio" name="sex" value="female">女</input>
<input type="radio" name="sex" value="baomi">保密</input>
</p>
<p>
    愛好：<input type="checkbox" name="hobby" value="basketball">籃球</input>
    <input type="checkbox" name="hobby" value="soccer" checked>足球</input>
    <input type="checkbox" name="hobby" value="run">跑步</input>
</p>
<p>
    簡介：<textarea name="desc" cols="30" rows="5"></textarea>
</p>
<p>
    生日：<input type="date" name="birthday">
</p>
<p>
    郵箱：<input type="email" name="email">
</p>
<p>
    電話：<input type="number" name="phoneNum">
</p>
<p>
    <input type="submit">&nbsp;&nbsp;&nbsp;<input type="reset">
</p>
    </fieldset>
</form>
</body>
</html>

HTML--标簽标題标簽h：段落标簽p:換行标簽br和水準線标簽hr：圖檔标簽img：路徑：超連結a：清單：表格标簽table：表單标簽form:分組fileset和分組标題legend表單練習value和name屬性

value和name屬性

單選和多選框，必須設定name屬性值相同才能分到一組。

按鈕的value屬性，設定的是按鈕上的文字。

除了按鈕，其他表單項的value屬性是表單送出時的值。

隻有設定了name屬性的表單項，才能被送出。