HTML 筆記

HTML 指超文本標(biāo)記語言（HyperText Markup Language），是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。HTML 是一種基礎(chǔ)技術(shù)，常與 CSS、JavaScript 一起被眾多網(wǎng)站用于設(shè)計令人賞心悅目的網(wǎng)頁、網(wǎng)頁應(yīng)用程序以及移動應(yīng)用程序的用戶界面。網(wǎng)頁瀏覽器可以讀取 HTML 文件，并將其渲染成可視化網(wǎng)頁。HTML 描述了一個網(wǎng)站的結(jié)構(gòu)語義隨著線索的呈現(xiàn)，使之成為一種標(biāo)記語言而非編程語言。

簡介

通過如下的一個 HTML 示例來建立一個簡單的 HTML 頁面，以此來簡單了解一下 HTML 的結(jié)構(gòu)。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>我的網(wǎng)頁</title>
</head>

<body>

    <h1>第一個標(biāo)題</h1>
    <p>第一個段落。</p>

</body>

</html>

上述示例中，

  • DOCTYPE 聲明了文檔的類型；
  • <html> 標(biāo)簽是 HTML 頁面的根元素，該標(biāo)簽的結(jié)束標(biāo)志為 </html>；
  • <head> 標(biāo)簽包含了文檔的元（meta）數(shù)據(jù)，如 <meta charset="utf-8"> 定義網(wǎng)頁編碼格式為 UTF-8；
  • <title> 標(biāo)簽定義文檔的標(biāo)題；
  • <body> 標(biāo)簽定義文檔的主體，即網(wǎng)頁可見的頁面內(nèi)容，該標(biāo)簽的結(jié)束標(biāo)志為 </body>；
  • <h1> 標(biāo)簽作為一個標(biāo)題使用，該標(biāo)簽的結(jié)束標(biāo)志為 </h1>；
  • <p> 標(biāo)簽作為一個段落顯示，該標(biāo)簽的結(jié)束標(biāo)志為 </p>。

元素

HTML 文檔由 HTML 元素定義，HTML 元素指的是從開始標(biāo)簽到結(jié)束標(biāo)簽的所有代碼。

開始標(biāo)簽常被稱為起始標(biāo)簽（opening tag），結(jié)束標(biāo)簽常稱為閉合標(biāo)簽（closing tag）。

空元素

空元素即為沒有內(nèi)容的 HTML 元素。

HTML 中常用的一個空元素為 <br>（用于定義換行），<br> 元素就沒有關(guān)閉標(biāo)簽。

空元素應(yīng)當(dāng)在開始標(biāo)簽中關(guān)閉，方法是在開始標(biāo)簽中添加斜杠，比如 <br/>。

標(biāo)題

標(biāo)題（heading）是通過 <h1>～<h6> 標(biāo)簽進(jìn)行定義的。<h1> 定義最大的標(biāo)題，<h6> 定義最小的標(biāo)題。

瀏覽器會自動地在標(biāo)題的前后添加空行。

默認(rèn)情況下，HTML 會自動地在塊級元素前后添加一個額外的空行，比如段落、標(biāo)題元素前后。

水平線

<hr> 標(biāo)簽在 HTML 頁面中創(chuàng)建水平線。

hr 元素可用于分隔內(nèi)容，使用該元素產(chǎn)生的水平線可以在視覺上將文檔分隔成各個部分。

<h1>標(biāo)題</h1>
<hr/>
<p>段落。</p>

注釋

注釋的寫法如下：

<!-- 這是一個注釋 -->

段落

瀏覽器會自動地在段落的前后添加空行。（</p> 是塊級元素）

折行

如果希望在不產(chǎn)生一個新段落的情況下進(jìn)行換行（新行），使用 <br/> 標(biāo)簽。

它可以理解為簡單地輸入一個空行，而不是用來對內(nèi)容進(jìn)行分段。

省略空白符

無法通過在 HTML 代碼中添加額外的空格或換行來改變輸出的效果。

當(dāng)顯示頁面時，瀏覽器會移除源代碼中多余的空格和空行。所有連續(xù)的空格或空行都會被算作一個空格。需要注意的是，HTML 代碼中的所有連續(xù)的空行（換行）也被顯示為一個空格。

