關於HTML

樑廣銘發表於2019-02-16
HTML

一、W3C 簡介

全球資訊網聯盟（World Wide Web Consortium，W3C），又稱W3C理事會，是全球資訊網的主要國際標準組織。

歷史

全球資訊網聯盟（W3C）由蒂姆·伯納斯-李於1994年10月離開歐洲核子研究中心（CERN）後成立，在歐盟執委會和國防高等研究計劃署（DARPA）的支援下成立於麻省理工學院MIT電腦科學與人工智慧實驗室（MIT／LCS），DARPA曾率先推出了網際網路及其前身ARPANET。

標準

為解決網路應用中不同平臺、技術和開發者帶來的不相容問題，保障網路資訊的順利和完整流通，全球資訊網聯盟制定了一系列標準並督促網路應用開發者和內容提供者遵循這些標準。標準的內容包括使用語言的規範，開發中使用的導則和解釋引擎的行為等等。W3C也制定了包括XML和CSS等的眾多影響深遠的標準規範。

但是，W3C制定的網路標準似乎並非強制而只是推薦標準。因此部分網站仍然不能完全實現這些標準。特別是使用早期所見即所得網頁編輯軟體設計的網頁往往會包含大量非標準程式碼。

  • W3C推薦標準
  • CSS：層疊樣式表
  • DOM：文件物件模型
  • HTML：超文字標記語言
  • RDF：資源描述框架
  • SMIL：同步多媒體整合語言
  • SVG：可縮放向量圖形
  • WAI
  • Widgets
  • XHTML：可擴充套件超文字標記語言
  • XML：可擴充套件標記語言

外部連結

可能需要翻牆

二、MDN 簡介

MDN Web Docs（舊稱Mozilla Developer Network、Mozilla Developer Center，簡稱MDN）是一個彙集眾多Mozilla基金會產品和網路技術開發文件的免費網站。

歷史

該專案始於2005年，最初由Mozilla公司員工Deb Richardson領導。自2006年以來，文件工作由Eric Shepherd領導。

網站最初的內容是由DevEdge提供，但在AOL收購Netscape後，DevEdge網站也宣佈關閉。為此Mozilla基金會向AOL獲取了DevEdge釋出的內容，同時將DevEdge內容搬移到mozilla.org。

MDN本身有一個論壇，並在Mozilla IRC網路上有一個IRC頻道#mdn。MDN由Mozilla公司提供伺服器和員工的資助。

2016年10月3日發表的Brave網頁瀏覽器將MDN作為其搜尋引擎選項之一。

外部連結

三、HTML 所有標籤列表

這裡列出了所有標準化的HTML5元素，使用起始標籤描述，按照功能分組。與列出所有標準化的、非標準化的、有效的、廢棄的標籤的HTML元素索引不同的是，該頁只列出有效的HTML5元素。新網站應當只使用這裡列出的元素。

根元素

<html>    代表 HTML 或 XHTML 文件的根。其他所有元素必須是這個元素的子節點。

文件後設資料

<head>     代表關於文件後設資料的一個集合，包括指令碼或樣式表的連結或內容。
<title>    定義文件的標題，將顯示在瀏覽器的標題欄或標籤頁上。該元素只能包含文字，包含的標籤不會被解釋。
<base>     定義頁面上相對 URL 的基準 URL。
<link>     用於連結外部的 CSS 到該文件。
<meta>     定義其他 HTML 元素無法描述的後設資料。
<style>    用於內聯 CSS。

指令碼

<script>      定義一個內聯指令碼或連結到外部指令碼。指令碼語言是 JavaScript。
<noscript>    定義當瀏覽器不支援指令碼時顯示的替代文字。
<template>    通過 JavaScript 在執行時例項化內容的容器。

章節

