Web開發(fā)學(xué)習筆記（10）-HTML5（五）新屬性

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>

顯示為，

內(nèi)容根據(jù)不同的表單所屬的id進行提交。

打開一個頁面，當某個文本框需要獲得光標焦點時，可以使用 autofocus 屬性來實現(xiàn)。

例子，

<!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 屬性是用來規(guī)定表單是否應(yīng)該啟用自動完成功能，即“自動補全”。

自動完成功能就是當用戶輸入一次數(shù)據(jù)過后，再次輸入相同的數(shù)據(jù)時可以自動補全內(nèi)容。

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，該標簽可實現(xiàn)提供數(shù)據(jù)列表的功能，而 list 屬性則是為了將該標簽和指定文本框進行關(guān)聯(lián)所設(shè)計的。

語法格式為：

<input list="datalist-id" />

例子與上面autocomplete相同，已經(jīng)用過了。

placeholder 屬性描述輸入字段預(yù)期值的提示信息，提示用戶設(shè)置的輸入值。

其語法格式為：

<input placeholder="text" />

灰色字體是提示信息，placeholder 屬性適用于 input 中的 text、search、url、tel、email 和 password 類型。

HTML5 新增了 min，max 和 step 屬性用于為數(shù)字或日期輸入類型的 input 提供數(shù)值限制，可以使用該屬性的標簽有 number、range、Date pickers。

min 屬性規(guī)定 input 元素的最小值。其語法格式為：

<input type="number" min="number" /> <input type="date" min="date" />

number 為數(shù)字值，date 為日期。

max 屬性規(guī)定 input 元素的最大值。其語法格式為：

<input type="number" max="number" /> <input type="date" max="date" />

step 屬性規(guī)定 input 元素數(shù)值之間的步長，也就是數(shù)字間隔。其語法格式為：

<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>

顯示為，

點擊上下箭頭，數(shù)字以9為step增加或減少。

multiple 屬性規(guī)定用戶一次可以輸入多個值。

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 實現(xiàn)表單驗證的幾個前提條件：

form 標簽不能有 novalidate 屬性。
input 標簽一定要有 required 和 pattern 屬性。
必須要有 form 標簽和提交按鈕。

HTML表單驗證：

placeholder 屬性用于為文本框提供提示說明功能，提示說明該文本框希望用戶輸入何種數(shù)據(jù)。

當用光標焦點聚焦到該文本框時，提示說明文字消失。不輸入任何信息，提示說明文字不會被當做用戶輸入數(shù)據(jù)提交。

<form>
  <input placeholder="提示信息" />
</form>

required 屬性是用來限定文本框內(nèi)容不能為空的。當文本框內(nèi)容為空時，無法提交表單。該屬性適用于 text、password 等大多數(shù)文本框。

<form>
  <input required />
</form>

pattern 屬性是對用戶輸入信息進行正則表達式校驗。該屬性適用于大多數(shù)的 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}$

國內(nèi)電話號碼（0511-4405222、021-87888822）：\d{3}-\d{8}|\d{4}-\d{7}

身份證號（15 位、18 位數(shù)字）：^\d{15}|\d{18}$

帳號是否合法（字母開頭，允許 5-16 字節(jié)，允許字母數(shù)字下劃線）：^[a-zA-Z][a-zA-Z0-9_]{4,15}$

密碼（以字母開頭，長度在 6~18 之間，只能包含字母、數(shù)字和下劃線）：^[a-zA-Z]\w{5,17}$

強密碼（必須包含大小寫字母和數(shù)字的組合，不能使用特殊字符，長度在 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)$

例子，假設(shè)一個用戶登錄頁面，用戶名必填，要求格式為字母數(shù)字和下劃線組合，長度在 6 到 20 之間。密碼為數(shù)字，長度也是 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 屬性是用來取消表單的自動驗證功能的，例如前面已經(jīng)講過的 email 元素，當用戶輸入數(shù)據(jù)格式不符合 email 的格式要求時，系統(tǒng)會自動提示格式不正確，這個功能就是自動驗證功能。

