title標簽
<title>網頁的標題</title>
title也是有助于SEO搜索引擎優化的
HTML不是依靠縮進來表示嵌套的，就是看標簽的包裹關系。
HTML中所有的文字之間，如果有空格、換行、tab都將被折疊為一個空格顯示。
h系列
<h1> 到 <h6> 都是標簽：
<h1></h1> 一級標題
<h2></h2> 二級標題
……
<h6></h6> 六級標題
h是容器級標簽，理論上可以放置p，ul只是法律上允許
p標簽
段落，是英語paragraph“段落”縮寫。
HTML標簽是分等級的，HTML將所有的標簽分為兩種：容器級、文本級。
顧名思義，容器級的標簽，里面可以放置任何東西；文本級的標簽里面，只能放置文字、圖片、表單元素。
p標簽是一個文本級標簽。從學習p的第一天開始，就要死死記住：p里面只能放文字、圖片、表單元素。其他的一律不能放。
試著把h放到p到里：
1 <p>
2 我是一個小段落
3 <h1>我是一個主標題</h1>
4 </p>
瀏覽器不允許你這么做，我們使用Chrome的F12審查，你會發現，瀏覽器自己把p封閉掉了，不讓你去包裹h1。
再次強調，p是一個文本級的標簽，p里面只能放文字、圖片、表單元素。
圖片
頁面上可以插入圖片，能夠插入的圖片類型是：jpg(jpeg)、gif、png、bmp。類型和類型之間有什么區別，css課上講。
不能往網頁中插入的圖片格式是：psd、ai
HTML頁面不是直接插入圖片，而是插入圖片的引用地址，所以也要把圖片上傳到服務器上。
插入方法：
1
img是英語image“圖片”的簡寫
src 是英語source“資源”的簡寫，千萬不要寫成scr。
src是img標簽的屬性，baby.jpg是這個屬性的值。
這個標簽和我們之前學的，都不一樣，因為這個標簽不是“對兒”。自封閉標簽，也稱為單標簽。
為什么？原因很簡單，如果是對兒，里面就要有內容，表示給這個內容增加語義。比如
1<h1>哈哈哈哈，我是主標題啦！！！</h1>
圖片就是一個圖片，不需要給什么文字增加語義，所以就是自己一個人活得挺好：
1<img />
我們上午學習的meta也是自封閉標簽：
1<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
alt屬性
alt屬性：
1
alt是英語alternate“替代”的意思，就表示不管因為什么原因，當這個圖片無法被顯示的時候，出現的替代文字（有的瀏覽器不支持）
相對路徑
HTML中插入圖片，所以現在有兩個文件，一個html文件，一個是jpg文件。
我們關心的就是這兩個文件的相對位置。即使這個網站項目，被用u盤拷給了別人，只要相對路徑不變。圖片一定能夠正常顯示。
相對路徑不會出現這種情況：
1aaa/../bbb/1.jpg
../要么不寫，要么就寫在開頭。
超級鏈接
一個網站，是由很多html網頁組成的，html網頁之間能夠通過超級鏈接互相跳轉，從而形成了“網”。
語法：
1<a href="1.html">結婚照</a>
a是英語anchor“錨”的意思，就好像這個頁面往另一個頁面扔出了一個錨。是一個文本級的標簽。
href是英語hypertext reference超文本地址的縮寫
a標簽的另外兩個屬性
title 懸停文本
target 是否在新窗口中打開
target實際上是“目標”的意思。
<a href="09_img.html" title="很好看哦" target="_blank">結婚照</a>
blank就是“空白”的意思，就表示新建一個空白窗口。為毛有一個_ ，就是規定，沒啥好解釋的。
也就是說，如果不寫target=”_blank”那么就是在相同的標簽頁打開，如果寫了，就是在新的空白標簽頁中打開。
完整的超級鏈接：
<a href="1.html" title="懸停文本" target="_blank">鏈接的內容</a>
關于超級鏈接的herf里面也是相對路徑
頁面內的錨點：
錨點用name屬性來設置，一個a標簽如果name屬性（或者id屬性），那么就是頁面的一個錨點。
1<a name="wdzp">我的作品</a>
2或者：
3<a id="wdzp">我的作品</a>`
如果有一個超級鏈接，指向頁面中的錨點，那么就是：
1<a href="#wdzp">點擊我就查看我的作品</a>
a是一個文本級的標簽
比如一個段落中的所有文字都能夠被點擊，那么應該：
p包裹a：
1<p>
2 <a href="">段落段落段落段落段落段落</a>
3</p>
而不是a包裹p：
1<a href="">
2 <p>
3 段落段落段落段落段落段落
4 </p>
5</a>
列表標簽
無序標簽
無序列表，用來表示一個列表的語義，并且每個項目和每個項目之間，是不分先后的。
ul就是英語unordered list，“無序列表”的意思。
li 就是英語list item ， “列表項”的意思。
你會發現，這是我們學習的第一個“組標簽”，就是要么不寫，要么就要寫一組。
1 <ul>
2 <li>北京</li>
3 <li>上海</li>
4 <li>廣州</li>
5 <li>鐵嶺</li>
6 </ul>
也就是說，所以的li不能單獨存在，必須包裹在ul里面；反過來說，ul的“兒子”不能是別的東西，只能有li。
瀏覽器會默認的給無序列表小圓點的“先導符號”
但是，我們這里再次強調，ul的作用，并不是給文字增加小圓點的，而是增加無序列表的“語義”的。
有序標簽
ordered list 有序列表，用ol表示
1 <ol>
2 <li>小蘋果</li>
3 <li>月亮之上</li>
4 <li>最炫民族風</li>
5 </ol>
也就是說，ol和ul就是語義不一樣，怎么使用都是一樣的。
ol里面只能有li，li必須被ol包裹。li是容器級。
ol這個東西用的不多，如果想表達順序，大家一般也用ul：
定義列表
定義列表也是一個組標簽，不過比較復雜，出現了三個標簽：
dl表示definition list 定義列表
dt表示definition title 定義標題
dd表示definition description 定義表述詞兒
dt、dd只能在dl里面；dl里面只能有dt、dd
1 <dl>
2 <dt>北京</dt>
3 <dd>國家首都，政治文化中心</dd>
4 <dt>上海</dt>
5 <dd>魔都，有外灘、東方明珠塔、黃浦江</dd>
6 <dt>廣州</dt>
7 <dd>中國南大門，有珠江、小蠻腰</dd>
8 </dl>
定義列表用法非常靈活，可以一個dt配很多dd：
定義列表用法非常靈活，可以一個dt配很多dd：
dt、dd都是容器級標簽，想放什么都可以。所以，現在就應該更加清晰的知道：
用什么標簽，不是根據樣子來決定，而是語義。
div和span
div和span是非常重要的標簽，div的語義是division“分割”； span的語義就是span“范圍、跨度”。
CSS課程中你將知道，這兩個東西，都是最最重要的“盒子”。
1<div>
2 <h3>中國主要城市</h3>
3 <ul>
4 <li>北京</li>
5 <li>上海</li>
6 <li>廣州</li>
7 </ul>
8 </div>
9
10 <div>
11 <h3>美國主要城市</h3>
12 <ul>
13 <li>紐約</li>
14 <li>洛杉磯</li>
15 <li>華盛頓</li>
16 <li>西雅圖</li>
17 </ul>
</div>
div在瀏覽器中，默認是不會增加任何的效果改變的，但是語義變了，div中的所有元素是一個小區域。
div標簽是一個容器級標簽，里面什么都能放，甚至可以放div自己
span也是表達“小區域、小跨度”的標簽，但是是一個“文本級”的標簽。
就是說，span里面只能放置文字、圖片、表單元素。 span里面不能放p、h、ul、dl、ol、div。
span里面是放置小元素的，div里面放置大東西的：
1 <p>
2 簡介簡介簡介簡介簡介簡介簡介簡介
3 <span>
4 <a href="">詳細信息</a>
5 <a href="">購買</a>
6 </span>
</p>
div標簽是最最重要的布局標簽，至于class是什么意思，下午說：
1<div class="header">
2 <div class="logo"></div>
3 <div class="nav"></div>
4 </div>
5 <div class="content">
6 <div class="guanggao"></div>
7 <div class="dongxi"></div>
8 </div>
<div class="footer"></div>
所以，我們親切的稱呼這種模式叫做“div+css”。div標簽負責布局，負責結構，負責分塊。css負責樣式。
表單
表單就是收集用戶信息的，就是讓用戶填寫的、選擇的。
1<div>
2 <h3>歡迎注冊本網站</h3>
3 <form>
4 所有的表單內容，都要寫在form標簽里面
5 </form>
</div>
form是英語表單的意思。form標簽里面有action屬性和method屬性
method屬性表示用什么HTTP方法提交，有get、post兩種
文本框
<input type="text" />
input表示“輸入”，指的是這是一個“輸入小部件”，
type表示“類型”，
text表示“文本”，指的是類型是一個文本框的輸入小部件。
value表示“值”，value屬性就是默認有的值，文本框中已經被填寫好了：
<input type="text" value="默認有的值" />
密碼框
1<input type="password" />
也就是說，input標簽很神奇，又是文本框，又是密碼框。
到底是啥？看type屬性的值是什么，來決定。
如果type=”text” 文本框
如果type=”password” 密碼框
單選按鈕
Paste_Image.png
只能選一個，術語叫做“互斥”。
1<input type="radio" name="xingbie" /> 男
2<input type="radio" name="xingbie" /> 女
radio是“收音機”的意思，input的type的值，如果是radio就是單選按鈕。
非常像以前的收音機，按下去一個按鈕，其他的就抬起來了。所以叫做radio。
單選按鈕，天生是不能互斥的，如果想互斥，必須要有相同的name屬性。name就是“名字”。
1<input type="radio" name="xingbie" /> 男
2<input type="radio" name="xingbie" /> 女
默認被選擇，就應該書寫checked=”checked”
1<input type="radio" name="sex" checked="checked">
復選框
也是input標簽，type是checkbox。
1<p>
2 請選擇你的愛好：
3 <input type="checkbox" name="aihao"/> 睡覺
4 <input type="checkbox" name="aihao"/> 吃飯
5 <input type="checkbox" name="aihao"/> 足球
6 <input type="checkbox" name="aihao"/> 籃球
7 <input type="checkbox" name="aihao"/> 乒乓球
8 <input type="checkbox" name="aihao"/> 打豆豆
9</p>
復選框，最好也是有相同的name（雖然他不需要互斥，但是也要有相同的name）
下拉列表
select就是“選擇”，option“選項”。
select標簽和ul、ol、dl一樣，都是組標簽。
1<select>
2 <option>北京</option>
3 <option>河北</option>
4 <option>河南</option>
5 <option>山東</option>
6 <option>山西</option>
7 <option>湖北</option>
8 <option>安徽</option>
9</select>
多行文本框（文本域）
text就是“文本”，area就是“區域”。
1<textarea cols="30" rows="10"></textarea>
這個標簽，是個標簽對兒。對兒里面不用寫東西。如果寫的話，就是這個框的默認文字。
cols屬性表示columns“列”，rows屬性表示rows“行”。
值就是一個數，表示多少行，多少列。
三種按鈕
按鈕也是input標簽，一共有三種按鈕：
普通按鈕：
1<input type="button" value="我是一個普通按鈕" />
button就是英語“按鈕”的意思。value就是“值”的意思，按鈕上面顯示的文字。
提交按鈕：
2<input type="submit" />
submit就是英語“提交”的意思。這個按鈕不需要寫value自動就有“提交”文字。
這個按鈕點擊，表單真的能提交。這個表單就會被提交到，form標簽的action屬性中的那個頁面中去。
前端開發工程師，只需要關心頁面的美、樣式、板式、交互。至于數據的保存、讀取，都是后臺工程師做的事情。
3重置按鈕：
1<input type="reset" />
reset就是“復位”的意思。
label標簽
本質上講，“男”、“女”這兩個漢字，和input元素沒有關系。
1<input type="radio" name="sex" /> 男
2<input type="radio" name="sex" /> 女
label就是解決這個問題的。
1<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
2<input type="radio" name="sex" id="nv" /> <label for="nv">女</label>
input元素要有一個id，然后label標簽就有一個for屬性，和id相同，就表示綁定了，這個label和input就有綁定關系了。
復選框也有label：
1<input type="checkbox" id="kk" />
2<label for="kk">10天內免登陸</label>
什么表單元素都有label。
HTML雜項
HTML注釋
任何的程序、代碼都有注釋，注釋就是給程序員看的，不影響程序的。
適當的注釋，能夠讓我們的程序更加可讀，所以用中文提示自己，這里的程序是干什么的。
1 <!--這里是頭部，還沒有做完，準備加兩天班弄完-->
2 <div>頭部</div>
3 <!--這里是陳偉弄的，跟我沒關系-->
4 <div>主要內容</div>
5 <!--這里是高俊負責的-->
6 <div>頁尾</div>
HTML注釋的語法
1<!--注釋的內容-->
Sublime中按ctrl+/ 就是注釋
字符實體
我們想在頁面上輸出“<h1>”這些字符，但是HTML認為這是一個標簽，還沒封閉。
1好高興啊，今天我們學習了<h1>標簽，老師說這個標簽是主標題的語義。
所以，
1<
就是<的字符實體，什么意思呢？就是用常用字符表示這些符號的方式。
lt 就是英語less than 小于的意思；
1>
就是>的字符實體。
gt就是greater than 大于的意思。
1?
就是? 版權符號。
1
nbsp就是英語non-breaking spacing不打斷空格的意思，就是空格。
所以：
1哈 哈
空出了4個字的格，可以防止空白折疊現象。
歡迎關注公共號