文本格式化

HTML 中存在一些格式化文本的標(biāo)簽。如：

<b>加粗文本</b><br><br>
<i>斜體文本</i><br><br>
<code>電腦自動輸出</code><br><br>
這是<sub>下標(biāo)</sub>和<sup>上標(biāo)</sup>

文本格式化標(biāo)簽

標(biāo)簽 描述 標(biāo)簽 描述
<b> 粗體 <sub> 下標(biāo)
<i> 斜體 <sup> 上標(biāo)
<strong> 加重語氣 <ins> 下劃線
<em> 著重 <del> 刪除線
<small> 小號字 <big> 大號字

通常使用標(biāo)簽 <strong> 替換加粗標(biāo)簽 <b>， <em> 替換 <i> 標(biāo)簽。然而，它們的含義是不同的：

  • <b> 與 <i> 定義粗體或斜體文本；

  • <strong> 或者 <em> 意味著要呈現(xiàn)的文本是重要的，所以要突出顯示。

My favorite color is <del>blue</del> <ins>red</ins>!

“計算機(jī)輸出”標(biāo)簽

標(biāo)簽 描述 標(biāo)簽 描述
<code> 計算機(jī)代碼 <var> 變量
<kbd> 鍵盤碼 <pre> 預(yù)格式文本
<samp> 計算機(jī)代碼樣本 <tt> 打字機(jī)文本 
<!-- 此例演示如何使用 pre 標(biāo)簽 -->
<pre>
對空行和　　空格
進(jìn)行控制
</pre>

引文、引用及標(biāo)簽定義

標(biāo)簽 描述 標(biāo)簽 描述
<abbr> 縮寫 <q> 短引用
<address> 地址 <cite> 引用、引證
<bdo> 文字方向 <dfn> 定義項
<blockquote> 長引用 
<abbr title="etcetera">etc.</abbr>

在某些瀏覽器中，當(dāng)把鼠標(biāo)移至縮略詞語上時，title 可用于展示表達(dá)的完整版本。

<bdo dir="rtl">該段落文字從右到左顯示。</bdo>

<p>
    WWF's goal is to:
    <q>
        Build a future where people live in harmony with nature.
    </q>
    We hope they succeed.
</p>

鏈接

HTML 使用標(biāo)簽 <a> 來設(shè)置超文本鏈接，可以從一個頁面指向另一個目的端的鏈接。

超鏈接可以是一個字、一個詞、一組詞，也可以是一幅圖像，可以點(diǎn)擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個部分。

在標(biāo)簽 <a> 中使用了 href 屬性來描述鏈接的地址：

<a href="url">Link text</a>

“鏈接文本”并不一定是文本。圖片或其它 HTML 元素都可以成為鏈接。

target 屬性

使用 target 屬性，可以定義被鏈接的文檔在何處顯示：在新窗口打開，還是在當(dāng)前窗口打開。

下面的示例會在新窗口打開鏈接：

<a  target="_blank">必應(yīng)搜索</a>

默認(rèn)的被鏈接文檔會在當(dāng)前窗口中打開。如果將 target 屬性設(shè)置為 _blank 則就會在新窗口打開。

id 屬性

id 屬性可用于在一個 HTML 文檔中創(chuàng)建書簽標(biāo)記。

下面的示例演示如何使用。

  • 在 HTML 文檔中插入 ID：

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

  • 在 HTML 文檔中創(chuàng)建一個鏈接到「Useful Tips Section」：

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

  • 或者，從另一個頁面創(chuàng)建一個鏈接到「Useful Tips Section」：

    <a >Visit the Useful Tips Section</a>

頭部

HTML 頭部元素包含關(guān)于文檔的概要信息，也被稱為元信息（meta-information）。

head 元素

<head> 元素包含了所有的頭部標(biāo)簽元素。在 <head > 元素中可以插入腳本（scripts）、樣式文件（CSS）、及各種 meta 信息。

可以添加在頭部區(qū)域的元素標(biāo)簽為：<title>、<style>、<meta>、<link>、<script>、<noscript> 和 <base>。