若用戶不希望系統(tǒng)提示錯誤信息而是由自己寫代碼來實現(xiàn)驗證提示功能的話，可以使用 novalidate 屬性關(guān)閉該功能。

例如，取消 email 類型的內(nèi)置表單驗證。

<!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>

表單驗證的四個相關(guān)屬性，分別是

placeholder 屬性：用于為文本框提供提示說明。
pattern 屬性：用來對用戶輸入信息進行正則表達式校驗的。
required 屬性：用來限定文本框內(nèi)容不能為空的。
novalidate 屬性：用來取消表單的自動驗證功能的。

HTML5 新增了一個神奇的屬性，用它可以存儲一些數(shù)據(jù)，進行定義和數(shù)據(jù)存取。

我們以 data- 開頭來表示自定義數(shù)據(jù)屬性。

例子，

<!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>

除了使用自定義數(shù)據(jù)屬性設(shè)置樣式外，我們還可以使用它來創(chuàng)建元素的提示信息。

例子，

<!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>
        歡迎來到王椰浪的學(xué)習筆記
        <span class="tooltip" data-tooltip="這是一個自定義屬性">
            <span class="tooltip-info">
                這是一個自定義屬性
            </span>
            王耶浪筆記本
        </span>
    </p>
</body>
</html>

鼠標未放在有自定義屬性的文字上

鼠標放在有自定義屬性的文字上

文本標記語言(英文HyperText Markup Language,簡稱：HTML)是一種用于創(chuàng)建網(wǎng)頁的標準標記語言!
對于中文網(wǎng)頁需要使用<meta charset='utf-8'>聲明編碼，否則會出現(xiàn)亂碼。有些瀏覽器（如360瀏覽器）會設(shè)置GBK為默認編碼，則你需要設(shè)置為<meta charset='gbk'>
例子模板

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中文網(wǎng)(html.cn)</title>
</head>
<body>
    <h1>我的第一個標題</h1>
    <p>我的第一個段落。</p>
</body>
</html>

解析

<!DOCTYPE html> 聲明為 HTML5 文檔
<html> 元素是 HTML 頁面的根元素
<head> 元素包含了文檔的元（meta）數(shù)據(jù)，如 <meta charset="utf-8"> 定義網(wǎng)頁編碼格式為 utf-8。
<title> 元素描述了文檔的標題
<body> 元素包含了可見的頁面內(nèi)容
<h1> 元素定義一個大標題
<p> 元素定義一個段落

什么是HTML？

HTML 是用來描述網(wǎng)頁的一種語言。
HTML 指的是超文本標記語言：HyperText Markup Language
HTML 不是一種編程語言，而是一種標記語言
標記語言是一套標記標簽 (markup tag)
HTML 使用標記標簽來描述網(wǎng)頁
HTML 文檔包含了HTML 標簽及文本內(nèi)容
HTML文檔也叫做 web 頁面

HTML 標簽

HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。
HTML 標簽是由尖括號包圍的關(guān)鍵詞，比如 <html>
HTML 標簽通常是成對出現(xiàn)的，比如 <b> 和 </b>
標簽對中的第一個標簽是開始標簽，第二個標簽是結(jié)束標簽
開始和結(jié)束標簽也被稱為開放標簽和閉合標簽
<標簽>內(nèi)容</標簽>

HTML 元素

“HTML 標簽” 和 “HTML 元素” 通常都是描述同樣的意思.
但是嚴格來講, 一個 HTML 元素包含了開始標簽與結(jié)束標簽，如下實例:
HTML 元素:
<p>這是一個段落。</p>

HTML 頭部元素

