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

HTML

前端html与css学习笔记总结篇(超详细)

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

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

第一部分 HTML

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

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

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

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

1 2 3 4

不成對(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>只是視覺(jué)加粗效果—>單純?yōu)榱水a(chǎn)生加粗
- <em>?<i>標(biāo)簽
  - em用于強(qiáng)調(diào)文本
  - i只是視覺(jué)斜體效果
  - <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ì)被用來(lái)組合文檔中的行內(nèi)元素
  - 注意：span沒(méi)有固定的格式表現(xiàn)，當(dāng)對(duì)它應(yīng)用樣式時(shí)，才會(huì)產(chǎn)生視覺(jué)上的變化
- <pre>標(biāo)簽
  - 文字的格式按源碼的排版來(lái)顯示，我們稱(chēng)之為預(yù)處理格式
- <a>標(biāo)簽—>他有一個(gè)必不可少的屬性 href
  - target屬性：
  - _self(在原來(lái)頁(yè)面打開(kāi))
  - _blank（新窗口打開(kāi)）
  - _top（打開(kāi)時(shí)忽略所有的框架）
  - _parent（在父窗口中打開(kāi)）
- 創(chuàng)建錨點(diǎn)和錨鏈接
  - 錨點(diǎn)也是一種超鏈接，是頁(yè)面內(nèi)進(jìn)行跳轉(zhuǎn)的超鏈接
    - 第一步：創(chuàng)建錨點(diǎn)?<a name="錨點(diǎn)名稱(chēng)"></a>
    - 第二步：使用創(chuàng)建好的錨點(diǎn)名稱(chēng)?<a href="#錨點(diǎn)名稱(chēng)">內(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)為無(wú)限循環(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)移開(kāi)繼續(xù)滾動(dòng)

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

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

第五章三種列表的講解

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

1 2 3 4 5

有序列表

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

1 2 3 4 5

