HTML5 語義元素、遷移、樣式指南和代碼約定

時間  2019-11-22
標籤 html5 html 語義 元素 遷移 樣式 指南 代碼 約定 欄目 HTML5 简体版
原文   原文鏈接

語義元素是擁有語義的元素。javascript

什麼是語義元素？

語義元素清楚地向瀏覽器和開發者描述其意義。css

非語義元素的例子：<div> 和 <span> - 沒法提供關於其內容的信息。html

語義元素的例子：<form>、<table> 以及 <img> - 清晰地定義其內容。html5

瀏覽器支持

Internet Explorer Firefox Opera Google Chrome Safari

全部現代瀏覽器均支持 HTML5 語義元素。java

此外，您能夠「幫助」老式瀏覽器處理「未知元素」。jquery

在 HTML5 瀏覽器支持這一章學習更多知識。web

HTML5 中新的語義元素

許多網站包含了指示導航、頁眉以及頁腳的 HTML 代碼，例如這些：<div id="nav"> <div class="header"> <div id="footer">。api

HTML5 提供了定義頁面不一樣部分的新語義元素：瀏覽器

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

HTML5 語義元素服務器

HTML5 <section> 元素

<section> 元素定義文檔中的節。

根據 W3C 的 HTML 文獻：「節（section）是有主題的內容組，一般具備標題」。

能夠將網站首頁劃分爲簡介、內容、聯繫信息等節。

實例

<section>
   <h1>WWF</h1>
   <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

HTML5 <article> 元素

<article> 元素規定獨立的自包含內容。

文檔有其自身的意義，而且能夠獨立於網站其餘內容進行閱讀。

<article> 元素的應用場景：

  • 論壇
  • 博客
  • 新聞

實例

<article>
   <h1>What Does WWF Do?</h1>
   <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

Nesting Semantic 元素s

在 HTML5 標準中，<article> 元素定義完整的相關元素自包含塊。

<section> 元素被定義爲相關元素塊。

咱們可以使用該定義來決定如何嵌套元素嗎？不，咱們不能！

在因特網上，您會發現 <section> 元素包含 <article> 元素的 HTML 頁面，還有 <article> 元素包含 <sections> 元素的頁面。

您還會發現 <section> 元素包含 <section> 元素，同時 <article> 元素包含 <article> 元素。

註釋： Note Newspaper: The sports articles in the sports section, have a technical section in each article.

HTML5 <header> 元素

<header> 元素爲文檔或節規定頁眉。

<header> 元素應該被用做介紹性內容的容器。

一個文檔中能夠有多個 <header> 元素。

下例爲一篇文章定義了頁眉：

實例

<article>
   <header>
     <h1>What Does WWF Do?</h1>
     <p>WWF's mission:</p>
   </header>
   <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

HTML5 <footer> 元素

<footer> 元素爲文檔或節規定頁腳。

<footer> 元素應該提供有關其包含元素的信息。

頁腳一般包含文檔的做者、版權信息、使用條款連接、聯繫信息等等。

您能夠在一個文檔中使用多個 <footer> 元素。

實例

<footer>
   <p>Posted by: Hege Refsnes</p>
   <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>

HTML5 <nav> 元素

<nav> 元素定義導航連接集合。

<nav> 元素旨在定義大型的導航連接塊。不過，並不是文檔中全部連接都應該位於 <nav> 元素中！

實例

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

HTML5 <aside> 元素

<aside> 元素頁面主內容以外的某些內容（好比側欄）。

aside 內容應該與周圍內容相關。

實例

<p>My family and I visited The Epcot center this summer.</p>

<aside>
   <h4>Epcot Center</h4>
   <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

HTML5 <figure> 和 <figcaption> 元素

在書籍和報紙中，與圖片搭配的標題很常見。

標題（caption）的做用是爲圖片添加可見的解釋。

經過 HTML5，圖片和標題可以被組合在 <figure> 元素中：

實例

<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

<img> 元素定義圖像，<figcaption> 元素定義標題。

Why Semantic HTML5 元素？

若是使用 HTML4 的話，開發者會使用他們喜好的屬性名來設置頁面元素的樣式：

header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...

如此，瀏覽器便沒法識別正確的網頁內容。

而經過 HTML5 元素，好比：<header> <footer> <nav> <section> <article>，此問題迎刃而解。

根據 W3C，語義網：

「容許跨應用程序、企業和團體對數據進行分享和重用。」

HTML5 中的語義元素

下面列出了以字母順序排列的 HTML5 新語義元素。

