Web開發學習筆記（6）-HTML5（二）

義化標簽，是把 HTML 文檔中的元素劃分到不同區域，每個區域有自己的含義。

在 HTML5 中，提供了如下圖所示的語義化標簽，可更直觀看到頁面結構。

標簽說明：

header 標簽是頭部區域。
nav 標簽是導航區域。
article 標簽是內容區域。
section 標簽是文檔中部分內容區域。
aside 標簽是側邊內容欄區域。
footer 標簽是底部信息區域。

例如，環球科學的首頁，用語義化標簽劃分結構：

這些標簽本身只有一個塊級元素的特點，若不加入 CSS 樣式，沒有任何效果。

header 標簽是一種具有引導和導航作用的構架元素，通常用來放置整個頁面或者頁面中一個內容塊的標題，若是作為整個頁面的標題，應該放在頁面的起始位置。
nav 標簽是一個可以用作頁面導航的鏈接組。其中的導航元素可以將頁面導航至其他關聯頁。需要注意的是并不是需要將一個頁面的所有超鏈接都放到 nav 標簽中，只放具有導航意義的超鏈接即可。
section 標簽用于對頁面上的內容進行分區，可以通過該標簽將頁面的內容分成多個部分。每個部分之間又有一定的聯系。一個 section 標簽通常由標題和內容組成。
article 標簽用來表示頁面中獨立的、完整的、可以獨自被外部引用的內容。它可以是一篇文章、一段評論、或者一段描述。一個 article 通常都包含一個 header 標簽作為該文章的標題。
aside 標簽用來描述當前頁面內容的附注信息，它可以是當前頁面內容相關的引用、廣告、側邊欄等。
footer 標簽可以作為內容的注腳，例如在網頁中添加版權信息等。

time 標簽可以對日期進行管理操作。它代表某個日期或者是 24 小時中的某個時刻。當表示時刻的時候，可以使用時區進行顯示。例如：

<time datetime="2024-1-14">2024年1月14日</time>
<time datetime="2024-1-14T20:00">2024年1月14日晚8點</time>
<time datetime="2024-1-14T20:00Z">2024年1月14日晚8點</time>

搜索引擎會讀取 datetime 屬性的值，標簽中的文字是在頁面中顯示的文字。其中 T 代表的是日期和時間的間隔。z 代表的是時間使用的是 UTC 標準時間。

time 標簽有一個特殊的屬性為：pubdate。該屬性是布爾類型，通常用在 article 標簽中代表該文章的發布日期。新建一個 index.html 文件，在其中寫入以下內容：

<!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>
    <article>
      <header>
        <h1>文章標題</h1>
        <p>發布日期：<time datetime="2024-1-14" pubdate>2024年1月14日</time></p>
      </header>
    </article>
  </body>
</html>

figure 標簽規定獨立的流內容（包括圖像、圖表、照片、代碼片段等）。

figcaption 標簽為figure流內容的標題。figcaption 標簽應該被置于 figure 標簽的第一個或最后一個子標簽的位置。

figure 和 figcaption 標簽的使用，語法格式如下：

<figure>
  <figcaption></figcaption>
</figure>

在 HTML 中為我們提供了 code 標簽，在 <code> 與 </code> 之間就是代碼編輯區域。

舉個例子，新建一個 index1.html 文件，在其中寫入以下內容。

<!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>
    <figure>
      <pre>
            <code>
                var str="Hello LanQiao";
                console.log(str);
            </code>
        </pre>
      <figcaption>
        <p>這是一段 JavaScript 代碼</p>
      </figcaption>
    </figure>
  </body>
</html>

點擊預覽頁面，效果如下：

從截圖可以看出代碼部分在 code 標簽里的內容，與我們普通文字是不一樣。在我們的代碼里有一對 pre 標簽，它是用來格式化文本內容的，保留文本原有的換行格式。

們都知道，互聯網的發展速度是非常快的，用飛速發展來評價也不為過，一些老的技術也在逐漸被新的技術更新覆蓋或淘汰。其中HTML5不斷的更新和發展也變得越來越成熟，同時，越來越多的行業巨頭們也開始向HTML5示好。現在在我們的生活中，HTML5的身影已經隨處可見了，但是小編相信在未來的日子里，HTML5技術必定會以更多的形式來滲透到我們日常生活的方方面面。

青島HTML5