列表符號(hào)
- 無(wú)序列表-列表符號(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
- 列表嵌套
- 無(wú)序列表-嵌套

1 2 3 4 5 6 7 8 9

有序列表-嵌套

1 2 3 4 5 6 7 8 9

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

1 2 3 4 5 6

<dl> <dt>pc網(wǎng)頁(yè)制作</dt> <dd>學(xué)習(xí)DIV+CSS JS JQ 項(xiàng)目實(shí)戰(zhàn)</dd> <dt>手機(jī)網(wǎng)頁(yè)制作</dt> <dd>手機(jī)網(wǎng)頁(yè)制作實(shí)戰(zhàn)</dd> </dl>

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

1 2 3 4 5 6 7 8 9 10

dl是definition list的縮寫(xiě)
dt是definition title的縮寫(xiě)
dd是definition description的縮寫(xiě)

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

第六章表單元素(上)

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

1 2 3 4

<form action="html.do" method="get"> username: <input type="text" name="user" /> <input type="submit" value="提交" /> </form>

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

1 2 3

<input>標(biāo)簽的掌握
- 常用type類(lèi)型：
  - <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">

1 2 3 4

textarea沒(méi)有默認(rèn)值
<label>標(biāo)簽的使用
- <label></label>
  - label?元素不會(huì)向用戶(hù)呈現(xiàn)任何特殊效果。
  - 不過(guò)，它為鼠標(biāo)用戶(hù)改進(jìn)了可用性。
  - 如果您在?label?元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。
  - 就是說(shuō)，當(dāng)用戶(hù)選擇該標(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è)表單–用戶(hù)體驗(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)容無(wú)法改變，相當(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>表示一行。

1 2 3 4 5 6 7 8 9 10 11

<td>單元格標(biāo)簽:
- <td>可以定義表格中的一個(gè)單元格，<td></td>表示一個(gè)單元格。
  1 2 3 4 5 6 7 <table border="1"> <tr> <td >姓名</td> <td>性別</td> <td>愛(ài)好</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
  - 一般用它來(lái)布局
- a?超鏈接標(biāo)簽
  - href*屬性：設(shè)置跳轉(zhuǎn)的網(wǎng)頁(yè)地址
  - target屬性：設(shè)置跳轉(zhuǎn)的目標(biāo)
  - 結(jié)論：凡事頁(yè)面可以點(diǎn)擊跳轉(zhuǎn)或者表單提交的文字，都用a標(biāo)簽
- img
  - src*屬性用來(lái)設(shè)置圖片的url數(shù)據(jù)
  - alt提供給搜索引擎搜索的
  - width
  - height
  - 結(jié)論：顯示圖片
- ul li
  - 列表
  - 結(jié)論：只要將來(lái)設(shè)計(jì)頁(yè)面中有固定樣式的列表，就用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）層疊樣式表；
分類(lèi)及位置：內(nèi)部樣式-head區(qū)域style標(biāo)簽里面
- 外部樣式-link調(diào)用
- 內(nèi)聯(lián)樣式-標(biāo)簽元素里面
css內(nèi)的注釋：/*注釋內(nèi)容*/
css樣式表的語(yǔ)法
- 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)、飽和度、亮度、透明度
  - 例子

1 2 3 4 5 6 7 8 9

<div style="position:absolute;top:0px"> <div style="">background-color:gray</div> <div style="">background-color:#F00</div> <div style="">background-color:#ffff00</div> <div style="">background-color:rgb(255,0,255)</div> <div style="">background-color:hsl(120,80%,50%)</div> <div style="">background-color:rgba(255,0,255,0.5)</div> <div style="">background-color:hsla(120,80%,50%,0.5)</div> </div>

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

1 2 3 4 5

<head> <style type="text/css" > p{color:red;} </style> </head>

從外部引入到樣式分為兩種：（注意寫(xiě)在head標(biāo)簽里面）
當(dāng)樣式需要應(yīng)用于很多頁(yè)面時(shí)，就需要用到外部樣式表，首先需要?jiǎng)?chuàng)建一個(gè)css文件，然后引用到我們的頁(yè)面中。
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í)高）
- 寫(xiě)在標(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í)，是一種并行(沒(méi)有嘗試是否是這樣)加載CSS方式，而@impor則在整個(gè)頁(yè)面加載完成后才加載。
- 兼容性的區(qū)別，因@import``CSS2.1才特有的，所以對(duì)于不兼容CSS2.1的瀏覽器來(lái)說(shuō)，無(wú)效。
- 在樣式控制上(比如動(dòng)態(tài)改變網(wǎng)頁(yè)的布局時(shí),使用JavaScript操作DOM)的區(qū)別，此時(shí)@import就無(wú)能為力了。

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

第九章 css選擇器(上)

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

第十章 css選擇器(下)