這些連接指向完整的 HTML 參考手冊。

標籤 描述
<article> 定義文章。
<aside> 定義頁面內容之外的內容。
<details> 定義用戶可以查看或隱藏的額外細節。
<figcaption> 定義 <figure> 元素的標題。
<figure> 規定自包含內容，好比圖示、圖表、照片、代碼清單等。
<footer> 定義文檔或節的頁腳。
<header> 規定文檔或節的頁眉。
<main> 規定文檔的主內容。
<mark> 定義重要的或強調的文本。
<nav> 定義導航連接。
<section> 定義文檔中的節。
<summary> 定義 <details> 元素的可見標題。
<time> 定義日期/時間。

HTML 代碼約定

web 開發者經常不肯定在 HTML 中使用的代碼樣式和語法。

在 2000 年至 2010 年之間，許多 web 開發者從 HTML 轉換爲 XHTML。

經過 XHTML，開發者不得不編寫有效的「格式良好的」代碼。

HTML5 在代碼驗證時會更寬鬆一點。

經過 HTML5，您必須建立屬於本身的最佳實踐、樣式指南和代碼約定。

智能且有將來保證

對樣式的合乎邏輯的使用，能夠令其餘人更容易理解和使用您的 HTML。

在將來，諸如 XML 閱讀器之類的程序，也許須要閱讀您的 HTML。

使用格式良好的「近似 XHTML 的」語法，可以更智能。

註釋：請始終保持您的樣式智能、整潔、純淨、格式良好。

請使用正確的文檔類型

請始終在文檔的首行聲明文檔類型：

<!DOCTYPE html>

若是您一向堅持小寫標籤，那麼可使用：

<!doctype html>

請使用小寫元素名

HTML5 容許在元素名中使用混合大小寫字母。

咱們推薦使用小寫元素名：

    混合大小寫名稱並很差 開發者習慣使用小寫名（好比在 XHTML 中） 小寫更起來更純淨 小寫更易書寫

不太好：

<SECTION> 
  <p>This is a paragraph.</p>
</SECTION>

很糟糕：

<Section> 
  <p>This is a paragraph.</p>
</SECTION>

還不錯：

<section> 
  <p>This is a paragraph.</p>
</section>

關閉全部 HTML 元素

在 HTML5 中，您沒必要關閉全部元素（例如 <p> 元素）。

咱們建議關閉全部 HTML 元素：

看起來很差：

<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>

看起來不錯：

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>

關閉空的 HTML 元素

在 HTML5 中，關閉空元素是可選的。

容許這樣：

<meta charset="utf-8">

也容許這樣：

<meta charset="utf-8" />

斜槓（/）在 XHTML 和 XML 中是必需的。

若是您指望 XML 軟件來訪問您的頁面，保持這個習慣是個好主意。

使用小寫屬性名

HTML5 容許大小寫混合的屬性名。

咱們建議使用小寫屬性名：

    混合屬性名並很差 開發者習慣於使用小寫屬性名（好比在 XHTML 中） 小寫屬性名看狀況更純淨 小寫屬性名更易書寫

看起來很差：

<div class="menu">

看起來不錯：

<div class="menu">

屬性值加引號

HTML5 容許不加引號的屬性值。

咱們推薦屬性值加引號：

    若是屬性值包含值，則必須使用引號 混合樣式絕對很差 加引號的值更易閱讀

這個屬性值無效，由於值中包含空格：

<table class="table" striped>

這樣是有效的：

<table class="table striped">

必需的屬性

請始終對圖像使用 alt 屬性。當圖像沒法顯示時該屬性很重要。

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

請始終定義圖像尺寸。這樣作會減小閃爍，由於瀏覽器會在圖像加載以前爲圖像預留空間。

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

空格和等號

等號兩邊的空格是合法的：

<link rel = "stylesheet" href = "styles.css">

可是精簡空格更易閱讀， But space-less is easier to read, and groups entities better together:

<link rel="stylesheet" href="styles.css">

避免長代碼行

當使用 HTML 編輯器時，經過左右滾動來閱讀 HTML 代碼很不方便。

請儘可能避免代碼行超過 80 個字符。

空行和縮進

請勿毫無理由地增長空行。

爲了提升可讀性，請增長空行來分隔大型或邏輯代碼塊。

爲了提升可讀性，請增長兩個空格的縮進。請勿使用 TAB。

請勿使用沒有必要的空行和縮進。沒有必要在短的和相關項目之間使用空行，也沒有必要縮進每一個元素：

沒必要要：

