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