2.HTML標籤

時間 2019-12-17

標籤 2.html html 標籤欄目 HTML 简体版

原文原文鏈接

<a> 連接標籤

　　　　　1) <a href=「#」>這是個連接</a> 表示空連接php

　　　　　2) 未訪問過的連接顯示藍色字體並帶下劃線;訪問過的連接顯示紫色字體帶下劃線;點擊時連接顯示紅色字體帶下劃線.css

　　　　　3) 屬性 target 屬性定義連接在何處顯示 _blank 在新窗口打開html

值	描述
_blank	在新窗口中打開被連接文檔。
_self	默認。在相同的框架中打開被連接文檔。
_parent	在父框架集中打開被連接文檔。
_top	在整個窗口中打開被連接文檔。
framename	在指定的框架中打開被連接文檔。

　　　　　4) id 屬性可用於在一個 HTML 文檔中建立書籤標記。html5

<a id="tips">Useful Tips Section</a>

<a href="#tips">Visit the Useful Tips Section</a>

　　　　5) 請始終將正斜槓添加到子文件夾。假如這樣書寫連接：href="//www.w3cschool.cn/html"，就會向服務器產生兩次 HTTP 請求。java

　　　　這是由於服務器會添加正斜槓到這個地址，而後建立一個新的請求，就像這樣：href="//www.w3cschool.cn/html/"。 react

：HTML5 中的新屬性。web

屬性	值	描述
charset	char_encoding	HTML5 不支持。規定目標 URL 的字符編碼。
coords	coordinates	HTML5 不支持。規定連接的座標。
downloadNew	filename	指定下載連接
href	URL	規定連接的目標 URL。
hreflang	language_code	規定目標 URL 的基準語言。僅在 href 屬性存在時使用。
mediaNew	media_query	規定目標 URL 的媒介類型。默認值：all。僅在 href 屬性存在時使用。
name	section_name	HTML5 不支持。規定錨的名稱。
rel	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag	規定當前文檔與目標 URL 之間的關係。僅在 href 屬性存在時使用。
rev	text	HTML5 不支持。規定目標 URL 與當前文檔之間的關係。
shape	default rect circle poly	HTML5 不支持。規定連接的形狀。
target	_blank _parent _self _top framename	規定在何處打開目標 URL。僅在 href 屬性存在時使用。
typeNew	MIME_type	規定目標 URL 的 MIME 類型。僅在 href 屬性存在時使用。注：MIME = Multipurpose Internet Mail Extensions。

<audio>: HTML5 提供的用來播放音頻文件的。(<video> 是用來播放視頻的）

IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <audio> 標籤。

註釋： IE 8 或更早版本的 IE 瀏覽器不支持 <audio> 標籤。正則表達式

<audio controls>
  <source src="/statics/demosource/horse.ogg" >
  <source src="/statics/demosource/horse.mp3" >
您的瀏覽器不支持 audio 元素。
</audio>

簽訂義及使用說明

<audio> 標籤訂義聲音，好比音樂或其餘音頻流。小程序

目前，<audio> 元素支持的3種文件格式：MP三、Wav、Ogg。瀏覽器

瀏覽器	MP3	Wav	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

提示：這 3 種音頻的 MIME-type 分別是：

音頻格式	MINE-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

能夠在 <audio> 和 </audio> 之間放置文本內容，這些文本信息將會被顯示在那些不支持 <audio> 標籤的瀏覽器中。

屬性

New ：HTML5 中的新屬性。

屬性	值	描述
autoplayNew	autoplay	若是出現該屬性，則音頻在就緒後立刻播放。
controlsNew	controls	若是出現該屬性，則向用戶顯示音頻控件（好比播放/暫停按鈕）。
loopNew	loop	若是出現該屬性，則每當音頻結束時從新開始播放。
mutedNew	muted	若是出現該屬性，則音頻輸出爲靜音。
preloadNew	auto metadata none	規定當網頁加載時，音頻是否默認被加載以及如何被加載。
srcNew	URL	規定音頻文件的 URL。

<!--Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 瀏覽器支持 controls 屬性。
注意： Internet Explorer 8 及更早IE版本不支持 <audio> 標籤。-->
<audio controls autoplay>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
 您的瀏覽器不支持 audio 元素。
</audio>

<!--Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 瀏覽器支持 controls 屬性。
注意： Internet Explorer 8 及更早IE版本不支持 <audio> 標籤。-->
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的瀏覽器不支持 audio 元素。
</audio>

<!--Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 瀏覽器支持 loop 屬性。
注意： Internet Explorer 8 及更早IE瀏覽器不支持 <audio> 標籤。-->
<audio controls loop>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
 您的瀏覽器不支持 audio 元素。
</audio>
 
<!--Internet Explorer 十、Firefox、Opera 以及 Chrome 支持 muted 屬性。
注意： Internet Explorer 9 以及更早的版本不支持 muted 屬性。-->
<audio controls muted>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的瀏覽器不支持 audio 元素。
</audio>

<!--目前全部主流瀏覽器都支持 preload 屬性，除了 Internet Explorer-->
<audio controls preload="none">
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
 您的瀏覽器不支持 audio 元素。
</audio>

問題:

<audio> 標籤在 HTML 4 中是無效的。您的頁面沒法經過 HTML 4 驗證。
您必須把音頻文件轉換爲不一樣的格式。
<audio> 元素在老式瀏覽器中不起做用。

最好的 HTML 解決方法：下面的例子使用了兩個不一樣的音頻格式。HTML5 <audio> 元素會嘗試以 mp3 或 ogg 來播放音頻。若是失敗，代碼將回退嘗試 <embed> 元素。

<audio controls height="100" width="100">
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">
  <embed height="50" width="100" src="horse.mp3">
</audio>

雅虎媒體播放器 - 一個簡單的添加音頻到你網站上的方式

使用雅虎播放器是免費的。如需使用它，您須要把這段 JavaScript 插入網頁底部：

雅虎播放器能夠播放MP3以及其餘各類格式。你只需添加一行代碼到你的頁面或博客中就能夠輕鬆地將您的HTML頁面製做成專業的播放列表：

<a href="horse.mp3">Play Sound</a>

<script src="http://mediaplayer.yahoo.com/latest"></script>

雅虎媒體播放器爲您的用戶提供的是一個小型的播放按鈕，而不是完整的播放器。不過，當您點擊該按鈕，會彈出完整的播放器。

請注意，這個播放器始終停靠在窗框底部。只需點擊它，就可將其滑出。

使用超連接

若是網頁包含指向媒體文件的超連接，大多數瀏覽器會使用"輔助應用程序"來播放文件。

如下代碼片斷顯示指向 mp3 文件的連接。若是用戶點擊該連接，瀏覽器會啓動"輔助應用程序"來播放該文件：

<a href="horse.mp3">Play the sound</a>

<b>　　加粗標籤
```
一般標籤 <strong> 替換加粗標籤 <b> 來使用， <em> 替換 <i>標籤使用。 然而，這些標籤的含義是不一樣的： <b> 與<i> 定義粗體或斜體文本。 <strong> 或者 <em> 意味着你要呈現的文本是重要的，因此要突出顯示。 現今全部主要瀏覽器都能渲染各類效果的字體。不過，將來瀏覽器可能會支持更好的渲染效果
如下爲經常使用的文本格式化標籤：
```
<b>：加粗

<i>：斜體

<strong>:變粗定義加劇語氣

<small>:定義小號字體

<em>:定義着重文字斜體

<sub>:上標

<sup>:下標

<ins>:表示範圍內的文本已經被添加到文檔中(一般是文檔更新和修正的部分)

<del>:定義刪除字計算機輸出標籤:(不反對使用如下標籤，若是隻是爲了達到視覺效果建議使用css)

<code>:定義計算機代碼

<kbd>:定義鍵盤碼，它表示文本是從鍵盤上鍵入的(已經棄用，不推薦使用，可使用css實現豐富的效果)

<samp>:定義計算機代碼樣本

<var>:變量

<pre>:預約義格式化文本，會保留空格和換行

引文引用以及標籤訂義

<abbr>:縮寫通常用title屬性展現其全稱

<address>: 地址

<bdo> 定義文字方向，有dir屬性，有rtl 和ltr兩個值

<blockquote> 引用長文本，內容會自動有縮進

<q> 定義短的引用語句，瀏覽器會自動加單引號

<cite> 定義引用引證，表示對某個參考文獻的引用，斜體

<dfn> 定義一個項目，特殊術語或短句
<button>：標籤用來設置 HTML 中的按鈕。

提示：與 <input type="button"> 相比，<button> 標籤提供了更爲強大的功能和更豐富的內容。

註釋：若是在 HTML 表單中使用 <button> 元素，不一樣的瀏覽器可能會提交不一樣的按鈕值。IE 瀏覽器將提交 <button> 標籤之間的文本，而其餘瀏覽器將提交 value 屬性的內容。請使用 <input> 在 HTML 表單中建立按鈕。
```
<button type="button" onclick="alert('Hello world!')">Click Me!</button>
```
屬性1）autofocus，disabled，form，formaction formenctype formmethod formnovalidate formtarget （type="submit" 配合使用), name

