HTML 基礎【轉載】

時間 2019-11-07

標籤 html 基礎轉載欄目 HTML 简体版

原文原文鏈接

完整的HTML標籤查詢css

http://www.w3school.com.cn/tags/index.asphtml

屬性查詢編程

http://www.w3school.com.cn/tags/html_ref_standardattributes.asp瀏覽器

HTML框架

什麼是 HTML？編程語言

HTML 是用來描述網頁的一種語言。工具

HTML 指的是超文本標記語言 (Hyper Text Markup Language)
HTML 不是一種編程語言，而是一種標記語言 (markup language)
標記語言是一套標記標籤 (markup tag)

HTML 使用標記標籤來描述網頁佈局

HTML 標籤學習

HTML 標記標籤一般被稱爲 HTML 標籤 (HTML tag)。優化

HTML 標籤是由尖括號包圍的關鍵詞，好比 <html>
HTML 標籤一般是成對出現的，好比 <b> 和 </b>
標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤

開始和結束標籤也被稱爲開放標籤和閉合標籤

HTML 文檔 = 網頁

HTML 文檔描述網頁
HTML 文檔包含 HTML 標籤和純文本
HTML 文檔也被稱爲網頁

Web 瀏覽器的做用是讀取 HTML 文檔，並以網頁的形式顯示出它們。瀏覽器不會顯示 HTML 標籤，而是使用標籤來解釋頁面的內容：

<html> 與 </html> 之間的文本描述網頁
<body> 與 </body> 之間的文本是可見的頁面內容
<h1> 與 </h1> 之間的文本被顯示爲標題

<p> 與 </p> 之間的文本被顯示爲段落

HTML 標題（Heading）是經過 <h1> - <h6> 等標籤進行定義的。

HTML 段落是經過 <p> 標籤進行定義的。

HTML 連接是經過 <a> 標籤進行定義的

Example:

HTML 圖像是經過 <img> 標籤進行定義的。

Example:

空的 HTML 元素

沒有內容的 HTML 元素被稱爲空元素。空元素是在開始標籤中關閉的。

<br> 就是沒有關閉標籤的空元素（<br> 標籤訂義換行）。

在 XHTML、XML 以及將來版本的 HTML 中，全部元素都必須被關閉。

在開始標籤中添加斜槓，好比 <br />，是關閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。

即便 <br> 在全部瀏覽器中都是有效的，但使用 <br /> 實際上是更長遠的保障。

HTML 提示：使用小寫標籤

HTML 標籤對大小寫不敏感：<P> 等同於 <p>。許多網站都使用大寫的 HTML 標籤。

W3School 使用的是小寫標籤，由於萬維網聯盟（W3C）在 HTML 4 中推薦使用小寫，而在將來 (X)HTML 版本中強制使用小寫。

HTML 屬性

HTML 屬性

HTML 標籤能夠擁有屬性。屬性提供了有關 HTML 元素的更多的信息。

屬性老是以名稱/值對的形式出現，好比：name="value"。

屬性老是在 HTML 元素的開始標籤中規定。

<h1 align="center"> 擁有關於對齊方式的附加信息。

<body bgcolor="yellow"> 擁有關於背景顏色的附加信息。

<table border="1"> 擁有關於表格邊框的附加信息。

HTML 水平線

<hr/>標籤在HTML頁面中建立水平線。

分割內容

HTML 折行

<br/> 折行

HTML文本格式化裏面一些屬性

http://www.w3school.com.cn/html/html_formatting.asp

HTML CSS 樣式

外部樣式表

當樣式須要被應用到不少頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就能夠經過更改一個文件來改變整個站點的外觀。

<head>

</head>

內部樣式表

當單個文件須要特別樣式時，就可使用內部樣式表。你能夠在 head 部分經過 <style> 標籤訂義內部樣式表。

<head>

body {background-color: red}

p {margin-left: 20px}

</style>

</head>

內聯樣式

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

This is a paragraph

</p>

HTML 超連接

http://www.w3school.com.cn/html/html_links.asp

HTMl 圖像操做

http://www.w3school.com.cn/html/html_images.asp

圖像標籤

標籤	描述
<img>	定義圖像。
<map>	定義圖像地圖。
<area>	定義圖像地圖中的可點擊區域。

HTML表格

http://www.w3school.com.cn/html/html_tables.asp

表格標籤

表格	描述
<table>	定義表格
<caption>	定義表格標題。
<th>	定義表格的表頭。
<tr>	定義表格的行。
<td>	定義表格單元。
<thead>	定義表格的頁眉。
<tbody>	定義表格的主體。
<tfoot>	定義表格的頁腳。
<col>	定義用於表格列的屬性。
<colgroup>	定義表格列的組。

HTML 列表

http://www.w3school.com.cn/html/html_lists.asp

列表標籤

標籤	描述
<ol>	定義有序列表。
<ul>	定義無序列表。
<li>	定義列表項。
<dl>	定義定義列表。
<dt>	定義定義項目。
<dd>	定義定義的描述。
<dir>	已廢棄。使用 <ul> 代替它。
<menu>	已廢棄。使用 <ul> 代替它。

網站佈局

大多數網站會把內容安排到多個列中（就像雜誌或報紙那樣）。

可使用 <div> 或者 <table> 元素來建立多列。CSS 用於對元素進行定位，或者爲頁面建立背景以及色彩豐富的外觀。

提示：即便可使用 HTML 表格來建立漂亮的佈局，但設計表格的目的是呈現表格化數據 - 表格不是佈局工具！

HTML 佈局 - 有用的提示

提示：使用 CSS 最大的好處是，若是把 CSS 代碼存放到外部樣式表中，那麼站點會更易於維護。經過編輯單一的文件，就能夠改變全部頁面的佈局。如需學習更多有關 CSS 的知識，請訪問咱們的 CSS 教程。

提示：因爲建立高級的佈局很是耗時，使用模板是一個快速的選項。經過搜索引擎能夠找到不少免費的網站模板（您可使用這些預先構建好的網站佈局，並優化它們）。

HTML表單

表單標籤

http://www.w3school.com.cn/html/html_forms.asp

標籤	描述
<form>	定義供用戶輸入的表單
<input>	定義輸入域
<textarea>	定義文本域 (一個多行的輸入控件)
<label>	定義一個控制的標籤
<fieldset>	定義域
<legend>	定義域的標題
<select>	定義一個選擇列表
<optgroup>	定義選項組
<option>	定義下拉列表中的選項
<button>	定義一個按鈕
<isindex>	已廢棄。由 <input> 代替。