當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端html与css学习笔记总结篇

發(fā)布時(shí)間：2023/12/20 HTML 48 豆豆

生活随笔收集整理的這篇文章主要介紹了前端html与css学习笔记总结篇小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

第一部分 HTML

第一章職業(yè)規(guī)劃和前景

職業(yè)方向規(guī)劃定位：
- web前端開發(fā)工程師
- web網(wǎng)站架構(gòu)師
- 自己創(chuàng)業(yè)
- 轉(zhuǎn)崗管理或其他
web前端開發(fā)的前景展望：
- 未來IT行業(yè)企業(yè)需求最多的人才
- 結(jié)合最新的html5搶占移動(dòng)端的市場(chǎng)
- 自己創(chuàng)業(yè)做老板
- 隨著互聯(lián)網(wǎng)的普及web開發(fā)成為企業(yè)的寵兒和核心
web職業(yè)發(fā)展目標(biāo)：
- 第一、梳理知識(shí)架構(gòu)
  - 負(fù)責(zé)內(nèi)容的HTML
  - 負(fù)責(zé)外觀的css（層疊樣式表）
  - 負(fù)責(zé)行為的js
  - ps切圖
- 第二、分解目標(biāo)（起步階段、提升階段、成型階段）
  - 起步階段：
    - 基本知識(shí)的掌握
    - 常用工具的掌握
    - 溝通技巧的掌握（圍繞客戶的需求）
    - 良好的開發(fā)習(xí)慣（加注釋、對(duì)齊方式）
  - 提升階段：
    - 熟悉掌握HTML基本標(biāo)簽和屬性
    - 熟練掌握css的基本語法和使用
    - 瀏覽器兼容和w3c標(biāo)準(zhǔn)的掌握
    - 結(jié)合html+css+js開始系統(tǒng)項(xiàng)目的開發(fā)
  - 成型階段：
    - 精通DIV+CCS布局
    - 精通css樣式表控制html標(biāo)簽
    - 熟悉運(yùn)用js制作動(dòng)態(tài)網(wǎng)站的效果
    - 能獨(dú)立開發(fā)完成網(wǎng)站

第二章 html基本結(jié)構(gòu)

認(rèn)識(shí)HTML：
- html不是一種編程語言，是一種標(biāo)志語言
- 標(biāo)記語言是由一套標(biāo)識(shí)標(biāo)簽組成的
- html使用標(biāo)簽來描述網(wǎng)頁
html結(jié)構(gòu)：

<html>

</html>

不成對(duì)出現(xiàn)的標(biāo)簽
<br>?<hr>?<meta>?<img>?<input..>?<option..>?<link>

HTML 基本標(biāo)簽的講解：
- <html>?<head>?<body>標(biāo)簽
- <h1>—-<h6>僅僅用于標(biāo)題文本，不要為了產(chǎn)生粗體文本使用它們
- <p>標(biāo)簽段落標(biāo)簽
- <strong><b>標(biāo)簽
- 都會(huì)讓文字產(chǎn)生加粗效果
  - <strong>用于強(qiáng)調(diào)文本，強(qiáng)度更深，表示重要文本—>用于SEO優(yōu)化
  - <b>只是視覺加粗效果—>單純?yōu)榱水a(chǎn)生加粗
- <em>?<i>標(biāo)簽
  - em用于強(qiáng)調(diào)文本
  - i只是視覺斜體效果
  - <strong>比<em>強(qiáng)調(diào)更強(qiáng)
- 特殊符號(hào)：
  -   —->空格
  - > —>大于號(hào)
  - &lt；—>小于號(hào)
  - &quot；—>引號(hào)
  - ©–>版權(quán)號(hào)

第三章 html基本標(biāo)簽

HTMl基本標(biāo)簽：
- span標(biāo)簽
  - 對(duì)被用來組合文檔中的行內(nèi)元素
  - 注意：span沒有固定的格式表現(xiàn)，當(dāng)對(duì)它應(yīng)用樣式時(shí)，才會(huì)產(chǎn)生視覺上的變化
- <pre>標(biāo)簽
  - 文字的格式按源碼的排版來顯示，我們稱之為預(yù)處理格式
- <a>標(biāo)簽—>他有一個(gè)必不可少的屬性 href
  - target屬性：
  - _self(在原來頁面打開)
  - _blank（新窗口打開）
  - _top（打開時(shí)忽略所有的框架）
  - _parent（在父窗口中打開）
- 創(chuàng)建錨點(diǎn)和錨鏈接
  - 錨點(diǎn)也是一種超鏈接，是頁面內(nèi)進(jìn)行跳轉(zhuǎn)的超鏈接
    - 第一步：創(chuàng)建錨點(diǎn)?<a name="錨點(diǎn)名稱"></a>
    - 第二步：使用創(chuàng)建好的錨點(diǎn)名稱?<a href="#錨點(diǎn)名稱">內(nèi)容</a>
- marquee標(biāo)簽
  - 可以創(chuàng)建一個(gè)內(nèi)容滾動(dòng)效果

1	<marquee direction="down" loop="4" οnmοuseοver=this.stop() οnmοuseοut=this.start()></marquee>

direction?表示滾動(dòng)方向，取值有（left,right,up,down,默認(rèn)left）
loop表示滾動(dòng)循環(huán)的次數(shù)，默認(rèn)為無限循環(huán)

1	οnmοuseοver=this.stop() οnmοuseοver=this.start() scrollamout="1"(滾動(dòng)速度)

表示當(dāng)鼠標(biāo)移上區(qū)域的時(shí)候停止?jié)L動(dòng)，鼠標(biāo)移開繼續(xù)滾動(dòng)

第四章 img圖片標(biāo)簽與路徑

圖片標(biāo)簽與路徑：
- 常見圖片格式?jpg?png?gif
- Gif?（只支持全透明）
- Jpeg?/jpg
- Png?半/全透明都支持
圖片標(biāo)簽寫法：
- <img src="" alt="" width="" height="" />
圖片四要素：
- src=""?圖片路徑
- alt=""?圖片含義
- width=""?圖片寬度和圖片大小保持一致
- height=""?圖片高度和圖片大小保持一致
- title=""
路徑知識(shí)：
- 相對(duì)路徑、絕對(duì)路徑：
  - 相對(duì)路徑：(Relative Path) 相對(duì)于該文件的路徑；
  - 絕對(duì)路徑：(Absolute Path) 從磁盤出發(fā)的路徑；
- <img src="" …… align="" />?align屬性–設(shè)置圖片與后面文字的位置關(guān)系
  值–top、bottom、middle、absmiddle、left、right
在靜態(tài)頁面中：
- /開頭表示根目錄；
- ./表示當(dāng)前目錄；（斜畫線前面一個(gè)點(diǎn)）
- ../上級(jí)目錄；（斜畫線前面兩個(gè)點(diǎn)）
- 直接用文件名不帶/也表示同一目錄
- 這些都是相對(duì)于當(dāng)前文件的位置來說的，如果用絕對(duì)路徑的話就是寫全了。

第五章三種列表的講解

三種列表的知識(shí)講解：
- <ul>無序列表
  - 無序列表是一個(gè)沒有順序項(xiàng)目的列表，此列表項(xiàng)默認(rèn)粗體圓點(diǎn)進(jìn)行標(biāo)識(shí)

<ul>

</ul>

有序列表
- 有序列表也是一列項(xiàng)目，只是列表項(xiàng)目使用的是數(shù)字進(jìn)行標(biāo)記。有序列表始于?<ol>?標(biāo)簽。每個(gè)列表項(xiàng)始于?<li>標(biāo)簽。

<ol>

</ol>

列表符號(hào)
- 無序列表-列表符號(hào):
  - type="circle"?空心圓?type=“disc”?實(shí)心圓默認(rèn)值?type="square"?方塊符
- 有序列表-列表符號(hào)
  - type="A"?A B C D
  - type="a"?a b c d
  - type="1"?1 2 3 4 默認(rèn)值type=”I” I II III type=”i” i ii iii