<a>偽類(lèi)選擇器
- a:link {color:#FF0000;}?/?未訪問(wèn)的鏈接?/ （只用于a標(biāo)簽）
- a:visited {color:#00FF00;}?/?已訪問(wèn)的鏈接?/ （只用于a標(biāo)簽）
- a:hover {color:#FF00FF;}/* 鼠標(biāo)移動(dòng)到鏈接上
- */（可和其他標(biāo)簽結(jié)合一起用）
- a:active {color:#0000FF;}?/?選定的鏈接?/
- 注意
  - 偽類(lèi)選擇器的排序很重要，a:link?a:visited?a:hover?a:active，記作lvha
輸入偽類(lèi)選擇器（針對(duì)表單）
- input:focus{color:red;}?/?鍵盤(pán)輸入焦點(diǎn)?/
其他偽類(lèi)選擇器
- p:first-child{color:red;}?/* 第一個(gè)p */
- :before?在元素之前添加內(nèi)容。
- :after?在元素之后添加內(nèi)容。
css優(yōu)先規(guī)則
- 內(nèi)聯(lián)樣式表->?ID?選擇器—>?Class?類(lèi)選擇器->標(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è)置顯示背景圖片的位置，通過(guò)屬性background-position來(lái)實(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%;
- 背景圖片的大小
  - 背景圖片的大小可以通過(guò)屬性background-size來(lái)設(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小寫(xiě)字母以大寫(xiě)字母顯示

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

第十三章盒子模型

盒子模型
- 盒子模型就是一個(gè)有高度和寬度的矩形區(qū)域
- 所有html標(biāo)簽都是盒子模型
- div標(biāo)簽自定義盒子模型
所有的標(biāo)簽都是盒子模型
- class和id的主要差別是：class用于元素組（類(lèi)似的元素，或者可以理解為某一類(lèi)元素），而id用于標(biāo)識(shí)單獨(dú)的唯一的元素。
盒子模型的組成
- 盒子模型組成部分：
  - 自身內(nèi)容：width、height?寬高
  - 內(nèi)邊距：?padding
  - 盒子邊框：?border?邊框線(xiàn)
  - 與其他盒子距離：?margin外邊距
  - 內(nèi)容+內(nèi)邊距+邊框+外邊距=面積
border?邊框
- 常見(jiàn)寫(xiě)法?border:1px solid #f00;
單獨(dú)屬性：
- border-width:
- border-style:
  - dotted?點(diǎn)狀虛線(xiàn)
  - dashed（虛線(xiàn)）
  - solid（實(shí)線(xiàn)）
  - double（雙實(shí)線(xiàn)）
- 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í)針?lè)较?#xff09;
單獨(dú)屬性：
- padding-top:
- padding-right:
- padding-bottom:
- padding-left:
當(dāng)設(shè)置內(nèi)邊距的時(shí)候會(huì)把盒子撐大，為了保持盒子原來(lái)的大小，應(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ì)盒子模型的解釋各不相同，先來(lái)看看我們熟知的標(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)頁(yè)的頂部加上?doctype?聲明。
假如不加doctype?聲明，那么各個(gè)瀏覽器會(huì)根據(jù)自己的行為去理解網(wǎng)頁(yè)，即?ie瀏覽器會(huì)采用?ie?盒子模型去解釋你的盒子，而?ff會(huì)采用標(biāo)準(zhǔn)w3c?盒子模型解釋你的盒子，所以網(wǎng)頁(yè)在不同的瀏覽器中就顯示的不一樣了。
反之，假如加上了?doctype?聲明，那么所有瀏覽器都會(huì)采用標(biāo)準(zhǔn)?w3c盒子模型去解釋你的盒子，網(wǎng)頁(yè)就能在各個(gè)瀏覽器中顯示一致了。

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

1 2 3 4 5 6 7 8 9 10 11 12

<html> <head> <title>你用的盒子模型是？</title> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> var sbox = $.boxmodel ? "標(biāo)準(zhǔn)w3c":"ie"; document.write("您的頁(yè)面目前支持："+sbox+"盒子模型"); </script> </head> <body> </body> </html>

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

1 2 3 4 5 6 7 8 9 10 11 12 13

<!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> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> var sbox = $.boxmodel ? "標(biāo)準(zhǔn)w3c":"ie"; document.write("您的頁(yè)面目前支持："+sbox+"盒子模型"); </script> </head> <body> </body> </html>

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

所以為了讓網(wǎng)頁(yè)能兼容各個(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í)元素后無(wú)法一般無(wú)法添加其他元素（float浮動(dòng)后除外）。兩個(gè)塊級(jí)元素連續(xù)編輯時(shí)，會(huì)在頁(yè)面自動(dòng)換行顯示。塊級(jí)元素一般可嵌套塊級(jí)元素或行內(nèi)元素；
  - 塊級(jí)元素一般作為容器出現(xiàn)，用來(lái)組織結(jié)構(gòu)，但并不全是如此。有些塊級(jí)元素，如只能包含塊級(jí)元素。
  - DIV?是最常用的塊級(jí)元素，元素樣式的display:block都是塊級(jí)元素。它們總是以一個(gè)塊的形式表現(xiàn)出來(lái)，并且跟同級(jí)的兄弟塊依次豎直排列，左右撐滿(mǎn)。
- 二、行內(nèi)元素：inline element
  - 也叫內(nèi)聯(lián)元素、內(nèi)嵌元素等；行內(nèi)元素一般都是基于語(yǔ)義級(jí)(semantic)的基本元素，只能容納文本或其他內(nèi)聯(lián)元素，常見(jiàn)內(nèi)聯(lián)元素 “a”。比如?SPAN元素，IFRAME元素和元素樣式的display : inline的都是行內(nèi)元素。例如文字這類(lèi)元素，各個(gè)字母之間橫向排列，到最右端自動(dòng)折行。
- 三、block（塊）元素的特點(diǎn):
  - ①、總是在新行上開(kāi)始；
  - ②、高度，行高以及外邊距和內(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?無(wú)效。設(shè)置高度height無(wú)效，可以通過(guò)line-height來(lái)設(shè)置。設(shè)置margin
  - 只有左右margin有效，上下無(wú)效。
  - 設(shè)置padding只有左右padding有效，上下則無(wú)效。注意元素范圍是增大了，但是對(duì)元素周?chē)膬?nèi)容是沒(méi)影響的。
- 五、常見(jiàn)的塊狀元素
  - 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?– 水平分隔線(xiàn)
  - 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?– 無(wú)序列表
- 六、常見(jiàn)的內(nèi)聯(lián)元素
  - a?– 錨點(diǎn)
  - abbr?– 縮寫(xiě)
  - acronym?– 首字
  - b?– 粗體(不推薦)
  - bdo?–?bidi override
  - big?– 大字體
  - br?– 換行
  - cite?– 引用
  - code?– 計(jì)算機(jī)代碼(在引用源碼的時(shí)候需要)
  - dfn?– 定義字段
  - em?– 強(qiáng)調(diào)
  - font?– 字體設(shè)定(不推薦)
  - i?– 斜體
  - img?– 圖片
  - input?– 輸入框
  - kbd?– 定義鍵盤(pán)文本
  - label?– 表格標(biāo)簽
  - q?– 短引用
  - s?– 中劃線(xiàn)(不推薦)
  - samp?– 定義范例計(jì)算機(jī)代碼
  - select?– 項(xiàng)目選擇
  - small?– 小字體文本
  - span?– 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊
  - strike?– 中劃線(xiàn)
  - strong?– 粗體強(qiáng)調(diào)
  - sub?– 下標(biāo)
  - sup?– 上標(biāo)
  - textarea?– 多行文本輸入框
  - tt?– 電傳文本
  - u?– 下劃線(xiàn)
- 七，可變?cè)?/p>
  - 可變?cè)貫楦鶕?jù)上下文語(yǔ)境決定該元素為塊元素或者內(nèi)聯(lián)元素。
  - applet?-?java applet
  - button?- 按鈕
  - del- 刪除文本
  - iframe?-?inline frame
  - ins?- 插入的文本
  - map?- 圖片區(qū)塊(map)
  - object?-?object對(duì)象
  - script?- 客戶(hù)端腳本