2) type:規定按鈕的類型:button ,submit,reset;

3)value:規定按鈕的初始值。可由腳本進行修改

<base> 在<head>中間<title> 後，定義了頁面上全部連接的默認url

在 HTML 中，<base> 標籤沒有結束標籤；在 XHTML 中，<base> 標籤必須被正確地關閉。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<base href="http://www.w3cschool.cn/statics/images/w3c/" target="_blank">
</head>

<body>
<img src="logo.png"> - 注意這裏咱們設置了圖片的相對地址。能正常顯示是由於咱們在 head 部分設置了 base 標籤，該標籤指定了頁面上全部連接的默認 URL，因此該圖片的訪問地址爲 "http://www.w3cschool.cn/statics/images/w3c/logo.png"
<br><br>
<a href="http://www.w3cschool.cn">W3Cschool教程</a> - 注意這個連接會在新窗口打開，即使它沒有 target="_blank" 屬性。由於在 base 標籤裏咱們已經設置了 target 屬性的值爲 "_blank"。

</body>
</html>

<br>或<br/>　　換行標籤

<c:import> 標籤

<c:import>標籤提供了全部<jsp:include>行爲標籤所具備的功能，同時也容許包含絕對URL。

舉例來講，使用<c:import>標籤能夠包含一個FTP服務器中不一樣的網頁內容。

<c:import
   url="<string>"
   var="<string>"
   scope="<string>"
   varRender="<string>"
   context="<string>"
   charEncoding="<string>"/>

屬性

<c:import>標籤有以下屬性：

屬性	描述	是否必要	默認值
url	須要檢索和引入的頁面的URL	是	無
context	/ 緊接着一個本地網絡應用程序的名稱	否	當前應用程序
charEncoding	所引入的數據的字符編碼集	否	ISO-8859-1
var	用於存儲所引入的文本的變量	否	Print to page
scope	var屬性的做用域	否	Page
varReader	可選的用於提供java.io.Reader對象的變量	否	無

實例演示

%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>c:import 標籤實例</title>
</head>
<body>
<c:import var="data" url="http://www.w3cschool.cn"/>
<c:out value="${data}"/>
</body>
</html>

<c:out> 標籤

<c:out>標籤用來顯示一個表達式的結果，與<%= %>做用類似，它們的區別就是<c:out>標籤能夠直接經過"."操做符來訪問屬性。舉例來講，若是想要訪問customer.address.street，只須要這樣寫：<c:out value="customer.address.street">。

<c:out>標籤會自動忽略XML標記字符，因此它們不會被當作標籤來處理。

<c:out value="<string>" default="<string>" escapeXml="<true|false>"/>

屬性

<c:out>標籤有以下屬性：

屬性	描述	是否必要	默認值
value	要輸出的內容	是	無
default	輸出的默認值	否	主體中的內容
escapeXml	是否忽略XML特殊字符	否	true

程序示例

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html>
<head>
<title>c:out 標籤實例</title>
</head>
<body>
<html>
    <head>
        <title>&lt;c:out&gt;實例</title>
    </head>
    <body>
        <h1>&lt;c:out&gt; 實例</h1>
            <c:out value="&lt要顯示的數據對象（未使用轉義字符）&gt" escapeXml="true" default="默認值"></c:out><br/>
              <c:out value="&lt要顯示的數據對象（使用轉義字符）&gt" escapeXml="false" default="默認值"></c:out><br/>
        <c:out value="${null}" escapeXml="false">使用的表達式結果爲null，則輸出該默認值</c:out><br/>
    </body>
</body>
</html>

<datalist>(New) 　<datalist> 標籤須要與 <input> 標籤配合使用，用來表示可選的列表。

IE 十、Firefox、Opera 和 Chrome 支持 <datalist> 標籤。

註釋：IE 9 和更早版本的 IE 瀏覽器以及 Safari 不支持 <datalist> 標籤。

form action="/statics/demosource/demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

<p><strong>注意:</strong> Internet Explorer 9（更早IE版本），Safari不支持 datalist 標籤。</p>

<div> HTML 能夠經過 <div> 和 <span> 將元素組合起來。

<div> 標籤能夠把文檔分割爲獨立的、不一樣的部分。
<span> 元素是內聯元素，可用做文本的容器

<embed>:<embed> 標籤用來定義在頁面中嵌入的內容，好比插件。（和<object>能夠實現一樣的效果）
```
<embed src="/statics/demosource/helloworld.swf" tppabs="http://W3Cschool.com/tags/helloworld.swf">
```
全部主流瀏覽器都支持 <embed> 標籤。

<embed> 標籤訂義了一個容器，用來嵌入外部應用或者互動程序（插件）。

屬性1)height，width，type：詳見<object>;

2)src:規定被嵌入內容的 URL

<fieldset>:對錶單中的相關元素進行分組：

全部主流瀏覽器都支持 <fieldset> 標籤。

提示：<legend> 標籤爲 <fieldset> 元素定義標題。

提示：<legend> 必須是 <fieldset> 元素的一個子元素

<form>
 <fieldset>
  <legend>我的信息:</legend>
  姓名: <input type="text"><br>
  郵箱: <input type="text"><br>
  生日: <input type="text">
 </fieldset>
</form>

屬性：1.disabled（New)：除了 Internet Explorer 和 Safari，其餘主流瀏覽器都支持 disabled 屬性。

2）name(New)：除了 Internet Explorer，其餘主流瀏覽器都支持 name 屬性。

<form action="demo-form.php" method="get">
<fieldset name="personalia">
  姓名: <input type="text" name="username"><br>
  郵箱: <input type="text" name="usermail"><br>
</fieldset>
<button type="button" onclick="form.personalia.style.backgroundColor='yellow'">改變控件的背景顏色</button>
<input type="submit">
</form

3）form（New）:規定 fieldset 所屬的一個或多個表單。目前，只有 Opera 支持 form 屬性。

<form>　表單標籤：表單是一個包含表單元素的區域。<form> 元素包含一個或多個以下的表單元素：