- 列表嵌套
- 無序列表-嵌套

<ul>

<li>柚子

<ul>

</ul>

</li>

有序列表-嵌套

<ol>

<li>茶

<ul>

</ul>

</li>

定義列表
- 定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。定義列表以?<dl>?標(biāo)簽開始。每個(gè)定義列表項(xiàng)以?<dt>開始。每個(gè)自定義列表項(xiàng)的定義以?<dd>?開始。

<dl>

<dd>學(xué)習(xí)DIV+CSS JS JQ 項(xiàng)目實(shí)戰(zhàn)</dd>

</dl>

dd是對(duì)dt的解釋
- < dl>< /dl>用來創(chuàng)建一個(gè)普通的列表,
- < dt>< /dt>用來創(chuàng)建列表中的上層項(xiàng)目，
- < dd>< /dd>用來創(chuàng)建列表中最下層項(xiàng)目，
- < dt>< /dt>和< dd>< /dd>都必須放在< dl>< /dl>標(biāo)志對(duì)之間。

<dl>

</dl>

dl是definition list的縮寫
dt是definition title的縮寫
dd是definition description的縮寫

list-style屬性具有三個(gè)屬性分量：
list-style-position?：設(shè)置列表項(xiàng)圖標(biāo)的位置，位于文本內(nèi)或者文本外
list-style-type：設(shè)置列表項(xiàng)圖標(biāo)的類型
list-style-image：使用圖像設(shè)置列表項(xiàng)圖標(biāo)

第六章表單元素(上)

表單標(biāo)簽:
- <form>表單標(biāo)簽
  - <form>表單是一個(gè)包含表單元素的區(qū)域，包括起來的都是表單的內(nèi)容
    
    1
    
    2
    
    3
    
    <form>
    
    <input type="text"/>
    
    </form>
HTML標(biāo)簽 -?Action和確認(rèn)按鈕：
- 當(dāng)用戶單擊確認(rèn)按鈕時(shí)，表單的內(nèi)容會(huì)被傳送到另一個(gè)文件。表單的動(dòng)作屬性定義了目的文件的文件名。由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對(duì)接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。

username: <input type="text" name="user" />

</form>

HTML標(biāo)簽 - 隱藏域隱藏標(biāo)簽：
隱藏域在頁面中對(duì)于用戶是不可見的，在表單中插入隱藏域的目的在于收集或發(fā)送信息，以利于被處理表單的程序所使用。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時(shí)候，隱藏域的信息也被一起發(fā)送到服務(wù)器

<form>

</form>

<input>標(biāo)簽的掌握
- 常用type類型：
  - <input type="" name="" value="" />
  - type="text"?單行文本輸入框
  - type="password"?密碼（maxlength=""）
  - type="radio"?單項(xiàng)選擇（checked="checked"）
  - type="checkbox"?多項(xiàng)選擇
  - type="button"?按鈕
  - type="submit"?提交?type="image"圖片提交
  - type="file"?上傳文件
  - type="reset"重置
  - type="hidden"?隱藏
關(guān)于表單中的設(shè)置默認(rèn)值：

1

2

3

<input type="text" name="" value="今天心情不錯(cuò)" />

<input type="radio" name="" value="" checked="checked">

<input type="checkbox" name="" value="" checked="checked">

textarea沒有默認(rèn)值
<label>標(biāo)簽的使用
- <label></label>
  - label?元素不會(huì)向用戶呈現(xiàn)任何特殊效果。
  - 不過，它為鼠標(biāo)用戶改進(jìn)了可用性。
  - 如果您在?label?元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。
  - 就是說，當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
- <label>?標(biāo)簽的for?屬性應(yīng)當(dāng)與相關(guān)元素的?id屬性相同。
- 例子：（重要—注冊(cè)表單–用戶體驗(yàn)–必做）
  
  1
  
  2
  
  3
  
  <p>單向選擇</p>
  
  <label for="male">男：</label><input type="radio" name="sex" id="male"/>
  
  <label for="nv">女：</label><input type="radio" name="sex"checked="check"/>

第七章表單和表格(下)

表單和表格標(biāo)簽：
- <textarea>文本域標(biāo)簽
- <textarea>標(biāo)簽：
- <textarea></textarea>是文本域標(biāo)簽，可以在其中插入一段文字內(nèi)容，它有兩個(gè)常用屬性rows和cols
注意：
- rows表示這個(gè)文本域有多少行
- cols表示這個(gè)文本域有多少列
除了這兩個(gè)屬性它還有readonly（只讀，文本域的內(nèi)容無法改變，相當(dāng)于協(xié)議）和title（鼠標(biāo)放上提示）
<select>標(biāo)簽的掌握
- 注：當(dāng)提交表單時(shí)，瀏覽器會(huì)提交選定的項(xiàng)目，或者收集用逗號(hào)分隔的多個(gè)選項(xiàng)，將其合成一個(gè)單獨(dú)的參數(shù)列表，并且在將?<select>?表單數(shù)據(jù)提交給服務(wù)器時(shí)包括?name屬性
  
  1
  
  2
  
  3
  
  4
  
  5
  
  6
  
  <form>
  
  <select name="" id="">
  
  <option value="1">1月</option>
  
  <option value="2">2月</option>
  
  </select>
  
  </form>
常用到的屬性：disabled=“disabled” name="sel" size="2"

<table>表格標(biāo)簽
<table>表格標(biāo)簽：<table>是表格標(biāo)簽，可以用它定義一個(gè)表格。

1

2

3

4

5

6

<table border="1">

<tr>

<td>姓名</td>

<td>性別</td>

</tr>

</table>
注意：<table>的border屬性不能少

<tr>?<td>標(biāo)簽的使用
- <tr>行標(biāo)簽：
  - <tr>可以定義表格中的一行，一個(gè)<tr></tr>表示一行。

<tr>

</tr>

<tr>

</tr>

</table>

<td>單元格標(biāo)簽:
- <td>可以定義表格中的一個(gè)單元格，<td></td>表示一個(gè)單元格。
  
  1
  
  2
  
  3
  
  4
  
  5
  
  6
  
  7
  
  <table border="1">
  
  <tr>
  
  <td >姓名</td>
  
  <td>性別</td>
  
  <td>愛好</td>
  
  </tr>
  
  </table>
- border-collapse?屬性設(shè)置是否將表格邊框折疊為單一邊框：
- border-collapse:collapse;
- colspan左右合并
- rowspan上下合并

第一部分總結(jié)：

非可視化標(biāo)簽：head?meta?style?scrpit...
可視化標(biāo)簽：img?div?span?a?ul?li…
只有可視化標(biāo)簽，才能用css改變它
單標(biāo)簽：meta?link?base?img?input?br?hr
雙標(biāo)簽：html?head?body?div?a?p?span?..ul?li?ol?dl?….
常用可視化標(biāo)簽
- div
  - 一般用它來布局
- a?超鏈接標(biāo)簽
  - href*屬性：設(shè)置跳轉(zhuǎn)的網(wǎng)頁地址
  - target屬性：設(shè)置跳轉(zhuǎn)的目標(biāo)
  - 結(jié)論：凡事頁面可以點(diǎn)擊跳轉(zhuǎn)或者表單提交的文字，都用a標(biāo)簽
- img
  - src*屬性用來設(shè)置圖片的url數(shù)據(jù)
  - alt提供給搜索引擎搜索的
  - width
  - height
  - 結(jié)論：顯示圖片
- ul li
  - 列表
  - 結(jié)論：只要將來設(shè)計(jì)頁面中有固定樣式的列表，就用ul和li
- table?caption?tr?td (th)
  - 慢慢已經(jīng)被淘汰了被ul li代替
  - 如果是合并豎排的就是合并行（rowspan）
  - 如果是合并橫排的就是合并列（colspan）

HTML部分導(dǎo)圖總結(jié)

HTML5標(biāo)簽集合

