HTML標簽學習2019-04-19

本篇內(nèi)容：

  • W3C
  • MDN
  • HTML 標簽列表
  • 常用標簽詳解
  • 什么是空標簽
  • 什么是可替換標簽

W3C 簡介

萬維網(wǎng)聯(lián)盟（World Wide Web Consortium，W3C），又稱W3C理事會，是萬維網(wǎng)的主要國際標準組織[2]。為半自治非政府組織（quasi-autonomous non-governmental organisation），由蒂姆·伯納斯-李于1994年10月離開歐洲核子研究中心（CERN）后成立。

W3C推薦標準

  • CSS：層疊樣式表
  • DOM：文檔對象模型
  • HTML：超文本標記語言
  • RDF：資源描述框架
  • SMIL：同步多媒體集成語言
  • SVG：可縮放矢量圖形
  • WAI
  • Widgets
  • XHTML：可擴展超文本標記語言
  • XML：可擴展標記語言
  • PICS：網(wǎng)絡內(nèi)容篩選平臺

MDN 簡介

MDN Web Docs（舊稱Mozilla Developer Network、Mozilla Developer Center，簡稱MDN）是一個匯集眾多Mozilla基金會產(chǎn)品和網(wǎng)上技術(shù)開發(fā)文檔的免費網(wǎng)站。

歷史

該項目始于2005年，最初由Mozilla公司員工Deb Richardson領(lǐng)導。自2006年以來，文檔工作由Eric Shepherd領(lǐng)導[2]。
網(wǎng)站最初的內(nèi)容是由DevEdge提供，但在AOL收購Netscape后，DevEdge網(wǎng)站也宣布關(guān)閉。為此Mozilla基金會向AOL獲取了DevEdge發(fā)布的內(nèi)容[3][2]，同時將DevEdge內(nèi)容搬移到mozilla.org[4][5]。


MDN本身有一個論壇，并在Mozilla IRC網(wǎng)絡上有一個IRC頻道#mdn。MDN由Mozilla公司提供服務器和員工的資助。
2016年10月3日發(fā)表的Brave網(wǎng)頁瀏覽器將MDN作為其搜索引擎選項之一。

HTML 標簽列表

根元素

Element Description
<html> 代表 HTML 或 XHTML文檔的根。其他所有元素必須是這個元素的子節(jié)點。

文檔元數(shù)據(jù)

Element Description
<head> 代表關(guān)于文檔元數(shù)據(jù)的一個集合，包括腳本或樣式表的鏈接或內(nèi)容。
<title> 定義文檔的標題，將顯示在瀏覽器的標題欄或標簽頁上。該元素只能包含文本，包含的標簽不會被解釋。
<base> 定義頁面上相對 URL 的基準 URL。
<link> 用于鏈接外部的 CSS 到該文檔。
<meta> 定義其他 HTML 元素無法描述的元數(shù)據(jù)。
<style> 用于內(nèi)聯(lián) CSS。

腳本

Element Description
<script> 定義一個內(nèi)聯(lián)腳本或鏈接到外部腳本。腳本語言是 JavaScript。
<noscript> 定義當瀏覽器不支持腳本時顯示的替代文字。
<template> 通過 JavaScript 在運行時實例化內(nèi)容的容器。

章節(jié)

Element Description
<body> 代表 HTML 文檔的內(nèi)容。在文檔中只能有一個 <body> 元素。
<section> 定義文檔中的一個章節(jié)。
<nav> 定義只包含導航鏈接的章節(jié)。
<article> 定義可以獨立于內(nèi)容其余部分的完整獨立內(nèi)容塊。
<aside> 定義和頁面內(nèi)容關(guān)聯(lián)度較低的內(nèi)容——如果被刪除，剩下的內(nèi)容仍然很合理。
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> 標題元素實現(xiàn)了六層文檔標題，<h1> 是最大的標題，<h6> 是最小的標題。標題元素簡要地描述章節(jié)的主題。
<header> 定義頁面或章節(jié)的頭部。它經(jīng)常包含logo、頁面標題和導航性的目錄。
<footer> 定義頁面或章節(jié)的尾部。它經(jīng)常包含版權(quán)信息、法律信息鏈接和反饋建議用的地址。
<address> 定義包含聯(lián)系信息的一個章節(jié)。
<main> 定義文檔中主要或重要的內(nèi)容。

組織內(nèi)容

