HTML知識點總結(jié)
一.什么是html？
HTML（HyperText Markup Language） 超文本標記語言，運行在瀏覽器端。
二.HTML基本結(jié)構(gòu)
<!doctype html>???????????????????????????????????????????? 聲明文檔類型
<html>????????????????????????????????????????????????????????????根標記標簽??? 雙標簽
??????? <head>
??????????????? <title>網(wǎng)頁標題</title>
??????????????? <meta charset="utf-8">?????????????????設(shè)置字符編碼的類型,utf-8是萬國碼
??????? </head>
??????? <body>
??????? </body>
</html>
三.段落標簽
<p>段落的內(nèi)容</p>
元數(shù)據(jù)標記定義HTML頁面中的相關(guān)信息，語法格式如下：
<meta? name=""? content="">
<meta? name="keywords"? content="html,xhtml,css,javascript">??????????????????? 設(shè)置搜索的關(guān)鍵字
<meta? name="description"? content="這是一個網(wǎng)頁的描述">??????????????????????????描述
四.圖片標簽
<img src=""? alt=""? />圖片標簽??? 單標記標簽
屬性：
1.src??????? 引入圖片路徑
2.alt?????????替代文字???? 當圖片加載不出來時，用來替代圖片的文字
3.width?????設(shè)置圖片的寬度????? 值：數(shù)字?? 默認單位是像素
4.height??? 設(shè)置圖片的高度????? 值：數(shù)字? ?默認單位是像素
5.title???????? 提醒文字?? ?當鼠標放到圖片上時的提醒文字
路徑：
?1.當圖片和html文件在同一級目錄下，直接寫圖片名字
?2.當圖片所在的文件夾和html文件在同一級目錄下，先寫文件夾名稱,再寫圖片名稱???? 例如：xx文件夾/xx.jpg
3.當圖片和html文件所在的文件夾在同一個目錄下，用 ../ 跳出當前目錄，然后再寫圖片名稱????????? ?../xx.jpg
4.當圖片所在的文件夾和html文件所在的文件夾在同一個目錄下，用 ../ 跳出當前目錄，然后寫圖片所在的文件夾名稱，最后寫圖片名稱?????????? ../圖片文件夾名/xx.jpg
五.標題標簽
<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>
共同點：都是標題標簽????? ?字體加粗，都有默認的外邊距
不同點：字體大小不一樣???? ? h1~h6依次減小
六.列表
1.無序列表??????? 沒有先后順序之分
<ul>
?????? <li>列表項1</li>
?????? <li>列表項2</li>
??????? .....
</ul>
2.有序列表? ????? 有次序
<ol>
?????????<li>列表項1</li>
???????? <li>列表項2</li>
????????? .....
</ol>
3.定義列表
<dl>
???????? <dt>列表項（術(shù)語）</dt>
???????? <dd>對列表項的說明</dd>
</dl>
七.字體排版標簽
1.加粗
<b></b>???? ?表示加粗
<strong></strong>??? 加粗??? 主旨表強調(diào)
2.傾斜
<i></i>??????? 表示傾斜
<em></em> ??? 傾斜??? 主旨表強調(diào)
3.上下標
<sub></sub>???? 表示下標
<sup></sup>???? 表示上標
八.超鏈接
<a? href="">超鏈接</a>
屬性：
1.href???????? 跳轉(zhuǎn)的路徑
?????? a)路徑????? 相對路徑或絕對路徑
???????b)mailto:郵箱地址
?????? c)錨點????? #id值?? 如：回到頂部
2.target?????? 鏈接打開的方式
??????? a)_blank? ? 在新窗口中打開
??????? b)_self????? _parent????? _top
九.熱點區(qū)域
<img src="圖片路徑"?? alt=""?? usemap="#name值"? />
<map? name="name值"?? id="name值" >
???????? <area? shape=""???? coords=""??? href=""??? target=""? />
???????? .....
</map>
area標簽的屬性：
1.shape??? ? 形狀
??????? a)rect?????? 矩形
??????? b)circle???? 圓形
??????? c)poly?????? 多邊形
2.coords????? 坐標
???????? a)如果shape=”rect” ,coords=”數(shù)值1,數(shù)值2,數(shù)值3,數(shù)值4”????????? 數(shù)值1和數(shù)值2代表矩形左上角頂點的坐標，數(shù)值3和數(shù)值4代表右下角頂點的坐標
???????? b)如果shape=”circle”, coords=”數(shù)值1，數(shù)值2，數(shù)值3”??????????? 數(shù)值1和數(shù)值2代表圓心坐標，數(shù)值3代表圓的半徑
???????? c)如果shape=”poly” , coords=”數(shù)值1，數(shù)值2，數(shù)值3，數(shù)值4,.......”????????????? 每兩個數(shù)值代表一個多邊形頂點的坐標
3.href?????? ? 熱點區(qū)域跳轉(zhuǎn)的鏈接
4.target????? 跳轉(zhuǎn)的方式，在新窗口打開
十.框架
1.行內(nèi)框架
<iframe? src="路徑"></iframe>
屬性：
?1)src????????? 引入框架的路徑
?2)frameborder??????????? 框架的邊框
???? 值： 1???????? 默認?? 有邊框
????????????? 0??????? ?無邊框
3)scrolling?????????? 框架的滾動條
????值： yes??????????默認?? 有滾動條
???????????? no?????????? 無滾動條
4)width??? height??????????? 設(shè)置行內(nèi)框架的大小
2.框架集?????????? 不能和body共用
<frameset??? cols="30%,400px,*">
?????????? <frame??? src=""? />
?????????? <frame??? src="" />
?????????? <frame?? src="" />
????????????.......
</frameset>
frameset的屬性：
1）cols?（列）或 rows（行）?????????? ?值：數(shù)值 或 百分比 或 *（剩下所有）
?2）frameborder??????????? 框架的邊框
值： 1????????? 默認?? 有邊框
???????? 0????????? 無邊框
frame的屬性：
1）src?????????????????? 引入框架的路徑
2）scrolling?????????? 當前框架是否有滾動條
值： yes????????? 默認?? 有滾動條
??????? ?no?????????? 無滾動條
3）noresize?????????? 不能調(diào)整框架大小
十一.table表格
1.表格的基本結(jié)構(gòu)
<table>
?????? <tr>
???????????? <th>表格的標題</th>???????????????????????? th默認字體加粗，水平、垂直方向都居中
????????????? <td>表格的單元格</td>??????????????????? td只默認垂直方向居中，水平方向居左
????????????? ......
????????</tr>
??????? ......
</table>
table的屬性：
?1）border??????? 邊框
2）cellspacing?????????? 單元格與單元格之間的間隙
3）cellpadding?????????? 內(nèi)容與單元格四周邊框的距離
2.單元格的合并
1）列合并???? colspan=”合并單元格的個數(shù)”?????????? 水平合并
2）行合并??????rowspan=”合并單元格的個數(shù)”???????? 垂直合并
十二.表單
<form? action="'? method="">
????????? <input? type=""?? name=""? value="" />
</form>
1.form的屬性：
action????????? 行為????????? 提交的路徑（服務(wù)器地址）
method?????????? 方式????????? 提交的方式
?????? 值：1.get??????? 提交后，提交的內(nèi)容會出現(xiàn)在地址欄里，安全性較低；提交的數(shù)據(jù)的大小有限制
?????????????? 2.post???????? 提交后，提交的內(nèi)容不會出現(xiàn)在地址欄里，安全性較get方式高；提交的數(shù)據(jù)大小無限制。
2.input的屬性：
1）type?????? 類型
????? 值：
???????a)??? ?text????????? 文本框
?????? b)???? password?????????? 密碼框
???????c)??????checkbox?????????? 復(fù)選框
???????d)??????radio????????????????? 單選框??????????????name必須保持一致
?????? e)????? hidden??????????????? 隱藏域
???????f)?????? file????????????????????? 文件上傳框
?????? g)??????submit??????????????? 提交按鈕
?????? h)?????? reset????????????????? 重置按鈕
???????i)????????button??????????????? ?一般按鈕
2）name?????? 名字
3）value??????? 值??????? 初始值
label?????? 是一個行內(nèi)元素
復(fù)選框默認被選中??? checked
<input? type="checkbox"?? checked />
讓按鈕不可用,變灰??????? disabled
?只讀???? ?readonly
點文字可以把復(fù)選框選中或取消：
<label>文字<input? type="checkbox" /></label>
<label? for="fav">文字</label><input? type="checkbox"? id="fav" />
單選框和復(fù)選框用法類似
4.文本域（多行文本框）
<textarea? cols=""? rows=""? placeholder=”提醒文字”></textarea>
5.下拉選擇框
<select>
????????? <option? value=""></option>
????????? <option?? value=""></option>?
???????????.....
</select>
option默認被選中?????????? selected
6.按鈕
button放在form里面才有用
<button>提交按鈕</button>
<button? type="submit">提交按鈕</button>
<button?? type="reset">重置按鈕</button>
<button? type="button">一般按鈕</button>
注釋
<!--? 注釋語句? -->
其他
無自帶樣式的塊級元素?????????? <div></div>
無自帶樣式的行內(nèi)元素??????????<span></span>
換行?????? <br />
水平線??????? <hr??? width="數(shù)字或百分比"??? align="left或right或center" />??????? ? align水平對齊方式
特殊字符：
?????? 空格? ?????? ??????  ?????  ? ??
?????? 大于號????? >
???????小于號????? <
??????? 版權(quán)???????? ©
塊級元素?????????? 獨占一行???? 能設(shè)置寬度和高度，行高，外邊距，內(nèi)邊距等?????????????? display：?????????? block
p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd,hr,div,form,option
行內(nèi)（內(nèi)聯(lián)）元素??????????? 能和其他元素在一行顯示???? 不能設(shè)置寬度和高度?????????????? display:inline
b,strong,i,em,sub,sup,span,a,label
行內(nèi)（內(nèi)聯(lián)）塊級元素? ??????? ?能和其他元素在一行顯示???????? 能設(shè)置寬度和高度，行高，外邊距，內(nèi)邊距等???????????? ?display:inline-block
img,input,textarea,select,button
顏色樣式：style="color:rgb(255,0,0);"
??????????????????style="color:#f00;"
??????????? rgb:????????????????????????????????????????????????????????? 十六進制:
?????????????????????? r?????????? red??????????? (255,0,0)?????????????????????????????????#f00
????????????????????? ?g?????????? green?????????(0,255,0)???????????????????????????? ? #0f0
????????????????????????b?????????? blue?????????? (0,0,255)??????????????????????????? ? #00f
????????????????????????????????????????????????????????????????????????????????????????????????? #000黑色
??????????????????????????????????????????????????????????????????????????????????????????????????#fff白色
