網頁：是基于瀏覽器的應用程序，是數據展示的載體。html負責結構；css負責表現；JavaScript負責行為。
* 網頁的訪問
* 瀏覽器
* 代替用戶向服務器發請求
* 接收并解析數據展示給用戶
* 服務器
* 存儲數據
* 處理并響應請求
* 協議
* 規范數據在傳輸過程中的打包方式
* 開發前的準備
* 運行環境：瀏覽器，設置chrome為默認瀏覽器，作為網頁文件的運行環境。
* 調試工具：瀏覽器自帶的調試工具，使用快捷鍵"F12"或右鍵"檢查"打開。
* 開發工具：不限，選用個人習慣的即可（VSCode、Sublime、PyCharm等）。
1.1 HTML概述
1.1.1 概念
超文本標記語言（HyperText Markup Language）：瀏覽器能夠識別和解析的語言，通過標簽的形式構建頁面結構和填充內容
1.1.2 標簽
標簽也稱為標記或元素，用于在網頁中標記內容
1. 語法：
標簽使用< >為標志，在< >里寫標簽名和屬性值，標簽名不區分大小寫，推薦小寫
注釋語法： <!-- 此處為注釋 -->
2. 分類：
- 雙標簽：成對出現，包含開始標簽和結束標簽。例：<html></html>
- 單標簽：只有開始標簽，沒有結束標簽，可以手動添加“/”表示閉合。例：<br>
2. 標簽屬性：
標簽屬性書寫在開始標簽中，使用空格與標簽名隔開，用于設置當前標簽的顯示內容或者修飾顯示效果。由屬性名和屬性值組成，屬性值使用雙引號表示。例：<meta charset="utf-8">
同一個標簽中可以添加若干組標簽屬性，使用空格間隔。例：
<a href="http://www.tmooc.cn" target="_blank">達內慕課網</a>
1.1.3 使用
1. 創建網頁文件，使用.html或.htm作為文件后綴
2. 添加網頁的基本結構
<!doctype html>
<html>
<head>
<title>網頁標題</title>
<meta charset="utf-8">
</head>
<body>
網頁主體內容
</body>
</html>
專業的開發工具支持HTML代碼補全功能，如VSCode中，創建好HTML頁面以后可以輸入英文感嘆號(!)然后按tab鍵補全頁面基本結構(不同的開發工具補全的基本結構有細微的差別，可以忽略)。
3. 標簽嵌套
在雙標簽中書寫其他標簽，稱為標簽嵌套
嵌套結構中，外層元素稱為父元素，內層元素稱為子元素；
多層嵌套結構中，所有外層元素統稱為祖先元素，內層元素統稱為后代元素；
平級結構互為兄弟元素。
1.2 常用標簽介紹
1.2.1 基本結構解析
1.2.2 body中常用標簽
文本標簽：
1. 標題標簽h系列：<h1>.....<h6>,1到6級重要程度遞減，獨占一行
2. 段落標簽p標簽：表示該內容是一個段落，獨占一行
3. 普通文本標簽：<span>行分區標簽，用于對特殊文本特殊處理</span>
格式標簽：
1. 換行標簽br標簽：單標簽，效果是標簽后文字強行換行
2. 水平線標簽hr標簽：單標簽，在頁面顯示一條水平橫線
字符實體：
<
在頁面顯示 "<"
>
在頁面顯示 ">"
在頁面顯示 一個空格
?
在頁面顯示 版權符號"?"
￥
在頁面顯示 人民幣符號"￥"
容器div標簽：
常用于頁面結構劃分，結合css實現網頁布局
<div id="top">頁面頂部區域</div>
<div id="main">頁面主體區域</div>
<div id="bottom">頁面底部區域</div>
圖片與超鏈接標簽
圖片標簽 <img src="" width="" height="" title="" alt="">：
src 用于給出圖片的URL，必填。
width/height 用于設置圖片尺寸，取像素值，默認按原尺寸顯示。
title 用于設置圖片標題，鼠標懸停在圖片上時顯示
alt 用于設置圖片加載失敗后的提示文本
超鏈接標簽：用戶可以點擊超鏈接實現跳轉至其他頁面，例如：<a href="#" target="_self">淘寶</a>
href 用于設置目標文件的URL，必填。
Target：文件的打開方式，默認在當前窗口打開。新建窗口打開(取"_blank")
音頻：<audio src=”路徑” controls autoplay loop ></audio>
視頻：<video src=”路徑” controls autoplay muted loop ></video>
1.2.3 常用結構標簽
1、列表標簽
有序列表（ordered list）：默認使用阿拉伯數字標識每條數據
<ol>
<li>list item 列表項</li>
<li>list item 列表項</li>
</ol>
無序列表（unordered list）：默認使用實心圓點標識列表項
<ul>
<li>list item 列表項</li>
<li>list item 列表項</li>
</ul>
列表的嵌套: ul>li*3>ol>li*2
2、表格標簽
表格：由行和單元格組成，常用于直接的數據展示或輔助排版,結構如下：
單元格合并：用于調整表格結構，分為跨行合并和跨列合并，合并之后需要刪除被合并的單元格，保證表格結構完整
colspan：跨列合并單元格
rowspan：跨行合并單元格
例如：
<table width="300px" border="1px" cellspacing="0">
<tr align="center">
<!-- 跨列合并刪同一行的下一列 -->
<td colspan="2">1行1列</td>
<!-- <td>1行2列</td> -->
<td>1行3列</td>
</tr>
<tr>
<!-- 跨行合并刪下一行的同一列 -->
<td rowspan="2">2行1列</td>
<td>2行2列</td>
<td>2行3列</td>
</tr>
<tr>
<!-- <td>3行1列</td> -->
<td>3行2列</td>
<td>3行3列</td>
</tr>
</table>
3、表單標簽
表單用于采集用戶的信息并提交給服務器，由表單元素和表單控件組成。表單元素form負責提交數據給服務器，表單控件負責收集數據。
- 表單使用<form></form>
<form action="post" method="post" enctype="multipart/form-data">
屬性名
取值
action
數據的提交地址
method
數據的提交方式，默認為get方式，可以設置為post
enctype
數據的編碼類型。
涉及二進制數據提交（如圖片，文件，音視頻等），必須設置數據的提交方式為post,編碼類型"multipart/form-data"
"multipart/form-data"表示提交文件使用
autocomplete="off"表示關閉填充提示
表單控件使用：表單控件用于采集用戶信息，可設置以下標簽屬性
標簽
屬性名
屬性值：作用
副屬性：作用
Input
type
text：文本框
placeholder :輸入框中默認顯示的提示文本；
maxlength/minlength:最大/小輸入長度
name:給填充數據起名，輸入內容的控件一定要有；
checked:單選/都選默認選中；
value：控件中填充的值；
selected：下拉菜單默認選項
password:密碼
radio:單選框
checkbox:多選框
file:文件上傳
date：時間選擇框
button:普通按鈕
submit:提交按鈕
reset：重置按鈕
textarea
文本域
select
option
下拉選項
示例如下：
<!-- 文本輸入框 -->
用戶：<input type="text" placeholder="姓名" maxlength="10" minlength="4">
密碼：<input type="password" name="pwd">
<!-- 單選輸入框，checked表示默認選中 value必須要有，表示不同選項值 -->
性別：<input type="radio" name="sex" value="m" checked>男
<input type="radio" name="sex" value="w" checked>女
<!-- 復選框 -->
愛好：<input type="checkbox" name="young" value="1">插花
<input type="checkbox" name="young" value="2" checked>程序員
<!-- 文件上傳 -->
靚照：<input type="file" name="image">
<!-- 時間選擇框 -->
生日：<input type="date" name="birth">
<!-- 按鈕 -->
<input type="button"> 普通按鈕
<button></button> 普通按鈕
<input type="submit" value="提交"> 提交按鈕
<input type="reset" value="重置">
<!-- 文本域輸入框 -->
介紹下自己：<textarea name="self" cols="30" rows="10"></textarea>
<!-- 下拉菜單 -->
所在地區：<select>
<option value="db" selected>東北</option>
<option value="hn" selected>河南</option>
</select>
