1、html簡介
1.1什么是html
html全稱：Hyper Text Markup Language(超文本標記語言)
備注：
a.超文本:頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素
b.標記:標簽，不同的標簽實現不同的功能
c.語言:人與計算機的交互工具
2、html基本標簽
2.1結構標簽（文件標簽）
<html><html>:根標簽
<head>
<title></title>:頁面的標題
</head>
<body></body>：內容
屬性：
text:文本的顏色
bgcolor:背景色
background:背景圖片
顏色的表示方式：
第一種方式：red green blue
第二種方式：#000000 #ffffff #325687 #377405
2.2排版標簽
2.2.1.注釋標簽：<!--注釋-->
2.2.2.換行標簽：<br/>
2.2.3.段落標簽：<p>文本文字</p>
特點：段與段之間有空行
屬性：align對齊方式 (left center right)
2.2.4.水平線標簽:<hr/>
屬性:
width：水平線的長度(兩種:第一種:像素表示；第二種，百分比表示)
size: 水平線的粗細 (像素表示，例如：10px)
color:水平線的顏色
align:水平線的對齊方式
2.4文字標簽（標題標簽）
2.4.1基本文字標簽
<div></div>:行級塊標簽，獨占一行，換行
<span></span>:行內塊標簽，所有內容都在同一行
作用： <div></div>:主要是結合css頁面分塊布局
<span></span>:進行友好提示信息
2.4.2標題標簽
<h1></h1>—-<h6></h6>
隨着數字增大文字逐漸變小，字體是加粗的，內置字號，默認占據一行；
2.5.1無序列表ul（***）
無序列表標簽： <ul></ul>
屬性：type :三個值，分別為
circle(空心圓) ,disc(默認,實心圓),square(黑色方塊)
列表項：<li></li>
示例如下：
<ul type="square">無序列表
<li>蘋果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
顯示效果：
2.5.2有序列表ol（***）
有序列表標簽：<ol></ol>
屬性：type：1、A、a、I、i（數字、字母、羅馬數字）
列表項： <li></li>
示例如下：
<ol type="I">有序列表
<li>蘋果</li>
<li>香蕉</li>
<li>橘子</li>
</ol>
2.5.3列表嵌套
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶
<ul>
<li>中國茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
2.6圖形標簽
<img/>自關閉標簽
屬性:
src：圖形地址
width:寬度
height:高度
border:邊框
align:對齊方式，代表圖片與相鄰的文本的相當位置（有三個屬性值：top middle bottom）
alt:圖片的文字說明
hspace 和 vspace 設定圖片邊沿上下左右空白，以免文字或其它圖片過於貼近
2.7鏈接標簽
<a></a>
屬性：
href:跳轉頁面的地址(跳轉到外網需要添加協議)；
name:名稱，錨點(回到錨點: 頂部，底部，中間)，在訪問錨點的書寫格式:#name的值 target:_self(自己) _blank(新頁面，之前頁面存在) 默認_self
表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
2.8.1普通表格（table,tr,td）
<!--border:邊框的寬度 bordercolor:邊框的顏色 cellspacing:單元格的邊距-->
<table border="1" bordercolor="red" cellspacing="0" align="center">
<tr>
<td>學號</td>
<td>姓名</td>
</tr>
<tr>
<td>1</td>
<td>aa</td>
</tr>
</table>
2.8.2表格的表頭
<table border="1" bordercolor="red" cellspacing="0" align="center">
<caption>學生表</caption>
<tr>
<th>學號</th>
<th>姓名</th>
</tr>
<tr>
<td>1</td>
<td>aa</td>
</tr>
</table>
2.8.3表格的列合並（colspan）****
<table border="1" bordercolor="red" cellspacing="0" align="center">
<tr>
<td colspan="4" align="center">學生表</td>
</tr>
<tr>
<td>學號</td>
<td>姓名</td>
<td colspan="2">各科成績</td>
</tr>
<tr>
<td>1</td>
<td>aa</td>
<td>80</td>
<td>90</td>
</tr>
</table>
顯示效果
2.8.4表格的行合並（rowspan）****
<table border="1" bordercolor="red" cellspacing="0" align="center">
<tr>
<td colspan="4" align="center">學生表</td>
</tr>
<tr>
<td>信息</td>
<td>名稱</td>
<td>價格</td>
</tr>
<tr>
<td rowspan="2">商品信息</td>
<td>哇哈哈</td>
<td>30</td>
</tr>
<tr>
<td>爽歪歪</td>
<td>90</td>
</tr>
</table>
顯示效果:
2.9文本格式化標簽
<b> 定義粗體文本。
<big> 定義大號字。
<em> 定義着重文字。
<i> 定義斜體字。
<small> 定義小號字。
<strong> 定義加重語氣。
<sub> 定義下標字。
<sup> 定義上標字。
<ins> 定義插入字。
<del> 定義刪除字
3、html表單標簽
3.1from元素
常用屬性：action表示動作，值為服務器的地址，把表單的數據提交到該地址上處理
method:請求方式：get 和post
enctype:表示是表單提交的類型
默認值：application/x-www-form-urlencoded 普通表單
multipart/form-data 多部分表單(一般用於文件上傳)
面試：get請求和post請求的區別？（*****）
get:
1.地址欄,請求參數都在地址后拼接 path?name="張三"&password="123456"
2.不安全
3.效率高
4.get請求大小有限制，不同瀏覽器有不同，但是大約是2KB
使用情況：一般情況用於查詢數據。
post：
1.地址欄：請求參數單獨處理。
2.安全可靠些
3.效率低
4.post請求大小理論上無限。
使用情況：一般用於插入刪除修改等操作
4.1.1 input元素
type: 以下為type可能要取的值：
1.1 text 普通文本
1.2 password 密碼框 密文或者掩碼
1.3 radio 表示是單選，name必須一致，
表示同一組中只能選中一個( checked ="checked" 表示選中)
1.4 checkbox 表示多選 ，name必須一致，
表示同一組中可以選多個，返回值是個數組( checked ="checked" 表示選中)
1.5 file ：表示上傳控件
以上具有輸入性質的必須要有name屬性,一開始寫value表示是默認值(以后獲取輸入框的內容要根據name來取)
以下按鈕不具有輸入性質，不需要name屬性，但是按鈕上的文字提示使用value屬性
1.6 submit 提交
1.7 reset 重置
1.9 image 圖片按鈕
以上所有input的屬性： width 設置寬度，height 設置高度 border 設置邊框、
1.10 hidden 表示隱藏域，該框的內容服務器需要，但是不想讓用戶知道(不想清楚的顯示在界面上)
4.1.2 select元素（下拉列表）
<select name="city"> <!--select標簽添加該屬性multiple="multiple"表示多選-->
<!--option表示下拉列表項-->
<option value="北京">北京</option>
<!--selected="selected"表示選中該項-->
<option value="上海" selected="selected">上海</option>
<option value="廣州">廣州</option>
<option value="杭州">杭州</option>
</select>
4.1.3 textarea元素（文本域）
需要指定輸入的區域位置大小
<textarea cols="100" rows="5"> 表示5行100列的區域可以輸入內容，該元素沒有values屬性
4、html基本標簽的綜合案例
注冊源碼：
<body style="background:mediumseagreen;" >
<form action="" method="get">
<table align="center">
<h3>注冊</h3>
<tr>
<td align="right">用戶名：</td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td align="right">密碼：</td>
<td><input type="password" name="password" id="password" ></td>
</tr>
<tr>
<td align="right">確認密碼:</td>
<td>
<input type="password" name="conf" />
</td>
</tr>
<tr>
<td align="right">性別：</td>
<td>
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" checked="checked"/>女
</td>
</tr>
<tr>
<td align="right">愛好：</td>
<td>
<input type="checkbox" name="happy" value="digdate" checked="checked" />大數據
<input type="checkbox" name="happy" value="mysql"/>數據庫
<input type="checkbox" name="happy" value="physon" />physon
<input type="checkbox" name="happy" value="java" />java
</td>
</tr>
<tr>
<td align="right">地址:</td>
<td>
<select name="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="河南" selected="selected">河南</option>
</select>
</td>
</tr>
<tr>
<td align="right">個人介紹</td>
<td>
<textarea cols="100" row="5"></textarea>
</td>
</tr>
<tr>
<td></td>
<td align="center">
<input type="submit" value="注冊" />
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
5、html的框架標簽frameset
5.1框架結構標簽frameset
框架結構標簽（<frameset>）定義如何將窗口分割為框架
每個 frameset 定義了一系列行或列
rows/columns 的值規定了每行或每列占據屏幕的面積
5.2框架標簽frame
Frame 標簽定義了放置在每個框架中的 HTML 文檔。
5.3基本的注意事項
1. 不能將 <body></body> 標簽與 <frameset></frameset> 標簽同時使用
2. 假如一個框架有可見邊框，用戶可以拖動邊框來改變它的大小。為了避免這種情況發生，可以在 <frame> 標簽中加入：noresize="noresize"。
5.4效果圖及源碼展示
5.4.1源代碼：
<!--1.框架標簽不能和body同時出現
2.frameset: border去除框架標簽的框 ，示例：border="0"
border="10px" bordercolor="yellow"
3.frame框大小不變：兩種情況:
第一種：border ="0"
第二種： noresize="noresize" 不改變大小
備注:scrolling是否顯示滾動條
yes 顯示
no 不顯示
auto 如果內容高度超過屏幕高度直接顯示滾動，
4. frame 是框，內容使用src來填充，
定位顯示到指定位置： 使用name屬性
例如：
點擊left.html的標簽跳轉內容顯示在right.html
1.給right.html的frame添加name屬性，方便定位。
2.在left.html中使用target目標定位，根據name名查找
-->
<frameset rows="200,*" border="10px" bordercolor="yellow">
<frame src="top.html" scrolling="yes" noresize="noresize" />
<frameset cols="200,*">
<frame src="left.html" scrolling="yes" noresize="noresize" />
<frame src="right.html" name="content" scrolling="yes" />
</frameset>
</frameset>
顯示效果：
6、html的其它標簽和特殊字符
6.1其他標簽
<!--該網頁的關鍵字-->
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<!--該網頁的描述-->
<meta http-equiv="description" content="this is my page">
<!--該網頁的編碼-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- href：引入css文件的地址-->
<link rel="stylesheet" type="text/css" href="./styles.css">
<!--src：js的文件地址-->
<script type="text/javascript" src=""></script>
6.2 特殊字符
< 小於號
> 大於號
& 與字符
" 引號
® 己注冊
© 版權
™ 商標
空格