<form>	定義供用戶輸入的表單
<input>	定義輸入域
<textarea>	定義文本域 (一個多行的輸入控件)
<label>	定義了 <input> 元素的標籤，通常爲輸入標題
<fieldset>	定義了一組相關的表單元素，並使用外框包含起來
<legend>	定義了 <fieldset> 元素的標題
<select>	定義了下拉選項列表
<optgroup>	定義選項組
<option>	定義下拉列表中的選項
<button>	定義一個點擊按鈕
<datalist> New	指定一個預先定義的輸入控件選項列表
<keygen> New	定義了表單的密鑰對生成器字段
<output> New	定義一個計算結果

form的屬性簡介：

1) accept 屬性 HTML5 不支持。規定服務器接收到的文件的類型。（文件是經過文件上傳提交的）

<form action="form_action.html" accept="image/gif,image/jpeg">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  Your image: <input type="file" name="pic" id="pic"><br>
  <input type="submit" value="提交">
</form>

2) accept-charset 規定服務器可處理的表單數據字符集。

<form action="demo_form.html" accept-charset="ISO-8859-1">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
</form>

3)action 規定當提交表單時向何處發送表單數據

<form action="demo_form.html" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
</form>

4)autocomplete 規定是否啓用表單的自動完成功能。autocomplete="on" autocomplete="off" 自動完成容許瀏覽器預測對字段的輸入。
當用戶在字段開始鍵入時，瀏覽器基於以前鍵入過的值，應該顯示出在字段中填寫的選項。 autocomplete "on" 適用於表單，"off" 適用於特定的輸入字段，反之亦然。
5）enctype 規定在向服務器發送表單數據以前如何對其進行編碼。（適用於 method="post" 的狀況）enctype="multipart/form-data" enctype="application/x-www-form-urlencoded"

6)method 規定用於發送表單數據的 HTTP 方法。 get post method 方法規定如何發送表單數據（form-data）（表單數據會被髮送到在 action 屬性中規定的頁面中）。表單數據可被做爲 URL 變量的形式來發送（method="get"）或者做爲 HTTP post 事務的形式來發送（method="post"）
關於 GET 的註釋：(URL?name=value&name=value)。
a.將表單數據以名稱/值對的形式附加到 URL 中
b.URL 的長度是有限的（大約 3000 字符）
c.毫不要使用 GET 來發送敏感數據！（在 URL 中是可見的）
e.對於用戶但願加入書籤的表單提交頗有用
f.GET 更適用於非安全數據，好比在 Google 中查詢字符串
關於 POST 的註釋
a.將表單數據附加到 HTTP 請求的 body 內（數據不顯示在 URL 中）
b.沒有長度限制c.
經過 POST 提交的表單不能加入書籤
7）name 若是使用該屬性，規定表單的名稱。
8）novalidate 若是使用該屬性，則提交表單時不驗證。

<form action="demo_form.html" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>

9）target 規定在何處打開 action URL：
_blank:在新窗口/選項卡中打開
_self:在同一框架中打開。（默認）
_parent:在父框架中打開。
_top:在整個窗口中打開
framename:在指定的 iframe 中打開。

<h1>　　標題標籤 (h1到h6,超過6無效果)
<hr/> 水平線
<head> 能夠添加在頭部區域的元素標籤爲: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

<iframe> 標籤規定一個內聯框架，經過使用框架，你能夠在同一個瀏覽器窗口中顯示不止一個頁面。

一些舊的瀏覽器不支持,若是瀏覽器不支持 iframes 則不會顯示

<iframe src="/statics/demosource/demo_iframe.htm" width="200" height="200"></iframe>

<p>一些舊的瀏覽器不支持 iframe。</p>
<p>若是瀏覽器不支持 iframes 則不會顯示。</p>

1）Iframe - 設置高度與寬度:width和height

2）Iframe - 移除邊框：frameborder="0"

3）使用iframe來顯示目錄連接頁面

iframe能夠顯示一個目標連接的頁面

目標連接的屬性必須使用iframe的屬性，以下實例:

<iframe src="/statics/demosource/demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3cschool.cn" target="iframe_a">W3CSCHOOL.CN</a></p>

<p><b>注意：</b> 由於 a 標籤的 target 屬性是名爲 iframe_a 的 iframe 框架，因此在點擊連接時頁面會顯示在 iframe框架中。</p>

