HTML+CSS總結(jié)
1.<p></p>標(biāo)簽,段落標(biāo)簽
2.<h1></h1>-<h6></h6>標(biāo)題標(biāo)簽,不繼承font-size和font-weight屬性,因?yàn)橛凶约罕旧淼臉邮?
注意:以上兩個(gè)標(biāo)簽里面都不能放塊級元素.
3.<strong></strong>和<b></b>標(biāo)簽,為字體加粗的標(biāo)簽
4.<i></i>和<em></em>標(biāo)簽,字體傾斜標(biāo)簽,經(jīng)常用來放字體圖標(biāo)iconfont、icomoon和精靈圖
5.<ins></ins>和<u></u>標(biāo)簽,為字體添加下劃線
6.<del></del>和<s></s>標(biāo)簽,為字體添加刪除線
7.<div></div>和<span></span>無語意標(biāo)簽,通常用來做容器.
8.語義標(biāo)簽<header></header>頭部、<footer></footer>底部、<section></section>塊、<nav></nav>導(dǎo)航、<article></article>文章、<aside></aside>側(cè)邊欄
9.列表
無序列表<ul><li></li></ul>? ? ? ? ?自定義列表<dl><dt></dt>
<dd></dd></dl>? ? ? ? ? ? 有序列表<ol><li></li></ol>
10.表格? <table> </table>
<caption></caption>表格標(biāo)題標(biāo)簽
<th></th>表頭
<tr></tr>行
<td>單元格</td>
表格結(jié)構(gòu)標(biāo)簽:只為了分結(jié)構(gòu),不會(huì)影響內(nèi)容
????1.表格標(biāo)題標(biāo)簽<caption>
????2.表格頭thead
????3.表格體tbody
合并單元格
colspan 跨列合并 橫向
rowspan 跨行合并 縱向
注意:外鏈的CSS要加上border-collapse:collapse,表格邊框合并,表格專屬
合并單元格步驟?
????1.?確定跨行合并rowspan?跨列合colspan
????2.row行?col列
????3.確定目標(biāo)單元格,原則,左上角為目標(biāo)單元格
????4.確定合并單元格數(shù)量
????5.刪除多余的單元格
cellspacing單元格和單元格之間的距離
cellpadding單元格邊框和內(nèi)容之間的距離
11.表單<input/>單標(biāo)簽
form表單域,塊級元素.把用戶輸入的數(shù)據(jù)收集起來發(fā)送給后臺(tái)人員處理
type屬性值有:
text文本,?
password密碼,
radio單選按鈕(設(shè)置相同的name值時(shí),多選一.
checkbox checkbox,復(fù)選框,設(shè)置checkbox="checkbox"時(shí).默認(rèn)選中該選項(xiàng).
file上傳文件
submit提交按鈕,要提交的內(nèi)容必須放在form表單中，表單必須有name屬性
reset重置表單
button按鈕
value所有表單存儲(chǔ)的值,設(shè)置一個(gè)表單默認(rèn)值="李狗蛋"
placeholder 占位符,設(shè)置表單提示屬性
12.<select></select>下拉選項(xiàng)框
<option></option>選項(xiàng) 默認(rèn)值selected="selected"
13.<textarea/>輸入?yún)^(qū)域,不能縮放,resize:"none"
border:none 清除默認(rèn)邊框
text-decoration:none去掉下劃線
outline:none去掉外輪廓線
display:none隱藏元素,不占位置
14.<lable><lable/>增大input獲取焦點(diǎn)的區(qū)域
方法1:<lable for="aaa" >用戶名</lable>
<input id="aaa" type="text">
方法2:<lable>用戶名<input type="text"></lable>
15.鏈接 a標(biāo)簽 <a href="要鏈接的路徑"</a>
路徑 ,本地路徑 分為,相對路徑和絕對路徑
相對路徑: ./直接寫文件名,當(dāng)前目錄
../上一級目錄
/下一級目錄
絕對路徑? 例如:C:\desktop\songge.html
網(wǎng)絡(luò)路徑 例如:http://www.baidu.com
target屬性 blank新建標(biāo)簽頁打開,self自身打開
16.<img>圖像,src圖路徑,與上面a標(biāo)簽鏈接路徑同上
title屬性鼠標(biāo)懸停時(shí)顯示的文本,任何標(biāo)簽都可以使用
alt圖片無法加載的提示文本
CSS層疊樣式表
三大特性:層疊性、繼承性、優(yōu)先級
層疊性:
相同的選擇器下,后面的樣式會(huì)層疊之前的樣式.
注意:left和right是不會(huì)重疊的,因?yàn)樗鼈兪遣煌膶傩?/p>
繼承性:
字體,顏色,行高會(huì)繼承.(繼承的權(quán)重為0)
注意:a標(biāo)簽不會(huì)繼承字體顏色.因?yàn)楸旧碛凶煮w顏色.
標(biāo)題標(biāo)簽,font-size,font-weight會(huì)繼承
優(yōu)先級:
!import權(quán)重正無窮大
行內(nèi)樣式權(quán)重1000
id選擇器權(quán)重100
class選擇器 類選擇器 偽類選擇器 權(quán)重10
標(biāo)簽選擇器 權(quán)重1
通配符選擇器
繼承 權(quán)重0
元素的顯示方式
display:block,轉(zhuǎn)為塊級元素.
塊級元素特點(diǎn):獨(dú)占一行,可以設(shè)置寬高padding margin
display:inline-block ,轉(zhuǎn)為行內(nèi)塊元素
行內(nèi)塊元素:input img td 等
特點(diǎn):具有塊級元素可以設(shè)置寬高的特點(diǎn),也可以在一行上顯示
注:img標(biāo)簽,消除底部間隙
1.vertical-align:middle
2.display:block
3.給父元素設(shè)置:font-size:0/ling-height:0
display:inline轉(zhuǎn)為行內(nèi)元素
特點(diǎn):可以在一行上顯示，不可以設(shè)置寬高不可以設(shè)置垂直方向上的內(nèi)外邊距
display:none,隱藏元素,不占位置
visibility:hidden讓元素隱藏占位置
visibility:visible,讓元素顯示
文字樣式
text-align:center/left/right;水平方向上行內(nèi)塊元素的對齊方式
vertical-align:top/bottom/middle/basseline(默認(rèn)值,基線對齊)??行內(nèi)塊元素和行內(nèi)元素在垂直方向上的對齊方式
顏色 transparent
字體 font-style ,font-weight,font-family(不同的字體需要用,分隔)
連寫:font:font-style font-weight font-size/line-height "Microsoft Yahei";
注意:字體大小寫和字體家族是必須別的屬性
line-height行高,設(shè)置不同文字之間的距離,單行文本垂直居中 line-height:高度:
text-decoration 文本修飾線 underline下劃線? none清除文本修飾線? line-through刪除線
text-indent 文本縮進(jìn) text-index:2em 兩個(gè)中文字符的間隔,如果后面不帶單位,=文字*數(shù)值
