【HTML】HTML+CSS复习笔记
生活随笔
收集整理的這篇文章主要介紹了
【HTML】HTML+CSS复习笔记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML
行內元素：不自動換行。如：圖片
塊級元素：自動換行
頁面內跳轉：添加錨點
以前在出現div之前，表格標簽經常被用作網頁布局。現在，表格標簽被用作數據的顯示更多一些。
表格：行合并叫rowspan，列合并叫colspan
iframe和frameset的應用方向不同：
iframe是在同一個頁面中加載不同的資源
frameset是將不同的頁面集成在一個頁面內顯示（過時，html5已經不支持了）
CSS
如果css的聲明全部在head標簽中，就遵循就近原則，誰離標簽近，誰就會被顯示。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css的選擇器學習</title><!--css的選擇器學習：標簽選擇器：標簽名{樣式名1：樣式值1;……}作用：會將當前網頁內的所有該標簽增加相同的樣式id選擇器:#標簽的id屬性值{樣式名1：樣式值1;……}作用：給某個指定的標簽添加指定的樣式類選擇器：.類選擇器名{樣式名1：樣式值1;……}作用：給不同的標簽添加相同的樣式全部選擇選擇器*{樣式名1：樣式值1;……}作用：選擇所有的HTML標簽，并添加相同的樣式 -----------------------------------------------------------------------------組合選擇器：選擇器1,選擇器2,……{樣式名1：樣式值1;……}作用：解決不同的選擇器之間重復樣式的問題子標簽選擇器選擇器1 子標簽選擇器{樣式名1：樣式值1;……}屬性選擇器：標簽名[屬性名=屬性值]{樣式名1：樣式值1;……}作用：選擇某標簽指定具備某屬性并且屬性值為某屬性值的標簽css的使用過程：1、聲明css代碼域2、使用選擇器選擇要添加樣式的標簽根據需求來。使用*選擇器來給整個頁面添加基礎樣式使用類選擇器給不同的標簽添加基礎樣式使用標簽選擇器給某類標簽添加基礎樣式使用id、屬性選擇器、style屬性聲明方式給某個標簽添加個性化樣式。3、書寫樣式單邊框設置border:solid 1px;字體設置:font-size:10px;設置字體大小font-family:"黑體";(設置字體的格式)font-weight：bold;設置字體加粗字體顏色設置color:顏色;背景顏色設置background-color:顏色;背景圖片設置background-img:url(圖片的相對路徑);background-repeate:no-repeate;設置圖片不重復bacground-size:cover;圖片平鋪整個頁面高和寬設置浮動設置float:left|right行高設置line-height:10;--><!--聲明css代碼域--><style type="text/css">/*標簽選擇器*/table{width: 300px;height: 200px;border: solid 1px;background-color: red;}b{width: 300px;height: 200px;border: solid 1px;background-color: red;}/*id選擇器*/#t1{background-color: gray;}/*類選擇器*/.common{color: red;}/*組合選擇器*/.common,table{background-color: blue;} /*子標簽選擇器*/ul li a{color: black;}#p1 a{color: yellow;}input[type=text]{background-color: red;}</style></head><body><h3>css的選擇器學習</h3><hr /><hr /><table id="t1" class="common"><tr><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td></tr></table><table><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table><b class="common">css學習</b><hr /><!--子選擇器--><ul id="u"><li><a href="">哈哈</a></li><li><a href="">呵呵</a></li><li><a href="">嘿嘿</a></li></ul><ul><li><a href="">哈哈</a></li><li><a href="">呵呵</a></li><li><a href="">嘿嘿</a></li></ul><p id="p1"><a href="">嘻嘻</a></p><p><a href="">嘻嘻</a></p><a href="">嘻嘻</a><hr /><input type="text" name="" id="" value="" /><br /><input type="password" name="" id="" value="" /></body> </html>css的樣式使用
<html><head><title>css的樣式使用</title><meta charset="UTF-8"/><!--聲明css代碼域--><style type="text/css">/*添加網頁背景圖*/body{background-image: url(http://pic.58pic.com/58pic/11/67/86/60f58PIC834.jpg);/*添加背景圖片*/background-repeat: no-repeat;/*設置圖片不重復*/background-size: cover;/*設置圖片平鋪*/}/*使用標簽選擇器*/table{}/*設置table的行高*/tr{height: 40px;}/*設置td*/td{width: 100px;/*設置寬*/border: solid 1px red;/*添加邊框及其顏色和大小*/border-radius: 10px;/*設置表框的角度*/background-color: orange; /*設置背景顏色*/text-align: center;/*設置文本位置*/color: blueviolet;/*設置文本顏色*/font-weight: bold;/*設置文本加粗*/letter-spacing: 10px;/*設置字體間距*/} /*--------------------------------------------------------------------------------*/ul{background-color: gray;height: 50px;}li{list-style-type:none;/*去除li的標識符*//*display: inline;*/float: left;/*設置菜單左懸浮*/}li a{color: black;text-decoration: none;/*設置超鏈接去除下劃線*/font-weight: bold;font-size: 20px;margin-left: 20px;position: relative;top:10px;}</style></head><body><h3>css的樣式使用</h3><hr /><table><tr><td>姓名</td><td>性別</td><td>愛好</td></tr><tr><td>張三</td><td>男</td><td>唱歌</td></tr><tr><td>李四</td><td>男</td><td>跳舞</td></tr></table><hr /><h1>史上最丑導航欄</h1><ul><li><a href="">首頁</a></li><li><a href="">百戰</a></li><li><a href="">java風情</a></li><li><a href="">客服</a></li></ul></body> </html>照片墻案例
<html><head><title>照片墻案例</title><meta charset="UTF-8"/><!--聲明css代碼域--><style type="text/css">/*設置body樣式 body中的內容居中*/body{text-align: center;background-color: gray;}/*設置圖片樣式*/img{width: 6%;/*設置高度*/padding: 20px;/*設置內邊距*/background-color: white;/*設置背景顏色*/transform: rotate(-10deg);/*設置傾斜角度*/margin: 20px;/*設置外邊距,控制圖片的擁擠程度*/}/*使用偽類給標簽添加樣式 hover是鼠標懸停的意思*/img:hover{border:solid 10px orange;/*設置鼠標懸停時圖片的外邊框*/transform: rotate(0deg) scale(1.3);/*設置旋轉角度和縮放比例*/z-index: 1;/*設置顯示優先級別*/transition: 1s;/*設置顯示加載時間*/}</style></head><body><br /><br /><br /><img src="img/a1.jpg" alt="" /><img src="img/a2.jpg" alt="" /><img src="img/a3.jpg" alt="" /><img src="img/a4.jpg" alt="" /><br /><img src="img/a5.jpg" alt="" /><img src="img/a6.jpg" alt="" /><img src="img/a7.jpg" alt="" /><img src="img/a8.jpg" alt="" /></body> </html>DIV
div具有簡單的繼承關系：例如，如果父div套著子div，父div設置了行高，子div沒有設置行高的話，子div會繼承父div的行高。
知識點
盒子模型簡單布局示例1（sxt代碼示例）
盒子模型簡單布局示例2（我的仿寫）
CSS的定位學習
<html><head><title>css的定位</title><meta charset="UTF-8"/><!--css的定位學習：position相對定位:relative作用：相對元素原有位置移動指定的距離(相對的自己的原有位置)可以使用top,left,right,bottom來進行設置。注意：其他元素的位置是不改變的。絕對定位:absolute作用：可以使用元素參照界面或者相對父元素來進行移動 注意：如果父級元素成為參照元素，必須使用相對定位屬性默認情況下是以界面為基準進行移動的。固定定位:fixed作用：將元素固定現在頁面的指定位置，不會隨著滾動條的移動而改變位置。以上定位都可以使用top,left,right,bottom來進行移動。z-index:此屬性是用來聲明元素的顯示級別的。--><!--聲明css代碼域--><style type="text/css">/*給div01添加樣式*/#div01{border: solid 2px orange;height: 200px;width: 800px;margin-bottom: 10px;margin-top: 50px;position: relative;/*給div01添加相對定位成為其子元素絕對定位的參照元素*/}/*給showdiv添加樣式*/#showdiv{border: solid 3px;height: 50px;width: 50px;position: absolute;top:10px;}/*給div02添加樣式*/#div02{border: dashed 2px coral;height:200px;width: 800px;margin-bottom: 10px;position: relative;/*使用相對定位*/left:50px;top:100px;background-color: coral;z-index: 3;}/*給div03添加樣式*/#div03{border: solid 2px #FF7F50;height: 200px;width: 800px;background-color: gray;position: relative;z-index: 4;}/*給div04添加樣式*/#div04{border: solid 3px blue;height: 50px;width: 50px;position: fixed;top:270px;right: 10px;}</style></head><body><div id="div01"><div id="showdiv"></div></div><div id="div02">我是div02</div><div id="div03"></div><div id="div04"></div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></body> </html>總結
以上是生活随笔為你收集整理的【HTML】HTML+CSS复习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【PAT甲级 大数运算】1065 A+B
- 下一篇： 【HTML+CSS】练习：百度首页模拟