頭部元素包含關(guān)于文檔的概要信息，也稱為元信息（meta-information）。Meta 意為“關(guān)于某方面的信息”。
可以這么說，元數(shù)據(jù)（meta-data）是關(guān)于數(shù)據(jù)的信息，而元信息是關(guān)于信息的信息。

HTML <HEAD> 元素

<head> 元素包含了所有的頭部標簽元素。在元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息。
可以添加在頭部區(qū)域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

HTML <TITLE> 元素

<title> 標簽定義了不同文檔的標題。
<title> 在 HTML/XHTML 文檔中是必須的。
<title> 元素：
1.定義了瀏覽器工具欄的標題
2.當網(wǎng)頁添加到收藏夾時，顯示在收藏夾中的標題
3.顯示在搜索引擎結(jié)果頁面的標題

HTML <BASE> 元素

<base> 標簽描述了基本的鏈接地址/鏈接目標，該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:

<head>
<base href="http://www.html.cn/images/" target="_blank">
</head>

HTML <LINK> 元素

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML <STYLE> 元素

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML <META> 元素

meta標簽描述了一些基本的元數(shù)據(jù)。
<meta> 標簽提供了元數(shù)據(jù).元數(shù)據(jù)也不顯示在頁面上，但會被瀏覽器解析。
META 元素通常用于指定網(wǎng)頁的描述，關(guān)鍵詞，文件的最后修改時間，作者，和其他元數(shù)據(jù)。
元數(shù)據(jù)可以使用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他Web服務(wù)。
<meta> 一般放置于 <head> 區(qū)域

<META> 標簽- 使用實例

為搜索引擎定義關(guān)鍵詞:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
為網(wǎng)頁定義描述內(nèi)容:
<meta name="description" content="免費 Web & 編程教程">
定義網(wǎng)頁作者:
<meta name="author" content="HTML">
每30秒鐘刷新當前頁面:
<meta http-equiv="refresh" content="30">

HTML <SCRIPT> 元素

HTML head 元素

標簽	描述
<head>	定義了文檔的信息
<title>	定義了文檔的標題
<base>	定義了頁面鏈接標簽的默認鏈接地址
<link>	定義了一個文檔和外部資源之間的關(guān)系
<meta>	定義了HTML文檔中的元數(shù)據(jù)
<script>	定義了客戶端的腳本文件
<style>	定義了HTML文檔的樣式文件

HTML 元素

HTML元素指的是從開始標簽（start tag）到結(jié)束標簽（end tag）的所有代碼。例：

開始標簽	元素內(nèi)容	結(jié)束標簽
<p>	這是一個段落	</p>
<a href="default.html">	這是一個鏈接	</a>
<br>	換行

說明：HTML 文檔是由 HTML 元素定義的
注：開始標簽常被稱為起始標簽（opening tag），結(jié)束標簽常稱為閉合標簽（closing tag）。

元素語法

HTML 元素以開始標簽起始
HTML 元素以結(jié)束標簽終止
元素的內(nèi)容是開始標簽與結(jié)束標簽之間的內(nèi)容
某些 HTML 元素具有空內(nèi)容（empty content）
空元素在開始標簽中進行關(guān)閉（以開始標簽的結(jié)束而結(jié)束）
大多數(shù) HTML 元素可擁有屬性
注釋: 您將在本教程的下一章中學(xué)習更多有關(guān)屬性的內(nèi)容。
嵌套的 HTML 元素
HTML 文檔由嵌套的 HTML 元素構(gòu)成。大多數(shù) HTML 元素可以嵌套（可以包含其他 HTML 元素）。
空元素
沒有內(nèi)容的 HTML 元素被稱為空元素。空元素是在開始標簽中關(guān)閉的。
<br> 就是沒有關(guān)閉標簽的空元素（<br> 標簽定義換行）。
在 XHTML、XML 以及未來版本的 HTML 中，所有元素都必須被關(guān)閉。
在開始標簽中添加斜杠，比如 <br />，是關(guān)閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。
即使 <br> 在所有瀏覽器中都是有效的，但使用 <br /> 其實是更長遠的保障。