<head> 元素描述了文檔的各種屬性和信息，其中包括文檔的標(biāo)題、在 Web 中的位置以及和其他文檔的關(guān)系等。

標(biāo)簽 描述 標(biāo)簽 描述
<head> 文檔的信息 <meta> HTML 文檔中的元數(shù)據(jù)
<title> 文檔的標(biāo)題 <script> 客戶端的腳本文件
<base> 頁面鏈接標(biāo)簽的默認(rèn)鏈接地址 <style> HTML 文檔的樣式文件
<link> 一個文檔和外部資源之間的關(guān)系

base 元素

<base> 標(biāo)簽描述了基本的鏈接地址／鏈接目標(biāo)，該標(biāo)簽作為 HTML 文檔中所有的鏈接標(biāo)簽的默認(rèn)鏈接：

<base  target="_blank">

上述示例指定了該 HTML 文檔中所有鏈接的前綴為 http://example.com/，且在新標(biāo)簽頁中打開。

link 元素

<link> 標(biāo)簽定義了文檔與外部資源之間的關(guān)系，通常用于鏈接到樣式表：

<link rel="stylesheet" type="text/css" href="mystyle.css">

style 元素

<style> 標(biāo)簽定義了 HTML 文檔的樣式文件引用地址，需要指定樣式文件來渲染 HTML 文檔：

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

meta 元素

<meta> 標(biāo)簽描述了一些基本的元數(shù)據(jù)。元數(shù)據(jù)不顯示在頁面上，但會被瀏覽器解析。

meta 元素通常用于指定網(wǎng)頁的描述、關(guān)鍵詞、文件的最后修改時間、作者和其他元數(shù)據(jù)。

元數(shù)據(jù)可以用于瀏覽器（如何顯示內(nèi)容或重新加載頁面）、搜索引擎（關(guān)鍵詞）或其他 Web 服務(wù)。

可見下面的示例。

  • 為搜索引擎定義關(guān)鍵詞：

    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

  • 為網(wǎng)頁定義描述內(nèi)容：

    <meta name="description" content="Free Web tutorials on HTML and CSS">

  • 定義網(wǎng)頁作者：

    <meta name="author" content="Hege Refsnes">

  • 每 30 秒鐘刷新當(dāng)前頁面：

    <meta http-equiv="refresh" content="30">

CSS

CSS 可以通過以下方式添加到 HTML 中：

  • 內(nèi)聯(lián)樣式：在 HTML 元素中使用 style 屬性；
  • 內(nèi)部樣式表：在 HTML 文檔頭部 <head> 區(qū)域使用 <style> 元素來包含 CSS；
  • 外部引用：使用外部 CSS 文件。

最好的方式是通過外部引用 CSS 文件。

內(nèi)聯(lián)樣式

當(dāng)特殊的樣式需要應(yīng)用到個別元素時，就可以使用內(nèi)聯(lián)樣式。使用內(nèi)聯(lián)樣式的方法是在相關(guān)的標(biāo)簽中使用 style 屬性，可以包含任何 CSS 屬性。

以下示例顯示出如何改變段落的顏色和左外邊距：

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

內(nèi)部樣式表

當(dāng)單個文件需要特別樣式時，就可以使用內(nèi)部樣式表。在 <head> 部分通過 <style> 標(biāo)簽定義內(nèi)部樣式表：

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

        p {
            color: blue;
        }
    </style>
</head>

外部樣式表

當(dāng)樣式需要被應(yīng)用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，可以通過更改一個文件來改變整個站點(diǎn)的外觀。

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

圖像

使用 <img> 標(biāo)簽定義 HTML 頁面中的圖像。<img> 是空標(biāo)簽。意思是說，它只包含屬性，并且沒有閉合標(biāo)簽。

<img> 標(biāo)簽有兩個必需的屬性：src 和 alt。

定義圖像的語法是：

<img src="url" alt="some_text">

尺寸

height（高度）與 width（寬度）屬性用于設(shè)置圖像的高度與寬度。屬性值默認(rèn)單位為像素：

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

圖像標(biāo)簽

標(biāo)簽 描述
<img> 圖像
<map> 圖像地圖
<area> 圖像地圖中的可點(diǎn)擊區(qū)域 
<base >

