1.什么是HTML？
HTML是HyperText Markup Language(超文本標記語言)的縮寫
HTML是一種標記語言，使用特殊語法或標記來向瀏覽器描述網頁的結構，HTML元素由開始標簽和結束標簽構成，標簽之間是文本內容，不同的標簽可以讓文本內容以標題、段落、串列等形式展現，“超文本是指頁面中可以存在鏈接、圖片、音樂、視頻、程式等非文字元素，
同時HTML也是一種規范、一種標準，它通過標記符號來標記要顯示的網頁中的各個部分，網頁本身是一種文本檔案，通過在文本檔案中添加標記符，告訴瀏覽器該如何顯示其中的內容（如文字如何處理，畫面如何安排，圖片如何顯示等），瀏覽器按順序閱讀網頁檔案，然后根據標記解釋和顯示其標記的內容，但不會指出書寫出錯的標記，且不停止解釋執行程序，因此，編制者只能通過顯示效果來分析出錯原因和出錯部位，
2.HTML的特點
超文本標記語言檔案制作不是很復雜，但功能強大，支持不同資料格式的檔案嵌入，這也是萬維網（www）盛行的原因之一，其主要特點有：
1.簡易性：超文本標記語言版本升級采用超集方式，從而更靈活方便，
2.可拓展性：超文本標記語言的廣泛應用帶來了加強功能，增強識別符號等要求，超文本標記語言采取子類元素的方式，為系統拓展帶來保證，
3.平臺無關性：雖然個人計算機大行其道，但使用MAC等其他機器的大有人在，超文本標記語言可以使用在廣泛的平臺上，這也是萬維網盛行的另一個原因，
4.通用性：HTML是網路的通用語言，一種簡單、通用的全置標記語言，它允許網頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論是有的是什么型別的電腦或者瀏覽器，
3.開發環境搭建
- 記事本：特點：無代碼提示、無代碼高亮顯示、用戶界面不友好；
- Sublime（推薦）：特點：運行速度快、代碼提示、高亮顯示、插件拓展、html插件emmet、sublime text3安裝emmet插件；
- VScode（推薦）：特點：豐富的插件支持
- 可進行git管理；
- Idea：特點集成開發工具、類似DW，node，npm...運行速度較慢；
HTML是在瀏覽器上決議執行的，每種瀏覽器對相同的html代碼決議可能產生不同的結果，所以我們需要安裝多種主流瀏覽器進行兼容性測驗；
現在比較主流的瀏覽器有：
- Google Chrome（谷歌）
- Firefox（火狐）
- Opera
- Safari
- Microsoft Edge
3.HTML的結構
<!DOCTYPE html>
<html lang="en">
<head>
<!--
meta標簽用來設定網頁中的一些元資料，比如網頁的字符集、關鍵字、簡介等，
單標簽元素也叫自結束標簽，撰寫一個自結束標簽時可以在開始標簽中加一個"/"
-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html><!DOCTYPE html>
html5標準網頁宣告，撰寫網頁時一定要將此宣告寫在網頁的最上方，不加此宣告就表示頁面采用瀏覽器本身的決議標準，這樣可能會造成頁面在不同的瀏覽器出現不同的顯示效果，或者會讓瀏覽器無法正常顯示頁面，
<html lang="en">
lang是單詞language的縮寫，意思是語言，“en”表示英語，“zh-CN”表示中文，
<meta charset="UTF-8">
字符編碼，瀏覽器會根據字符編碼進行決議，
<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport：設備的螢屏
width=device-width：width屬性控制設備的螢屏寬度，假設網站被被不同螢屏解析度的設備瀏覽，那么將width設定為device-width可以確保網頁能正確的在不同的設備上顯示，
initial-scale=1.0：確保網頁加載時以1：1的比例呈現，不會有任何的縮放，
<title>Hello HTML</title>
瀏覽器標簽頁上的標題，
<!-- -->
注釋，注釋用來記錄編程思路，解釋說明業務功能，不會被瀏覽器編譯，
HTML中只有一種注釋，
4.HTML的元素
單標簽元素
僅有一個標簽 ，
雙標簽元素
由開始標簽和結束標簽組成
標簽可以進行嵌套使用，即可以將一個標簽寫入到另外一個標簽內，建議鏡面嵌套，
<p>段落<strong>加強</strong>標簽</p>1.塊級元素
元素：html、boby、div、p、h1~h6、ul->li、ol->li、dl->dd/dt
header、footer、nav、article、section 、aside 、address...
作用：搭建網頁結構
特點：①.獨占一行空間
②.默認寬度為100%
③.高度由子元素或內容決定
④.可以通過CSS指定其寬高
2.行內元素
元素：span、a、img、strong、b、i、em、sub、sup...
作用：在結構中填充網頁內容
特點：①.與其他行內元素共享一行空間
②.寬高由自身決定
③.由于不用來搭建網頁結構，所以無需CSS指定其寬度
④.行內元素中不可以嵌套塊元素
5.元素的屬性
HTML標簽都擁有自己的屬性，屬性應該出現在元素的開始標簽內部，屬性名和屬性值通過"="分割，屬性與屬性之間通過空格分割，屬性名不區分大小寫，屬性值區分大小寫并且屬性值可以使用雙引號引起來，
如：
<div id="" class=""> </div>核心屬性：絕大多數標簽都具有的屬性，
title：滑鼠懸停元素時顯示的提示資訊
id：元素的唯一表示
class：表示一類元素
style：設定元素樣式
6.其他
空白：
在檔案中無論出現多少個空白或者換行，瀏覽器都決議為一個空白，
物體：
在HTML中，某些字符是預留的，例如：不能使用小于號<和大于號>，這是因為瀏覽器會誤認為它們是標簽，如果希望正確地顯示預留字符，我們必須在 HTML 源代碼中使用字符物體（character entities)，物體以&符開始，以；結尾，
HTML、CSS和JavaScript之間的關系
單純的HTML只能在網頁中按照固定的格式放入元素，想要各個元素按照我們想要的方式在頁面中僅進行排列，我們還需要借助CSS（級聯樣式表）告訴瀏覽器如何顯示你在 HTML 中寫入的文本和其他內容，HTML 和 CSS 控制頁面的內容和樣式，JavaScript 則用于頁面互動，
結構：HTML用于描述頁面的結構
表現：CSS用于控制頁面中元素的樣式
行為：JavaScript用于回應用戶操作
如果把網頁比作一張人臉，那么HTML就是構成人臉的五官，CSS可以控制五官的形狀、大小和位置等，而JavaScript則可以讓這張臉擁有各種各樣的表情動作，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/292199.html
標籤：其他