<body>        代表 HTML 文件的內容。在文件中只能有一個 <body> 元素。
<section>     定義文件中的一個章節。
<nav>         定義只包含導航連結的章節。
<article>     定義可以獨立於內容其餘部分的完整獨立內容塊。
<aside>       定義和頁面內容關聯度較低的內容——如果被刪除，剩下的內容仍然很合理。
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>    標題元素實現了六層文件標題，<h1> 是最大的標題，<h6> 是最小的標題。標題元素簡要地描述章節的主題。
<header>      定義頁面或章節的頭部。它經常包含 logo、頁面標題和導航性的目錄。
<footer>      定義頁面或章節的尾部。它經常包含版權資訊、法律資訊連結和反饋建議用的地址。
<address>     定義包含聯絡資訊的一個章節。
<main>        定義文件中主要或重要的內容。

組織內容

<p>    定義一個段落。
<hr>    代表章節、文章或其他長內容中段落之間的分隔符。
<pre>    代表其內容已經預先排版過，格式應當保留 。
<blockquote>    代表引用自其他來源的內容。
<ol>    定義一個有序列表。
<ul>    定義一個無序列表。
<li>    定義列表中的一個列表項。
<dl>    定義一個定義列表（一系列術語和其定義）。
<dt>    代表一個由下一個 <dd> 定義的術語。
<dd>    代表出現在它之前術語的定義。
<figure> 這個元素在 HTML5 中加入    代表一個和文件有關的圖例。
<figcaption> 這個元素在 HTML5 中加入    代表一個圖例的說明。
<div>    代表一個通用的容器，沒有特殊含義。

文字形式

<a>    代表一個連結到其他資源的超連結 。
<em>    代表強調 文字。
<strong>    代表特別重要 文字。
<small>    代表註釋 ，如免責宣告、版權宣告等，對理解文件不重要。
<s>    代表不準確或不相關 的內容。
<cite>    代表作品標題 。
<q>    代表內聯的引用 。
<dfn>    代表一個術語包含在其最近祖先內容中的定義 。
<abbr>    代表省略 或縮寫 ，其完整內容在 title 屬性中。
<data> 關聯一個內容的機器可讀的等價形式 （該元素只在 WHATWG 版本的 HTML 標準中，不在 W3C 版本的 HTML5 標準中）。
<time> 代表日期 和時間 值；機器可讀的等價形式通過 datetime 屬性指定。
<code>    代表計算機程式碼 。
<var>    代表程式碼中的變數 。
<samp>    代表程式或電腦的輸出 。
<kbd>    代表使用者輸入 ，一般從鍵盤輸出，但也可以代表其他輸入，如語音輸入。
<sub>,<sup>    分別代表下標 和上標 。
<i>    代表一段不同性質 的文字，如技術術語、外文短語等。
<b>    代表一段需要被關注 的文字。
<u>    代表一段需要下劃線呈現的文字註釋，如標記出拼寫錯誤的文字等。
<mark> 代表一段需要被高亮的引用 文字。
<ruby>     代表被ruby 註釋 標記的文字，如中文漢字和它的拼音。
<rt>     代表ruby 註釋 ，如中文拼音。
<rp>     代表 ruby 註釋兩邊的額外插入文字 ，用於在不支援 ruby 註釋顯示的瀏覽器中提供友好的註釋顯示。
<bdi>     代表需要脫離 父元素文字方向的一段文字。它允許嵌入一段不同或未知文字方向格式的文字。
<bdo>    指定子元素的文字方向 ，顯式地覆蓋預設的文字方向。
<span>    代表一段沒有特殊含義的文字，當其他語義元素都不適合文字時候可以使用該元素。
<br>    代表換行 。
<wbr>     代表建議換行 (Word Break Opportunity) ，當文字太長需要換行時將會在此處新增換行符。

編輯

<ins>    定義增加 到文件的內容。
<del>    定義從文件移除 的內容。

嵌入內容

