生活随笔
收集整理的這篇文章主要介紹了
HTML常见标签总结
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
什么是瀏覽器
解釋和執(zhí)行HTML源碼的工具
五大瀏覽器：IE、FF(FireFox)(火狐)、Chrome(谷歌)、Opera(空中)、Safari（Apple）(蘋果)
IE用的是Trident引擎(WebBrowser控件)
其它很多都用的是WebKit引擎(開源瀏覽器內(nèi)核)
HTML:Hypertext Markup Language超文本標記語言
CSS:Cascading Style Sheet層疊樣式表
靜態(tài)頁面和動態(tài)頁面?????????
靜態(tài)頁面：后綴名為html或htm的都是靜態(tài)頁面
動態(tài)頁面：包括一些腳本代碼，服務(wù)器動態(tài)生成的HTML頁面發(fā)給瀏覽器
html、htm都是靜態(tài)頁面
asp、aspx、jsp、php等都是動態(tài)頁面
基本標簽?????????
文檔類型定義
Document Type Definition,DTD
????????????
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html></html>基本標簽
3 <head></head>頭部信息，對頁面描述
4 <title></title>頁面的標題，只能放在
<head></head>中
5 <body></body>頁面的主體 body標簽的bgcolor屬性可以設(shè)定網(wǎng)頁的背景顏色
6 <!--此為注釋-->
7 <meta name="keywords" content="新聞，娛樂，八卦"/>網(wǎng)頁的描述信息，關(guān)鍵字-----和網(wǎng)站優(yōu)化相關(guān)
8 <meta name='description' content="中國最大的八卦新聞網(wǎng)站">網(wǎng)頁的描述信息，信息
9 <h1></h1>————
<h6></h6>標題標簽
10 <br/>回車
11 <p></p>段落標簽，分段
12 <center></center>居中顯示
13 <b></b> <strong></strong>都是粗體，推薦后者
14 <i></i> <em></em>都是斜體，推薦后者
15 <u></u>下劃線
16 <sub></sub>下標
<sup></sup>上標
17 <font></font>字體標簽 color顏色 size(1——7)字體大小 face字體樣式
18 <hr/>華麗的分割線 color顏色 size厚度 width長度 align=left/center/right默認是居中顯示
19 <pre></pre>預格式化，保持本色
20 空格
<小于
>大于
&&
21 <a></a>超鏈接 href鏈接地址(/表示網(wǎng)站根目錄，../表示父母路，../../表示父目錄的父目錄，/或沒有/表示相對于當前路徑的目錄)
22 name(錨記 href="#name") target:_blank(在新窗口中打開)、_self(在自己窗口中打開)、_parent(父窗口中打開)、_top(在頂級窗口中打開)、框架名稱(在指定框架中打開) title超鏈接信息
23 <img/>圖片 src指向圖片地址，不是插入的 a
24
25 lt圖片無法顯示時的顯示文本，鼠標放上去也會有懸浮提示“點擊查看大圖”
26 title顯示鼠標放上圖片上顯示的文字 border指定邊框
27 <dl></dl>定義列表
<dt>河北
</dt><dd>石家莊
</dd><dd>滄州
</dd><dd>保定
</dd>
28 <ul></ul>無序列表 type可以取值disc(圓點)、circle(圓圈)、square(方塊)
29 <ol></ol>有序列表 type可以取值A(chǔ)、a、1、i、I
30 <table></table>表格
<tr></tr>行
<td></td>單元格
31 cellpadding內(nèi)容和表格邊線之間的距離
32 cellspacing單元格之間的間距
33 <tr>和
<td>的屬性： align水平對齊
34 valign垂直對齊
35 rowspan合并行
36 colspan合并列
37 完整的表格：table/caption/thead/tbody/tfoot/tr/td/th
38 <form></form>表單 需要把數(shù)據(jù)提交到服務(wù)器，需要把
<input><textarea><select>放到
<form>中
39 <input/>表單元素 submit/button/checkbox/file/hidden/image/password/radio/reset/text
40 text:maxlength輸入最大長度 readonly只讀
41 file:form的enctype必須設(shè)置為multipart/form-data，method屬性為post
42 <select></select> size>1就是ListBox，否則就是ComboBox multiple多選
43 <option></option> selected默認選中
44 <textarea></textarea>多行文本，文本域 cols列數(shù) rows行數(shù)
45 <label></label>文本 for指定要修飾的控件的id accesskey="r"指定快捷鍵
46 <fieldset></fieldset>GroupBox效果
<legend></legend>修飾這個GroupBox信息
47 <marquee></marquee>滾動文字 direction滾動方向 behavior(scroll/slide/alternate) scrolldelay滾動速度
48 <bgsound/>播放wav和mid格式的聲音
49 <div></div>層 display:inline變成
<span>效果
50 <span></span> display:block變成
<div>效果
51 <frameset></frameset>框架
52 <frameset rows="30%,65%,*" cols="50%,50%">
53 <frame src="top.html" noresize/>
54 <frameset cols="20%,80%">
55 <frame src="left.html" noresize/>
56 <frame src="main.html" noresize/>
57 </frameset>
58 <noframes>
59 <body>當瀏覽器不支持框架時，顯示這個內(nèi)容
</body>
60 </noframes>
61 </frameset>
62
63 <iframe src="iframe.html" name="0" width="0" height="0"></iframe>不分割當前頁面，就可以嵌入其它頁面
?
HTML和XML的聯(lián)系和區(qū)別
相同點?
都是標記語言，注釋都一樣
都可以通過dom編程方式來訪問
都可以通過CSS來改變外觀
不同點??
xml比html語法要求更嚴格
xml側(cè)重于數(shù)據(jù)存儲，html側(cè)重于數(shù)據(jù)展示
樣式表、CSS?????????
CSS的好處
外觀美化，布局，定位
實現(xiàn)內(nèi)容與樣式的分離，方便團隊開發(fā)
方便統(tǒng)一定義格式，修改也方便
CSS的計量單位：px、%、em(相對單位)
CSS的屬性：
background-color:背景顏色
border-style:邊框風格 solid(實線)、dashed(虛線)、dotted(點)
border-width:邊框?qū)挾?/span>
border-color:邊框顏色
display:元素是否顯示???? block(塊級元素)、none(不顯示)、inline(內(nèi)聯(lián)元素)
cursor:鼠標樣式????????? pointer(小手)、text(輸入Bean)、wait(忙沙漏)、help(幫助)
cursor:url(1.ani)使用ani和cur格式的自定義光標圖片
list-style-type:none???? li不顯示原點，設(shè)置在ul或者li上
margin:上右下左????????? 與表格的cellspacing類似
padding:與表格的cellpadding類似
visibility:hidden隱藏
樣式選擇器：
標簽選擇器:input{}
?class選擇器:.cls{}???? 用多個類選擇器的時候用空格隔開，以最后一個定義的重復類選擇器為準
id選擇器:#dv{}
標簽+類選擇器:input.cls{}
包含選擇器(層次選擇器):p strong{}
組合選擇器:h1,h2,input{}
自選擇器:div>p{}
?相鄰選擇器:div+p
偽選擇器:???? a:link{}沒點之前
?a:hover{}鼠標懸浮
a:active{}激活狀態(tài)
?a:visited{}訪問以后
以上選擇器的優(yōu)先級是：
style>id選擇器>類選擇器>標簽選擇器(!important可以提高優(yōu)先級???? color:red !important)
使用CSS的三種方式:元素內(nèi)聯(lián)(行內(nèi)樣式表)、頁面嵌入(內(nèi)嵌樣式表)、外部引用(外部樣式表)
寫入元素的style屬性???? 在head中加入?????????????? css后綴文件(推薦)
文檔流
?????????
position:absolute絕對定位
position:fixed固定定位
position:relative相對定位
position:static默認值
position:inherit繼續(xù)父元素的position值
Div+CSS布局?????????
不用<table>進行布局的原因
table可能會在所有的tr和td加載完成以后才顯示，所以加載完成之前一片空白
用table布局會將布局方式寫在html中，違反了“語義性”原則
用table會影響搜索引擎的抓取，不利于SEO
Div+CSS就是將要布局的內(nèi)容用<div>切成塊，然后使用css描述每個快的大小、位置等
float:left兩個層并排排列
margin:0px auto層的相對居中
clear:both清楚浮動
????
????
| 博客地址： | http://www.cnblogs.com/wolf-sun/ |
| 博客版權(quán)： | 本文以學習、研究和分享為主，歡迎轉(zhuǎn)載，但必須在文章頁面明顯位置給出原文連接。
如果文中有不妥或者錯誤的地方還望高手的你指出，以免誤人子弟。如果覺得本文對你有所幫助不如【推薦】一下！如果你有更好的建議，不如留言一起討論，共同進步！
再次感謝您耐心的讀完本篇文章。http://www.cnblogs.com/wolf-sun/p/3198039.html |
總結(jié)
以上是生活随笔為你收集整理的HTML常见标签总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
