初識 HTML
HTML (Hyper Text Markup Language)稱爲超文本標記語言，是一種標識性的語言。它包括一系列標籤．通過這些標籤可以將網絡上的文檔格式統一。超文本包括：文字，圖片，音頻，視頻，動畫等。知名的瀏覽器都支持 HTML 5。HTML 的代碼是所見即所得。
- W3C 萬維網聯盟（World Wide Web Consortium）
W3C 的標準包括：
- 結構化標準語言（HTML，XML）
- 表現標準語言（CSS）
- 行爲標準（DOM，ECMAScript）
HTML 的註釋：
<!-- DOCTYPE:告訴瀏覽器我們要使用什麼規範 -->
<!DOCTYPE html>
<!-- html：主標籤，成對出現 -->
<html lang="en">
<!-- head標籤代表網頁頭部 -->
<head>
<!-- meta描述性標籤，描述網頁的一些信息 -->
<!-- meta標籤裏有一些name屬性，比如 keyworlds，這是關於網頁的一些關鍵字 -->
<!-- 比如 description，這是對網頁的一些描述 -->
<meta charset="UTF-8">
<!-- title標籤代表網頁標題 -->
<title>Title</title>
</head>
<!-- body標籤代表網頁主體 -->
<body>
Hello,World!
</body>
</html>
網頁的基本標籤
- 標題標籤：<h1> ~ <h6> 一級標籤最大，六級標籤最小，而且標籤是成對出現的
- 段落標籤：<p></p> 段落標籤之間會有空白的效果
- 換行標籤：</br> 換行標籤之間沒有空白，看起來比較緊湊，而且它是單標籤，自封閉標籤
- 水平線標籤：<hr/> 頁面中會顯示一條水平分割線
- 字體樣式標籤：<strong></strong> 字體加粗 <em></em> 字體斜體
特殊符號：
空格：
大於符號：>
小於符號：<
版權符號：©
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一個html網頁</title>
</head>
<body>
<!--標題標籤-->
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
<!--段落標籤-->
<p>兩隻老虎 兩隻老虎</p>
<p>跑得快 跑得快</p>
<p>一隻沒有耳朵 一隻沒有尾巴</p>
<p>真奇怪 真奇怪</p>
<!--水平線標籤-->
<hr/>
<!--換行標籤-->
兩隻老虎 兩隻老虎<br/>
跑得快 跑得快<br/>
一隻沒有耳朵 一隻沒有尾巴<br/>
真奇怪 真奇怪<br/>
<hr/>
<!--字體樣式標籤，粗體和斜體-->
粗體：<strong>i love you</strong>
斜體：<em>i love you</em>
<hr/>
<!--特殊符號-->
空 格
空 格
<br/>
<!--大於符號-->
>
<br/>
<!--小於符號-->
<
<br/>
<!--版權符號-->
©版權所有
<!--特殊符號記憶：&開始 ;結束 & ;-->
</body>
</html>
圖像標籤
常見的圖像格式：JPG，GIF，PNG…
html頁面中嵌入圖片需要 img 標籤，它裏面有一些屬性
<img src="path" alt="text" title="text" width="x" height="y"/>
src:圖像的地址路徑
alt:圖像的替代文字
title:鼠標懸停圖像時顯示提示文字
width:圖像寬度
height:圖像高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖像學習</title>
</head>
<body>
<!--
src代表的是圖像的地址，分爲相對地址，絕對地址
絕對地址是將圖片寫死，不推薦
相對路徑，相對於項目而言的，(推薦使用)
../ 代表是上一級
-->
<img src="../resources/image/1.jpg" alt="圖像" title="懸停文字"
width="300" height="300">
</body>
</html>
超鏈接標籤
html頁面內嵌超鏈接標籤，使用 a 標籤，它裏面有一些屬性
<a href="path" target="目標窗口位置">連接文本或圖片</a>
href:連接路徑
target:鏈接在哪個窗口打開，常用的值有：_self本頁面打開，_blank新頁面打開
錨鏈接：
可以是頁面內的跳轉，也可以是不同頁面之間的跳轉，需要使用a標籤內的name屬性作爲標記，
再在另一個a標籤裏使用 #+標記的名字 進行跳轉，
不同頁面間的錨鏈接跳轉，在href屬性裏可以直接使用 #+標記的名字 跳轉
功能性鏈接：
1.郵件鏈接：在href屬性裏使用mailto:+郵箱地址
2.QQ連接：百度搜索QQ推廣，登陸後，有一個推廣工具，複製裏面的連接粘到代碼裏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超鏈接學習</title>
</head>
<body>
<!--使用name作爲標記-->
<a name="top">頂部</a>
<!--a標籤，href屬性必填項,表示跳轉到那個頁面
target屬性表示窗口在那個地方打開
_self默認本頁面打開
_blank在新頁面打開
-->
<a href="html01.html">點擊我跳轉到頁面一</a>
<a href="https://www.baidu.com">點擊我跳轉到百度</a>
<br/>
<!--將圖片設置爲超鏈接-->
<a href="https://www.baidu.com" target="_blank">
<img src="../resources/image/1.jpg" alt="圖像" title="懸停文字" width="300" height="300">
</a>
<p>
<a href="https://www.baidu.com" target="_blank">
<img src="../resources/image/1.jpg" alt="圖像" title="懸停文字" width="300" height="300">
</a>
</p>
<p>
<a href="https://www.baidu.com" target="_blank">
<img src="../resources/image/1.jpg" alt="圖像" title="懸停文字" width="300" height="300">
</a>
</p>
<p>
<a href="https://www.baidu.com" target="_blank">
<img src="../resources/image/1.jpg" alt="圖像" title="懸停文字" width="300" height="300">
</a>
</p>
<p>
<a href="https://www.baidu.com" target="_blank">
<img src="../resources/image/1.jpg" alt="圖像" title="懸停文字" width="300" height="300">
</a>
</p>
<p>
<a href="https://www.baidu.com" target="_blank">
<img src="../resources/image/1.jpg" alt="圖像" title="懸停文字" width="300" height="300">
</a>
</p>
<!--錨鏈接，
1.需要一個標記，在頁面頂端也設置一個a標籤,使用name屬性，例如：<a name="top">頂部</a>
2.跳轉到標記 使用 # + 標記的名字，表示跳轉到頂部
-->
<a href="#top">回到頂部</a>
<a name="down">down</a>
<!--功能性鏈接
郵件鏈接：mailto:加郵箱地址
QQ連接：百度搜索QQ推廣，登陸後，有以一個推廣工具，
複製裏面的連接粘到代碼裏
-->
<!--郵件鏈接-->
<a href="mailto:[email protected]">點擊聯繫我</a>
<!--QQ連接-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2927460146&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:2927460146:51" alt="加我領好禮" title="加我領好禮"/>
</a>
</body>
</html>
----------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖像學習</title>
</head>
<body>
<img src="../resources/image/1.jpg" alt="圖像" title="懸停文字" width="300" height="300">
<a href="html04.html#down">跳轉</a>
</body>
</html>