第一章
1、使用瀏覽器去訪問的程序，叫網頁
2、web代碼存放在服務器
? 代碼分為兩種：① 運行在瀏覽器端：前端代碼
? ? ? ? ? ? ? ? ? ? ? ? ② 運行在服務器端：后端代碼
? 完整的網站包括兩部分：前端+后臺
3、技術
? ? ① 靜態頁面（按照產品設計圖來編寫網頁 .html，網頁的技術：html,css）
? ? ② 添加功能：動態特效，頁面交互。技術：javascript,jQuery,DOM
? ? ③ 和服務器交互。技術：server,php,ajax
4、復雜開發：html5高級，框架(提高代碼效率)(bootstrap, node.js,?angular.js)，移動端開發，微信開發
1、HTML(超文本標記語言 Hyper Text Markup Language)是網頁內容的載體
? ? 內容就是網頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等
2、CSS(層疊樣式表 Cascading Style Sheets)樣式是表現
? ? 就像網頁的外衣，比如標題字體、顏色變化、為標題加背景圖片、邊框等，所有這些用來改變內容外觀的東西稱之為表現
3、JavaScript(腳本語言)用來實現網頁上的特效效果
? ? 如焦點新聞的輪換
4、PHP(超文本預處理器 Hypertext Preprocessor)是一種通用開源的腳本語言
? ? 現在的PHP是網站制作的綜合稱呼，其包括HTML(DIV+CSS)、JS(jQuery、ajax)、PHP、MySQL、Apache等技術
5、軟件(software)是一系列按照特定順序組織的計算機數據和指令的集合
? ? ① C/S軟件(Client/Server?客戶機/服務器)?由程序員開發，由用戶下載、安裝、升級、維護的軟件，如QQ、PS、DW、YY
? ? ② B/S結構(Browser/Server?瀏覽器/服務器模式)?用瀏覽器打開，由程序員開發，由程序員升級、維護的軟件，如網站、圖書管理系統
_______________________________________________________________________________________
<noscript></noscript>? 用來定義腳本未被執行時的替代內容(文本)，可被用于可識別<script>標簽但無法支持其中的腳本的瀏覽器
注：如果瀏覽器支持腳本，則不會顯示出?noscript?元素中的文本
如：<noscript>請開啟瀏覽器的JavaScript功能，或使用支持JavaScript的瀏覽器訪問</noscript>
將favicon.ico作為網站的title標識
<link?rel="icon"?href="static/images/favicon.ico"?type="image/x-icon" />
<link rel="shortcut?icon"?href="static/images/favicon.ico"?type="image/x-icon" />
注意:?一般不需要在html中加此標識，只需要在web根目錄添加一個favicon.ico即可
____________________________________________________________________________________
WWW(World Wide Web)萬維網：通過網絡訪問網頁
telnet：遠程登錄
BBS：電子公告板，俗稱論壇
實現技術原理：分組交換原理、TCP/IP協議簇
web指在網絡環境下的應用程序，俗稱網頁，由瀏覽器(Browser)、服務器(Server)、通信協議(http)組成
主流瀏覽器(5款)：Chrome，IE，Firefox，Safari，Opera
360瀏覽器：雙核：基于IE和Chrome
Apple Safari：蘋果瀏覽器
瀏覽器功能：1、提交請求
? ? ? ? ? ? ? ? ? ?2、解析HTML、CSS、JavaScript
? ? ? ? ? ? ? ? ? ?3、能以圖形化的方式顯示文檔
服務器功能：1、存儲Web上的信息
? ? ? ? ? ? ? ? ?? 2、響應瀏覽器請求并執行服務器程序
? ? ? ? ? ? ? ? ?? 3、具備基本的安全性功能
常用的服務器：Tomcat、IIS、Apache、Nginx
____________________________________________________________________________________
HTML：Hyper Text Markup Language超文本（具備特殊功能）標記（超文本的組成形式）語言（擁有自己的語法結構）
以 .html 或 .htm 結尾
腳本語言：javascript，vbscript
1、基礎語法：在HTML中，用于描述功能的符號稱為標記，必須用<>括起來
? ? ① 封閉類型標記必須成對出現
? ? ②非封閉類型標記也稱為空標記、單標記，如：<標記>或<標記/>
? ? ③ <!--注釋--> ? ?代碼注釋的作用是幫助程序員標注代碼的用途，過一段時間后再看這段代碼，能很快回憶起來這段代碼的用途
2、元素嵌套：① 注意嵌套順序（完整嵌套）
? ? ? ? ? ? ? ? ? ? ?② 注意嵌套代碼的縮進（用Tab鍵/空格縮進）
3、屬性和值：屬性用來修飾元素的
? ? 語法：<標記 屬性="值" 屬性="值"></標記>
? ? 標準屬性：又稱為通用屬性，頁面上所有的標記都會具備的屬性
? ? ? ? ? ? ? ? ? ? ①id? ? ? ?頁面元素獨一無二的標識
? ? ? ? ? ? ? ? ? ? ②title??鼠標移入到元素上時所顯示的內容
? ? ? ? ? ? ? ? ? ? ③class(css中使用) ?? 定義元素的類選擇器
? ? ? ? ? ? ? ? ? ? ④style(css中使用) ?? 定義元素內聯樣式
4、注釋：不會被瀏覽器解析運行（解釋說明，便于維護）
? ? 注意：① 注釋不能嵌套注釋
? ? ? ? ? ?? ② 注釋不能位于<>中
5、文檔結構
? ? ① 文檔類型聲明
? ? ? ? 作用：指定文檔的版本和類型
? ? ? ? 語法：放在頁面最頂端：<!doctype html>
? ? ② html頁面
? ? ? ? 語法：<html></html>
? ? ? ? 又稱為 html根標簽
? ? ? ? 內容：有兩個子元素
? ? ? ? 1、<head></head>
? ? ? ? ? ? 網頁頭部：是其它頭元素的標記
? ? ? ? ? ? 作用：定義頁面中的全局信息
? ? ? ? ? ? 包含內容：①<meta charset="utf-8">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 作用：指定網頁的編碼格式為utf-8，告訴瀏覽器按照utf-8的格式解析內容
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 注意：網頁文件的編碼也必須為 utf-8
? ? ? ? ? ? ? ? ? ? ? ? ? ? ② <meta name="keywords" content="關鍵字的位置">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ③ <meta name="descoration" content="描述位置">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ④ <script></script>定義或引入JS文件
? ? ? ? ? ? ? ? ? ? ? ? ? ? ⑤ <style>定義內部樣式
? ? ? ? ? ? ? ? ? ? ? ? ? ? ⑥ <link>引入外部樣式
? ? ? ? ? ? ? ? ? ? ? ? ? ? ⑦<title>網頁標題</title>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 作用：定義頁面中的標題信息
? ? ? ? 2、<body></body>
? ? ? ? ? ? 網頁主體：顯示頁面的主體內容
? ? ? ? ? ? 屬性：① text：控制整個頁面的文本顏色
? ? ? ? ? ? ? ? ? ?? ② bgcolor：控制整個頁面的背景顏色
____________________________________________________________________________________
文本標記
1、特殊字符
xss漏洞,例如: 瀏覽器接收到js的<,認為是html標簽的開始，會把接收到的字符串當腳本執行
? ? ① 在html中，任意多個空格，和回車，最后都會被解析成1個空格
? ? ② 由<>所包裹的文本，會當成標記被解析
? ? ③ 通過轉義字符的特殊表現方式表示特殊效果
顯示結果 ? ? ? ? ? ? ? ? ?實體名稱 ? ? ? ?實體編號
?<（less than）? ? ? ??<? ? ? ? ? ?<
?>（greater than）? ?>? ? ? ? ? ?>
?空格? ? ? ? ? ? ? ? ? ? ?? ? ? ? ?  ? ?（較大的空格,小空格不需要轉義）
??? ? ? ? ? ? ? ? ? ? ? ? ??©
?￥? ? ? ? ? ? ? ? ? ? ? ? ? ?¥? ? ? ? ?¥
?××
?&? ? ? ? ? ? ? ? ? ? ? ? ? ? ?&? ? ? ?&
?"? ? ? ? ? ? ? ? ? ? ? ? ? ? ??"? ? ? ?"
?'? ? ? ? ? ? ? ? ? ? ? ? ? ??'(IE不支持)'
注：實體名稱易于記憶，但瀏覽器支持性沒有實體編號好
2、文本樣式
?<b></b>? ? ? ??加粗
?<i></i>? ? ? ? ??斜體
?<u></u>? ? ? ? ?下劃線
?<s></s>? ? ? ? ?刪除線
?<sup></sup>??上標
?<sub></sub>??下標
? <em></em> ? ? 斜體，強調
? <strong></strong> ?粗體，強調
? <q></q> ? ? ? ? ?引用文本(簡短文本)
? <blockquoto></blockquoto> ?引用長文本
? <address></address> ?聯系地址信息，斜體
? <code></code> ?一行代碼
? <pre></pre> ? ? ?多行的代碼段，會保留空格和回車，用來展示源代碼
3、標題元素
? ? 作用：以標題的方式顯示文本
? ? 表現方式：① 垂直的空白間距
? ? ? ? ? ? ? ? ? ? ② 改變字體大小，加粗顯示
? ? ? ? ? ? ? ? ? ? ③ 獨占一行
? ? 語法：<hn></hn> ? ? ? ? ? ?? n：1~6
? ? ? ? ? ?? <h1></h1> ?? 1級標題
? ? ? ? ? ?? ……
? ? ? ? ? ?? <h6></h6> ?? 6級標題
4、段落元素
? ? 作用：以段落的形式顯示文本
? ? 語法：<p></p>
? ? 表現形式：① 具備垂直空白間距
? ? ? ? ? ? ? ? ? ? ② 獨占一塊
5、換行元素
? ? 語法：<br>或<br/>
6、分割線元素
? ? 作用：在頁面中顯示線條
語法：<hr/>
? ? 屬性：① size ? ?? 尺寸，大小(以 px 為單位)
? ? ? ? ? ?? ② width ?? 寬度(以 px 為單位)
? ? ? ? ? ? ?③ align ? ? 線條的水平對齊方式，取值：left,center,right（默認居中顯示）
? ? ? ? ? ?? ④ color ? ? 顏色
7、預格式化
作用：保留源文檔中的格式。即保留源文檔中所有的回車和空格
語法：<pre></pre>
8、塊分區元素：div
? ? 作用：為元素分組，實現網頁布局
? ? 語法：<div></div>
? ? 表現形式：① 獨占一行
? ? ? ? ? ? ? ? ? ? ② 無任何文本顯示效果
9、行內分區元素：span
? ? 作用：設置同一行文本的不同效果
? ? 語法：<span></span>
? ? 表現形式：① 多個span元素顯示在同一行內
? ? ? ? ? ? ? ? ? ? ② 無任何特殊效果
元素分類：塊級元素、行內元素、行內塊元素
① 塊級元素
? ? 默認情況下，每個塊級元素獨占一行，即元素前后都會有換行效果
? ? 元素的高度、寬度(默認為其父元素的100%)、行高、頂部和底部邊距都可設置
? ? 如：p,div,h1~h6,pre,... ...
? ? 作用：用來做布局
? ? 注意：p標簽不能嵌套塊級元素(如div)
② 行內元素
? ? 不會換行，多個元素在一行內顯示
? ? 元素的高度、寬度(是其所包含的文字和圖片的寬度)、頂部和底部邊距不可設置
? ? 如：span,s,b,i,u,sup,sub,a,img... ...
? ? 作用：大部分的行內元素用來處理文本的顯示效果
③?行內塊元素
? ? 不會換行，和其它元素都在一行上
? ? 元素的高度、寬度、行高、頂部和底部邊距都可設置
第二章*******************************************************************************
URL(Uniform Resource Locator)：即統一資源定位器，用來標識網絡中的資源位置，俗稱路徑
資源：網頁中要用到的文件，都叫資源
1、絕對路徑
? 網絡資源：通信協議+域名（IP地址）+文件目錄結構+文件名稱 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? /
? 本機資源：從文件所在的最高盤符處開始查找? file:///盤符:/目錄路徑/文件名 ? ? ? ? ? ? ? ? /
2、相對路徑(更簡潔)
? 同級目錄：直接引入 ? ? ? ? ? ? ? ?? / ?不加/,直接寫文件名也一樣
? 子級目錄：先進入，再引用 ? ? ?? ./ ?當前目錄
? 父級目錄：先返回，再引用 ? ? ?? ../ 上一層目錄
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ../../../ ?? 向上返回三級
3、根相對路徑(網站發布時一般用這個)
? 從web站點的根目錄處開始查找 ? ? ?? 用 / 作為開始，表示web站點的根目錄
注意：① url 嚴格區分大小寫—（服務器嚴格區分，本機開發則無所謂）
? ? ? ?? ② url? 中不能出現中文
圖像：<img>或<img />
? 如果只改變img的width或height中的一個屬性的話，那么另一個屬性會跟著等比縮放（一般只修改一個屬性或不修改屬性）
圖像格式：① jpeg/jpg ?? 聯合圖像專家組，有損壓縮，壓縮比率大
? ? ? ? ? ? ? ? ② gif ? ? ? ? ?? 動畫
? ? ? ? ? ? ? ? ③ png ? ? ? ?? 無損壓縮，背景透明，有8位、24位（不支持透明）、32位三種形式
屬性：① src ?? 圖像所在路徑（url）
? ? ? ?? ②?title ? 鼠標移動到元素上面時提示的文字
? ? ? ? ?③ alt ? ? 路徑出錯時顯示的文字
鏈接
1、語法：<a href="目標鏈接地址">內容</a>
2、屬性：① href：鏈接的URL地址
? ? ? ? ? ? ? ②?title：?鼠標移動到鏈接上提示的文字
? ? ? ? ? ? ? ③ target：目標，指定打開新網頁的形式
? ? ? ? ? ? ? ? ? 取值：_blank ?? 在新標簽頁中打開
? ? ? ? ? ? ? ? ? ? ? ? ?? _self ? ? ? 在自身頁面中打開（默認值）
3、鏈接的其它表現形式
? ? ① 鏈接目標為資源下載：<a href="xxx.zip/rar">內容</a> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //點擊下載資源
? ? ② 鏈接目標為電子郵件鏈接：<a href="mailto:zhaoxu@tedu.cn">聯系我們</a> ? ? ? ?//點擊打開郵箱
? ? ③ 調出手機撥號：<a href="tel:10086">10086</a>? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //點擊撥號
? ? ④?返回頁面頂部的空鏈接：<a href="#">返回頁面頂部</a>
? ? ⑤ 鏈接到Javascript：<ahref="javascript:js腳本()">內容</a>
? ? ? ? 比如: <a href="javascript:void(0)"></a> ? ? ?? 當做空鏈接
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?void是js的一個操作符。表示不執行并返回undefined
? ? ⑥?錨點—————SPA單頁面應用的原理
? ? ? ? 作用：在網頁的任意位置處做記號，方便頁面能夠隨時跳轉到標記位置處
? ? ? ? 使用步驟：1、定義錨點（做記號，要跳轉處）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ① 使用 a 元素的 name 屬性：<a name="錨點名稱">內容</a>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ② 任意標記的 id 屬性：<div id="ID1">測試錨點</div>
? ? ? ? ? ? ? ? ? ? ? ? 2、鏈接到錨點（點擊處）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ①<a href="#錨點名稱">內容</a>? ? ??跳轉到本頁面錨點處
? ? ? ? ? ? ? ? ? ? ? ? ? ? ②<a href="頁面URL#錨點名稱">內容</a>? ? ??跳轉到其它頁面的錨點處
跳轉到錨點后，url后面會加 #錨點名，可以用window.location.href=url+"#錨點名"，直接跳到錨點，本頁面不需加url，可用于在同一頁面切換不同的內容(如SPA單頁面應用)
____________________________________________________________________________________
表格
一、表格的作用
? ? 按照一定的格式擺放數據
? ? 表格是由一些被稱為 "單元格" 的矩形框，按照從左到右，從上到下的順序排列到一起組成的
二、創建表格
? ? 1、定義表格：<table></table>
? ? 2、創建表行：<tr></tr>
? ? 3、創建列(單元格)：<td></td>
三、表格屬性
? ? 1、table 的屬性
? ? ? ? ① width ?? 寬度
? ? ? ? ② height ?? 高度
? ? ? ? ③ align ?? 設置表格的水平對齊方式(left / center / right)
? ? ? ? ④ border ? ?指定邊框寬度，px作為單位，可以省略px
? ? ? ? ⑤ cellpadding ?? 單元格內邊距(單元格邊框與內容之間的距離)
? ? ? ? ⑥ cellspacing ?? 單元格外邊距(單元格之間的距離)
? ? ? ? ⑦ bgcolor ?? 設置表格的背景顏色
? ? 2、tr 的屬性
? ? ? ? ① align ?? 設置該行內容的水平對齊方式
? ? ? ? ② valign ?? 設置該行內容的垂直對齊方式，取值：top / middle / bottom
? ? ? ? ③ bgcolor ?? 表格行的背景顏色
? ? 3、td 的屬性
? ? ? ? ① align ?? 該單元格內容的水平對齊方式
? ? ? ? ② valign ?? 設置該單元格內容的垂直對齊方式,取值：top|middle|bottom
? ? ? ? ③ width ?? 該單元格的寬度
? ? ? ? ④ height ?? 該單元格的高度
? ? ? ? ⑤colspan ? ? ?設置單元格跨列
? ? ? ? ⑥rowspan ?? 設置單元格跨行
? ? ? ? 注意：每一列中的列寬都一致，以最寬的為準
? ? ? ? ? ? ? ? ?每一行中的行高都一致，以最高的為準
? ? 4、表格標題
? ? ? ?<caption>標題</caption>
? ? ? ? 默認：表格上方居中顯示
? ? ? ? 注意：① <caption>必須緊隨<table>之后
? ? ? ? ? ? ? ?? ② 一個表格最多只能有一個標題，用以描述表格內容
? ? 5、<th></th> ?? 行標題或列標題，放在tr中，替換td，有加粗居中的效果
四、表格的復雜應用
? ? 1、行分組：html中允許將表格內容劃分為3個部分（可以把表格階段性加載出來）
? ? ? ? ① 表頭行分組：<thead></thead> ? ? ? ? ? ?默認粗體居中
? ? ? ? ② 表主體行分組：<tbody></tbody> ? ? ?? 表格下載完才會顯示
? ? ? ? ③ 表尾行分組：<tfoot></tfoot>
? ? ? ? ? ? 表格中最下方的一行或幾行，可以放在表尾行分組
? ? 注意：每個行分組中，都允許包含一對或多對 tr 標記
? ? 2、不規則表格(colspan和rowspan只能使用HTML屬性)
? ? ? ? ①跨列：從指定的單元格位置處開始，橫向向右合并幾個單元格(包含自己)，被合并掉的單元格要刪除
? ? ? ? ? ? 屬性：設置td的 colspan屬性
? ? ? ? ? ? 取值：要合并單元格的數量
? ? ? ? ②跨行：從指定的單元格位置處開始，縱向向下合并幾個單元格(包含自己)，被合并掉的單元格要刪除
? ? ? ? ? ? 屬性：設置td的 rowspan屬性
? ? ? ? ? ? 取值：要合并單元格的數量
? ? ? ? ③ 表格的嵌套：在單元格中允許放置另一個表格（td中）
? ? ? ? <table>
? ? ? ? ? <tr>
? ? ? ? ? ? <td> <div></div> </td>
? ? ? ? ? ? <td>
? ? ? ? ? ? ?<table>
? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? <td></td>
? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ?</table>
? ? ? ? ? ? </td>
? ? ? ? ? </tr>
? ? ? ? </table>
____________________________________________________________________________________
列表
1、作用：將具有相似特征或具有先后順序的內容按從左到右或從上到下的順序排列
2、列表的組成：所有的列表都由 "列表類型" 和 "列表項" 組成
? ? 列表類型：有序列表 和 無序列表
? ? 列表項：具體顯示在列表里面的內容
3、列表的使用
①有序列表
? ? ? ? 語法：列表類型：<ol></ol> ?（Order List）
? ? ? ? ? ? ? ?? 列表項： ?? <li></li> ?? （List Item）
? ? ? ? 屬性：1、type
? ? ? ? ? ? ? ? ? ? ? 作用：指定有序列表的列表項前標志的類型
? ? ? ? ? ? ? ? ? ? ? 取值：①1 ?? 指定類型為 數字(默認)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ② a ? ? 指定類型為 小寫字母
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?③ A ?? 指定類型為 大寫字母
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ④ i ? ? ?指定類型為 小寫羅馬數字
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ⑤ I ? ? 指定類型為 大寫羅馬數字
? ? ? ? ? ? ? ? ? 2、start
? ? ? ? ? ? ? ? ? ? ? 作用：指定起始編號
? ? ? ? ? ? ? ? ? ? ? 取值：阿拉伯數字
②無序列表
? ? ? ? 語法：列表類型：<ul></ul> ? ?（Unorder List）
? ? ? ? ? ? ? ?? 列表項： ? ?<li></li>
? ? ? ? 屬性：1、type
? ? ? ? ? ? ? ? ? ? ? 作用：指定列表類型
? ? ? ? ? ? ? ? ? ? ? 取值：① disc ? ? ? 實心圓(默認值)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ② circle ? ? ?空心圓
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?③ square ?? 實心矩形
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ④ none ? ?? 沒有，不顯示列表項
4、列表的嵌套：允許在一個列表中再嵌套另一個列表（被嵌套的列表要放在 li 中）
<ul>
? <li>列表項1</li>
? <li>列表項2
<ol>
? ? ?<li></li>
</ol>
? </li>
</ul>
5、自定義列表
? ? ① 作用：往往用于要給出一類事物的定義情形，如：名詞解釋、百科等
? ? ② 語法：<dl> ? ? ? 定義一個定義列表（dt、dd放在這里面）
? ? ? ? ? ? ? ? ? ? <dt></dt> ? ?? 定義要解釋的專有名詞/術語
? ? ? ? ? ? ? ? ? ? <dd></dd> ?? 定義列表中對專有名詞/術語進行解釋的內容
? ? ? ? ? ? ? ? ? </dl>
? ? ③ 使用場合：在 "圖文混排"時優先使用定義列表
第三章*******************************************************************************
常用結構標記
作用：html5中新提出的一組標記，專門用于構建網頁布局
目的：取代div布局，提升布局代碼的語義性和可讀性，避免頁面過于復雜，難以維護
1、<header>元素
① 語法：<header></header>
? ? ② 作用：用于定義文檔的頁眉，即位于頁面或某區域的頂部信息
? ? ? ? ? ? ? ? ? 取代<div id="header"></div>
2、<nav>元素
① 語法：<nav></nav>
? ? ② 作用：用于標識頁面的導航鏈接模塊
? ? ? ? ? ? ? ? ? 取代<div id="nav"></div>
3、<section>元素
① 語法：<section></section>
? ? ② 作用：標識內容的小節，可以表示頁面的主體內容模塊
? ? ? ? ? ? ? ? ? 取代<div id="main"></div>
4、<article>元素
① 語法：<article></article>
? ? ② 作用：定義獨立于文檔的其它內容
? ? ? ? ? ? ? ? ? 比如：論壇中的帖子，博客或微博中的條目，用戶評論，音視頻，新聞信息
? ? ? ? ? ? ? ? ? 取代<div id="article"></div>
5、<footer>元素
① 語法：<footer></footer>
? ? ② 作用：用于定義頁面的底部信息
? ? ? ? ? ? ? ? ? 取代<div id="footer"></div>
6、<aside>元素
① 語法：<aside></aside>
? ? ② 作用：定義網頁任何一個位置的側邊欄信息
? ? ? ? ? ? ? ? ? 取代<div id="left_side"></div> ?和 ?<div id="right_side"></div>
注意：能使用結構標記的地方，盡量使用結構標記，無法被結構標記所取代的，就用DIV來布局
____________________________________________________________________________________
表單
作用：用于顯示、收集信息，并提交信息到服務器，表單在頁面中是處于隱藏狀態的
完整的表單處理由兩部分組成：1、實現數據交互的可見界面元素
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? 2、提交后的表單數據處理（服務器端）
表單元素
標記：<form></form>
屬性：
1、action
? ? 定義表單被提交時發生的動作，即提交給服務器處理程序的地址(服務器的url)，如save.php
? ? 具體取值要與服務器端人員協同完成，若省略不寫，則默認提交給本頁
? ? 可用js改變action，提交到不同的頁面(服務器地址)
2、method提交方法
? ? 定義表單數據的提交方式
? ? 取值：①get(默認值)
? ? ? ? ? ? ? ? ? 1、明文提交，即所提交的數據是可以顯示在地址欄上的
? ? ? ? ? ? ? ? ? 2、安全性較低
? ? ? ? ? ? ? ? ? 3、有長度限制，最大為2KB
? ? ? ? ? ? ? ? ? 4、場合：向服務器要數據時使用get（搜索關鍵字提交）
②post
? ? ? ? ? ? ? ? ? 1、隱式提交，所提交的數據是不顯示在網頁的任何位置處(在Network中)
? ? ? ? ? ? ? ? ? 2、安全性相對較高
? ? ? ? ? ? ? ? ? 3、沒有長度限制
? ? ? ? ? ? ? ? ? 4、場合：① 數據提交給服務器進行處理時使用post
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ② 安全性要求較高的地方，必須用post
? ? ? ? ? ? ? ③ put、delete ...
3、enctype
? ? 作用：指定表單數據的編碼方式（指定將什么樣的數據提交給服務器）
? ? 取值：①application/x-www-form-urlencoded
? ? ? ? ? ? ? ? ? 默認值，可以將表單中的普通字符、特殊字符、標點符號都進行二進制編碼，提交給服務器
? ? ? ? ? ?? ② multipart/form-data
? ? ? ? ? ? ? ? ? 可以將上傳的文件進行二進制編碼，提交給服務器(字符、特殊字符、標點符號無法編輯提交)
? ? ? ? ? ? ? ? ? 場合：上傳文件時
? ? ? ? ? ?? ③ text/plain
? ? ? ? ? ? ? ? ? 只允許將普通數據提交給服務器，特殊字符不行
4、name：定義表單的名稱
5、id：定義唯一標識
____________________________________________________________________________________
表單控件（只會提交位于之間的控件）
作用：接收用戶輸入的數據，并且通過表單將其提交給服務器
自動提交時，只會提交 '有name屬性' 且 '未被禁用' 的控件的值
會提交：被選中的單選按鈕、復選框，被選中的select的選項
reset按鈕不會被提交
表單控件的分類：1、input 元素
? ? ? ? ? ? ? ? ? ? ? ? ? 2、<textarea></textarea> 多行文本域
? ? ? ? ? ? ? ? ? ? ? ? ? 3、<select> <option></option> </select> 選擇框(下拉，滾動)
? ? ? ? ? ? ? ? ? ? ? ? ? 4、其它元素
表單控件詳解
一、input 元素：用于收集用戶信息
標記：<input>或<input/>
? ? 主要屬性：（通有屬性，所有的input元素都具有的屬性）
? ? ? ? 1、type? ?根據不同的type值，來創建各種類型的輸入控件
? ? ? ? 2、name? 定義控件的名稱，提交給服務器使用(沒有name不會提交)
? ? ? ? 3、value? 控件的值，提交給服務器的值，可設置為默認值
? ? ? ? 4、disabled?禁用控件，用戶不能獲取值，也不能提交給服務器
? ? ? ? ? ? ? ? ? ? ? ? ? ?注意：該屬性無值，只作為標識：<input disabled>
1、文本框與密碼框
文本框：<input type="text">
密碼框：<input type="password">
專有屬性：①maxlength? 限制輸入字符的最大數量，取值：數字
? ? ? ? ? ? ? ? ② readonly ? ? 只讀，不允許修改，允許被提交
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 注意：該屬性無值，只作為標識：<input type="text" readonly>
? ? ? ? ? ? ? ? ③ name? 控件名稱，由控件縮寫+控件作用組成，如果不設置，則無法提交給服務器
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 文本框與密碼框，縮寫為：txt**
匈牙利命名法：1、表示用戶姓名的文本框 ?name="txtName"
? ? ? ? ? ? ? ? ? ? ? 2、表示用戶年齡的文本框 ?name="txtAge"
? ? ? ? ? ? ? ? ? ? ? 3、表示用戶密碼的密碼框 ?name="txtPassword" ?或?name="txtPwd"
? ? ? ? ? ? ? ? ④placeholder? 占位符（用來作為提示）
2、單選按鈕與復選框
單選按鈕：<input type="radio">
? ? 復選框： ? <input type="checkbox">
專有屬性：①name?名稱，同時具有分組作用
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? 注意：一組的單選按鈕或一組的復選框name屬性值要一致
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? radio縮寫為rdo**
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? checkbox縮寫為chk**
? ? ? ? ? ? ? ? ② value? 必給，被選中后提交的值(若沒有，會以'on'作為value提交)
? ? ? ? ? ? ? ? ③ checked? 無值，設置默認被選中
3、按鈕
? ? 作用：代替用戶執行一組動作
①提交按鈕：<input type="submit">將表單的控件數據提交給服務器，自動提交
②重置按鈕：<input type="reset">? ? ? 將表單控件的值恢復到初始化狀態
③普通按鈕：<input type="button">? ? 由用戶自己定義功能(使用JavaScript)
三種按鈕的共有屬性：① name ?? 定義按鈕名稱，縮寫為btn**
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ② value ?? 按鈕上的文字
? ? ④ 其他按鈕：1、圖片按鈕（提交功能）<input type="image">?屬性：src
? ? ? ? ? ? ? ? ? ? ? ? 2、提交按鈕：<button>內容</button>? ? ? ?自動提交
4、隱藏域與文件選擇框
? ? ① 隱藏域：<input type="hidden">
? ? ? ? 作用：要提交給服務器但是不想給用戶去看的數據，可以放在隱藏域中，縮寫為txt**
? ? ② 文件選擇框：<input type="file">
? ? ? ? 作用：上傳文件時使用，允許打開文件選擇框，選擇文件進行上傳
? ? ? ? 屬性：name? 控件的名稱，縮寫為txt**
? ? ? ? 注意：1、form的method屬性必須為post
? ? ? ? ? ? ? ? ? 2、form的enctype屬性必須為multipart/form-data
? ? ? ? 事件：change，用戶選擇文件時觸發，可用window.URL.createObjectURL(this.files[0])獲取文件的url
二、textarea 文本域
作用：允許用戶輸入多行數據
語法：<textarea></textarea>
屬性：1、name ? 定義控件的名稱，縮寫為txt**
? ? ? ? ? 2、readonly ?? 只讀，但能提交值給服務器
? ? ? ? ? 3、cols ? ? 指定文本域的列數，變相設置控件的寬度
? ? ? ? ? 4、rows ?? 指定文本域的行數，變相設置控件的高度
三、select 和 option
<select>
? ?<option>選項</option>
</select>
1、選擇框：<select></select>
? ? 作用：創建選項框（滾動列表）
? ? 屬性：①name? 名稱，縮寫sel**，用于提交服務器
? ? ? ? ? ?? ② size? 指定選項框默認能顯示的選項數量，默認值為1，如果大于1的話，則為滾動條列表
? ? ? ? ? ? ?③multiple 該屬性無值，設置允許多選（按住Ctrl/Command鍵多選），如multiple="multiple"
2、選項：<option>顯示的選項</option>
? ? 屬性：①value ? ? 設置當前選項的值
? ? ? ? ? ? ?② selected? 預選中，設置默認被選中的選項，該屬性無值
select{
? -webkit-appearance: none; ? ? ? ? 取消select在一些瀏覽器中右邊的箭頭和高亮的線框
? -moz-appearance: none;
? background-color: transparent; ?? 取消select的默認背景顏色
? border-color: transparent; ? ? ? ?取消select的默認邊框顏色
}
select:focus{ ? ? ? ? ? ? ? ? ? ? ? 取消點擊時的輪廓
? outline:none
}
所有主流瀏覽器都不支持 appearance 屬性，但Firefox支持替代的-moz-appearance屬性，Safari和Chrome支持替代-webkit-appearance屬性
選擇框樣式
select{
? height: 4rem;
? line-height: 4rem;
? margin: auto;
? padding: 0 35%;
? box-sizing: border-box;
}
<form action="#">
? <select name="date">
? ? <option selected value="17194">17194期</option>
? ? <option value="17193">17193期</option>
? </select>
</form>
可以用一個span標簽代替select，將select絕對定位到span的上方，且層級高于span
在PC端，可以改變option/select的字體、顏色、左右內邊距，無法居中
在移動端，無法改變option的任何屬性
用js修改select的值: $('select').val('2');? ? // ()中是option的值
設置提示，并使提示不可選:
<select name="grade">
? <option?value=""?selected disabled?style="display:none;">請選擇年級</option>
? <option?value="4">高一</option>
? <option?value="5">高二</option>
</select>
四、其它元素
1、為控件分組
? ? 作用：將一些控件放在一起，并提供一個組名
? ? 語法：<fieldset></fieldset> ? ? ? 為控件分組
? ? ? ? ? ?? <legend>標題</legend>? 為分組指定標題
2、關聯文本與表單控件元素，關聯后，點擊文字如同點擊表單控件一樣
語法：<label>關聯的文本</label>
? ? 屬性：for：與該元素相關聯的控件的id值
____________________________________________________________________________________
其它常用標記
1、浮動框架
? ? 作用：允許在一個瀏覽器窗口中同時顯示多個html文檔
語法：<iframe>文字內容</iframe>
? ? ? ? ? ? ?注意：當瀏覽器不支持iframe元素時，文字內容就會顯示
? ? 屬性：①src ? ? ?浮動框架中的網頁的url，即要引入的網頁的地址
? ? ? ? ? ? ?② width ? 寬度
? ? ? ? ? ? ?③ height? 高度
? ? ? ? ? ?? ④ frameborder? 浮動框架邊框，如果不想要邊框，設置為0
2、摘要與細節
? ? 作用：允許通過用戶的點擊操作完成頁面的內容的伸展(顯示)與收縮(隱藏)
? ? 語法：<details>
? ? ? ? ? ? ? ? <summary>摘要與細節的標題</summary> ? ? ? ? ? ? ? ?? 顯示的內容
? ? ? ? ? ? ? </details>
3、度量元素
? ? 作用：在頁面中定義一個度量衡，主要用于顯示比例信息，如：投票比例，任務完成比例...
? ? 語法：<meter>您的瀏覽器不支持meter</meter>
? ? 屬性：① min ? 度量范圍的最小值，默認為0
? ? ? ? ? ? ?② max ? 度量范圍的最大值，默認為1
? ? ? ? ? ? ?③ value? 度量元素顯示的值，默認為0
4、時間元素
? ? 作用：關聯時間的不同表現形式
? ? 語法：<time>文本</time>
? ? 屬性：datetime
? ? 取值：① 只表示日期：yyyy-mm-dd
? ? ? ? ? ?? ② 只表示時間：hh:mm:ss
? ? ? ? ? ? ?③ 表示日期和時間：yyyy-mm-ddThh:mm:ss
5、高亮顯示文本
? ? 語法：<mark></mark>
6、進度條
? ? 語法：<meter value="10" min="0" max="100" title="50%"></meter>%
____________________________________________________________________________________
新表單屬性（HTML5）縮寫都是txt**
新屬性：required? 非空限制，必填，不能為空
1、輸入必須為電子郵件類型：<input type="email">
2、搜索類型：<input type="search"> ?? 后面有個×
3、輸入必須符合url規范：<input type="url">
4、電話號碼：<input type="tel"> ?? 移動端會自動彈出數字鍵盤
5、數字類型：<input type="number">
? ? 屬性：① min ?? 定義控件接受的最小值
? ? ? ? ? ? ?② max ?? 定義控件接受的最大值
? ? ? ? ? ? ?③ step ? ?控制控件遞增的步長，默認為1
6、范圍類型：<input type="range">
? ? 作用：允許選擇指定范圍內的一個值
? ? 屬性：① min ?? 指定范圍的最小值（下限值）
? ? ? ? ? ?? ② max ?? 指定范圍的最大值（上限值）
? ? ? ? ? ? ?③ step ?? 值變化的步長
? ? ? ? ? ? ?④ value? 設置初始值
7、顏色類型：<input type="color">
? ? 作用：顏色拾取控件，允許用戶選擇顏色
8、日期類型：<input type="date">
? ? 作用：允許用戶選擇日期
? ? 注意：
? ? 一、默認值：① type="date" value="2018-01-28"
? ? ? ? ? ? ? ? ? ? ? ?② type="time" value="16:01"
? ? ? ? ? ? ? ? ? ? ? ?③ type="week" value="2018-W04"
? ? ? ? ? ? ? ? ? ? ? ?④ type="month" value="2018-01"
? ? ? ? ? ? ? ? ? ? ? ?⑤?type="datetime-local" value="2018-01-19T15:19"
? ? 二、獲取輸入值，應使用change事件，當值改變時觸發
? ? 三、可使用min和max屬性定義最小和最大值，但在部分瀏覽器中不起作用
9、周類型：<input type="week">
? ? 作用：與date類似，但是只能選擇周
10、月類型：<input type="month">
? ? 作用：只能選擇月份
iframe******************************************************************************
iframe 元素會創建包含另外一個文檔的內聯框架（即行內框架）
<iframe frameborder="0" width="100%">
? 您的瀏覽器不支持iframe ? ? ? ? ? ? ? ? ? ? //不支持iframe的瀏覽器會顯示<iframe>和</iframe>之間的文本
</iframe>
屬性：
frameborder? ? 取值：1 ? ? ??0 ? ?規定是否顯示框架周圍的邊框
src ? ? ? ? ? ? ? ? 取值：URL ? ? ? ??規定在 iframe 中顯示的文檔的 URL
height ? ? ? ? ? ?取值：px ? ? ?% ?規定 iframe 的高度
width ? ? ? ? ? ? 取值：px ? ? ?% ?定義 iframe 的寬度
name ? ? ? ? ? ? 取值：name ? ? ??規定 iframe 的名稱
marginheight ?取值：px ? ? ? ? ??定義 iframe 的頂部和底部的邊距
marginwidth ? 取值：px ? ? ? ? ??定義 iframe 的左側和右側的邊距
scrolling ? ? ? ? 取值：yes? no? auto ? ?規定是否在 iframe 中顯示滾動條
JS：
varifr=document.getElementsByTagName("iframe")[0]; ? ? ?? //獲取iframe元素
ifr.height="500px"; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? //為iframe的屬性賦值
ifr.src='http://baicu.com';
ifr.onload=function(){ ? ? ? ? ? ?? //比window.onload更晚觸發
? var iframeDom=ifr.contentDocument; ? ? ? ? ? ? ? ?? //獲取iframeDOM對象
? var sel=iframeDom.getElementById("selected"); ?? //獲取iframe中的元素
? var selH=getComputedStyle(sel).height; ? ? ? ? ? ? ? //獲取iframe中元素的樣式，與普通DOM元素用法一樣
? ifr.height="100px";
}
iframe的缺點：
① iframe 會阻塞主頁面的Onload事件
② 搜索引擎的檢索程序無法解讀這種頁面，不利于SEO
③ iframe 和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載
④?不容易打印
_____________________________________________________________________________________
<marquee></marquee>可以實現多種滾動效果，無需js控制
使用marquee標記不僅可以移動文字，也可以移動圖片，表格等
語法：<marquee>...</marquee>
說明：在標記之間添加要進行滾動的內容
重要屬性：
① 滾動方向direction(包括4個值：up、down、left和right)
? ? 語法：<marquee direction="滾動方向">...</marquee>
② 滾動方式behavior(scroll:循環滾動，默認效果；slide:只滾動一次就停止；alternate:來回交替進行滾動)
? ? 語法：<marquee behavior="滾動方式">...</marquee>
③ 滾動速度scrollamount(滾動速度是設置每次滾動時移動的長度，以像素為單位)
? ? 語法：<marquee scrollamount="5">...</marquee>
④ 滾動延遲scrolldelay(設置滾動的時間間隔，單位是毫秒)
? ? 語法：<marquee scrolldelay="100">...</marquee>
⑤ 滾動循環loop(默認值是-1，滾動會不斷的循環下去)
? ? 語法：<marquee loop="2">...</marquee>
⑥ 滾動范圍width、height
⑦ 滾動背景顏色bgcolor
⑧ 空白空間hspace、vspace
_______________________________________________________________________________________
原生HTML的Web組件標準
一、HTML Template
語法：<template></template>
一般感知不到它的存在，它下面的png不會下載，style不會渲染，script不會被加載執行，只是一個模板
在瀏覽器中表現為#document.fragment文檔片段
例：
var?template =?document.getElementById('temp');? ? ? ? ? ? ? //獲取id為temp的文檔片段節點
var?copy =?document.importNode(template.content, true);? //將文檔片段創建一份副本
copy.getElementById('title').innerHTML = 'Hello World';? ? ? //替換文檔片段副本中的內容
二、Shadow DOM
是原生組件封裝的基本工具，可以實現組件與組件之間的獨立性
它致力于創建一個相對獨立的空間，可以有選擇性的從DOM樹上的父節點繼承一些屬性，甚至繼承一棵樹
瀏覽器通過Shadow DOM實現的組件：
<input>、<select>、<video>、<audio>
例：
var div =?document.getElementById('div');? ? ? ? ? ? ? ? ? ? ? //獲取id為div組件
var shadowRoot = div.attachShadow({?mode:'closed' });? //在div中創建一個Shadow DOM
? ? ? ? ? ? 在失去引用后，不允許對其進行改造(open允許在任何地方再得到Shadow DOM，繼續對其進行改造)
shadowRoot.appendChild(copy);? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //將節點插入Shadow DOM中
三、Custom Elements
用來包裝原生組件的容器，只需要寫一個標簽就能得到一個完整的組件
語法：class MyElement?extends HTMLElement { ... }
生命周期函數：
constructor()? 構造函數，用于初始化state、創建Shadow DOM、監聽事件等
? ? ? ? ? ? ? ? ? ? 組件被創建出來，但還沒有插入到DOM樹中
connectedCallback()? 組件實例已被插入到DOM樹中，用于進行一些展示相關的初始化操作
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 組件已被插入DOM樹中，或其本身就在html文件中寫好在DOM樹上了
attributeChangeCallback(attrName,?oldVal, newVal)? 組件屬性發生變化，用于更新組件的狀態
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?需要提供一個屬性列表，只有當屬性列表中的屬性發生變化時才會觸發這個函數
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?如: static get?observedAttributes() {?return ['awesome'] }
disconnectedCallback()? 組件被從DOM樹中移除，用于進行一些清理操作
adoptedCallback()? 組件實例從一個文檔被移動到另一個文檔
? ? ? ? 在操作多個document時會遇到，調用document.adoptNode()轉移節點所屬document時會觸發此函數
注冊到HTML標簽列表中：
window.customElements.define('my-element', class extends HTMLElement {...})
? 第一個參數是注冊的標簽名，必須包含一個-，且不能以-開頭
? 第二個參數是注冊的組件的類，直接傳入繼承的子類類名即可，也可以直接寫一個匿名類
使用：<my-element></my-element> 或?document.createElement('my-element')
? ? ? ? ?用法與普通標簽幾乎一樣，但必須帶上關閉標簽
注意：
由于Custom Elements是通過js定義的，所以在js未執行時處于默認狀態，瀏覽器會直接將其內容顯示出來
Custom Elements在被注冊后都有一個 :defined?偽類，而注冊前沒有，可以將其隱藏起來
如：my-element:not(:defined){ display:none }
四、HTML Imports(已廢棄)
語法：<link?rel="import"?href="./head.html">
可以直接import另一個html文件，使用其中的DOM節點
但與ES6 Module太像了，所以基本已被各瀏覽器廢棄