…

<img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
    <area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
    <area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
    <area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">
</map>

表格

表格由 <table> 標(biāo)簽來定義。每個表格均有若干行（由 <tr> 標(biāo)簽定義），每行被分割為若干單元格（由 <td> 標(biāo)簽定義）。td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

HTML 表格的基本結(jié)構(gòu)：

  • <table>…</table>：定義表格；
  • <th>…</th>：定義表格的標(biāo)題欄（文字加粗）；
  • <tr>…</tr>：定義表格的行；
  • <td>…</td>：定義表格的列。
<table border="1">
    <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>

邊框

邊框由 border 屬性表示。如果不定義邊框?qū)傩?，表格將不顯示邊框。

表頭

表頭使用 <th> 標(biāo)簽進(jìn)行定義。

表頭屬性主要是一些公共屬性，如：align、dir、width、height。

多數(shù)瀏覽器會把表頭顯示為粗體居中的文本。

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</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>

表格標(biāo)簽

標(biāo)簽 描述 標(biāo)簽 描述
<table> 表格 <colgroup> 表格列的組
<th> 表格的表頭 <col> 用于表格列的屬性
<tr> 表格的行 <thead> 表格的頁眉
<td> 表格單元 <tbody> 表格的主體
<caption> 表格標(biāo)題 <tfoot> 表格的頁腳 
<h4>水平標(biāo)題：</h4>
<table border="1">
    <tr>
        <th>Name</th>
        <th>Telephone</th>
        <th>Telephone</th>
    </tr>
    <tr>
        <td>Bill Gates</td>
        <td>555 77 854</td>
        <td>555 77 855</td>
    </tr>
</table>

<h4>垂直標(biāo)題：</h4>
<table border="1">
    <tr>
        <th>First Name:</th>
        <td>Bill Gates</td>
    </tr>
    <tr>
        <th>Telephone:</th>
        <td>555 77 854</td>
    </tr>
    <tr>
        <th>Telephone:</th>
        <td>555 77 855</td>
    </tr>
</table>

<table border="1">
    <caption>Monthly savings</caption>
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>February</td>
        <td>$50</td>
    </tr>
</table>

<h4>單元格跨兩格：</h4>
<table border="1">
    <tr>
        <th>Name</th>
        <th colspan="2">Telephone</th>
    </tr>
    <tr>
        <td>Bill Gates</td>
        <td>555 77 854</td>
        <td>555 77 855</td>
    </tr>
</table>

<h4>單元格跨兩列：</h4>
<table border="1">
    <tr>
        <th>First Name</th>
        <td>Bill Gates</td>
    </tr>
    <tr>
        <th rowspan="2">Telephone</th>
        <td>555 77 854</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
</table>

<h4>沒有單元格邊距：</h4>
<table border="1">
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>

<h4>有單元格邊距：</h4>
<table border="1" cellpadding="10">
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>

<h4>沒有單元格間距：</h4>
<table border="1">
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>
<h4>單元格間距＝“0”：</h4>
<table border="1" cellspacing="0">
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>
<h4>單元格間距＝“10”:</h4>
<table border="1" cellspacing="10">
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>

列表

HTML 支持有序、無序和定義列表。

無序列表

無序列表使用 <ul> 標(biāo)簽，每個列表項使用 <li> 標(biāo)簽：

<ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>

有序列表

有序列表使用 <ol> 標(biāo)簽：

<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>

自定義列表

自定義列表不僅是一列項，而是項及其注釋的組合。

自定義列表以 <dl> 標(biāo)簽表示。每個自定義列表項以 <dt> 表示。每個自定義列表項的定義以 <dd> 表示。

自定義列表中的一個術(shù)語名可以對應(yīng)多重定義或者多個術(shù)語名對應(yīng)同一個定義，如果只有術(shù)語名或者只有定義也是可行的，也就是說 <dt> 與 <dd> 在其中數(shù)量不限、對應(yīng)關(guān)系不限。

<dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>

列表標(biāo)簽

標(biāo)簽 描述 標(biāo)簽 描述
<ol> 有序列表 <dl> 自定義列表
<ul> 無序列表 <dt> 自定義列表項
<li> 列表項 <dd> 自定義列表項的描述

