前端的學習
1. html的學習
1.1 label标簽的使用
舉例：我們想要點選使用者名的時候，光标就自動進入input表單元素中時，我們就采用label标簽。
性别：
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
<label for="sex1">女</label>
<input type="radio" name="sex" id="sex1">
<label for="username">使用者名：</label><input type="text" id="username"
1.2 select标簽的使用
注意：使用selected表示預設選項
1.3 textarea标簽的使用
1.4 一個比較簡單的例題用來測試學習成果
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>綜合案例-注冊頁面</title>
</head>
<body>
<h4>青春不常在，抓緊談戀愛</h4>
<table width="600" >
<!-- 第一行 -->
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" id="nan"> <label for="nan"> <img src="images/man.jpg" > 男 </label>
<input type="radio" name="sex" id="nv"> <label for="nv"><img src="images/women.jpg" > 女</label>
</td>
</tr>
<!-- 第二行 -->
<tr>
<td>生日:</td>
<td>
<select>
<option>--請選擇年份--</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
</select>
<select>
<option>--請選擇月份--</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>--請選擇日--</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
</tr>
<!-- 第三行 -->
<tr>
<td>所在地區</td>
<td><input type="text" value="北京思密達"></td>
</tr>
<!-- 第四行 -->
<tr>
<td>婚姻狀況:</td>
<td>
<input type="radio" name="marry" checked="checked">未婚 <input type="radio" name="marry"> 已婚 <input type="radio" name="marry"> 離婚
</td>
</tr>
<!-- 第五行 -->
<tr>
<td>學曆:</td>
<td><input type="text" value="博士後"></td>
</tr>
<!-- 第六行 -->
<tr>
<td>喜歡的類型:</td>
<td>
<input type="checkbox" name="love" > 妩媚的
<input type="checkbox" name="love" > 可愛的
<input type="checkbox" name="love" > 小鮮肉
<input type="checkbox" name="love" > 老臘肉
<input type="checkbox" name="love" checked="checked"> 都喜歡
</td>
</tr>
<!-- 第七行 -->
<tr>
<td>個人介紹</td>
<td>
<textarea>個人簡介</textarea>
</td>
</tr>
<!-- 第八行 -->
<tr>
<td></td>
<td>
<input type="submit" value="免費注冊" >
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" checked="checked"> 我同意注冊條款和會員加入标準
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#" target="_blank" rel="external nofollow" > 我是會員，立即登入</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h5>我承諾</h5>
<ul>
<li>年滿18歲、單身</li>
<li>抱着嚴肅的态度</li>
<li>真誠尋找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
2. CSS的學習
CSS組成：選擇器 {樣式}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>體驗CSS文法規範</title>
<style>
/* 選擇器 {樣式} */
/* 給誰改樣式 { 改什麼樣式} */
p {
color: red;
/* 修改了文字大小為12像素 */
font-size: 12px;
}
</style>
</head>
<body>
<p>有點意思</p>
</body>
</html>
注意：選擇器和空格之間需要加空格，且CSS的内容寫在head之間，html的内容寫在body之間。
2.1 CSS代碼風格
2.2 選擇器的學習
2.2.1 基礎選擇器
1.類選擇器（用 . ）
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基礎選擇器之類選擇器</title>
<style>
/* 類選擇器口訣: 樣式點定義 結構類(class)調用 一個或多個 開發最常用*/
.red {
color: red;
}
.star-sing {
color: green;
}
.memeda {
color: pink;
}
</style>
</head>
<body>
<ul>
<li class="red">冰雨</li>
<li class="red">來生緣</li>
<li>李香蘭</li>
<li class="memeda">生僻字</li>
<li class="star-sing">江南style</li>
</ul>
<div class="red">我也想變紅色</div>
</body>
</html>
多類名的使用友善代碼的複用，簡化操作
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>利用類選擇器畫三個盒子</title>
<style>
.box {
width: 150px;
height: 100px;
font-size: 30px;
}
.red {
/* 背景顔色 */
background-color: red;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<div class="box red">紅色</div>
<div class="box green">綠色</div>
<div class="box red">紅色</div>
</body>
</html>
2. id選擇器（用 # ）
注意：id選擇器隻能調用一次，一旦有人使用此id，其他人均不可使用，這是與class選擇器的差別（通俗的講，id相當于身份證号，class相當于姓名）
3.通配符選擇器（用 * ）
2.2.2 複合選擇器
3. CSS字型屬性
如果屬性中有多個字型，那麼系統會預設第一種，如果第一種不存在，那麼使用第二種，如果設定字型均不存在，那麼使用系統自帶的字型
4. CSS文本樣式
注意：文本縮進這個屬性隻針對文本的第一行而言。具體案例如下：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS文本外觀之文本縮進</title>
<style>
p {
font-size: 24px;
/* 文本的第一行首行縮進 多少距離 */
/* text-indent: 20px; */
/* 如果此時寫了2em 則是縮進目前元素 2個文字大小的距離 */
text-indent: 2em;
}
</style>
</head>
<body>
<p>打開北京、上海與廣州的地鐵地圖，你會看見三張縱橫交錯的線路網絡，這代表了中國最成熟的三套城市軌道交通系統。</p>
<p> 可即使這樣，在北上廣生活的人依然少不了對地鐵的抱怨，其中談及最多的問題便是擁擠——對很多人而言，每次擠地鐵的過程，都像是一場硬仗。更何況，還都是敗仗居多。</p>
<p> 那麼，當越來越多的二線甚至三線城市迎接來了自己的地鐵，中國哪裡的地鐵是最擁擠的呢？</p>
</body>
</html>
注意：預設情況下，文本高度是16px
5. CSS的引入方式
5.1 内部樣式表
内部樣式表就是将CSS代碼抽取出來，可以放到html中的任何位置但是一般寫到head标簽中的style标簽中
5.2 行内樣式表
直接在所要修改的内容所在的标簽中設定style，然後書寫屬性
5.3 外部樣式表
在外部樣式表中寫CSSD代碼時不需要寫style标簽。寫完之後通過Link标簽将html和css檔案進行連接配接使用。
6. 綜合案例
制作網頁一般需要兩步：1.搭建html網頁頁面。2.通過CSS來美化頁面
7. chrome調試工具
7.1 打開調試工具
注意：通過f12或者右鍵點選檢查均可
7.2 使用調試工具