整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML5 中 input 標簽新增了一個 form 屬性，可將表單元素綁定到指定的 form 標簽上，這樣就可以靈活進行布局，同時一個表單元素可以從屬于多個表單，這就讓表單和表單元素的組合變得更加靈活。
例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form id="myForm1" action="#" method="GET"></form>
<form id="myForm2" action="#" method="POST"></form>
提交到 myForm1：<input type="text" form="myForm1" name="myForm1" />
<input type="submit" value="提交" form="myForm1" />
提交到 myForm2：<input type="text" form="myForm2" name="myForm2" />
<input type="submit" value="提交" form="myForm2" />
</body>
</html>顯示為，
內容根據不同的表單所屬的id進行提交。
打開一個頁面，當某個文本框需要獲得光標焦點時，可以使用 autofocus 屬性來實現。
例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form>
<input type="text" autofocus /> <input type="submit" value="搜索" />
</form>
</body>
</html>顯示為，
當點擊text框，可以獲得焦點。
autocomplete 屬性是用來規定表單是否應該啟用自動完成功能，即“自動補全”。
自動完成功能就是當用戶輸入一次數據過后，再次輸入相同的數據時可以自動補全內容。
autocomplete 屬性包括兩個屬性值：on、off。
其語法格式為：
<form autocomplete="on"></form>on 為默認值，意思是啟用自動完成功能。
<form autocomplete="off"></form>off 為禁用自動完成功能。
例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form autocomplete="on">
您最喜歡的體育運動：
<input type="text" list="selectList"/>
<datalist id="selectList">
<option>Football</option>
<option>Basketball</option>
<option>Baseball</option>
<option>Running</option>
<option>Boxing</option>
</datalist>
<input type="submit" />
</form>
</body>
</html>顯示為，
HTML5 中添加的新標簽還有 datalist，該標簽可實現提供數據列表的功能，而 list 屬性則是為了將該標簽和指定文本框進行關聯所設計的。
語法格式為：
<input list="datalist-id" />例子與上面autocomplete相同，已經用過了。
placeholder 屬性描述輸入字段預期值的提示信息，提示用戶設置的輸入值。
其語法格式為：
<input placeholder="text" />灰色字體是提示信息，placeholder 屬性適用于 input 中的 text、search、url、tel、email 和 password 類型。
HTML5 新增了 min，max 和 step 屬性用于為數字或日期輸入類型的 input 提供數值限制，可以使用該屬性的標簽有 number、range、Date pickers。
min 屬性規定 input 元素的最小值。其語法格式為：
<input type="number" min="number" /> <input type="date" min="date" />number 為數字值，date 為日期。
max 屬性規定 input 元素的最大值。其語法格式為：
<input type="number" max="number" /> <input type="date" max="date" />step 屬性規定 input 元素數值之間的步長，也就是數字間隔。其語法格式為：
<input type="number" step="number" />例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form>
輸入：<input type="number" min="-1000" max="1000" step="9" /><input
type="submit"
value="提交"
/>
</form>
</body>
</html>顯示為，
點擊上下箭頭，數字以9為step增加或減少。
multiple 屬性規定用戶一次可以輸入多個值。
multiple 屬性適用于文件上傳功能，也可在 email 類型中使用。
其語法格式為：
<input multiple />例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form>
上傳：<input type="file" multiple /><input type="submit" value="上傳" />
</form>
</body>
</html>multiple 屬性，通常用在 file 和 email 類型中使用來綁定多個值。
使用 HTML5 實現表單驗證的幾個前提條件：
HTML表單驗證：
placeholder 屬性用于為文本框提供提示說明功能，提示說明該文本框希望用戶輸入何種數據。
當用光標焦點聚焦到該文本框時，提示說明文字消失。不輸入任何信息，提示說明文字不會被當做用戶輸入數據提交。
<form>
<input placeholder="提示信息" />
</form>required 屬性是用來限定文本框內容不能為空的。當文本框內容為空時，無法提交表單。該屬性適用于 text、password 等大多數文本框。
<form>
<input required />
</form>pattern 屬性是對用戶輸入信息進行正則表達式校驗。該屬性適用于大多數的 input 類型。例如 text、pass、search 等。
<input type="text" pattern="正則表達式" />pattern 屬性常用的正則表達式：
Email 地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
InternetURL：[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$
手機號碼：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
國內電話號碼（0511-4405222、021-87888822）：\d{3}-\d{8}|\d{4}-\d{7}
身份證號（15 位、18 位數字）：^\d{15}|\d{18}$
帳號是否合法（字母開頭，允許 5-16 字節，允許字母數字下劃線）：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
密碼（以字母開頭，長度在 6~18 之間，只能包含字母、數字和下劃線）：^[a-zA-Z]\w{5,17}$
強密碼（必須包含大小寫字母和數字的組合，不能使用特殊字符，長度在 8-10 之間）：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
日期格式：^\d{4}-\d{1,2}-\d{1,2} 一年的 12 個月（01～09 和 1～12）：^(0?[1-9]|1[0-2])$
一個月的 31 天（01～09 和 1～31）：^((0?[1-9])|((1|2)[0-9])|30|31)$例子，假設一個用戶登錄頁面，用戶名必填，要求格式為字母數字和下劃線組合，長度在 6 到 20 之間。密碼為數字，長度也是 6 到 20 之間：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form>
用戶名：<input
type="text"
id="userName"
placeholder="請輸入用戶名"
required
pattern="\w{6,20}"
/>
密碼：<input
type="password"
id="password"
placeholder="請輸入密碼"
required
pattern="\d{6,20}"
/>
<button>登錄</button>
</form>
</body>
</html>
顯示為，
novalidate 屬性是用來取消表單的自動驗證功能的，例如前面已經講過的 email 元素，當用戶輸入數據格式不符合 email 的格式要求時，系統會自動提示格式不正確，這個功能就是自動驗證功能。
若用戶不希望系統提示錯誤信息而是由自己寫代碼來實現驗證提示功能的話，可以使用 novalidate 屬性關閉該功能。
例如，取消 email 類型的內置表單驗證。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form novalidate>
email：<input type="email" name="email" /><input
type="submit"
value="提交"
/><br />
</form>
</body>
</html>表單驗證的四個相關屬性，分別是
HTML5 新增了一個神奇的屬性，用它可以存儲一些數據，進行定義和數據存取。
我們以 data- 開頭來表示自定義數據屬性。
例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
li[data-type="one"]{
background:#8bc34a;
}
li[data-type="two"]{
background:#5089c6;
}
</style>
</head>
<body>
<ul>
<li data-type="one"></li>
<li data-type="two"></li>
</ul>
</body>
</html>除了使用自定義數據屬性設置樣式外，我們還可以使用它來創建元素的提示信息。
例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
span.tooptip{
cursor:pointer;
}
.tooltip-info{
position:absolute;
top: -9999px;
}
span.tooltip::before{
content:attr(data-tooltip);
position:absolute;
display:none;
color:white;
background:rgba(177, 166, 155, 0.55);
}
span:hover::before{
display:inline-block;
}
</style>
</head>
<body>
<p>
歡迎來到王椰浪的學習筆記
<span class="tooltip" data-tooltip="這是一個自定義屬性">
<span class="tooltip-info">
這是一個自定義屬性
</span>
王耶浪筆記本
</span>
</p>
</body>
</html>鼠標未放在有自定義屬性的文字上
鼠標放在有自定義屬性的文字上
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中文網(html.cn)</title>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</body>
</html>解析
|
HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。
HTML 標簽是由尖括號包圍的關鍵詞，比如 <html>
HTML 標簽通常是成對出現的，比如 <b> 和 </b>
標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽
開始和結束標簽也被稱為開放標簽和閉合標簽
<標簽>內容</標簽>
“HTML 標簽” 和 “HTML 元素” 通常都是描述同樣的意思.
但是嚴格來講, 一個 HTML 元素包含了開始標簽與結束標簽，如下實例:
HTML 元素:
<p>這是一個段落。</p>
頭部元素包含關于文檔的概要信息，也稱為元信息（meta-information）。Meta 意為“關于某方面的信息”。
可以這么說，元數據（meta-data）是關于數據的信息，而元信息是關于信息的信息。
<head> 元素包含了所有的頭部標簽元素。在 元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息。
可以添加在頭部區域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
<title> 標簽定義了不同文檔的標題。
<title> 在 HTML/XHTML 文檔中是必須的。
<title> 元素：
1.定義了瀏覽器工具欄的標題
2.當網頁添加到收藏夾時，顯示在收藏夾中的標題
3.顯示在搜索引擎結果頁面的標題
<base> 標簽描述了基本的鏈接地址/鏈接目標，該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:
|
<link> 標簽定義了文檔與外部資源之間的關系。
<link> 標簽通常用于鏈接到樣式表:
|
<style> 標簽定義了HTML文檔的樣式文件引用地址.
在<style> 元素中你也可以直接添加樣式來渲染 HTML 文檔:
|
meta標簽描述了一些基本的元數據。
<meta> 標簽提供了元數據.元數據也不顯示在頁面上，但會被瀏覽器解析。
META 元素通常用于指定網頁的描述，關鍵詞，文件的最后修改時間，作者，和其他元數據。
元數據可以使用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他Web服務。
<meta> 一般放置于 <head> 區域
<script>標簽用于加載腳本文件，如： JavaScript。
<script> 元素在以后的章節中會詳細描述。
HTML head 元素
標簽 | 描述 |
<head> | 定義了文檔的信息 |
<title> | 定義了文檔的標題 |
<base> | 定義了頁面鏈接標簽的默認鏈接地址 |
<link> | 定義了一個文檔和外部資源之間的關系 |
<meta> | 定義了HTML文檔中的元數據 |
<script> | 定義了客戶端的腳本文件 |
<style> | 定義了HTML文檔的樣式文件 |
開始標簽 | 元素內容 | 結束標簽 |
<p> | 這是一個段落 | </p> |
<a href="default.html"> | 這是一個鏈接 | </a> |
<br> | 換行 |
HTML注釋標簽<!--...-->用來在源文檔中插入注釋。注釋不會在瀏覽器中顯示。可使用注釋對您的代碼進行解釋，這樣做有助于您在以后的時間對代碼的編輯。特別是代碼量很大的情況下很有用
<script type="text/javascript">
<!--
function displayMsg()
{
alert("Hello World!")
}
//-->
</script><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML教程(html.cn)</title>
</head>
<body>
<b>加粗文本</b><br><br>
<i>斜體文本</i><br><br>
<code>電腦自動輸出</code><br><br>
這是 <sub> 下標</sub> 和 <sup> 上標</sup>
</body>
</html>HTML 文本格式化標簽
標簽 | 描述 |
<b> | 定義粗體文本 |
<em> | 定義著重文字 |
<i> | 定義斜體字 |
<small> | 定義小號字 |
<strong> | 定義加重語氣 |
<sub> | 定義下標字 |
<sup> | 定義上標字 |
<ins> | 定義插入字 |
<del> | 定義刪除字 |
HTML”計算機輸出”標簽
標簽 | 描述 |
<kbd> | 定義鍵盤碼 |
<samp> | 定義計算機代碼樣本 |
<var> | 定義變量 |
<pre> | 定義預格式文本 |
<code> | 定義計算機代碼 |
HTML 引文，引用，及標簽定義
標簽 | 描述 |
<abbr> | 定義縮寫 |
<address> | 定義地址 |
<bdo> | 定義文字方向 |
<blockquote> | 定義長的引用 |
<q> | 定義短的引用語 |
<cite> | 定義引用、引證 |
<dfn> | 定義一個定義項目 |
HTML 區塊元素
可以通過 <div> 和 <span> 將 HTML 元素組合起來
HTML塊級元素
塊級元素在瀏覽器顯示時，通常會以新行來開始和結束 - 例：<h1>, <p>, <ul>, <table>
HTML內聯元素
內聯元素在顯示時通常不會以新行開始 - 例：<b>, <td>, <a>, <img>
HTML <div> 元素
HTML <div> 元素是塊級元素，瀏覽器會在其前后顯示折行 - 如果與 CSS 一同使用，<div> 元素可用于對大的內容塊設置樣式屬性。 - <div> 元素的另一個常見的用途是文檔布局
HTML <span> 元素
HTML <span> 元素是內聯元素，可用作文本的容器 - 與 CSS 一同使用時，<span> 元素可用于為部分文本設置樣式屬性
HTML 實體
在 HTML 中，某些字符是預留的。
比如在 HTML 中不能使用小于號（<）和大于號（>）因為瀏覽器會誤認為它們是標簽，所以希望能正確地顯示預留字符，我們必須在 HTML 源代碼中使用字符實體（character entities）。
字符實體類似這樣&entity_name;
或
&#entity_number;
HTML 字符實體
不間斷空格
HTML 中的常用字符實體是不間斷空格( )
瀏覽器總是會截短 HTML 頁面中的空格，如果需要在頁面中增加空格的數量，需要使用 字符實體
有用的字符實體
顯示結果 | 描述 | 實體名稱 | 實體編碼 |
空格 | |||
< | 小于號 | < | < |
> | 大于號 | > | > |
& | 和號 | & | & |
“ | 引號 | " | " |
‘ | 撇號 | ' (IE不支持) | ' |
￠ | 分 | ￠ | ￠ |
￡ | 鎊 | ￡ | ￡ |
￥ | 元 | ￥ | ￥ |
€ | 歐元 | € | € |
§ | 小節 | § | § |
? | 版權 | ? | ? |
? | 注冊商標 | ? | ? |
? | 商標 | ? | ? |
× | 乘號 | × | × |
÷ | 除號 | ÷ | ÷ |
歡迎大家提議、分享、交流、共同學習進步
多復雜的網頁都是由若干個區域構成的，在HTML5中，為了使網頁的文檔結構更加清晰明了，新增了頁眉、內容、頁腳等與文檔結構相關的主體結構元素。在本次的教學中，我們就來學習HTML5元素中新增的主體結構的一些方法和演示案例。
1.nav元素
nav元素用于定義導航鏈接的內容，可以作為頁面導航的鏈接組，其中的導航元素鏈接到其他頁面或者當前頁面的其他部分，使HTML代碼的語義化方面更加精準，同時對于屏幕閱讀器等設備的支持也更好。
在html5之前，通常情況下我們會使用＜div＞元素或者＜ul id="nav"＞這樣的代碼來表示頁面的導航，而在HTML5中，我們可以直接將導航鏈接列表放在＜nav＞元素中，比如下面這個例子：
HTML5中的nav元素
nav元素在網頁中有著非常重要的作用，比如網頁頂部的導航條，其作用是在多個頁面間進行跳轉鏈接；網頁側邊欄導航，其作用是從當前頁面跳轉到其他頁面；網頁內頁導航，其作用是在一個網頁中的多個主要部分進行跳轉；翻頁導航，其作用是在多個網頁間實現實現前后頁滾動。
2.time元素
time即時間，該元素用于定義日期和時間。由于時區的問題，網頁上顯示的時間如果處理不好，就會讓人產生歧義，比如應該是上午9點15分，卻顯示成下午22點30分。為了在網頁上能準確低顯示時間，讓所有人都不會產生歧義，因此HTML5新增了time元素。time元素可以表示帶時區的時間，還可以定義多種格式的日期和時間，代碼和效果如圖所示：
HTML5中的time元素
3.article元素
article元素用于定義外部的內容，可以是一篇新的文章、一篇博文、一個帖子、一段評論等等，還可以是來自其他外部源的內容。一個article元素可以有它自己的標題、內容和腳注，還可以與其他的article元素嵌套使用。演例代碼如下圖所示：
HTML5中的article元素
在這段代碼中，header元素中嵌入了文章的標題部分，p元素嵌入了文章的正文，嵌套的article元素又引用了另外一篇文章，最后在結尾處，footer元素嵌入了一下版權信息。
4.section元素
section元素定義文檔中的節，比如章節、頁眉、頁腳或文檔中的其他部分。一個section元素通常由內容及其標題組成。代碼演示如下圖：
HTML5中的section元素
在這段代碼中，＜h1＞元素嵌入了這段文字的標題，＜p＞元素嵌入了這段文字的正文，標題和正文構成了文檔內容一個獨立的塊，這個快使用section元素表示。
section元素用于表示文章的段，是一個獨立的塊，而article元素用于表示文章外部的內容，雖然它也是獨立的，請不要把這兩者相混淆。比如要在一篇文章中如果需要引用另一篇文章的某些段落時，其代碼如下圖所示：
HTML5中的section元素
在比如你要在一個段落中引用一篇文章時，其代碼如下圖：
HTML5中的section元素
5.aside元素
aside元素用來定義article元素以外的內容，其內容應該與article的內容相關。這樣的情況在生活中很常見，像文章中的名詞解釋。名詞解釋作為文章中的一部分，其內容與文章相關，所以這種情況下就可以使用aside元素。其代碼和效果如下圖所示：
HTML5中的aside元素
HTML5中的aside元素
另外，aside元素的內容還可以用作文章的側欄，其內容作為文章的附屬信息。例如nav元素導航作為aside元素的內容，這樣就實現了一個側邊欄導航條。代碼及效果圖如下：
HTML5中的aside元素
HTML5中的aside元素
這些元素就是HTML5元素中新增的主體結構了。我們在學習這些代碼的時候一定要勤加練習，這樣才能夠記住它們。下一期我們介紹HTML5元素中新增的非主體結構。了解更多動態資訊請加我們的官方微信號：pyyuanxing。謝謝大家的觀看，祝大家生活愉快、身體健康。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