區(qū)塊

HTML 可以通過 <div> 和 <span> 將元素組合起來。

區(qū)塊元素

大多數(shù) HTML 元素被定義為塊級元素或內(nèi)聯(lián)元素。

塊級元素在瀏覽器顯示時，通常會以新行來開始（和結(jié)束），如：<h1>、<p>、<ul>、<table>。

內(nèi)聯(lián)元素

內(nèi)聯(lián)元素在顯示時通常不會以新行開始，如：<b>、<td>、<a>、<img>。

div 元素

<div> 標(biāo)簽可以把文檔分割為獨(dú)立的、不同的部分。

<div> 元素是塊級元素，它是可用于組合其他 HTML 元素的容器。

<div> 元素沒有特定的含義。除此之外，由于它屬于塊級元素，瀏覽器會在其前后顯示折行。

如果與 CSS 一同使用，<div> 元素可用于對大的內(nèi)容塊設(shè)置樣式屬性。

<div> 元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進(jìn)行文檔布局不是表格的正確用法，<table> 元素的作用是顯示表格化的數(shù)據(jù)。

span 元素

<span> 元素是內(nèi)聯(lián)元素，可用作文本的容器

<span> 元素也沒有特定的含義。

當(dāng)與 CSS 一同使用時，<span> 元素可用于為部分文本設(shè)置樣式屬性。

布局

網(wǎng)站布局

多數(shù)網(wǎng)站會把內(nèi)容安排到多個列中（就像雜志或報紙那樣）。

多數(shù)網(wǎng)站可以使用 <div> 元素來創(chuàng)建多列。CSS 用于對元素進(jìn)行定位，或者為頁面創(chuàng)建背景以及色彩豐富的外觀。

使用 div 元素布局

div 元素是用于分組 HTML 元素的塊級元素。

下面的例子使用五個 div 元素來創(chuàng)建多列布局：

<!DOCTYPE html>
<html>

<body>

    <div id="container" style="width:800px">

        <div id="header" style="background-color:#FFA500;">
            <h1 style="margin-bottom:0;">Main Title of Web Page</h1>
        </div>

        <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
            <b>Menu</b>
            <br/> HTML
            <br/> CSS
            <br/> JavaScript
        </div>

        <div id="content" style="background-color:#EEEEEE;height:200px;width:700px;float:left;">
            Content goes here</div>

        <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
            Copyright ? example.com</div>

    </div>

</body>

</html>

表單

HTML 表單用于收集不同類型的用戶輸入。

表單是一個包含表單元素的區(qū)域。

表單元素允許用戶在表單中輸入內(nèi)容，比如：文本域（textarea）、下拉列表、單選框（radio buttons）、復(fù)選框（checkboxes）等等。

表單使用表單標(biāo)簽 <form> 來設(shè)置：

<form>
…
input elements
…
</form>

輸入元素

多數(shù)情況下用到的表單標(biāo)簽是輸入標(biāo)簽（<input>），它是最重要的表單元素。

輸入類型是由類型屬性（type）定義的。常用的輸入類型如下：

文本框

文本框通過 <input type="text"> 標(biāo)簽來設(shè)定。當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時，就會用到文本框。

<form>
    First name:
    <input type="text" name="firstname">
    <br/> Last name:
    <input type="text" name="lastname">
</form>

表單本身并不可見。同時，在大多數(shù)瀏覽器中，文本域的默認(rèn)寬度是 20 個字符。

密碼字段

密碼字段通過標(biāo)簽 <input type="password"> 來定義：

<form>
    Password:
    <input type="password" name="pwd">
</form>

密碼字段字符不會明文顯示，而是以星號或圓點(diǎn)替代。

單選按鈕

<input type="radio"> 標(biāo)簽定義了表單單選框選項。

<form>
    <input type="radio" name="sex" value="male">Male
    <br/>
    <input type="radio" name="sex" value="female">Female
</form>

復(fù)選框

<input type="checkbox"> 定義了復(fù)選框。用戶需要從若干給定的選擇中選取一個或若干選項。