第二部分 CSS

第八章 css基礎(chǔ)知識(shí)

css基礎(chǔ)知識(shí)：
- css樣式表的定義
- css：（Cascading Style Sheets）層疊樣式表；
分類及位置：內(nèi)部樣式-head區(qū)域style標(biāo)簽里面
- 外部樣式-link調(diào)用
- 內(nèi)聯(lián)樣式-標(biāo)簽元素里面
css內(nèi)的注釋：/*注釋內(nèi)容*/
css樣式表的語法
- CSS規(guī)則由兩個(gè)主要的部分構(gòu)成：要添加樣式的盒子名或者標(biāo)簽名、和要添加的樣式。
- 盒子名或者標(biāo)簽名{屬性:值;}
- CSS中幾種顏色的表示方法
  - 用顏色名表示
    - 有17個(gè)預(yù)先確定的顏色，它們是
      - aqua,?black,?blue,?fuchsia,?gray,?green,?lime,?maroon,?navy,
        　　olive,?orange,?purple,?red,?silver,?teal,?white, and?yellow
  - 用十六進(jìn)制的顏色值表示(紅、綠、藍(lán))
    - #FF0000或者#F00
  - 用rgb(r,g,b)函數(shù)表示
    - 如：rgb(255,255,0)
  - 用hsl(Hue,Saturation,Lightness)函數(shù)表示（色調(diào)、飽和度、亮度)
    - 如：hsl(120,100%,100%),色調(diào)0代表紅色，120代表綠色，240代表
      藍(lán)色
  - 用rgba(r,g,b,a)函數(shù)表示
    - 其中a表示的是改顏色的透明度，取值范圍是0~1，其中0代表完全透明
  - 用hsla(Hue,Saturation,Lightness,alpha)函數(shù)表示
    - 色調(diào)、飽和度、亮度、透明度
  - 例子

<div style="background-color:gray;">background-color:gray</div>

<div style="background-color:#F00;">background-color:#F00</div>

<div style="background-color:#ffff00;">background-color:#ffff00</div>

<div style="background-color:rgb(255,0,255);">background-color:rgb(255,0,255)</div>

<div style="background-color:hsl(120,80%,50%);">background-color:hsl(120,80%,50%)</div>

<div style="background-color:rgba(255,0,255,0.5);">background-color:rgba(255,0,255,0.5)</div>

<div style="background-color:hsla(120,80%,50%,0.5);">background-color:hsla(120,80%,50%,0.5)</div>

</div>

內(nèi)部樣式表
- 當(dāng)單個(gè)頁面需要設(shè)置樣式時(shí)，就應(yīng)該使用內(nèi)部樣式表。
- 使用?<style></style>標(biāo)簽在文檔<head></head>里面定義內(nèi)部樣式表

<head>

p{color:red;}

</style>

</head>

從外部引入到樣式分為兩種：（注意寫在head標(biāo)簽里面）
當(dāng)樣式需要應(yīng)用于很多頁面時(shí)，就需要用到外部樣式表，首先需要?jiǎng)?chuàng)建一個(gè)css文件，然后引用到我們的頁面中。
Link樣式表式：?<link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路徑)>
Html式：?<style type="text/css">@import url("css.css");></style>

內(nèi)聯(lián)樣式表（優(yōu)先級(jí)高）
- 寫在標(biāo)簽里面的樣式
- 如：<p style="color:red;"></p>
表示給p標(biāo)簽里面的文字顏色設(shè)置為紅色
區(qū)別：外鏈樣式與導(dǎo)入樣式
- link標(biāo)簽是屬于xhtml范疇，而@import則是css2.1中特有的。link標(biāo)簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS了。
- 加載的順序的區(qū)別，link加載的css時(shí)，是一種并行(沒有嘗試是否是這樣)加載CSS方式，而@impor則在整個(gè)頁面加載完成后才加載。
- 兼容性的區(qū)別，因@import``CSS2.1才特有的，所以對(duì)于不兼容CSS2.1的瀏覽器來說，無效。
- 在樣式控制上(比如動(dòng)態(tài)改變網(wǎng)頁的布局時(shí),使用javascript操作DOM)的區(qū)別，此時(shí)@import就無能為力了。

樣式的優(yōu)先級(jí)補(bǔ)充
- 相同權(quán)值情況下，CSS樣式的優(yōu)先級(jí)總結(jié)來說，就是——就近原則（離被設(shè)置元素越近優(yōu)先級(jí)別越高）：
  - 內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部）?>?嵌入樣式表（當(dāng)前文件中）>?外部樣式表（外部文件中）
權(quán)值不同時(shí)，瀏覽器是根據(jù)權(quán)值來判斷使用哪種css樣式的，哪種樣式權(quán)值高就使用哪種樣式
層疊優(yōu)先級(jí)是:
- 瀏覽器缺省<?外部樣式表?<?內(nèi)部樣式表?<?內(nèi)聯(lián)樣式
其中樣式表又有:類選擇器?<?類派生選擇器<ID選擇器?<?ID派生選擇器
派生選擇器以前叫上下文選擇器，所以完整的層疊優(yōu)先級(jí)是:
- 瀏覽器缺省?<外部樣式表?<?外部樣式表類選擇器?<?外部樣式表類派生選擇器<?外部樣式表ID選擇器<?外部樣式表ID派生選擇器<?內(nèi)部樣式表?<?內(nèi)部樣式表類選擇器?<?內(nèi)部樣式表類派生選擇器?<?內(nèi)部樣式表ID選擇器?<?內(nèi)部樣式表ID派生選擇器?<?內(nèi)聯(lián)樣式…共12個(gè)優(yōu)先級(jí)
另外，如果同一個(gè)元素在沒有其他樣式的作用影響下，其Class定義了多個(gè)并以空格分開，其優(yōu)先級(jí)順序?yàn)?#xff1a;
- 一個(gè)元素同時(shí)應(yīng)用多個(gè)class，后定義的優(yōu)先（即近者優(yōu)先），加上!important者最優(yōu)先！

第九章 css選擇器(上)

