html：超文本標記語言

通過語義化標簽，搭建頁面 結構

css:層疊樣式表

負責頁面 樣式 ，美化頁面的

js:輕量級的腳本語言；交互指的是兩個地方（行為）

前端自己在頁面上寫的 動效

前后臺的 數據交互
結構，樣式，和行為三者相結合

嵌入式；(內嵌式)

 style  body{ height:100%; background-color: red; /style 

行內樣式

 body >
外鏈式（真正的開發，用的都是外鏈）
 link rel= stylesheet href= style.css?1.1.11 / 
css的優先級
行內 內嵌 外鏈
css常見屬性和樣式
當設置錯誤的時候，在chrome的控制臺，會有黃色的嘆號，進行提示
color：顏色值； 顏色有三種表示方法
快捷鍵：c+tab
用英文：red
rgb(255,0,0)
#fff
font-size:字體大小
快捷鍵：fsz30- font-size:30px
font:400 14px/28px 宋體 
background:添加背景
圖片默認是橫向重復和縱向重復
位置：
橫向位置：left center right
縱向位置：top center bottom
綜合寫法：background: url( images/bg2.png ) no-repeat left center red;
background-image:url( 圖片地址 )
background-repeat:no-repeat; /repeat-x;/repeat-y
background-position:0 0
background-color:red
字體是否傾斜
font-style:italic 傾斜／ normal 正常
下劃線和刪除線
text-decoration: line-through; 刪除線
text-decoration: none; 去除下劃線
text-decoration: underline;添加下劃線
css中的選擇器：
1.標簽選擇器：div p ul li dt dd em i u del strong b input label from table
缺點：只能進行共性的操作，無法個性操作
2.class選擇器
3.id：
.class名,同一個頁面能有無數個相同的class名
#id名，同一個頁面只能有一個ID名；（ID名是不能重復的）
在真正的開發過程中，class是用來設置樣式的，id是用來獲取元素
 div >
4.后代選擇器：div p(把div容器下，子子孫孫的p元素都選擇上了)
5.子選擇器：div p(選擇div容器下的兒子)；兼容IE7+
6.交集選擇器: div.div1
7.并集選擇器：div,p
8.通配符*：代表所有的元素
9.序選擇器：兼容IE8+
div p:first-child
div p:last-child
10.下一個兄弟選擇器 ul li+li{} 兼容IE7+
開發常用的瀏覽器
chrome
IE7~11
firefox
CSS的繼承性和層疊性
以font開頭的屬性都能夠繼承；line-height
color可以繼承
text開頭的也可以繼承，比如text-align
css權重
!important權重無窮大；（少用為好）
id的權重大于class的權重
css盒子模型
css盒子模型由5部分：
內容的寬高+padding+border+margin
單行文本的居中：height = line-height
多行文本的居中，padding和line-height
padding：
padding是內邊距
padding的顏色和內容的顏色一致；background-color填充的是border以內的顏色
padding是復合值
padding:30px; - pl30; pt30;pr30;pb30
padding:20px 30px; - 上下為20px 左右30px
padding:10px 20px 30px; - 上10px 左右20px 下30px
padding:10px 20px 30px 10px; 上 右 下 左
如果現設置padding:30px
再設置padding-left:10px
請問最后的值各是多少？
左10px; 其他都是30px
margin：外邊框
border:
border:1px solid #000;
border-width
border-style：solid（實體）,dashed（虛線）,dotted（點）
border-color
行內元素和塊級元素
p標簽雖然是文本標簽，但是它可以當容器來使用，p標簽內一定不能放div; p段落也是塊元素，他獨占一行
文本元素：p span a i em u b strong img
容器級：div li dt dd h級（不建議）
除了p，所有的文本元素，都是行內元素
所有容器級別的元素，都是塊元素
塊和行內元素的相互轉化
display：inline; //行內
display:inline-block;//行內塊
display：block; //塊
關于定位：大部分情況，建議的是:父相子絕（父親：相對定位，兒子：絕對定位）
關于脫離文檔流的方法
浮動 float:left; float:right;
絕對定位 position:absolute;
固定定位 position:fixed;
重點：1）父相子絕 2）行內元素一點脫離文檔流，就可以設置寬高了；
注意：行內元素，一旦脫離文檔流，雖然能設置寬高，但是，如果不設置寬的話，會默認跟內容一樣寬；而塊級元素，如果不設置寬度的話，默認跟父級一樣塊，沒有父級的話，默認跟屏幕一樣寬
清除浮動
固定高度height:xxxpx;
缺點：如果作為產品列表的容器展示，我們無法知道容器的具體高度
overflow:hidden
clear:both
缺點：可以解決浮動引起的文檔流錯亂問題，但是上面浮動元素的父容器該沒有高度還沒有高度
偽類清除浮動
ul::after{display: block;height:0;content: clear: both;}
溢出隱藏
清除浮動
缺點：如果父容器比較小，子容器比較大；父容器如果通過overflow:hidden來清除浮動的話，子容器就看不到了
透明度處理
rgba() 背景透明，文字不透明；
opacity:0 背景透明，文字也透明；
opacity:0.1;/*不兼容IE7瀏覽器*/filter:alpha(opacity=10);
最基本的開發，首先必須創建的項目結構
images文件夾：放切好的圖片
css文件夾：放置css文件：index.css
index.html文件
關于繼承
寬度繼承：如果沒有父級，塊元素的寬度默認跟可視區一樣寬；如果有父級的情況下，默認跟父級寬度一樣寬(寬度可以繼承，但高度無法繼承;)
font可以繼承
color可以繼承：當遇到a標簽的時候， color無效；
line-height可以繼承
當文本超度固定寬度的處理方法：
單行文本出超固定寬度出現省略號的寫法：
white-space:nowrap;overflow:hidden;text-overflow:ellipsis
英文不折行的問題處理： word-wrap:break-word;
出現滾動條的寫法overflow-y:scroll;
區分偽類和偽元素
偽元素：用:和::都可以，現在建議用::
偽類：給當前選擇器添加動效，只能用:
以上就是HTML和CSS的一些知識點的匯總的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。