本章內容只是對HTML簡單的概括，多少會有表述缺漏，更多細節還得讀者另行翻閱其他資料
目錄
一、思維導圖
先來一張圖走進科學，哈哈哈哈
想要保存圖片到本地，在圖片上右擊去保存即可
二、HTML（超級文本標記語言）
1.結構
<!DOCTYPE html> <!--聲明部分-->
<html lang="en"> <!--HTML開始標籤-->
<head> <!--頭部開始標籤-->
<meta charset="UTF-8"> <!--用於設置元信息,配置:charset=utf-8-->
<title>結構</title> <!--網頁標題-->
<style></style> <!--css樣式-->
</head> <!--頭部結束標籤-->
<body> <!--主體開始標籤-->
<div id="one"></div> <!--網頁元素-->
</body> <!--主體結束標籤-->
</html> <!--HTML結束標籤-->
2.網頁元素
（1）註釋
css裏的註釋/*這裏寫註釋*/
HTML裏的註釋<!--在這裏寫註釋-->
（2）屬性（屬性名不區分大小寫）
認識<div class="one"></div>其中屬性名是class 屬性值是one
使用
html
<div id="one"></div>
<div class="two"></div>
<div style="width:100px;height:200px;"></div>
css：這裏的width是css的屬性，100px是值。#one是選擇器，width:100px;是一個聲明。
#one{
width: 100px;
height: 100%;
}
.two{
width: 50px;
height: auto;
}
3.1核心屬性（絕大多數標籤可用的屬性）
id、class、style
3.2特有屬性（某些標籤特有）
例如：a標籤的href、target
img標籤的src、alt
3.3H5拓展屬性
data-xxx
<div data-one="one"></div>
（3）元素
1.1塊元素
特點：獨佔一行空間，默認寬100%，高由內容或子元素決定，也可指定寬高值。合適做頁面框架或容器。
演示：
<div>塊元素</div>
<div>塊元素</div>
<div>塊元素</div>
<span>行內元素</span>
<span>行內元素</span>
<span>行內元素</span>
- div：無自帶屬性；
- h1~h6（1-6級標題標籤）：自帶font-size、font-weight、margin屬性；
- p(段落標籤)：自帶margin屬性
- ul(無序列表)li(列表項)：自帶margin、padding、list-style屬性。
- ol(有序列表)li
- dl(有序列表)dt（列表標題）dd(列表內容)：自帶margin
H5新增塊元素：與div一樣無樣式
- header（頭）、
- nav（導航）、
- article（主體）、
- section（部分）、
- footer（腳）、
- aside（附屬）。
1.2行內元素
特點：與其他行內元素共享一行，寬高由內容決定，且不能指定寬高，不能內嵌塊元素，用於點綴網頁、填充內容，行內元素不能去設置width：100%；height:100%;去同父元素一樣大，img除外。
-
a（超鏈接）：自帶樣式color、text-decoration（字體裝飾）、cursor（規定光標顯示形狀）；特有屬性：herf{值：URL（“”）/相對路徑/絕對路徑/錨點/mailto(發郵件)}、target{值：_blank(新建窗口打開)/_self(同窗口打開)}。
-
img(圖片)：{src=‘url/相對路徑/絕對路徑’、alt=‘找不到圖片時替換的文本’ 、width:100%；根據父元素決定}
注：圖片和背景圖片的區別背景圖片作爲底色可以去覆蓋元素，而圖片一般不在其上覆蓋元素，圖片作爲元素，而背景圖片不作爲元素。 -
span:沒有自帶屬性。
-
strong（強調-粗體）
-
bold（強調-粗體）
-
b（強調-粗體）
-
i（強調-斜體）
-
em（強調-斜體）
-
textarea（多行文本）
-
input（文本框）
-
select（下拉列表）
-
u(下劃線)
1.3功能元素
特點：既不是行內元素也不是塊元素，因爲table和form裏面都含有塊級元素和行內元素，有點綴網頁作用。
table(表格):
例子：
<table class="tbl">
<caption>學生信息表</caption>
<thead>
<tr>
<th>編號</th>
<th>姓名</th>
<th>性別</th>
<th>手機號</th>
<th width="100">操作</th>
</tr>
</thead>
<!-- tbody不能缺省 -->
<tbody>
<tr>
<td rowspan="2">1</td>
<td>terry</td>
<td>male</td>
<td>18812344321</td>
<td>
<a href="">刪除</a>
<a href="">修改</a>
</td>
</tr>
<tr>
<td>terry</td>
<td>male</td>
<td>18812344321</td>
<td>
<a href="">刪除</a>
<a href="">修改</a>
</td>
</tr>
<tr>
<td>3</td>
<td>terry</td>
<td>male</td>
<td>18812344321</td>
<td>
<a href="">刪除</a>
<a href="">修改</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" align="right">合計1人</td>
</tr>
</tfoot>
</table>
- caption(表格標題)
- thead(表頭部分)
- tbody(表格主體)：>tr(行)>th(粗體居中，)/td(列)
- tfoot(表底部分)
form(表單)：用於前後臺交互，參數：action(後臺接口地址)、method(請求方式)=‘get/post’、enctype(編碼方式)=‘’。
例子：
<form action="http://***" method="post" enctype="multipart">
<table>
<tbody>
<!-- 用戶名 -->
<tr>
<td>用戶名</td>
<td><input type="text" name="username"></td>
</tr>
<!-- 密碼 -->
<tr>
<td>密碼</td>
<td><input type="text" name="password"></td>
</tr>
<!-- 真實姓名 -->
<tr>
<td>真實姓名</td>
<td><input type="text" name="nickname"></td>
</tr>
<!-- email -->
<tr>
<td>郵箱</td>
<td><input type="text" name="email"></td>
</tr>
<!-- 性別 -->
<tr>
<td>性別</td>
<td>
<label for="gender_male">
<input type="radio" name="gender" value="male" checked="checked">男
</label>
<label for="gender_famale">
<input type="radio" name="gender" value="famale">女
</label>
</td>
</tr>
<!-- 愛好 -->
<tr>
<td>愛好</td>
<td>
<label for="">
<input type="checkbox" name="sing" >唱
</label>
<label for="">
<input type="checkbox" name="dance" >跳
</label>
<label for="">
<input type="checkbox" name="say" >rap
</label>
</td>
</tr>
<!-- 註冊 -->
<tr>
<td colspan="2">
<input type="submit" value="註冊">
</td>
</tr>
</tbody>
</table>
</form>
- input:{name(必有，作爲參數識標)、value(默認值)、type（text：單行文本/password:密碼框/submit:提交按鈕/file:附件選擇器/radio:單選按鈕/checkbox:複選按鈕）不同的值決定input的形式、placeholder(提示語)、checked(單選默認)}
- label:爲input提供標記for=“”
- select（菜單）>option（菜單項）{value=“定義識標”}
- textarea(多行文本域){placeholder=‘提示語’}
3.開發流程
（1）編寫網頁
（2）本地測試
（3）部署：將項目上傳到服務器，並並部署到apache.
（4）網絡測試