注釋標簽

HTML注釋標簽用來在源文檔中插入注釋。注釋不會在瀏覽器中顯示。可使用注釋對您的代碼進行解釋，這樣做有助于您在以后的時間對代碼的編輯。特別是代碼量很大的情況下很有用

標簽定義及使用說明

注釋標簽用來在源文檔中插入注釋。注釋不會在瀏覽器中顯示。
您可使用注釋對您的代碼進行解釋，這樣做有助于您在以后的時間對代碼的編輯。特別是代碼量很大的情況下很有用。
您也可以在注釋內(nèi)容存儲針對程序所定制的信息。在這種情況下，這些信息對用戶是不可見的，但是對程序來說是可用的。一個好的習慣是把注釋或樣式元素放入注釋文本中，這樣就可避免不支持腳本或樣式的老瀏覽器把它們顯示為純文本。

<script type="text/javascript">
<!--
function displayMsg()
{
  alert("Hello World!")
}
//-->
</script>

注釋：命令行最后的兩個正斜杠（//）是 JavaScript 注釋符號。這確保了 JavaScript 不會執(zhí)行 –> 標簽。
除了在源文檔中有非常明顯的作用外，許多 Web 服務(wù)器也利用注釋來實現(xiàn)文檔服務(wù)端軟件特有的特性。這些服務(wù)器可以掃描文檔，從傳統(tǒng)的 HTML/XHTML 注釋中找到特定的字符序列，然后再根據(jù)嵌在注釋中的命令采取相應(yīng)的動作。這些動作可能是簡單地包括其他文件中的文本（即所謂的服務(wù)器端包含，server-inside include），也可能是復(fù)雜地執(zhí)行其他命令去動態(tài)生成文檔的內(nèi)容。

HTML 段落與文字

標題

在 HTML 文檔中，標題很重要。標題（Heading）是通過 <h1> - <h6> 等標簽進行定義的。其中<h1> 定義最大的標題，<h6> 定義最小的標題
HTML中的標題標簽通過<h1>-<h6>來設(shè)置，越往下標題越小

段落

在HTML中段落是通過p標簽來定義的，它可以將HTML文檔分割為若干段落部分。因為p標簽是塊級元素，所以瀏覽器會自動地在段落的前后添加空行。
注意：因為p標簽是塊級元素，所以瀏覽器會自動地在段落的前后添加空行
我們可以通過<br/>標簽來對段落進行換行
如果希望在不產(chǎn)生一個新段落的情況下進行換行，就可以使用<br /> 標簽，注意它是一個單標簽。

文本格式化

HTML可定義很多供格式化輸出的元素，例：使用標簽 <b>(“bold”) 與 <i>(“italic”) 對輸出的文本進行格式，從而顯示粗體或者斜體
示例：

<!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>	定義預(yù)格式文本
<code>	定義計算機代碼

HTML 引文，引用，及標簽定義

標簽	描述
<abbr>	定義縮寫
<address>	定義地址
<bdo>	定義文字方向
<blockquote>	定義長的引用
<q>	定義短的引用語
<cite>	定義引用、引證
<dfn>	定義一個定義項目

區(qū)塊

大多數(shù) HTML 元素被定義為塊級元素或內(nèi)聯(lián)元素。塊級元素在瀏覽器顯示時，通常會以新行來開始（和結(jié)束）；而內(nèi)聯(lián)元素則不會。

HTML 區(qū)塊元素
可以通過 <div> 和 <span> 將 HTML 元素組合起來

HTML塊級元素
塊級元素在瀏覽器顯示時，通常會以新行來開始和結(jié)束 - 例：<h1>, <p>, <ul>, <table>

HTML內(nèi)聯(lián)元素
內(nèi)聯(lián)元素在顯示時通常不會以新行開始 - 例：<b>, <td>, <a>, <img>

