HTML 1、一套規則，瀏覽器認識的規則。 2、開發者： 學習Html規則 開發後臺程式： - 寫Html文件（充當模板的作用） ****** - 資料庫獲取數據，然後替換到html文件的指定位置（Web框架） 3、本地測試 - 找到文件路徑，直接瀏覽器打開 - pycharm打開測試 4、編寫Ht ...
HTML
1、一套規則，瀏覽器認識的規則。
2、開發者：
學習Html規則
開發後臺程式：
- 寫Html文件（充當模板的作用） ******
- 資料庫獲取數據，然後替換到html文件的指定位置（Web框架）
3、本地測試
- 找到文件路徑，直接瀏覽器打開
- pycharm打開測試
4、編寫Html文件
- doctype對應關係
- html標簽，標簽內部可以寫屬性 ====> 只能有一個
- 註釋： <!-- 註釋的內容 -->
5、標簽分類（自閉合/主動閉合 塊級標簽/內聯標簽）
- 自閉合標簽
<meta charset="UTF-8">
- 主動閉合標簽
title>老男孩</title>
6、
head標簽中
- <meta -> 編碼，跳轉，刷新，關鍵字，描述，IE相容
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
- title標簽
- <link /> 搞圖標，欠
- <style />欠
- <script> 欠
7、body標簽
- 圖標， > <
- p標簽，段落
- br，換行
======== 小總結 =====
所有標簽分為：（自閉合/主動閉合 塊級標簽/內聯標簽）
塊級標簽： div（白板），H系列（加大加粗），p標簽（段落和段落之間有間距）
行內標簽： span（白板）
標簽之間可以嵌套
標簽存在的意義，css操作，js操作
ps:chorme審查元素的使用
- 定位
- 查看樣式
- h系列
- div 塊級標簽白板
- span 內聯標簽白板
- input系列 + form標簽
input type='text' - name屬性，value="趙凡"
input type='password' - name屬性，value="趙凡"
input type='submit' - value='提交' 提交按鈕，表單
input type='button' - value='登錄' 按鈕
input type='radio' - 單選框 value，checked="checked"，name屬性（name相同則互斥）
input type='checkbox' - 覆選框 value, checked="checked"，name屬性（批量獲取數據）
input type='file' - 依賴form表單的一個屬性 enctype="multipart/form-data"
input type='rest' - 重置
<textarea >預設值</textarea> - name屬性
select標簽 - name,內部option value, 提交到後臺，size，multiple
- a標簽
- 跳轉
- 錨 href='#某個標簽的ID' 標簽的ID不允許重覆
- img 圖片
src
alt
title
- 列表
ul
li
ol
li
dl
dt
dd
- 表格
table
thead 表頭
tr 行
th列
tbody 身體
tr行
td列
colspan = '' 左右橫跨幾列
rowspan = ''上下橫跨幾行
- label
用於點擊文件，使得關聯的標簽獲取游標
<label for="username">用戶名：</label>
<input id="username" type="text" name="user" />
- fieldset
legend
- 20個標簽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--<meta http-equiv="refresh" content="3"> <!–自動刷新–>--> <!--<meta http-equiv="refresh" content="3;Url=http://www.xju.edu.cn/"> <!–自動跳轉–>--> <meta name="keywords" content="新大，新疆大學，大學，211，雙一流"> <!--關鍵字,搜索引擎關鍵字搜索用--> <meta name="description" content="新疆大學是雙一流，211，邊疆重本。。。"> <!--網站描述--> <meta http-equiv="X-UA-COMPATIBLE" content="IE=IE9;IE=IE8;IE=IE7" /> <!--網站對瀏覽器的相容--> <title>新疆大學歡迎你</title> <!--title--> <link rel="shortcut icon" href="C:\Users\Administrator\PycharmProjects\untitled\前端\html\image\aaa.png" /> </head> <body> <div> <p>p標簽 代表段落，段落與段落之間，存在間距 <br /> 'br'標簽是自閉和標簽，用於段落之間的換行</p> <h1>h1最大</h1> <h3>啊啊啊</h3> <h6>h6最小</h6> <span>標簽分為：自閉和標簽，不自閉和標簽<br /></span> <span>標簽分為：塊級標簽（h系列（加大加粗）），<br /> 或者行內標簽（內聯標簽（白板））</span> <span>空白標簽</span> <span>行內標簽</span> <div>div 是塊級標簽 也是白板</div> <div>標簽之間可以嵌套</div> <div>標簽存在的意義： 方便定位，js操作，css操作</div> <form action="url" method="get/post"> <!--當用戶輸入用戶名密碼時，利用from標簽將用戶名和麵膜以字典的形式傳給url({user:'輸入的用戶名，pwd:'輸入的密碼''})--> <input type="text" name="user" value="請輸入用戶名："> <!--單行文本框--> <br /> <input type="password" name="pwd" > <input type="button" value="登錄"> </form> <form action="https://www.sogou.com/web" enctype="multipart/form-data"> <div> <br /> <input type="text" name="query"> <input type="submit" value="搜索"> <br /> <div>請選擇性別：</div> 男: <input type="radio" name="sex" value="1"> <!--單選框，類似於選擇性別，若name相同，則幾個選項互斥，根據value來傳值--> 女: <input type="radio" name="sex" value="1"> alex: <input type="radio" name="sex" value="1"> <p>愛好:</p> 打球: <input type="checkbox" name="打球" checked="checked"> <!--覆選框 name的值一般一個覆選框一樣 checked="checked 為預設被選中 單選框也可以預設"--> 睡覺: <input type="checkbox" name="睡覺"> 看書: <input type="checkbox" name="看書"> 游戲: <input type="checkbox" name="游戲"> 吉他: <input type="checkbox" name="吉他"> <br /> <p> <input type="file" name="fname"> <!--上傳文件依賴於form標簽的 enctype="multipart/form-data" 屬性 沒這個屬性 上傳不了，這個屬性用於將選定的文件發給伺服器--> </p> <textarea name="meno">多行文本框，預設值寫在中間</textarea> <p>選擇城市()下拉框：</p> <select name="city" size="10" multiple="multiple"> <!--下拉框,伺服器端拿testarea的name，根據option中的value屬性傳數據，size表示預設顯示大小selected=selected表示預設選中，multipart=multipart為多選--> <option value="1" selected="selected">上海</option> <option value="2">成都</option> <option value="3">西安</option> </select> <!--下拉框分組--> <select> <optgroup label="河北省"> <option>石家莊</option> <option>邯鄲</option> </optgroup> <optgroup label="陝西省"> <option>西安</option> <option>咸陽</option> <option>漢中</option> </optgroup> </select> </div> <input type="submit" value="登錄"> <!-- #加上from標簽後 點擊type='submit(提交按鈕：表單)'按鈕會提交數據--> <input type="reset" value="重置"> <!--將當前form表單中用戶輸入的東西清空--> </form> </div> <!--a標簽用來跳轉超鏈接，target='_blank'在新界面打開--> <a href="ht tp://www.xju.edu.cn/" target="_blank">新疆 大學</a> <!--讓a標簽和某一標簽建立關聯，就用href關聯改標簽的id加上#--> <!--<a href="#i1">第一章節</a>--> <!--<a href="#i2">第二章節</a>--> <!--<a href="#i3">第三章節</a>--> <!--<a href="#i4">第四章節</a>--> <!--<div id="i1" style="height:600px">第一章節的內容</div>--> <!--<div id="i2" style="height:600px">第二章節的內容</div>--> <!--<div id="i3" style="height:600px">第三章節的內容</div>--> <!--<div id="i4" style="height:600px">第四章節的內容</div>--> <a href="https://www.baidu.com"> <img src="../image/1.jpg" alt="女神" title="吉澤明步" style="height:200px;width:300px"> <!--<img src="image/4.gif" alt="女神" title="吉澤明步">--> </a> <ul> <li>帶點的列表</li> <li>帶點的列表</li> <li>帶點的列表</li> </ul> <ol> <li>帶序號的列表</li> <li>帶序號的列表</li> <li>帶序號的列表</li> </ol> <dl> <dt>標題</dt> <dd>內容</dd> <dd>內容</dd> <dd>內容</dd> <dt>標題</dt> <dd>內容</dd> <dd>內容</dd> <dd>內容</dd> </dl> <table border="1" style="height:200px;width:200px"> <thead> <tr> <th>網站名稱</th> <th>網址</th> <th>跳轉</th> <th>詳情</th> </tr> </thead> <tbody> <tr> <td>百度</td> <td>百度</td> <td colspan="2">百度</td> <!--colspan=2代表左右橫跨兩列--> </tr> <tr> <td rowspan="2">百度</td> <!--rowspan=2代表上下橫跨兩列--> <td>百度</td> <td>百度</td> <td>百度</td> </tr> <tr> <td>百度</td> <td>百度</td> <td>百度</td> </tr> </tbody> </table> <fieldset> <legend>登錄</legend> <!--fieldset和legend配套使用，實現畫一個框--> <label for="username">用戶名:</label> <!--label是實現點擊文字獲取游標--> <input id="username" type="text"> <br /> <label for="pwd">密碼:</label> <input id="pwd" type="text"> </fieldset> </body> </html>
