HTML簡介

什麼是HTML?

HTML是一種超文本标記語言，有一套标記标簽，用來描述網頁。HTML文檔也叫做web頁面

HTML标簽

HTML标簽是由尖括号包圍的關鍵詞，比如

<html>

；

通常是成對出現的，比如

<b>

和

</b>

；

第一個是開始标簽（開放标簽），第二個是階數标簽（閉合标簽）

<标簽>内容</标簽>

HTML元素

“HTML 标簽” 和 “HTML 元素” 通常都是描述同樣的意思.

但是嚴格來講, 一個 HTML 元素包含了開始标簽與結束标簽

淺學 ------- HTML筆記HTML簡介HTML基礎HTML元素HTML屬性HTML标題HTML 段落HTML 連結HTML 頭部HTML CSSHTML 圖像HTML 表格HTML 清單HTML 區塊HTML 表單HTML 架構HTML 腳本HTML URL

HTML基礎

HTML标題

<h1>一級标題</h1>
<h2>二級标題</h2>
<h3>三級标題</h3>

HTML 段落

HTML 連結

**提示：**在 href 屬性中指定連結的位址。

HTML 圖像

**注意：**圖檔的名稱和尺寸是以屬性的形式提供的

HTML元素

HTML文檔由HTML元素定義。

HTML 文檔由互相嵌套的 HTML 元素構成。

HTML 元素文法

HTML 元素以開始标簽（起始标簽）起始，以結束标簽（閉合标簽）終止

元素的内容是開始标簽與結束标簽之間的内容

大多數 HTML 元素可擁有屬性，可以嵌套。

<!DOCTYPE html>
 <html>

 	<body>
 		<p>這是第一個段落。</p>
 	</body>

 </html>

HTML屬性

屬性是 HTML 元素提供的附加資訊

HTML 屬性

HTML 元素可以設定屬性

屬性可以在元素中添加附加資訊

一般描述于開始标簽，總是以名稱/值對的形式出現，比如：name=“value”。

