HTML標籤

HTML實例

<html>
<body>
  ...
</body>
</html>

<html> 與 </html> 之間的文本描述網頁
<body> 與 </body> 之間的文本是可見的頁面內容

標題

1.通過<h1>-<h6>進行定義

<h1> This is the heading 1</h1>

2.屬性

align：表示對齊方式

段落

通過<p>來定義

<p> This is a paragraph. </p>

鏈接

href 屬性，指定鏈接的地址

<a href="https://www.baidu.com">百度一下</a>

targe 屬性，定義被鏈接的文檔在何處顯示：target="_blank"則將鏈接在新窗口中打開

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

name 屬性，規定錨的名稱，創建html頁面中的書籤（實現頁面內跳轉），書籤對讀者是不可見的。使用id屬性來代替 name 屬性命名錨同樣有效。假如瀏覽器找不到已定義的命名錨，那麼就會定位到文檔的頂端。不會有錯誤發生。

<a name="tips">基本的注意事項</a>
<!-- 在同一文檔中創建指向該錨的鏈接：點擊“有用的提示”可以跳轉到“基本的注意事項” -->
<a href="#tips">有用的提示</a>
<!-- 在其他頁面中創建指向該錨的鏈接 -->
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

圖像

通過 <img> 來定義，圖像的名稱和尺寸是以屬性的形式提供的

src屬性：源屬性，用來指定圖像的 URL 地址
alt屬性：替換文本屬性，當圖像無法載入時候，替換文本屬性告訴讀者圖片表示的信息

<img src="w3school.jpg" width="120" htight="120" />

空HTML元素

<br /> 表示空的標籤，換行

水平線

用 <hr /> 在html頁面中創建水平線

<p> Paragraph 1 </p>
<hr />
<p> Paragraph 2 </p>

註釋

<!-- 這是註釋 -->

文本格式化

<b>：表示加粗bold
<strong>：表示加粗
<big>：表示增大
<em>：表示強調emphasized
<i>：表示斜體italic
<small>：表示變小
<sub>：表示下標
<sup>：表示上標
<pre>：保存<pre>和</pre>之間所有格式：空格和換行
<code>：計算機代碼
<kbd>：鍵盤輸入
<samp>：例子文本
<var>：計算機變量
<tt>：TeleType文本
<address>：表示地址
<abbr>：鼠標移到該內容上可以顯示屬性title的內容：<abbr title="etcetera">etc.</abbr>
<acronym>：如<abbr>
<bdo>：如果瀏覽器支持 bi-directional override (bdo)，下一行會從右向左輸出
<blockquote>：塊引用，瀏覽器會插入換行和外邊距
<q>：段引用，瀏覽器不插入換行和外邊距
<del>：刪除文本
<ins>：下劃線文本

樣式

樣式能夠對文檔進行格式化，有三種方式插入樣式表：

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

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

內部樣式表：當單個文件需要特別樣式時，就可以使用內部樣式表。你可以在 head 部分通過<style>標籤定義內部樣式表。

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

內聯樣式表：當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。使用內聯樣式的方法是在相關的標籤中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實例顯示出如何改變段落的顏色和左外邊距。

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

`<style>`標籤

<style>用於爲 HTML 文檔定義樣式信息。其中type 屬性是必需的，定義 style 元素的內容，唯一可能的值是”text/css”，style元素位於head部分中

<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>

<body>
<h1>Header 1</h1>
<p>A paragraph.</p>
</body>
</html>

`<link>`標籤

最常用的用途是鏈接樣式表

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

`<div>`標籤

定義文檔中的節或區域/塊級（division/section），可以把文檔分割爲獨立的、不同的部分，用作嚴格的組織工具。

<div>是一個塊級元素，其中的內容自動地開始一個新行，可以通過<div>的class或id應用額外的樣式，其中class用於元素組（類似的元素，或者可以理解爲某一類元素），而id用於標識單獨的唯一的元素。

<body>

 <h1>NEWS WEBSITE</h1>
  <p>some text. some text. some text...</p>

 <div class="news">
  <h2>News headline 1</h2>
  <p>some text. some text. some text...</p>
 </div>

 <div class="news">
  <h2>News headline 2</h2>
  <p>some text. some text. some text...</p>
 </div>

</body>

`<span>`標籤

定義文檔中的行內的小塊或區域，用來組合行內元素

<p><span>some text.</span>some other text.</p>

如果不對 span 應用樣式，那麼 span 元素中的文本與其他文本不會任何視覺上的差異。儘管如此，上例中的 span 元素仍然爲 p 元素增加了額外的結構。

可以爲 span 應用 id 或 class 屬性，這樣既可以增加適當的語義，又便於對 span 應用樣式。
可以對同一個元素應用 class 或 id 屬性，但是更常見的情況是隻應用其中一種。這兩者的主要差異是，class 用於元素組（類似的元素，或者可以理解爲某一類元素），而 id 用於標識單獨的唯一的元素。

表格

表格由 <table> 標籤來定義。每個表格均有若干行（由 <tr> 標籤定義），每行被分割爲若干單元格（由 <td> 標籤定義）。字母 td 指表格數據（table data），即數據單元格的內容。

<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>

表格的表頭使用 <th> 標籤進行定義：

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
</table>

空格佔位符

 

列表

無序列表：無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。無序列表始於 <ul> 標籤，每個列表項始於 <li>。

<ul>
<li>無序列表項1</li>
<li>無序列表項2</li>
</ul>

有序列表：類似與無序列表，但列表項目使用數字進行標記。有序列表始於 <ol> 標籤，每個列表項始於 <li> 標籤。

<ol>
<li>有序列表項1</li>
<li>有序列表項2</li>
</ol>