現在市場上，HTML5的使用越來越廣泛，并且在企業的前端開發中，HTML5的使用率也一直高居不下，因為HTML5作為開發工具而言，不僅可以靈活，相對于其他前端開發語言，HTML5也可以為企業節省大量成本。

從企業開發成本中就可以看出來HTML5受歡迎的優勢，那么HTML5還有哪些原因會這么受歡迎？

一、互動更好

很多人都喜歡更好的互動，喜歡對用戶有反饋的動態網站，并且用戶也很享受互動的過程，HTML5的畫圖便簽就允許你更多的互動和動畫，甚至超越我們之間使用的flash達到的效果，HTML5還擁有很多API允許你創建更加的用戶體驗，且更加動態的web應用程序。總體來講，不管是移動APP和網站，還是仍然占重要地位的琢磨web應用程序，越來越多的開發人員選擇HTML5技術，在以后的跨平臺軟件開發中，將會扮演更重要的角色。

二、更聰明的存儲

本地存儲是HTML5中最重要的特性，它的技術有點像cookie和客戶端數據庫的融合，但是比cookie更好用，支持多個Windows存儲，有更好的安全性能，即便是關閉了瀏覽器也是可以保存數據。在很多情況下，本地存儲是個不錯的選擇，不用擔心用戶刪除任何cookie，并且現在所有主流瀏覽器都支持HTML5。

三、HTML5使你更讓公司青睞

現在越來越來越多的公司開始注重HTML5的使用，并且很大程度上可以拿到不錯的薪水，現在企業中會HTML5要比不會入職薪資水平高多不少。

四、HTML5語法較弱

在w3c指定的HTML5的規范中，對于HTML5的語法規定比較松散，并且沒有嚴格要求每個控制標記都要有相應的結束控制標記。一些語義化標簽可以使開發更快捷，更輕松。

五、其他

隨著互聯網全面的快速發展，現代瀏覽器都已經支持HTML5，作為最前沿的web技術，持有canvas標簽和多種選擇的游戲開發引擎，讓游戲開發更便捷。可以更加豐富展現頁面，讓用戶體驗得到極大的提高。

就目前的情況來看，HTML5不管是移動開發中還是游戲開發中，都已經在扮演者非常重要的角色，畢竟一種能夠幫助企業節省成本，還能夠幫助開發人員節省時間和精力的編程語言，沒有人和企業能夠不喜歡它。

<!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>
</head>
<body>
<form>
    <table border="0">
        <caption><h3>基本信息</h3></caption>
        <tr>
            <td>
                姓名：<input type="text"/>
            </td>
            <td>
                性別：<input type="text"/>
            </td>
            <td rowspan="4">
                <img src="https://labfile.oss.aliyuncs.com/courses/3582/pelissari.jpg" width="150px" height="180px"/>
            </td>
        </tr>
        <tr>
            <td>
                年齡：<input type="number"/>
            </td>
            <td>
                生日：<input type="date"/>
            </td>
        </tr>
        <tr>
            <td>
                郵箱：<input type="mail" />
            </td>
            <td>
                電話：<input type="tel" />
            </td>
        </tr>
        <tr>
            <td>
                學歷：<select>
                    <option>專科</option>
                    <option>本科</option>
                    <option>碩士</option>
                    <option>博士</option>
                </select>
            </td>
            <td>
                學校：<input type="text" />
            </td>
        </tr>
        <tr>
            <td colspan="3">
            愛好：
            <input type="checkbox" name="hobby" value="reading"/>看書
            <input type="checkbox" name="hobby" value="drawing"/>畫畫
            <input type="checkbox" name="hobby" value="sporting"/>運動
            <input type="checkbox" name="hobby" value="photoing"/>攝影
            <input type="checkbox" name="hobby" value="traveling"/>旅行
            <input type="checkbox" name="hobby" value="coding"/>編程
            <input type="checkbox" name="hobby" value="other"/>其他
            </td>
        </tr>
        <tr>
            <td colspan="3">
            教育背景 <br />
            <textarea cols="90" rows="2"></textarea>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                自我評價 <br />
                <textarea cols="90" rows="2" ></textarea>
            </td>
        </tr>
    </table>
     <input type="submit" value="提交" />
</form>
</body>
</html>

在線咨詢

上一篇：在eBay美國、歐盟和澳大利亞站點常見物品刊登的安全
下一篇：10分鐘速成！Midjourney 網頁版操作指南

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Web開發學習筆記（6）-HTML5（二）

您的項目需求