<body>

  <h1>Famous Cities</1>

  <h2>Tokyo</h2>

  <p>
    Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.
    It is the seat of the Japanese government and the Imperial Palace,
    and the home of the Japanese Imperial Family.
  </p>

</body>

更好：

<body>

<h1>Famous Cities</1>
<h2>Tokyo</h2>

<p>
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>

</body>

表格示例：

<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  <tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  <tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  <tr>
</table>

列表示例：

<ol>
  <li>LondonA</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

省略 <html> 和 <body>？

在 HTML5 標準中，可以省略 <html> 標籤和 <body> 標籤。

如下代碼做爲 HTML5 進行驗證：

示例

<!DOCTYPE html>
<head>
  <title>Page Title</title>
</head>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

親自試一試

咱們不推薦省略 <html> 和 <body> 標籤。

<html> 元素是文本的根元素。它是規定頁面語言的理想位置。

<!DOCTYPE html>
<html lang="en-US">

對於可訪問應用程序（屏幕閱讀器）和搜索引擎，聲明語言很重要。

省略 <html> 或 <body> c可令 DOM 和 XML 軟件崩潰。

省略 <body> 會在老式瀏覽器（IE9）中產生錯誤。

省略 <head>？

在 HTML5 標準中，<head> 標籤也可以被省略。

默認地，瀏覽器會把 <body> 以前的全部元素添加到默認的 <head> 元素。

經過省略 <head> 標籤，您可以下降 HTML 的複雜性：

示例

<!DOCTYPE html>
<html>
<title>Page Title</title>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>

親自試一試

註釋：對於 web 開發者，省略標籤的作法是陌生的。創建規則須要時間。

元數據

<title> 元素在 HTML5 中是必需的。請儘量製做有意義的標題。

<title>HTML5 Syntax and Coding Style</title>

爲了確保恰當的解釋，以及正確的搜索引擎索引，在文檔中對語言和字符編碼的定義越早越好：

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>

HTML 註釋

短註釋應該在單行中書寫，並在 <!-- 以後增長一個空格，在 <!-- 以前增長一個空格：

<!-- This is a comment -->

長註釋，跨越多行，應該經過 <!-- 和 --> 在獨立的行中書寫：

<!-- 
  This is a long comment example. This is a long comment example. This is a long comment example.
  This is a long comment example. This is a long comment example. This is a long comment example.
-->

長註釋更易觀察，若是它們被縮進兩個空格的話。

樣式表

請使用簡單的語法來連接樣式表（type 屬性不是必需的）：

<link rel="stylesheet" href="styles.css">

短規則能夠壓縮爲一行，就像這樣：

p.into {font-family:"Verdana"; font-size:16em;}

長規則應該分爲多行：

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • 開括號與選擇器位於同一行
  • 在開括號以前用一個空格
  • 使用兩個字符的縮進
  • 在每一個屬性與其值之間使用冒號加一個空格
  • 在每一個逗號或分號以後使用空格
  • 在每一個屬性值對（包括最後一個）以後使用分號
  • 只在值包含空格時使用引號來包圍值
  • 把閉括號放在新的一行，以前不用空格
  • 避免每行超過 80 個字符

註釋：在逗號或分號以後添加空格，是全部書寫類型的通用規則。

在 HTML 中加載 JavaScript

請使用簡單的語法來加載外部腳本（type 屬性不是必需的）：

<script src="myscript.js">

經過 JavaScript 訪問 HTML 元素

使用「不整潔」的 HTML 樣式的後果，是可能會致使 JavaScript 錯誤。

這兩個 JavaScript 語句會產生不一樣的結果：

var obj = getElementById("Demo")

var obj = getElementById("demo")

親自試一試

若是可能，請在 HTML 中使用（與 JavaScript）相同的命名約定。

請訪問 JavaScript 樣式指南。

使用小寫文件名

大多數 web 服務器（Apache、Unix）對文件名的大小寫敏感：

不能以 london.jpg 訪問 London.jpg。

其餘 web 服務器（微軟，IIS）對大小寫不敏感：

可以以 london.jpg 或 London.jpg 訪問 London.jpg。

若是使用混合大小寫，那麼您必須保持高度的一致性。

若是您從對大小寫不敏感的服務器轉到一臺對大小寫敏感的服務器上，這些小錯誤將破壞您的網站。

爲了不這些問題，請始終使用小寫文件名（若是能夠的話）。

文件擴展名

HTML 文件名應該使用擴展名 .html（而不是 .htm）。

CSS 文件應該使用擴展名 .css。

JavaScript 文件應該使用擴展名 .js。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程