css選擇器：
- class類選擇器可以重復(fù)利用
- id選擇器唯一
標(biāo)簽選擇器
- 什么是選擇器：css選擇器就是要改變樣式的對(duì)象
選擇器{屬性:值;屬性:值;}
標(biāo)簽選擇器：頁面中所有的標(biāo)簽都是一個(gè)選擇器?p{color:red;}
ID選擇器
- 選擇id命名的元素以?#?開頭?#p1{color:#0f0;}
類選擇器
- class選擇器，選擇clas命名的元素以.開頭?.first{color:#00f;}
css代碼寫完后上線前要經(jīng)過壓縮處理
本地和服務(wù)器分兩個(gè)css版本（備份）
壓縮后注釋都清除，空間體積減少
群組選擇器
- 選擇多個(gè)元素,以逗號(hào)隔開?#main,.first,span,a,h1{color:red;}
包含選擇器
- 選擇某元素的后代元素，也稱后代選擇器，父類與子類間以空格隔開p
  - span{color:red;}
屬性選擇器
- 選擇包含某一屬性的元素
- a[title]{color:red;}?選擇包含title的a標(biāo)簽
- a[title][href]{color:red;}?選擇包含title和href的a標(biāo)簽
>?+?選擇器子類選擇器：只選擇子元素（只選擇兒子）（相當(dāng)于包含元素）
- p > span{color:red;}
相鄰兄弟選擇器：只選擇后面的相鄰兄弟元素
- p + span{color:red;}

第十章 css選擇器(下)

<a>偽類選擇器
- a:link {color:#FF0000;}?/?未訪問的鏈接?/ （只用于a標(biāo)簽）
- a:visited {color:#00FF00;}?/?已訪問的鏈接?/ （只用于a標(biāo)簽）
- a:hover {color:#FF00FF;}/* 鼠標(biāo)移動(dòng)到鏈接上
- */（可和其他標(biāo)簽結(jié)合一起用）
- a:active {color:#0000FF;}?/?選定的鏈接?/
- 注意
  - 偽類選擇器的排序很重要，a:link?a:visited?a:hover?a:active，記作lvha
輸入偽類選擇器（針對(duì)表單）
- input:focus{color:red;}?/?鍵盤輸入焦點(diǎn)?/
其他偽類選擇器
- p:first-child{color:red;}?/* 第一個(gè)p */
- :before?在元素之前添加內(nèi)容。
- :after?在元素之后添加內(nèi)容。
css優(yōu)先規(guī)則
- 內(nèi)聯(lián)樣式表->?ID?選擇器—>?Class?類選擇器->標(biāo)簽選擇器

第十一章背景屬性

背景屬性：
- 背景的添加：
- 背景顏色的添加:
  - background:red;
  - backgronnd-color:red;
- 背景圖片的添加：
  - background:url(“images/1.jpg”);
  - backgronnd-image:url(“images/1.jpg”);
- 背景的平鋪
- 什么是平鋪？平鋪就是圖片是否重復(fù)出現(xiàn)
  - 不平鋪：background-repeat:no-repeat;
  - 水平方向平鋪：background-repeat:repeat-x;
  - 垂直方向平鋪：background-repeat:repeat-y;
  - 完全平鋪：默認(rèn)為完全平鋪
- 背景圖片的定位
  - 背景圖片的定位就是可以設(shè)置顯示背景圖片的位置，通過屬性background-position來實(shí)現(xiàn)
  - background-position的取值可為英文單詞或者數(shù)值和百分值。
  - background-positon的英文單詞取值
  - top left
  - top center
  - top right
  - center left
  - center center
  - center right
  - bottom left
  - bottom center
  - ottom right
- background-positon的數(shù)值取值
  - background-position:x y;
- positon的百分值取值
  - background-position:x% y%;
- 背景圖片的大小
  - 背景圖片的大小可以通過屬性background-size來設(shè)置background-size的取值可為數(shù)值和百分值。
- background-size的數(shù)值取值
  - background-size:x y;
- background-size的數(shù)值取值
  - background-size:x% y%;
- 背景圖片的滾動(dòng)
  - 背景圖片是否隨著內(nèi)容的滾動(dòng)而滾動(dòng)由background-attachment設(shè)置
  - background-attachment:fixed;?固定，不隨內(nèi)容的滾動(dòng)而滾動(dòng)
  - background-attachment:scroll;?滾動(dòng)，隨內(nèi)容的滾動(dòng)而滾動(dòng)

第十二章文字文本屬性

css文字文本屬性：
- 文字屬性
  - color:red;?文字顏色
  - font-size:12px; 文字大小
  - font-weight:“bold”?文字粗細(xì)(bold/normal)
  - font-family:“宋體”?文字字體
  - font-variant:small-caps小寫字母以大寫字母顯示

文本屬性
- text-align:center;?文本對(duì)齊(right/left/center)
- line-height:10px;?行間距(可通過它實(shí)現(xiàn)文本的垂直居中)
- text-indent:20px;?首行縮進(jìn)
- text-decoration:none;
  - 文本線(none/underline/overline/line-through)
- letter-spacing: 字間距

第十三章盒子模型

盒子模型
- 盒子模型就是一個(gè)有高度和寬度的矩形區(qū)域
- 所有html標(biāo)簽都是盒子模型
- div標(biāo)簽自定義盒子模型
所有的標(biāo)簽都是盒子模型
- class和id的主要差別是：class用于元素組（類似的元素，或者可以理解為某一類元素），而id用于標(biāo)識(shí)單獨(dú)的唯一的元素。
盒子模型的組成
- 盒子模型組成部分：
  - 自身內(nèi)容：width、height?寬高
  - 內(nèi)邊距：?padding
  - 盒子邊框：?border?邊框線
  - 與其他盒子距離：?margin外邊距
  - 內(nèi)容+內(nèi)邊距+邊框+外邊距=面積
border?邊框
- 常見寫法?border:1px solid #f00;
單獨(dú)屬性：
- border-width:
- border-style:
  - dotted?點(diǎn)狀虛線
  - dashed（虛線）
  - solid（實(shí)線）
  - double（雙實(shí)線）
- border-color?(顏色)
padding?內(nèi)邊距
- 值：像素/厘米等長(zhǎng)度單位、百分比
  - padding:10px;?上下左右
  - padding:10px 10px;?上下左右
  - padding:10px 10px 10px;?上左右下
  - padding:10px 10px 10px 10px;?上右下左（設(shè)置4個(gè)點(diǎn)–>順時(shí)針方向）
單獨(dú)屬性：
- padding-top:
- padding-right:
- padding-bottom:
- padding-left:
當(dāng)設(shè)置內(nèi)邊距的時(shí)候會(huì)把盒子撐大，為了保持盒子原來的大小，應(yīng)該高度和寬度進(jìn)行減小，根據(jù)width和height減小
margin 外邊距
- 值：與padding相同
- 單獨(dú)屬性：與padding相同
外邊距合并：兩個(gè)盒子同時(shí)設(shè)置了外邊距，會(huì)進(jìn)行一個(gè)外邊距合并

補(bǔ)充盒子模型內(nèi)容

標(biāo)準(zhǔn)盒子模型
- 盒子模型是css中一個(gè)重要的概念，理解了盒子模型才能更好的排版。其實(shí)盒子模型有兩種，分別是?ie盒子模型和標(biāo)準(zhǔn)?w3c?盒子模型。他們對(duì)盒子模型的解釋各不相同，先來看看我們熟知的標(biāo)準(zhǔn)盒子模型

從上圖可以看到標(biāo)準(zhǔn)?w3c?盒子模型的范圍包括?margin、border、padding、content，并且?content部分不包含其他部分
IE盒子模型

從上圖可以看到?ie盒子模型的范圍也包括?margin、border、padding、content
和標(biāo)準(zhǔn)?w3c?盒子模型不同的是：ie?盒子模型的?content?部分包含了?border和?padding
IE盒子模型width?=?padding+border+內(nèi)容
標(biāo)準(zhǔn)盒子模型 = 內(nèi)容的寬度（不包含border+padding）
例：
- 一個(gè)盒子的?margin為 20px，border?為 1px，padding為 10px，content?的寬為 200px、高為 50px，假如用標(biāo)準(zhǔn)?w3c?盒子模型解釋，那么這個(gè)盒子需要占據(jù)的位置為：寬?20*2+1*2+10*2+200=262px、高?20*2+1*2*10*2+50=112px，盒子的實(shí)際大小為：寬?1*2+10*2+200=222px、高?1*2+10*2+50=72px；假如用ie 盒子模型，那么這個(gè)盒子需要占據(jù)的位置為：寬?20*2+200=240px、高?20*2+50=70px，盒子的實(shí)際大小為：寬?200px、高?50px
那應(yīng)該選擇哪中盒子模型呢？當(dāng)然是“標(biāo)準(zhǔn)?w3c?盒子模型”了。怎么樣才算是選擇了“標(biāo)準(zhǔn)?w3c盒子模型”呢？很簡(jiǎn)單，就是在網(wǎng)頁的頂部加上?doctype?聲明。
假如不加doctype?聲明，那么各個(gè)瀏覽器會(huì)根據(jù)自己的行為去理解網(wǎng)頁，即?ie瀏覽器會(huì)采用?ie?盒子模型去解釋你的盒子，而?ff會(huì)采用標(biāo)準(zhǔn)w3c?盒子模型解釋你的盒子，所以網(wǎng)頁在不同的瀏覽器中就顯示的不一樣了。
反之，假如加上了?doctype?聲明，那么所有瀏覽器都會(huì)采用標(biāo)準(zhǔn)?w3c盒子模型去解釋你的盒子，網(wǎng)頁就能在各個(gè)瀏覽器中顯示一致了。

用?jquery?做的例子來證實(shí)一下

<html>

<head>

<title>你用的盒子模型是？</title>

var sbox = $.boxmodel ? "標(biāo)準(zhǔn)w3c":"ie";

document.write("您的頁面目前支持："+sbox+"盒子模型");

</script>

</head>

<body>

</body>

</html>

　上面的代碼沒有加上?doctype?聲明，在?ie?瀏覽器中顯示?ie盒子模型，在 ff 瀏覽器中顯示“標(biāo)準(zhǔn)w3c盒子模型”。

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<html>

<head>

<title>你用的盒子模型是標(biāo)準(zhǔn)w3c盒子模型</title>

var sbox = $.boxmodel ? "標(biāo)準(zhǔn)w3c":"ie";

document.write("您的頁面目前支持："+sbox+"盒子模型");

</script>

</head>

<body>

</body>

</html>

　代碼2 與代碼1 唯一的不同的就是頂部加了?doctype聲明。在所有瀏覽器中都顯示“標(biāo)準(zhǔn)?w3c盒子模型”

所以為了讓網(wǎng)頁能兼容各個(gè)瀏覽器，讓我們用標(biāo)準(zhǔn)?w3c?盒子模型
擴(kuò)展
- 學(xué)會(huì)使用box-sizing布局

第十四章塊元素、行元素與溢出

基本概念
- 塊級(jí)元素：默認(rèn)情況下獨(dú)占一行的元素，可控制寬高、上下邊距；
- 行內(nèi)元素：默認(rèn)情況下一行可以擺放多個(gè)的元素，不可控制寬高和上下邊距
行塊轉(zhuǎn)換
- display:none; 不顯示
- display:block; 變成塊級(jí)元素
- display:inline; 變成行級(jí)元素
- display:inline-block; 以塊級(jí)元素樣式展示，以行級(jí)元素樣式排列
溢出
- overflow:hidden; 溢出隱藏
- overflow:scroll; 內(nèi)容會(huì)被修剪，瀏覽器會(huì)顯示滾動(dòng)條
- overflow:auto; 如果內(nèi)容被修剪，則產(chǎn)生滾動(dòng)條
文本不換行：white-space:nowrap;
長(zhǎng)單詞換行：word-wrap:break-word;

行內(nèi)元素和快級(jí)元素小結(jié)
- 一、塊級(jí)元素：block element
  - 每個(gè)塊級(jí)元素默認(rèn)占一行高度，一行內(nèi)添加一個(gè)塊級(jí)元素后無法一般無法添加其他元素（float浮動(dòng)后除外）。兩個(gè)塊級(jí)元素連續(xù)編輯時(shí)，會(huì)在頁面自動(dòng)換行顯示。塊級(jí)元素一般可嵌套塊級(jí)元素或行內(nèi)元素；
  - 塊級(jí)元素一般作為容器出現(xiàn)，用來組織結(jié)構(gòu)，但并不全是如此。有些塊級(jí)元素，如只能包含塊級(jí)元素。
  - DIV?是最常用的塊級(jí)元素，元素樣式的display:block都是塊級(jí)元素。它們總是以一個(gè)塊的形式表現(xiàn)出來，并且跟同級(jí)的兄弟塊依次豎直排列，左右撐滿。
- 二、行內(nèi)元素：inline element
  - 也叫內(nèi)聯(lián)元素、內(nèi)嵌元素等；行內(nèi)元素一般都是基于語義級(jí)(semantic)的基本元素，只能容納文本或其他內(nèi)聯(lián)元素，常見內(nèi)聯(lián)元素 “a”。比如?SPAN元素，IFRAME元素和元素樣式的display : inline的都是行內(nèi)元素。例如文字這類元素，各個(gè)字母之間橫向排列，到最右端自動(dòng)折行。
- 三、block（塊）元素的特點(diǎn):
  - ①、總是在新行上開始；
  - ②、高度，行高以及外邊距和內(nèi)邊距都可控制；
  - ③、寬度缺省是它的容器的100%，除非設(shè)定一個(gè)寬度。
  - ④、它可以容納內(nèi)聯(lián)元素和其他塊元素
- 四、inline元素的特點(diǎn)
  - ①、和其他元素都在一行上；
  - ②、高，行高及外邊距和內(nèi)邊距不可改變；
  - ③、寬度就是它的文字或圖片的寬度，不可改變
  - ④、內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素
- 對(duì)行內(nèi)元素，需要注意如下:
  - 設(shè)置寬度width?無效。設(shè)置高度height無效，可以通過line-height來設(shè)置。設(shè)置margin
  - 只有左右margin有效，上下無效。
  - 設(shè)置padding只有左右padding有效，上下則無效。注意元素范圍是增大了，但是對(duì)元素周圍的內(nèi)容是沒影響的。
- 五、常見的塊狀元素
  - address?– 地址
  - blockquote?– 塊引用
  - center?– 舉中對(duì)齊塊
  - dir?– 目錄列表
  - div?– 常用塊級(jí)容易，也是CSS layout的主要標(biāo)簽
  - dl?– 定義列表
  - fieldset?–?form控制組
  - form?– 交互表單
  - h1?– 大標(biāo)題
  - h2?– 副標(biāo)題
  - h3?– 3級(jí)標(biāo)題
  - h4?– 4級(jí)標(biāo)題
  - h5?– 5級(jí)標(biāo)題
  - h6?– 6級(jí)標(biāo)題
  - hr?– 水平分隔線
  - isindex?–?input prompt
  - menu?– 菜單列表
  - noframes?–?frames可選內(nèi)容，（對(duì)于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容
  - noscript?– 可選腳本內(nèi)容（對(duì)于不支持script的瀏覽器顯示此內(nèi)容）
  - ol?– 有序表單
  - p?– 段落
  - pre?– 格式化文本
  - table?– 表格
  - ul?– 無序列表
- 六、常見的內(nèi)聯(lián)元素
  - a?– 錨點(diǎn)
  - abbr?– 縮寫
  - acronym?– 首字
  - b?– 粗體(不推薦)
  - bdo?–?bidi override
  - big?– 大字體
  - br?– 換行
  - cite?– 引用
  - code?– 計(jì)算機(jī)代碼(在引用源碼的時(shí)候需要)
  - dfn?– 定義字段
  - em?– 強(qiáng)調(diào)
  - font?– 字體設(shè)定(不推薦)
  - i?– 斜體
  - img?– 圖片
  - input?– 輸入框
  - kbd?– 定義鍵盤文本
  - label?– 表格標(biāo)簽
  - q?– 短引用
  - s?– 中劃線(不推薦)
  - samp?– 定義范例計(jì)算機(jī)代碼
  - select?– 項(xiàng)目選擇
  - small?– 小字體文本
  - span?– 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊
  - strike?– 中劃線
  - strong?– 粗體強(qiáng)調(diào)
  - sub?– 下標(biāo)
  - sup?– 上標(biāo)
  - textarea?– 多行文本輸入框
  - tt?– 電傳文本
  - u?– 下劃線
- 七，可變?cè)?/p>
  - 可變?cè)貫楦鶕?jù)上下文語境決定該元素為塊元素或者內(nèi)聯(lián)元素。
  - applet?-?java applet
  - button?- 按鈕
  - del- 刪除文本
  - iframe?-?inline frame
  - ins?- 插入的文本
  - map?- 圖片區(qū)塊(map)
  - object?-?object對(duì)象
  - script?- 客戶端腳本
- 八、行內(nèi)元素與塊級(jí)元素有什么不同
  - 區(qū)別一：
    - 塊級(jí)：塊級(jí)元素會(huì)獨(dú)占一行，默認(rèn)情況下寬度自動(dòng)填滿其父元素寬度
    - 行內(nèi)：行內(nèi)元素不會(huì)獨(dú)占一行，相鄰的行內(nèi)元素會(huì)排在同一行。其寬度隨內(nèi)容的變化而變化。
  - 區(qū)別二：
    - 塊級(jí)：塊級(jí)元素可以設(shè)置寬高
    - 行內(nèi)：行內(nèi)元素不可以設(shè)置寬高
  - 區(qū)別三：
    - 塊級(jí)：塊級(jí)元素可以設(shè)置margin，padding
    - 行內(nèi)：行內(nèi)元素水平方向的margin-left;?margin-right;
  - padding-left;?padding-right;可以生效。但是豎直方向的margin-bottom;?margin-top;?padding-top;?padding-bottom;卻不能生效。
  - 區(qū)別四：
    - 塊級(jí)：display:block;
    - 行內(nèi)：display:inline;
- 替換元素有如下：（和img一樣的設(shè)置方法）
  - <img>、<input>、<textarea>、<select>
  - <object>都是替換元素，這些元素都沒有實(shí)際的內(nèi)容
可以通過修改display屬性來切換塊級(jí)元素和行內(nèi)元素

第十五章定位

static靜態(tài)定位（不對(duì)它的位置進(jìn)行改變，在哪里就在那里）
- 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略?top,bottom,?left, right?或者?z-index?聲明）。
fixed固定定位（參照物–瀏覽器窗口）—做彈窗廣告用到
- 生成固定定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過?"left",?"top",?"right"以及?"bottom"屬性進(jìn)行規(guī)定。
relative（相對(duì)定位）（參照物以他本身）
- 生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。
absolute（絕對(duì)定位）(除了static都可以，找到參照物–>與它最近的已經(jīng)有定位的父元素進(jìn)行定位)
- 生成絕對(duì)定位的元素，相對(duì)于?static?定位以外的第一個(gè)父元素進(jìn)行定位。
- 元素的位置通過 “l(fā)eft",?"top",?"right"?以及?"bottom"?屬性進(jìn)行規(guī)定
z-index
- z-index?屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
- 定位的基本思想: 它允許你定義元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置，或者相對(duì)于父元素、另一個(gè)元素甚至瀏覽器窗口本身的位置。
一切皆為框
- 塊級(jí)元素:?div、h1或p元素即：顯示為一塊內(nèi)容稱之為 “塊框“ ;
- 行內(nèi)元素:?span,strong,a等元素即：內(nèi)容顯示在行中稱 “行內(nèi)框”;
- 使用display屬性改變成框的類型即：display:block; 讓行內(nèi)元素設(shè)置為塊級(jí)元素，display:none;?沒有框
相對(duì)定位：
- 如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，它將出現(xiàn)在它所在的位置上。
- 通過設(shè)置垂直或水平位置，讓這個(gè)元素“相對(duì)于”它的起點(diǎn)進(jìn)行移動(dòng)
- .adv_relative { position: relative; left: 30px; top: 20px; }
絕對(duì)定位：
- 元素的位置相對(duì)于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，它的位置相對(duì)于最初的包含塊。?.adv_absolute { position: absolute; left: 30px; top: 20px; }

第十六章框架

frameset框架：
- <frameset>?—- 用來定義一個(gè)框架；雙標(biāo)簽
  不能和?<body>?一起使用
rows、cols屬性
- rows?定義行表示框架有多少行（取值?px/%/?*?）
- cols?定義列表示框架有多少列（取值px/?%/?*?）
frame子框架
- <frame> —- 表示框架中的某一個(gè)部分；單標(biāo)簽，要跟結(jié)束標(biāo)志
  - src?顯示的網(wǎng)頁的路徑
  - name?框架名
  - frameborder?邊框線（取值 0 / 1）
- <noframes>屬性
- <noframes> 提供不支持框架的瀏覽器顯示body的內(nèi)容；雙標(biāo)簽

</noframes>

</frameset>

<iframe>內(nèi)聯(lián)框架
- iframe元素會(huì)創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）
- 允許和?body?一起使用
- width?寬（取值 px / %）
- height?高（取值 px / %）
- name?框架名
- frameborder?邊框線（取值 0 / 1）
- src?顯示的網(wǎng)頁的路徑

第十七章 css高級(jí)屬性

opacity透明屬性
- opacity
  - 對(duì)于IE6/7/，使用filter:alpha(opacity:值;) 值為0-100
  - 對(duì)于Webkit，Opera，Firefox，IE9+，使用opacity:值; 值為0-1
  - 對(duì)于早期火狐，使用-moz-opacity:值; 值為0-1
  - 所以寫透明屬性時(shí)，一般寫法是

{

opacity:0.5;

filter:alpha(opacity：50);/*0-100*/

-moz-opacity:0.5; /*取值0-1*/-->針對(duì)早起版本的火狐兼容問題的解決

}

border-radius圓角邊框?qū)傩?/p>
- 向?div?元素添加圓角邊框
  - border-radius:10px;
box-shadow陰影屬性
- box-shadow屬性向框添加陰影效果,后面跟4個(gè)參數(shù)。
- box-shadow:0px 0px 10px #000;
<embed>屬性
- 是HTML5中新增的標(biāo)簽,媒體嵌入插件標(biāo)簽，可以通過<embed>插入音頻或視頻
- <embed src=“media/music.mp3” />
- 格式.mid?.wav?.mp3等

CSS部分導(dǎo)圖總結(jié)

css常見簡(jiǎn)寫

第三部分附錄

附錄一 DIV命名規(guī)范

企業(yè)DIV使用頻率高的命名方法
網(wǎng)頁內(nèi)容類
- 標(biāo)題:?title
  - 摘要:?summary
  - 箭頭：?arrow
  - 商標(biāo)：?label
  - 網(wǎng)站標(biāo)志：?logo
  - 轉(zhuǎn)角/圓角：corner
  - 橫幅廣告：?banner
  - 子菜單：?subMenu
  - 搜索：?search
  - 搜索框：?searchBox
  - 登錄：?login
  - 登錄條：loginbar
  - 工具條：?toolbar
  - 下拉：?drop
  - 標(biāo)簽頁：?tab
  - 當(dāng)前的：?current
  - 列表：?list
  - 滾動(dòng)：?scroll
  - 服務(wù)：?service
  - 提示信息：?msg
  - 熱點(diǎn)：hot
  - 新聞：?news
  - 小技巧：?tips
  - 下載：?download
  - 欄目標(biāo)題：?title
  - 熱點(diǎn)：?hot
  - 加入：joinus
  - 注冊(cè)：?regsiter
  - 指南：?guide
  - 友情鏈接：?friendlink
  - 狀態(tài)：?status
  - 版權(quán)：?copyright
  - 按鈕：?btn
  - 合作伙伴：?partner
  - 投票：?vote
  - 左右中：left?right?center
- 注釋的寫法:?/* Footer */?內(nèi)容區(qū)/* End Footer */
id的命名:
- 頁面結(jié)構(gòu)
  - 容器:?container
  - 頁頭：header
  - 內(nèi)容：content/container
  - 頁面主體：main
  - 頁尾：footer
  - 導(dǎo)航：nav
  - 側(cè)欄：sidebar
  - 欄目：column
  - 頁面外圍控制整體布局寬度：wrapper
  - 左右中：left?right?center
- 導(dǎo)航
  - 導(dǎo)航：nav
  - 主導(dǎo)航：mainbav
  - 子導(dǎo)航：subnav
  - 頂導(dǎo)航：topnav
  - 邊導(dǎo)航：sidebar
  - 左導(dǎo)航：leftsidebar
  - 右導(dǎo)航：rightsidebar
  - 菜單：menu
  - 子菜單：submenu
  - 標(biāo)題:?title
  - 摘要:?summary
- 功能
  - 標(biāo)志：logo
  - 廣告：banner
  - 登陸：login
  - 登錄條：loginbar
  - 注冊(cè)：regsiter
  - 搜索：search
  - 功能區(qū)：shop
  - 標(biāo)題：title
  - 加入：joinus
  - 狀態(tài)：status
  - 按鈕：btn
  - 滾動(dòng)：scroll
  - 標(biāo)簽頁：tab
  - 文章列表：list
  - 提示信息：msg
  - 當(dāng)前的:current
  - 小技巧：tips
  - 圖標(biāo):?icon
  - 注釋：note
  - 指南：guild
  - 服務(wù)：service
  - 熱點(diǎn)：hot
  - 新聞：news
  - 下載：download
  - 投票：vote
  - 合作伙伴：partner
  - 友情鏈接：link
  - 版權(quán)：copyright
- class的命名:
  - 顏色:使用顏色的名稱或者16進(jìn)制代碼,如
    - .red { color: red; }
    - .f60 { color: #f60; }
    - .ff8600 { color: #ff8600; }
  - 字體大小,直接使用”font+字體大小”作為名稱,如
    - .font12px { font-size: 12px; }
    - .font9px {font-size: 9pt; }
  - 對(duì)齊樣式,使用對(duì)齊目標(biāo)的英文名稱,如
    - .left { float:left; }
    - .bottom { float:bottom; }
  - 標(biāo)題欄樣式,使用”類別+功能”的方式命名,如
    - .barnews { }
    - .barproduct { }
  - 注意事項(xiàng)::
    - 一律小寫;
    - 盡量用英文;
    - 不加中杠和下劃線;
    - 盡量不縮寫，除非一看就明白的單詞.
推薦的?CSS?書寫順序：
- 顯示屬性
  - display
  - list-style
  - position
  - float
  - clear
- 自身屬性
  - width
  - height
  - margin
  - padding
  - border
  - background
- 文本屬性
  - color
  - font
  - text-decoration
  - text-align
  - vertical-align
  - white-space
  - other text
  - content

附錄二 CSS精靈

CSS精靈原理以及應(yīng)用
- CSS雪碧的基本原理是把你的網(wǎng)站上用到的一些圖片整合到一張單獨(dú)的圖片中，從而減少你的網(wǎng)站的HTTP請(qǐng)求數(shù)量。
  - 該圖片使用CSS?background和background-position屬性渲染，這也就意味著你的標(biāo)簽變得更加復(fù)雜了，圖片是在CSS中定義，而非<img>標(biāo)簽。
一個(gè)簡(jiǎn)單的例子：
- 一張圖片作出一個(gè)按鈕的三個(gè)狀態(tài)
- 一個(gè)鏈接用CSS做成按鈕的樣式，我們可以使用同一張圖片，完成按鈕的三個(gè)狀態(tài)，a:link，a:hover，a:active?<a class="button" href="#">鏈接</a>
- 加入右側(cè)的圖片為：200px 65px的三個(gè)按鈕圖拼合而成的圖片button.png，從上到下一次為按鈕的普通、鼠標(biāo)滑過、鼠標(biāo)點(diǎn)擊的狀態(tài)。則可以使用CSS進(jìn)行定義。

a {

display:block;

width:200px;

height:65px;

line-height:65px; /*定義狀態(tài)*/

text-indent:-2015px; /*隱藏文字*/

background-image:url(button.png); /*定義背景圖片*/

background-position:0 0;

/*定義鏈接的普通狀態(tài)，此時(shí)圖像顯示的是頂上的部分*/

}

a:hover {

background-position:0 -66px;

/*定義鏈接的滑過狀態(tài)，此時(shí)顯示的為中間部分，向下取負(fù)值*/

}

a:active {

background-position:0 -132px;

/*定義鏈接的普通狀態(tài)，此時(shí)顯示的是底部的部分，向下取負(fù)值*/

}

更多的CSS雪碧，圖片更復(fù)雜，背景定位更精確。可能會(huì)用到大量的數(shù)值
- 如：background:url(nav.png) -180px 24pxno-repeat; 來達(dá)到更精確的定位
優(yōu)點(diǎn)：
- 減少加載網(wǎng)頁圖片時(shí)對(duì)服務(wù)器的請(qǐng)求次數(shù)
- 可以合并多數(shù)背景圖片和小圖標(biāo)，方便在任何位置使用，這樣不同位置的請(qǐng)求只需要調(diào)用一個(gè)圖片，從而減少對(duì)服務(wù)器的請(qǐng)求次數(shù)，降低服務(wù)器壓力，同時(shí)提高了頁面的加載速度，節(jié)約服務(wù)器的流量。
- 提高頁面的加載速度
- sprite技術(shù)的其中一個(gè)好處是圖片的加載時(shí)間(在有許多?sprite?時(shí)，單張圖片的加載時(shí)間)。由所需圖片拼成的一張?GIF圖片的尺寸會(huì)明顯小于所有圖片拼合前的大小。單張的?GIF只有相關(guān)的一個(gè)色表，而單獨(dú)分割的每一張?GIF?都有自己的一個(gè)色表，這就增加了總體的大小。因此，單獨(dú)的一張?JPEG?或者?PNGsprite?在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小。
- 減少鼠標(biāo)滑過的一些bug
- IE6不會(huì)主動(dòng)預(yù)加載鼠標(biāo)滑過即a:hover中的背景圖片，所以，如果使用多張圖片，鼠標(biāo)滑過會(huì)出現(xiàn)閃白的現(xiàn)象。使用CSS雪碧，由于一張圖片即可，所以不會(huì)出現(xiàn)這種現(xiàn)象。
不足：
- CSS雪碧的最大問題是內(nèi)存使用
- 影響瀏覽器的縮放功能
- 拼圖維護(hù)比較麻煩
- 使CSS的編寫變得困難
- CSS?雪碧調(diào)用的圖片不能被打印
- 錯(cuò)誤得使用?Sprites?影響可訪問性

附錄三一些tips解決方案

頁面優(yōu)化實(shí)踐

從下面的幾個(gè)方面可以進(jìn)行頁面的優(yōu)化：
- 減少請(qǐng)求數(shù)
- 圖片合并
- CSS文件合并
- 減少內(nèi)聯(lián)樣式
- 避免在?CSS中使用?import
- 減少文件大小
- 選擇適合的圖片格式
- 圖片壓縮
- CSS?值縮寫（Shorthand Property)
- 文件壓縮
- 頁面性能
- 調(diào)整文件加載順序
- 減少標(biāo)簽數(shù)量
- 調(diào)整選擇器長(zhǎng)度
- 盡量使用CSS?制作顯示表現(xiàn)
- 增強(qiáng)代碼可讀性與可維護(hù)性
- 規(guī)范化
- 語義化
- 模塊化

寫DIV+CSS 的一些常識(shí)

不要使用過小的圖片做背景平鋪
- 這就是為何很多人都不用?1px?的原因，這才知曉。寬高?1px?的圖片平鋪出一個(gè)寬高?200px?的區(qū)域，需要?200200=40, 000?次，占用資源
無邊框
- 推薦的寫法是?border:none;，哈哈，我一直在用這個(gè)。?border:0;?只是定義邊框?qū)挾葹榱?#xff0c;但邊框樣式、顏色還是會(huì)被瀏覽器解析，占用資源
慎用通配符
- 所謂通配符，就是將CSS?中的所有標(biāo)簽均初始化，不管用的不用的，過時(shí)的先進(jìn)的，一視同仁，這樣，大大的占用資源。要有選擇的初始化標(biāo)簽。
CSS的十六進(jìn)制顏色代碼縮寫
- 習(xí)慣了縮寫及小寫，這才知道，原來不是推薦的寫法，為的是減少解析所占用的資源。但同時(shí)會(huì)增加文件體積。孰優(yōu)孰劣，有待仔細(xì)考證。
樣式放頭上，腳本放腳下。不內(nèi)嵌，只外鏈
堅(jiān)決不用?CSS表達(dá)式
使用引用樣式表，而不是通過@import?導(dǎo)入。
一般來說，PNG比?GIF?要小，小得多。再者，GIF?中有多少顏色是被浪費(fèi)的，很值得優(yōu)化。
千萬不要在?HTML中縮放圖片，一者不好看，二者占資源。
正文字體最好用偶數(shù)
- 12px、14px、16px，效果非常好。特例，15px。
block、ul、ol等上下留出至少一倍行距，左側(cè)至少兩倍行距，右側(cè)隨意。
段落之間，至少要有一倍行距
強(qiáng)行指定某些元素的?line-height，正文?1.6倍于文字大小，標(biāo)題1.3倍。
中文標(biāo)點(diǎn)用全角
- 英文夾雜在中文中，左右空格，半角。
中文字體的粗體和斜體，遠(yuǎn)離較好

常用代碼片段

雅虎工程師提供的CSS初始化示例代碼【僅供參考】
- 可以在html頭文件中直接引用，從而避免瀏覽器的不兼容帶來的錯(cuò)誤。

body,

div,

dl,

dt,

dd,

ul,

ol,

li,

h1,

h2,

h3,

h4,

h5,

h6,

pre,

code,

form,

fieldset,

legend,

input,

button,

textarea,

blockquote,

th,

td {

margin:0; padding:0;

}

body {

background:#fff;

color:#555;

font-size:14px;

font-family: Verdana, Arial, Helvetica, sans-serif;

}

td,

th,

caption {

font-size:14px;

}

h1,

h2,

h3,

h4,

h5,

h6 {

font-weight:normal;

font-size:100%;

}

address,

caption,

cite,

code,

dfn,

em,

strong,

th,

var {

font-style:normal;

font-weight:normal;

}

a {

color:#555;

text-decoration:none;

}

a:hover {

text-decoration:underline;

}

img {

border:none;

}

ol,ul,li {

list-style:none;

}

input,

textarea,

select,

button {

font:14px Verdana,Helvetica,Arial,sans-serif;

}

table {

border-collapse:collapse;

}

html {

overflow-y: scroll;

}

.clearfix:after {

content: ".";

display: block;

height:0;

clear:both;

visibility: hidden;

}

.clearfix {

*zoom:1;

}

mobile meta標(biāo)簽

1	<meta name=”viewport” content=”width=320,target-densitydpi=dpi_value,initial-scale=1, user-scalable=no”/>

表格不被撐開

1	table-layout: fixed; word-break: break-all;;border-collapse: collapse

不設(shè)寬高居中

? ? ? <span style=”background:#f00; display:table-cell; vertical-align:middle;”>

? ? ? ? ? ? <input type=”button” value=”item1″ />

? ? ? </span>

</div>

透明度的兼容代碼

filter:alpha(opacity=50); /*1-100*/

-moz-opacity:0.5; /*0-1.0*/

-khtml-opacity:0.5; /*0-1.0*/

opacity:0.5; /*0-1.0*/

文字溢出點(diǎn)點(diǎn)省略

white-space:nowrap;

text-overflow:ellipsis;

overflow:hidden;

清除浮動(dòng)的幾種方法
- 方法一：投機(jī)取巧法?– 不推薦
  - 直接一個(gè)放到當(dāng)作最后一個(gè)子標(biāo)簽放到父標(biāo)簽?zāi)莾?#xff0c;此方法屢試不爽，兼容性強(qiáng)
