HTML基礎，HTML標簽，HTML超鏈接
一、1、什麼是HTML： 超文本標記語言，是有標簽和內容（標簽和節點）構成的。
2、HTML5文檔的註釋： <!--註釋內容-->
3、HTML標簽： 由“<” “>” 括起來。
雙標簽（成對）：<標簽名>······</標簽名>
單標簽（不成對）：<標簽名/>
推薦小寫
4、HTML標簽的組成部分： 屬性、實體
屬性是由屬性名和值同時出現： <標簽名 屬性名1=“值” 屬性名2=“值”··· 屬性名N=“值”> </標簽名>
HTML實體 "<" : <
">" : >
"空格" :
"引號" : "
"&" : &
5、HTML 文件的主體結構
1 <!DOCTYPE html> <!--類型說明，DOCTYPE聲明必須放在每一個HTML文檔最頂部，在所有代碼和標識之上。--> 2 <html> 3 <head> <!--頁面設置--> 4 <meta content="text/html; charset=utf-8" /> <!--格式中也要選擇utf-8--> 5 <title>標題<title/> 6 <link type="text/css" rel=stylesheet href="**.css" /> <!--連接引入css文件--> 7 <script type="text/javascript" src="**.js"></script > <!--連接引入js文件--> 8 </head> 9 <body></body> <!--頁面主體，瀏覽器顯示--> 10 </html>
或者css樣式和js全部寫在頁面里
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta content="text/html; charset=utf-8" /> 5 <title>標題<title/> 6 <style type="text/css">寫入本頁的css樣式</style> 7 <script type="text/javascrpt">寫入本頁的js樣式,js文件也可寫在body中</script> 8 </head> 9 <body></body> 10 </html>
6.HTML中的顏色：① 顏色單詞：如：red 、blue、black
②六位十六進位 #000000——#FFFFFF（畫圖中，可提取或者ColorSpy的屏幕取色工具） 前兩位是紅色 中間是綠色 後兩位是藍色
如：白色為#FFFFFF（可縮寫為#FFF）、紅色為#000
二、HTML中的文本標簽，格式化標簽
1、文本標簽
* ① <br/> 換行
* ② <p>···</p> 換段
③ <i>···</i> 斜體
* ④ <em>···</em> 強調斜體
⑤ <b>···</b> 加粗
* ⑥ <strong>···</strong> 強調加粗
⑦ <hn>···</hn> 其中n為1-6的值，標題標簽（加粗，獨立行）
⑧ <cite>···</cite> 引用
⑨ <sub>···</sub> 下標
⑩ <sup>···</sup> 上標
* ⑪ <del>···</del> 刪除線
⑫ <bdo>···</bdo> 文本方向 例：<bdo dir="rtl">···</bdo> 或者 <bdo dir="ltr">···</bdo>
⑬ <abbr>···</abbr> 縮寫
⑭ <details>···</details> 元素細節
⑮ <summqry>···</summqry> 包含details元素的標題
1 例：
2 <details>
3 <summary>HTML 5</summary>
4 This document teaches you everything you have to learn about HTML 5.5 </details>
<!-- 結果是：HTML 5 This document teaches you everything you have to learn about HTML 5.-->
⑯ <time>···</time> 時間
⑰ <dialog>···</dialog> 對話
⑱ <pre> 保留文字在源代碼中的格式
2、格式化標簽
* ① <br/> 換行
* ② <p>···</p> 換段
* ③ <hr/> 水平線
④ <font>···</font> 字體
例：<font size="5" face="arial" color="red">A paragraph.</font>
3、列表
* ① <ul> 無序列表 例：<ul type="square"> </ul> type類型值：discsquare circle
② <ol> 有序列表 例：<ol type="I"> </ol> type類型值：A a i I 1
<ol start="5"></ol> 起始值
* ③ <li> 列表項
④ <dl> 自定義列表
<dt>···</dt> 標題
<dd>···</dd> 內容
三、* HTML中的超級鏈接
屬性：href target title
* <a href=""></a> 超級鏈接標簽
* target： 表示打開方式
_blank 新視窗
_self 本視窗（預設）
_parent 父視窗
_top 頂級視窗
framename 視窗名
title：文字提示屬性
錨點鏈接：
定義一個錨點： <a id="a1">內容</a> (以前使用 <a name="a1">)
使用錨點： <a href="#a1">跳轉到a1處</a>
四、圖片標簽<img>
* <img/> 插入一張圖片
屬性：* src: 圖片名以及URL地址
* alt：圖片載入失敗時才顯示的提示信息、滑鼠放在圖片上提示的字、搜索引擎可以搜到圖片
title：文字提示屬性
width：寬度
height：長度
border：邊框線粗細
<a href="·····"><img src="·····" /></a>點擊圖片鏈接到別的頁面
五、多媒體標簽（HTML 5標簽）
<audio>聲音 <video>視頻 <source>媒介資源 <embed src=" ">嵌入的內容
<map> 客戶端圖像映射。圖像映射（image-map）指帶有可點擊區域的一幅圖像。註釋：<area>永遠嵌套在 <map>內部，<img>中的 usemap 屬性可引用 <map> 中的 id 或 name 屬性
例：
1 <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> 2 3 <map name="planetmap" id="planetmap"> 4 <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" /> <!--alt：替換文本，coords：坐標值，shape：定義區域的形狀（圓形，多邊形，矩形）--> 5 <area shape="poly" coords="129,161,10" href ="mercur.html" alt="Mercury" /> 6 <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" /> 7 </map>
六、* 表格標簽
<table>表格 <caption>標題 <th>表頭標簽 <tr>行標簽 <td>列標簽 <thead>表頭 <tbody>表體 <tfoot>表尾
cellspacing 單元格之間的空間，預設為2px
cellpadding 文字與單元格之間的距離
<td>{colspan 橫跨列數
{rowspan 橫跨行數
{align 水平方向
{valign 垂直方向——{top middle bottom
col ：為表格中的一個或多個列定義屬性值（不常用）
colgroup：定義表格列的組，對列進行組合（不常用）
1 <table border="1"> 2 <caption>people</caption> 3 <tr> 4 <th>name</th> 5 <th>age</th> 6 <th>sex</th> 7 </tr> 8 <tr> 9 <td>Tom</td> 10 <td>20</td> 11 <td>boy</td> 12 </tr> 13 </table>
七、form 表單標簽
1、<form> 表單
屬性：* action：提交的目標地址（URL）
* method：提交方式:get(預設) 和 post
get 方式地址欄可見 長度受限制（IE 2K,火狐8k） 不安全
post 方式 地址欄 不可見 長度不受限制 相對安全
enctype：提交類型
target： 在何處打開
name：為表單起個名字，HTML5不支持，用 id 代替
2、<input> 表單項中的屬性
* name ： 表單項名，用於存儲內容值的。
* value： 輸入的值
size： 輸入框寬度值
maxlength：輸入框 輸入內容的最大長度
readonly：只讀
* display：禁用
* checked：對選擇框指定預設選項
accesskey：快捷鍵（IE：alt+鍵 火狐：alt+shift+鍵）
tabindex：通過數字指定tab鍵的切換順序
* type：表示表單的類型，值如下：
text 單行文本框
Email: <input type="text" name="email" />
posswird 密碼輸入框,密碼欄位中的字元會被掩碼（顯示為星號或原點）
<input type="password" name="pwd" />
checkbox 多選框 ,輸入value值
<input type="checkbox" name="shu[]" value="one" /> one
<input type="checkbox" name="shu[]" value="two" /> two
radio 單選框 ,輸入value值
<input type="radio" name="sex" value="boy" /> boy
<input type="radio" name="sex" value="girl" checked="checked"/> girl
file 文件上傳選擇框
<input type="file" />
button 普通按鈕，但沒有任何行為。button 類型常用於在用戶點擊按鈕時啟動 JavaScript 程式。
<input type="button" value="Click me" onclick="msg()" />
submit 提交按鈕
1 <form action="form_action.html" method="get"> 2 Email: <input type="text" name="email" /> 3 <input type="submit" /> 4 </form>
image 圖片提交按鈕，必須把 src 屬性 和 alt 屬性 與 <input type="image"> 結合使用，預設具有提交功能。
<input type="image" src="submit.gif" alt="Submit" />
reset 重置按鈕，返回第一次打開的時候
<input type="reset" />
