文章目錄
- 前言
- 一、HTML是什麼？
- 二、HTML的特點
- 三、HTML的使用
- 四、塊級元素與行内元素
- 五、基礎标簽的使用
- 總結
前言
第一次接觸HTML，是大三上學期開設的web基礎課程，裡面不僅介紹了HTML，還有CSS和JS。那是我第一次接觸HTML，學起來也很簡單。因為它不是一門程式設計語言，是以并沒有像C++和Java那樣學起來晦澀難懂，而且我們是邊授課邊實踐的，講到一個知識點，就要打一個代碼例子，是以上手也很快。時間過了也快有一年了，有些知識也遺忘了一些，現在重新整理一遍，希望能對初學者有一定的幫助。
一、HTML是什麼？
HTML是HyperText Markup Language(超文本标記語言)的縮寫，它不是一種程式設計語言，而是一種标記語言 。它包括一系列标簽．通過這些标簽可以将網絡上的文檔格式統一，使分散的Internet資源連接配接為一個邏輯整體。HTML用于構造浏覽器頁面的，你可以利用HTML元素來構造一個簡單或者複雜的頁面。
二、HTML的特點
1.簡易性：超文本标記語言版本更新采用超集方式，進而更加靈活友善。
2.可擴充性：超文本标記語言的廣泛應用帶來了加強功能，增加辨別符等要求，超文本标記語言采取子類 元素的方式，為系統擴充帶來保證。
3.平台無關性：雖然個人計算機大行其道，但使用MAC等其他機器的大有人在，超文本标記語言可以使用 在廣泛的平台上，這也是網際網路（WWW）盛行的另一個原因。
4.通用性：另外，HTML是網絡的通用語言，一種簡單、通用的全置标記語言。它允許網頁制作人建立文 本與圖檔相結合的複雜頁面，這些頁面可以被網上任何其他人浏覽到，無論使用的是什麼類型的電腦或浏覽器。
三、HTML的使用
1.開發環境搭建
可用于編寫HTML的編譯工具有很多
- 記事本：特點：無代碼提示、無代碼高亮顯示、使用者界面不友好；
- Sublime（推薦）：特點：運作速度快、代碼提示、高亮顯示、插件拓展、html 插件emmet、sublime text3 安裝emmet插件；
- VSCode（推薦）：特點：豐富的插件支援、可進行git管理；
- HBuilderX：特點：性能更高、啟動更快、體量小，國内開發團隊研發，全中文界面，對新手比較友好
HTML是在浏覽器上解析執行的，每種浏覽器對相同的Html代碼解析可能産生不同的結果，是以我們需要安裝多種主流的浏覽器進行相容性測試；
主流浏覽器：Google Chrome（谷歌）、Firefox（火狐）、Opera、Safari、Microsoft Edge。
推薦各位使用Google Chrome（谷歌），Google Chrome（谷歌）浏覽器界面簡潔，清爽幹整潔淨，性能也是非常好的，速度快插件資源豐富，支援HTML5全面以及浏覽器相容性問題等等，而且大多數前端程式員都在用
2.Hello HTML
打開VSCode編譯器，建立一個字尾名為.html的檔案，建立HTML文檔基本結構，如下
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello</title>
</head>
<body>
Hello HTML!
</body>
</html>
運作到浏覽器打開
對HTML文檔基本結構的解析，如下
html文檔頭，html5标準網頁聲明
<!DOCTYPE html>
不加這一行，就表示頁面采用浏覽器本身的解析标準，這樣會造成頁面在不同的浏覽器（IE、火狐等）可能出現不同的顯示效果。
h5的文檔聲明，聲明目前的網頁是按照HTML5标準編寫的編寫網頁時一定要将h5的文檔聲明寫在網頁的最上邊。
如果不寫文檔聲明，則會導緻有些浏覽器會進入一個怪異模式，進入怪異模式以後，浏覽器解析頁面會導緻頁面無法正常顯示，是以為了避免進入該模式，一定要寫文檔聲明。
html根标簽
<html ></html>
一個頁面中有且隻有一個根标簽，網頁中的所有内容都應該寫在html根标簽中,屬性lang是單詞language的縮寫，意思是語言，”en”代表英語，”zh-CN”代表中文
head标簽
<head></head>
該标簽中的内容，不會在網頁中直接顯示，它用來幫助浏覽器解析頁面的
meta标簽
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
meta标簽用來設定網頁的一些中繼資料，比如網頁的字元集，關鍵字、簡介， meta是一個自結束标簽，編寫一個自結束标簽時，可以在開始标簽中添加 一個/ 。
charset="UTF-8"字元編碼格式為UTF-8。
viewport 裝置的螢幕 width=device-width width屬性控制裝置的寬度。假設您的網站将被帶有不同螢幕分辨率的裝置浏覽， 那麼将它設定為 device-width 可以確定它能正确呈現在不同裝置上。 initial-scale=1.0 確定網頁加載時，以 1:1 的比例呈現，不會有任何的縮放。
title标簽
<title>Hello</title>
設定浏覽器頁籤的名稱
body标簽
<body>
Hello HTML!
</body>
body标簽用來設定網頁的主體内容，網頁中所有可見的内容，都應該在body中編寫， 在body裡的内容都是顯示在浏覽器的視圖區的
四、塊級元素與行内元素
1.塊級元素
作用：搭建網頁結構
特點：
- 獨占一行空間
- 預設寬度為100%
- 高度由子元素或内容決定
- 可以通過css指定其寬度
元素：html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav、article、section、aside、address...
建議：不要将塊級元素嵌套在行内元素中。
常用的塊級元素
| 元素 | 作用 |
| div | 無意義的塊元素 |
| h1~h6 | 标題标題 |
| p | 段落 |
| ul，li | 無序清單 |
| ol，li | 有序清單 |
| dl，dt，dd | 定義清單 |
2.行内元素
作用：在結構中填充網頁内容
特點：
- 與其他行内元素共享一行空間
- 寬高由自身決定
- 由于不用來搭建網頁結構，是以也無需通過css指定其寬度
- 行内元素中不可以嵌套塊元素
元素：span、a、img、strong、b、i、em、sub、sup...
常用的行内元素
| 元素 | 屬性 |
| span | 無意義的行内元素 |
| a | href=" " target="_blank" rel="external nofollow" 跳轉路徑 |
五、基礎标簽的使用
1.div标簽
div是一個無語義的标簽，就是一個純粹的塊元素，并且不會為它裡邊的元素設定任何的預設樣式，div元素主要用來進行頁面基本結構的搭建
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
2.h标簽
h标簽 标題标簽 在HTML中，一共有六級标題标簽 h1~h6 在顯示效果上，h1最大，h6最小，但是文字的大小我們并不關心 6級标題中，h1的最總要，表示一個網頁中的主要内容，h2~h6重要性依次降低，對于搜尋引擎來說， h1的重要性僅僅次于title，搜尋引擎檢索完title會立即檢視h1中的内容 h1标簽非常重要，它會影響到頁面在搜尋引擎中的排名，一個頁面最好隻寫一個h1标簽 一般的頁面中，我們隻使用h1 h2 h3，其他的基本不用
<h1>這是一個h1标簽</h1>
3.p标簽
段落标簽，段落标簽用于表示内容中的一個自然段 使用p标簽來表示一個段落 p标簽中的文字，會獨占一行，并且段與段之間會有一個間距
<p>
HTML是HyperText Markup Language(超文本标記語言)的縮寫，
它不是一種程式設計語言，而是一種标記語言 。它包括一系列标簽．
通過這些标簽可以将網絡上的文檔格式統一，使分散的Internet
資源連接配接為一個邏輯整體。HTML用于構造浏覽器頁面的，你可以
利用HTML元素來構造一個簡單或者複雜的頁面。
</p>
4.br标簽
表示換行标簽 br标簽是一個自結束标簽
<body>
<div>hello html!</div>
<br>
<br>
hello
</body>
5.hr标簽
hr标簽 可以在頁面中生成一個分割線
<body>
<div>hello html!</div>
<hr>
hello
</body>
6.img标簽
img标簽 告訴浏覽器要顯示一張圖檔
img标簽的格式
<img src="圖檔的url或本地路徑位址" alt="" width="100px" height="100px" title="">
src:設定一個圖檔的路徑（絕對路徑和相對路徑，最好使用相對路徑）
alt:可以用來設定在圖檔不能顯示的時，對圖檔的描述
img标簽的其他屬性 width:設定圖檔的寬度 height:設定圖檔的高度
title：用于告訴浏覽器，滑鼠懸停的時候，需要彈出的描述框中顯示什麼内容
7.a标簽
a标簽的作用 用于控制頁面與頁面之間跳轉的
<a href="指定需要跳轉的目标界面" target="_blank" rel="external nofollow" >需要展現給使用者檢視的内容</a>
<a href="https://www.baidu.com" target="_blank" rel="external nofollow" target="_blank" title="百度">百度一下</a>
a标簽中還有一個叫做target的屬性，這個屬性專門用于控制如何跳轉
self:用于目前的頁籤中進行跳轉，也就是不建立頁面跳轉，預設就是_self
_blank:用于在新的頁籤中進行跳轉，也就是建立頁面跳轉
8.video(H5新增)
作用：播放視訊 web網頁中專用的視訊格式
格式:<video src="" controls></video>
video标簽的屬性 src:告訴video标簽需要播放的視訊位址
autoplay:用于告訴video标簽是否需要自動播放視訊
controls:用于告訴video标簽是否需要控制條
poster:用于告訴video标簽視訊沒有播放之前顯示的占位圖檔
loop:一般用于做廣告視訊，用于告訴video标簽視訊播放完畢之後是否需要循環播放
muted:靜音
width/height: 和img标簽中的一模一樣
9.audio(H5新增)
作用: 播放音頻
<audio src=""></audio>
<audio>
<source src="" type="">
</audio>
注意：
audio标簽的使用和video标簽的使用基本一樣 , video中能夠使用的屬性在audio标簽中大部分都能夠使用, 并且功能都一樣 隻不過有3個屬性不能用, height/width/poster
基礎标簽大概羅列這些出來，還有一些其他的基礎标簽沒有列出，大家可以自己去找找并且嘗試一下
總結
以上就是我對HTML知識的一些整理，希望能對大家有所幫助。這是我的第一篇部落格，有什麼不好的地方，歡迎大家評論區指出或者私聊我。