- 方法二：overflow + zoom方法 –不推薦
  .fix{overflow:hidden; zoom:1;}
  - 此方法優(yōu)點(diǎn)在于代碼簡(jiǎn)潔，涵蓋所有瀏覽器
- 方法三：after + zoom方法 -推薦–此方法可以說是綜合起來最好的方法了
  - clearfix只應(yīng)用在包含浮動(dòng)子元素的父級(jí)元素上

.fix{zoom:1;}

.fix:after{

display:block;

content:'clear';

clear:both;

line-height:0;

visibility:hidden;

}

更多代碼片段詳情
- 實(shí)用的60個(gè)CSS代碼片段

一些總結(jié)

自動(dòng)繼承屬性：
- color
- font
- text-align
- list-style
  …
非繼承屬性：
- background
- border
- position
  …
具有破壞性的元素：
- float
- display:none;
- position:absoblute/fixed/sticky;
具有包裹性的元素：
- display:inline-block/table-cell
- position:absolute/fixed/sticky
- overflow:hidden/scroll
消除圖片底部間隙的方法
- 圖片塊狀化-無基線對(duì)齊
  img{display:block;}
- 圖片底線對(duì)齊
  img{vertical-align:bottom;}
- 行高足夠小 - 基線位置上移
  .box{line-height:0;}