屬性	描述
class	為html元素定義一個或多個類名（classname）(類名從樣式檔案引入
id	定義元素的唯一id
style	規定元素的行内樣式（inline style）
title	描述了元素的額外資訊 (作為工具條使用)

HTML标題

标題（Heading）是通過 <h1> - <h6> 标簽進行定義的。

<h1> 定義最大的标題。 <h6> 定義最小的标題。

HTML 水準線

<hr>标簽在 HTML 頁面中建立水準線

HTML 注釋

HTML 段落

HTML 換行

<br> 起換行的作用

HTML 連結

HTML 使用超級連結與網絡上的另一個文檔相連。幾乎可以在所有的網頁中找到連結。點選連結可以從一張頁面跳轉到另一張頁面。

HTML 連結文法

href 屬性描述了連結的目标

提示: “連結文本” 不必一定是文本。圖檔或其他 HTML 元素都可以成為連結。

HTML 連結 - target 屬性

使用 target 屬性，可以定義被連結的文檔在何處顯示

下面的這行會在新視窗打開文檔

HTML 頭部

HTML <head> 元素

<head> 元素包含了所有的頭部标簽元素。在<head>元素中你可以插入腳本（scripts）, 樣式檔案（CSS），及各種meta資訊。

可以添加在頭部區域的元素标簽為: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

HTML <title> 元素

<title> 标簽定義了不同文檔的标題。

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

<title> 元素:

1、定義了浏覽器工具欄的标題

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

3、顯示在搜尋引擎結果頁面的标題

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <tile>文檔标題</tile>
    </head>
    <body>
        文檔内容...
    </body>
</html>

HTML <base> 元素

<base> 标簽描述了基本的連結位址/連結目标，該标簽作為HTML文檔中所有的連結标簽的預設連結:

<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

HTML <link> 元素

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

HTML <style> 元素

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

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

HTML <meta> 元素

meta标簽描述了一些基本的中繼資料。

META 元素通常用于指定網頁的描述，關鍵詞，檔案的最後修改時間，作者，和其他中繼資料。

中繼資料可以使用于浏覽器（如何顯示内容或重新加載頁面），搜尋引擎（關鍵詞），或其他Web服務。

HTML <script> 元素

HTML CSS

CSS (Cascading Style Sheets) 用于渲染HTML元素标簽的樣式。

如何使用 CSS

1、内聯樣式 - 在HTML元素中使用 “style” 屬性

2、内部樣式表 - 在HTML文檔頭部<head>區域使用<style> 元素來包含 CSS

3、外部引用 - 使用外部 CSS 檔案

标簽	描述
<style>	定義文本樣式
<link>	定義資源引用位址

<h1 style="font-family:verdana;">一個标題</h1> 
<p style="font-family:arial;color:red;font-size:20px;">一個段落。</p>

HTML 圖像

HTML 圖像- 圖像标簽（ <img>）和源屬性（Src）

在 HTML 中，圖像由<img>标簽定義。<img>是空标簽，意思是說，它隻包含屬性，并沒有閉合标簽。

要在頁面上顯示圖像，需要使用源屬性(src)。src指"source"。源屬性的值是圖像的URL位址

定義圖像的文法是：

URL 指存儲圖像的位置。

HTML 圖像- Alt屬性

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

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

在浏覽器無法載入圖像時，替換文本屬性告訴讀者他們失去的資訊。此時，浏覽器将顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助于更好的顯示資訊，并且對于那些使用純文字浏覽器的人來說是非常有用的。

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

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

屬性值預設機關為像素:

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

HTML 表格

表格由 <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>

如果不定義邊框屬性，表格将不顯示邊框。使用邊框屬性來顯示一個帶有邊框的表格

border = "1px"

HTML 表格表頭

表格的表頭使用 <th> 标簽進行定義。

大多數浏覽器會把表頭顯示為粗體居中的文本

HTML 清單

HTML無序清單

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

無序清單使用 <ul> 标簽

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

HTML 有序清單

有序清單也是一列項目，清單項目使用數字進行标記。有序清單始于 <ol> 标簽。每個清單項始于 <li> 标簽。

清單項使用數字來标記。

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

HTML 區塊

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

HTML 區塊元素

大多數 HTML 元素被定義為塊級元素或内聯元素。

塊級元素在浏覽器顯示時，通常會以新行來開始（和結束）。

執行個體: <h1>, <p>, <ul>, <table>

HTML 内聯元素

内聯元素在顯示時通常不會以新行開始。

執行個體: <b>, <td>, <a>, <img>

HTML <div> 元素

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

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

如果與 CSS 一同使用，<div> 元素可用于對大的内容塊設定樣式屬性。

<div> 元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進行文檔布局不是表格的正确用法。<table> 元素的作用是顯示表格化的資料。

HTML <span> 元素

HTML <span> 元素是内聯元素，可用作文本的容器

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

當與 CSS 一同使用時，<span> 元素可用于為部分文本設定樣式屬性。

标簽	描述
<div>	定義文檔區塊，塊級(block-level)
<span>	定義 span，用來組合文檔中的行内元素

HTML 表單

HTML 表單和輸入

HTML 表單用于收集使用者的輸入資訊

HTML 表單表示文檔中的一個區域，此區域包含互動控件，将使用者收集到的資訊發送到 Web 伺服器。

HTML 表單

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

表單元素是允許使用者在表單中輸入内容，比如：文本域（textarea）、下拉清單（select）、單選框（radio-buttons）、複選框（checkbox）等等。

我們可以使用 <form> 标簽來建立表單

HTML 表單 - 輸入元素

多數情況下被用到的表單标簽是輸入标簽

<input>

。

輸入類型是由

type

屬性定義。

接下來我們介紹幾種常用的輸入類型

文本域

文本域通過

<input type="text">

标簽來設定，當使用者要在表單中鍵入字母、數字等内容時，就會用到文本域。

<form>
    First name:<input type="text" name="first name"> <br>
	Last name:<input typr="text" name="Last name">
</form>

下拉選擇

籍貫<select>
    	<option>山西大同</option>
    	<option>山西運城</option>
    	<option>山西太原</option>
	</select>

密碼字段

密碼字段通過标簽

<input type="password">

來定義

單選按鈕（Radio Buttons）

<input type="radio">

标簽定義了表單的單選框選項

<form>
    <input type="radio" name="sex" value="male">男<br>
    <input type="radio" name="sex" value="female">女
</form>

複選框（Checkboxes）

<input type="checkbox">

定義了複選框。

複選框可以選取一個或多個選項

<form>
    <input type="checkbox" name="vehicle" value="Bike">我喜歡自行車
    <br>
    <input type="checkbox" name="vehicle" value="Car">我喜歡汽車
</form>

送出按鈕(Submit)

<input type="submit">

定義了送出按鈕。

當使用者單擊确認按鈕時，表單的内容會被傳送到伺服器。表單的動作屬性

action

定義了服務端的檔案名

action

屬性會對接收到的使用者輸入資料進行相關的處理

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

有一個 method 屬性，它用于定義表單資料的送出方式，可以是以下值.

post

：指的是 HTTP POST 方法，表單資料會包含在表單體内然後發送給伺服器，用于送出敏感資料，如使用者名與密碼等。

get

：預設值，指的是 HTTP GET 方法，表單資料會附加在

action

屬性的 URL 中，并以

作為分隔符，一般用于不敏感資訊，如分頁等。例如：https://www.runoob.com/?page=1，這裡的 page=1 就是 get 方法送出的資料。

HTML 架構

通過使用架構，你可以在同一個浏覽器視窗中顯示不止一個頁面。

iframe文法:

該URL指向不同的網頁。

iframe - 設定高度與寬度

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

屬性預設以像素為機關, 但是你可以指定其按比例顯示 (如：“80%”)。

iframe - 移除邊框

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

設定屬性值為 “0” 移除iframe的邊框

使用 iframe 來顯示目标連結頁面

iframe 可以顯示一個目标連結的頁面

目标連結的屬性必須使用 iframe 的屬性，如下執行個體

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>

HTML 腳本

JavaScript 使 HTML 頁面具有更強的動态和互動性。

HTML <script> 标簽

JavaScript 最常用于圖檔操作、表單驗證以及内容動态更新

HTML<noscript> 标簽

隻有在浏覽器不支援腳本或者禁用腳本時，才會顯示<noscript>元素中的内容

HTML URL

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

URL 是一個網頁位址。

URL可以由字母組成，如"runoob.com"，或網際網路協定（IP）位址： 192.68.20.50。大多數人進入網站使用網站域名來通路，因為名字比數字更容易記住。

URL - 統一資源定位器

Web浏覽器通過URL從Web伺服器請求頁面。

當您點選 HTML 頁面中的某個連結時，對應的 <a> 标簽指向網際網路上的一個位址。

一個統一資源定位器(URL) 用于定位網際網路上的文檔。

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

說明：

1、scheme - 定義網際網路服務的類型。最常見的類型是 http

2、host - 定義域主機（http 的預設主機是 www ）

3、domain - 定義網際網路域名，比如 runoob.com

4、:port - 定義主機上的端口号（http 的預設端口号是80）

5、path - 定義伺服器上的路徑（如果省略，則文檔必須位于網站的根目錄中）

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

常見的 URL Scheme

Scheme	通路	用于
http	超文本傳輸協定	以 http:// 開頭的普通網頁。不加密
https	安全超文本傳輸協定	安全網頁，加密所有資訊交換
ftp	檔案傳輸協定	用于将檔案下載下傳或上傳至網站
file	你計算機上的檔案

URL 字元編碼

URL 隻能使用 ASCII 字元集.

來通過網際網路進行發送。由于 URL 常常會包含 ASCII 集合之外的字元，URL 必須轉換為有效的 ASCII 格式。

URL 編碼使用 “%” 其後跟随兩位的十六進制數來替換非 ASCII 字元。

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

淺學 ------- HTML筆記HTML簡介HTML基礎HTML元素HTML屬性HTML标題HTML 段落HTML 連結HTML 頭部HTML CSSHTML 圖像HTML 表格HTML 清單HTML 區塊HTML 表單HTML 架構HTML 腳本HTML URL

HTML簡介

什麼是HTML?

HTML标簽

HTML元素

HTML基礎

HTML标題

HTML 段落

HTML 連結

HTML 圖像

HTML元素

HTML 元素文法

HTML屬性

HTML 屬性

HTML标題

HTML 水準線

HTML 注釋

HTML 段落

HTML 換行

HTML 連結

HTML 連結文法

HTML 連結 - target 屬性

HTML 頭部

HTML <head> 元素

HTML <title> 元素

HTML <base> 元素

HTML <link> 元素

HTML <style> 元素

HTML <meta> 元素

HTML <script> 元素

HTML CSS

如何使用 CSS

HTML 圖像

HTML 圖像- 圖像标簽（ <img>）和源屬性（Src）

HTML 圖像- Alt屬性

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

HTML 表格

HTML 表格表頭

HTML 清單

HTML無序清單

HTML 有序清單

HTML 區塊

HTML 區塊元素

HTML 内聯元素

HTML <div> 元素

HTML <span> 元素

HTML 表單

HTML 表單和輸入

HTML 表單

HTML 表單 - 輸入元素

文本域

下拉選擇

密碼字段

單選按鈕（Radio Buttons）

複選框（Checkboxes）

送出按鈕(Submit)

HTML 架構

iframe - 設定高度與寬度

iframe - 移除邊框

使用 iframe 來顯示目标連結頁面

HTML 腳本

HTML <script> 标簽

HTML<noscript> 标簽

HTML URL

URL - 統一資源定位器

常見的 URL Scheme

URL 字元編碼

繼續閱讀