<!-- 默認(rèn)超鏈接  -->
<a  title="Sample Link">Sample</a>
<!-- 當(dāng)前窗口顯示 -->
<a  title="Sample Link" target="_self">Sample</a>
<!-- 新窗口顯示 -->
<a  title="Sample Link" target="_blank">Sample</a>
<!-- iframe 中打開鏈接 -->
<a  title="Sample Link" target="iframe-name">Sample</a>
<iframe name="iframe-name" frameborder="0"></iframe>

<!-- 頁面中的錨點 -->
<a href="#achor">Achor Point</a>
<section id="achor">Achor Content</section>

<!-- 郵箱及電話需系統(tǒng)支持 -->
<a href="mailto:sample-address@me.com" title="Email">Contact Us</a>
<!-- 多個郵箱地址 -->
<a href="mailto:sample-address@me.com, sample-address0@me.com" title="Email">Contact Us</a>
<!-- 添加抄送，主題和內(nèi)容 -->
<a href="mailto:sample-address@me.com?cc=admin@me.com&subject=Help&body=sample-body-text" title="Email">Contact Us</a>

<!-- 電話示例 -->
<a href="tel:99999999" title="Phone">Ring Us</a>

組合內(nèi)容標(biāo)簽

<div>
<p>
<ol>
<ul>
<dl>
<pre>
<blockquote>

文檔章節(jié)

引用

<cite> 引用作品的名字、作者的名字等
<q> 引用一小段文字（大段文字引用用<blockquote>）
<blockquote> 引用大塊文字
<pre> 保存格式化的內(nèi)容（其空格、換行等格式不會丟失）

<pre>
  <code>
    int main(void) {
      printf('Hello, world!');
      return 0;
  }
</code>
</pre>

代碼

<code> 引用代碼

格式化

<b> 加粗 <i> 斜體

強(qiáng)調(diào)

<em> 斜體。著重于強(qiáng)調(diào)內(nèi)容，會改變語義的強(qiáng)調(diào) <strong> 粗體。著重于強(qiáng)調(diào)內(nèi)容的重要性

換行

<br> 換行

列表

無序列表

<ul>
  <li>標(biāo)題</li>
  <li>結(jié)論</li>
</ul>

有序列表

<ol>
  <li>第一</li>
  <li>第二</li>
</ol>

自定義列表

<dl>
  <dt>作者</dt>
  <dd>愛因斯坦</dd>
  <dt>作品</dt>
  <dd>《相對論》</dd>
  <dd>《時間與空間》</dd>
</dl>

一個<dt>可以對應(yīng)多個<dd>

NOTE: <dl> 為自定義列表，其中包含一個或多個 <dt> 及一個或多個 <dd>，并且dt 與 dl列表會有縮進(jìn)的效果。<pre> 會保留換行和空格，通常與 <code> 一同使用。

<pre>
  <code>
    int main(void) {
      printf('Hello, world!');
      return 0;
    }
  </code>
</pre>

<blockquote> 擁有 cite 屬性，它包含引用文本的出處，示例如下所示：

<blockquote cite="http://example.com/facts">
  <p>Sample Quote...</p>
</blockquote>

嵌入

<iframe src=""></iframe> 頁面操作可以不影響到iframe的內(nèi)容

<!--object embed通常用來嵌入外部資源 -->
<object type="application/x-shockwave-player">
  <param name="movie" value="book.pdf">
</object>

<!--視頻 track可以引入字幕 autoplay可以使視頻加載后自動播放，loop可以使其循環(huán)播放 -->
<video autoplay loop controls="controls" poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogg" type="video/ogg">
  <track kind="subtitles" src="video.vtt" srclang="cn" label="cn">
</video>

資源標(biāo)簽

圖標(biāo)簽

canvas 基于像素，性能要求比較高，可用于實時數(shù)據(jù)展示。svg 為矢量圖形圖像。

熱點區(qū)域標(biāo)簽

img中套用map以及area可以實現(xiàn)點擊某部分圖片觸發(fā)一個鏈接，點擊另一部分觸發(fā)另一個鏈接

<img src="mama.jpg" width=100 height=100 usemap="#map" />
<map name="map">
    <area shap="rect" coords="0,0,50,50" href="" alt="">
    <area shap="circle" coords="75,75,25" href="" alt="">
</map>

表格

表格代碼示例

