Web前段介紹
一、什麼是網頁
網頁是基于浏覽器的應用程式，是資料展示的載體。
二、網頁的組成
1. 浏覽器
代替使用者向伺服器發請求
接收并解析資料展示給使用者
2. 伺服器
存儲資料
處理并響應請求
3. 協定
規範資料在傳輸過程中的打包方式
三、開發前的準備
1. 運作環境：浏覽器，設定chrome為預設浏覽器，作為網頁檔案的運作環境。
2. 調試工具：浏覽器自帶的調試工具，使用快捷鍵"F12"或右鍵"檢查"打開。
3. 開發工具：不限，選用個人習慣的即可。（Sublime、VSCode、EditPlus、PyCharm等）
HTML文法介紹
一、HTML介紹
超文本标記語言（HyperText Markup Language）浏覽器能夠識别和解析的語言，通過标簽的形式建構頁面結構和填充内容。
二、标簽
标簽也稱為标記或元素，用于在網頁中标記内容
1. 文法：标簽使用< >為标志，标簽名不區分大小寫，推薦小寫表示
2. 分類：
雙标簽：成對出現，包含開始标簽和結束标簽。例：<html></html>
單标簽：隻有開始标簽，沒有結束标簽，可以手動添加“/”表示閉合。例：<br><br/>
3.标簽屬性：
标簽屬性書寫在開始标簽中，使用空格與标簽名隔開，用于設定目前标簽的顯示内容或者修飾顯示效果。
由屬性名和屬性值組成，屬性值使用雙引号表示。例：<meta charset="utf-8">
同一個标簽中可以添加若幹組标簽屬性，使用空格間隔。例：<img src="lily.jpg" width="200px" height="200px">
三、使用
1. 建立網頁檔案，使用.html或.htm作為檔案字尾
2. 添加網頁的基本結構
<html>
<head>
<title>網頁标題</title>
<meta charset="utf-8">
</head>
<body>
網頁主體内容
</body>
</html> 3. 标簽嵌套：在雙标簽中書寫其他标簽，稱為标簽嵌套；
- 嵌套結構中，外層元素稱為父元素，内層元素稱為子元素；
- 多層嵌套結構中，所有外層元素統稱為祖先元素，内層元素統稱為後代元素；
- 平級結構互為兄弟元素；
4. HTML文法規範
标簽名不區分大小寫，建議使用小寫
注釋文法： 快捷鍵Ctrl+/ <!-- 此處為注釋 -->
常用标簽介紹
一、基本結構解析
快捷鍵：!+table
<!-- 文檔類型聲明，便于浏覽器正确解析标簽及渲染樣式 -->
<!doctype html>
<!-- HTML文檔開始的标志 -->
<html>
<!-- 頭部設定，可在head中設定網頁标題，網頁頁籤圖示，引入外部的資源檔案，設定網頁相關資訊等 -->
<head>
<!-- 設定網頁标題，顯示在網頁頁籤上方 -->
<title>網頁标題</title>
<!-- 設定網頁字元編碼 -->
<meta charset="utf-8">
</head>
<!-- 網頁主體部分，顯示網頁主要内容 -->
<body>
網頁主體内容
</body>
</html><!-- 文檔結束-->
二、body中常用标簽
1.文本标簽
标題标簽：自帶加粗效果，從h1到h6字型大小逐級遞減
<h1>一級标題</h1>
<h2>二級标題</h2>
<h3>三級标題</h3>
<h4>四級标題</h4>
<h5>五級标題</h5>
<h6>六級标題</h6> 段落标簽：<p>段落文本</p>
普通文本标簽：
<span>行分區标簽，用于對特殊文本特殊處理</span>
<b>加粗标簽</b>
<strong>強調标簽，效果同b标簽</strong>
<label>普通文本标簽，常與表單控件結合實作文本與控件的綁定</label>
<i>斜體标簽</i>
<u>删除線标簽</u> 格式标簽：
浏覽器會忽略代碼中的換行和空格，隻顯示為一個空格。想要實作頁面中的換行，需要借助于換行标簽。
<br>
水準線标簽，在頁面中插入一條水準分割線
<hr>
字元實體：
某些情況下，浏覽器會将一些特殊字元按照HTML的方式解析，影響顯示結果。此時需要将這類字元轉換為其他的形式書寫
例：
- 使用 < 在頁面中呈現 "<"
- 使用 > 在頁面中呈現 ">" （<學習pthong> #<學習python>）
- 使用 在頁面中呈現一個空格
- 使用 © 在頁面中呈現版權符号"©"
- 使用 ¥ 在頁面中呈現人民币符号"￥"
容器标簽：常用于頁面結構劃分，結合CSS實作網頁布局
<div id="top">頁面頂部區域</div>
<div id="main">頁面主體區域</div>
<div id="bottom">頁面底部區域</div>
2.圖檔與超連結标簽
圖檔标簽 ：
<img src="">：用于在網頁中插入一張圖檔。
- 屬性 src 用于給出圖檔的URL，必填。
- 屬性 width/height 用于設定圖檔尺寸，取像素值，預設按照圖檔的原始尺寸顯示。
- 屬性 title 用于設定圖檔标題，滑鼠懸停在圖檔上時顯示
- 屬性 alt 用于設定圖檔加載失敗後的提示文本
文法：
<img src="" width="" height="" title="" alt="">
<img src="northStar.jpg" width="500px" title="northStar" alt="此處為圖檔">
超連結标簽：使用者可以點選超連結實作跳轉至其他頁面
1. 屬性 href 用于設定目标檔案的URL，必填。
2. 屬性 target用于設定目标檔案的打開方式，預設("\_self")在目前視窗打開。可以設定建立視窗打開目标文本(取"_blank")
<!--重新整理-->
<a href="">連結位址為空</a>
<!--\'#\'表示錨點連接配接，連結至指定檔案的指定位置-->
<a href="#">連結位址為#</a>
<!--跳轉2号位置-->
<a href="05_anchor.html#two" target="_blank">2号位置</a>
<!--阻止預設跳轉，既不重新整理也不跳轉-->
<a href="javascript:void(0)">阻止預設的跳轉行為</a>
<a href="http://www.taobao.com" target="_self">淘寶</a>
<a href="http://www.baidu.com" target="_blank">百度</a> <!--目錄超連結-->
<a href="#one">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="#last">5</a>
<!--添加錨點-->
<a name="one"></a>
<h1 style="height:300px;background:green;">１.超連結</h1>
<h1 style="height:300px;background:green;">２.超連結</h1>
<h1 style="height:300px;background:green;">３.超連結</h1>
<h1 style="height:300px;background:green;">４.超連結</h1>
<a name="last"></a>
<h1 style="height:300px;background:green;">５.超連結</h1>
<!--滑鼠點1或者點5會跳轉到1或者5的位置--> 三、常用結構标簽
1.清單标簽
有序清單（ordered list） 取值"1"/"a"/"A"/"i"/"I",
預設使用阿拉伯數字辨別每條資料
<ol>
<li>list item 清單項</li>
<li>list item 清單項</li>
<li>list item 清單項</li>
</ol> 無序清單（unordered list） ul中可取：circle/square（實心方塊）/none(取消項目符号)
預設使用實心圓點辨別清單項
<ul>
<li>list item 清單項</li>
<li>list item 清單項</li>
<li>list item 清單項</li>
</ul> 清單嵌套：在已有清單中嵌套添加另一個清單，常見于下拉菜單
<ol>
<li>
西遊記
<ul>
<li>孫悟空</li>
<li>孫悟空</li>
<li>孫悟空</li>
</ul>
</li>
</ol> <ol type="i">
<li>老王</li>
<ul>
<li>抽煙</li>
<li>喝酒</li>
<li>燙頭</li>
</ul>
<!--父子嵌套實作下拉菜單-->
<li>
老李
<ul>
<li>抽煙</li>
<li>喝酒</li>
<li>燙頭</li>
</ul>
</li>
<li>老張</li>
</ol>
<ul>
<li>抽煙</li>
<li>喝酒</li>
<li>燙頭</li>
</ul> 練習
2.表格标簽
表格由行和單元格組成，常用于直接的資料展示或輔助排版,基本結構如下
<!-- 建立表格标簽 -->
<table>
<!-- 建立行标簽 -->
<tr>
<!-- 行中建立單元格以顯示資料 -->
<td>姓名</td>
<td>年齡</td>
<td>班級</td>
</tr>
<tr>
<!--th表示單元格，自帶文本加粗和居中效果-->
<th>迪麗熱巴</td>
<th>20</td>
<th>002</td>
</tr>
</table> 單元格合并：用于調整表格結構，分為跨行合并和跨列合并，合并之後需要删除被合并的單元格，保證表格結構完整
| 單元格屬性 | 作用 | 取值 |
| colspan | 跨列合并單元格 | 無機關數值 |
| rowspan | 跨行合并單元格 | 無機關數值 |
行分組标簽：可以将表格中的若幹行劃分為一組，表示表頭，表尾及表格主體，預設在表格中建立的所有行都會被自動加入表格主體中
<table border="1px" width="300px" height="300px">
<thead></thead>
<tfoot></tfoot>
<tbody></tbody>
</table> <table border="1px" width="300px" height="300px">
<!--表格内部結構劃分（行分組）：
将若幹行劃分為表頭，表尾和表格主體，
預設所有的行都會被自動加入表格主體中（tbody）
-->
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>班級</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="3">總人數：</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>老王</td>
<td>35</td>
<td>001</td>
</tr>
<tr>
<td>老李</td>
<td>35</td>
<td>001</td>
</tr>
</tbody>
</table> 練習
3.表單标簽
表單用于采集使用者的資訊并送出給伺服器，由表單元素和表單控件組成。表單元素form負責送出資料給伺服器，表單控件負責收集資料。
表單使用<form></form>
例如：
<form action="" method="" enctype="">
<!--此處為表單控件-->
</form> | 屬性名 | 取值 |
| action | 設定資料的送出位址 |
| method | 設定資料的送出方式，預設為get方式，可以設定post |
| enctype | 設定資料的編碼，射擊二進制資料送出（例如圖檔，檔案，音頻等），必須設定資料的送出方式為post，編碼類型為"multipart/form-data" |
表單控件使用（重點）
表單控件用于采集使用者資訊，可設定以下标簽屬性
| 屬性名 | 取值 |
| type | 設定控件類型 |
| name | 設定控件名稱，最終與值一并發給伺服器 |
| value | 設定控件的值 |
| placeholder | 設定輸入框中的提示文本 |
| maxlength | 設定輸入框中可輸入的最大字元數 |
| checked | 設定單選按鈕或複選按鈕的預設選中 |
| selected | 設定下拉菜單的預設選中 |
<body>
<!--網頁表單-->
<!--form負責送出資料給伺服器.标簽屬性:
action指定資料的送出位址
method指定資料的送出方式,預設為get
enctype指定資料的編碼方式,預設轉換字元串,
拼接在URL後面(urlencoded),
如果涉及二進制資料(圖檔,音視訊等),必須設定送出方式為post,
同時指定編碼類型為multipart/form-data-->
<form action="/login" method="get" enctype="application/x-www-form-urlencoded">
<!--表單控件-->
<p>
使用者姓名:<input type="text" name="username" placeholder="使用者名由數字和字母組成" maxlength="10">
</p>
<p>
使用者密碼:<input type="password" name="userpwd" placeholder="請輸入密碼">
</p>
<p>
使用者性别:
<!--一組按鈕的控件名稱必須保持一緻-->
<!--checked預設選中-->
<input type="radio" name="gender" value="boy" checked="checked">男
<input type="radio" name="gender" value="girl">女
</p>
<p>
興趣愛好:
<!--label for id 實作文本與控件的綁定,
将label标簽的屬性for取值為對應控件的id值:
1.使用label标簽表示文本
2.為相應控件添加id辨別
3.label與控件綁定:for屬性值與id屬性值保持一緻-->
<input type="checkbox" name="hobby" value="smoke" checked id="smoke">
<label for="smoke">抽煙</label>
<input type="checkbox" name="hobby" value="masage" id="masage">
<label for="masage">保健</label>
</p>
<!--隐藏域(了解):将一些伺服器端需要,
但是使用者不需要了解的資料送出過去,對使用者不可見-->
<input type="hidden" name="uid" value="001">
<!--下拉菜單-->
<select name="city" id="">
<!--預設選中第一個option,可以手動設定selected表示選中-->
<option value="beijing">北京</option>
<option value="shangshai">上海</option>
<option value="guangzhou">廣州</option>
<option value="shenzhen" selected>深圳</option>
</select>
<!--檔案選擇框:涉及二進制資料送出,必須使用post方式,
同時設定編碼類型為multipart/form-data-->
使用者頭像:<input type="file" name="uimg">
<p>
<!--功能按鈕-->
<!--1.送出按鈕,點選時送出資料到背景,
可以設定value屬性,表示按鈕的顯示文本-->
<input type="submit" value="注冊">
<!--2.重置按鈕,點選時将表單還原至初始狀态-->
<input type="reset" value="重填">
<!--3.普通按鈕,需要自定義點選處理-->
<input type="button" value="點選">
<!--button标簽表示按鈕,标簽内容即為按鈕顯示文本
書寫在form中,相當于submit送出按鈕;
書寫在表單外,相當于普通按鈕,需要自定義點選操作-->
</p>
<button>form内</button>
</form>
<button>form外</button>
</body> 練習