Web基礎之HTML
HTML
版本信息：在文檔的起始用DOCTYPE聲明指定的版本和風格，讓瀏覽器清楚文檔的版本、類型和風格。版本信息分為三種：嚴格型、傳統型（過渡型）、框架型。分別是：1）Strict DTD<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3）Transitional DTD：（常用）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4）Frameset DTD：（不常用了）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
傳統型不需要全名空間，嚴格型需要全名空間；
* 塊狀元素特點(block)：每個塊級元素都從新的一行開始，並且其後的元素也另起一行；元素的寬高、行高及頂底部的距離都可設置；元素寬度在不設置的情況下，是其父容器的100%。* 內聯元素特點(inline)：和其他元素都在一行上；元素的寬高及頂底部邊距不可設置；元素的寬度就是它包含的文字或圖片的寬度，不可改變。* 內聯塊狀元素特點(inline-block)：和其他元素都在一行上；元素的寬高、行高及頂底部邊距都可設置；常用的元素有：—>塊狀元素：<div> <p> <hn> <ol> <ul> <dl> <table> <address> <blockquote> <form> <li>—>內聯元素：<a> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code>—>內聯塊狀元素：<img> <input>* <head>元素：所有其他頭元素的容器；緊隨在起始標籤<html>之後；
包含的子元素：<title>: 標題；出現在瀏覽器頂部；沒有屬性；必須出現 在<head>中；一個文檔只能有一個標題；<meta>: 元數據元素；定義頁面的編碼格式或刷新頻率等；（為空標記；常用屬性有content、http-equiv）;<meta http-equive=「Content-Type」 content=「text/html; charset=utf-8」>
<script>:JavaScript腳本；
<style> :定義內部樣式表；
<link> : 為當前頁面引入其他資源；
* <body> 元素：文檔主本，包含所有要顯示的內容；
語義化：明白每個標籤的用途，即在什麼情況下使用該標籤合理。
—> 作用：* 更容易被搜索引擎收錄；
* 更容易讓屏幕閱讀器讀出此網頁內容；
* 文本標記 ：
1）特殊字元 ：
2）標題元素 <hn> :定義大小
3）段落元素 <p> :提供了結構化文本的方式；文本會用單獨的段落顯示（與前後的文本都換行分開；並會添加一段額外的垂直空白距離，作為段落間距）；
4）換行元素 <br>
5) 分區 元素< span >和< div >:常用於頁面佈局；
—> <span> 文本 </span> :不會影響佈局，常用於同一行中的部分元素；可為文字設置單獨的樣式；
—> <div> 文本 </div> :獨佔一行，常用於多行的情況下；
6) 塊級 元素( block )和 行內 元素( inline ):
—> 如: <div> 、 <p> 、 <hn> 、 <li> ;默許情況下，會獨佔一行，即前後都會自動換行；
—> 行內元素：可以與其他元素位於同一行，即不會換行如 <span> 、 <img> 、 <a> ;
7) 圖像 元素< img >:
—> 必須屬性： src
—> 常用屬性: width、height;(不建議寬高都設置，若不知原比例則圖像會變形，一般只設置一個，系統會自動按比例縮放)；
8） 鏈接 元素 <a> :創建一個超鏈接
—> 語法：<a href=「」 target=「」>文本</a>
—> href 屬性：鏈接url
—> target 屬性：目標，可取的值有： _self :默認值，替換當前頁面；
_blank :打開的新的頁面；
9） URL ：統一資源定位器，組成:協議、機名、路徑名、文件名；[相對路徑和絕對路徑]
10） 錨點 ：是文檔中某行一個記號，用於鏈接到文檔中的某一行。即實現當前頁面不同位置之間的跳轉；
使用：—1—>使用a在目標位置定義一個錨點<a name=「link1」><a>
—2—>使用連接a鏈接到錨點（在錨點名前加上#即可），href指向link1，如<a href=「 # link1」></a>
[ 注意 ：#後面不是一個頁面，而是一個錨點；頁面不同位置之前的跳轉要在有滾動條的情況下才有效] ；
直接回到頁面頂端：早期版本里要先在頂端定義錨點，再定義鏈接，但由於非常常用，現在簡化為只用一個#即可: <a href=「#」>文本</a>
<em> 需要強調的文本 </em> //會以斜體表示
<strong> 需要強調的文本 </strong> //會以粗體顯示
<q> 引用文本 </q> //瀏覽器會自動對引用文本添加引號
<blockquote> 長文本引用 </blockquote> //瀏覽器會自動縮進
：空格
<hr> : 分隔橫線
<address> 取系地址信息 </address> //瀏覽器會自動默認顯示為斜體
<code> var i=i+300; </code> //用於插入代碼
<pre> 多行代碼 </pre >
列表標記
所有列表都由列表類型和列表項組成：
—>列表類型：有序列表<ol>(ordered list)和無序列表<ul>(unordered list);
—>列表項：<li><list item>,用於指示具體的列表內容；
[注意：定義一個列表必須使用<ol>或<ul>,列表的每個內容，使用一個<li>]
1)無序列表：<ul>只能包含具體的列表項元素<li>,列表中包含的每一項都必須包含在起始標記<li></li>之間；
2）有序列表：<ol>只能包含具體的列表項元素<li>,列表中的每一項內容都必須包含在<li></li>之間；
3）列表嵌套：將列元素嵌套使用，可創建多層列表，即可將帶個列表都放在某個li裏；
** 常用於創建文檔大綱、導航菜單等；
* 表格<table>
通常用來組織結構化的信息，由一系列單元格組成；表格的數據保存在單元格里；顯進網格數據，常用於頁面的佈局；
1）創建：
—>表格：<table> 行 <tr> 單元格 <td> </td> </tr> </table>
2）表格常用屬性：
—> border：表格外邊框寬度，會為每個單元格應用邊框
—> width/height：表格的寬和高
—> align：水平對齊方式，可選有的：left、right、center
—> cellpadding屬性：單元格內容與單元格邊框之前的距離
—> cellspacing:單元格之間的距離
[注意：表格的調試默認自適應（按內容長度自適應）；對表格的寬設定值，每列的寬則會按單元格的長度的比例分配；對列設置寬，會影響整列；對列設置高會影響整行]
3）單元格<td>常用屬性：
—> width/height:單元格的寬和高
—>align:水平對齊方式，可選的值有：left、right、center
—>valign：垂直對齊方式，可選的值有：top、middle、bottom;
4) 表格的標題<caption>
默認在表格的上方居中顯示；只能位於<table></table>裏，且只能對每個表格定義一個標題，且作為第 一個子元素存在；
摘要：<table summary=「表格簡介文本」>//，summary中的內容不會被瀏覽器顯示出來，作用是增加表格的可讀性（語義化），使搜索引擎更好的讀懂表格。
5）行分組（表格特有）
將多個行作為一組，進行統一的設置的時候，使用專門的對表格實現分組的元素；
—> 表格可分為3個部分：表頭、表主體和表尾
—> 表頭行分組：<thead></thead>；只能出現一次
—> 表主體行分組：<tbody></tbody>:可出現多次；
—> 表尾行分組:<tfoot></tfoot>:只能出現一次
[注意：行分組只能出現在table裏，只能包含tr元素]；
6）不規則表格
對<td>,有colspan、rowspan屬性可設置單元格的跨列或跨行；
—>colspan：水平方向(橫向)延伸單元格，值為正整數，表示水平延伸單元格數；
—>rowspan：垂直方向(豎向)延伸單元格，值為正整數，表示垂直延伸單元格格數；
7)表格的嵌套
在單元格中放置另外一個表在表單元格中，即<td>元素中再包含<table>元素；可用於設計複雜表格或複雜佈局；
*表單<form>
作用：
—> 動態交互:通過查看、填寫(頁面上錄入數據)並提交表單信息到伺服器
—> 兩個基本部分：
—> 實現數據交互的可見界面元素，如文本框或按鈕
—> 提交後的表單處理
—> 界面元素
—> 使用<form>元素創建表單
—> 在<form>元素中添加其他表單可以包含的控制項元素
1）表單元素<form>
使用<form></form>標記；承載其他交互的元素，以表單作為單位提交數據；
主要屬性：
—> action：定義表單被提交時發生的動作，通常包含伺服器腳本的url,若沒有填寫，默認為當前url
—> method：指出表單數據提交的方式，如get或post
—> entrype：表單數據進行編碼的方式,如utf-8
2）<input>元素
用於收集用戶的信息；是一個空標記，語法為<input/>
主要屬性：
—> type：決定元素的類型；
—> value：取決於元素的類型(type),用作初始值(文本槓/密碼框)、用於提交的值(單/多選框)、按鈕上的文本顯示(提交/重置/普通按鈕)；
—> name: 單選或多選框的分組；
3）文本框與密碼框
文本框<input type=「text」/>
密碼框<input type=「password」/>
主要屬性：
—>value：用作初始值；
—>maxlength:限制輸入字數；
—>readonly：設置文本控制項只讀，老版本可寫成readonly=「」;當前寫成readonly=「readonly」;
4) 單選框與多選框
單選框：<input type = 「radio」/>
多選框：<input type = 「checkbox」/>
主要屬性：
—> value：當提交form時，若選擇了此單選框，則value的值就被發送到伺服器；
—> name：單選或多選框的分組；
—> checked：設置初始狀態是否為選中；老版本可寫成checked=「」;當前寫成checked=「checked」;
5)按鈕：
+ 提交按鈕:<input type = 「submit」/>傳送表單數據給伺服器或其他程序處理，並刷新頁面；
+ 重置按鈕：<input type =「reset」/> 清除表單的內容並把所有表單控制項恢復到默認值
+ 普通按鈕：<input type=「button」/> 用於執行客戶端腳本，為其設置onclick事件，才會有功能
主要屬性：value：在按鈕上的文本顯示；
6）隱藏域與文件選擇框
隱藏域：<input type = 「hidden」/> 不會顯示，常用於在頁面上隱藏那些不希望被用戶看到的數據；
文本選擇框：<input type=「file」> 選擇要上傳的文件
7）<label>元素
主要屬性：for: 表示與該元素相關聯控制項的id值
作用：使用for屬性關聯其他元素，便單擊文本時，就像單元關聯的控制項 一樣；相當於獲取焦點
8）選項框
兩種：下拉選項框與滾動列表
—> 創建選項框<select>
—> name:選項框全名
—> size: 大於1，則為滾動列表，即是由size來區分下拉和滾動列表
—> multiple：設置多選
—> <option>創建選項
—>value：選項，用於提交的值
—> selected：預造中的項，老版本中可寫selected=「」,當前寫成selected=「selected」
9)<textarea>元素
多行文本輸入框<textarea>文本<textarea/>
屬性：
—> cols：指定文本區域列數
—> rows: 指定文本區域的行數
—> readonly：設置只讀
10）表單元素分組(表單元素特有)
—> <fieldset>: 為表單控制項分組
—> <legend>: 為分組指定一個標題
推薦閱讀：
