常用的HTML標記整理
常用的HTML4.01標記整理
<!Doctype html>
<html>
<head>
<title>標題</title>
<meta charset="utf-8">（記事本為gb2312)
<body>
</body>
</head>
</html>
二、 1.超連結標記
<a href="要訪問的資源地址" target="_self預設本視窗覆蓋顯示/_blank新視窗顯示/框架名-指定框架中顯示" 2.<br> 換行
3. 空格
4.<meta http-equiv="refresh"content="10">
5.<meta http-equiv="refresh"content="10";url=http://www.baidu.com> 設定本網頁十秒後跳轉到其他介面或網頁
6.網站前端三層 : (x)html 結構層 html結構 css 表現層 決定html的樣式 javascript 動作層 決定html如何互動
7.HTML基本語法: <標記名 屬性=“值” 屬性=“值” ></標記名>
舉例子:
<font color="red" size="7" face="隸書">
我是帥哥
</font>
8.標記的屬性和標記不能分離 一說屬性必須得說哪一個標記的屬性，屬性不能單獨說
<font color="" face=" size="" ></font>
<p align=""></p>
9.HTML裡面的註釋
<!-- -->
說明:註釋是給程式設計師看的
10.規範:
--標記和屬性全部小寫
--屬性值必須加""
--雙標記必須雙著用
--單標記必須關閉 <img /> <input />
--標記只能巢狀不能交叉
11.文字標記
<font color="文字顏色" face="字型名稱" size="1-7文字大小預設3"></font>
12.文字修飾標記
加粗 <b></b> <strong></strong>
傾斜 <i></i> <em></em>
下劃線 <u></u>
刪除線<del></del>
地址<address></address>
上標 <sup></sup>
下標 <sub></sub>
13.段落標記:一個p相當於一個回車換行，/p相當於一個回車換行
<p align="水平對齊方式left預設/center/right"></p>
14.橫線:
<hr width="寬度" size="粗細" color="顏色" align="水平對齊方式left/center預設/right" noshade是否有陰影>
15.預格式化:保留原始碼中空格，不忽略原始碼中的空格
<pre></pre>
16.忽略HTML標記
<xmp></xmp>
17.設定段落縮排
<blockquote></blockquote>
無序列表 ul
有序列表 ol
定義列表 dl
目錄列表 dir
選單列表 menu
無序列表
<ul type="disc/circle/square">
<li type="disc/circle/square">
</li>
</ul>
有序列表
<ol type="1/A/a/i/I" start="從第幾項開始">
<li>
</li>
</ol>
定義列表:
<dl>
<dt>定義</dt>
<dd>解釋1</dd>
<dd>解釋2</dd>
<dd>解釋3</dd>
<dt>定義</dt>
<dd>解釋1</dd>
<dd>解釋2</dd>
<dd>解釋3</dd>
<dt>定義</dt>
<dd>解釋1</dd>
<dd>解釋2</dd>
<dd>解釋3</dd>
</dl>
19.圖片
<img src="圖片來源" alt="替換文字" title="全域性屬性每個標記都會有提示資訊" align="圖片水平對齊方式left預設/right-----top/middle/bottom圖片後面文字的對齊方式" width="畫素/百分比" height="畫素/百分比">
說明：路徑分為 相對路徑（從當前文件開始） 絕對路徑（從碟符開始）—不可能用
20.移動
<marquee bgcolor="背景顏色" behavior="slide一次/scroll迴圈/alternate來回動" scrollamount="速度" scrolldelay="延遲" direction="移動方向left預設/right/up/down"/></marquee>
21.表格
<table border="表格邊框" width="表格寬度" height="表格高度" bgcolor="背景顏色" background="表格背景圖片"cellspacing="單元格之間的距離" cellpadding="單元格里邊的內容距離邊框的距離" align="表格對齊方式">
<tr align="單元格中水平對齊方式
left/center/right" valign="單元格中內容垂直對齊方式top/middle/bottom ">
<td colspan="跨列合併單元格" rowspan="跨行合併單元格"></td>
<td></td>
<td></td>
</tr>
<tr><td></td>
<td></td>
<td></td>
</tr>
</table>
22.框架集和框架
<frameset cois="豎著分割" rows="橫著分割"/>
<frame name="框架的名字" src="連線的資源"/>
<frame name="框架的名字" src="連結的資源"/>
</frameset>
例子:<frameset rows="25,75/*">
<frame name=" " src=" "/>
</frameset>
浮動框架：講一個獨立的HTML頁面嵌入到當前頁面中
<iframe name=""src="" width="" height=""></iframe>
23.
※ method="get/post"
相同點：都是資料提交的方式，提交的資料是相同的
不同點：
①get原理 ：資料和HTML文件的頭部<head></head>資訊一起提交
特點 ：大小受到文件頭部大小限制
資料附加到url？後面
②post原理：資料和HTML文件正文<body></body>之間資訊一起提交
特點：大小沒有限制
資料不會附加到url？後面
說明：什麼是資料？答：資料是使用者填寫的或選擇的表單項（資訊）
表單項：表單裡面的專案
輸入元素：<input type="text預設"/>輸入文字框
"password"密碼框
"radio"單選按鈕
"checkbox"複選框
"file"檔案域
"image"影象域
"hidden"隱藏域
"button"按鈕
"reset"重置
"submit"提交
<select></select> <textarea></textarea>
- (1)輸入文字框：
<input type=“text” name="" value=“預設值” max-length=“最大字元數” size=“多少個字元的寬度” readonly只讀 disabled禁用/>
-
(2)密碼框：
<input type="password" name="" max-length="" size="" readonly disabled/> -
(3)單選按鈕：
單選按鈕要是同一組的 那麼name值相同；如果不同，name值不同。 提示 提示
- (4)複選框：
多選，name值相同也行，不同也行
<input type="checkbox" name="" value="">
- (5)檔案域：
<input type="file" name="">
- (6)影象域：
代替submit樣子，如果你覺得submit不好看，那麼你可以使用PS做一個圖代替submit。
<input type="image" src="">
- (7)按鈕：
<input type="button" name="" value="按鈕">
- (8)重置按鈕：
將所有表單項重置為預設值而不是清空
<input type="reset" name="" value="">
- (9)提交按鈕：
點選提交按鈕後瀏覽器自動將表單項資料傳送給action所以所指地址
<input type="submit" name="sub" value="">
- (10)select標籤；
①單選下拉選單 ：
<select name=""> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> </select>
②多選列表
<select name="" size="大小" multiple多選ctrl shift> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> </select>
-
(11)文字域：例如新浪微博，發表微博。百度貼吧，釋出帖子
<textarea name="" cols="多少個字元寬度" rows="多少個字元高度"><>