HTML知識點整理
寫在前面：這是一篇HTML知識點整理筆記！
HTML
㈠HTML入門
HTML 是用來描述網頁的一種語言。
- HTML 指的是超文本標記語言 ( H yper T ext M arkup L anguage)
- HTML 不是一種編程語言，而是一種 標記語言 (markup language)
- 標記語言是一套 標記標簽 (markup tag)
HTML 編輯器
- Sublime Text 3
- WebStorm
㈡ HTML文檔結構
HTML文檔基本結構
DTD(Document Type Definition) -------------- 文檔定義類型
<html> -------------- 文本描述網頁
<head> -------------- 文檔頭部標記：含腳本，樣式表等等。
<meta /> -------------- 定義文檔字符集、使用語言、作者等基本信息
<title>標題</title> -------------- 定義文檔的標題
</head>
<body> -------------- 網頁主體,是可見的頁面內容
<h1>Hello world</h1> -----------標題
</body>
</html>
- <html> 與 </html> 之間的文本描述網頁
- <body> 與 </body> 之間的文本是可見的頁面內容
- <head>與</head>頭部元素的容器：
-
<head> 定義關于文檔的信息。
<title> 定義文檔標題。
<base> 定義頁面上所有鏈接的默認地址或默認目標。
<link> 定義文檔與外部資源之間的關系。
<meta> 定義關于 HTML 文檔的元數據。
<script> 定義客戶端腳本。
<style> 定義文檔的樣式信息。
-
例子:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>制作我的第一個網頁</title>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
HTML 文檔類型
- <!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位于 <html> 標簽之前。
- 作用：指示瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。
//HTML 5
<!DOCTYPE html>
//HTML 4.01 Strict
該 DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
//HTML 4.01 Transitional
該 DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
//HTML 4.01 Frameset
該 DTD 等同于 HTML 4.01 Transitional，但允許框架集內容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
//XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML 標記標簽
HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。
- HTML 標簽是由 尖括號 包圍的關鍵詞，比如 <html>
- HTML 標簽分為單標記和雙標記：
- 單標記：<標記名稱 屬性名稱="屬性值" ... />，比如 <br/>
- 雙標記：<標記名稱 屬性名稱="屬性值" ... ></標記名稱>，比如 和 ；第一個標簽是 開始標簽 ，第二個標簽是 結束標簽 。
HTML 屬性
-
屬性總是以名稱/值對的形式出現，比如： name="value" 。
-
屬性總是在 HTML 元素的 開始標簽 中規定。
-
屬性值應該始終被包括在引號內。雙引號是最常用的，不過使用單引號也沒有問題。
屬性 值&描述 class 規定元素的類名（classname） id 規定元素的唯一 id name 名稱，一般也是唯一的 style 規定元素的行內樣式（inline style） title 規定元素的額外信息（可在工具提示中顯示） ...注意：實際中很少用到，都通過css和js來設置！
注釋
//注釋:<!--注釋-->
<a href="www.baidu.com">百度一下 你不知道</a> <!--注釋寫在這里-->
//注釋一行代碼
<!-- 此刻不顯示圖片：
[站外圖片上傳中……(3)]
-->
//條件注釋
<!--[if IE 8]>
.... some HTML here ....
<![endif]-->
㈢ 元素(標簽+屬性+文本)
HTML 元素：
HTML 元素指的是從開始標簽（start tag）到結束標簽（end tag）的所有代碼。
- HTML 元素以開始標簽起始
- HTML 元素以結束標簽終止
- 元素的內容是開始標簽與結束標簽之間的內容;某些 HTML 元素具有空內容（empty content）
- 大多數 HTML 元素可以 嵌套 。
1. 文字
<b>字體加粗</b>
<i>斜體字體</i>
<u>下劃線</u>
<s>刪除線</s>
上標：X<sup>2</sup>
下標：Y<sub>3</sub>
//字體相關屬性：
<font size="5" color="red" face="黑體">字體，添加屬性值</font>
<font size="3" color="#333333" face="黑體">size的值是1~7；color的表達方式：英語單詞 RGB 十六進制</font>
2. 標題 段落 換行 水平線
//標題:
<h1 align="center">1號標題</h1>
<h2>2號標題</h2>
<h3>3號標題</h3>
<h4>4號標題</h4>
<h5>5號標題</h5>
<h6>6號標題</h6>
//段落：<p></p>
<p>第一段</p>
<p align="left">第二段</p>
<p align="center">第三段</p>
<p align="right">第四段</p>
//換行：<br />
<br /> //換行
//水平線:<hr />
<hr />
<hr size="10" width="800"/>
<hr size="10" width="800" noshade="noshade"/>
<hr size="30%" width="80%" /> //隨屏幕百分比變化
3. 圖片 超鏈接 錨點鏈接
/* 相對路徑和絕對路徑
絕對路徑：協議+主機+路徑+文檔
相對路徑：./ 當前目錄 ../ 父級目錄 / 根目錄 ../../父目錄的父目錄
URL：scheme://host.domain:port/path/filename
*/
//圖像:<img src="" />
[站外圖片上傳中……(4)]
屬性：
scr //source 圖像的URL地址
title //鼠標懸停顯示的圖片描述
alt //在瀏覽器無法載入圖像時展示給讀者提示的信息
width
height
broder //邊框
//超鏈接：<a href=""></a>
<a target="_blank"></a>
href: 鏈接地址
target: 定義被鏈接的文檔在何處顯示 _blank(新標簽打開)
_self (當前標簽打開)
_parent
_top
//錨點鏈接:定義一個唯一的'id' 賦給href 實現跳轉
<a href="#p1">點擊前往第七段</a>
<p id="p1">第七段</p>
4. HTML的實體
在 HTML 中，某些字符是預留的：小于號（<）和 大于號（>），會誤認為是標簽。
因此，在 HTML 源代碼中使用字符實體（character entities）來顯示預留字符。
//空格
&quto; //引號
￥ //￥
×
&divede;
HTML的實體.png
5. 列表: ol ul li
分為：
有序列表:<ol></ol>
&
無序列表:<ul></ul>
1）有序列表： 用于顯示具有統一特征的有序數據
<ol type="i" start="3">
<li>新聞1</li>
<li>新聞2</li>
<li>新聞3</li>
<li>新聞4</li>
</ol>
屬性 值 描述
type 1 數字(默認) 排序
a 字母
A 大寫字母A
i 小寫羅馬
I 大寫羅馬
start 數字 起始數字
2）無序列表：用于顯示同一特征的無限數據
<ul type="circle">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
屬性 值
type disc 實心圓(默認)
circle 空心圓
square 實心矩形
none 無
6. 表格: table
- 用途：table元素的作用是顯示表格化的數據！
- table元素可以嵌套。
//用途：table元素的作用是顯示表格化的數據！
<table> ---------表格
<tr> ---------行
<th>內容</th> ---------單元格(字體加粗)
<td>內容</td> ---------單元格
<td>內容</td>
</tr>
</table>
table屬性 值
width
height
bgcolor 背景顏色（英語顏色；RGB；十六進制）
background 背景圖片
border
bordercolor
cellpadding 單元格與內容之間的間距
cellspacing 單元格與單元格的邊距
align
tr屬性 值
align (left|center|right)
bgcolor (英文顏色|rgb（255，255，255）|十六進制)
valign 垂直對齊方式（top|middle|bottom）
th td屬性 值
align (left|center|right)
bgcolor (英文顏色|rgb（255，255，255）|十六進制)
valign 垂直對齊方式（top|middle|bottom）
rowspan 行合并
clospan 列合并
<table border="1" bordercolor="red" cellpadding="0" cellspacing="0" bgcolor="pink" align="center">
<tr>
<th colspan="3">表格的表頭：合并3列</th>
<td rowspan="5">合并5行</td>
</tr>
<tr bgcolor="blank" align="left" valign="top">
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
//表格的嵌套
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<th>[站外圖片上傳中……(5)]</th>
<td align="center" valign="top">
<table>
<tr>
<th rowspan="6">JEEP 牧馬人</th>
</tr>
<tr>
<td>姓名</td>
<td>CwLife</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
7. 表單: form
-
作用：用于收集用戶輸入;
-
表單元素:
<input type=""/> 根據不同的 type 屬性，可以變化為多種形態。
<select></select> 定義下拉列表。
<textarea></textarea> 定義多行輸入字段（文本域）。
<button></button> 定義可點擊的按鈕。
作用：用于收集用戶輸入;
表單元素: 指的是不同類型的 input 元素、復選框、單選按鈕、提交按鈕等等
<form action="action_page.php" method="POST" name="">
表單元素...
</form>
屬性
name 表單的名字
method 規定在提交表單時所用的方法：get/post
action 定義在提交表單時執行的動作
常用的表單元素:
<input type=""/> 根據不同的 type 屬性，可以變化為多種形態。
<select></select> 定義下拉列表。
<textarea></textarea> 定義多行輸入字段（文本域）。
<button></button> 定義可點擊的按鈕。
文本框：<input type="text"> 定義供文本輸入的單行輸入字段。
<input type="text" name="控件名字" value="值" maxlength="最大輸入字符長度" size="控件寬度" readonly="readonly"（只讀） />
密碼框：<input type="password"> 定義密碼字段。
<input type="password" name="控件名字" value="值" maxlength="最大輸入字符長度" size="控件寬度" readonly="readonly"（只讀） />
多選勾選控件：<input type="checkbox"> 定義復選框
<input type="checkbox" name="控件名字" value="值" checked="checked"(已選中) disabled = "disabled"(禁用控件) />
單選勾選控件：<input type="radio"> 定義單選按鈕。
<input type="radio" name="控件名字" value="值" checked="checked"(已選中) disabled = "disabled"(禁用控件) />
提交表單按鈕：<input type="submit"> 定義提交表單數據至表單處理程序的按鈕。
<input type="submit" value="按鈕字樣" />
重置表單按鈕：
<input type="reset" value="按鈕字樣" />
上傳文件按鈕：
<input type="file" name="文件名稱">
隱藏域:
<input type="hidden" name="控件名字" value="值" />
按鈕：<input type="button> 定義按鈕。
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
<!--
HTML5 增加了多個新的輸入類型：（老式瀏覽器不支持的輸入類型，會被視為輸入類型 text）
? color
? date
? datetime
? datetime-local
? email
? month
? number
? range
? search
? tel
? time
? url
? week
<input type="number"> 用于應該包含數字值的輸入字段。
<input type="number" name="quantity" min="1" max="5">
<input type="color"> 用于應該包含顏色的輸入字段。
<input type="color" name="favcolor">
<input type="range"> 用于應該包含一定范圍內的值的輸入字段。
<input type="range" name="points" min="0" max="10">
<input type="date"> 用于應該包含日期的輸入字段。
<input type="date" name="bday" max="1979-12-31"><br>
<input type="month"> 允許用戶選擇月份和年份。
<input type="month" name="bdaymonth">
<input type="week"> 允許用戶選擇周和年。
<input type="week" name="week_year">
<input type="time"> 允許用戶選擇時間（無時區）。
<input type="time" name="usr_time">
<input type="datetime"> 允許用戶選擇日期和時間（有時區）。
<input type="datetime" name="bdaytime">
<input type="datetime-local"> 允許用戶選擇日期和時間（無時區）。
<input type="datetime-local" name="bdaytime">
<input type="email"> 用于應該包含電子郵件地址的輸入字段。
<input type="email" name="email">
<input type="search"> 用于搜索字段（搜索字段的表現類似常規文本字段）。
<input type="search" name="googlesearch">
<input type="tel"> 用于應該包含電話號碼的輸入字段。
<input type="tel" name="usrtel">
<input type="url"> 用于應該包含 URL 地址的輸入字段。
<input type="url" name="homepage">
-->
多行文本控件：
<textarea name="控件名稱" cols="設置長度" rows="設置寬度">
文本內容
</textarea>
下拉框控件：
<select name="控件名字">
<option value="值" selected="selected"(已選中)>選擇內容</option>
<option value="值" >選擇內容</option>
<option value="值" >選擇內容</option>
</select>
下拉選項的分組：
<optgroup label="分組標簽01">
<option value="值" selected="selected"(已選中)>選擇內容</option>
<option value="值" >選擇內容</option>
<option value="值" >選擇內容</option>
</optgroup>
//e.g.
<select name="請選擇">
<optgroup label="分組一">
<option value="值" selected="selected">選擇內容1</option> <!--默認選中-->
<option value="值" >選擇內容2</option>
<option value="值" >選擇內容3</option>
</optgroup>
<optgroup label="分組二">
<option value="值" selected="selected">選擇內容1</option> <!--默認選中-->
<option value="值" >選擇內容2</option>
<option value="值" >選擇內容3</option>
</optgroup>
<optgroup label="分組三">
<option value="值" selected="selected">選擇內容1</option> <!--默認選中-->
<option value="值" >選擇內容2</option>
<option value="值" >選擇內容3</option>
</optgroup>
</select>
按鈕：
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
實例：
<form name="" method="" action="">
用戶名：<input type="text" name="控件名字" value="" maxlength="" size="" readonly="readonly" />
<br />
密 碼：<input type="password" name="控件名字" value="" maxlength="6" />
<hr />
多選一<input type="checkbox" name="控件名字" value="值" />
多選二<input type="checkbox" name="控件名字" value="值" />
多選三<input type="checkbox" name="控件名字" value="值" />
<hr />
男<input type="radio" name="控件名字" value="值" checked="checked" /> <!--默認選項；-->
女<input type="radio" name="控件名字" value="值" /> <!--關聯要同名字-->
<hr/>
<select name="請選擇">
<optgroup label="分組一">
<option value="值" selected="selected">選擇內容1</option> <!--默認選中-->
<option value="值" >選擇內容2</option>
<option value="值" >選擇內容3</option>
</optgroup>
<optgroup label="分組二">
<option value="值" selected="selected">選擇內容1</option> <!--默認選中-->
<option value="值" >選擇內容2</option>
<option value="值" >選擇內容3</option>
</optgroup>
<optgroup label="分組三">
<option value="值" selected="selected">選擇內容1</option> <!--默認選中-->
<option value="值" >選擇內容2</option>
<option value="值" >選擇內容3</option>
</optgroup>
</select>
<hr/>
<input type="submit" value="登錄" />
<input type="reset" value="重置按鈕" />
<button>按鈕標題</button>
<hr />
<input type="file" name="filename">
</form>
?
實踐：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>用戶注冊例子</title>
</head>
<body>
<form name="" method="" action="">
<table align="center" width="500" cellspacing="0" cellpadding="10" border="1" bgcolor="cyan">
<tr>
<th colspan="2">用戶注冊</th>
</tr>
<tr>
<th>用戶名:</th>
<td>
<input type="text" name="inputyourname" value="" maxlength="20" \>
</td>
</tr>
<tr>
<th>密 碼:</th>
<td>
<input type="text" name="inputyourpsw" value="" maxlength="20" \>
</td>
</tr>
<tr>
<th>性 別:</th>
<td>
男<input type="radio" name="sex" value="" \>
女<input type="radio" name="sex" value="" \>
保密<input type="radio" name="sex" value="" checked="checked"\>
</td>
</tr>
<tr>
<th>愛 好:</th>
<td>
<input type="checkbox" name="love" value="" checked="checked" \>唱歌
<input type="checkbox" name="love" value="" \>跳舞
<input type="checkbox" name="love" value="" \>繪畫
<input type="checkbox" name="love" value="" \>書法
<input type="checkbox" name="love" value="" \>籃球
<br \>
<input type="checkbox" name="love" value="" \>足球
<input type="checkbox" name="love" value="" \>乒乓球
<input type="checkbox" name="love" value="" \>游泳
<input type="checkbox" name="love" value="" \>溜冰
</td>
</tr>
<tr>
<th>家 鄉:</th>
<td>
<select name="">
<optgroup label="第一選區">
<option value="" selected="selected">選項11</option>
<option value="">選項12</option>
<option value="">選項13</option>
</optgroup>
<optgroup label="第二選區">
<option value="">選項21</option>
<option value="">選項22</option>
<option value="">選項23</option>
</optgroup>
<optgroup label="第三選區">
<option value="">選項31</option>
<option value="">選項32</option>
<option value="">選項33</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<th>自我介紹:</th>
<td>
<textarea cols="50" rows="10" >
請輸入自我介紹:
</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button>我要注冊</button>
</td>
</tr>
</table>
</form>
</body>
</html>
實例結果：
8. 框架: frameset
//通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。
1. 框架結構標簽：<frameset></frameset>
作用：定義如何將窗口分割
屬性名 值
rows 橫向分割（固定值px|百分比|*）有三種寫法:（200，300，500）（20%，30%,*）（20%,*,*）
cols 縱向分割（固定值px|百分比|*）
border 邊框寬度（px）
frameborder 是否顯示邊框（0|1） 0-不顯示 1-顯示
2.框架標簽：<frame />
作用：定義了放置在每個框架中的HTML文檔。
屬性
scr URL鏈接
name 窗口名稱
scrolling 滾動條，默認顯示（no）
noresize 邊框是否可以被拖動（noresize）
//e.g.:設置一個兩列的框架集: 第一列占據瀏覽器窗口的 25%。第二列占據瀏覽器窗口的 75%。HTML 文檔 "frame_a.htm" 被置于第一個列中，而 HTML 文檔 "frame_b.htm" 被置于第二個列中
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
3.內聯框架：<iframe src=""></iframe>
作用：用于在網頁內顯示網頁
<iframe src="demo_iframe.html" width="200" height="200" frameborder="0"></iframe>
4. noframes標簽: <noframes></noframes>
用于為不支持框架集的瀏覽器顯示文本
e.g.
<noframes>對比起，您的瀏覽器不支持框架集類型</noframes>
框架集練習：后臺管理系統
//home.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.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>框架集練習--后臺管理系統</title>
</head>
<frameset rows="150,*" border = "1" frameborder ="1" > <!--切割成上下兩部分（150，*）-->
<frame src="head.html" noresize="noresize" /> <!--頂部head.html-->
<frameset cols ="200,*" border ="3" frameborder = "1"> <!--切割左右兩部分（150，*）-->
<frame src="leftnavi.html" noresize="noresize" /> <!--左邊導航欄leftnavi.html-->
<frame src="right1.html" noresize="noresize" name="body" /> <!--右側是主題：right1.html-->
</frameset>
</frameset>
</html>
//.head.html
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>制作我的第一個網頁</title>
</head>
<body>
<h1 align="center">后臺管理系統</h1>
</body>
</html>
//leftnavi.html
<body>
<ul type="none">
<li><h3><a href="right1.html" target="body">選擇一</a></h3></li>
<li><h3><a target="body">網頁首頁</a></h3></li>
<li><h3><a target="body">百度主頁</a></h3></li>
<li><h3><a target="body">新浪中國</a></h3></li>
<li><h3><a href="">選擇一</a></h3></li>
<li><h3><a href="">選擇一</a></h3></li>
<li><h3><a href="">選擇一</a></h3></li>
<li><h3><a href="">選擇一</a></h3></li>
</ul>
</body>
//right.html
9 樣式和腳本
//樣式標簽：<style></style>
//腳本標簽：<script></script>
10. 塊: div span
HTML 元素被定義為塊級元素或內聯元素。
- 塊級元素：以新行來顯示。
- 內聯元素：不會以新行來顯示。
//div和span標簽
<div> 元素是塊級元素，常用于組合其他 HTML 元素的容器，進行文檔布局。---
<span> 元素是內聯元素，常用作文本的容器。
塊級元素：
<body></body>
<div></div> //常用的布局元素
<h1></h1>...<h6></h6>
<ol></ol>
<ul></ul>
<li></li>
<p></p>
<table></table>
<tr></tr>
<td></td>
內聯元素：
<a href=""></a>
<i></i>
<u></u>
<b></b>
<span></span> //文本標簽
<font></font>
來自：http://www.jianshu.com/p/72a590b29cbc
本文由用戶 Uniqlo 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！