<input> 標籤用於建立交互式控件，這類控件是基於 web 表單的，它能夠接收用戶的數據、信息。
屬性簡介：(帶有紅色（New）標誌的Internet Explorer 9及更早IE版本可能不支持）

1）accept：規定經過文件上傳來提交的文件的類型。(只針對type="file")

<!--規定在文件上傳中服務器只接受圖像文件-->
<form action="demo-form.php"> 
 <input type="file" name="pic" accept="image/*"> 
 <input type="submit"> 
</form>

注意：accept 屬性僅適用於 <input type="file">。

提示：請不要將該屬性做爲您的驗證工具。應該在服務器上對文件上傳進行驗證。

audio/*    接受全部的聲音文件。
video/*    接受全部的視頻文件。
image/*    接受全部的圖像文件。
MIME_type  一個有效的 MIME 類型，不帶參數。請參閱 IANA MIME 類型，得到標準 MIME 類型的完整列表。

2)align : left right top middle bottom (HTML5已廢棄，不同意使用。規定圖像輸入的對齊方式。 (只針對type="image"))

3)alt : 定義輸入圖像輸入的替代文本。 (只針對type="image"）

4）autocomplete(New)： autocomplete 屬性規定 <input> 元素輸入字段是否應該啓用自動完成功能

全部主流瀏覽器都支持 autocomplete 屬性。

提示：在某些瀏覽器中，您可能須要手動啓用自動完成功能（在瀏覽器菜單的"參數設置"中進行設置）。

<!--啓用自動完成功能的 HTML 表單（其中一個輸入字段禁用了自動完成）-->
<form action="demo-form.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>

6)autofocus(New):屬性規定當頁面加載時 <input> 元素應該自動得到焦點

Internet Explorer 十、Firefox、Opera、Chrome 和 Safari 支持 autofocus 屬性。

注意：Internet Explorer 9 及以前的版本不支持 <input> 標籤的 autofocus 屬性。

<!-- 設置 "First name" 輸入字段在頁面加載時自動得到焦點：-->
<form action="demo-form.php">
 First name: <input type="text" name="fname" autofocus><br>
 Last name: <input type="text" name="lname"><br>
 <input type="submit">
</form>

7)checked: checked 屬性規定在頁面加載時應該被預先選定的 <input> 元素。 (只針對 type="checkbox" 或者 type="radio")

<formaction="demo-form.php" method="get">
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked>I have a car<br>
<input type="submit" value="提交">
</form>

8)disabled: disabled 屬性規定應該禁用的 <input> 元素

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname" disabled><br>
  <input type="submit" value="提交">
</form>

9)form(New): form 屬性規定 <input> 元素所屬的一個或多個表單

除了 Internet Explorer，幾乎全部的主流瀏覽器都支持 form 屬性。 IE不支持form屬性

<form action="/statics/demosource/demo-form.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>
<p> "Last name" 字段沒有在form表單以內，但它也是form表單的一部分。</p>

Last name: <input type="text" name="lname" form="form1">
<p><b>注意:</b> IE不支持form屬性</p>

10)formaction(New): 屬性規定當表單提交時處理輸入控件的文件的 URL。(只針對 type="submit" 和 type="image")

Internet Explorer 十、Firefox、Opera、Chrome 和 Safari 都支持 formaction 屬性。

注意：Internet Explorer 9 及以前的版本不支持 <input> 標籤的 formaction 屬性。

<!--帶有兩個提交按鈕的 HTML 表單（不一樣的 action 值）： -->
<form action="demo-form.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交"><br>
<input type="submit" formaction="demo_admin.php" value="以管理員提交">
</form>

11)formenctype(New):屬性規定當表單數據提交到服務器時如何編碼(只適合 type="submit" 和 type="image")

Internet Explorer 十、Firefox、Opera、Chrome 和 Safari 支持 formenctype 屬性。

注意：Internet Explorer 9 及以前的版本不支持 <input> 標籤的 formenctype 屬性。

<form action="/statics/demosource/demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formaction="/statics/demosource/demo-admin.php" value="以管理員提交">
</form>
<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持 input 標籤的 formaction 屬性。</p>

12)formmethod(New): 定義發送表單數據到 action URL 的 HTTP 方法。 (只適合 type="submit" 和 type="image")

Internet Explorer 十、Firefox、Opera、Chrome 和 Safari 支持 formmethod 屬性。

注意：Internet Explorer 9 及以前的版本不支持 <input> 標籤的 formmethod 屬性。

<!--帶有兩個提交按鈕的 HTML 表單（不一樣的 action 值）-->
<form action="demo-form.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
<input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交">
</form>

13)formnovalidate(New) :formnovalidate 屬性覆蓋 <form> 元素的 novalidate 屬性

Internet Explorer 十、Firefox、Opera 和 Chrome 支持 formnovalidate 屬性。

注意：Safari 或者 Internet Explorer 9 及以前的版本不支持 <input> 標籤的 formnovalidate 屬性。

<!--帶有兩個提交按鈕的表單（一個進行驗證，另外一個不進行驗證）-->
<form action="demo-form.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="提交"><br>
<input type="submit" formnovalidate="formnovalidate" value="不驗證提交">
</form>

14)formtarget(New) :規定表示提交表單後在哪裏顯示接收到響應的名稱或關鍵詞。(只適合 type="submit" 和 type="image")

Internet Explorer 十、Firefox、Opera、Chrome 和 Safari 支持 formtarget 屬性。

注意：Internet Explorer 9 及以前的版本不支持 <input> 標籤的 formtarget 屬性。

_blank _self _parent_ top framename

15)height 和 width :規定 <input>元素的高度和寬度。(只針對type="image")

16）list(New)：屬性引用 <datalist> 元素，其中包含 <input> 元素的預約義選項。

Internet Explorer 十、Firefox、Opera 和 Chrome 支持 list 屬性。

注意：Safari 或者 Internet Explorer 9 及以前的版本不支持 <input> 標籤的 list 屬性

<!--帶有 <datalist> 中的預約義值的 <input> 元素-->
<input list="browsers">

<datalist id="browsers">
 <option value="Internet Explorer">
 <option value="Firefox">
 <option value="Google Chrome">
 <option value="Opera">
 <option value="Safari">
</datalist>

注意: Internet Explorer 9（更早IE版本），Safari不支持 datalist 標籤。

17max(New) min(New) :屬性規定 <input>元素的最大，最小值

Internet Explorer 十、Opera、Chrome 和 Safari 支持 max 屬性。

注意：Firefox 或者 Internet Explorer 9 及以前的版本不支持 <input> 標籤的 max 屬性。

注意：因爲 Internet Explorer 10 不支持這些 input 類型，max 屬性將不適用於 IE 10 中的 date 和 time。

<form action="demo-form.php">

  輸入 1980-01-01 以前的日期:
  <input type="date" name="bday" max="1979-12-31">

  輸入 2000-01-01 以後的日期:
  <input type="date" name="bday" min="2000-01-02">

  數量（在1和5之間）:
  <input type="number" name="quantity" min="1" max="5">

  <input type="submit">

</form>

18）maxlength：屬性規定 <input> 元素中容許的最大字符數。

19）multiple(New)：屬性規定容許用戶輸入到 <input> 元素的多個值

Internet Explorer 十、Firefox、Opera、Chrome 和 Safari 支持 multiple 屬性。

注意：Internet Explorer 9 及以前的版本不支持 <input> 標籤的 multiple 屬性

<!--可接受多個值的文件上傳字段-->
<form action="demo-form.php">
 選擇圖片: <input type="file" name="img" multiple>
 <input type="submit">
</form>

20)name: name 屬性規定 <input> 元素的名稱

21pattern(New): pattern 屬性規定用於驗證 <input> 元素的值的正則表達式

Internet Explorer 十、Firefox、Opera 和 Chrome 支持 pattern 屬性。

注意：Safari 或者 Internet Explorer 9 及以前的版本不支持 <input> 標籤的 pattern 屬性

<!--只能包含三個字母的輸入字段（不容許數字或特殊字符)-->
<form action="demo-form.php">
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}"title="Three letter country code">
<input type="submit">
</form>

22)placeholder(New):placeholder 屬性規定可描述輸入 <input> 字段預期值的簡短的提示信息。

Internet Explorer 十、Firefox、Opera 和 Chrome 支持 pattern 屬性。

注意：Safari 或者 Internet Explorer 9 及以前的版本不支持 <input> 標籤的 pattern 屬性

<form action="/statics/demosource/demo-form.php">
  <input type="text" name="fname" placeholder="First name"><br>
  <input type="text" name="lname" placeholder="Last name"><br>
  <input type="submit" value="提交">
</form>

23)readonly:readonly 屬性規定輸入字段是隻讀的

<form action="demo-form.php">
  Country: <input type="text" name="country" value="Norway" readonly><br>
  <input type="submit" value="提交">
</form>

24)required(New): 屬性規定必需在提交表單以前填寫輸入字段

Internet Explorer 十、Firefox、Opera 和 Chrome 支持 required 屬性。

注意：Safari 或者 Internet Explorer 9 及以前的版本不支持 <input> 屬性的 required 屬性。

<form action="demo-form.php">
Username: <input type="text" name="usrname" required>
<input type="submit">
</form>

25)size :size 屬性規定以字符數計的 <input> 元素的可見寬度

26)src:src 屬性規定顯示爲提交按鈕的圖像的 URL。 (只針對type="image")

<form action="/statics/demosource/demo-form.php">
  First name: <input type="text" name="fname"><br>
  <input type="image" src="/statics/images/submit.gif" alt="Submit" width="48" height="48">
</form>

<p>點擊圖片，輸入內容將被髮送到服務器的「demo_form.php」頁面。</p>
<p><b>注意:</b>若是 type 屬性設置爲 image，當用戶單擊圖像時，瀏覽器將以像素爲單位，將鼠標相對於圖像邊界的偏移量發送到服務器，其中包括從圖像左邊界開始的水平偏移量，以及從圖像上邊界開始的垂直偏移量。</p>

27)setpstep(New) 屬性規定 <input> 元素的合法數字間隔:

Internet Explorer 十、Opera、Chrome 和 Safari 支持 step 屬性。

注意：Firefox 或者 Internet Explorer 9 及以前的版本不支持 <input> 標籤的 step 屬性

28)type:type 屬性規定要顯示的 <input> 元素的類型(默認類型是：text。) 如下 input 類型是 HTML5 中的新類型：color、date、datetime、datetime-local、month、week、time、email、number、range、search、tel 和 url。

屬性值(注意: 某些瀏覽器可能不支持帶New的 Type，詳見：https://www.w3cschool.cn/htmltags/att-input-type.html）

值	描述
button	定義可點擊的按鈕（一般與 JavaScript 一塊兒使用來啓動腳本）。
checkbox	定義複選框。
color New	定義拾色器。
date New	定義 date 控件（包括年、月、日，不包括時間）。
datetime New	定義 date 和 time 控件（包括年、月、日、時、分、秒、幾分之一秒，基於 UTC 時區）。
datetime-local New	定義 date 和 time 控件（包括年、月、日、時、分、秒、幾分之一秒，不帶時區）。
email New	定義用於 e-mail 地址的字段。
file	定義文件選擇字段和 "瀏覽..." 按鈕，供文件上傳。
hidden	定義隱藏輸入字段。
image	定義圖像做爲提交按鈕。
month New	定義 month 和 year 控件（不帶時區）。
number New	定義用於輸入數字的字段。
password	定義密碼字段（字段中的字符會被遮蔽）。
radio	定義單選按鈕。
range New	定義用於精確值不重要的輸入數字的控件（好比 slider 控件）。
reset	定義重置按鈕（重置全部的表單值爲默認值）。
search New	定義用於輸入搜索字符串的文本字段。
submit	定義提交按鈕。
tel New	定義用於輸入電話號碼的字段。
text	默認。定義一個單行的文本字段（默認寬度爲 20 個字符）。
time New	定義用於輸入時間的控件（不帶時區）。
url New	定義用於輸入 URL 的字段。
week New	定義 week 和 year 控件（不帶時區）。

<!--button-->
<form>
<input type="button" value="點我" onclick="msg()">
</form>

<!--checkbox-->
form action="/statics/demosource/demo-form.php">
  <input type="checkbox" name="vehicle[]" value="Bike"> 我有一輛自行車<br>
  <input type="checkbox" name="vehicle[]" value="Car"> 我有一輛小轎車<br>
  <input type="checkbox" name="vehicle[]" value="Boat"> 我有一艘船<br>
  <input type="submit" value="提交">
</form>

<!--color-->
<form action="/statics/demosource/demo-form.php">
  選擇你喜歡的顏色: <input type="color" name="favcolor"><br>
  <input type="submit">
</form>

<!--date-->
<form action="/statics/demosource/demo-form.php">
  生日: <input type="date" name="bday">
  <input type="submit">
</form>

<!--datetime-->
<form action="/statics/demosource/demo-form.php">
  生日 (日期和時間): <input type="datetime" name="bdaytime">
  <input type="submit">
</form>

<!--datetime-local-->
<form action="/statics/demosource/demo-form.php">
  生日 (日期和時間): <input type="datetime-local" name="bdaytime">
  <input type="submit">
</form>

<!--email-->
<form action="/statics/demosource/demo-form.php">
  E-mail: <input type="email" name="usremail">
  <input type="submit">
</form>

<!--file-->
<form action="/statics/demosource/demo-form.php">
  選擇一個文件: <input type="file" name="img">
  <input type="submit">
</form>

<!--hidden-->
<form action="/statics/demosource/demo-form.php">
  First name: <input type="text" name="fname"><br>
  <input type="hidden" name="country" value="Norway">
  <input type="submit" value="提交">
</form>

<p>注意隱藏字段用戶是看不到的。</p>

<!--image-->
<form action="/statics/demosource/demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="image" src="/statics/images/submit.gif" alt="Submit" width="48" height="48">
</form>

<p><b>注意:</b> 點擊激活圖片按鈕 input type="image" 會發送  X 和 Y 座標到服務端。</p>

<!--month-->
<form action="/statics/demosource/demo-form.php">
  生日 ( 月和年 ): <input type="month" name="bdaymonth">
  <input type="submit">
</form>

<!--number-->
<form action="/statics/demosource/demo-form.php">
  數量 ( 1 到 5 之間): <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>
max - 規定容許的最大值。
min - 規定容許的最小值。
step - 規定合法數字間隔。
value - 規定默認值。

<!--password-->
<form action="/statics/demosource/demo-form.php">
  Email: <input type="text" name="email"><br>
  Password: <input type="password" name="pwd" maxlength="8"><br>
  <input type="submit">
</form>

<!--radio 容許用戶在必定數量的選擇中選取一個選項：-->

<form action="/statics/demosource/demo-form.php">
  <input type="radio" name="gender" value="女"> 女<br>
  <input type="submit" value="提交">
</form>

<!--range-->
<form action="/statics/demosource/demo-form.php" method="get">
Points: <input type="range" name="points" min="1" max="10">
<input type="submit">
</form>


<!--reset  定義重置按鈕（重置全部表單值爲默認值）-->
<form action="/statics/demosource/demo-form.php">
  Email: <input type="text" name="email"><br>
  Pin: <input type="text" name="pin" maxlength="4"><br>
  <input type="reset" value="重置">
  <input type="submit" value="提交">
</form>

<p>點擊重置按鈕從新設置表單。</p>

<!--search-->
<form action="/statics/demosource/demo-form.php">
  Search Google: <input type="search" name="googlesearch"><br>
  <input type="submit">
</form>

<!--submit-->

form action="/statics/demosource/demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit">
</form>

<!--tel-->
<form action="/statics/demosource/demo-form.php">
  電話號碼: <input type="tel" name="usrtel"><br>
  <input type="submit">
</form>
<!--text-->
<form action="/statics/demosource/demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit">
</form>

<!--time-->
<form action="/statics/demosource/demo-form.php">
  選擇時間: <input type="time" name="usr_time">
  <input type="submit">
</form>

<!--url-->
<form action="/statics/demosource/demo-form.php">
  添加你的主頁: <input type="url" name="homepage"><br>
  <input type="submit">
</form>

<!--week-->

<form action="/statics/demosource/demo-form.php">
  選擇周: <input type="week" name="year_week">
  <input type="submit">
</form>

29)value:指定 <input> 元素 value 的值。

<img> 　圖片標籤 <img src =「」 width =「104」 height=「142」 alt =「test」 title =「show」>
img元素是自關閉元素，不須要結束標籤；alt 若是圖片加載失敗會顯示；title 鼠標放上去會顯示。

<keygen>（New）:定義了表單的密鑰對生成器字段（<keygen> 標籤已經從 Web 標準中刪除）

Firefox、Opera、Chrome 和 Safari 6 都支持 <keygen> 標籤。 注意: Internet Explorer 不支持 keygen 標籤。

<form action="/statics/demosource/demo-form.php" method="get">
  用戶名: <input type="text" name="usr_name">
  加密: <keygen name="security">
  <input type="submit">
</form>

其餘詳見：https://www.w3cschool.cn/htmltags/tag-keygen.html

<label>：標籤是一種常見的表單控件，觸發對應表單控件功能，讓用戶在使用表單的時候可以有更好的體驗
```
<form action="/statics/demosource/demo-form.php">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br><br>
  <input type="submit" value="提交">
</form>
```
label 元素不會向用戶呈現任何特殊效果。不過，它爲鼠標用戶改進了可用性。

若是您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上。

<label> 標籤的 for 屬性應當與相關元素的 id 屬性相同。

for 屬性可把 label 綁定到另一個元素。請把 "for" 屬性的值設置爲相關元素的 id 屬性的值。
屬性1）for：規定 label 與哪一個表單元素綁定

2)form:規定 label 字段所屬的一個或多個表單:詳見<input>:標籤的form屬性
<legend>：定義了 <fieldset> 元素的標題，詳見<fieldset>標籤

<link> 標籤訂義了文檔與外部資源之間的關係。

<head> 
<link rel="stylesheet" type="text/css" href="mystyle.css"> 
</head>
<link rel="stylesheet" type="text/css" href="/statics/demosource/styles.css">

<map> <map> 標籤能夠和 <area> 元素一塊兒使用，

<img src ="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.gif">
<area shape="circle" coords="90,58,3" alt="Mercury" href="merglobe.gif">
<area shape="circle" coords="124,58,8" alt="Venus" href="venglobe.gif">
</map>

x1,y1,x2,y2           若是 shape 屬性設置爲 "rect"，則該值規定矩形左上角和右下角的座標。
x,y,radius            若是 shape 屬性設置爲 "circ"，則該值規定圓心的座標和半徑。
x1,y1,x2,y2,..,xn,yn  若是 shape 屬性設置爲 "poly"，則該值規定多邊形各邊的座標。若是第一個座標和最後一個座標不一致，那麼爲了關閉多邊形，瀏覽器必須添加最後一對座標。

map 中的 name屬性對應img中的 usemap屬性（須要加上#），area 元素永遠嵌套在 map 元素內部。area 元素可定義圖像映射中的區域。

default 規定所有區域。
rect    定義矩形區域。
circ    定義圓形。
poly    定義多邊形區域。

<meat> 描述HTML 的描述，關鍵詞，做者，字符集等的標籤

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title> 
<meta name="description" content="免費web教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="W3Cschool">

<meta http-equiv="refresh" content="30"><!--每30秒鐘刷新當前頁面-->
<meta charset="UTF-8">
</head>
<body>

<p>全部 meta 標籤顯示在 head 部分...</p>

</body>
</html>

<noscript> 標籤提供沒法使用腳本時的替代內容，比方在瀏覽器禁用腳本時，或瀏覽器不支持客戶端腳本時。

<noscript>元素可包含普通 HTML 頁面的 body 元素中可以找到的全部元素。

只有在瀏覽器不支持腳本或者禁用腳本時，纔會顯示 <noscript> 元素中的內容：
```
<script>
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
```
<object>：<object> 標籤能夠表示一個外部資源，能夠將其視爲一個映像、一個嵌套的瀏覽上下文，或者一個由插件處理的資源。
```
<object width="400" height="400" data="/statics/demosource/helloworld.swf" >
</object>
```
HTML 助手（插件）
```
輔助應用程序（helper application）是可由瀏覽器啓動的程序。輔助應用程序也稱爲插件。 輔助程序可用於播放音頻和視頻（以及其餘）。輔助程序是使用 <object> 標籤來加載的。 使用輔助程序播放視頻和音頻的一個優點是，您可以容許用戶來控制部分或所有播放設置。 插件能夠經過 <object> 標籤或者 <embed> 標籤添加在頁面中。object 和 embed 元素都經過添加對瀏覽器不直接支持的插件的支持來擴展瀏覽器的功能。 
```
咱們可使用 <video> 和 <audio> 標籤來顯示視頻和音頻

<object> 元素

<object> 標籤用於包含對象，好比圖像、音頻、視頻、Java applets、ActiveX、PDF 以及 Flash。

object 的初衷是取代 img 和 applet 元素。不過因爲漏洞以及缺少瀏覽器支持，這一點並未實現。

瀏覽器的對象支持有賴於對象類型。不幸的是，主流瀏覽器都使用不一樣的代碼來加載相同的對象類型。

而幸運的是，object 對象提供瞭解決方案。若是未顯示 object 元素，就會執行位於 <object> 和 </object> 之間的代碼。經過這種方式，咱們可以嵌套多個 object 元素（每一個對應一個瀏覽器）。

全部主流瀏覽器都支持 <object> 標籤。

<object> 元素定義了在 HTML 文檔中嵌入的對象。

<object> 元素具備局部屬性:data，type，height，width，usemap，name，form。

該標籤用於插入對象 (例如在網頁中嵌入 Java 小程序, PDF 閱讀器, Flash 播放器) 。

<object> 元素一樣可用於包含HTML文件：
```
<object width="100%" height="500px" data="/statics/demosource/snippet.html"></object>
```
或者插入一張圖片:
```
<object data="/statics/images/w3c/logo.png"></object>
```
<embed> 元素

全部主流瀏覽器都支持 <embed> 元素。<embed> 元素實現與 <object> 元素相同的結果。
```
<embed width="400" height="50" src="/statics/demosource/bookmark.swf">
```
詳見：<embed>標籤。注意 <embed> 元素沒有關閉標籤。不能使用替代文本。<embed> 元素一樣可用於包含 HTML 文件或者一張圖片

屬性：1）data：規定對象使用的資源的 URL。

2）form（New）：規定對象所屬的一個或多個表單(幾乎全部的主流瀏覽器都不支持這一屬性）

3）height，width，name；

4）type：規定 data 屬性中規定的數據的 MIME 類型。
```
<object width="400" height="400" data="/statics/demosource/helloworld.swf" type="application/x-shockwave-flash">
</object>
```
請參閱IANA MIME 類型，得到標準 MIME 類型的完整列表： https://www.iana.org/assignments/media-types/media-types.xhtml

5）usemap：規定與對象一同使用的客戶端圖像映射的名稱
```
<object data="/statics/images/course/planets.gif" width="145" height="126" usemap="#planetmap"></object>

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="/statics/images/course/sun.gif">
<area shape="circle" coords="90,58,3" alt="Mercury" href="/statics/images/course/merglobe.gif">
<area shape="circle" coords="124,58,8" alt="Venus" href="/statics/images/course/venglobe.gif">
</map>

<p><b>注意:</b>除了 Chrome 和 Safari，其餘主流瀏覽器都支持 usemap 屬性。</p>
 
```

<option>：<option> 標籤用於定義包含在<select>、<optgroup> 或 <datalist> 元素中的項。

屬性：1）disabled：規定此選項應在首次加載時被禁用；

2）除了 Firefox，其餘主流瀏覽器都支持 label 屬性。

注意：Internet Explorer 7 及以前的版本不支持 <option> 標籤的 label 屬性

<select>
<option label="Volvo">Volvo (Latin for "I roll")</option>
<option label="Saab">Saab (Swedish Aeroplane AB)</option>
<option label="Mercedes">Mercedes (Mercedes-Benz)</option>
<option label="Audi">Audi (Auto Union Deutschland Ingolstadt)</option>
</select>

3）selected：規定選項（在首次顯示在列表中時）表現爲選中狀態

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi" selected>Audi</option>
</select>

4）value：定義送往服務器的選項值

<optgroup>：用於對 <select> 元素所提供的選項進行分組。當您使用一個較長的選項列表時，對相關的選項進行組合會使處理更加容易。

<select> 
  <optgroup label="Swedish Cars"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
  </optgroup> 
  <optgroup label="German Cars"> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
  </optgroup> 
</select>

屬性1）disabled：規定禁用該選項組

2）label：爲選項組規定描述

<output>（New）：定義一個計算結果

Firefox、Opera、Chrome 和 Safari 瀏覽器都支持 <output> 標籤。

注意:Internet Explorer 瀏覽器不支持 <output> 標籤。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

屬性：1）for：描述計算中使用的元素與計算結果之間的關係

2）form：定義輸入字段所屬的一個或多個表單 3）name：定義對象的惟一名稱（表單提交時使用）

<p>　　段落標籤
<script> 可用在head或者body中
<script> 標籤用於定義客戶端腳本，好比 JavaScript。

<script> 元素既可包含腳本語句，也可經過 src 屬性指向外部腳本文件（註釋：若是使用 "src" 屬性，則 <script> 元素必須是空的）

JavaScript 最經常使用於圖片操做、表單驗證以及內容動態更新。

下面的腳本會向瀏覽器輸出"Hello World!"：
```
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title> 
</head>
<body>

<script>
document.write("Hello World!")
</script> 

</body>
</html>
```
<noscript>

標籤提供沒法使用腳本時的替代內容，比方在瀏覽器禁用腳本時，或瀏覽器不支持客戶端腳本時。

<noscript>元素可包含普通 HTML 頁面的 body 元素中可以找到的全部元素。

只有在瀏覽器不支持腳本或者禁用腳本時，纔會顯示 <noscript> 元素中的內容：
```
<script>
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
```
```
<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<p id="demo">
JavaScript can react to events. Like the click of a button.
</p>

<script>
function myFunction()
{
document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>

<button type="button" onclick="myFunction()">Click Me!</button>

</body>
</html>
```
<span> 可用做文本的容器

<select> 用來建立下拉列表。

<select>
  <option value="volvo" style="display:none">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

能夠經過 <optgroup> 標籤把相關的選項組合在一塊兒：

<select> 
  <optgroup label="Swedish Cars"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
  </optgroup> 
  <optgroup label="German Cars"> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
  </optgroup> 
</select>

屬性 1）autofocus，disabled，form，multiple，name，required，用法同<input>的屬性
2）size：規定下拉列表中可見選項的數目。

<select size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<style> 樣式標籤定義了HTML文檔的樣式文件引用地址，在<style> 元素中你須要指定樣式文件來渲染HTML文檔:

<head> 
<style type="text/css"> 
body {
    background-color:yellow
    } 
p {
    color:blue
} 
</style> 
</head>

1)style="text-decoration:none;" 連接去除下劃線

2)style="background-color:green;」 背景色

3)style="font-family:arial;color:red;font-size:20px;" 字體

4)style="text-align:center;" 對齊方式

<table> 表格標籤

  <table>…</table>：定義表格
  <th>…</th>：定義表格的標題欄（文字加粗）
  <tr>…</tr>：定義表格的行
  <td>…</td>：定義表格的列

<table border="1">
<caption>Monthly</caption>
<colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>

<tr>
<th>姓名</th>
<th>編號</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

1.若是不定義邊框border屬性，表格將不顯示邊框。
2.表格的表頭使用 <th> 標籤進行定義,表格的表頭屬性主要是一些公共屬性，如：align、dir、width、height。
3.<caption>Monthly</caption>: 標籤表示 HTML 表格的標題
4.<colgroup> 標籤用於表示 HTML 的表格列組，定義了表中的一組列表。只能在 <table> 元素以內，在任何一個 <caption> 元素以後，在任何一個 <thead>、<tbody>、<tfoot>、<tr> 元素以前使用 <colgroup> 標籤。
5.<col> 標籤 span number 規定列組應該橫跨的列數。詳見：https://www.w3cschool.cn/htmltags/tag-colgroup.html

6. <thead> 定義表格的頁眉

<tbody> 定義表格的主體

<tfoot>定義表格的頁腳

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
</style>
</head>
<body>

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

<p>提示: thead, tbody, 和 tfoot 元素默認不會影響表格的佈局。不過，您可使用 CSS 來爲這些元素定義樣式，從而改變表格的外觀。</p>

</body>
</html>

<textarea> 標籤訂義一個多行的文本輸入控件。

文本區域中可容納無限數量的文本，其中的文本的默認字體是等寬字體（一般是 Courier）。

能夠經過 cols 和 rows 屬性來規定 textarea 的尺寸大小，不過更好的辦法是使用 CSS 的 height 和 width 屬性。

<textarea rows="10" cols="30">
我是一個文本框。
</textarea>

屬性：1）autofocus，disabled，form，name，placeholder，readonly，required：詳見<Input>標籤的屬性

2）cols，rows：規定文本區域內可見的列數和行數

3）maxlength （New）：規定文本區域容許的最大字符數

Internet Explorer 十、Firefox、Chrome 和 Safari 支持 maxlength 屬性。

注意：Opera 或者 Internet Explorer 9 及以前的版本不支持 <textarea> 標籤的 maxlength 屬性。

除了 Internet Explorer 和 Opera，其餘主流瀏覽器都支持 maxlength 屬性。

4）wrap（New）：規定當提交表單時，文本區域中的文本應該怎樣換行（hard，soft）全部主流瀏覽器都支持 wrap 屬性

<form action="demo-form.php">
<textarea rows="2" cols="20" name="usrtxt" wrap="hard">
w3cschoolW3Cschool教程提供了最全的web技術教程。
</textarea>
<input type="submit">
</form>

值	描述
soft	在表單提交時，textarea 中的文本不換行。默認。
hard	在表單提交時，textarea 中的文本換行（包含換行符）。當使用 "hard" 時，必須指定 cols 屬性。

<ul> 無序列表，style能夠定義不一樣類型 style="list-style-type:disc":實心圓；style="list-style-type:circle"：空心圓；style="list-style-type:square"方塊

<ul style="list-style-type:circle">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

擴展: 有序標籤： start 定義序列的開始號；type 定義類型：A,a,I.i,1(默認爲數字型) ；reversed：倒序

<ol>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

<ol start="50" reversed>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

擴展:自定義標籤：

<dl>
 <dt>Coffee</dt>
 <dd>- black hot drink</dd>
 <dt>Milk</dt>
 <dd>- white cold drink</dd>
 </dl> 
效果以下：
Coffee
- black hot drink
Milk
- white cold drink

<video> 將視頻內容嵌入到HTML文檔中

IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <video> 標籤。

註釋：IE 8 或更早版本的 IE 瀏覽器不支持 <video> 標籤。

<video width="320" height="240" controls>
  <source src="/statics/demosource/movie.mp4"  type="video/mp4">
  <source src="/statics/demosource/movie.ogg"  type="video/ogg">
  您的瀏覽器不支持 HTML5 video 標籤。
</video>

<video> 標籤訂義視頻，好比電影片斷或其餘視頻流。

目前，<video> 元素支持三種視頻格式：MP四、WebM、Ogg。

瀏覽器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES 從 Firefox 21 版本開始 Linux 系統從 Firefox 30 開始	YES	YES
Safari	YES	NO	NO
Opera	YES 從 Opera 25 版本開始	YES	YES

MP4 = MPEG 4文件使用 H264 視頻編解碼器和AAC音頻編解碼器
WebM = WebM 文件使用 VP8 視頻編解碼器和 Vorbis 音頻編解碼器
Ogg = Ogg 文件使用 Theora 視頻編解碼器和 Vorbis音頻編解碼器

音頻格式的 MIME 類型

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

能夠在 <video> 和 </video> 標籤之間放置文本內容，這樣不支持 <video> 元素的瀏覽器就能夠顯示出該標籤的信息。

：HTML5 中的新屬性。

屬性	值	描述
autoplay New	autoplay	若是出現該屬性，則視頻在就緒後立刻播放。
controls New	controls	若是出現該屬性，則向用戶顯示控件，好比播放按鈕。
height New	pixels	設置視頻播放器的高度。
loop New	loop	若是出現該屬性，則當媒介文件完成播放後再次開始播放。
mutedN ew	muted	若是出現該屬性，視頻的音頻輸出爲靜音。
poster New	URL	規定視頻正在下載時顯示的圖像，直到用戶點擊播放按鈕。
preload New	auto metadata none	若是出現該屬性，則視頻在頁面加載時進行加載，並預備播放。若是使用 "autoplay"，則忽略該屬性。（預覽圖像）
src New	URL	要播放的視頻的 URL。
width New	pixels	設置視頻播放器的寬度。

<video controls poster="/images/w3html5.gif">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

在 HTML 中播放視頻的方法有不少種。

可使用 <embed> 標籤、<object> 標籤以及 <video> 標籤（HTML 5中啓用）。

在 HTML 中播放視頻並不容易！

您須要諳熟大量技巧，以確保您的視頻文件在全部瀏覽器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和全部硬件上（PC, Mac , iPad, iPhone）都可以播放。

A.使用 <embed> 標籤

下面的 HTML 代碼顯示嵌入網頁的 Flash 視頻：

<embed src="intro.swf" height="200" width="200">

問題

HTML4 沒法識別 <embed> 標籤。您的頁面沒法經過驗證。
若是瀏覽器不支持 Flash，那麼視頻將沒法播放
iPad 和 iPhone 不能顯示 Flash 視頻。
若是您將視頻轉換爲其餘格式，那麼它仍然不能在全部瀏覽器中播放。
B.使用 <object> 標籤

<object> 標籤的做用是在 HTML 頁面中嵌入多媒體元素。

下面的 HTML 片斷顯示嵌入網頁的一段 Flash 視頻
```
<object data="intro.swf" height="200" width="200"></object>
```
問題:
- 若是瀏覽器不支持 Flash，將沒法播放視頻。
- iPad 和 iPhone 不能顯示 Flash 視頻。
- 若是您將視頻轉換爲其餘格式，那麼它仍然不能在全部瀏覽器中播放。
  C.使用 HTML5 <video> 元素
  
  HTML5 <video> 標籤訂義了一個視頻或者影片.
  
  <video> 元素在全部現代瀏覽器中都支持。
  
  如下 HTML 片斷會顯示一段嵌入網頁的 ogg、mp4 或 webm 格式的視頻：
```
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>
```
  Tip:
  
  ogg：帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件
  mp4：帶有 H.264 視頻編碼和 AAC 音頻編碼的 mp4 文件
  webm：帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 webm 文件
  
  問題:
  - 您必須把視頻轉換爲不少不一樣的格式。
  - <video> 元素在老式瀏覽器中無效
    D.最好的 HTML 解決方法
    
    如下實例中使用了4種不一樣的視頻格式。HTML 5 <video> 元素會嘗試播放以 mp四、ogg 或 webm 格式中的一種來播放視頻。若是均失敗，則回退到 <embed> 元素。
```

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240">
  </object> 
</video>
```
    問題:
    - 您必須把視頻轉換爲不少不一樣的格式
      E.優酷解決方案
      
      在 HTML 中顯示視頻的最簡單的方法是使用優酷等視頻網站。
      
      若是您但願在網頁中播放視頻，那麼您能夠把視頻上傳到優酷等視頻網站，而後在您的網頁中插入 HTML 代碼便可播放視頻：
      <embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400"
      
      type="application/x-shockwave-flash"> </embed>
      F.使用超連接
      
      若是網頁包含指向媒體文件的超連接，大多數瀏覽器會使用"輔助應用程序"來播放文件。
      
      如下代碼片斷顯示指向 AVI 文件的連接。若是用戶點擊該連接，瀏覽器會啓動"輔助應用程序"，好比 Windows Media Player 來播放這個 AVI 文件：
      <a href="intro.swf">Play a video file</a>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

2.HTML標籤

<a> 連接標籤

<audio>: HTML5 提供的用來播放音頻文件的。(<video> 是用來播放視頻的）

IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <audio> 標籤。

簽訂義及使用說明

能夠在 <audio> 和 </audio> 之間放置文本內容，這些文本信息將會被顯示在那些不支持 <audio> 標籤的瀏覽器中。

屬性

問題:

最好的 HTML 解決方法：下面的例子使用了兩個不一樣的音頻格式。HTML5 <audio> 元素會嘗試以 mp3 或 ogg 來播放音頻。若是失敗，代碼將回退嘗試 <embed> 元素。

雅虎媒體播放器 - 一個簡單的添加音頻到你網站上的方式

使用超連接

<b> 加粗標籤

<button>： 標籤用來設置 HTML 中的按鈕。

屬性1）autofocus，disabled，form，formaction formenctype formmethod formnovalidate formtarget （type="submit" 配合使用), name

3)value:規定按鈕的初始值。可由腳本進行修改

<base> 在<head>中間<title> 後，定義了頁面上全部連接的默認url

<br>或<br/> 換行標籤

<c:import> 標籤

<c:import> 標籤

屬性

實例演示

<c:out> 標籤

<c:out> 標籤

屬性

程序示例

<datalist>(New) <datalist> 標籤須要與 <input> 標籤配合使用，用來表示可選的列表。

<div> HTML 能夠經過 <div> 和 <span> 將元素組合起來。

全部主流瀏覽器都支持 <embed> 標籤。

<embed> 標籤訂義了一個容器，用來嵌入外部應用或者互動程序（插件）。

屬性1)height，width，type：詳見<object>;

2)src:規定被嵌入內容的 URL

<fieldset>:對錶單中的相關元素進行分組：

全部主流瀏覽器都支持 <fieldset> 標籤。

1) accept 屬性 HTML5 不支持。規定服務器接收到的文件的類型。（文件是經過文件上傳提交的）

<h1> 標題標籤 (h1到h6,超過6無效果)

<hr/> 水平線

4）autocomplete(New)： autocomplete 屬性規定 <input> 元素輸入字段是否應該啓用自動完成功能

除了 Internet Explorer，幾乎全部的主流瀏覽器都支持 form 屬性。 IE不支持form屬性

22)placeholder(New):placeholder 屬性規定可描述輸入 <input> 字段預期值的簡短的提示信息。

屬性值(注意: 某些瀏覽器可能不支持帶New的 Type，詳見：https://www.w3cschool.cn/htmltags/att-input-type.html）

<img> 圖片標籤 <img src =「」 width =「104」 height=「142」 alt =「test」 title =「show」> img元素是自關閉元素，不須要結束標籤 ；alt 若是圖片加載失敗會顯示；title 鼠標放上去會顯示。

<label>：標籤是一種常見的表單控件，觸發對應表單控件功能，讓用戶在使用表單的時候可以有更好的體驗

<legend>：定義了 <fieldset> 元素的標題，詳見<fieldset>標籤

<link> 標籤訂義了文檔與外部資源之間的關係。

<noscript> 標籤提供沒法使用腳本時的替代內容，比方在瀏覽器禁用腳本時，或瀏覽器不支持客戶端腳本時。

<object>：<object> 標籤能夠表示一個外部資源，能夠將其視爲一個映像、一個嵌套的瀏覽上下文，或者一個由插件處理的資源。

HTML 助手（插件）

<object> 元素

2）form（New）：規定對象所屬的一個或多個表單(幾乎全部的主流瀏覽器都不支持這一屬性）

4）type：規定 data 屬性中規定的數據的 MIME 類型。

5）usemap：規定與對象一同使用的客戶端圖像映射的名稱

<option>：<option> 標籤用於定義包含在<select>、<optgroup> 或 <datalist> 元素中的項。

<optgroup>：用於對 <select> 元素所提供的選項進行分組。當您使用一個較長的選項列表時，對相關的選項進行組合會使處理更加容易。

<noscript>

<style> 樣式標籤 定義了HTML文檔的樣式文件引用地址，在<style> 元素中你須要指定樣式文件來渲染HTML文檔:

<textarea> 標籤訂義一個多行的文本輸入控件。

3）maxlength （New）：規定文本區域容許的最大字符數

<video> 將視頻內容嵌入到HTML文檔中

IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <video> 標籤。

註釋：IE 8 或更早版本的 IE 瀏覽器不支持 <video> 標籤。

音頻格式的 MIME 類型

能夠在 <video> 和 </video> 標籤之間放置文本內容，這樣不支持 <video> 元素的瀏覽器就能夠顯示出該標籤的信息。

A.使用 <embed> 標籤

B.使用 <object> 標籤

C.使用 HTML5 <video> 元素

D.最好的 HTML 解決方法

E.優酷解決方案

F.使用超連接

<b>　　加粗標籤

<button>：標籤用來設置 HTML 中的按鈕。

<br>或<br/>　　換行標籤

<datalist>(New) 　<datalist> 標籤須要與 <input> 標籤配合使用，用來表示可選的列表。

<h1>　　標題標籤 (h1到h6,超過6無效果)

<img> 　圖片標籤 <img src =「」 width =「104」 height=「142」 alt =「test」 title =「show」>
img元素是自關閉元素，不須要結束標籤；alt 若是圖片加載失敗會顯示；title 鼠標放上去會顯示。

<style> 樣式標籤定義了HTML文檔的樣式文件引用地址，在<style> 元素中你須要指定樣式文件來渲染HTML文檔: