老男孩14期自動化運維day14隨筆和作業(一)
HTML
瀏覽器本質相當於socket客戶端，業務伺服器相當於socket服務端，建立sokcet傳輸資料，
伺服器端收到訊息進行處理，傳送資料並關閉，然後瀏覽器收到訊息展示頁面，
1.其實就是一套規則，瀏覽器認識的規則
2.開發者：
（1）學習html規則
（2）開發後臺程式：
- 寫html檔案 （充當模板的作用）
- 資料庫獲取資料，然後替換到html檔案的指定位置 （web框架就是幫我們做這些事的）
3.本地測試
（1）找到檔案路徑，直接瀏覽器開啟
（2） pycharm 開啟測試 （pycharm會自己給你起個socket）
4.編寫html檔案
（1）doctype對應關係
（2） html標籤，標籤內部可以寫屬性 ===> < html >標籤只能有一個
- 註釋用： < !-- 註釋的內容 – >
5.標籤分類
- 自閉合標籤 （就不用寫結尾） 可以寫成< meta >或者< meta />所有自閉和標籤都可以這樣 但最好是在後面加斜槓 例如< br / >
< meta charset=“UTF-8”> 就先記這個- 主動閉合標籤
< title >Title< /title>
6.
head標籤中
- 編碼，跳轉，重新整理，關鍵字，描述，IE相容>
- < title > 標題
- < link / > 裡面有個網站視窗的小圖示，還有很多先不講,或者連結css來引入css
- < style / > 樣式
- < script>
7.body標籤
- 所有的標籤分為：
- 塊級標籤：獨佔一行
H系列（加大加粗），p標籤（段落和段落之間有間距）,div標籤(白板) div是用的最多的- 行內標籤（內聯標籤）：可以多個存在一行
span標籤（白板）
- 標籤之間可以巢狀
- 標籤存在的意義，定位操作容易，以及css js操作很簡單
ps: chrome 可以審查元素的使用（重要）
- 可以定位
- 可以檢視樣式
8.body標籤詳細
-
圖示， 一個空格; > 大於;< 小於
-
p標籤，段落
-
br,換行
-
div 必須要會 （白板 塊級）
-
span 必須要會 （白板 行內）
-
h 系列必須要會（加大加粗）
-
< input > < select> < textarea >
只有input+form select textarea才能提交資料input系列+form：要全會
POST和GET差不多， GET會把資料拼接放在url上，POST是自己傳入
< form action=“http…” method=‘GET’> 提交表單
input type=“text” - name屬性，value=… value是輸入預設值
input type=“password”- password屬性,value=…
input type=“submmit” - value="提交"提交按鈕 表單
input type=“button” - valus="登入按鈕
input type=“redio” 單選框 - value,name屬性（name相同則互斥 就只能選一個的意思）
input type=“checkbox” 複選框 -value ,name屬性（批量獲取資料）
input type=“file” - 預設上傳不了,必須依賴form表單的一個屬性
input type=“reset” - 重置
< textarea name=“tx”> 預設值 < /textarea> 多行文字輸入 這個也可以提交資料到後臺
- select標籤 - name 內部opetion value ,提交到後臺，size 大小，multiple 多選
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://localhost:8888/index" method="GET">
<input type="text" name="user"/>
<input type="password" name="pwd"/>
<input type="button" value="登入1"/>
<input type="submit" value="登入2"/> <!-- 預設get提交 -->
<!--提交後 生成字典格式 {'user':...,'pwd':...}提交到後臺 -->
<!--POST和GET差不多， GET會把資料拼接放在url上，POST是自己傳入-->
</form>
<p>上傳檔案</p>
<input type="file" name="fname" />
<textarea name="tx"> ad ad </textarea>
<div>
<select name="city" > <!-- 單選 -->
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">成都</option>
<option value="4" selected="selected">南京</option>
</select>
<select name="city" multiple="multiple" size="2"> <!-- 多選 -->
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">成都</option>
<option value="4" selected="selected">南京</option>
</select>
</div>
</body>
</html>
- a標籤必會
- 跳轉 < a href=“http://www.baidu.com” targrt=…> 百度
- 錨 < a href=’#某個標籤的id’> 標籤id不允許重複
錨 跳轉到某個地方：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a> 第一章 </a>
<a> 第二章 </a>
<a href="#i3"> 第三章 </a>
<a> 第四章 </a>
<div style="height:600px;">第一章的內容</div>
<div style="height:600px;">第二章的內容</div>
<div id="i3" style="height:600px;">第三章的內容</div>
<div style="height:600px;">第四章的內容</div>
</body>
</html>
- img標籤 必會
- < img src=“1.jpg” title=“百度” style=“height:200px;width:200px;” alt=“百度”>
- title 滑鼠放上去現實 alt沒有圖片的時候顯示
預設img標籤有一個1px的邊框
去掉 為 img{
border:0;
}
- 列表標籤
<ul>
<li>a</li>
<li>b</li>
</ul>
<ol>
<li>a</li>
<li>b</li>
</ol>
<dl>
<dt>aaa</dt>
<dd>bbb</dd>
</dl>
- table標籤 （表格 必會）
thead 表頭
tbody 表格內容
tr 一行
td 一列
colspan 列合併 等於幾表示佔幾格
rowspan 行合併
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
<table border="1">
<thead>
<tr>
<th>表頭1</th>
<th>表頭2</th>
<th>表頭3</th>
<th>表頭4</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td colspan="3">1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</body>
</html>
- lable標籤 （用於點選文字，使得關聯的標籤獲取游標） 知道就行
<label for="username">使用者名稱：</label>
<input id="username" type="text" name=" user" />