1.HTML基本結構
眾所周知，HTML（Hyper Text Markup Language）稱為超文本標記語言，是一種標記語言，那么快速入門HTML也是很非常容易，如下：
<html> 大標簽
<head> 頭標簽
<title></title> 標題
</head>
<body> 內容標簽
</body>
</html>
2.大量標簽
1.段落標簽
<p> </p>
2.換行標簽(自閉和)
<br/>
3.標題標簽
從大到小變化：
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
4.表格
無序串列ul+串列項li
有序串列ol+串列項li
5.定義串列
dl 定義串列
dt 定義的標題
dd 定義的解釋項
6.文字排版(括號里面為英文解釋)
文本加粗b( bold)/ strong（強調）
文本斜體i(incline)/em(強調)(emphasize)
下劃線u(underline)
洗掉線del (delete)
橫線hr
上標sup
下標sub
big 大（文字）
small小
7.行與塊元素
塊元素
1.總是新起一行
2.可以包括塊，行，文本
3.包括div p h1-h6 dl dt dd ol ul li 等
行內元素
1.和其他行內元素在一起
2.可以包含其他行內元素和文本
3.span i em b strong u del sub sup big small img a input button textarea等
8.規則
1.行內元素只能嵌套行內元素和文本
2.塊元素可以嵌套 文本 塊 行內
3.p,h元素通常只嵌套文本和行內
4.ol,ul最好直接子集是li
5.以上規則皆可以打破
9.特殊符號
空格
<左尖括號 <
>右尖括號 >
©著作權 ?
& &
10.img：圖片
<img src="./1.jpg">
代表圖片1.jpg的地址
./代表當前html所在的目錄
圖片標簽的屬性 ：
align:對齊
alt:替換圖片文字
width:寬
height:高
11.a標簽：鏈接
>href ：鏈接地址
包括相對路徑：
1相對于當前html檔案的位置
2 ./開頭 當前目錄 （可以省略）
3 …/開頭(兩個點) 上一級目錄
4 檔案夾或者檔案名/開頭 （省略一個./）
和絕對路徑：HTTP開頭；/開頭 網站的根域名
當鏈接的地址不是網頁的時候，就是下載該檔案
>target目標：
有兩個屬性： _self當前標簽 _blank新標簽打開
12.表格：table
屬性有以下：
border ：邊框
width：寬度
height ：高度
align對齊：left right center
valign 垂直對齊：top center bottom
cellspacing：單元格間距
cellpadding：文字到單元格（邊框）的距離
bgcolor：背景顏色
rowspan：行合并
colspan：列合并
在表格標簽里面添加下面屬性會更美觀：
（合并邊框模型）
<style="border-collapse: collapse;">
子元素：tr行，td列和th標題列，其中：
rowspan行合并
colspan列合并
一個完整的表格：
<table>
<thead>
<th>
<td></td>
</th>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
13.iframe標簽
定義：在網頁中引入其他網頁
src 引入地址
width寬
height高
scrolling 是否滾動 yes/no
frameborder=“0” 框架邊框為0
14.不可見標簽
<meta charset="utf-8"/>
讓網頁不亂碼(指定元素資訊,字符集=“萬國編碼”)
<meta name="description" content="網頁的描述"/>
<meta name="keywords" content="網頁關鍵字"/>
style樣式
.red{color:red;font-size:48px;}
15.表單：form
<form action="" method="post"></form>
method：post(更安全)，get(提交頁面時會看到提交的資訊)
<input type="text" value="小明" maxlength="5" />
代表輸入型別為文本，提示名為小明，文本最大長度為5
<input type="password" />
代表輸入型別為密碼（文本不可見）
<label>
<input type="checkbox" name="favorite" />
唱歌</label><label>
<input type="checkbox" name="favorite" />
跳舞</label>
<input type="checkbox" name="favorite" />
游泳
<input type="checkbox" name="favorite" />
看書
<input type="checkbox" checked="checked" name="favorite" />
玩手機
代表復選框型別，其中唱歌和跳舞不管點擊圖片還是復選框，都會框選中，游泳和看書需點擊復選框才能選中，玩手機默認被框選
性別:
<label>
<input type="radio" checked="checked" name="sex" />
男</label><label>
<input type="radio" name="sex" />
女</label>
代表單選框，只能選其一，默認選擇男
<input type="file" name="file" />
代表點擊上傳檔案
<select size="2" >
<option selected >博士</option>
<option >碩士</option>
<option >本科</option>
<option >大專</option>
<option >高中</option>
<option >中專</option>
<option >初中</option>
<option >小學</option>
</select>
代表下拉框，其中size設定一次顯示兩個，如果加上multiple，則會以滾動條形式選擇
<textarea rows="10" cols="30" >提示文本</textarea>
代表一個多行文本，rows設定行高，cols設定列寬
<input type="submit" value="提交" />
提交表單按鈕
<input type="reset" name="" id="" value="重置" />
重置所有已填的表單為默認屬性
<button type="button">同意</button>
代表一個普通按鈕
<input type="image" src="images/提交注冊.jpg" />
代表圖片按鈕
3.各種屬性
1.定義:修飾html標簽(元素)
2.組成:屬性名=“屬性值”
<hr width="200" />
3.title屬性:滑鼠的提示
<p title="滑鼠的提示">
4.style屬性:元素的外觀
<p style="color:red;font-size:48px;">
5.class屬性:元素的類名
規則：可以有多個，用空格隔開，可以重復
<p class="red big">
6.id屬性：類似身份證
規則元素的唯一識別，有且只有一個
<p id="gzy">
7.錨點：實作頁面內容切換
定義
<a id="ch1">
鏈接錨點
<a href="#ch1">
<a href="demo.html#ch1">
<a href="./demo.html#ch1">
8.frameset：框架集（一般很少用）
frame框架
name 框架的名稱
src 檔案地址
屬性：
cols 列：% 百分比 數字 像素 *代表剩余的寬
rows 行：% 百分比 數字 像素 *代表剩余的高
noresize=“true”不允許拖動框架
frameborder=“0”框架的寬度
9.圖片熱點區域
作用:形成不規則的鏈接區域，在圖片里邊畫形狀，創建區域鏈接
小建議：使用dreamweaver繪制熱點區域更方便
<img usemap="#Map"><area shape="poly" coords="xxx" href="" target="">
寫在最后
總結此文花費大量時間，建議收藏本文，以便后事之需，此外博主這里還有xmind形式的總結，更方便查看了解，有需要可以私聊，如果本文有差錯，歡迎一起討論，謝謝，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/249494.html
標籤：其他
上一篇：JS實作資料結構（五）：集合
下一篇：js加減乘除精確運算方法