<form>
    <input type="checkbox" name="vehicle" value="Bike">I have a bike
    <br>
    <input type="checkbox" name="vehicle" value="Car">I have a car
</form>

提交按鈕

<input type="submit"> 定義了提交按鈕。

當(dāng)用戶單擊確認(rèn)按鈕時，表單的內(nèi)容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。

<form name="input" action="html_form_action.php" method="get">
    Username:
    <input type="text" name="user">
    <input type="submit" value="Submit">
</form>

在該示例中，輸入數(shù)據(jù)會傳送到「html_form_action.php」頁面。該頁面將顯示出輸入的結(jié)果。

表單標(biāo)簽

標(biāo)簽 描述
<form> 供用戶輸入的表單
<input> 輸入域
<textarea> 文本域（一個多行的輸入控件）
<label> <input> 元素的標(biāo)簽，一般為輸入標(biāo)題
<fieldset> 一組相關(guān)的表單元素，并使用外框包含起來
<legend> <fieldset> 元素的標(biāo)題
<select> 下拉選項列表
<optgroup> 選項組
<option> 下拉列表中的選項
<button> 按鈕
<datalist> 預(yù)先定義的輸入控件選項列表
<keygen> 表單的密鑰對生成器字段
<output> 計算結(jié)果 
<form>
    <select name="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
    </select>
</form>

<form>
    <select name="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat" selected>Fiat</option>
        <option value="audi">Audi</option>
    </select>
</form>

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

<input type="button" value="Hello world!">

<form>
    <fieldset>
        <legend>Personal information:</legend>
        Name:
        <input type="text" size="30">
        <br/>E-mail:
        <input type="text" size="30">
        <br/>Date of birth:
        <input type="text" size="10">
    </fieldset>
</form>

<!-- 點(diǎn)擊提交按鈕，表單數(shù)據(jù)將被發(fā)送到服務(wù)器上的「demo-form.php」。-->
<form action="demo-form.php" method="post">
    First name:
    <input type="text" name="FirstName" value="Mickey">
    <br/>Last name:
    <input type="text" name="LastName" value="Mouse">
    <br/>
    <input type="submit" value="提交">
</form>

<form action="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="checked"> I have a car
    <br/>
    <input type="submit" value="提交">
</form>

<form action="demo-form.php" method="get">
    <input type="radio" name="sex" value="Male">Male
    <br/>
    <input type="radio" name="sex" value="Female" checked="checked">Female
    <br/>
    <input type="submit" value="提交">
</form>

<h3>Send e-mail to someone@example.com</h3>
<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
    Name:
    <br/>
    <input type="text" name="name" value="your name">
    <br/>E-mail:
    <br/>
    <input type="text" name="mail" value="your email">
    <br/>Comment:
    <br/>
    <input type="text" name="comment" value="your comment" size="50">
    <br/>
    <br/>send time:
    <br/>
    <select name=time>
        <option value="2015">2015</option>
        </br>
        <option value="2016">2016</option>
        </br>
        <option value="2017">2017</option>
        </br>
        <option value="2018" selected>2018</option>
        </br>
    </select>
    <br/>
    <input type="submit" value="Send">
    <input type="reset" value="Reset">
</form>

框架

<iframe> 標(biāo)簽規(guī)定一個內(nèi)聯(lián)框架，內(nèi)聯(lián)框架用來在當(dāng)前 HTML 文檔中嵌入另一個文檔。

通過使用框架，可以在同一個瀏覽器窗口中顯示不止一個頁面。

iframe 的語法格式為：

<iframe src="URL"></iframe>

設(shè)置尺寸

height 和 width 屬性用來定義 iframe 標(biāo)簽的高度與寬度。

屬性默認(rèn)以像素為單位，但是也可以指定其按比例顯示（如 80%）。

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

移除邊框

frameborder 屬性用于定義 iframe 表示是否顯示邊框。

設(shè)置屬性值為 0 移除 iframe 的邊框：

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

顯示目標(biāo)鏈接頁面

iframe 可以顯示一個目標(biāo)鏈接的頁面。目標(biāo)鏈接的屬性必須使用 iframe 的屬性，如下示例：

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p>
    <a  target="iframe_a">example</a>
