一、html的概念
1、概念：超文本标記語言。
2、超文本，超連結；超級不僅有文本，圖檔，還有音頻，視訊等。
3、html:作用: 顯示伺服器端的響應結果。
二、網際網路三大基石
1、url:統一資源定位符，如：www.baidu.com
2、http協定：https://
3、html：顯示頁面
三、文檔結構
<!DOCTYPE html> <!--文檔的類型 h5-->
<html> <!--網頁的開始标簽-->
<head> <!--文檔的标題，字元編碼格式....-->
<meta charset="utf-8" />
<title>第一個網頁</title>
</head>
<!--顯示的内容-->
<body>
<h1>HelloWorld</h1>
</body>
</html><!--結束标簽--> 四、常用标簽
4.1梗概
1、行級元素：根據元素的大小決定所占用的空間。
img,a,embed,audio,video 2、塊級元素：獨占一行
h1-h6,p,br,hr,ul,ol,dl 3、文本标簽
h1-h6, <p>,<br/>,<hr/>,<pre> 4、圖檔标簽
<img src=”” width=”” height=”” title=”” alt=””/> 5、音頻、視訊
<embed src=”” width=”” constrols=”constrols”></embed>
<audio src=”” width=”” height=”” constrols=”constrols” > <audio>
<video src=”” width=”” height=”” constrols=”constrols” ></video> 6、超連結
<a href=”” target=””>XXXXXXXXXXXXXXX</a> 7、錨連結
<a name=” goods”>XXXXX</a>
<a href=”#goods”>YYYYY</a>
<a href=”index.html#goods”>zzzzzzzzzz</a> 8、清單标簽
（1） 無序清單 <ul type=”disc”> <li></li></ul>
（2） 有序清單 <ol type=”A”><li></li></ol>
（3） 定義清單 <dl> <dt></dt> <dd></dd></dl> 4.2 head标簽中子标簽
meta标簽 ：描述文檔，定義文檔的關鍵詞
title标簽:文檔的标題
base标簽 ：url位址
style:樣式
script:腳本
link:連結 4.2.1 title的使用
<title>第一個網頁</title> 4.2.2 meta的使用：定義了與文檔相關鍊的名稱/值 （鍵值對）
<meta charset="utf-8" /><!--單标簽 -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="第一個網頁,html文檔" />
<meta name="description" content="第一個網頁........." /> 三秒鐘後自動跳轉到url所指定的網址
<meta http-equiv="refresh" content="3;url=https://www.baidu.com" /> 4.2.3 base的使用:為頁面上所有的連結規定預設位址
<base href="https://www.baidu.com" />
<!--<base target="_self" />--> 覆寫自身頁頁
<base target="_blank" /> 建立頁面打開
<a href="">百度</a>
<a href ="">淘寶</a>
<img src=”/a.jpg”/> 路徑為 https://www.baidu.com/a.jpg 4.2.4 style：用于為html定義樣式資訊
<style type="text/css">
body{
background-color: blueviolet;
}
h1{
color: yellow;
}
</style> 4.2.5 script:用于定義用戶端的腳本資訊
<script type="text/javascript">
function test(){
alert("helloworld");
}
</script> 頁面加載 時test()被調用
<body onload="test();"> 4.3 body中的子标簽
4.3.1 文本操作的标簽
1、 标題标簽 h1-h6：塊級标簽
黑體，加粗，字号放大，自動換行
<h1>标題标簽h1</h1>
<h2>标題标簽 h2</h2>
<h3>标題标簽 h3</h3>
<h4>标題标簽 h4</h4>
<h5>标題标簽 h5</h5>
<h6>标題标簽 h6</h6> 2、段落标簽 p ：前後自動換行 塊級标簽
3、加粗 strong ,傾斜 em
4、段内換行 <br/>
5、水準線 <hr/>
6、預格式化文本 <pre>
4.3.2 圖檔，音頻，視訊
1、圖檔: img
【1】 屬性 :src 圖檔的路徑(1可以是網絡位址， 2.本地位址)
<img src="https://www.baidu.com/img/bd_logo1.png" width="200px" /><br />
<img src="https://www.baidu.com/img/bd_logo1.png" width="30%" /><!--浏覽器的頁面大小--><br />
<img src="img/SXT_2470.jpg" width="300px"/>
【2】屬性:width ,heigh (1,像素值,2，百分比<浏覽器頁面的百分比> )
隻寫一個width或者heigh,使用圖檔自動配置比例顯示
【3】 屬性:title 圖檔的标題，
【4】 屬性:alt:圖檔的替換文本 搜尋引擎所使用
<img src=”” width=”” height=”” title=”” alt=”” /> 2、音頻
embed:音頻，視訊，flash動畫
<embed src="video/青花瓷.mp3" height="200px" width="200px"></embed>
<embed src="video/1382329602.swf"></embed>
<embed src="video/蝸牛與黃鹂鳥.MP4" width="200"></embed> audio:專門的音頻檔案
<audio src="video/青花瓷.mp3" controls="controls"></audio> 3、視訊
video:專門播放視訊
<video src="video/蝸牛與黃鹂鳥.MP4" width="300" controls="controls"></video
4.3.3 a标簽
1、href: 指定一個url位址
2、target:規定在何處打開連結文檔
預設:_self: 在自身打開
_blank:建立頁面打開
_top:在頂級頁面打開
framename：在架構集中打開
用法一： 用于超連結 從一個頁面跳轉到另外一個頁面
<a href="https://www.baidu.com">百度</a><br /><!--預設打開方式是_self-->
<a href="https://www.taobao.com" target="_blank">淘寶</a> <!--target屬性，決定打開方式-->
<a href="body_demo.html">打開本站中的頁面</a> 用法二： 錨連結 用于連結到頁面中的相應位置
<h2><a name="aichi">愛吃</a></h2> 需要錨連結的位置
<a href="#aichi">愛吃</a> href寫上錨連結的名稱
<a href="index.html#aichi">愛吃</a> 4.3.4 清單
1、無序清單
<ul type="disc"> <!--type :circle 空心圓點 square 實心方塊 disc 實心圓點 type=-->
<li>使用者注冊</li>
<li>餘票查詢</li>
<li>使用者登入</li>
<li>我的保險</li>
</ul> 注意事項： type=”1”,火狐和IE中以有序清單的形式進行顯示， 谷歌不識别type=”a”,從a開始
2、有序清單
定義清單通常用于圖文混排，圖檔放到 dt中， 文本描述資訊放到dd中，dd可以有多個
<dl>
<dt><a href="#"><img src="img/photo_01.jpg" title="時尚女裝" alt="全國包郵！韓版修身長袖T恤打底衫純棉圓領T恤"/></a></dt>
<dd><a href="#">一口價：49.00</a></dd>
<dd>全國包郵！韓版修身長袖T恤 打底衫 純棉圓領T恤</dd>
</dl> 五、html實體
html中的預留字元被替換為實。
[1] 空格
[2] 一個tab鍵的距離
[3]<小于号
[4]>大于号
[5]©版權符号
[6]"雙引号 六、表格
6.1 格式
<table border="1" width="50%" cellpadding="20" cellspacing="30">
<tr>
<td>出發地</td>
<td>目的地</td>
<td>8月 22日</td>
</tr>
<tr>
<td>北京</td>
<td>成都</td>
<td><a href="#">123</a></td>
</tr>
<tr>
<td>北京</td>
<td>拉薩</td>
<td><a href="#">28</a></td>
</tr>
</table> 6.2 表屬性
1、<table></table>
table标簽中的屬性:
border:邊框的寬度
表格的寬度
cellpadding:邊框與内容之間的空白
cellspacing:格與格之間的空白 2、行<tr></tr>
3、單元格<td></td>
4、表格的表頭部分通常是居中，加粗顯示
<tr>
<th>出發地</th>
<th>目的地</th>
<th>8月 22日</th>
</tr> 5、表格進行分區塊
<table border="1" width="400">
<thead>
<tr>
<td colspan="2"><img src="img/newS.gif" /></td>
</tr>
</thead>
<tbody>
<tr>
<td><img src="img/register.jpg" /></td>
<td><a href="#">新使用者注冊</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"><img src="img/ico_tltel.gif"/></td>
</tr>
</tfoot>
</table> td的屬性:
(1)colspan:跨列，橫跨的列數<td colspan="4">北京尚學堂C02學生成績表</td>
(2)rowspan:跨行，橫跨的行數<td rowspan="4">2</td>
(3)align:表格中内容的水準對齊方式 left, center, right
(4)valign:表格中内容的垂直對齊方式 top , middle , bottom 七、表單元素
<form></form>屬性:
action：送出資料的處理位址
method：以什麼方式進行送出 get ,post
表單元素标簽：<input />
最重要的屬性:type 屬性值:
text 文本框
password 密碼框
radio 單選按鈕
checkbox多選按鈕
file檔案上傳
button：普通按鈕
submit:送出按鈕
reset:重置
image:圖檔 –》與submit相同
屬性 readonly 屬性值readonly
屬性 checked 屬性值 checked
屬性 id 屬性值 自定義
屬性 name 屬性值 自定義 案例
<form action="" method="get"> <!--表單-->
使用者名:<input type="text" name="username" id="username" value="zhangsan"/> <br /> <!--文本框 -->
密碼:<input type="password" maxlength="4" /><br /><!--密碼框-->
性别:<input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex"/>女<br />
你的興趣愛好<input type ="checkbox"/>藍球
<input type ="checkbox"/>網球
<input type ="checkbox"/>足球
<input type ="checkbox"/>撞球<br />
<input type="file" /><br />
<input type="button" value="按鈕" onclick="test();"/>
<input type="submit" value="送出" />
<input type="reset" value="重置" /><br/>
<textarea rows="8" cols="40" readonly="readonly">請認真閱讀本協定
</textarea><br />
<input type="image" src="img/next.jpg" /><br />
<select name="cardtype">
<option value="0">二代身份證</option>
<option value="1">護照</option>
</select>
</form> action ：
%E6%9D%8E%E5%9B%9:漢字的十六進制
http://127.0.0.1:8020/test_html_02/input_2.html?wd=%E6%9D%8E%E5%9B%9B&pwd=123212323&uname=zhangsan
?之前是action 中的請求位址 ,action =””送出到本頁面
?之後是請求參數
http://127.0.0.1:8020/test_html_02/input_2.html?wd=sxt&pwd=31231&uname=zhangsan
多個請求參數之間使用&連接配接
wd:是百度的搜尋框的name
sxt:是搜尋框中的value form中的method 預設是get
post：
(1)相對比較安全
(2)資料大小預設不受限制
(3)效率低，沒有緩存
get：
(1) 不安全
(2) 資料比較小，因為url位址欄有限制
(3) 效率高 有緩存 label 标簽的作用：使用者良好的體驗度
<label> 标簽的 for 屬性應當與相關元素的 id 屬性相同。
<form action="" method="post">
<label for="username">使用者名:</label><input type="text" id="username" name="wd" /><!--文本框-->
密碼 :<input type="password" name="pwd" />
性别:<input type="radio" name="sex" id="male"/><label for="male">男</label>
<input type="radio" name="sex" id="famale"/><label for="famale">女</label>
<input type="hidden" value="zhangsan" name="uname"/>
<input type="submit" id="" name="" value="送出"/>
</form> 八、架構集
網頁布局: (1)表格布局table (2)架構布局 (3)div+css布局
架構集 frameset
<frameset rows="20%,50%,*"> 分三行 cols=” 20%,50%,*”分三列
<frame name="left" src="index.html" scrolling="no" noresize="noresize"/>
<frame name="middle" src="register.html" />
<frame name="right" src="input_2.html" />
</frameset> 内聯架構 iframe
<body>
<iframe src="top.html" width="100%" height="190" scrolling="no" frameborder="0">
<p>你的浏覽器無法解析iframe内聯架構</p>
</iframe>
<iframe src="left.html" width="200" height="500" frameborder="0">
<p>你的浏覽器無法解析iframe内聯架構</p>
</iframe>
<iframe src="right.html" width="1000" height="500" scrolling="no" name="right" frameborder="0">
<p>你的浏覽器無法解析iframe内聯架構</p>
</iframe>
</body> 架構集與内聯架構共有的屬性
src: 連結位址
name: 架構的名稱
scrolling：是否顯示滾動條 yes,no,auto
frameborder：架構的邊框
widthà寬度, px,%