HTML部分複習筆記
我的複習的筆記javascript
1. 瀏覽器
1.1市面常見瀏覽器
1.2瀏覽器內核
面試用：css
瀏覽器內核又能夠分紅兩部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。html
渲染引擎 它負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。html5
JS 引擎 則是解析 Javascript 語言，執行 javascript語言來實現網頁的動態效果。java
最開始渲染引擎和 JS 引擎並無區分的很明確，後來 JS 引擎愈來愈獨立，內核就傾向於只指渲染引擎。有一個網頁標準計劃小組製做了一個 ACID 來測試引擎的兼容性和性能。內核的種類不少，如加上沒什麼人使用的非商業的免費內核，可能會有10多種，可是常見的瀏覽器內核能夠分這四種：Trident、Gecko、Blink、Webkit。程序員
（1）Trident(IE內核)web
國內不少的雙核瀏覽器的其中一核即是 Trident，美其名曰 "兼容模式"。面試
表明： IE、傲遊、世界之窗瀏覽器、Avant、騰訊TT、獵豹安全瀏覽器、360極速瀏覽器、百度瀏覽器等。chrome
Window10 發佈後，IE 將其內置瀏覽器命名爲 Edge，Edge 最顯著的特色就是新內核 EdgeHTML。瀏覽器
（2）Gecko(firefox)
Gecko(Firefox 內核)： Mozilla FireFox(火狐瀏覽器) 採用該內核，Gecko 的特色是代碼徹底公開，所以，其可開發程度很高，全世界的程序員均可覺得其編寫代碼，增長功能。 惋惜這幾年已經沒落了， 好比 打開速度慢、升級頻繁、豬同樣的隊友flash、神同樣的對手chrome。
（3） webkit(Safari)
Safari 是蘋果公司開發的瀏覽器，所用瀏覽器內核的名稱是大名鼎鼎的 WebKit。
如今不少人錯誤地把 webkit 叫作 chrome內核（即便 chrome內核已是 blink 了），蘋果感受像被別人搶了媳婦，都哭暈再廁所裏面了。
表明瀏覽器：傲遊瀏覽器三、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手機瀏覽器、Android 默認瀏覽器，
（4） Chromium/Bink(chrome)
在 Chromium 項目中研發 Blink 渲染引擎（即瀏覽器核心），內置於 Chrome 瀏覽器之中。Blink 實際上是 WebKit 的分支。
大部分國產瀏覽器最新版都採用Blink內核。
（5） Presto(Opera)
Presto 是挪威產瀏覽器 opera 的 "前任" 內核，爲什麼說是 "前任"，由於最新的 opera 瀏覽器早已將之拋棄從而投入到了谷歌懷抱了。
移動端的瀏覽器內核主要說的是系統內置瀏覽器的內核。
目前移動設備瀏覽器上經常使用的內核有 Webkit，Blink，Trident，Gecko 等，其中 iPhone 和 iPad 等蘋果 iOS 平臺主要是 WebKit，Android 4.4 以前的 Android 系統瀏覽器內核是 WebKit，Android4.4 系統瀏覽器切換到了Chromium，內核是 Webkit 的分支 Blink，Windows Phone 8 系統瀏覽器內核是 Trident。
2. Web標準
2.1web標準構成
Web標準不是某一個標準，而是由W3C和其餘標準化組織制定的一系列標準的集合。主要包括結構（Structure）、表現（Presentation）和行爲（Behavior）三個方面。
結構標準：結構用於對網頁元素進行整理和分類，主要包括XML和XHTML兩個部分。
樣式標準：表現用於設置網頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS。
行爲標準：行爲是指網頁模型的定義及交互的編寫，主要包括DOM和ECMAScript兩個部分。
理想狀態咱們的源碼： .html .css .js
直觀上感覺：
2.2 web標準的好處
一、讓Web的發展前景更廣闊
2、內容能被更普遍的設備訪問
3、更容易被搜尋引擎搜索
4、下降網站流量費用
5、使網站更易於維護
6、提升頁面瀏覽速度
3. HTML基礎
3.1 HTML基本骨架格式
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
3.2 HTML標籤分類
在HTML頁面中，帶有「< >」符號的元素被稱爲HTML標籤，如上面提到的 <html>、<head>、<body>都是HTML標籤。所謂標籤就是放在「< >」 標籤符中表示某個功能的編碼命令，也稱爲HTML標籤或 HTML元素
- 雙標籤
<標籤名> 內容 </標籤名>
該語法中「<標籤名>」表示該標籤的做用開始，通常稱爲「開始標籤（start tag）」，「</標籤名>」 表示該標籤的做用結束，通常稱爲「結束標籤（end tag）」。和開始標籤相比，結束標籤只是在前面加了一個關閉符「/」。
好比 <body>我是文字 </body>
- 單標籤
<標籤名 />
單標籤也稱空標籤，是指用一個標籤符號便可完整地描述某個功能的標籤。
好比 <br />
3.3 HTML標籤關係
標籤的相互關係就分爲兩種：
1.嵌套關係
<head> <title> </title> </head>
2.並列關係
<head></head>
<body></body>
4. HTML頭部部分解釋
4.1文檔類型<!DOCTYPE>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE> 標籤位於文檔的最前面，用於向瀏覽器說明當前文檔使用哪一種 HTML 或 XHTML 標準規範，必需在開頭處使用<!DOCTYPE>標籤爲全部的XHTML文檔指定XHTML版本和類型，只有這樣瀏覽器才能將該網頁做爲有效的XHTML文檔，並按指定的文檔類型進行解析。
DTD 文檔類型定義(Document Type Definition)
告訴你心中多年的2個小祕密：
1.目前最新的HTML版本是HTML5，可是各個瀏覽器對其支持不統一，因此現在大多數的網站還未徹底採用。
2.咱們學習的不是HTML 而是 HTML的下一個版本 XHTML。
4.2 XHTML是什麼？
XHTML 指擴展超文本標籤語言（EXtensible HyperText Markup Language）
HTML 鬆散，瀏覽器支持很差， 包括移動端之類的， 這時候XHTML 要求嚴謹一些 功能更強大 來實現過渡效果。。。
白話文總結： HTML 語法太鬆散了，形成相似方言 不一樣地方聽不懂。 xhtml 就是嚴謹一些，相似普通話爲了保持一致。
XHTML 有幾點要注意：
1.<!DOCTYPE> 後面的第一個標籤必須是<html> ， < /html>必須是最後一個標籤
2.全部的標籤都必需要有一個相應的結束標籤
3.標準的XHTML標籤應該使用小寫
4.全部屬性值非空，必須雙引號
註解： 之後咱們學的都是XHTML了。
4.3 字符集
utf-8是目前最經常使用的字符集編碼方式，經常使用的字符集編碼方式還有gbk和gb2312。
gb2312 簡單中文 包括6763個漢字
BIG5 繁體中文 港澳臺等用
GBK包含所有中文字符 是GB2312的擴展，加入對繁體字的支持，兼容GB2312
UTF-8則包含全世界全部國家須要用到的字符
5. HTML經常使用標籤
5.1標題標籤
爲了使網頁更具備語義化，咱們常常會在頁面中用到標題標籤，HTML提供了6個等級的標題，即
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>
從<h1>到<h6>重要性遞減。其基本語法格式以下：
<hn> 標題文本 </hn>
注意： h1 標籤由於重要，儘可能少用，不要動不動就向你扔了一個h1。 通常h1 都是給logo使用。
通常大部分網站用在logo上，其目的並非爲了放在頁面讓用戶看，而是爲了使seo優化性更好，更容易讓搜索引擎搜索到。所以將其隱藏，通常能夠爲logo設一個比較大的首行縮進。如：text-indent: -999px;還能夠爲logo設一個固定寬高，利用padding把h1擠出盒子，利用overflow: hidden;溢出隱藏。
5.2 段落標籤
在網頁中要把文字有條理地顯示出來，離不開段落標籤，就如同咱們日常寫文章同樣，整個網頁也能夠分爲若干個段落，而段落的標籤就是
<p> 文本內容 </p>
是HTML文檔中最多見的標籤，默認狀況下，文本在一個段落中會根據瀏覽器窗口的大小自動換行。段落標籤是一個塊級標籤。
5.3 水平線標籤和換行標籤
在網頁中經常看到一些水平線將段落與段落之間隔開，使得文檔結構清晰，次分明。這些水平線能夠經過插入圖片實現，也能夠簡單地經過標籤來完成，
就是建立橫跨網頁水平線的標籤。其基本語法格式以下：
<hr />是單標籤
在網頁中顯示默認樣式的水平線。
在HTML中，一個段落中的文字會從左到右依次排列，直到瀏覽器窗口的右端，而後自動換行。若是但願某段文本強制換行顯示，就須要使用換行標籤
<br />
這時若是還像在word中直接敲回車鍵換行就不起做用了。
5.4 文本格式化標籤
在網頁中，有時須要爲文字設置粗體、斜體或下劃線效果，這時就須要用到HTML中的文本格式化標籤，使文字以特殊的方式顯示。
5.5標籤屬性
使用HTML製做網頁時，若是想讓HTML標籤提供更多的信息，可使用HTML標籤的屬性加以設置。其基本語法格式以下：
<標籤名 屬性1="屬性值1" 屬性2="屬性值2" …> 內容 </標籤名>
在上面的語法中：
- 標籤能夠擁有多個屬性，必須寫在開始標籤中，位於標籤名後面。(你是個人)
- 屬性之間不分前後順序，標籤名與屬性、屬性與屬性之間均以空格分開。
- 任何標籤的屬性都有默認值，省略該屬性則取默認值。
採起 鍵值對 的格式 key="value" 的格式
好比:
<hr width="400" />
屬性 是 寬度
值 是 400
注意：通常不提倡直接在標籤後面設置標籤的屬性，這種行內屬性雖然可以控制頁面效果，但它的可維護性差，書寫效率低下，通常咱們專門用css修改頁面的樣式，並且行內樣式的優先級是最高，可能會影響其餘的樣式的效果體現。
5.5 圖像標籤
HTML網頁中任何元素的實現都要依靠HTML標籤，要想在網頁中顯示圖像就須要使用圖像標籤，接下來將詳細介紹圖像標籤以及和他相關的屬性。其基本語法格式以下：
該語法中src屬性用於指定圖像文件的路徑和文件名，他是img標籤的必需屬性。
<img src="圖像URL" />
5.6 連接標籤
在HTML中建立超連接很是簡單，只需用標籤環繞須要被連接的對象便可，其基本語法格式以下：
<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>
href：用於指定連接目標的url地址，當爲標籤應用href屬性時，它就具備了超連接的功能。
target：用於指定連接頁面的打開方式，其取值有_self和_blank兩種，其中_self爲默認值，_blank爲在新窗口中打開方式。
注意：
1.外部連接 須要添加 http:// www.baidu.com
2.內部連接 直接連接內部頁面名稱便可 好比 < a href="index.html"> 首頁 </a >
3. 若是當時沒有肯定連接目標時，一般將連接標籤的href屬性值定義爲「#」(即href="#")，表示該連接暫時爲一個空連接。
4.不只能夠建立文本超連接，在網頁中各類網頁元素，如圖像、表格、音頻、視頻等均可以添加超連接。
5.6.1錨點定位 （難點）
經過建立錨點連接，用戶可以快速定位到目標內容。 建立錨點連接分爲兩步：
1.使用「<a href=」#id名「>連接文本</a>」建立連接文本。
2.使用相應的id名標註跳轉目標的位置。
<a href="#life">3 我的生活</a> 這是點擊的地方
<h3 id="life">我的生活</h3> 這是去往的地方
同時還能夠作不一樣頁面的錨點定位：前面加上路徑就能夠了
<a href="index.html#life">3 我的生活</a> 這是點擊的地方
<h3 id="life">我的生活</h3> 這是去往的地方
5.6.2 base 和 nofollow (拓展)
1. base 能夠設置總體連接的打開狀態
2. nofollow 設置不抓取連接
rel = "nofollow"
5.7特殊字符標籤
5.8註釋標籤
在HTML中還有一種特殊的標籤——註釋標籤。若是須要在HTML文檔中添加一些便於閱讀和理解但又不須要顯示在頁面中的註釋文字，就須要使用註釋標籤。其基本語法格式以下：
<!--註釋語句-->
註釋內容不會顯示在瀏覽器窗口中，可是做爲HTML文檔內容的一部分，也會被下載到用戶的計算機上，查看源代碼時就能夠看到。
6. 路徑
實際工做中，一般新建一個文件夾專門用於存放圖像文件，這時再插入圖像，就須要採用「路徑」的方式來指定圖像文件的位置。
路徑能夠分爲： 相對路徑和絕對路徑
6.1相對路徑
- 圖像文件和html文件位於同一文件夾：只需輸入圖像文件的名稱便可，如<img src="logo.gif" />。
- 圖像文件位於html文件的下一級文件夾：輸入文件夾名和文件名，之間用「/」隔開，如<img src="img/img01/logo.gif" />。
- 圖像文件位於html文件的上一級文件夾：在文件名以前加入「../」 ，若是是上兩級，則須要使用 「../ ../」，以此類推，如<img src="../logo.gif" />。
6.2 絕對路徑
「D:\web\img\logo.gif」，或完整的網絡地址，例如「http://www.itcast.cn/images/logo.gif」。
7. 列表
7.1有序列表
有序列表即爲有排列順序的列表，其各個列表項按照必定的順序排列定義，有序列表的基本語法格式以下：
示例一：
<ol>
<li>Coffee</li> 運行結果： 1. Coffee
<li>Tea</li> 2. Tea
<li>Milk</li> 3. Milk
</ol>
示例二：
<ol start="50">
<li>Coffee</li> 運行結果： 50. Coffee
<li>Tea</li> 51. Tea
<li>Milk</li> 52. Milk
</ol>
腳下留心：
1. <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>標籤中輸入其餘標籤或者文字的作法是不被容許的。
2. <li>與</li>之間至關於一個容器，能夠容納全部元素。
3.有序列表會帶有本身樣式屬性，直接忽略。放下那個樣式，讓CSS來！
可是實際工做中， 較少用 ol
7.2無序列表
無序列表的各個列表項之間沒有順序級別之分，是並列的。其基本語法格式以下：
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
......
</ul>
網頁上一些有規律的東西均可以用無序列表，例如導航欄，新聞列表 ( 新聞是沒有順序的，不用排隊，先到先得，先發布先顯示。)等……..
7.3自定義列表
定義列表經常使用於對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號。其基本語法以下：
<dl>
<dt>名詞1</dt>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>
...
<dt>名詞2</dt>
<dd>名詞2解釋1</dd>
<dd>名詞2解釋2</dd>
...
</dl>
大部分購物網站的底部導航和其餘網站的友情連接都是用自定義列表來寫的，這樣結構化會更清晰。
8. 表格
8.1表格的建立
在HTML網頁中，要想建立表格，就須要使用表格相關的標籤。建立表格的基本語法格式以下：
<table>
<tr>
<td>單元格內的文字</td>
...
</tr>
...
</table>
在上面的語法中包含三對HTML標籤，分別爲 <table></table>、<tr></tr>、<td></td>，他們是建立表格的基本標籤，缺一不可，下面對他們進行具體地解釋。
- <table>< </table>：用於定義一個表格。
2.<tr>< </tr>：用於定義表格中的一行，必須嵌套在 <table> </table>標籤中，在 <table> </table>中包含幾對 <tr> </tr>，就有幾行表格。
3.<td> </td>：用於定義表格中的單元格，必須嵌套在< <tr> </tr>標籤中，一對 <tr> </tr>中包含幾對< <td> </td>，就表示該行中有多少列（或多少個單元格）。
注意：
1. <tr></tr>中只能嵌套<td></td>
2. <td></td>標籤，他就像一個容器，能夠容納全部的元素
8.2 表格屬性
8.3表頭和表格結構
表頭通常位於表格的第一行或第一列，其文本加粗居中。設置表頭很是簡單，只需用表頭標記<th></th>替代相應的單元格標記<td></td>便可。
在使用表格進行佈局時，能夠將表格劃分爲頭部、主體和頁腳（頁腳由於有兼容性問題，咱們不在贅述），具體以下所示：
<thead></thead>：用於定義表格的頭部。
必須位於<table></table>標籤中，通常包含網頁的logo和導航等頭部信息。
<tbody></tbody>：用於定義表格的主體。
位於<table></table>標籤中，通常包含網頁中除頭部和底部以外的其餘內容。
8.4 表格標題
表格的標題： caption
定義和用法
caption 元素定義表格標題。
<table>
<caption>我是表格標題</caption>
</table>
caption 標籤必須緊隨 table 標籤以後。只能對每一個表格定義一個標題。一般這個標題會被居中於表格之上。有點相似於標題標籤，可是隻能在表格內部使用。
總結：
- 表格提供了HTML 中定義表格式數據的方法。
- 表格中由行中的單元格組成。
- 表格中沒有列元素，列的個數取決於行的單元格個數。
- 表格不要糾結於外觀，那是CSS 的做用。
- 跨行合併：rowspan 跨列合併：colspan
9. 表單
在HTML中，一個完整的表單一般由表單控件（也稱爲表單元素）、提示信息和表單域3個部分構成。
表單控件： 包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、複選框、提交按鈕、重置按鈕等。
提示信息：一個表單中一般還須要包含一些說明性的文字，提示用戶進行填寫和操做。
表單域： 他至關於一個容器，用來容納全部的表單控件和提示信息，能夠經過他定義處理表單數據所用程序的url地址，以及數據提交到服務器的方法。若是不定義表單域，表單中的數據就沒法傳送到後臺服務器。
9.1 input控件
在上面的語法中，<input />標籤爲單標籤，type屬性爲其最基本的屬性，其取值有多種，用於指定不一樣的控件類型。除了type屬性以外，<input />標籤還能夠定義不少其餘的屬性，其經常使用屬性以下表所示。
9.1.1 label標籤
label 標籤爲 input 元素定義標註（標記）。
做用： 用於綁定一個表單元素, 當點擊label標籤的時候, 被綁定的表單元素就會得到輸入焦點
如何綁定元素呢？
for 屬性規定 label 與哪一個表單元素綁定。
<label for="male">Male</label>
9.1.2 單選按鈕
示例：
男 <input type="radio" name="sex" />
女 <input type="radio" name="sex" checked="checked" />
9.2 H5中新增的input表單屬性：
<input type="radio" name="sex" id="male" value="male">
9.2.1 autocomplete(自動完成)
可以記錄用戶的輸入,而且給予提示,這就是autocomplete的做用
- 取值:
- 適用狀況:
- 示例代碼:
- on:開啓
- off:關閉
- 通常用在input標籤中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title> Title
</head>
<body>
<form action="" >
<input type="text" autocomplete="on" name="userName">
<input type="submit">
</form>
</body>
</html>
- 使用注意:
- 標籤須要添加
name屬性 - 只有提交了一次之後纔會出現提示
9.2.2 autofocus(獲取焦點)
當某一頁有不少個可供輸入的元素時,用戶須要使用鼠標點選元素進行輸入,爲了提高用戶體驗,咱們能夠經過autofocus屬性來指定頁面中默認選中的元素
- 使用方法:
- 示例代碼:
- 須要哪一個
表單元素得到焦點,只須要添加該屬性便可 - 不須要賦值,只須要添加屬性便可,見示例代碼
<!DOCTYPE html>·
<html lang="en">·
<head>·
<meta charset="UTF-8">·
<title></title>· Title
</head>·
<body>·
<form action="" >·
<input type="text" name="userName">· 姓名:
<br/>·
<input type="number" name="telNum" autofocus>· 年齡
<input type="submit">·
</form>·
</body>·
</html>·
- 使用注意:
- 在沒有該屬性以前,可以使用
JavaScript來指定元素 - 若是頁面中多個元素設置了該屬性,最後一個會得到焦點
9.2.3 form(表單關聯)
當咱們想要提交數據時,須要把表單元素放到對應的form標籤中,這個屬性的出現讓表單元素的放置位置不在受到約束
- 使用方法:
- 示例代碼
- 想要某個
表單外元素跟該表單創建聯繫,只須要爲元素添加屬性form="表單id"設置爲想要創建聯繫的表單id便可
- 讓表單外輸入愛好的
input標籤跟id爲userForm表單創建聯繫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title> Title
</head>
<body>
<form action="" id="userForm" >
<input type="text" name="userName"> 姓名:
<br/>
<input type="number" name="telNum" autofocus> 年齡:
<br/>
<input type="submit">
</form>
<br/>
<input type="text" name="habbit" form="userForm">愛好:
</body>
</html>
- 使用注意:
- 雖然這個屬性可讓元素的放置位置不在成爲限制,可是編碼時依舊建議,將元素放置到對應的表單中,除了兼容性問題之外,也爲了提高代碼的可讀以及可維護性
9.2. 4multiple(多選)
若是想要在某個input標籤中選擇多個值,可使用該屬性
- 適用狀況:
- 示例代碼
- 該屬性能夠用在type爲
file標籤內
- 選擇多文件時,須要按住
ctrl按鈕
<input type="file" multiple >o
9.2.5 Placeholder(佔位提示)
輸入元素內默認顯示一些提示信息,當用戶輸入以後自動消失,這種效果咱們須要使用JavaScript來實現,知道出現了placeholder這個屬性
- 使用方式:
- 直接爲該屬性賦值想要提示的內容便可
- 適用狀況:
- 示例代碼:
- 想要不經過
JavaScript來實現提示功能
- 顯示效果以下
<input type="text"placeholder="輸入用戶名">
9.3 textarea控件(文本域)
若是須要輸入大量的信息，就須要用到<textarea></textarea>標籤。經過textarea控件能夠輕鬆地建立多行文本輸入框，其基本語法格式以下：
<textarea cols="每行中的字符數" rows="顯示的行數">
文本內容
</textarea
HTML 標籤 textarea 在大部分瀏覽器中只要指定行（rows）和列（cols）屬性，就能夠規定 textarea 的尺寸，大小就不會改變，不過更好的辦法是使用 CSS 的 height 和 width 屬性,可是Chrome,Safari和FireFox渲染的效果不一樣，能夠拖動右下角圖標改變大小。可是過度拖動大小會影響頁面佈局，使頁面變得不美觀。能夠經過添加以下兩個樣式禁用拖動，固定大小：
1：完全禁用拖動（推薦）
| resize: none; |
2：只是固定大小，右下角的拖動圖標仍在
| width: 200px; |
| height: 100px; |
| max-width: 200px; |
| max-height: 100px; |
9.4下拉菜單
使用select控件定義下拉菜單的基本語法格式以下
<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
...
</select>
注意：
- <select></select>中至少應包含一對<option></option>。
- 在option 中定義selected =" selected "時，當前項即爲默認選中項。
知識：利用JQ中的prop（）方法來獲取option 和 radio屬性的input單選按鈕的屬性時，要這樣操做（下面例子），再也不是selected =" selected "和checked=" checked "了。
$('#formId input[type=checkbox][value='+ el +']').prop("checked",true);
9.5 普通按鈕button
<button> 按鈕 </button> 單獨的一個表單控件，就是普通按鈕的意思。 只不過它是雙標籤哦！
9.6 表單域
在HTML中，form標籤被用於定義表單域，即建立一個表單，以實現用戶信息的收集和傳遞，form中的全部內容都會被提交給服務器。建立表單的基本語法格式以下：
<form action="url地址" method="提交方式" name="表單名稱">
各類表單控件
</form>
經常使用屬性：
- Action 在表單收集到信息後，須要將信息傳遞給服務器進行處理，action屬性用於指定接收並處理表單數據的服務器程序的url地址。
- method 用於設置表單數據的提交方式，其取值爲get或post。
- name 用於指定表單的名稱，以區分同一個頁面中的多個表單。
注意： 每一個表單都應該有本身表單域。
10. HTML5新的標籤
10.1語義標籤
舉個例子，語義標籤就是標籤自己表明了必定的含義
HTML4.01- 語義標籤
- p標籤：段落
- img標籤：圖片
- 。。。等等
- 語義性不強的：
- div:做爲容器存在
- 在網站佈局中使用普遍
- 搜索引擎友好，可是搜索引擎更友好的依舊是內容
10.2 HTML5部分新語義標籤
HTML5中有部分語義標籤，在使用時十分簡單，可是因爲語義性更強，更利於開發者以及搜索引擎對於網頁的理解。
- 語義標籤：
| 標籤名 |
做用 |
| nav |
表示導航 |
| header |
表示頁眉 |
| footer |
表示頁腳 |
| main |
文檔主要內容 |
| article |
文章 |
| aside |
主題內容以外 |
| footer |
文檔或者頁的頁腳 |
10.3 實際應用
- 若是咱們佈局以下頁面
- HTML4.01中代碼：
- 因爲篇幅問題，這裏只貼出body內代碼
<body>
<!--頭部start-->
<div class="header">
<!--導航start-->
<ul class="nav">
<li><a href="#"></a></li> 導航1
<li><a href="#"></a></li> 導航2
<li><a href="#"></a></li> 導航3
</ul>
<!--導航end-->
</div>
<!--頭部end-->
<!--主體start-->
<div class="main">
<!--文章start-->
<div class="article"></div>
<!--文章end-->
<!--側邊欄start-->
<div class="aside"></div>
<!--側邊欄end-->
</div>
<!--主體end-->
<!--底部start-->
<div class="footer"></div>
<!--底部end-->
</body>
- HTML5中代碼：
- 這裏直接使用新學習的語義標籤
<body>
<!--頭部start-->
<header>
<!--導航start-->
<nav>
<a href="#"></a> 導航1
<a href="#"></a> 導航2
<a href="#"></a> 導航3
</nav>
<!--導航end-->
</header>
<!--頭部end-->
<!--主體start-->
<main>
<!--文章start-->
<article></article>
<!--文章end-->
<!--側邊欄start-->
<aside></aside>
<!--側邊欄end-->
</main>
<!--主體end-->
<!--底部start-->
<footer></footer>
<!--底部end-->
</body>
- 使用HTML5中新的語義標籤,內容更爲直觀,即便刪除了註釋,依舊可以看出該標籤的做用,
語義性更強 - 說的通俗一些,
內容同樣,可是代碼更少了_
10.4 datalist
該元素規定了輸入區域的選項列表,可讓用戶有一些選項
- 測試代碼:
- 注:測試代碼只是
body內部的代碼 - 其中option標籤 做爲單標籤,雙標籤均可以使用
<input type="url" list="url_list" name="link"/>網址:
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn"/>
<option label="Google" value="http://www.google.com"/>
<option label="Microsoft" value="http://www.microsoft.com"/>
</datalist>
<input type="tel" list="tel_list">電話:
<datalist id="tel_list">
<option value="186xxx" label="移動"></option>
<option value="187xxx" label="聯通"></option>
<option value="135xxx" label="天翼"></option>
</datalist>
- datalist:
- id:id屬性,想要使用該
datalist的元素須要經過list=id的方式來指定 - option:
- value:指定具體的值
- label:提示信息
- 注意:
- 若是input的type爲
url,option中對應的value須要使用http://開始
11.HTML5多媒體標籤
11.1網頁音視頻解決方案發展
雖然早期的html並無提供支持視頻或者音頻播放的標籤,可是這並不影響人們分享的慾望
- 支持方式1:
- 支持方式2
- 使用
embed直接將視頻塞入頁面,而後就可使用Windows Media Player,Apple QuickTime或者其實的視頻播放器來建立播放窗口 - 可是這種方式對於視頻自己不可控,兼容性問題也沒法顧及
- 使用瀏覽器插件,一個是微軟的
Silverlight,還有使用最廣泛的Adobe Flash Flash不但徹底解決了瀏覽器支持問題,並且裝機率之高讓人咋舌(基本上99%的計算機都安裝了Flash播放器)- 使用
Flash播放視頻除了要學習Flash這項技術自己之外,更關鍵的是在iPhone,ipad並不支持這項技術 - 若是想要查看視頻的播放方式,將鼠標移動到視頻窗口,右鍵若是能夠看到
Flash等文字,那麼該網站使用的就是Flash插件
- 多媒體標籤:
Html5爲了解決使用Flash的各類問題推出了多媒體標籤- 因爲視頻格式問題,不一樣的瀏覽器對於相同格式的視頻支持不一樣,須要準備多份視頻
- 沒法對播放的視頻提供很好的保護效果,由於用戶能夠直接對視頻文件另存爲
- 總結:
- 雖然
html5中的多媒體標籤有各類很差,但咱們仍是須要擁抱這項新的技術,由於他的用法,真的十分簡單
11.2 audio標籤
- 示例代碼1:
- 下面演示一種最簡單的使用方式
- src:音頻的地址
- controls:音頻播放控制器
- autoplay:自動播放
- loop:循環
- poster:指定視頻不播放時顯示的封面
<audio src="song.ogg" controls="controls" autoplay loop>
</audio>
- 示例代碼2:
- 因爲音頻格式在不一樣瀏覽器中支持狀況不一樣,考慮兼容性問題,咱們須要使用下述代碼
- source:指定多個音頻,若是找到了當前瀏覽器支持的,那麼會直接使用,若是全部的
source標籤格式都不支持,會顯示最後的文本內容 - src:音頻的地址
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
你的瀏覽器不支持此種格式
</audio>
11.3 Video標籤
Video標籤用來播放視頻,用法跟audio標籤十分相似
- 示例代碼1:
- src:視頻地址
- controls:控制器
- autoplay:自動播放
- loop:循環
- width:寬度
- height:高度
- poster封面
<video src="movie.ogg" controls autoplay loop width = "200px" height = "200px">
</video>
- 示例代碼2:
- 因爲視頻在不一樣瀏覽器中支持狀況不一樣,考慮兼容性問題,咱們須要使用下述代碼
- source:指定多個視頻,若是找到了當前瀏覽器支持的,那麼會直接使用,若是全部的
source標籤格式都不支持,會顯示最後的文本內容 - src:視頻的地址
<video width="320" height="240" controls="controls">·
<source src="movie.ogg" type="video/ogg">·
<source src="movie.mp4" type="video/mp4">·
· 你的瀏覽器不支持video標籤
</video>
12.新事件屬性和data屬性
12.1 oninvalid
元素無效事件:配合表單驗證,會在驗證失敗時觸發
- 示例代碼
// 獲取元素
vardocument'#input'input =.getElementById();
function()input.oninvalid ={
'驗證失敗' alert();
}
12.2 oninput
配合input標籤使用,當用戶在輸入內容是觸發
vardocument'#input' input =.getElementById();
function()input.oninput ={
console'正在輸入內容' .log();
}
12.3 data屬性
data-*這個屬性解決了自定義Html標籤內屬性取值的問題,只要咱們想,能夠往HTML標籤中添加任意個數的屬性
- 語法:
- data-:這個是固定格式
- data-xxx:xxx是自定義的值
- 注意:
- 屬性名不該該包含任何大寫字母，而且在前綴 "data-" 以後必須有至少一個字符
- 屬性值能夠是任意字符串
- 不要使用純數字,特殊字符等做爲自定義值
- 若是data以後使用-鏈接多個值,取值時,須要使用駝峯命名
- 示例代碼:
<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>
- 獲取方式:
// 假定有這麼一個元素
<li data-type="bird" id="liObj">Owl</li>
<li data-animal-type="spider" id="liObj2">蜘蛛</li>
<script>
var domObj = document.getElementById("liObj");
var type = domObj.dataset["type"]
var domObj2 = document.getElementById("liObj2");
var type2 = domObj.dataset["animalType"]
</script>
- 總結:
- 屬性名爲:data-xxx
- xxx爲自定義值,不能使用大寫字母(不建議使用純數字,或者奇怪字符)
- 獲取方式:
- 在js中獲取了元素以後,經過dataset["key"]便可獲取保存的值
- 其中key爲data-xxx中 xxx的字母
- 若是有多個-分隔,使用駝峯命名
- 好比 data-star-name=fox
- 獲取爲dateset[starName]
- 1. HTML——HTML部分學習筆記
- 2. java web筆記----html複習
- 3. html+css複習筆記
- 4. HTML表單部分學習筆記
- 5. 9-2 學習筆記 html複習
- 6. HTML複習筆記彙總(3)
- 7. HTML標籤基礎複習筆記
- 8. web前端day01-HTML複習筆記
- 9. 點分治複習筆記
- 10. Web前端-Html部分筆記（四）
- 更多相關文章...
- • ionic 頭部與底部 - ionic 教程
- • ionic 頭部和底部 - ionic 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • Git五分鐘教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. HTML——HTML部分學習筆記
- 2. java web筆記----html複習
- 3. html+css複習筆記
- 4. HTML表單部分學習筆記
- 5. 9-2 學習筆記 html複習
- 6. HTML複習筆記彙總(3)
- 7. HTML標籤基礎複習筆記
- 8. web前端day01-HTML複習筆記
- 9. 點分治複習筆記
- 10. Web前端-Html部分筆記（四）