超文本标記語言（Hyper Text Mark Language），簡稱HTML，是一種用于建立網頁的标準标記語言。
一、開發工具vs code:全棧開發工具
Hbuilder:純前端開發工具
sublime:純文字編輯器，可配置成強大的開發工具
二、浏覽器渲染原理浏覽器本質上是一個渲染引擎，可以把html代碼渲染成人類更容易接受的符号。
<!DOCTYPE html> 啟動浏覽器渲染引擎的版本
<html>
<head> 告知浏覽器的預位置
<meta charset="utf-8"> 字元集解碼
<title>百度一下</title> 标簽的标題
</head>
<body> 元素包含了可見的頁面内容
<h1>第一個标題</h1> 定義了一個h1級的标題 h1-h6 從大到小
<p>第一個段落。</p> 定義了一個段落
</body>
</html>
HTML文檔結構是一個html元素為根節點，其下包含head和body。
head标簽用于告知浏覽器渲染器的相關配置。body才是浏覽器需要渲染的内容。
三、HTML核心标簽HTML标簽根據排版的不同可以分為兩種：
塊标簽(block tags)[1] 獨占一行，垂直方向排序。
[2] 可以設定寬高，
行内标簽(inline tags)[1] 在一行内并排排序，水準方向排列
[2] 不能設定寬高，内容撐開寬高
有語義标簽标簽有特定的含義，例如顯示圖檔的标簽img，播放音頻的标簽audio，播放視訊的标簽video。有語義标簽不能用在其他用途。
無語義标簽标簽沒有特定含義，标簽什麼都可以顯示，一般作為容器，可以用于頁面布局。例如:div/span等。
3.1 塊标簽 3.1.1 div無語義标簽塊标簽，一般作用容器用于頁面布局。
<body>
<div style="height:100px;background:red;">hello world</div> test
</body>
通過<h1> - <h6> 标簽來定義，字号從大到小
<h1>我是标題</h1>
<h2>我是标題</h2>
3.1.3 段落與換行<p>我是段落</p>
12 <br /> 換行
34
3.1.4 HTML清單<ol>(orderid list) 表示有序清單
<li>表示清單項，必須位于ol中
<ol>
<li>我是第一項</li>
<li>我是第二項</li>
<li>我是第三項</li>
</ol>
輸出：
1.我是第一項
2.我是第二項
3.我是第三項
<ul>(unordered list) 表示無序清單
<li>表示清單項，必須位于ul中
<ul>
<li>我是清單1</li>
<li>我是清單2</li>
<li>我是清單3</li>
</ul>
輸出：
·我是清單1
·我是清單2
·我是清單3
<dl>表示定義清單 defined list
<dt>表示定義标題 defined title
<dd>表示對自定義标題的描述 defined description
<dl>
<dt>标題</dt>
<dd>
内容
</dd>
</dl>
表格table是由行（tr）構成的，行是由列（td）構成的。
<table > 邊框
<tr>
<td>aaa1</td>
<td>aaa2</td>
<td>aaa3</td>
</tr>
<tr>
<td>bbb1</td>
<td>bbb2</td>
<td>bbb3</td>
</tr>
</table>
輸出：
aaa1 aaa2 aaa3
bbb1 bbb2 bbb3
colspan:單元格向右跨越幾列
rowspan:單元格向下跨越幾行
<table >
<tr>
<td colspan="3">aaa2</td>
</tr>
<tr>
<td>aaa1</td>
<td>aaa2</td>
<td>aaa3</td>
</tr>
</table>
向右跨3列
<table >
<tr>
<td rowspan="3">bbb1</td>
<td>aaa2</td>
</tr>
<tr>
<td>aaa2</td>
</tr>
<tr>
<td>aaa2</td>
</tr>
</table>
向下跨3行
3.2 行内标簽 3.2.1 span無語義行内标簽，作為容器使用。
<span style="background:red;">Lorem, ipsum dolor.</span>
使用lorem*n可以随機創造n個無序英文内容填充
通過标簽<a>來定義
<a href="http://www.baidu.com" target="_blank" rel="external nofollow" >這是一個連結</a>
在 href 屬性中指定連結的位址。
絕對路徑:從盤符開始的路徑就是絕對路徑。
相對路徑:沒有盤符，從目前路徑開始。目前操作的檔案所在的路徑就是目前路徑，用.表示。
空連結
<a href="###" target="_blank" rel="external nofollow" >空連結</a>
頁面内跳轉成為錨點
#與id
<body>
<ul>
<li><a href="#young" target="_blank" rel="external nofollow" >早年經曆</a></li>
<li><a href="#art" target="_blank" rel="external nofollow" >演藝經曆</a></li>
</ul>
<div id="young">
<h3>早年經曆</h3>
<p> 、、、</p>
</div>
<div id="art">
<h3>演藝經曆</h3>
<p> 、、、</p> </div>
</body>
通過标簽<img>定義
img 表示圖檔,有語義标簽。
src表示圖檔的位址。
alt 圖檔加載失敗後的提示文本
title 滑鼠懸停的提示文本
<img src="./img/1.jpg" alt="">
這三個都表示強調。
<var>我是強調</var>
<strong>我是強調</strong>
<em>我是強調</em>
實際開發過程中，三個标簽會被降級成無語義标簽用于容器。
作為背景開發人員，如果需要沒見過的标簽 => 測試屬于行内标簽還是塊标簽。
四、form表單HTML 表單用于收集不同類型的使用者輸入，向背景送出資料。
<form action="" method="POST">
input 元素
</form>
action 表示背景處理程式。
method 表示送出方式get/post
舉個栗子：
<!-- form -->
<form action="###" method="POST">
<!-- 1.單行文本輸入框 -->
使用者名:<input type="text" name="user" /> <br />
密碼:<input type="password" name="pwd" /> <br />
<!-- 2.多行文本輸入框 -->
<textarea cols="30" rows="10" name="info"></textarea> <br />
<!-- 3.單選按鈕 -->
<input type="radio" name="sex" checked value="男"> 男
<input type="radio" name="sex" value="女"> 女
<br />
<!-- 4.多選 -->
愛好:
<input type="checkbox" checked name="hobby" value="寫代碼"> 寫代碼
<input type="checkbox" name="hobby" value="打遊戲"> 打遊戲
<input type="checkbox" name="hobby" value="旅遊"> 旅遊
<input type="checkbox" name="hobby" value="泡妞"> 泡妞
<br />
<!-- 5.下拉清單 -->
理想的城市:
<select name="">
<option value="">請選擇...</option>
<option value="廣州">廣州</option>
<option value="深圳">深圳</option>
<option selected value="北京">北京</option>
<option value="上海">上海</option>
</select>
<br />
<!-- 6.隐藏域 -->
<input type="hidden" value="10">
<!-- 6.按鈕 -->
<input type="button" value="普通按鈕" />
<input type="reset" value="重置" />
<input type="submit" value="送出" />
</form>
總結：
[1] form 用于送出表單,input等表單元素不能脫離form使用。
[2] form 是塊元素，input等表單元素都是行内元素,且可以設定寬高。