HTML 筆記

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

簡介

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

<!DOCTYPE html>
<html>

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

<body>

    <h1>第一個標題</h1>
    <p>第一個段落卑惜。</p>

</body>

</html>

上述示例中膏执，

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

元素

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

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

空元素

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

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

空元素應當在開始標簽中關(guān)閉户盯，方法是在開始標簽中添加斜杠嵌施，比如 <br/>。

標題

標題（heading）是通過 <h1>～<h6> 標簽進行定義的莽鸭。<h1> 定義最大的標題吗伤，<h6> 定義最小的標題。

瀏覽器會自動地在標題的前后添加空行硫眨。

默認情況下足淆，HTML 會自動地在塊級元素前后添加一個額外的空行，比如段落礁阁、標題元素前后巧号。

水平線

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

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

<h1>標題</h1>
<hr/>
<p>段落。</p>

注釋

注釋的寫法如下：

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

段落

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

折行

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

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

省略空白符

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

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

文本格式化

HTML 中存在一些格式化文本的標簽疼电。如：

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

文本格式化標簽

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

通常使用標簽 <strong> 替換加粗標簽 <b>嚼锄， <em> 替換 <i> 標簽。然而蔽豺，它們的含義是不同的：

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

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

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

“計算機輸出”標簽

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

引文沧侥、引用及標簽定義

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

在某些瀏覽器中魄鸦，當把鼠標移至縮略詞語上時宴杀，title 可用于展示表達的完整版本。

<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 使用標簽 <a> 來設(shè)置超文本鏈接旺罢，可以從一個頁面指向另一個目的端的鏈接旷余。

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

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

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

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

target 屬性

使用 target 屬性惠遏，可以定義被鏈接的文檔在何處顯示：在新窗口打開砾跃，還是在當前窗口打開。

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

<a  target="_blank">必應搜索</a>

默認的被鏈接文檔會在當前窗口中打開节吮。如果將 target 屬性設(shè)置為 _blank 則就會在新窗口打開计维。

id 屬性

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

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

  • 在 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> 元素包含了所有的頭部標簽元素空免。在 <head > 元素中可以插入腳本（scripts）顽染、樣式文件（CSS）、及各種 meta 信息狸臣。

可以添加在頭部區(qū)域的元素標簽為：<title>莹桅、<style>、<meta>烛亦、<link>诈泼、<script>、<noscript> 和 <base>煤禽。

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

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

base 元素

<base> 標簽描述了基本的鏈接地址／鏈接目標瓮孙，該標簽作為 HTML 文檔中所有的鏈接標簽的默認鏈接：

<base  target="_blank">

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

link 元素

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

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

style 元素

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

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

meta 元素

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

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

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

可見下面的示例。

  • 為搜索引擎定義關(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 秒鐘刷新當前頁面：

    <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)樣式

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

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

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

內(nèi)部樣式表

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

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

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

外部樣式表

當樣式需要被應用到很多頁面的時候儒陨，外部樣式表將是理想的選擇。使用外部樣式表笋籽，可以通過更改一個文件來改變整個站點的外觀蹦漠。

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

圖像

使用 <img> 標簽定義 HTML 頁面中的圖像。<img> 是空標簽车海。意思是說笛园，它只包含屬性，并且沒有閉合標簽容劳。

<img> 標簽有兩個必需的屬性：src 和 alt喘沿。

定義圖像的語法是：

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

尺寸

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

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

圖像標簽