</p>
<!-- 因為 a 標(biāo)簽的 target 屬性是名為 iframe_a 的 iframe 框架，所以在點(diǎn)擊鏈接時頁面會顯示在 iframe 框架中。-->

iframe 標(biāo)準(zhǔn)屬性

屬性 說明 屬性 說明
class 元素的類名 style 元素的行內(nèi)樣式
id 元素的唯一 id title 元素的額外信息

顏色

HTML 顏色采用的是 RGB 顏色，是通過對紅（R）、綠（G）、藍(lán)（B）三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的，RGB 即是代表紅、綠、藍(lán)三個通道的顏色。

HTML 顏色由一個十六進(jìn)制符號來定義，這個符號由紅色、綠色和藍(lán)色的值組成（RGB）。

每種顏色的最小值是 0（十六進(jìn)制 #000000），最大值是 255（十六進(jìn)制 #FFFFFF）。

腳本

JavaScript 是可插入 HTML 頁面的編程代碼，使 HTML 頁面具有更強(qiáng)的動態(tài)和交互性。

JavaScript 插入 HTML 頁面后，可由所有的現(xiàn)代瀏覽器執(zhí)行。

script 標(biāo)簽

<script> 標(biāo)簽用于定義客戶端腳本，比如 JavaScript。

<script> 元素既可包含腳本語句，也可通過 src 屬性指向外部腳本文件。

JavaScript 最常用于圖片操作、表單驗證以及內(nèi)容動態(tài)更新。

下面的腳本會向瀏覽器輸出 "Hello World!"：

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

如果使用 src 屬性，則 <script> 元素必須是空的。

noscript 標(biāo)簽

<noscript> 標(biāo)簽提供無法使用腳本時的替代內(nèi)容。如在瀏覽器禁用腳本時，或瀏覽器不支持客戶端腳本時。

<noscript> 元素可包含普通 HTML 頁面的 body 元素中能夠找到的所有元素。

只有在瀏覽器不支持腳本或者禁用腳本時，才會顯示 <noscript> 元素中的內(nèi)容：

<script>
    document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>

字符實體

HTML 中的預(yù)留字符必須被替換為字符實體。一些在鍵盤上找不到的字符也可以使用字符實體來替換。

實體

在 HTML 中，某些字符是預(yù)留的。不能使用包含這些字符的文本。

在 HTML 中不能使用小于號 < 和大于號 >，這是因為瀏覽器會誤認(rèn)為它們是標(biāo)簽。

如果希望正確地顯示預(yù)留字符，必須在 HTML 源代碼中使用字符實體。字符實體類似這樣：

&entity_name; 
或
&#entity_number;

如需顯示小于號，必須這樣寫：&lt; 或 &#60; 或 &#060;。

使用實體名而不是數(shù)字的好處是，名稱易于記憶。不過壞處是，瀏覽器也許并不支持所有實體名稱，對實體數(shù)字的支持卻很好。

不間斷空格

HTML 中的常用字符實體是不間斷空格。

瀏覽器總是會截短 HTML 頁面中的空格，只保留連續(xù)空格中的一個。如需在頁面中增加空格的數(shù)量，需要使用 &nbsp; 字符實體。

結(jié)合音標(biāo)符

發(fā)音符號是加到字母上的一個字形。

變音符號可以出現(xiàn)字母的上面和下面，或者字母里面，或者兩個字母間。

變音符號可以與字母、數(shù)字字符的組合來使用。

以下是一些示例：

音標(biāo)符 字符 格式 輸出結(jié)果
? a a&#768; a?
? a a&#769; a?
? a a&#770; a?
? a a&#771; a?
? O O&#768; O?
? O O&#769; O?
? O O&#770; O?
? O O&#771; O?

字符實體

顯示結(jié)果 描述 實體名稱 實體編號
空格 &nbsp; &#160;
< 小于號 &lt; &#60;
> 大于號 &gt; &#62;
& 和號 &amp; &#38;
" 雙引號 &quot; &#34;
' 單引號 &apos; &#39;
￠ 分 &cent; &#162;
￡ 鎊 &pound; &#163;
￥ 人民幣／日元 &yen; &#165;
€ 歐元 &euro; &#8364;
§ 小節(jié) &sect; &#167;
? 版權(quán) &copy; &#169;
? 注冊商標(biāo) &reg; &#174;
? 商標(biāo) &trade; &#8482;
× 乘號 &times; &#215;
÷ 除號 &divide; &#247;