<table>
  <caption>table title and/or explanatory text</caption>
  <thead>
    <tr>
      <th>header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data</td>
    </tr>
  </tbody>
</table>

使用 colspan=val 進(jìn)行跨列，使用 rowspan=val 進(jìn)行跨行。

表單

<form action="WebCreation_submit" method="get" accept-charset="utf-8">
  <fieldset>
    <legend>title or explanatory caption</legend>
    <!-- 第一種添加標(biāo)簽的方法 -->
    <label><input type="text/submit/hidden/button/etc" name="" value=""></label>
    <!-- 第二種添加標(biāo)簽的方法 -->
    <label for="input-id">Sample Label</label>
    <input type="text" id="input-id">
  </fieldset>
  <fieldset>
    <legend>title or explanatory caption</legend>
    <!-- 只讀文本框 -->
    <input type="text" readonly>
    <!-- 隱藏文本框，可提交影藏數(shù)據(jù) -->
    <input type="text" name="hidden-info" value="hiden-info-value" hidden>
  </fieldset>
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>

使用fieldset可用于對表單進(jìn)行分區(qū)

表單中的其他控件類型：

textarea （文本框）
select 與 option （下拉菜單可多選）

input 類型支持值列表
Value	Description
button	Defines a clickable button (mostly used with a JavaScript to activate a script)
checkbox	Defines a checkbox
http://wiki.jikexueyuan.com/project/fend_note/images/H/html5_badge20.png">color	Defines a color picker
http://wiki.jikexueyuan.com/project/fend_note/images/H/html5_badge20.png">date	Defines a date control (year, month and day (no time))
http://wiki.jikexueyuan.com/project/fend_note/images/H/html5_badge20.png">datetime	The input type datetime has been removed from the HTML standard. Use datetime-local instead.
http://wiki.jikexueyuan.com/project/fend_note/images/H/html5_badge20.png">datetime-local	Defines a date and time control (year, month, day, hour, minute, second, and fraction of a second (no time zone)
http://wiki.jikexueyuan.com/project/fend_note/images/H/html5_badge20.png">email	Defines a field for an e-mail address
file	Defines a file-select field and a "Browse..." button (for file uploads)
hidden	Defines a hidden input field
image	Defines an image as the submit button
http://wiki.jikexueyuan.com/project/fend_note/images/H/html5_badge20.png">month	Defines a month and year control (no time zone)
http://wiki.jikexueyuan.com/project/fend_note/images/H/html5_badge20.png">number	Defines a field for entering a number
password	Defines a password field (characters are masked)
radio	Defines a radio button
http://wiki.jikexueyuan.com/project/fend_note/images/H/html5_badge20.png">range	Defines a control for entering a number whose exact value is not important (like a slider control)
reset	Defines a reset button (resets all form values to default values)
http://wiki.jikexueyuan.com/project/fend_note/images/H/html5_badge20.png">search	Defines a text field for entering a search string
submit	Defines a submit button
http://wiki.jikexueyuan.com/project/fend_note/images/H/html5_badge20.png">tel	Defines a field for entering a telephone number
text	Default. Defines a single-line text field (default width is 20 characters)
http://wiki.jikexueyuan.com/project/fend_note/images/H/html5_badge20.png">time	Defines a control for entering a time (no time zone)
http://wiki.jikexueyuan.com/project/fend_note/images/H/html5_badge20.png">url	Defines a field for entering a URL
http://wiki.jikexueyuan.com/project/fend_note/images/H/html5_badge20.png">week	Defines a week and year control (no time zone)

語義化

語義化（Semantic Tag）是指用合適的標(biāo)簽標(biāo)識適當(dāng)?shù)膬?nèi)容，它可以起到搜索引擎優(yōu)化（Search Engine Optimization），提高可訪問性（例如盲人使用的屏幕閱讀器），與此同時還可以提高代碼的可讀性。簡而言之也就是在正確的地方使用正確的標(biāo)簽

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

HTML 標(biāo)簽

HTML 標(biāo)簽

文檔章節(jié)

文本標(biāo)簽

組合內(nèi)容標(biāo)簽

文檔章節(jié)

引用

代碼

格式化

強(qiáng)調(diào)

換行

列表

嵌入

資源標(biāo)簽

圖標(biāo)簽

熱點區(qū)域標(biāo)簽

表格

表單

語義化