何為HTML
HTML稱為超文本標記語言(Hyper Text Markup Language)，是一種標記語言而非編程語言。它包括一系列標簽，通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。
HTML是一套標記標簽（Markup Tag），使用標記標簽來描述網頁。HTML 文檔包含 HTML 標簽和純文本，而HTML 文檔也被稱為網頁。Web 瀏覽器讀取 HTML 文檔，並以網頁的形式顯示出它們。瀏覽器不會顯示 HTML 標簽，而是使用標簽來解釋頁面的內容。
HTML標簽
- HTML標簽是被尖括號包為的關鍵詞，例如<p>,</p>。
- HTML標簽通常成對出現，第一個標簽為開始標簽\開放標簽，第二個標簽為結束標簽\閉合標簽。
- 對於HTML標簽，最好都使用小寫。
HTML元素
- HTML 元素指的是從開始標簽（start tag）到結束標簽（end tag）的所有代碼。HTML文檔由HTML元素定義。
- 某些HTML元素具有空內容。例如
<br \> - 大多數HTML元素擁有屬性。
- HTML元素可以嵌套。例如對於下面的HTML文檔
<html> //<html>元素 定義了整個HTML文檔
<body> //<body>元素 定義HTML文檔的主體
<p>This is my first paragraph.</p> //<p>元素 定義一個段落
</body> //<body>元素 結束標簽
</html> //<html>元素 結束標簽
HTML屬性
- HTML 標簽可以擁有屬性。屬性提供了有關 HTML 元素的更多的信息。
- 屬性總是以名稱/值對的形式出現，比如：name="value"。
- 屬性總是在 HTML 元素的開始標簽中規定。
<h1 align="center">標題居中</h1>
<body bgcolor="yellow">
<h2>將背景改為黃色</h2>
</body>
<a href="http://www.baidu.com">超鏈接</a>
HTML文檔相關標簽
- 利用vscode自動生成html框架會有以下內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><!--必須寫-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>網頁標題</title>
</head>
<body>
網頁內容
</body>
</html>
- DOCTYPE標簽放在html文檔第一行，指明html文檔的類型。
- lang屬性指明文檔使用語言，但是lang="en"不代表只能使用英文，只是說明該文檔為英文文檔。
- charset指明使用的字符集編碼，最好使用UTF-8。
HTML標題
- 通過 <h1> - <h6> 等標簽進行定義的。<h1> 定義最大的標題，<h6> 定義最小的標題。
- 瀏覽器會自動地在標題的前后添加空行。
<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
標題1
標題2
標題3
HTML段落
- HTML段落通過
<p>定義。 - 瀏覽器會自動地在段落的前后添加空行。
- 若想在不產生一個新段落的情況下進行換行（新行），可以利用<br />標簽。
<p>這是段落1</p>
<p>這是段落2<br \>這是同一段落2的另一行</p>
這是段落1
這是段落2
這是同一段落2的另一行
HTML樣式
- 在HTML元素中利用style來改變HTML元素的樣式.style提供了一種改變所有HTML元素的樣式的通用方法。
<html>
<body style="background-color:yellow"> //設置body背景為黃色
<h1 style="font-family:verdana">這是標題</h1> //設置標題字體
<p style="font-family:arial;color:red;font-size:20px;">這是段落</p> //設置段落顏色、字體及大小
</body>
</html>
實現效果
HTML注釋
- 注釋標簽 <!-- 與 --> 用於在 HTML 插入注釋。
<!-- 這是一段注釋 -->
<p>這是一個段落。</p>
<!-- 這也是一段注釋 -->
這是一個段落。
HTML引用
- HTML利用
<q>定義短的引用。 - HTML利用
<blockquote>定義長的引用。 - HTML利用
<abbr>定義縮寫或首字母縮略語。 - HTML利用
<address>元素定義文檔或文章的聯系信息（作者/擁有者）。
此元素通常以斜體顯示。大多數瀏覽器會在此元素前后添加折行。
<p>短引用:<q>引用內容1</q></p>
<p>長引用:</p>
<blockquote >
引用內容2
</blockquote>
<p><abbr title="浮動字體">縮寫</abbr> 成立於 1948 年。</p>
<address>
Written by Donald Duck.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
短引用:引用內容1
長引用:
引用內容2
縮寫
Written by Donald Duck.Visit us at:
Example.com
Box 564, Disneyland
USA
HTML CSS
當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化。有以下三種方式來插入樣式表：
- 外部樣式表:使用外部樣式表，就可以通過更改一個文件來改變整個站點的外觀。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">//link定義資源引用
</head>
- 內部樣式表:單個文件需要特別樣式時，就可以使用內部樣式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
- 內聯樣式:當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。上面的樣式都是內聯樣式。
<p style="color: red; margin-left: 20px">
這是一個段落
</p>
HTML鏈接
- 通過使用
<a>來在HTML中創建鏈接，鏈接中必須有href屬性，指明跳轉的目標 - 使用target屬性可以定義打開方式，_blank為在新窗口中打開頁面,默認值_self為當前窗口打開頁面
- href="#"為空鏈接
- 在網頁中的各種網頁元素，例如文本、圖像、表格、音頻、視頻都可以添加超鏈接
<a href ="https://www.baidu.com/">點擊我跳轉頁面</a>
<a href ="https://www.baidu.com/" target="_blank">點擊我跳轉頁面</a>
<a href ="https://www.baidu.com/" target="_blank"><img src = 'https://external-30160.picsz.qpic.cn/8ba5a9d452103bb93333dd21a1f351a5' title="點擊我跳轉頁面"/><a> //為圖片添加超鏈接
- 可以利用name屬性在HTML頁面中創建書簽，可以直接創建跳轉該標簽的鏈接，就不用滾動頁面了。將 # + 標簽名添加到URL的末端，就可以直接鏈接到這個標簽上。
<a hrel ="#tips">Click me!</a>
<a name ="tips"> Jump here!</a>
HTML圖像
- 利用
<img src="url" />添加圖像 - 利用alt屬性來定義可替換文本屬性,即圖像無法顯示時的替換文本
- 利用title屬性來定義提示文本屬性，將鼠標移至圖像上后會顯示提示文本
- 利用width和height屬性設定圖像寬度和高度,若只選擇其中一個屬性進行修改則另一屬性會等比例縮放
<img src = 'https://external-30160.picsz.qpic.cn/8ba5a9d452103bb93333dd21a1f351a5' title="提示文本"/>
<img src = '111' alt="可替換文本"/>
<img src = 'https://external-30160.picsz.qpic.cn/8ba5a9d452103bb93333dd21a1f351a5' width=200 height =100>