一些概念

BFC
- BFC全稱”Block Formatting Context”?中文為“塊級(jí)格式化上下文”
- 記住這么一句話：BFC元素特性表現(xiàn)原則就是，內(nèi)部子元素再怎么翻江倒海，翻云覆雨都不會(huì)影響外部的元素
- BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此
- 擴(kuò)展閱讀
  - CSS中的BFC
優(yōu)雅降級(jí)(graceful degradation)
- 一開始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容
漸進(jìn)增強(qiáng)?progressive enhancement：
- 是在瀏覽器開啟JavaScript功能后，如果瀏覽器版本不支持某些?JavaScript?能力，我們解決這種問題的方式
平穩(wěn)退化
- 是在瀏覽器沒有JavaScript功能，或沒有開啟JavaScript功能情況下，我們解決這種問題的方式；

方案薈萃擴(kuò)展閱讀

關(guān)于布局
- 垂直居中
- css完全居中
- 居中之美
- 網(wǎng)頁中的底部foot定位
- 頁面高度100%
- textarea高度自適應(yīng)
- 多行溢出省略
- Retina屏1px線
- Flexbugs
其他
- IF IE ENDIF條件判斷之IE10
- Chrome 翻譯插件
- 網(wǎng)頁retina優(yōu)化
- 常用meta
- 樹狀菜單
- em vs rem
- css vs js
- css解決方案（w3cplus）
- Textures生成紋理
- CSSgram
- Csscss（檢查重復(fù)聲明等）