標簽 描述
<img> 圖像
<map> 圖像地圖
<area> 圖像地圖中的可點擊區(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> 標簽來定義竭贩。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）莺禁。td 指表格數(shù)據(jù)（table data）留量，即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本哟冬、圖片楼熄、列表、段落浩峡、表單可岂、水平線、表格等等翰灾。

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

  • <table>…</table>：定義表格缕粹；
  • <th>…</th>：定義表格的標題欄（文字加粗）稚茅；
  • <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> 標簽進行定義欺税。

表頭屬性主要是一些公共屬性，如：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>

表格標簽

標簽 描述 標簽 描述
<table> 表格 <colgroup> 表格列的組
<th> 表格的表頭 <col> 用于表格列的屬性
<tr> 表格的行 <thead> 表格的頁眉
<td> 表格單元 <tbody> 表格的主體
<caption> 表格標題 <tfoot> 表格的頁腳 
<h4>水平標題：</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>垂直標題：</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> 標簽哲银，每個列表項使用 <li> 標簽：

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

有序列表

有序列表使用 <ol> 標簽：

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

自定義列表

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

自定義列表以 <dl> 標簽表示荆责。每個自定義列表項以 <dt> 表示。每個自定義列表項的定義以 <dd> 表示亚脆。

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

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

列表標簽

標簽 描述 標簽 描述
<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> 標簽可以把文檔分割為獨立的绞旅、不同的部分摆尝。

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

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

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

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

span 元素

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

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

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

布局

網(wǎng)站布局

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

多數(shù)網(wǎng)站可以使用 <div> 元素來創(chuàng)建多列苹支。CSS 用于對元素進行定位，或者為頁面創(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）、復選框（checkboxes）等等郁油。

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

<form>
…
input elements
…
</form>

輸入元素

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

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

文本框

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

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

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

密碼字段

密碼字段通過標簽 <input type="password"> 來定義：

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

密碼字段字符不會明文顯示，而是以星號或圓點替代博助。

單選按鈕

<input type="radio"> 標簽定義了表單單選框選項险污。

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

復選框

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

<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"> 定義了提交按鈕蛔糯。

當用戶單擊確認按鈕時，表單的內(nèi)容會被傳送到另一個文件窖式。表單的動作屬性定義了目的文件的文件名渤闷。由動作屬性定義的這個文件通常會對接收到的輸入數(shù)據(jù)進行相關(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é)果。

表單標簽

標簽 描述
<form> 供用戶輸入的表單
<input> 輸入域
<textarea> 文本域（一個多行的輸入控件）
<label> <input> 元素的標簽蜒灰，一般為輸入標題
<fieldset> 一組相關(guān)的表單元素弦蹂，并使用外框包含起來
<legend> <fieldset> 元素的標題
<select> 下拉選項列表
<optgroup> 選項組
<option> 下拉列表中的選項
<button> 按鈕
<datalist> 預先定義的輸入控件選項列表
<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>

<!-- 點擊提交按鈕强窖，表單數(shù)據(jù)將被發(fā)送到服務器上的「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> 標簽規(guī)定一個內(nèi)聯(lián)框架，內(nèi)聯(lián)框架用來在當前 HTML 文檔中嵌入另一個文檔翅溺。

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

iframe 的語法格式為：

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

設(shè)置尺寸

height 和 width 屬性用來定義 iframe 標簽的高度與寬度咙崎。

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

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

移除邊框

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

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

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

顯示目標鏈接頁面

iframe 可以顯示一個目標鏈接的頁面网杆。目標鏈接的屬性必須使用 iframe 的屬性，如下示例：

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

iframe 標準屬性

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

顏色

HTML 顏色采用的是 RGB 顏色队秩，是通過對紅（R）、綠（G）昼浦、藍（B）三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的馍资，RGB 即是代表紅、綠关噪、藍三個通道的顏色鸟蟹。

HTML 顏色由一個十六進制符號來定義，這個符號由紅色色洞、綠色和藍色的值組成（RGB）戏锹。

每種顏色的最小值是 0（十六進制 #000000），最大值是 255（十六進制 #FFFFFF）火诸。

腳本

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

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

script 標簽

<script> 標簽用于定義客戶端腳本，比如 JavaScript盯荤。

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

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

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

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

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

noscript 標簽

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

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

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

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

字符實體

HTML 中的預留字符必須被替換為字符實體涩咖。一些在鍵盤上找不到的字符也可以使用字符實體來替換海诲。

實體

在 HTML 中，某些字符是預留的檩互。不能使用包含這些字符的文本特幔。

在 HTML 中不能使用小于號 < 和大于號 >，這是因為瀏覽器會誤認為它們是標簽盾似。

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

&entity_name; 
或
&#entity_number;

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

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

不間斷空格

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

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

結(jié)合音標符

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

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

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

以下是一些示例：

音標符 字符 格式 輸出結(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;
? 注冊商標 &reg; &#174;
? 商標 &trade; &#8482;
× 乘號 &times; &#215;
÷ 除號 &divide; &#247;

URL

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

scheme://host.domain:port/path/filename
  • scheme：因特網(wǎng)服務的類型退敦。最常見的類型是 http粘咖；
  • host：域主機。http 的默認主機是 www侈百；
  • domain：因特網(wǎng)域名瓮下，比如 bing.com；
  • port：主機上的端口號钝域。http 的默認端口號是 80讽坏；
  • path：服務器上的路徑。如果省略网梢，則文檔必須位于網(wǎng)站的根目錄中震缭；
  • filename：文檔、資源的名稱战虏。

常見的 URL scheme

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

字符編碼

URL 只能使用 ASCII 字符集烦感。

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

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

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

多媒體

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

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

HTML 多媒體標簽

標簽 描述
<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> 標簽來描述 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> 標簽定義了一個視頻或者影片。<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)系作者
  • 人面猴
    序言：七十年代末父晶，一起剝皮案震驚了整個濱河市哮缺，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌甲喝，老刑警劉巖尝苇，帶你破解...
    沈念sama閱讀 206,311評論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異埠胖，居然都是意外死亡糠溜，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門直撤，熙熙樓的掌柜王于貴愁眉苦臉地迎上來非竿，“玉大人，你說我怎么就攤上這事谋竖『熘” “怎么了？”我有些...
    開封第一講書人閱讀 152,671評論 0贊 342
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵蓖乘，是天一觀的道長锤悄。 經(jīng)常有香客問我，道長嘉抒，這世上最難降的妖魔是什么零聚？ 我笑而不...
    開封第一講書人閱讀 55,252評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮众眨，結(jié)果婚禮上握牧，老公的妹妹穿的比我還像新娘。我一直安慰自己娩梨，他們只是感情好沿腰，可當我...
    茶點故事閱讀 64,253評論 5贊 371
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著狈定，像睡著了一般颂龙。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上纽什，一...
    開封第一講書人閱讀 49,031評論 1贊 285
  • 城市分裂傳說
    那天扔涧，我揣著相機與錄音昭躺，去河邊找鬼厉亏。 笑死价捧，一個胖子當著我的面吹牛，可吹牛的內(nèi)容都是我干的让蕾。 我是一名探鬼主播浪规，決...
    沈念sama閱讀 38,340評論 3贊 399
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼或听，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了笋婿？” 一聲冷哼從身側(cè)響起誉裆，我...
    開封第一講書人閱讀 36,973評論 0贊 259
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎缸濒，沒想到半個月后足丢，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 43,466評論 1贊 300
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡庇配，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,937評論 2贊 323
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年斩跌，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片讨永。...
    茶點故事閱讀 38,039評論 1贊 333
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡滔驶，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出卿闹，到底是詐尸還是另有隱情，我是刑警寧澤萝快，帶...
    沈念sama閱讀 33,701評論 4贊 323
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布锻霎，位于F島的核電站，受9級特大地震影響揪漩，放射性物質(zhì)發(fā)生泄漏旋恼。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 39,254評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一奄容、第九天 我趴在偏房一處隱蔽的房頂上張望冰更。 院中可真熱鬧，春花似錦昂勒、人聲如沸蜀细。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0贊 19
  • 一樁弒父案戈盈，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽奠衔。三九已至，卻和暖如春塘娶，著一層夾襖步出監(jiān)牢的瞬間归斤，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1贊 262
  • 情欲美人皮
    我被黑心中介騙來泰國打工刁岸， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留脏里，地道東北人。 一個月前我還...
    沈念sama閱讀 45,497評論 2贊 354
  • 代替公主和親
    正文 我出身青樓虹曙，卻偏偏與公主長得像迫横，于是被迫代替她去往敵國和親鸦难。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 42,786評論 2贊 345

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案员淫？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,728評論 1贊 92
  • HMTL初識 HTML（英文Hyper Text Markup Language的縮寫）中文譯為“超文本標簽語言”...
    小青年coder閱讀 2,327評論 0贊 1
  • 前言 本系列文章主要是基于W3school這個學習網(wǎng)站來總結(jié)的合蔽，之所以會自己總結(jié)一番，一來是因為網(wǎng)站中的實例效果介返，...
    AR7_閱讀 4,042評論 4贊 70
  • 超文本標記語言（英語：HyperText Markup Language拴事，簡稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標準...
    獨木舟的木閱讀 959評論 0贊 2
  • HTML標簽解釋大全 一、HTML標記 標簽：!DOCTYPE 說明：指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,224評論 1贊 41