- 八、行內(nèi)元素與塊級(jí)元素有什么不同
  - 區(qū)別一：
    - 塊級(jí)：塊級(jí)元素會(huì)獨(dú)占一行，默認(rèn)情況下寬度自動(dòng)填滿(mǎn)其父元素寬度
    - 行內(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>都是替換元素，這些元素都沒(méi)有實(shí)際的內(nèi)容
可以通過(guò)修改display屬性來(lái)切換塊級(jí)元素和行內(nèi)元素

第十五章定位

static靜態(tài)定位（不對(duì)它的位置進(jìn)行改變，在哪里就在那里）
- 默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略?top,bottom,?left, right?或者?z-index?聲明）。
fixed固定定位（參照物–瀏覽器窗口）—做彈窗廣告用到
- 生成固定定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過(guò)?"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)行定位。
- 元素的位置通過(guò) “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)容稱(chēng)之為 “塊框“ ;
- 行內(nèi)元素:?span,strong,a等元素即：內(nèi)容顯示在行中稱(chēng) “行內(nèi)框”;
- 使用display屬性改變成框的類(lèi)型即：display:block; 讓行內(nèi)元素設(shè)置為塊級(jí)元素，display:none;?沒(méi)有框
相對(duì)定位：
- 如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，它將出現(xiàn)在它所在的位置上。
- 通過(guò)設(shè)置垂直或水平位置，讓這個(gè)元素“相對(duì)于”它的起點(diǎn)進(jìn)行移動(dòng)
- .adv_relative { position: relative; left: 30px; top: 20px; }
絕對(duì)定位：
- 元素的位置相對(duì)于最近的已定位祖先元素，如果元素沒(méi)有已定位的祖先元素，它的位置相對(duì)于最初的包含塊。?.adv_absolute { position: absolute; left: 30px; top: 20px; }