HTML <div> 元素
HTML <div> 元素是塊級元素，瀏覽器會在其前后顯示折行 - 如果與 CSS 一同使用，<div> 元素可用于對大的內(nèi)容塊設(shè)置樣式屬性。 - <div> 元素的另一個常見的用途是文檔布局

HTML <span> 元素
HTML <span> 元素是內(nèi)聯(lián)元素，可用作文本的容器 - 與 CSS 一同使用時，<span> 元素可用于為部分文本設(shè)置樣式屬性

HTML字符實體

在 HTML 中，某些字符是預(yù)留的，這些預(yù)留字符必須被替換為字符實體；而，一些在鍵盤上找不到的字符也可以使用字符實體來替換。

HTML 實體
在 HTML 中，某些字符是預(yù)留的。
比如在 HTML 中不能使用小于號（<）和大于號（>）因為瀏覽器會誤認為它們是標簽，所以希望能正確地顯示預(yù)留字符，我們必須在 HTML 源代碼中使用字符實體（character entities）。
字符實體類似這樣
&entity_name;
或
&#entity_number;

HTML 字符實體
不間斷空格
HTML 中的常用字符實體是不間斷空格( )
瀏覽器總是會截短 HTML 頁面中的空格，如果需要在頁面中增加空格的數(shù)量，需要使用字符實體

有用的字符實體

顯示結(jié)果	描述	實體名稱	實體編碼
	空格
<	小于號	<	<
>	大于號	>	>
&	和號	&	&
“	引號	"	"
‘	撇號	' (IE不支持)	'
￠	分	￠	￠
￡	鎊	￡	￡
￥	元	￥	￥
€	歐元	€	€
§	小節(jié)	§	§
?	版權(quán)	?	?
?	注冊商標	?	?
?	商標	?	?
×	乘號	×	×
÷	除號	÷	÷

注意：實體名稱對大小寫敏感

歡迎大家提議、分享、交流、共同學(xué)習進步

多復(fù)雜的網(wǎng)頁都是由若干個區(qū)域構(gòu)成的，在HTML5中，為了使網(wǎng)頁的文檔結(jié)構(gòu)更加清晰明了，新增了頁眉、內(nèi)容、頁腳等與文檔結(jié)構(gòu)相關(guān)的主體結(jié)構(gòu)元素。在本次的教學(xué)中，我們就來學(xué)習HTML5元素中新增的主體結(jié)構(gòu)的一些方法和演示案例。

1.nav元素

nav元素用于定義導(dǎo)航鏈接的內(nèi)容，可以作為頁面導(dǎo)航的鏈接組，其中的導(dǎo)航元素鏈接到其他頁面或者當前頁面的其他部分，使HTML代碼的語義化方面更加精準，同時對于屏幕閱讀器等設(shè)備的支持也更好。

在html5之前，通常情況下我們會使用＜div＞元素或者＜ul id="nav"＞這樣的代碼來表示頁面的導(dǎo)航，而在HTML5中，我們可以直接將導(dǎo)航鏈接列表放在＜nav＞元素中，比如下面這個例子：

HTML5中的nav元素

nav元素在網(wǎng)頁中有著非常重要的作用，比如網(wǎng)頁頂部的導(dǎo)航條，其作用是在多個頁面間進行跳轉(zhuǎn)鏈接；網(wǎng)頁側(cè)邊欄導(dǎo)航，其作用是從當前頁面跳轉(zhuǎn)到其他頁面；網(wǎng)頁內(nèi)頁導(dǎo)航，其作用是在一個網(wǎng)頁中的多個主要部分進行跳轉(zhuǎn)；翻頁導(dǎo)航，其作用是在多個網(wǎng)頁間實現(xiàn)實現(xiàn)前后頁滾動。

2.time元素

