HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本标記語言，超文本指的是超連結，标記指的是标簽，是一種用來制作網頁的語言，這種語言由一個個的标簽組成，用這種語言制作的檔案儲存的是一個文本檔案，檔案的擴充名為html或者htm，一個html檔案就是一個網頁，html檔案用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用浏覽器打開，浏覽器會按照标簽描述内容将檔案渲染成網頁，顯示的網頁可以從一個網頁連結跳轉到另外一個網頁。是以，我們學HTML其實就是學習标簽的使用。
第一行是文檔聲明，第二行“<html>”标簽和最後一行“</html>”定義html文檔的整體，“<html>”标簽中的‘lang=“en”’定義網頁的語言為英文，定義成中文是'lang="zh-CN"',不定義也沒什麼影響，它一般作為分析統計用。 “<head>”标簽和“<body>”标簽是它的第一層子元素，“<head>”标簽裡面負責對網頁進行一些設定以及定義标題，設定包括定義網頁的編碼格式，外鍊css樣式檔案和javascript檔案等，設定的内容不會顯示在網頁上，标題的内容會顯示在标題欄，“<body>”内編寫網頁上顯示的内容。
目前常用的兩種文檔類型是xhtml 1.0和html5。xhtml 1.0 是html5之前的一個常用的版本，目前許多網站仍然使用此版本。pc端可以使用xhtml 1.0，也可以使用html5，html5是向下相容的。兩者的差別：
1、文檔聲明和編碼聲明
2、html5新增了标簽元素以及元素屬性
html文檔代碼中可以插入注釋，注釋是對代碼的說明和解釋，注釋的内容不會顯示在頁面上，html代碼中插入注釋的方法是：
通過 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,标簽可以在網頁上定義6種級别的标題。6種級别的标題表示文檔的6級目錄層級關系，比如說： <h1>用作主标題，其後是 <h2>，再其次是 <h3>，以此類推。搜尋引擎會使用标題将網頁的結構和内容編制索引，是以網頁上使用标題是很重要的。
4.3.1 <p>标簽定義一個文本段落，一個段落含有預設的上下間距，段落之間會用這種預設間距隔開，代碼如下：
4.3.2html換行标簽
代碼中成段的文字，直接在代碼中回車換行，在渲染成網頁時候不認這種換行，如果真想換行，可以在代碼的段落中插入<br />來強制換行，代碼如下：
4.3.3 html字元實體
代碼中成段的文字，如果文字間想空多個空格，在代碼中空多個空格，在渲染成網頁時隻會顯示一個空格，如果想顯示多個空格，可以使用空格的字元實體,代碼如下：
4.3.4 在網頁上顯示 “<” 和 “>” 會誤認為是标簽，想在網頁上顯示“<”和“>”可以使用它們的字元實體，比如：
最終結果展示如下：
4.4.1 html塊标簽
1、<div> 标簽 塊元素，表示一塊内容，沒有具體的語義。
2、<span> 标簽 行内元素，表示一行中的一小段内容，沒有具體的語義。
4.4.2 含樣式和語義的标簽
1、<em> 标簽 行内元素，表示語氣中的強調詞
2、<i> 标簽 行内元素，表示專業詞彙
3、<b> 标簽 行内元素，表示文檔中的關鍵字或者産品名
4、<strong> 标簽 行内元素，表示非常重要的内容
語義化的标簽，就是在布局的時候多使用有語義的标簽，搜尋引擎在爬網的時候能認識這些标簽，了解文檔的結構，友善網站的收錄。比如：h1标簽是表示标題，p标簽是表示段落，ul、li标簽是表示清單，a标簽表示連結，dl、dt、dd表示定義清單等，語義化的标簽不多。
![web前端布局練手項目[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)