第十六章框架

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

1 2 3 4 5 6 7 8

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

第十七章 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
  - 所以寫(xiě)透明屬性時(shí)，一般寫(xiě)法是

1 2 3 4 5

{ opacity:0.5; filter:alpha(opacity：50);/*0-100*/ -moz-opacity:0.5; /*取值0-1*/-->針對(duì)早起版本的火狐兼容問(wèn)題的解決 }

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)簽，可以通過(guò)<embed>插入音頻或視頻
- <embed src=“media/music.mp3” />
- 格式.mid?.wav?.mp3等

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

css常見(jiàn)簡(jiǎn)寫(xiě)

第三部分附錄

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

企業(yè)DIV使用頻率高的命名方法
網(wǎng)頁(yè)內(nèi)容類(lè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)簽頁(yè)：?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
- 注釋的寫(xiě)法:?/* Footer */?內(nèi)容區(qū)/* End Footer */
id的命名:
- 頁(yè)面結(jié)構(gòu)
  - 容器:?container
  - 頁(yè)頭：header
  - 內(nèi)容：content/container
  - 頁(yè)面主體：main
  - 頁(yè)尾：footer
  - 導(dǎo)航：nav
  - 側(cè)欄：sidebar
  - 欄目：column
  - 頁(yè)面外圍控制整體布局寬度：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)簽頁(yè)：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的命名:
  - 顏色:使用顏色的名稱(chēng)或者16進(jìn)制代碼,如
    - .red { color: red; }
    - .f60 { color: #f60; }
    - .ff8600 { color: #ff8600; }
  - 字體大小,直接使用”font+字體大小”作為名稱(chēng),如
    - .font12px { font-size: 12px; }
    - .font9px {font-size: 9pt; }
  - 對(duì)齊樣式,使用對(duì)齊目標(biāo)的英文名稱(chēng),如
    - .left { float:left; }
    - .bottom { float:bottom; }
  - 標(biāo)題欄樣式,使用”類(lèi)別+功能”的方式命名,如
    - .barnews { }
    - .barproduct { }
  - 注意事項(xiàng)::
    - 一律小寫(xiě);
    - 盡量用英文;
    - 不加中杠和下劃線(xiàn);
    - 盡量不縮寫(xiě)，除非一看就明白的單詞.
推薦的?CSS?書(shū)寫(xiě)順序：
- 顯示屬性
  - 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)滑過(guò)、鼠標(biāo)點(diǎn)擊的狀態(tài)。則可以使用CSS進(jìn)行定義。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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

附錄三一些tips解決方案

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

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

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

不要使用過(guò)小的圖片做背景平鋪
- 這就是為何很多人都不用?1px?的原因，這才知曉。寬高?1px?的圖片平鋪出一個(gè)寬高?200px?的區(qū)域，需要?200200=40, 000?次，占用資源
無(wú)邊框
- 推薦的寫(xiě)法是?border:none;，哈哈，我一直在用這個(gè)。?border:0;?只是定義邊框?qū)挾葹榱?#xff0c;但邊框樣式、顏色還是會(huì)被瀏覽器解析，占用資源
慎用通配符
- 所謂通配符，就是將CSS?中的所有標(biāo)簽均初始化，不管用的不用的，過(guò)時(shí)的先進(jìn)的，一視同仁，這樣，大大的占用資源。要有選擇的初始化標(biāo)簽。
CSS的十六進(jìn)制顏色代碼縮寫(xiě)
- 習(xí)慣了縮寫(xiě)及小寫(xiě)，這才知道，原來(lái)不是推薦的寫(xiě)法，為的是減少解析所占用的資源。但同時(shí)會(huì)增加文件體積。孰優(yōu)孰劣，有待仔細(xì)考證。
樣式放頭上，腳本放腳下。不內(nèi)嵌，只外鏈
堅(jiān)決不用?CSS表達(dá)式
使用引用樣式表，而不是通過(guò)@import?導(dǎo)入。
一般來(lái)說(shuō)，PNG比?GIF?要小，小得多。再者，GIF?中有多少顏色是被浪費(fèi)的，很值得優(yōu)化。
千萬(wàn)不要在?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頭文件中直接引用，從而避免瀏覽器的不兼容帶來(lái)的錯(cuò)誤。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, 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”/>