<img>       代表一張圖片 。
<iframe>    代表一個內聯的框架 。
<embed>     代表一個嵌入 的外部資源，如應用程式或互動內容。
<object>    代表一個外部資源 ，如圖片、HTML 子文件、外掛等。
<param>     代表 <object> 元素所指定的外掛的引數 。
<video>     代表一段視訊 及其視訊檔案和字幕，並提供了播放視訊的使用者介面。
<audio>     代表一段聲音 ，或音訊流 。
<source>    為 <video> 或 <audio> 這類媒體元素指定媒體源 。
<track>     為 <video> 或 <audio> 這類媒體元素指定文字軌道（字幕） 。
<canvas>    代表點陣圖區域 ，可以通過指令碼在它上面實時呈現圖形，如圖表、遊戲繪圖等。
<map>       與 <area> 元素共同定義影像對映 區域。
<area>      與 <map> 元素共同定義影像對映 區域。
<svg>       定義一個嵌入式向量圖 。
<math>      定義一段數學公式 。

表格

<table>    定義多維資料 。
<caption>    代表表格的標題 。
<colgroup>    代表表格中一組單列或多列 。
<col>    代表表格中的列 。
<tbody>    代表表格中一塊具體資料 （表格主體）。
<thead>    代表表格中一塊列標籤 （表頭）。
<tfoot>    代表表格中一塊列摘要 （表尾）。
<tr>    代表表格中的行 。
<td>    代表表格中的單元格 。
<th>    代表表格中的頭部單元格 。

表單

<form>    代表一個表單 ，由控制元件組成。
<fieldset>    代表控制元件組 。
<legend>    代表 <fieldset> 控制元件組的標題 。
<label>    代表表單控制元件的標題 。
<input>    代表允許使用者編輯資料的資料區 （文字框、單選框、核取方塊等）。
<button>    代表按鈕 。
<select>    代表下拉框 。
<datalist>     代表提供給其他控制元件的一組預定義選項 。
<optgroup>    代表一個選項分組 。
<option>    代表一個 <select> 元素或 <datalist> 元素中的一個選項
<textarea>    代表多行文字框 。
<keygen>     代表一個金鑰對生成器 控制元件。
<output>     代表計算值 。
<progress>     代表進度條 。
<meter>     代表滑動條 。

互動元素

<details>      代表一個使用者可以(點選)獲取額外資訊或控制元件的小部件 。
<summary>      代表 <details> 元素的綜述 或標題 。
<menuitem>     代表一個使用者可以點選的選單項。
<menu>         代表選單。

外部連結

四、什麼是空標籤（即空元素）

一個空元素（empty element）可能是 HTML，SVG，或者 MathML 裡的一個不可能存在子節點（例如內嵌的元素或者元素內的文字）的element。
HTML，SVG 和 MathML 的規範都詳細定義了每個元素能包含的具體內容（define very precisely what each element can contain）。許多組合是沒有任何語義含義的，比如一個 <audio> 元素巢狀在一個 <hr> 元素裡。
在 HTML 中，通常在一個空元素上使用一個閉標籤是無效的。例如， <input type=”text”></input> 的閉標籤是無效的 HTML。

在 HTML 中有以下這些空元素：

<area>
<base>
<br>
<col>
<colgroup> when the span is present
<command>
<embed>
<hr>
<img>
<input>
<keygen>
<link>
<meta>
<param>
<source>
<track>
<wbr>

Note: 在極少數情況下，空元素被錯誤地稱為“無效元素”(void elements)。

五、什麼是可替換標籤（即可替換元素）

CSS 裡，可替換元素（replaced element）的展現不是由CSS來控制的。這些元素是一類 外觀渲染獨立於CSS的 外部物件。 典型的可替換元素有 <img>、 <object>、 <video> 和 表單元素，如<textarea>、 <input> 。 某些元素只在一些特殊情況下表現為可替換元素，例如 <audio> 和 <canvas> 。 通過 CSS content 屬性來插入的物件 被稱作 匿名可替換元素（anonymous replaced elements）。

CSS在某些情況下會對可替換元素做特殊處理，比如計算外邊距和一些auto值。

需要注意的是，一部分（並非全部）可替換元素，本身具有尺寸和基線（baseline），會被像vertical-align之類的一些 CSS 屬性用到。

相關文章