HTML 複習查漏補缺筆記
基本理論概念
1.1 文件路徑
1.2 鏈接和錨點
1.3 塊元素&&內聯元素
1.4 HTML 頭部
1.5 HTM5新特性
1.6 字符實體
常用元素
2.1 W3C速查手冊
2.2 HTML5語義化標籤
表單
3.1 表單常用屬性
3.2 <select>標籤
3.3 <textarea>標籤
3.4 <button>標籤
3.5 <datalist>預定義選型列表標籤(類似於下拉列表)
基本理論概念
1. 文件路徑
| 路徑 | 描述 |
|---|---|
<img src="picture.jpg"> |
picture.jpg 位於與當前網頁相同的文件夾 |
<img src="images/picture.jpg"> |
picture.jpg 位於當前文件夾的 images 文件夾中 |
<img src="/images/picture.jpg"> |
picture.jpg 當前站點根目錄的 images 文件夾中 |
<img src="../picture.jpg"> |
picture.jpg 位於當前文件夾的上一級文件夾中 |
<img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower"> |
絕對路徑 |
2. 鏈接和錨點
2.1 超鏈接屬性介紹
- 通過使用 href 屬性 - 創建指向另一個文檔的鏈接
- 通過使用 name 屬性 - 創建文檔內的書籤
2.2 href使用示例
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
2.3 name錨點示例
<a href="#buttom">跳轉到底部</a>
<a name="buttom">底部</a>
3. 塊元素&&內聯元素
3.1 塊元素 block level element
- 塊計元素在瀏覽器顯示時，通常以新行來開始(和結束)
<h1><p><ul><table><div>
3.2 內聯元素 inline element
- 內聯元素通常不會以新行開始
<b><td><a><img>
3. HTML 頭部
3.1 <head>元素
- 頭部元素的容器。可包含腳本，知識瀏覽器樣式鏈接，提供元信息…
<!-- 可以添加元素 -->
<title>、<base>、<link>、<meta>、<script> 以及 <style>
3.2 <title>元素
- 定義瀏覽器工具欄中的標題
- 提供頁面被添加到收藏夾時顯示的標題
- 顯示在搜索引擎結果中的頁面標題
<title>Title of the document</title>
3.3 <base>元素
- 規定頁面上所有鏈接默認的地址或者默認的目標
<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>
3.4 <link>元素
- 通常鏈接 CSS 資源
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
3.5 <style>元素
- 定義樣式
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
3.6 <meta>元素
- 關於數據的信息。meta 元素被用於規定頁面的描述、關鍵詞、文檔的作者、最後修改時間以及其他元數據。
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
<meta name="keywords" content="HTML, CSS, XML" />
3.7 <script>元素
- 頁面腳本資源
<script src="js/my.js" />
<script>
console.log("Hello");
<script>
4. HTM5新特性
4.1 文檔聲明示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
4.2 新特性
- 新的語義元素，比如
<header>,<footer>,<article>, and<section>。 - 新的表單控件，比如數字、日期、時間、日曆和滑塊。
- 強大的圖像支持（藉由
<canvas>和<svg>） - 強大的多媒體支持（藉由
<video>和<audio>） - 強大的新 API，比如用本地存儲取代 cookie。
5. 字符實體
| 符號 | 解釋 | HTML對應寫法 |
|---|---|---|
| > | 空格 | |
| < | 小於號 | < < |
| > | 大於號 | > > |
| & | 和號 | & & |
| " | 引號 | " " |
| ’ | 撇號 | ' (IE不支持) |
| ￠ | 分（cent） | ¢ ¢ |
| £ | 鎊（pound） | £ £ |
| ¥ | 元（yen） | ¥ ¥ |
| € | 歐元（euro） | € € |
| § | 小節 | § § |
| © | 版權（copyright） | © © |
| ® | 註冊商標 | ® ® |
| ™ | 商標 | ™ ™ |
| × | 乘號 | × × |
| ÷ | 除號 | ÷ ÷ |
常用元素
1. W3C速查手冊
2. HTML5語義化標籤
| 標籤 | 描述 |
|---|---|
<article> |
定義文章。 |
<aside> |
定義頁面內容以外的內容。 |
<details> |
定義用戶能夠查看或隱藏的額外細節。 |
<figcaption> |
定義 <figure> 元素的標題。 |
<figure> |
規定自包含內容，比如圖示、圖表、照片、代碼清單等。 |
<footer> |
定義文檔或節的頁腳。 |
<header> |
規定文檔或節的頁眉。 |
<main> |
規定文檔的主內容。 |
<mark> |
定義重要的或強調的文本。 |
<nav> |
定義導航鏈接。 |
<section> |
定義文檔中的節。 |
<summary> |
定義 <details> 元素的可見標題。 |
<time> |
定義日期/時間。 |
表單
1. 表單常用屬性
1.1 通用
name 提交表單所必須的標籤屬性，用於服務器數據封裝，數據獲取
1.2 標籤使用
action 強求服務器資源路徑
method 請求類型，常用 get post
target 是否在新的標籤中打開鏈接，默認 _self 在新標籤頁中打開
1.3 …等其他表單元素使用
type 輸入類型，text color date datetime datetime-local email month number range search tel time url week
| 限制屬性 | 描述 |
|---|---|
| disabled | 規定輸入字段應該被禁用。 |
| max | 規定輸入字段的最大值。 |
| maxlength | 規定輸入字段的最大字符數。 |
| min | 規定輸入字段的最小值。 |
| pattern | 規定通過其檢查輸入值的正則表達式。 |
| readonly | 規定輸入字段爲只讀（無法修改）。 |
| required | 規定輸入字段是必需的（必需填寫）。 |
| size | 規定輸入字段的寬度（以字符計）。 |
| step | 規定輸入字段的合法數字間隔。 |
| value | 規定輸入字段的默認值。 |
2. <select>標籤
<select name="cars">
<option value="volvo" selected>Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
3. <textarea>標籤
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
4. <button>標籤
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
5. <datalist>預定義選型列表標籤(類似於下拉列表)
<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>