表格不被撐開(kāi)

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

不設(shè)寬高居中

1 2 3 4 5

透明度的兼容代碼

1 2 3 4

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)省略

1 2 3

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方法 -推薦–此方法可以說(shuō)是綜合起來(lái)最好的方法了
  - clearfix只應(yīng)用在包含浮動(dòng)子元素的父級(jí)元素上

1 2 3 4 5 6 7 8

.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
消除圖片底部間隙的方法
- 圖片塊狀化-無(wú)基線(xiàn)對(duì)齊
  img{display:block;}
- 圖片底線(xiàn)對(duì)齊
  img{vertical-align:bottom;}
- 行高足夠小 - 基線(xiàn)位置上移
  .box{line-height:0;}

一些概念

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

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

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

附錄四部分工具資源

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

附錄五編碼規(guī)范

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

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

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

附錄七其他資源

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

附錄八常見(jiàn)問(wèn)題

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

轉(zhuǎn)載于:https://www.cnblogs.com/Chenghao-He/p/6979190.html

總結(jié)

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

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

上一篇：全球及中国包装产业需求规模与投资发展策略
下一篇： K12在线教育行业分类盘点及发展趋势

HTML

前端html与css学习笔记总结篇(超详细)

第一部分 HTML

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

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

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

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

第五章 三種列表的講解

第六章 表單元素(上)

第七章 表單和表格(下)

第二部分 CSS

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

第九章 css選擇器(上)

第十章 css選擇器(下)

第十一章 背景屬性

第十二章 文字文本屬性

第十三章 盒子模型

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

第十五章 定位

第十六章 框架

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

第三部分 附錄

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

附錄二 CSS精靈

附錄三 一些tips解決方案

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

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

常用代碼片段

一些總結(jié)

一些概念

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

附錄四 部分工具資源

附錄五 編碼規(guī)范

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

附錄七 其他資源

附錄八 常見(jiàn)問(wèn)題

總結(jié)

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

第五章三種列表的講解

第六章表單元素(上)

第七章表單和表格(下)

第十一章背景屬性

第十二章文字文本屬性

第十三章盒子模型

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

第十五章定位

第十六章框架

第三部分附錄

附錄三一些tips解決方案

附錄四部分工具資源

附錄五編碼規(guī)范

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

附錄七其他資源

附錄八常見(jiàn)問(wèn)題