資訊專欄INFORMATION COLUMN
摘要：每個(gè)列表項(xiàng)始于標(biāo)簽。由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對(duì)接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。標(biāo)簽的屬性應(yīng)當(dāng)與相關(guān)元素的屬性相同。姓名性別姓名性別單元格標(biāo)簽可以定義表格中的一個(gè)單元格，表示一個(gè)單元格。
第一部分 HTML
職業(yè)方向規(guī)劃定位：
web前端開發(fā)工程師
web網(wǎng)站架構(gòu)師
自己創(chuàng)業(yè)
轉(zhuǎn)崗管理或其他
web前端開發(fā)的前景展望：
未來(lái)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的基本語(yǔ)法和使用
瀏覽器兼容和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)站
認(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)：
不成對(duì)出現(xiàn)的標(biāo)簽
圖片四要素：
src="" 圖片路徑
alt="" 圖片含義
width="" 圖片寬度 和圖片大小保持一致
height="" 圖片高度 和圖片大小保持一致
title=""
路徑知識(shí)：
相對(duì)路徑、絕對(duì)路徑：
相對(duì)路徑：(Relative Path) 相對(duì)于該文件的路徑；
絕對(duì)路徑：(Absolute Path) 從磁盤出發(fā)的路徑；
align屬性--設(shè)置圖片與后面文字的位置關(guān)系
值--top、bottom、middle、absmiddle、left、right
在靜態(tài)頁(yè)面中：
/開頭表示根目錄；
./表示當(dāng)前目錄；（斜畫線前面一個(gè)點(diǎn)）
../上級(jí)目錄；（斜畫線前面兩個(gè)點(diǎn)）
直接用文件名不帶/也表示同一目錄
這些都是相對(duì)于當(dāng)前文件的位置來(lái)說(shuō)的，如果用絕對(duì)路徑的話就是寫全了。
三種列表的知識(shí)講解：
無(wú)序列表
無(wú)序列表是一個(gè)沒(méi)有順序項(xiàng)目的列表，此列表項(xiàng)默認(rèn)粗體圓點(diǎn)進(jìn)行標(biāo)識(shí)
有序列表也是一列項(xiàng)目，只是列表項(xiàng)目使用的是數(shù)字進(jìn)行標(biāo)記。 有序列表始于 標(biāo)簽。每個(gè)列表項(xiàng)始于
- 內(nèi)容一
- 內(nèi)容二
- 內(nèi)容三
列表符號(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ú)序列表-嵌套
有序列表-嵌套
- 茶
- 紅茶
- 綠茶
- 果汁
- 牛奶
定義列表
定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。定義列表以 標(biāo)簽開始。每個(gè)定義列表項(xiàng)以
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ì)之間。
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)簽:
表單標(biāo)簽
表單是一個(gè)包含表單元素的區(qū)域，包括起來(lái)的都是表單的內(nèi)容
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)的處理。
HTML標(biāo)簽 - 隱藏域隱藏標(biāo)簽：
隱藏域在頁(yè)面中對(duì)于用戶是不可見的，在表單中插入隱藏域的目的在于收集或發(fā)送信息，以利于被處理表單的程序所使用。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時(shí)候，隱藏域的信息也被一起發(fā)送到服務(wù)器
標(biāo)簽的掌握
常用type類型：
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)值：
textarea沒(méi)有默認(rèn)值
標(biāo)簽的使用
label 元素不會(huì)向用戶呈現(xiàn)任何特殊效果。
不過(guò)，它為鼠標(biāo)用戶改進(jìn)了可用性。
如果您在 label 元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。
就是說(shuō)，當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同。
例子：（重要---注冊(cè)表單--用戶體驗(yàn)--必做）
單向選擇
表單和表格標(biāo)簽：
是文本域標(biāo)簽，可以在其中插入一段文字內(nèi)容，它有兩個(gè)常用屬性rows和cols
注意：
rows表示這個(gè)文本域有多少行
cols表示這個(gè)文本域有多少列
除了這兩個(gè)屬性它還有readonly（只讀，文本域的內(nèi)容無(wú)法改變，相當(dāng)于協(xié)議）和title（鼠標(biāo)放上提示）
標(biāo)簽的掌握
注：當(dāng)提交表單時(shí)，瀏覽器會(huì)提交選定的項(xiàng)目，或者收集用逗號(hào)分隔的多個(gè)選項(xiàng)，將其合成一個(gè)多帶帶的參數(shù)列表，并且在將 表單數(shù)據(jù)提交給服務(wù)器時(shí)包括 name 屬性
常用到的屬性：disabled=“disabled” name="sel" size="2"
注意：
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基礎(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樣式表的語(yǔ)法 CSS規(guī)則由兩個(gè)主要的部分構(gòu)成：要添加樣式的盒子名或者標(biāo)簽名、和要添加的樣式。 盒子名或者標(biāo)簽名{屬性:值;}
CSS中幾種顏色的表示方法
用顏色名表示
有17個(gè)預(yù)先確定的顏色，它們是 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, 藍(lán)色 例子
內(nèi)部樣式表 當(dāng)單個(gè)頁(yè)面需要設(shè)置樣式時(shí)，就應(yīng)該使用內(nèi)部樣式表。 使用 標(biāo)簽在文檔里面定義內(nèi)部樣式表 從外部引入到樣式分為兩種：（注意寫在head標(biāo)簽里面） 當(dāng)樣式需要應(yīng)用于很多頁(yè)面時(shí)，就需要用到外部樣式表，首先需要?jiǎng)?chuàng)建一個(gè)css文件，然后引用到我們的頁(yè)面中。 Link樣式表式： Html式：
內(nèi)聯(lián)樣式表（優(yōu)先級(jí)高） 寫在標(biāo)簽里面的樣式 如： 表示給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)樣式 其中樣式表又有:類選擇器 < 類派生選擇器 < 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è)元素在沒(méi)有其他樣式的作用影響下，其Class定義了多個(gè)并以空格分開，其優(yōu)先級(jí)順序?yàn)椋?/p>
一個(gè)元素同時(shí)應(yīng)用多個(gè)class，后定義的優(yōu)先（即近者優(yōu)先），加上!important者最優(yōu)先！
css選擇器： class類選擇器可以重復(fù)利用 id選擇器唯一
標(biāo)簽選擇器 什么是選擇器：css選擇器就是要改變樣式的對(duì)象 選擇器{屬性:值;屬性:值;} 標(biāo)簽選擇器：頁(yè)面中所有的標(biāo)簽都是一個(gè)選擇器 p{color:red;}
ID選擇器 選擇id命名的元素 以 # 開頭 #p1{color:#0f0;}
類選擇器 class選擇器，選擇clas命名的元素 以.開頭 .first{color:#00f;} css代碼寫完后上線前要經(jīng)過(guò)壓縮處理 本地和服務(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;}
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;} / 選定的鏈接 /
注意 偽類選擇器的排序很重要，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è)置顯示背景圖片的位置，通過(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 小寫字母以大寫字母顯示
文本屬性 text-align:center; 文本對(duì)齊(right/left/center) line-height:10px; 行間距(可通過(guò)它實(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í)多帶帶的唯一的元素。
盒子模型的組成
盒子模型組成部分： 自身內(nèi)容： width、height 寬高 內(nèi)邊距： padding 盒子邊框： border 邊框線 與其他盒子距離： margin 外邊距 內(nèi)容+內(nèi)邊距+邊框+外邊距=面積
border 邊框 常見寫法 border:1px solid #f00;
多帶帶屬性： 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í)針?lè)较颍?/p>
多帶帶屬性： 當(dāng)設(shè)置內(nèi)邊距的時(shí)候會(huì)把盒子撐大，為了保持盒子原來(lái)的大小，應(yīng)該高度和寬度進(jìn)行減小，根據(jù)width和height減小
margin 外邊距 值：與padding相同 多帶帶屬性：與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í)一下 上面的代碼沒(méi)有加上 doctype 聲明，在 ie 瀏覽器中顯示 ie盒子模型，在 ff 瀏覽器中顯示“標(biāo)準(zhǔn)w3c 盒子模型”。 代碼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í)的兄弟塊依次豎直排列，左右撐滿。
二、行內(nèi)元素：inline element 也叫內(nèi)聯(lián)元素、內(nèi)嵌元素等；行內(nèi)元素一般都是基于語(yǔ)義級(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 無(wú)效。 設(shè)置高度height 無(wú)效，可以通過(guò)line-height來(lái)設(shè)置。 設(shè)置margin 只有左右margin有效，上下無(wú)效。 設(shè)置padding只有左右padding有效，上下則無(wú)效。注意元素范圍是增大了，但是對(duì)元素周圍的內(nèi)容是沒(mé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 – 無(wú)序列表
六、常見的內(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è)?/strong> 可變?cè)貫楦鶕?jù)上下文語(yǔ)境決定該元素為塊元素或者內(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è)置方法）
表格標(biāo)簽
表格標(biāo)簽：
是表格標(biāo)簽，可以用它定義一個(gè)表格。
姓名
性別
的border屬性不能少
標(biāo)簽的使用
行標(biāo)簽：
可以定義表格中的一行，一個(gè)<tr> 表示一行。
姓名
性別
姓名
性別
單元格標(biāo)簽:
可以定義表格中的一個(gè)單元格， 表示一個(gè)單元格。
姓名
性別
愛(ài)好
第二部分 CSS
第八章 css基礎(chǔ)知識(shí)
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`代表
- **用`rgba(r,g,b,a)`函數(shù)表示 **
- 其中`a`表示的是改顏色的透明度，取值范圍是`0~1`，其中`0`代表完全透明
- **用hsla(Hue,Saturation,Lightness,alpha)函數(shù)表示**
- 色調(diào)、飽和度、亮度、透明度
background-color:gray
background-color:#F00
background-color:#ffff00
background-color:rgb(255,0,255)
background-color:hsl(120,80%,50%)
background-color:rgba(255,0,255,0.5)
background-color:hsla(120,80%,50%,0.5)
第九章 css選擇器(上)
第十章 css選擇器(下)
第十一章 背景屬性
第十二章 文字文本屬性
第十三章 盒子模型
- `padding-top:`
- `padding-right:`
- `padding-bottom:`
- ` padding-left:`
第十四章 塊元素、行元素與溢出