HTML的总结
HTML
HTML：（Hype Text?Markup Language）超文本標(biāo)記語言，是最基本的網(wǎng)頁語言。代碼由標(biāo)簽組成，不區(qū)分大小寫。
由<html>開始，</html>結(jié)束，分頭部分（head）和體部分（body），頭部分用于給頁面增加一些輔助或?qū)傩孕畔?#xff0c;最先加載。體部分是真正存放頁面數(shù)據(jù)的地方。
屬性和屬性值用“=”連接，屬性值可加雙引號、單引號或不加引號。
標(biāo)簽相當(dāng)于一個容器，數(shù)據(jù)存放在容器里，對數(shù)據(jù)操作，就是在修改容器的屬性值。
?
字體標(biāo)簽：<font size=”5”?color=”red”>文字</font>
color屬性可用顏色單詞，也可用“#FFFFFF”：井號加十六進(jìn)制數(shù)據(jù)表示，紅綠藍(lán)
?
標(biāo)題標(biāo)簽：<h1>文字</h1> ?共有6級標(biāo)題 ?
?
水平線標(biāo)簽：<hr color=”red”?size=”5”/>size屬性指定水平線粗細(xì)
?
特殊符號：
大于號＞ | 小于號＜ | 與符號& | 雙引號” | 空格 | 注冊符 | 版權(quán)符 | TM符 |
< | > | & | " |
?
列表和項(xiàng)目符號標(biāo)簽：
定義列表<dl> </dl> | 數(shù)字標(biāo)簽<ol> </ol> | 符號標(biāo)簽<ul> </ul> | |
<dl>定義列表DefinedList <dt>定義項(xiàng)目 ????<dd>具體項(xiàng)目</dd> ????<dd>具體項(xiàng)目</dd> </dt> </dl> 自動縮進(jìn)效果 | 具體項(xiàng)目內(nèi)容用<li></li>封裝 ?自動縮進(jìn) | ||
默認(rèn)數(shù)字樣式 ?可用type修改：a ?A ?I??i ?1 Start屬性指定起始號碼 | 默認(rèn)樣式空心圓circle ? disc實(shí)心圓 ?square黑方塊 可用CSS自定義符號 | ||
?
注釋標(biāo)簽：<!—注釋內(nèi)容-->
?
圖像標(biāo)簽：<img src=”../dir/file”?alt=”說明文字”?height ?width ?border/>
src屬性中可用兩個點(diǎn)（../）代表上層目錄
alt屬性中的說明文字在鼠標(biāo)懸停和圖片加載失敗時(shí)顯示
圖像地圖：用<img>封裝好圖像后，切換到DW設(shè)計(jì)視圖，在屬性中選擇熱點(diǎn)區(qū)域形狀并在圖像上拖動出一塊熱點(diǎn)區(qū)域，用熱點(diǎn)區(qū)域鏈接某個資源。在頁面中點(diǎn)擊熱點(diǎn)區(qū)域就會跳轉(zhuǎn)到相應(yīng)資源。
?
表格標(biāo)簽：<table><tr><td></td></tr></table>
<table border=”邊框粗細(xì)”?bordercolor ?cellpadding=”單元格中數(shù)據(jù)與單元格邊框間距”?cellspacing=”單元格與單元格間距 0兩線并為一線”?width=’固定像素值或相對頁面百分比’>cellspacing=0兩線并成一線但顯示出來粗，用CSS中border-collapse兩線重疊看起來就是一條線
<table>標(biāo)簽內(nèi)<caption></caption>給表格加標(biāo)題，是表格的一部分
?
<td colspan=2>行占兩列 | |
<td rowspan=2>列占兩行 第一行第一個單元格 | 第一行第二個 |
第二行只有一個 |
?
table標(biāo)簽中默認(rèn)都有一個tbody標(biāo)簽 ???thead、tbody、tfoot
瀏覽頁面時(shí)，瀏覽器解析由table標(biāo)簽封裝的頁面數(shù)據(jù)時(shí)，讀到</table>表格結(jié)束標(biāo)記才會顯示數(shù)據(jù)，若封裝頁面數(shù)據(jù)的表格很大，沒讀到結(jié)束標(biāo)記就不顯示任何數(shù)據(jù)，用戶體驗(yàn)不佳，所以將表格分為多個部分，讀一個</tbody>就顯示一部分。用tbody將表格分體
?
超鏈接標(biāo)簽：<a href=”http://www.xxx.cn”?>文字</a>
點(diǎn)擊一個超鏈接做了什么？首先啟動相應(yīng)的協(xié)議解析引擎，訪問本機(jī)hosts文件，查找對應(yīng)主機(jī)IP，未找到再請求網(wǎng)絡(luò)DNS服務(wù)器獲取對應(yīng)IP，用IP訪問指定主機(jī)。
href屬性，可以指定協(xié)議，mailto:abc@qq.com?subject=”郵件主題”&cc=”抄送地址”
mailtothunder…… ??不指定協(xié)議默認(rèn)啟動文件協(xié)議解析
href=www.baidu.com默認(rèn)使用file協(xié)議打開的是一個本地文件 并不是主機(jī)地址
超鏈接實(shí)現(xiàn)頁面內(nèi)跳轉(zhuǎn)：定位標(biāo)記、錨
<a name=”top”>頂部位置</a> ?
用a標(biāo)簽的name屬性為當(dāng)前位置指定一個名字，不使用href屬性
…很多頁面內(nèi)容… ?
在適當(dāng)位置用a標(biāo)簽鏈接到指定名字的位置 ?用#標(biāo)示當(dāng)前頁面
<a href=”#top”>回到頂部位置</a>
target屬性指定頁面打開方式，默認(rèn)在當(dāng)前頁面內(nèi)打開，_blank新窗口打開
title屬性：當(dāng)鼠標(biāo)懸停在文字上時(shí)顯示的文字內(nèi)容
?
?
表單標(biāo)簽：用于與服務(wù)端交互
?
<form action=”表單提交目的地”?method=”表單提交方式”></form>
form標(biāo)簽內(nèi)的組件：input接收用戶輸入數(shù)據(jù) select下拉列表 textarea文本區(qū)域
?
<input type=”text”?name=”user”?value=”zhangsan”?/>
input標(biāo)簽內(nèi)要指定name屬性，服務(wù)端才能獲取到對應(yīng)的value
input內(nèi)包含的組件類型 通過type指定：
text文本框password密碼框
radio單選框屬于同一組的選擇框name屬性要一致，不然單選框不能實(shí)現(xiàn)單選
checkbox復(fù)選框分組 同單選框單選框不加屬性時(shí)還不讓你選
file提供一個文件瀏覽按鈕，多用于上傳文件
hidden隱藏組件，不需用戶看到但服務(wù)端要用到，可通過JavaScript將其值在用戶端運(yùn)算后再提交至服務(wù)端使用
button按鈕 通過onclick方法添加事件監(jiān)聽
reset重置按鈕submit提交按鈕
p_w_picpath和submit一樣，但可通過src屬性指定一個圖片充當(dāng)按鈕 美化效果
?
<select>選擇列表，默認(rèn)單選下拉式設(shè)定multiple屬性使選項(xiàng)全部列出，無下拉效果
size屬性指定顯示多少項(xiàng)，顯示不完出現(xiàn)滾動條
通過<option></option>標(biāo)簽封裝列表項(xiàng)
?
<textarea cols=””?rows=””>文本區(qū)域 可指定行數(shù)和列數(shù)
?
<fieleset>區(qū)域設(shè)置，可給form加外框外框上的文字可用legend標(biāo)簽指定
?
form中的method指定提交方式，有7中，常用get和post
用Java自定義服務(wù)端與form交互 ?查看數(shù)據(jù)提交不同之處
get提交：信息顯示在地址欄中，敏感信息泄露，不安全；
地址欄存儲信息量有限，不利于大數(shù)據(jù)量提交；
將信息封裝在消息頭前邊；
提交至服務(wù)端的中文亂碼需要再次編碼后再解碼
post：地址欄上不顯示提交的信息，避免信息泄露，安全；
提交數(shù)據(jù)量無限制，方便大數(shù)據(jù)提交；
將信息封裝在消息頭后邊（空行后）的數(shù)據(jù)體中；
中文亂碼可通過設(shè)定字符集方法簡單搞定
Tomcat服務(wù)端默認(rèn)使用的iso8859編碼，兩種提交方式提交中文時(shí)，服務(wù)端會顯示亂碼，需要在服務(wù)端使用指定字符集解碼，request.setCharacterEncoding(“GBK”)但設(shè)定字符集方法只對數(shù)據(jù)體中的數(shù)據(jù)有效，get方式提交的信息封裝在消息頭中，不能使用這種方法。但可以通過先用iso8859編碼再GBK解碼的方式解決。推薦使用post方式提交。
?
暴力提交、暴力注冊
<a href=”http://注冊地址?name=value&id=value......”>暴力開始</a>
超鏈接默認(rèn)就是get方式提交
客戶端首先進(jìn)行數(shù)據(jù)有效性校驗(yàn)，服務(wù)端對客戶端提交的數(shù)據(jù)必須再次校驗(yàn)
?
label標(biāo)簽：用于給各元素定義快捷鍵
for屬性指定快捷鍵起作用的表單元素，其值必須與該表單元素的id值相同
accessKey指定快捷鍵，要與Alt合用
例：<label for=”user”?accessKey=”u”>user name</label>
<input type=”text”?id=”user”?/>
label使用技巧：
將label標(biāo)簽加到tr標(biāo)簽上，for屬性指向該tr里的文本框，在這行的任意位置點(diǎn)擊鼠標(biāo)，文本框都將獲得焦點(diǎn)。
?
其他標(biāo)簽：
<pre></pre>此標(biāo)簽內(nèi)封裝的文本數(shù)據(jù)格式將保持原樣，包括空格和縮進(jìn)等格式。常用于頁面中顯示帶有縮進(jìn)層次的代碼。
<p></p>段落標(biāo)簽，兩個段落之間帶有空行
<b>加粗 <strong>加粗 <i>斜體 <u>下劃線 <sub>下標(biāo) <sup>上標(biāo)
<marquee direction=”left/right/down/up”?behavior=”scroll/alternate/slide”>
此標(biāo)簽內(nèi)可以讓內(nèi)容動起來，scroll滾動穿過/alternate來回彈/slide一下摔死
?
框架集frameset標(biāo)簽：將瀏覽器頁面分成多個獨(dú)立的部分，分別顯示不同的頁面
放在head和body之間 ?frameset分割頁面 frame指定小頁面內(nèi)容
<frameset rows=”30%, *”?frameborder=”yes”?border=”1”?framespacing=”0”>
<frame src=”1.html”?noresize=”noresize”?/>
<frame src=”2.html”?noresize=”noresize”?/>
</frameset>
frameset中用rows和cols屬性指定分割頁面大小區(qū)域，可用百分比也可用像素值
frame中的noresize屬性使框架頁面大小不可隨意改動
frame中添加的超鏈接默認(rèn)都是在當(dāng)前框架頁面內(nèi)打開的，要讓其在當(dāng)前窗口中的其他框架頁面中打開，需要將框架頁面添加一個name屬性，讓超鏈接的target屬性值等于這個框架頁面的name屬性即可
?
iframe畫中畫標(biāo)簽：直接在當(dāng)前頁面中挖出一個區(qū)域，顯示指定頁面內(nèi)容
<iframe src=”1.html”?width=30 height=50>畫中畫標(biāo)簽說明文字，這些文字在瀏覽器不支持iframe標(biāo)簽時(shí)顯示</iframe>
畫中畫標(biāo)簽具有一定的危險(xiǎn)性，可能被用于隱藏執(zhí)行一些惡意的代碼
如：<iframe src=”1.js”?height=0 width=0>
?
頭標(biāo)簽<head>內(nèi)的一些標(biāo)簽：<title></title><base /><meta /><link />
title：頁面標(biāo)題，顯示在瀏覽器標(biāo)題欄上的文字
base：href指定頁面中所有超鏈接的目錄，可本地，也可網(wǎng)絡(luò)，結(jié)尾一定要用斜杠/表示
目錄，只作用于相對路徑文件。target指定打開方式
meta：<meta name=”keywords”?content=”電影，視頻，關(guān)鍵字……”?/>
<meta http-equiv=”refresh”?content=”3, url=http://www.xxx.com”?/>
http-equiv：模擬HTTP協(xié)議響應(yīng)消息頭，3秒后刷新，打開指定網(wǎng)頁
link：給HTML關(guān)聯(lián)一些文件，如CSS，JS等
<link rel=”stylesheet”?href=”1.css”?media=”print/screen”>
rel指定關(guān)聯(lián)文件與HTML的關(guān)系 media指定文件作用的設(shè)備，多個設(shè)備斜杠分隔
?
XHTML是可擴(kuò)展的（Extensible）超文本標(biāo)記語言，可理解為HTML向XML的過渡。
XML是可擴(kuò)展標(biāo)記語言，是對數(shù)據(jù)信息的描述，而HTML是對數(shù)據(jù)顯示的描述。XML規(guī)定更為嚴(yán)格，如標(biāo)簽不結(jié)束即錯誤。XML規(guī)范可被更多應(yīng)用程序解釋，將成為一種通用的數(shù)據(jù)交換語言，各個服務(wù)器、框架都將XML作為配置文件。
Dreamweaver創(chuàng)建HTML文件自動生成的頭部信息中，又一個規(guī)范約束文件（.dtd），描述一些標(biāo)簽信息，由此文件來約束標(biāo)簽的自動閉合，刪除這些頭部信息后，DW中輸入標(biāo)簽將不會自動閉合。前邊的網(wǎng)址并不代表此文件要從網(wǎng)絡(luò)獲取，只表示名稱空間，可自定義。
轉(zhuǎn)載于:https://blog.51cto.com/meyangyang/1976614
總結(jié)
- 上一篇： 3000元档超香二代骁龙8旗舰！努比亚Z
- 下一篇： 移动端HTML响应式布局之神奇的pt（自