URL

網(wǎng)址的語法規(guī)則：

scheme://host.domain:port/path/filename
  • scheme：因特網(wǎng)服務(wù)的類型。最常見的類型是 http；
  • host：域主機(jī)。http 的默認(rèn)主機(jī)是 www；
  • domain：因特網(wǎng)域名，比如 bing.com；
  • port：主機(jī)上的端口號。http 的默認(rèn)端口號是 80；
  • path：服務(wù)器上的路徑。如果省略，則文檔必須位于網(wǎng)站的根目錄中；
  • filename：文檔、資源的名稱。

常見的 URL scheme

scheme 訪問 用于
http 超文本傳輸協(xié)議 以 http:// 開頭的普通網(wǎng)頁。不加密
https 超文本傳輸安全協(xié)議 安全網(wǎng)頁，加密所有信息交換
ftp 文件傳輸協(xié)議 用于將文件下載或上傳至網(wǎng)站
file 當(dāng)前計算機(jī)上的文件

字符編碼

URL 只能使用 ASCII 字符集。

URL 編碼會將字符轉(zhuǎn)換為可通過因特網(wǎng)傳輸?shù)母袷剑瑏硗ㄟ^因特網(wǎng)進(jìn)行發(fā)送。由于 URL 常常會包含 ASCII 集合之外的字符，URL 必須轉(zhuǎn)換為有效的 ASCII 格式。

URL 編碼使用 % 其后跟隨兩位的十六進(jìn)制數(shù)來替換非 ASCII 字符。

URL 不能包含空格。URL 編碼通常使用 + 來替換空格。

多媒體

Web 上的多媒體指的是音效、音樂、視頻和動畫。

現(xiàn)代網(wǎng)絡(luò)瀏覽器已支持很多多媒體格式。

HTML 多媒體標(biāo)簽

標(biāo)簽 描述
<embed> 內(nèi)嵌對象。HTML4 中不贊成，HTML5 中允許
<object> 內(nèi)嵌對象
<param> 對象的參數(shù)
<audio> 聲音內(nèi)容
<video> 視頻或影片
<source> media 元素的多媒體資源 (<video> 和 <audio>)
<track> media 元素的字幕文件或其他包含文本的文件 (<video> 和 < audio>)

音頻

使用 HTML5 audio 元素

可使用 HTML5 中的 <audio> 元素來加入音頻。

下面的示例使用 <audio> 標(biāo)簽來描述 MP3 文件，同樣添加了一個 OGG 類型文件。如果失敗，它會顯示一個錯誤文本信息：

<audio controls>
    <source src="horse.mp3" type="audio/mpeg">
    <source src="horse.ogg" type="audio/ogg"> Your browser does not support this audio format.
</audio>

兼容性更佳的方案

下面的例子使用了兩個不同的音頻格式。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>

視頻

使用 HTML5 video 元素

HTML5 <video> 標(biāo)簽定義了一個視頻或者影片。<video> 元素在所有現(xiàn)代瀏覽器中都支持。

以下 HTML 片段會顯示一段嵌入網(wǎng)頁的 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>

兼容性更佳的方案

以下實例中使用了 4 種不同的視頻格式。HTML5 <video> 元素會嘗試播放以 mp4、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>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,165評論 1贊 92
  • HMTL初識 HTML（英文Hyper Text Markup Language的縮寫）中文譯為“超文本標(biāo)簽語言”...
    小青年coder閱讀 2,447評論 0贊 1
  • 前言 本系列文章主要是基于W3school這個學(xué)習(xí)網(wǎng)站來總結(jié)的，之所以會自己總結(jié)一番，一來是因為網(wǎng)站中的實例效果，...
    碼字與律動閱讀 4,296評論 4贊 70
  • 超文本標(biāo)記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)...
    獨(dú)木舟的木閱讀 1,184評論 0贊 2
  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽：!DOCTYPE 說明：指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,531評論 1贊 41

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