HTML學習筆記 -- day01 p、h、a、img標籤簡介
一、HTML骨架
1、標準骨架
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> </head> <body> </body> </html>
2、字符集
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">中文能用的字符集有：
UTF-8：字比較全
GBK：只有漢字
注意：我們用meta標籤可以聲明當前這個html文件的字型檔，但是一定要和儲存的型別一樣，否則亂碼！（重點）
二、h 標籤和 p 標籤
1、h 系列
<h1></h1> 一級標題
<h2></h2> 二級標題
……
<h6></h6> 六級標題
2、p 標籤
HTML標籤是分等級的，HTML將所有的標籤分為兩種：容器級，文字級。
容器級的標籤，裡面可以放置任何東西；文字級的標籤裡面，只能放置文字、圖片、表單元素。
p標籤是一個文字級標籤。p 裡面只能放文字、圖片、表單元素。其他的一律不能放。
三、圖片
1、HTML插入的圖片型別
頁面上可以插入圖片，能夠插入的圖片型別是：jpg(jpeg)、gif、png、bmp。
不能往網頁中插入的圖片格式是：psd、ai
2、語法
HTML頁面不是直接插入圖片，而是插入圖片的引用地址，所以也要把圖片上傳到伺服器上
插入方法：
<img src="baby.jpg" />
img 是英語image“圖片”的簡寫
src 是英語source“資源”的簡寫，千萬不要寫成scr。
src 是img標籤的屬性，baby.jpg 是這個屬性的值。
這個標籤和我們之前學的，都不一樣，因為這個標籤不是“對兒”。自封閉標籤，也稱為單標籤。
3、alt 屬性
<img src="baby.jpg" alt="巴黎結婚照" />alt是英語alternate“替代”的意思，就表示不管因為什麼原因，當這個圖片無法被顯示的時候，出現的替代文字（有的瀏覽器不支援）。
4、相對路徑
（1）、絕對路徑
<img src="images/baby.jpg" alt="巴黎結婚照" />（2）、相對路徑
<img src="../../shizi.jpg" alt="" />注意：../要麼不寫，要麼就寫在開頭。
四、超連結
1、基本語法
<a href="1.html">結婚照</a>a 是英語anchor“錨”的意思，就好像這個頁面往另一個頁面扔出了一個錨。
a 標籤是一個文字級的標籤。
href 是英語hypertext reference超文字地址的縮寫。
2、title：懸停文字
3、target：是否在新視窗中開啟
<a href="09_img.html" title="很好看哦" target="_blank">結婚照</a>blank就是“空白”的意思，就表示新建一個空白視窗。
也就是說，如果不寫target=”_blank”那麼就是在相同的標籤頁開啟，如果寫了，就是在新的空白標籤頁中開啟。
4、完整的超連結
<a href="1.html" title="懸停文字" target="_blank">連結的內容</a>5、頁面中的錨點
頁面當中可以有錨點，所謂的錨點，就是一個小標記，這個小標記是使用者不可察覺的，使用者不知道這裡有一個標記。
錨點用name屬性來設定，一個a標籤如果name屬性（或者id屬性），那麼就是頁面的一個錨點。
6、練習：製作可以點選的圖片
<a href="1.html" title="檢視我的旅遊圖片">
<img src="images/1.png" alt="無此圖片" />
</a>五、列表
1、無序列表：ul
用來表示一個列表的語義，並且每個專案和每個專案之間，是不分先後的。
ul 就是英語unordered list，“無序列表”的意思。
li 就是英語list item ， “列表項”的意思。
注意：
li 不能單獨存在，必須包裹在ul裡面；反過來說，ul 的“兒子”不能是別的東西，只能有 li。
瀏覽器會預設的給無序列表小圓點的“先導符號”但是，我們這裡再次強調，ul的作用，並不是給文字增加小圓點的，而是增加無序列表的“語義”的。
ul的兒子，只能是 li。但是 li 是一個容器級標籤，li 裡面什麼都能放，如圖片，段落，a 標籤，甚至是 ul 都可以放。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li>廣州</li>
<li>鐵嶺</li>
</ul>
</body>
</html>
2、有序列表：ol
ol 裡面只能有 li，li 必須被 ol 包裹。li 是容器級。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<ol>
<li>北京</li>
<li>上海</li>
<li>廣州</li>
<li>鐵嶺</li>
</ol>
</body>
</html>
3、定義列表
定義列表也是一個組標籤，不過比較複雜，出現了三個標籤：
dl 表示definition list 定義列表
dt 表示definition title定義標題
dd 表示definition description 定義表述詞兒
表達的語義是兩層：
1) 是一個列表，列出了北京、上海、廣州三個專案
2）每一個詞兒都有自己的描述項。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<dl>
<dt>北京</dt>
<dd>國家首都，政治文化中心</dd>
<dt>上海</dt>
<dd>魔都，有外灘、東方明珠塔、黃浦江</dd>
<dt>廣州</dt>
<dd>中國南大門，有珠江、小蠻腰</dd>
</dl>
</body>
</html>
注意：
定義列表用法非常靈活，可以一個dt配很多dd：
還可以拆開，讓每一個dl裡面只有一個dt和dd，這樣子感覺清晰一些。
dt、dd都是容器級標籤，想放什麼都可以。
六、div和span
1、div
div和span是非常重要的標籤，div的語義是division“分割”； span的語義就是span“範圍、跨度”。
div在瀏覽器中，預設是不會增加任何的效果改變的，但是語義變了，div中的所有元素是一個小區域。
div標籤是一個容器級標籤，裡面什麼都能放，甚至可以放div自己
2、span
span也是表達“小區域、小跨度”的標籤，但是是一個“文字級”的標籤。
span裡面只能放置文字、圖片、表單元素。 span裡面不能放 p、h、ul、dl、ol、div。
3、div和span區別
span裡面是放置小元素的，div裡面放置大東西的
七、表單
1、什麼是表單
表單就是收集使用者資訊的，就是讓使用者填寫的、選擇的。
<div>
<h3>歡迎註冊本網站</h3>
<form>
所有的表單內容，都要寫在form標籤裡面
</form>
</div>form是英語表單的意思。form標籤裡面有action屬性和method屬性，在《Ajax》課程上給大家講解。稍微說一下：action屬性就是表示，表單將提交到哪裡。 method屬性表示用什麼HTTP方法提交，有get、post兩種。
2、文字框
<input type="text" />input 表示“輸入”，指的是這是一個“輸入小部件”，
type 表示“型別”，
text 表示“文字”，指的是型別是一個文字框的輸入小部件。
注意：input 是一個自封閉標籤，自此，我們學習的自封閉標籤有：
<meta name=”Keywords” content=”” />
<img src=”” alt=”” />
<input type=”text” />3、密碼框
<input type="password" />input標籤很神奇，又是文字框，又是密碼框。
到底是啥？看type屬性的值是什麼，來決定。
如果type=”text” 文字框
如果type=”password” 密碼框
4、單選按鈕
radio是“收音機”的意思，input的type的值，如果是radio就是單選按鈕
<input type="radio" name="xingbie" /> 男
<input type="radio" name="xingbie" /> 女
注意：單選按鈕，天生是不能互斥的，如果想互斥，必須要有相同的name屬性。name就是“名字”。
預設被選擇，就應該書寫checked=”checked”
5、複選框
也是input標籤，type是checkbox。
<p>
請選擇你的愛好：
<input type="checkbox" name="aihao"/> 睡覺
<input type="checkbox" name="aihao"/> 吃飯
<input type="checkbox" name="aihao"/> 足球
<input type="checkbox" name="aihao"/> 籃球
<input type="checkbox" name="aihao"/> 乒乓球
<input type="checkbox" name="aihao"/> 打豆豆
</p>
注意：複選框，最好也是有相同的name（雖然他不需要互斥，但是也要有相同的name）。
6、下拉列表
select就是“選擇”，option“選項”。
select標籤和ul、ol、dl一樣，都是組標籤。
<select>
<option>北京</option>
<option>河北</option>
<option>河南</option>
<option>山東</option>
<option>山西</option>
<option>湖北</option>
<option>安徽</option>
</select>
7、文字域
text就是“文字”，area就是“區域”。
這個標籤，是個標籤對兒。對兒裡面不用寫東西。如果寫的話，就是這個框的預設文字。
cols屬性表示columns“列”，rows屬性表示rows“行”。
值就是一個數，表示多少行，多少列。
<textarea cols="30" rows="10"></textarea>
8、三種按鈕
按鈕也是input標籤，一共有三種按鈕：
（1）、普通按鈕
<input type="button" value="我是一個普通按鈕" />
（2）、提交按鈕
<input type="submit" value="提交" />
submit就是英語“提交”的意思。這個按鈕不需要寫value自動就有“提交”文字。
這個按鈕點選，表單真的能提交。這個表單就會被提交到，form標籤的action屬性中的那個頁面中去。
（3）、重置按鈕
<input type="reset" />
reset就是“復位”的意思。
9、label標籤
<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
<input type="radio" name="sex" id="nv" /> <label for="nv">女</label>input元素要有一個id，然後label標籤就有一個for屬性，和id相同，就表示綁定了，這個label和input就有繫結關係了。