附錄四部分工具資源

學(xué)會(huì)使用Emmet插件快速編碼
Emmet常用快捷鍵
Sublime專題
Sublime常用插件總結(jié)
Front-End -Develop -Tools
ToolsBox-自己整理的一份工具列表

附錄五編碼規(guī)范

編碼規(guī)范
前端規(guī)范
web develop standard
Web 前端開發(fā)規(guī)范文檔
前端開發(fā)規(guī)范手冊(cè)

附錄六進(jìn)階學(xué)習(xí)

DOM編程之API學(xué)習(xí)
JavaScript基礎(chǔ)學(xué)習(xí)

附錄七其他資源

Github上前端學(xué)習(xí)資源匯總
WEB 前端開發(fā)學(xué)習(xí)筆記
前端開發(fā)工具箱
148個(gè)資源讓你成為CSS專家
學(xué)習(xí)CSS布局-經(jīng)典必看

附錄八常見問題

前端指路
- 寫給前端面試者（w3cplus）
- 如何成為一名卓越的前端工程師（勾三股四博客）
- 什么是全棧工程師
- 如何跟上前端開發(fā)的最新前沿
- 瀏覽器的工作原理
- 移動(dòng)前端開發(fā)和 Web 前端開發(fā)的區(qū)別
- 大型網(wǎng)站CSS編寫與維護(hù)
- CSS核心技術(shù)關(guān)鍵字
性能/規(guī)范/實(shí)踐
- 如何閱讀W3c規(guī)范(王曉軒)
- 如何閱讀W3c規(guī)范(高博)
- 雅虎web性能優(yōu)化軍規(guī)
- 權(quán)威前端性能指南
- 高性能css
一些問答社區(qū)
- quora
- stackoverflow
- 知乎
- 前端亂燉問答區(qū)
- segmentfault問答區(qū)

總結(jié)

以上是生活随笔為你收集整理的前端html与css学习笔记总结篇的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：分区助手扩大c盘后自动修复_如何增加C盘
下一篇：浏览器模拟定位

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

HTML

前端html与css学习笔记总结篇

第一部分 HTML

第二部分 CSS

第三部分 附錄

總結(jié)

第三部分附錄