time即時間，該元素用于定義日期和時間。由于時區(qū)的問題，網(wǎng)頁上顯示的時間如果處理不好，就會讓人產(chǎn)生歧義，比如應(yīng)該是上午9點15分，卻顯示成下午22點30分。為了在網(wǎng)頁上能準確低顯示時間，讓所有人都不會產(chǎn)生歧義，因此HTML5新增了time元素。time元素可以表示帶時區(qū)的時間，還可以定義多種格式的日期和時間，代碼和效果如圖所示：

HTML5中的time元素

3.article元素

article元素用于定義外部的內(nèi)容，可以是一篇新的文章、一篇博文、一個帖子、一段評論等等，還可以是來自其他外部源的內(nèi)容。一個article元素可以有它自己的標題、內(nèi)容和腳注，還可以與其他的article元素嵌套使用。演例代碼如下圖所示：

HTML5中的article元素

在這段代碼中，header元素中嵌入了文章的標題部分，p元素嵌入了文章的正文，嵌套的article元素又引用了另外一篇文章，最后在結(jié)尾處，footer元素嵌入了一下版權(quán)信息。

4.section元素

section元素定義文檔中的節(jié)，比如章節(jié)、頁眉、頁腳或文檔中的其他部分。一個section元素通常由內(nèi)容及其標題組成。代碼演示如下圖：

HTML5中的section元素

在這段代碼中，＜h1＞元素嵌入了這段文字的標題，＜p＞元素嵌入了這段文字的正文，標題和正文構(gòu)成了文檔內(nèi)容一個獨立的塊，這個快使用section元素表示。

section元素用于表示文章的段，是一個獨立的塊，而article元素用于表示文章外部的內(nèi)容，雖然它也是獨立的，請不要把這兩者相混淆。比如要在一篇文章中如果需要引用另一篇文章的某些段落時，其代碼如下圖所示：

HTML5中的section元素

在比如你要在一個段落中引用一篇文章時，其代碼如下圖：

HTML5中的section元素

5.aside元素

aside元素用來定義article元素以外的內(nèi)容，其內(nèi)容應(yīng)該與article的內(nèi)容相關(guān)。這樣的情況在生活中很常見，像文章中的名詞解釋。名詞解釋作為文章中的一部分，其內(nèi)容與文章相關(guān)，所以這種情況下就可以使用aside元素。其代碼和效果如下圖所示：

HTML5中的aside元素

另外，aside元素的內(nèi)容還可以用作文章的側(cè)欄，其內(nèi)容作為文章的附屬信息。例如nav元素導(dǎo)航作為aside元素的內(nèi)容，這樣就實現(xiàn)了一個側(cè)邊欄導(dǎo)航條。代碼及效果圖如下：

HTML5中的aside元素

這些元素就是HTML5元素中新增的主體結(jié)構(gòu)了。我們在學(xué)習這些代碼的時候一定要勤加練習，這樣才能夠記住它們。下一期我們介紹HTML5元素中新增的非主體結(jié)構(gòu)。了解更多動態(tài)資訊請加我們的官方微信號：pyyuanxing。謝謝大家的觀看，祝大家生活愉快、身體健康。

在線咨詢

上一篇：2024國際物流展會一覽表（國內(nèi)篇）丨Geek Expo
下一篇：css3 陰影的處理辦法

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

Web開發(fā)學(xué)習筆記（10）-HTML5（五）新屬性

什么是HTML？

HTML 標簽

HTML 元素

HTML 頭部元素

HTML <HEAD> 元素

HTML <TITLE> 元素

HTML <BASE> 元素

HTML <LINK> 元素

HTML <STYLE> 元素

HTML <META> 元素

<META> 標簽- 使用實例

HTML <SCRIPT> 元素

HTML 元素

元素語法

注釋標簽

標簽定義及使用說明

HTML 段落與文字

標題

段落

文本格式化

區(qū)塊

HTML字符實體

您的項目需求