HTML 基礎知識
一、HTML 概述：
1.HTML 是一種 “超文本‘’ 標記語言，‘超文本’ 就是指頁面可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
2. html 不是一種編程語言；
3.html5 的新特性：
a.用於回話的 canvas 元素；
b.用於媒介回放的 video 和 audio 元素
c.對本地離線存儲的更好支持
d.新的特殊內容元素，article、footer、header、nav、section
e.新的表單控件，calendar、date、time、email、url、search
4.html 的開發工具：
webStorm、notepad、Ecliipse、text sublime、Dreamweaver 等；
二、基本格式：
1.html5 的基本格式：
<!DOCTYPE html> 文檔申明，告訴計算機這是一個 html5 文檔
<html lang="en"> 表示文檔的開始
<head> 存放文檔的基本信息，不可見元素
<meta charset="UTF-8"> 申明字符編碼
<title> Title </title> 申明文檔標題
</head>
<body> 存放文檔的可見內容
</body>
</html> 表示文檔結束
2.開發工具的基本操作
a. 打開開發工具
b. 新建文件，註意事項：先將文件保存為以 .html 為後綴的文件，才能啟動自動提示功能；
三、元素的概念及 3 個常用標簽：
1.元素的概念：
html 元素指的就是 從開始標簽到結束標簽的所有代碼。
2. 3 個常用標簽：
| 開始標簽 | 元素內容 | 結束標簽 |
| <h1> | h 標簽用來表示標題 | </h1> |
| <p> | p 標簽表示一個段落 | </p> |
| <hr> | 單標簽，給文檔加一個橫線 | 沒有結束標簽 |
四、元素的屬性：
1.元素的屬性：
a. 屬性的作用就是為元素提供更多的信息；大多數元素都可以擁有屬性；
b. 屬性的用法：<開始標簽 屬性1=參數1> ..... </結束標簽>
2.元素常用屬性：
| 屬性名 | 屬性作用 | 屬性值及其作用 |
| bgcolor | 給文檔添加一個悲劇顏色 |
二進制顏色，英文單詞顏色 |
| align | 指定內容的對齊方式 |
left：左對齊（默認值） right：右對齊 center：居中對齊 |
五、文本元素
掌握常用的文本元素：
| 元素名 | 元素作用 |
| b 元素 | 加粗文字 |
| br 元素 | 強制換行 |
| i 元素 | 讓文字傾斜 |
| del 元素 | 刪除文字，就是在文字上加一個橫線，表示刪除 |
| strong 元素 | 強調一段文本，實際作用也是加粗文字 |
| wbr 元素 | 安全換行 |
| em 元素 | 強調文本，實際作用也是傾斜文本 |
| s 元素 | 表示不準確的刪除，實際作用就是刪除線 |
| u 元素 | 給文字添加一個 下劃線 |
| ins 元素 | 添加一段文字，起強調作用；實際作用也是給文字加下劃線 |
| small 元素 | 用於聲明，解釋作用，實際就是添加一段小號字體 |
| sub 元素 | 添加下標 |
| sup 元素 | 添加上標 |
| dfn 元素 | 對一段詞或短語的解釋，實際作用就是傾斜文字 |
| abbr 元素 | 表示一段文本的縮寫，再文本顯示上沒有實際作用 |
| q 元素 | 實際作用就是添加雙引號 |
| code 元素 | 用來表示計算機代碼片段 必須是 lang="en" |
| var 元素 | 表示編程語言的變量 必須是 lang="en" |
| samp 元素 | 表示程序或計算機的輸出 你 沒有權限瀏覽該網頁 必須是 lang="en" |
| kbd 元素 | 表示部分內容是用戶利用鍵盤輸入， 必須是 lang="en" |
| ruby 元素 | 給文字添加註音符號 很多瀏覽器不支持 |
| cite 元素 | 表示引用其他作品的標題，實際效果就是加粗文字 |
| bdo 元素 | 設置文字方向，必須使用 dir 屬性才可以設置；屬性值 rtl （從右到左）， ltr（從左到右，默認值） |
| mark 元素 | 突出顯示文本，作用就是給文本添加一個黃色背景 |
| time 元素 | 表示時間和日期 |
| span 元素 | 表示一般性文字，沒有特殊效果 |
六、超鏈接
1.鏈接的五種形式：
a.鏈接外部文檔
<a href="https://www.baidu.com">百度</a>
b.鏈接本地文檔
<a href="本地地址">本地鏈接</a>
c.圖片鏈接
<a href="跳轉地址"> <img src="圖片地址"> </a>
d.建立電子郵箱的超鏈接
<a href="mailto:[email protected]">郵箱鏈接</a>
e.下載鏈接
<a href="文件名">下載鏈接</a>
2. target 屬性：
a. _self：在當前窗口的位置
b. _blank：新窗口；
c. _top: 最頂層框架
d._parent：父框架；
3. id屬性：通用屬性，可以理解為元素的身份證；
4. name屬性：可以理解為元素的名字；
5.錨點連接；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#1">錨點1</a>
<a href="#2">錨點2</a>
<a href="#3">錨點3</a>
<a id="1" href="">錨點1
<a id="2" href="">錨點2
<a id="3" href="">錨點3
</body>
</html>
七、img 元素嵌入圖片
1.img 的屬性：
a. src：必要屬性，指定圖片的來源路徑；
b. alt屬性：當圖片無法正常顯示時的替代文字；
c. width、height屬性：指定圖片的寬高；單位是像素 px 或是百分比；
2. title屬性：
a. 屬性值為：字符串；
b. 效果是當鼠標移動到該位置時顯示出該內容；
八、絕對路徑和相對路徑
1.絕對路徑：鏈接資源的絕對位置；與html文檔無關；
2.相對路徑：是相對於當前文件來對比的，與html 文檔有關；
a. 同一路徑：直接寫文件名稱，或 ./文件名
b. 在下級路徑：路徑名/資源名；
c. 下下級路徑：路徑1/路徑2/資源名；
d. 在上級路徑：../資源名；
e. 在上上級路徑：../../資源名；
九、列表
1.無序列表
a.無序列表的基本格式：
<ul>
<li type="disc">列表項1</li>
<li type="circle">列表項2</li>
<li type="square">列表項3</li>
</ul>
b.無序列表的 type 屬性：
disc（默認值）實心小圓；
circle 空心小圓；
square 實心小方塊；
2.有序列表
a.有序類標的基本格式
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
b.有序列表的 type 屬性
整數（默認值）
大小寫字母
大小寫羅馬字母
c.有序列表的 start 屬性：
定義列表的開始序號
d.有序列表的 value 屬性：
定義某個單個列表項的序號
3.自定義列表
自定義列表項組成：
dl 定義列表； <dl>
dt 定義列表項目 <dt>列表項目1標題</dt>
dd 定義列表內容 <dd>列表項目1內容</dd>
</dl>
十、表格元素：
1.表格的基本構成
a. table 表格的範圍，外框；用來定義表格，表格的其他元素包含在 table 標簽裏面
b. tr 表格的行；
c. td 表格的單元格；
2. th 元素：為表格添加標題行；
th 元素用來定義表格的標題單元格，他是tr的子元素，必須放在tr標簽裏面；tr元素裏的內容會自動居中對齊並加粗文字；
3.colspan 元素：橫向合並單元格
屬性值為正整數，表示該單元格橫向和並的列數
4.rowspan 元素：縱向合並單元格
屬性值為正整數，表示該單元格縱向合並的行數
5.caption 元素：給表格添加標題
用來指定表格的標題或者說明；是 table 的子元素，必須放在 table 中使用
6.thead、tfoot、tbody 元素
thead 表示表頭；
tfoot 表示表腳；
tbody 表示主體內容
7.colgroup 元素：
colgroup 元素用來組合列，它的 span 屬性可以設置組合列的數目；它可以包含一個子元素 col；
colgroup 元素為 table 元素的子元素，必須放在 caption 元素之後，thead 元素之前；
8.col 元素：
col 元素用來設定列的屬性，他也可以使用 span 屬性
col 元素一般作為 colgroup 元素的子元素配合使用；
十一、特殊符號的使用
1.html 實體
a. 在 html 中，某些字符是預留的；
b. 在 html 中，不能使用小於、大於符號，這是應為瀏覽器會誤認為他們是標簽
c. 如果想正確的顯示預留字符，我們必須在 html 源碼中使用 字符實體
十二、 style 元素 與 HTML 樣式基礎
1.引入樣式的三種方式：
a. 外部樣式表：通過 link 元素引入外部樣式表；
<link rel="stylesheet" type="text/css" herf="">
b.內部樣式表：<style type="text/css"> </style>
c.內聯樣式表：<元素 style="屬性：屬性值"> </元素>
十三、內聯框架
1. iframe 內聯框架
a. iframe 元素用來在文檔中添加一個內聯框架。
b. iframe 為 body 元素的子元素，必須放置在 body 中使用
c. iframe 的主要 屬性：src、name、id、width、height；
2. frameborder 屬性 是用來規定 內聯框架的邊框 其屬性值為 數字，0表示沒有，數字越大邊框與粗
3.iframe 內聯框架 一般與 <a> 標簽聯合使用，
其中 <a> 標簽的 target 屬性的屬性值
與iframe 標簽的 name 的屬性值相對應
<a href="https://www.tengxun.com" target="myframe">51自學網</a>
<a href="https://www.ifeng.com">鳳凰網</a>
<a href="https://wwww.baidu.com">百度</a>
<iframe src="https://wwww.baidu.com" name="myframe" frameborder="1" width="50%" height="100%">
</iframe>
HTML 基礎知識