本篇內(nèi)容：
- W3C
- MDN
- HTML 標(biāo)簽列表
- 常用標(biāo)簽詳解
- 什么是空標(biāo)簽
- 什么是可替換標(biāo)簽
W3C 簡(jiǎn)介
萬(wàn)維網(wǎng)聯(lián)盟（World Wide Web Consortium蚀浆，W3C）早芭，又稱W3C理事會(huì)，是萬(wàn)維網(wǎng)的主要國(guó)際標(biāo)準(zhǔn)組織[2]。為半自治非政府組織（quasi-autonomous non-governmental organisation），由蒂姆·伯納斯-李于1994年10月離開歐洲核子研究中心（CERN）后成立握础。
W3C推薦標(biāo)準(zhǔn)
- CSS：層疊樣式表
- DOM：文檔對(duì)象模型
- HTML：超文本標(biāo)記語(yǔ)言
- RDF：資源描述框架
- SMIL：同步多媒體集成語(yǔ)言
- SVG：可縮放矢量圖形
- WAI
- Widgets
- XHTML：可擴(kuò)展超文本標(biāo)記語(yǔ)言
- XML：可擴(kuò)展標(biāo)記語(yǔ)言
- PICS：網(wǎng)絡(luò)內(nèi)容篩選平臺(tái)
MDN 簡(jiǎn)介
MDN Web Docs（舊稱Mozilla Developer Network、Mozilla Developer Center悴品，簡(jiǎn)稱MDN）是一個(gè)匯集眾多Mozilla基金會(huì)產(chǎn)品和網(wǎng)上技術(shù)開發(fā)文檔的免費(fèi)網(wǎng)站禀综。
歷史
該項(xiàng)目始于2005年，最初由Mozilla公司員工Deb Richardson領(lǐng)導(dǎo)苔严。自2006年以來定枷，文檔工作由Eric Shepherd領(lǐng)導(dǎo)[2]。
網(wǎng)站最初的內(nèi)容是由DevEdge提供邦蜜，但在AOL收購(gòu)Netscape后依鸥，DevEdge網(wǎng)站也宣布關(guān)閉亥至。為此Mozilla基金會(huì)向AOL獲取了DevEdge發(fā)布的內(nèi)容[3][2]悼沈，同時(shí)將DevEdge內(nèi)容搬移到mozilla.org[4][5]。
MDN本身有一個(gè)論壇姐扮，并在Mozilla IRC網(wǎng)絡(luò)上有一個(gè)IRC頻道#mdn絮供。MDN由Mozilla公司提供服務(wù)器和員工的資助。
2016年10月3日發(fā)表的Brave網(wǎng)頁(yè)瀏覽器將MDN作為其搜索引擎選項(xiàng)之一茶敏。
HTML 標(biāo)簽列表
根元素
| Element |
Description |
<html> |
代表 HTML 或 XHTML文檔的根壤靶。其他所有元素必須是這個(gè)元素的子節(jié)點(diǎn)。 |
文檔元數(shù)據(jù)
| Element |
Description |
<head> |
代表關(guān)于文檔元數(shù)據(jù)的一個(gè)集合惊搏，包括腳本或樣式表的鏈接或內(nèi)容贮乳。 |
<title> |
定義文檔的標(biāo)題，將顯示在瀏覽器的標(biāo)題欄或標(biāo)簽頁(yè)上恬惯。該元素只能包含文本向拆，包含的標(biāo)簽不會(huì)被解釋。 |
<base> |
定義頁(yè)面上相對(duì) URL 的基準(zhǔn) URL酪耳。 |
<link> |
用于鏈接外部的 CSS 到該文檔浓恳。 |
<meta> |
定義其他 HTML 元素?zé)o法描述的元數(shù)據(jù)。 |
<style> |
用于內(nèi)聯(lián) CSS碗暗。 |
腳本
| Element |
Description |
<script> |
定義一個(gè)內(nèi)聯(lián)腳本或鏈接到外部腳本颈将。腳本語(yǔ)言是 JavaScript。 |
<noscript> |
定義當(dāng)瀏覽器不支持腳本時(shí)顯示的替代文字言疗。 |
<template> |
通過 JavaScript 在運(yùn)行時(shí)實(shí)例化內(nèi)容的容器晴圾。 |
章節(jié)
| Element |
Description |
<body> |
代表 HTML 文檔的內(nèi)容。在文檔中只能有一個(gè) <body> 元素噪奄。 |
<section> |
定義文檔中的一個(gè)章節(jié)死姚。 |
<nav> |
定義只包含導(dǎo)航鏈接的章節(jié)沾凄。 |
<article> |
定義可以獨(dú)立于內(nèi)容其余部分的完整獨(dú)立內(nèi)容塊。 |
<aside> |
定義和頁(yè)面內(nèi)容關(guān)聯(lián)度較低的內(nèi)容——如果被刪除知允，剩下的內(nèi)容仍然很合理撒蟀。 |
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> |
標(biāo)題元素實(shí)現(xiàn)了六層文檔標(biāo)題，<h1> 是最大的標(biāo)題温鸽，<h6> 是最小的標(biāo)題保屯。標(biāo)題元素簡(jiǎn)要地描述章節(jié)的主題。 |
<header> |
定義頁(yè)面或章節(jié)的頭部涤垫。它經(jīng)常包含logo姑尺、頁(yè)面標(biāo)題和導(dǎo)航性的目錄。 |
<footer> |
定義頁(yè)面或章節(jié)的尾部蝠猬。它經(jīng)常包含版權(quán)信息切蟋、法律信息鏈接和反饋建議用的地址。 |
<address> |
定義包含聯(lián)系信息的一個(gè)章節(jié)榆芦。 |
<main> |
定義文檔中主要或重要的內(nèi)容柄粹。 |
組織內(nèi)容
| Element |
Description |
<p> |
定義一個(gè)段落。 |
<hr> |
代表章節(jié)匆绣、文章或其他長(zhǎng)內(nèi)容中段落之間的分隔符驻右。 |
<pre> |
代表其內(nèi)容已經(jīng)預(yù)先排版過，格式應(yīng)當(dāng)保留 崎淳。 |
<blockquote> |
代表引用自其他來源的內(nèi)容堪夭。 |
<ol> |
定義一個(gè)有序列表。 |
<ul> |
定義一個(gè)無(wú)序列表拣凹。 |
<li> |
定義列表中的一個(gè)列表項(xiàng)森爽。 |
<dl> |
定義一個(gè)定義列表（一系列術(shù)語(yǔ)和其定義）。 |
<dt> |
代表一個(gè)由下一個(gè) <dd> 定義的術(shù)語(yǔ)嚣镜。 |
<dd> |
代表出現(xiàn)在它之前術(shù)語(yǔ)的定義爬迟。 |
<figure> |
代表一個(gè)和文檔有關(guān)的圖例。 |
<figcaption> |
代表一個(gè)圖例的說明祈惶。 |
<div> |
代表一個(gè)通用的容器雕旨，沒有特殊含義。 |
文字形式
| Element |
Description |
<a> |
代表一個(gè)鏈接到其他資源的超鏈接 捧请。 |
<em> |
代表強(qiáng)調(diào) 文字凡涩。 |
<strong> |
代表特別重要文字。 |
<small> |
代表注釋 疹蛉，如免責(zé)聲明活箕、版權(quán)聲明等，對(duì)理解文檔不重要可款。 |
<s> |
代表不準(zhǔn)確或不相關(guān) 的內(nèi)容育韩。 |
<cite> |
代表作品標(biāo)題 克蚂。 |
<q> |
代表內(nèi)聯(lián)的引用 。 |
<dfn> |
代表一個(gè)術(shù)語(yǔ)包含在其最近祖先內(nèi)容中的定義 筋讨。 |
<abbr> |
代表省略 或縮寫 埃叭，其完整內(nèi)容在 title 屬性中。 |
<data> |
關(guān)聯(lián)一個(gè)內(nèi)容的機(jī)器可讀的等價(jià)形式 （該元素只在 WHATWG 版本的 HTML 標(biāo)準(zhǔn)中悉罕，不在 W3C 版本的 HTML5 標(biāo)準(zhǔn)中）赤屋。 |
<time> |
代表日期 和時(shí)間 值；機(jī)器可讀的等價(jià)形式通過 datetime 屬性指定壁袄。 |
<code> |
代表計(jì)算機(jī)代碼 类早。 |
<var> |
代表代碼中的變量 。 |
<samp> |
代表程序或電腦的輸出 嗜逻。 |
<kbd> |
代表用戶輸入涩僻，一般從鍵盤輸出，但也可以代表其他輸入栈顷，如語(yǔ)音輸入逆日。 |
<sub>,<sup> |
分別代表下標(biāo) 和上標(biāo) 。 |
<i> |
代表一段不同性質(zhì) 的文字妨蛹，如技術(shù)術(shù)語(yǔ)屏富、外文短語(yǔ)等晴竞。 |
<b> |
代表一段需要被關(guān)注 的文字蛙卤。 |
<u> |
代表一段需要下劃線呈現(xiàn)的文本注釋，如標(biāo)記出拼寫錯(cuò)誤的文字等噩死。 |
<mark> |
代表一段需要被高亮的引用 文字颤难。 |
<ruby> |
代表被ruby 注釋 標(biāo)記的文本，如中文漢字和它的拼音已维。 |
<rt> |
代表ruby 注釋 行嗤，如中文拼音。 |
<rp> |
代表 ruby 注釋兩邊的額外插入文本 垛耳，用于在不支持 ruby 注釋顯示的瀏覽器中提供友好的注釋顯示栅屏。 |
<bdi> |
代表需要脫離 父元素文本方向的一段文本。它允許嵌入一段不同或未知文本方向格式的文本堂鲜。 |
<bdo> |
指定子元素的文本方向 栈雳，顯式地覆蓋默認(rèn)的文本方向。 |
<span> |
代表一段沒有特殊含義的文本缔莲，當(dāng)其他語(yǔ)義元素都不適合文本時(shí)候可以使用該元素哥纫。 |
<br> |
代表?yè)Q行 。 |
<wbr> |
代表建議換行 (Word Break Opportunity),當(dāng)文本太長(zhǎng)需要換行時(shí)將會(huì)在此處添加換行符痴奏。 |
編輯
| Element |
Description |
<ins> |
定義增加到文檔的內(nèi)容蛀骇。 |
<del> |
定義從文檔移除 的內(nèi)容厌秒。 |
嵌入內(nèi)容
| Element |
Description |
<img> |
代表一張圖片 。 |
<iframe> |
代表一個(gè)內(nèi)聯(lián)的框架 擅憔。 |
<embed> |
代表一個(gè)嵌入 的外部資源鸵闪，如應(yīng)用程序或交互內(nèi)容。 |
<object> |
代表一個(gè)外部資源 暑诸，如圖片岛马、HTML 子文檔、插件等屠列。 |
<param> |
代表 <object> 元素所指定的插件的參數(shù) 啦逆。 |
<video> |
代表一段視頻及其視頻文件和字幕，并提供了播放視頻的用戶界面笛洛。 |
<audio> |
代表一段聲音 夏志，或音頻流 。 |
<source> |
為 <video>或 <audio> 這類媒體元素指定媒體源 苛让。 |
<track> |
為 <video>或<audio>這類媒體元素指定文本軌道（字幕） 沟蔑。 |
<canvas> |
代表位圖區(qū)域，可以通過腳本在它上面實(shí)時(shí)呈現(xiàn)圖形狱杰，如圖表瘦材、游戲繪圖等。 |
<map> |
與<area> 元素共同定義圖像映射 區(qū)域仿畸。 |
<area> |
與 <map> 元素共同定義圖像映射 區(qū)域食棕。 |
<svg> |
定義一個(gè)嵌入式矢量圖 。 |
[<math>](https://developer.mozilla.org/zh-CN/docs/Web/MathML/Element/math "<math>") |
定義一段數(shù)學(xué)公式 错沽。 |
表格
| Element |
Description |
<table> |
定義多維數(shù)據(jù) 簿晓。 |
<caption> |
代表表格的標(biāo)題 。 |
<colgroup> |
代表表格中一組單列或多列 千埃。 |
<col> |
代表表格中的列 憔儿。 |
<tbody> |
代表表格中一塊具體數(shù)據(jù) （表格主體）。 |
<thead> |
代表表格中一塊列標(biāo)簽 （表頭）放可。 |
<tfoot> |
代表表格中一塊列摘要 （表尾）谒臼。 |
<tr> |
代表表格中的行 。 |
<td> |
代表表格中的單元格 耀里。 |
<th> |
代表表格中的頭部單元格 蜈缤。 |
表單
| Element |
Description |
<form> |
代表一個(gè)表單 ，由控件組成备韧。 |
<fieldset> |
代表控件組 劫樟。 |
<legend> |
代表 <fieldset> 控件組的標(biāo)題 。 |
<label> |
代表表單控件的標(biāo)題 。 |
<input> |
代表允許用戶編輯數(shù)據(jù)的數(shù)據(jù)區(qū) （文本框叠艳、單選框奶陈、復(fù)選框等）。 |
<button> |
代表按鈕 附较。 |
<select> |
代表下拉框 吃粒。 |
<datalist> |
代表提供給其他控件的一組預(yù)定義選項(xiàng) 。 |
<optgroup> |
代表一個(gè)選項(xiàng)分組 拒课。 |
<option> |
代表一個(gè) <select>元素或 <datalist> 元素中的一個(gè)選項(xiàng) |
<textarea> |
代表多行文本框 徐勃。 |
<keygen> |
代表一個(gè)密鑰對(duì)生成器 控件。 |
<output> |
代表計(jì)算值 。 |
<progress> |
代表進(jìn)度條 。 |
<meter> |
代表滑動(dòng)條 掀亩。 |
交互元素
| Element |
Description |
<details> |
代表一個(gè)用戶可以(點(diǎn)擊)獲取額外信息或控件的小部件 。 |
<summary> |
代表 <details>元素的綜述 或標(biāo)題 臀脏。 |
<menuitem> |
代表一個(gè)用戶可以點(diǎn)擊的菜單項(xiàng)。 |
<menu> |
代表菜單冀自。 |
常用標(biāo)簽詳解
iframe標(biāo)簽
嵌套頁(yè)面
<iframe name="xxx" src="./index.html" frameborder="0"></iframe>
<a href="" target="xxx"></a>
- frameborder="0"消除自帶邊框;
- name屬性結(jié)合a標(biāo)簽才能使用;
- src接網(wǎng)址或絕對(duì)地址;
a標(biāo)簽
- 屬性見 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a
- a標(biāo)簽里target有四個(gè)自帶的值揉稚，分別為空標(biāo)簽，自己熬粗，頂級(jí)搀玖，父級(jí)；
<a target="_blank _self _top _parent "
- 一是通過html響應(yīng)里的contenttype,二是通過a標(biāo)簽里的download屬性指定強(qiáng)制下載;
<a href="" download></a>
- href可以接：
- //qq.com
-
XXX ?name=qqqq
- /xxx.html
- JS偽協(xié)議
javascipt:alert(1);
javascipt:; 表示什么也不做
form標(biāo)簽
<form action="index2.html" method="POST">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="提交">
</form>
- form一般用來發(fā)post請(qǐng)求;
- 必須要有提交按鈕驻呐，如果form表單里沒有提交按鈕灌诅，就無(wú)法提交form；
- name里內(nèi)容成為請(qǐng)求第四部分的key;
- 屬性見 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form.
input標(biāo)簽
<form action="index2.html" method="POST">
<input type="text" name="username">
<input type="password" name="password">
<input type="checkbox" id="xxx"><label for="xxx">愛我</label>
<select name="分組" multiple> multiple指可以多選
<option value="">-</option> 空值默認(rèn)什么都不選
<option value="1">第一組</option>
<option value="2">第二組</option>
<option value="3" disabled>第三組</option> 不能選中
<option value="4" selected>第四組</option> 默認(rèn)選中
</select>
<textarea style="resize: none暴氏；width:100px; height:50px;"name="愛好"></textarea>
<button>button</button>
</form>
- button標(biāo)簽如果沒有寫type,會(huì)自動(dòng)升級(jí)為提交按鈕延塑；
- input沒有子元素，button可以有span等子元素;
- 寫了type就按type寫的來答渔；submit是唯一能確定表單能否點(diǎn)擊提交的按鈕；button就是個(gè)普通的能點(diǎn)擊的按鈕侥涵；
<input type="submit" value="提交">
- label為了跟input關(guān)聯(lián)沼撕；老司機(jī)用label包住，更方便芜飘；
<label> <input type="checkbox">愛我</label>
- checkbox多選框
<label><input type="checkbox" name="fruit" value="apple">蘋果</label>
<label><input type="checkbox" name="fruit" value="orange">橘子</label>
- radio單選框
<label><input type="radio" name="loveme" value="yes">YES</label>
<label><input type="radio" name="loveme" value="no">NO</label>
取同樣的名字务豺，就只能選一個(gè);
- input 的屬性見：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input
- button 的屬性見：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button
table標(biāo)簽
<head>
<style>
table{
border-collapse:collapse; 使邊框合為一個(gè)；
}
</style>
</head>
<body>
<table border="1">
<colgroup>
<col width=100>
<col bgcolor=blue width=300>
<col width=100>
<col width=300>
</colgroup>
<thead>
<tr>
<th></th><th>1</th><th>2</th><th>3</th>
</tr>
</thead>
<tbody>
<tr>
<th>平均分</th><td>1</td><td>2</td><td>3</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>總分</th><td>1</td><td>2</td><td>3</td>
</tr>
</tfoot>
</table>
</body>
- 表頭用th,td里全部是數(shù)據(jù);
- 瀏覽器會(huì)自動(dòng)糾正colgroup,thead,tbody,tfoot的順序嗦明；
- 瀏覽器會(huì)自動(dòng)補(bǔ)齊tbody笼沥；thead等不寫也會(huì)并入tbody,所有按照寫的順序展示。
- 屬性見：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table
什么是空標(biāo)簽
一個(gè)空元素（empty element）可能是 HTML，SVG奔浅，或者 MathML 里的一個(gè)不可能存在子節(jié)點(diǎn)（例如內(nèi)嵌的元素或者元素內(nèi)的文本）的element馆纳。
HTML，SVG 和 MathML 的規(guī)范都詳細(xì)定義了每個(gè)元素能包含的具體內(nèi)容（define very precisely what each element can contain）汹桦。許多組合是沒有任何語(yǔ)義含義的鲁驶，比如一個(gè)<audio>元素嵌套在一個(gè)<hr>元素里。
在 HTML 中舞骆，通常在一個(gè)空元素上使用一個(gè)閉標(biāo)簽是無(wú)效的钥弯。例如，<input type="text"></input>的閉標(biāo)簽是無(wú)效的 HTML督禽。
在 HTML 中有以下這些空元素：
什么是可替換標(biāo)簽
CSS 里脆霎，可替換元素（replaced element）的展現(xiàn)不是由CSS來控制的。這些元素是一類 外觀渲染獨(dú)立于CSS的 外部對(duì)象狈惫。 典型的可替換元素有<img>绪穆、 <object>、 <video> 和 表單元素虱岂，如<textarea>玖院、 <input> 。 某些元素只在一些特殊情況下表現(xiàn)為可替換元素第岖，例如 <audio> 和<canvas> 难菌。 通過 CSS content 屬性來插入的對(duì)象 被稱作 匿名可替換元素（anonymous replaced elements）。
CSS在某些情況下會(huì)對(duì)可替換元素做特殊處理蔑滓，比如計(jì)算外邊距和一些auto值郊酒。
需要注意的是，一部分（并非全部）可替換元素键袱，本身具有尺寸和基線（baseline）燎窘，會(huì)被像vertical-align之類的一些 CSS 屬性用到。