Element Description
<p> 定義一個段落。
<hr> 代表章節(jié)、文章或其他長內(nèi)容中段落之間的分隔符。
<pre> 代表其內(nèi)容已經(jīng)預先排版過，格式應當保留 。
<blockquote> 代表引用自其他來源的內(nèi)容。
<ol> 定義一個有序列表。
<ul> 定義一個無序列表。
<li> 定義列表中的一個列表項。
<dl> 定義一個定義列表（一系列術(shù)語和其定義）。
<dt> 代表一個由下一個 <dd> 定義的術(shù)語。
<dd> 代表出現(xiàn)在它之前術(shù)語的定義。
<figure> 代表一個和文檔有關(guān)的圖例。
<figcaption> 代表一個圖例的說明。
<div> 代表一個通用的容器，沒有特殊含義。

文字形式

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

編輯

Element Description
<ins> 定義增加到文檔的內(nèi)容。
<del> 定義從文檔移除 的內(nèi)容。

嵌入內(nèi)容

Element Description
<img> 代表一張圖片 。
<iframe> 代表一個內(nèi)聯(lián)的框架 。
<embed> 代表一個嵌入 的外部資源，如應用程序或交互內(nèi)容。
<object> 代表一個外部資源 ，如圖片、HTML 子文檔、插件等。
<param> 代表 <object> 元素所指定的插件的參數(shù) 。
<video> 代表一段視頻及其視頻文件和字幕，并提供了播放視頻的用戶界面。
<audio> 代表一段聲音 ，或音頻流 。
<source> 為 <video>或 <audio> 這類媒體元素指定媒體源 。
<track> 為 <video>或<audio>這類媒體元素指定文本軌道（字幕） 。
<canvas> 代表位圖區(qū)域，可以通過腳本在它上面實時呈現(xiàn)圖形，如圖表、游戲繪圖等。
<map> 與<area> 元素共同定義圖像映射 區(qū)域。
<area> 與 <map> 元素共同定義圖像映射 區(qū)域。
<svg> 定義一個嵌入式矢量圖 。
[<math>](https://developer.mozilla.org/zh-CN/docs/Web/MathML/Element/math "<math>") 定義一段數(shù)學公式 。

表格

Element Description
<table> 定義多維數(shù)據(jù) 。
<caption> 代表表格的標題 。
<colgroup> 代表表格中一組單列或多列 。
<col> 代表表格中的列 。
<tbody> 代表表格中一塊具體數(shù)據(jù) （表格主體）。
<thead> 代表表格中一塊列標簽 （表頭）。
<tfoot> 代表表格中一塊列摘要 （表尾）。
<tr> 代表表格中的行 。
<td> 代表表格中的單元格 。
<th> 代表表格中的頭部單元格 。

表單

Element Description
<form> 代表一個表單 ，由控件組成。
<fieldset> 代表控件組 。
<legend> 代表 <fieldset> 控件組的標題 。
<label> 代表表單控件的標題 。
<input> 代表允許用戶編輯數(shù)據(jù)的數(shù)據(jù)區(qū) （文本框、單選框、復選框等）。
<button> 代表按鈕 。
<select> 代表下拉框 。
<datalist> 代表提供給其他控件的一組預定義選項 。
<optgroup> 代表一個選項分組 。
<option> 代表一個 <select>元素或 <datalist> 元素中的一個選項
<textarea> 代表多行文本框 。
<keygen> 代表一個密鑰對生成器 控件。
<output> 代表計算值 。
<progress> 代表進度條 。
<meter> 代表滑動條 。

交互元素

Element Description
<details> 代表一個用戶可以(點擊)獲取額外信息或控件的小部件 。
<summary> 代表 <details>元素的綜述 或標題 。
<menuitem> 代表一個用戶可以點擊的菜單項。
<menu> 代表菜單。

常用標簽詳解

iframe標簽

嵌套頁面

<iframe name="xxx" src="./index.html" frameborder="0"></iframe>
<a href="" target="xxx"></a>
  1. frameborder="0"消除自帶邊框;
  2. name屬性結(jié)合a標簽才能使用;
  3. src接網(wǎng)址或絕對地址;

a標簽

  1. 屬性見 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a
  2. a標簽里target有四個自帶的值，分別為空標簽，自己，頂級，父級；
<a target="_blank _self _top _parent "
  1. 一是通過html響應里的contenttype,二是通過a標簽里的download屬性指定強制下載;
<a href="" download></a>
  1. href可以接：
  • //qq.com

  • XXX ?name=qqqq

  • /xxx.html
  1. JS偽協(xié)議
javascipt:alert(1);   
javascipt:;      表示什么也不做

form標簽

<form action="index2.html" method="POST">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit" value="提交">
</form>
  1. form一般用來發(fā)post請求;
  2. 必須要有提交按鈕，如果form表單里沒有提交按鈕，就無法提交form；
  3. name里內(nèi)容成為請求第四部分的key;
  4. 屬性見 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form.

input標簽

<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>   空值默認什么都不選
        <option value="1">第一組</option>
        <option value="2">第二組</option>
        <option value="3" disabled>第三組</option>    不能選中
        <option value="4" selected>第四組</option>    默認選中
    </select>
    <textarea style="resize: none；width:100px; height:50px;"name="愛好"></textarea>
    <button>button</button>
</form>
  1. button標簽如果沒有寫type,會自動升級為提交按鈕；
  2. input沒有子元素，button可以有span等子元素;
  3. 寫了type就按type寫的來；submit是唯一能確定表單能否點擊提交的按鈕；button就是個普通的能點擊的按鈕；
<input type="submit" value="提交">
  1. label為了跟input關(guān)聯(lián)；老司機用label包住，更方便；
<label> <input type="checkbox">愛我</label>
  1. checkbox多選框
<label><input type="checkbox" name="fruit" value="apple">蘋果</label>
<label><input type="checkbox" name="fruit" value="orange">橘子</label>
  1. radio單選框
<label><input type="radio" name="loveme" value="yes">YES</label>
<label><input type="radio" name="loveme" value="no">NO</label>

取同樣的名字，就只能選一個;

  1. input 的屬性見：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input

  2. button 的屬性見：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button

table標簽

<head>
    <style>
    table{
        border-collapse:collapse;       使邊框合為一個；
    }
    </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>
image
  1. 表頭用th,td里全部是數(shù)據(jù);
  2. 瀏覽器會自動糾正colgroup,thead,tbody,tfoot的順序；
  3. 瀏覽器會自動補齊tbody；thead等不寫也會并入tbody,所有按照寫的順序展示。
  4. 屬性見：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table

什么是空標簽

一個空元素（empty element）可能是 HTML，SVG，或者 MathML 里的一個不可能存在子節(jié)點（例如內(nèi)嵌的元素或者元素內(nèi)的文本）的element。


HTML，SVG 和 MathML 的規(guī)范都詳細定義了每個元素能包含的具體內(nèi)容（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](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/colgroup#attr-span)is present

  • <command>

  • <embed>

  • <hr>

  • <img>

  • <input>

  • <keygen>

  • <link>

  • <meta>

  • <param>

  • <source>

  • <track>

  • <wbr>

什么是可替換標簽

CSS 里，可替換元素（replaced element）的展現(xiàn)不是由CSS來控制的。這些元素是一類 外觀渲染獨立于CSS的 外部對象。 典型的可替換元素有<img>、 <object>、 <video> 和 表單元素，如<textarea>、 <input> 。 某些元素只在一些特殊情況下表現(xiàn)為可替換元素，例如 <audio> 和<canvas> 。 通過 CSS content 屬性來插入的對象 被稱作 匿名可替換元素（anonymous replaced elements）。
CSS在某些情況下會對可替換元素做特殊處理，比如計算外邊距和一些auto值。
需要注意的是，一部分（并非全部）可替換元素，本身具有尺寸和基線（baseline），會被像vertical-align之類的一些 CSS 屬性用到。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標準。 注意：講述HT...
    kismetajun閱讀 28,866評論 1贊 45
  • 學習的內(nèi)容(查維基百科/MDN) W3C 簡介 MDN 簡介 HTML 所有標簽列表 什么是空標簽 什么是可替換標...
    xyyojl閱讀 1,908評論 0贊 3
  • 一、常用標簽 1. iframe 標簽 嵌套頁面。需要新開一個窗口，速度比較慢。 iframe 直接使用 直接打開...
    養(yǎng)樂多__閱讀 698評論 0贊 5
  • 一、 W3C 簡介（查維基百科） W3C這么大名鼎鼎的存在想必你肯定是聽說過的吧，那么它到底是什么呢？ 萬維網(wǎng)聯(lián)盟...
    stephenoo閱讀 800評論 0贊 0
  • 又到一年總結(jié)時！可以看到各路人馬紛紛上線各種課程，如何回顧總結(jié)如何計劃新的一年，滿滿都是套路。 我今天倒是聽到/看...
    休止符UPUP閱讀 361評論 0贊 1

友情鏈接更多精彩內(nèi)容