一、HTML 是什么？
- HTML 指的是超文本標記語言 (Hyper Text Markup Language)
- HTML 不是一種編程語言，而是一種標記語言 (markup language)
- 標記語言是一套標記標簽 (markup tag)
- HTML 使用標記標簽來描述網頁
二、HTML基本結構
<html> ----根控制標記
<head> ---頭控制標記
<title>這是標題</title> ----標題標記
</head> ----頭控制標記
<body>
----- 我是Body！！！
</body>
</html> ----根控制標記
head部分的標簽
<title>、<base>、<link>、<meta>、<script> 以及 <style>
title
- 定義瀏覽器工具欄中的標題
- 提供頁面被添加到收藏夾時顯示的標題
- 顯示在搜索引擎結果中的頁面標題
meta
比如我百度搜索汽車時：
右擊你可以看到他head里面的詳細信息：
- 文檔描述【網站在搜索時，進行描述。】
- <meta name="description" content="汽車之家為您提供最新汽車報價，汽車圖片，汽車價格大全，最精彩的汽車新聞、行情、評測、導購內容，是提供信息最快最全的中國汽車網站。">
- 文檔關鍵詞【網站在搜索時，進行關鍵字匹配】
- <meta name="keywords" content="汽車,汽車之家,汽車網,汽車報價,汽車圖片,新聞,評測,社區,俱樂部">
- 重定向【頁面重定向】
- <meta http-equiv="Refresh"content="2;URL=https://www.baidu.com">
link用於導入css
- <link rel="stylesheet" type="text/css" href="mystyle.css" />
script用於導入js
<script type="text/javascript">document.write("Hello World!")</script>
style用於定義css
<style>
p {
background-color:red;
font-size:15px;
}
</style>
base:定義頁面上所有鏈接的默認地址或默認目標.
<base href="http://www.w3school.com.cn/i/" /> <img src="eg_smile.gif" /><br /> #引入圖片時，會和base進行拼接后再查找圖片。
body部分的標簽
1、常用標簽:<h1>
<h1~h6>:從大到小. 表示標題. <p>: 段落標簽. 包裹的內容被換行.並且也上下內容之間有一行空白. <b> <strong>: 加粗標簽. <strike>: 為文字加上一條中線. <em>: 文字變成斜體. <sup>和<sub>: 上角標 和 下角表. <br/>:換行. 單標簽 <hr>:水平線 <div> :塊，主要用於布局 <span>：內聯標簽
塊級標簽和內聯標簽區別
塊級標簽和內聯標簽 塊級標簽：<p><h1><table><ol><ul><form><div> 內聯標簽：<a><input><img><sub><sup><textarea><span> block（塊）元素的特點 ① 占一整行，新增元素新起一行； ② 高度，行高以及外邊距和內邊距都可調整； ③ 寬度缺省是它的容器的100%，除非設定一個寬度，一般都是占滿一行。 ④ 它可以容納內聯元素和其他塊元素 inline（內聯）元素的特點 ① 和其他元素都在一行上； ② 高，行高及外邊距和內邊距不可改變； ③ 寬度就是它的文字或圖片的寬度，不可改變 ④ 內聯元素只能容納文本或者其他內聯元素 對inline元素，需要注意如下 設置寬度width 無效。 設置高度height 無效，可以通過line-height來設置。 設置margin 只有左右margin有效，上下無效。 設置padding 只有左右padding有效，上下則無效。注意元素范圍是增大了，但是對元素周圍的內容是沒影響的。
2、圖形標簽: <img>
- src: 要顯示圖片的路徑.
- alt: 圖片沒有加載成功時的提示.
- title: 鼠標懸浮時的提示信息.
- width: 圖片的寬
- height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
<img src="http://www.w3school.com.cn/i/eg_tulip.jpg" alt="花朵" title="圖片標題" width="100px" height="100px">
效果圖如下：
3、 超鏈接標簽:<a>
- href:要連接的資源路徑 格式如下: href="http://www.baidu.com"
- target: _blank : 在新的窗口打開超鏈接. _self：在當前窗口打開
- name: 定義一個頁面的書簽.
- 錨點跳轉 href : #love就會跳轉到id="love"的地方
- href設置成javascript: 時，不會進行任何操作
<a href="http://www.baidu.com"><h3>點擊我跳轉到百度哦</h3></a> <a href="#" target="_blank"><h3>點擊在本頁</h3></a>
效果圖如下：
注意：target設置為_blank時，會打開一個新頁簽。設置為#時，在本頁，相當於刷新頁面。
4 、列表標簽:<ul><ol><dl>
- <ul>: 無序列表
- <ol>:有序列表
- <li>:列表中的每一項.
- <dl> 定義列表
- <dt> 列表標題
- <dd> 列表項
<dl> <dt>First term</dt> <dd>Definition</dd> <dt>Next term</dt> <dd>Definition</dd> </dl> <ul type="circle" style="background:pink"> <li>無序列表1</li> <li>無序列表2</li> <li>無序列表3</li> <li>無序列表4</li> <li>無序列表5</li> </ul> <ol type="a" style="background:green"> <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li> <li>有序列表4</li> <li>有序列表5</li> </ol>
效果圖如下：
注意：
ul：type 有：circle 空心圓，disc 實心圓，square 實心正方形， none ：前面無符號;
ol：type 有：1 ：表示有序的1,2,3； a ：表示有序的a，b，c；i ：羅馬數字i,ii,iii；雖然還可以定義為：circle、disc、square、none但現實都為1,2,3等序列；
5 、表格標簽: <table>
- border: 表格邊框.
- cellpadding: 內邊距，content和邊框的距離；
- cellspacing: 外邊距，content和content之間的距離；
- width: 像素 百分比.（最好通過css來設置長寬）
- <tr>: table row 表示一行
- <th>: table head cell 表頭
- <td>: table data cell 表數據
- rowspan: 單元格豎跨多少行
- colspan: 單元格橫跨多少列（即合並單元格）
- <th>: table header <tbody>(不常用): 為表格進行分區.
<table border="1" cellpadding="20px" cellspacing="10px" style="background:green"> <th>姓名</th> <th>年齡</th> <th>性別</th> <tr > <td colspan="2" style="color:red">胖子 男占2列</td> <td>男</td> </tr> <tr> <td rowspan="2" style="color:red">高個占2行</td> <td>11</td> <td>男</td> </tr> <tr > <td>qq</td> <td>女</td> </tr> </table><br/>
效果圖如下：
注意事項：
1、標簽、標簽的屬性、標簽的樣式、一個元素
2、cellspacing和cellpadding
6、表單標簽：<form>
<form enctype="multipart/form-data" action="admin/login" method="post"> <fieldset> <legend>用戶信息</legend> 用戶名：<input type="text" id='username' name="username" value="defaultname"><br/> 密碼:<input type="password" id='password' name="password"><br/> 性別:男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女"><br/> 興趣:籃球<input type="checkbox" name="hobby" > 足球<input type="checkbox" name="hobby" > 水球<input type="checkbox" name="hobby" > 玻璃球<input type="checkbox" name="hobby" ><br/> 上傳文件:<input type="file" name="file" ><br/> 所屬部門：<select name="department" multiple> <optgroup label="研發部"> <option value="de_01">研發1部</option> <option value="de_02" selected="selected">研發2部</option> <option value="de_03">研發3部</option> </optgroup> <optgroup label="技術部"> <option value="mercedes">運維</option> <option value="audi">開發</option> </optgroup> </select><br/> 個人說明：<textarea cols="100" rows="10">這是個人說明個人說明</textarea><br/> <button type="button">提交</button> </fieldset> </fieldset> </form>
效果圖如下：
注意：
1、input的type可以為text、password、raido、checkbox。
2、id為唯一區分標志符，而name是作為傳入后端接受數據的名稱，可以重復。比如flask里面 request.form.get('username‘)獲取用戶名。
3、raido單選框，name必須一樣，這樣才會互斥。
4、file 提交文件：form表單設置屬性enctype="multipart/form-data"
5、對於readonly="readonly"這樣的屬性，可以簡寫為readonly。
6、下拉列表中的multiple，可以選中多個。
7、textarea里面可以設置默認高度和寬度，通過cols和rows設置。
8、form表單的url和action
url為數據交互的目標URL
action為get或post，get方式提交數據后url變為http://www.test.com/admin/login?username="admin"&password="123456",用戶名和密碼都顯示傳輸，不安全；
post方式通過后台方式，不會顯示在頁面上，便於隱藏，安全。
7、框架:<frameset>
<frameset cols="25%,50%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> </frameset>
效果圖如下：
注意：
1、使用frameset標簽時，注意要去掉外層的<body></body>標簽。
8、布局:<div+css>
<div> 元素常用作布局工具，因為能夠輕松地通過 CSS 對其進行定位。
<!DOCTYPE html> <html> <head> <style> body { margin:0; } #header { background-color:black; color:white; text-align:center; padding:1px; } #nav { line-height:30px; background-color:#eeeeee; height:100px; width:100px; float:left; padding:5px; } #section { width:350px; float:left; padding:10px; } #footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; } </style> </head> <body> <div id="header"> <h4>中國</h4> </div> <div id="nav"> 北京<br> 上海<br> 深圳<br> </div> <div id="section"> <h2>上海</h2> <p> 上海市總面積6340平方公里，轄16個市轄區，屬亞熱帶濕潤季風氣候，四季分明，日照充分，雨量充沛。 </p> <p> 上海，簡稱“滬”或“申”，是gcd的誕生地，中華人民共和國直轄市，國家中心城市，超大城市，國際經濟、金融、貿易、航運、科技創新中心[1] ，首批沿海開放城市。上海地處長江入海口，是長江經濟帶的龍頭城市，隔東中國海與日本九州島相望，南瀕杭州灣，北、西與江蘇、浙江兩省相接。 </p> </div> <div id="footer"> www.example.com </div> </body> </html>
效果圖如下：
注意：
1、 設置body的margin為0，默認值為8px，不然右上角會有一點點空白；
2、選擇器id設置css用“#”，class用“。”；
3、一般使用div進行布局，比較好控制；
4、margin、padding、boder、content等概念是在CSS盒子模型時會學到；
9、編寫技巧
1、sublime插件
sublime快速生成html標簽、Vscode快速生成html標簽、Atom快速生成標簽、
安裝完emmet插件的編輯器都可以用不光是sublime,Vscode、Atom、···都可以用。
比如：ul>li*5 然后按tab鍵，會一次性出來5個li標簽。
還有其他很多快捷方式:比如div.box,div#test等方式，非常方便，值得擁有。
2、快捷鍵
一次性編輯多行，可以使用菜單欄的 拆分成行或者用Ctrl+Shift+L
3、分屏
視圖-布局-列2
view-layout-columns:2