HTML/CSS 知识点
生活随笔
收集整理的這篇文章主要介紹了
HTML/CSS 知识点
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
本文是從簡(jiǎn)書復(fù)制的, markdown語法可能有些出入, 想看"正版"和更多內(nèi)容請(qǐng)關(guān)注 簡(jiǎn)書: 小賢筆記
整個(gè)前端開發(fā)的工作流程
互聯(lián)網(wǎng)原理
元素
- 行內(nèi)元素：一行中有n多個(gè)行內(nèi)元素，行內(nèi)元素不能設(shè)置寬和高
- 塊元素：一個(gè)塊元素，獨(dú)自占一行；
- 行內(nèi)塊元素：一行中可以有多個(gè)行內(nèi)塊元素，但是可以設(shè)置寬和高
html骨架結(jié)構(gòu)
- !DOCTYPE..文檔聲明頭(html5,html4.01,XHTML)
- 在html4.01和XHTML中各有3個(gè)小規(guī)范
- strict 嚴(yán)謹(jǐn)?shù)?/li>
- transitional 普通的
- frameset 框架
- html：超文本標(biāo)記語言；里面用的都是"標(biāo)簽對(duì)兒"
- head
- meta（charset:UTF-8,GB2312）
- <meta name="description" content="要描述的內(nèi)容"/>
- <meta name="keywords" content="關(guān)鍵字，關(guān)鍵詞"/>
(以上兩個(gè)meta都是為了SEO優(yōu)化) - <title>頁面的標(biāo)題</title>
- body
- 標(biāo)題<h1></h1><h2></h2>
- 段落 p:雖然p是塊元素，但是他里面放的也是圖片，文字；
- span:里面用來放文本：圖片，文字；
- a鏈接<a href="要跳往的地址">
- 圖片<img src="相對(duì)地址/絕對(duì)地址"
- css：寫在 里面
- 樣式的基本語法：
選擇器(div){
key:value
}
- 選擇器：
- 標(biāo)簽選擇器：div,h,p,a,img,span
- class選擇器:.xinxi
(千萬不要用漢字和數(shù)字開頭做為class名，一定要用英文)
- 樣式的基本語法：
html更多解讀
- html只考慮標(biāo)簽嵌套，跟tab和空格無關(guān)，無數(shù)個(gè)空格，也只算作一個(gè)
- 圖片標(biāo)簽[圖片上傳失敗...(image-fd7aaf-1518537900016)]
- 相對(duì)路徑：以當(dāng)前頁面為出發(fā)點(diǎn)查找的；(./ 或 不寫,找到父級(jí)../)
- 絕對(duì)路徑：都是以http開頭的；例如：http://i1.piimg.com/567571/f3f79e8903424ea4.jpg
- 圖片標(biāo)簽上有兩個(gè)常用屬性，src屬性：引入圖片地址; alt標(biāo)簽：圖片無法正常加載時(shí)，用來替代的文字；(alt也可以省略)
- a鏈接常用的屬性
- href:'要跳往的地址',href的作用
- 可以填寫絕對(duì)路徑，跳到直到的網(wǎng)頁
- 可以寫#：1）不確定地址的時(shí)候 2)簡(jiǎn)單的回到頂部效果
- 利用錨點(diǎn)進(jìn)行頁面切換
- title:鼠標(biāo)移上時(shí)的提示
- target:打開方式(默認(rèn)的_self當(dāng)前頁面打開; _blank新頁面打開)
- 這些屬性中，title和target都可以省略；
- a鏈接的錨點(diǎn)使用
- 本頁面各個(gè)模塊之間的相互跳轉(zhuǎn) <div id="#div1"></div> <a href="#div1"></a> 2 實(shí)現(xiàn)不同頁面之間，不同模塊的相互跳轉(zhuǎn)
<a href="detail.html#detail1"></a>
列表
- 無序列表:無序列表中的li也是容器；
- 有序列表
- 定義列表：dl,dt,dd都是容器
表單
- 表單用
- 輸入文本框 <input type="text" placeholder="默認(rèn)提示"/>
- 輸入密碼 <input type="password" placeholder="默認(rèn)提示"/>
- 單選按鈕：單選按鈕組，一定要加上name，否則無法實(shí)現(xiàn)單選效果；
多選框
<input type="checkbox" checked/>下拉單
- name和value主要用于前端向后臺(tái)提交數(shù)據(jù)；
- id：
- 設(shè)置樣式(不建議)
- 在JS階段，用來獲取元素
- id配合a鏈接，進(jìn)行錨點(diǎn)設(shè)置；
- 留言框：<textarea name="" value="" cols="" rows=""></textarea>
按鈕
- 普通按鈕 type=button
- 提交按鈕 type=submit
- 重置按鈕 type=reset
選擇器
- 標(biāo)簽選擇器：div h1~h6 p span a img ul li ol dl dt dd input select
添加一個(gè)小icon的步驟：
- 到官網(wǎng)上去取圖片（以京東為例）：
- https://www.jd.com/favicon.ico
- 把以上圖片另存為，存到電腦中
- 注意：把icon圖標(biāo)放到文件夾的"根目錄"；
- 在html頁面中加入：<link rel="icon" href="favicon2.ico" type="image/x-icon"／>
一個(gè)完整的頁面由三部分構(gòu)成：
- html：超文本標(biāo)記語言
- 通過語義化標(biāo)簽，搭建頁面"結(jié)構(gòu)"
- css:層疊樣式表
- 負(fù)責(zé)頁面"樣式"，美化頁面的
- js:輕量級(jí)的腳本語言；交互指的是兩個(gè)地方（行為）
- 前端自己在頁面上寫的"動(dòng)效"
- 前后臺(tái)的"數(shù)據(jù)交互"
結(jié)構(gòu)，樣式，和行為三者相結(jié)合
css的引入方式
css的優(yōu)先級(jí)
- 行內(nèi)>內(nèi)嵌>外鏈
css常見屬性和樣式
- 當(dāng)設(shè)置錯(cuò)誤的時(shí)候，在chrome的控制臺(tái)，會(huì)有黃色的嘆號(hào)，進(jìn)行提示
- color：顏色值； 顏色有三種表示方法
快捷鍵：c tab- 用英文：red
- rgb(255,0,0)
- #fff
- font-size:字體大小
- 快捷鍵：fsz30->font-size:30px
font:400 14px/28px "宋體";
- 快捷鍵：fsz30->font-size:30px
- background:添加背景
圖片默認(rèn)是橫向重復(fù)和縱向重復(fù)- 位置：
- 橫向位置：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.標(biāo)簽選擇器：div p ul li dt dd em i u del strong b input label from table
- 缺點(diǎn)：只能進(jìn)行共性的操作，無法個(gè)性操作
- 2.class選擇器
- 3.id：
- .class名,同一個(gè)頁面能有無數(shù)個(gè)相同的class名
- #id名，同一個(gè)頁面只能有一個(gè)ID名；（ID名是不能重復(fù)的）
- 在真正的開發(fā)過程中，class是用來設(shè)置樣式的，id是用來獲取元素
- 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.下一個(gè)兄弟選擇器 ul li li{} 兼容IE7
開發(fā)常用的瀏覽器
- chrome
- IE7~11
- firefox
CSS的繼承性和層疊性
- 以font開頭的屬性都能夠繼承；line-height
- color可以繼承
- text開頭的也可以繼承，比如text-align
css權(quán)重
- !important權(quán)重?zé)o窮大；（少用為好）
- id的權(quán)重大于class的權(quán)重
css盒子模型
- css盒子模型由5部分：
- 內(nèi)容的寬高 padding border margin
- 單行文本的居中：height = line-height
- 多行文本的居中，padding和line-height
- padding：
- padding是內(nèi)邊距
- padding的顏色和內(nèi)容的顏色一致；background-color填充的是border以內(nèi)的顏色
padding是復(fù)合值
如果現(xiàn)設(shè)置padding:30px
padding:30px; ->pl30; pt30;pr30;pb30
padding:20px 30px; ->上下為20px 左右30px
padding:10px 20px 30px; -> 上10px 左右20px 下30px
padding:10px 20px 30px 10px; 上 右 下 左
再設(shè)置padding-left:10px
請(qǐng)問最后的值各是多少？
左10px; 其他都是30px
- margin：外邊框
- border:
- border:1px solid #000;
- border-width
- border-style：solid（實(shí)體）,dashed（虛線）,dotted（點(diǎn)）
- border-color
行內(nèi)元素和塊級(jí)元素
- p標(biāo)簽雖然是文本標(biāo)簽，但是它可以當(dāng)容器來使用，p標(biāo)簽內(nèi)一定不能放div; p段落也是塊元素，他獨(dú)占一行
- 文本元素：p span a i em u b strong img
- 容器級(jí)：div li dt dd h級(jí)（不建議）
- 除了p，所有的文本元素，都是行內(nèi)元素
- 所有容器級(jí)別的元素，都是塊元素
- 塊和行內(nèi)元素的相互轉(zhuǎn)化
- display：inline; //行內(nèi)
- display:inline-block;//行內(nèi)塊
- display：block; //塊
- 關(guān)于定位：大部分情況，建議的是:父相子絕（父親：相對(duì)定位，兒子：絕對(duì)定位）
- 關(guān)于脫離文檔流的方法
- 浮動(dòng) float:left; float:right;
- 絕對(duì)定位 position:absolute;
- 固定定位 position:fixed;
- 重點(diǎn)：1）父相子絕 2）行內(nèi)元素一點(diǎn)脫離文檔流，就可以設(shè)置寬高了；
- 注意：行內(nèi)元素，一旦脫離文檔流，雖然能設(shè)置寬高，但是，如果不設(shè)置寬的話，會(huì)默認(rèn)跟內(nèi)容一樣寬；而塊級(jí)元素，如果不設(shè)置寬度的話，默認(rèn)跟父級(jí)一樣塊，沒有父級(jí)的話，默認(rèn)跟屏幕一樣寬
- 清除浮動(dòng)
- 固定高度height:xxxpx;
缺點(diǎn)：如果作為產(chǎn)品列表的容器展示，我們無法知道容器的具體高度 - overflow:hidden
- 溢出隱藏
- 清除浮動(dòng)
缺點(diǎn)：如果父容器比較小，子容器比較大；父容器如果通過overflow:hidden來清除浮動(dòng)的話，子容器就看不到了
- 固定高度height:xxxpx;
- clear:both
缺點(diǎn)：可以解決浮動(dòng)引起的文檔流錯(cuò)亂問題，但是上面浮動(dòng)元素的父容器該沒有高度還沒有高度 - 偽類清除浮動(dòng)
- rgba() 背景透明，文字不透明；
- opacity:0 背景透明，文字也透明；
最基本的開發(fā)，首先必須創(chuàng)建的項(xiàng)目結(jié)構(gòu)
- images文件夾：放切好的圖片
- css文件夾：放置css文件：index.css
- index.html文件
關(guān)于繼承
- 寬度繼承：如果沒有父級(jí)，塊元素的寬度默認(rèn)跟可視區(qū)一樣寬；如果有父級(jí)的情況下，默認(rèn)跟父級(jí)寬度一樣寬(寬度可以繼承，但高度無法繼承;)
- font可以繼承
- color可以繼承：當(dāng)遇到a標(biāo)簽的時(shí)候， color無效；
- line-height可以繼承
當(dāng)文本超度固定寬度的處理方法：
- 單行文本出超固定寬度出現(xiàn)省略號(hào)的寫法：
英文不折行的問題處理：
word-wrap:break-word;出現(xiàn)滾動(dòng)條的寫法
overflow-y:scroll;
區(qū)分偽類和偽元素
- 偽元素：用:和::都可以，現(xiàn)在建議用::
- 偽類：給當(dāng)前選擇器添加動(dòng)效，只能用:
總結(jié)
以上是生活随笔為你收集整理的HTML/CSS 知识点的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS布局(二) 盒子模型属性
- 下一篇： 我的HTML总结之常用基础便签