html基礎知識（總結自www.runoob.com）

時間 2019-11-18

標籤 html 基礎知識總結 www.runoob.com www runoob com 欄目 HTML 简体版

原文原文鏈接

HTML屬性php

屬性css	描述html
class編程	爲html元素定義一個或多個類名（classname）(類名從樣式文件引入)瀏覽器
id服務器	定義元素的惟一id框架
styledom	規定元素的行內樣式（inline style）工具
title佈局	描述了元素的額外信息 (做爲工具條使用)

HTML <head> 元素

<head> 元素包含了全部的頭部標籤元素。在 <head>元素中你能夠插入腳本（scripts）, 樣式文件（CSS），及各類meta信息。

能夠添加在頭部區域的元素標籤爲: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

HTML <title> 元素

<title> 標籤訂義了不一樣文檔的標題。

<title> 在 HTML/XHTML 文檔中是必須的。

<title> 元素:

定義了瀏覽器工具欄的標題

當網頁添加到收藏夾時，顯示在收藏夾中的標題

顯示在搜索引擎結果頁面的標題

HTML <base> 元素

<base> 標籤描述了基本的連接地址/連接目標，該標籤做爲HTML文檔中全部的連接標籤的默認連接:

eg:

<head>

</head>

HTML <link> 元素

eg:

<head>

</head>

HTML <style> 元素

在<style> 元素中你也能夠直接添加樣式來渲染 HTML 文檔:

<head>

