目錄
一、什麼是HTML
HTML：Hyper Text Markup Language（超文本標記語言） 。超文本包括：文字、圖片、音頻、視頻、動畫等
二、 HTML基本結構
新建 HTML 文檔：文件名.html （點後綴是爲了讓系統更好的識別文件，讓系統知 道拿什麼軟件來打開）
<!--<!DOCTYPE html> 告訴瀏覽器使用什麼規範，這是html5的規範-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
注意：1.html 是由一對對的標籤組成的語言，每一對標籤都有它的特殊功能，例： <html></html>，第一個叫頭標籤，第二個叫尾標籤，尾標籤要加上結束符
2.<html lang=“en”></html>屬於根標籤，一個 HTML 文件裏只能有一對 HTML 標籤， 其他所有的標籤都必須寫在 HTML 裏邊。 lang=“en”：告訴搜索引擎爬蟲，我們的網站是關於什麼內容的。en 是英文的，zh 是 中文的，de 是德文的。
注意：屬性名和屬性值都寫在頭標籤後面（空一格），寫法：屬性名=“屬性值”
3.HTML 裏邊分爲兩個標籤:<head></head>和<body></body>
<meta charset="UTF-8" /> 單標籤，防止網頁出現亂碼，網頁中可以識別任何國家 的語言。
<title> </title>標籤：裏邊放網頁的標題（頁腳標）
三、網頁的基本標籤
1.標題標籤
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
六級標題標籤，從 h1 到 h6 字號依次減小，作用：獨 佔一行，加粗字體，字體逐漸變小。一個網頁h1應該只用1次。
2.段落標籤
<p>我是段落</p>
段落標籤，能讓標籤裏的內容成段展示。
3.字體樣式標籤
<!--加粗：<strong>…</strong>
斜體：<em>…</em>
想讓字體即加粗又斜體，就把兩個標籤嵌套起來：<strong><em>內容</em></strong>，標籤是可以嵌套的。-->
<strong>徐志摩人物簡介</strong>
<p>
<em>1910</em>年入杭州學堂<br/>
<em>1918</em>年赴美國克拉大學學習銀行學<br/>
...
</p>
4.特殊符號
|
特殊符號 |
字符實體 |
示例 |
|
空格 |
|
<a href="#">百度</a> | <a href="#">新浪</a> |
|
大於號(>) |
> |
如果時間>晚上6點，就坐車回家 |
|
小於號(<) |
< |
如果時間<早上7點，就走路去上學 |
|
引號(") |
" |
W3C規範中，HTML的屬性值必須用成對的"引起來 |
|
版權符號@ |
© |
© 2004-2018 盛邦昇華 |
5.圖片標籤
注意：src 裏邊放圖片路徑，分爲網上的 URL（超鏈接）、本地絕對路徑（需要把地址寫全）、 本地相對路徑（必須 html 文件和圖片文件在同一目錄下 ../返回上一層）
6.a鏈接標籤
注意：1)href 裏邊放網址，target=“_blank”的作用是跳轉後新打開一個頁面，a 標籤裏 可以放任何東西，比如你在標籤里加一個 img 標籤，你點圖片的任何一個區域就都可以跳轉了。
2)錨點
從A頁面的甲位置跳轉到本頁中的乙位置 (頁面內跳轉)
從A頁面的甲位置跳轉到B頁面中的乙位置（頁面間跳轉）
<!--1.創建跳轉標記-->
<div id=“demo1”></div>
<div id=“demo2”></div>
<!--2.創建跳轉鏈接-->
<a href=“#demo1”>find demo1</a>
<a href=“#demo2”>find demo2</a>
<!--頁面間跳轉鏈接-->
<a href="help.html#register">新用戶註冊幫助</a>
3)功能性鏈接
7.標籤分類
1)按行內元素和塊元素分：
塊元素：無論內容多少，該元素獨佔一行（p、h1-h6，div…）
行內元素：內容撐開寬度，左右都是行內元素的可以排在一行(a、strong、em…)
2) 成對標籤和自閉合標籤
成對標籤：以“< >”開始、“</ >”結束;如 <p></p>,<h1></h1>
自閉合標籤：如<img>,<hr>,<br>
四、小結