定義列表：不僅僅是一列項目，而是項目及其註釋的組合。自定義列表以 <dl> 標籤開始，每個自定義列表項以 <dt> 開始，每個自定義列表項的定義以 <dd> 開始。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

表單

允許用戶在表單中（比如文本域、單選框、複選框等）輸入信息的元素，使用 <form> 定義。

輸入：<input>，輸入類型由類型屬性type定義的；

文本域：<input type="text" name="name" />
單選按鈕：<input type="radio" name="sex" value="male" />Male<br/>
複選框：<input type="checkbox" name="reading" /> Reading<br/>
確定按鈕：<input type="submit" value="Submit" />
普通按鈕： <input type="button" value=”Cancel" />

form表單屬性：

action屬性：點擊確定按鈕（submit）之後，表單的內容能夠被傳送到action指定的文件中，action制定的文件通常會對接收到的表單數據進行相關的處理：<form name="input" aciton="html_form_action.asp" method="get">
method屬性：指定submit通過哪種方式發送：post/get

其他子項：

下拉菜單：

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

文本框：

<textarea rows="10" cols="30">Hello world.

框架

垂直框架：horizontal

<frameset cols="25%, 50%, 25%>
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
<frameset>

水平框架：vertical

<frameset rows="25%, 50%, 25%>
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
<frameset>

內聯框架

用於在網頁中顯示網頁，使用<iframe>框架

<iframe src="demo_iframe.html" width="200" height="200"></iframe>
<iframe src="https://www.baidu.com" width="200" height="200"></iframe>

去除邊框：

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

iframe作爲鏈接的目標：

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

背景

bgcolor：設置背景屬性顏色

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

background：設置背景圖像，或者爲背景圖像的URL

<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">

`<!DOCTYPE>` 標籤

HTML 也有多個不同的版本，只有完全明白頁面中使用的確切 HTML 版本，瀏覽器才能完全正確地顯示出 HTML 頁面。這就是 <!DOCTYPE> 的用處。

不是 HTML 標籤。它爲瀏覽器提供一項信息（聲明），即 HTML 是用什麼版本編寫的。

HTML頭部元素

頭部元素<head>中元素：<head> 元素是所有頭部元素的容器。<head> 內的元素可包含腳本，指示瀏覽器在何處可以找到樣式表，提供元信息等等，以下標籤都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

<title>，它定義瀏覽器工具欄中的標題，提供頁面被添加到收藏夾時顯示的標題以及顯示在搜索引擎結果中的頁面標題

<title>標題</title>

<base>，它爲頁面上的所有鏈接規定默認地址或默認目標（target）

<base target="_blank" />

<meta>：元數據（metadata）是關於數據的信息，籤提供關於 HTML 文檔的元數據，元數據不會顯示在頁面上，但是對於機器是可讀的。典型的情況是，meta 元素被用於規定頁面的描述、關鍵詞、文檔的作者、最後修改時間以及其他元數據。

<meta name="author" content="w3school.com.cn">

<link>，定義文檔與外部資源之間的關係，常用於鏈接樣式表。

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

<style>：爲 HTML 文檔定義樣式信息。

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

`<meta>`標籤

元數據總是以名稱/值的形式被成對傳遞的。

name屬性：name 屬性提供了名稱/值對中的名稱，”keywords” 是一個經常被用到的名稱。它爲文檔定義了一組關鍵字。某些搜索引擎在遇到這些關鍵字時，會用這些關鍵字對文檔進行分類。

<meta name="keywords" content="HTML,ASP,PHP,SQL">

http-equiv 屬性：當服務器向瀏覽器發送文檔時，會先發送許多名稱/值對。雖然有些服務器會發送許多這種名稱/值對，但是所有服務器都至少要發送一個：content-type:text/html。這將告訴瀏覽器準備接受一個 HTML 文檔。使用帶有 http-equiv 屬性的 <meta> 標籤時，服務器將把名稱/值對添加到發送給瀏覽器的內容頭部。

<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">

content 屬性：content 屬性提供了名稱/值對中的值，content 屬性始終要和 name 屬性或 http-equiv 屬性一起使用。
scheme 屬性：用於指定要用來翻譯屬性值的方案。此方案應該在由標籤的 profile 屬性指定的概況文件中進行了定義。

HTML腳本

<script>：該標籤定義客戶端腳本，比如javascript，script元素既可以包含腳本語句，也可以通過src屬性指向外部腳本文件，必須的type屬性規定腳本的MIME類型。

<script type="text/javascript">
document.write("Hello World!")
</script>

<noscript>：<noscript> 標籤提供無法使用腳本時的替代內容，比方在瀏覽器禁用腳本時，或瀏覽器不支持客戶端腳本時。noscript 元素可包含普通 HTML 頁面的 body 元素中能夠找到的所有元素。只有在瀏覽器不支持腳本或者禁用腳本時，纔會顯示 noscript 元素中的內容：

<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

HTML字符實體

html實體

yao偉斌

發佈了97 篇原創文章 · 獲贊 40 · 訪問量 53萬+

私信關注

HTML標籤

HTML標籤

HTML實例

標題

段落

鏈接

圖像

空HTML元素

水平線

註釋

文本格式化

樣式

<style>標籤

<link>標籤

<div>標籤

<span>標籤

表格

空格佔位符

列表

表單

框架

內聯框架

背景

<!DOCTYPE> 標籤

HTML頭部元素

<meta>標籤

HTML腳本

HTML字符實體

`<style>`標籤

`<link>`標籤

`<div>`標籤

`<span>`標籤

`<!DOCTYPE>` 標籤

`<meta>`標籤