body {/style>

</head>

HTML <meta> 元素

meta標籤描述了一些基本的元數據。

META 元素一般用於指定網頁的描述，關鍵詞，文件的最後修改時間，做者，和其餘元數據。

元數據可使用於瀏覽器（如何顯示內容或從新加載頁面），搜索引擎（關鍵詞），或其餘Web服務。

爲搜索引擎定義關鍵詞:

爲網頁定義描述內容:

定義網頁做者:

每30秒鐘刷新當前頁面:

HTML head 元素

標籤描述

<head> 定義了文檔的信息

<title> 定義了文檔的標題

<base> 定義了頁面連接標籤的默認連接地址

html圖像-圖像標籤<img>

<img> 是空標籤，意思是說，它只包含屬性，而且沒有閉合標籤。

要在頁面上顯示圖像，你須要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。

定義圖像的語法是：

HTML 圖像- Alt屬性

alt 屬性用來爲圖像定義一串預備的可替換的文本。

替換文本屬性的值是用戶定義的。

在瀏覽器沒法載入圖像時，替換文本屬性告訴讀者他們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。爲頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助於更好的顯示信息，而且對於那些使用純文本瀏覽器的人來講是很是有用的。

HTML 圖像- 設置圖像的高度與寬度

height（高度）與 width（寬度）屬性用於設置圖像的高度與寬度。

屬性值默認單位爲像素:

提示: 指定圖像的高度和寬度是一個很好的習慣。若是圖像指定了高度寬度，頁面加載時就會保留指定的尺寸。若是沒有指定圖片的大小，加載頁面時有可能會破壞HTML頁面的總體佈局。

HTML 圖像標籤

標籤描述

<img> 定義圖像

<map> 定義圖像地圖

<area> 定義圖像地圖中的可點擊區域

一、矩形：(左上角頂點座標爲(x1,y1)，右下角頂點座標爲(x2,y2))

二、圓形：(圓心座標爲(X1,y1)，半徑爲r)

三、多邊形：(各頂點座標依次爲(x1,y1)、(x2,y2)、(x3,y3) ......)

HTML 表格

表格由 <table> 標籤來定義。每一個表格均有若干行（由 <tr> 標籤訂義），每行被分割爲若干單元格（由 <td> 標籤訂義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格能夠包含文本、圖片、列表、段落、表單、水平線、表格等等。

eg:

（水平標題）

<tr>

<th>Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

</tr>

（垂直標題）

<tr>

<th>First Name:</th>

<td>Bill Gates</td>

</tr>

<tr>

<th>Telephone:</th>

</tr>

<tr>

<th>Telephone:</th>

</tr>

帶標題

<caption>Monthly savings</caption>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

單元格跨兩格（標題）

<th colspan="2">Telephone</th>

定義邊框的寬度

定義單元格邊距

定義單元格間距

HTML 表格標籤

標籤描述

<table> 定義表格

<th> 定義表格的表頭

<tr> 定義表格的行

<td> 定義表格單元

<caption> 定義表格標題

<colgroup> 定義表格列的組

<col> 定義用於表格列的屬性

<thead> 定義表格的頁眉

<tbody> 定義表格的主體

<tfoot> 定義表格的頁腳

HTML無序列表

無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。

無序列表使用 <ul> 標籤

<ul>

<li>Coffee</li>

</ul>

HTML 有序列表

一樣，有序列表也是一列項目，列表項目使用數字進行標記。有序列表始於 <ol> 標籤。每一個列表項始於 <li> 標籤。

列表項使用數字來標記。

<ol>

<li>Coffee</li>

</ol>

<li>Coffee</li>

</ol>

HTML 自定義列表

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

自定義列表以 <dl> 標籤開始。每一個自定義列表項以 <dt> 開始。每一個自定義列表項的定義以 <dd> 開始。

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dd>- white cold drink</dd>

</dl>

<h4>大寫字母列表：</h4>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

大寫字母列表：

A. Apples

B. Bananas

C.Lemons

D. Oranges

<h4>羅馬數字列表：</h4>

羅馬數字列表：

I.Apples

II.Bananas

III.Lemons

IV.Oranges

HTML 佈局 - 使用<div> 元素

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

HTML 表單

表單是一個包含表單元素的區域。

表單元素是容許用戶在表單中輸入內容,好比：文本域(textarea)、下拉列表、單選框(radio-buttons)、複選框(checkboxes)等等。

表單使用表單標籤 <form> 來設置:

<form>

input 元素

</form>

例子：

Username: <input type="text" name="user"><br>

Password: <input type="password" name="password">

</form>

HTML 表單 - 輸入元素

多數狀況下被用到的表單標籤是輸入標籤（<input>）。

輸入類型是由類型屬性（type）定義的。大多數常常被用到的輸入類型以下：

文本域（Text Fields）

文本域經過<input type="text"> 標籤來設定，當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域。

密碼字段

密碼字段經過標籤<input type="password"> 來定義:

<form>

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

</form>

單選按鈕（Radio Buttons）

<input type="radio"> 標籤訂義了表單單選框選項

<form>

<input type="radio" name="sex" value="female">Female

</form>

複選框（Checkboxes）

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

<form>

<input type="checkbox" name="vehicle" value="Car">I have a car

</form>

提交按鈕(Submit Button)

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

當用戶單擊確認按鈕時，表單的內容會被傳送到另外一個文件。表單的動做屬性定義了目的文件的文件名。由動做屬性定義的這個文件一般會對接收到的輸入數據進行相關的處理。:

Username: <input type="text" name="user">

</form>

簡單的下拉列表。

<option value="volvo">Volvo</option>

</select>

</form>

帶預選的下拉列表

按鈕

</form>

文本框

我是一個文本框。

</textarea>

提交

First name: <input type="text" name="FirstName" value="Mickey"><br>

Last name: <input type="text" name="LastName" value="Mouse"><br>

</form>

<p>點擊"提交"按鈕，表單數據將被髮送到服務器上的「demo-form.php」。</p>

HTML 框架

經過使用框架，你能夠在同一個瀏覽器窗口中顯示不止一個頁面。

iframe語法:

該URL指向不一樣的網頁。

Iframe - 設置高度與寬度

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

屬性默認以像素爲單位, 可是你能夠指定其按比例顯示 (如："80%")。

實例

Iframe - 移除邊框

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

設置屬性值爲 "0" 移除iframe的邊框:

實例

HTML 腳本

JavaScript 使 HTML 頁面具備更強的動態和交互性。

document.write("Hello World!")

</script>

不支持 JavaScript 的瀏覽器會使用 <noscript> 元素中定義的內容（文本）來替代。

HTML 字符實體

HTML 中的預留字符必須被替換爲字符實體。

一些在鍵盤上找不到的字符也可使用字符實體來替換。

HTML 實體

在 HTML 中，某些字符是預留的。

在 HTML 中不能使用小於號（<）和大於號（>），這是由於瀏覽器會誤認爲它們是標籤。

若是但願正確地顯示預留字符，咱們必須在 HTML 源代碼中使用字符實體（character entities）。

實體名稱對大小寫敏感！

顯示結果描述實體名稱實體編號

空格

< 小於號 < <

> 大於號 > >

& 和號 & &

" 引號 " "

' 撇號 ' (IE不支持) '

HTML 統一資源定位器(Uniform Resource Locators)

URL 是一個網頁地址。

URL能夠由字母組成，如"runoob.com"，或互聯網協議（IP）地址： 192.68.20.50。大多數人進入網站使用網站域名來訪問，由於名字比數字更容易記住。

語法規則:

scheme://host.domain:port/path/filename

說明:

scheme - 定義因特網服務的類型。最多見的類型是 http

host - 定義域主機（http 的默認主機是 www）

domain - 定義因特網域名，好比 runoob.com

:port - 定義主機上的端口號（http 的默認端口號是 80）

path - 定義服務器上的路徑（若是省略，則文檔必須位於網站的根目錄中）。

filename - 定義文檔/資源的名稱

URL 字符編碼

URL 只能使用 ASCII 字符集.

來經過因特網進行發送。因爲 URL 經常會包含 ASCII 集合以外的字符，URL 必須轉換爲有效的 ASCII 格式。

URL 編碼使用 "%" 其後跟隨兩位的十六進制數來替換非 ASCII 字符。

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

訪問https://www.runoob.com/html/html-tutorial.html查看詳細教程

相關標籤/搜索

每日一句

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