資訊專欄INFORMATION COLUMN
摘要：每個列表項始于標(biāo)簽。由動作屬性定義的這個文件通常會對接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。標(biāo)簽的屬性應(yīng)當(dāng)與相關(guān)元素的屬性相同。姓名性別姓名性別單元格標(biāo)簽可以定義表格中的一個單元格，表示一個單元格。
第一部分 HTML
職業(yè)方向規(guī)劃定位：
web前端開發(fā)工程師
web網(wǎng)站架構(gòu)師
自己創(chuàng)業(yè)
轉(zhuǎn)崗管理或其他
web前端開發(fā)的前景展望：
未來IT行業(yè)企業(yè)需求最多的人才
結(jié)合最新的html5搶占移動端的市場
自己創(chuàng)業(yè)做老板
隨著互聯(lián)網(wǎng)的普及web開發(fā)成為企業(yè)的寵兒和核心
web職業(yè)發(fā)展目標(biāo)：
第一、梳理知識架構(gòu)
負(fù)責(zé)內(nèi)容的HTML
負(fù)責(zé)外觀的css（層疊樣式表）
負(fù)責(zé)行為的js
ps切圖
第二、分解目標(biāo)（起步階段、提升階段、成型階段）
起步階段：
基本知識的掌握
常用工具的掌握
溝通技巧的掌握（圍繞客戶的需求）
良好的開發(fā)習(xí)慣（加注釋、對齊方式）
提升階段：
熟悉掌握HTML基本標(biāo)簽和屬性
熟練掌握css的基本語法和使用
瀏覽器兼容和w3c標(biāo)準(zhǔn)的掌握
結(jié)合html+css+js開始系統(tǒng)項目的開發(fā)
成型階段：
精通DIV+CCS布局
精通css樣式表控制html標(biāo)簽
熟悉運(yùn)用js制作動態(tài)網(wǎng)站的效果
能獨立開發(fā)完成網(wǎng)站
認(rèn)識HTML：
html不是一種編程語言，是一種標(biāo)志語言
標(biāo)記語言是由一套標(biāo)識標(biāo)簽組成的
html使用標(biāo)簽來描述網(wǎng)頁
html結(jié)構(gòu)：
不成對出現(xiàn)的標(biāo)簽
圖片四要素：
src="" 圖片路徑
alt="" 圖片含義
width="" 圖片寬度 和圖片大小保持一致
height="" 圖片高度 和圖片大小保持一致
title=""
路徑知識：
相對路徑、絕對路徑：
相對路徑：(Relative Path) 相對于該文件的路徑；
絕對路徑：(Absolute Path) 從磁盤出發(fā)的路徑；
align屬性--設(shè)置圖片與后面文字的位置關(guān)系
值--top、bottom、middle、absmiddle、left、right
在靜態(tài)頁面中：
/開頭表示根目錄；
./表示當(dāng)前目錄；（斜畫線前面一個點）
../上級目錄；（斜畫線前面兩個點）
直接用文件名不帶/也表示同一目錄
這些都是相對于當(dāng)前文件的位置來說的，如果用絕對路徑的話就是寫全了。
三種列表的知識講解：
無序列表
無序列表是一個沒有順序項目的列表，此列表項默認(rèn)粗體圓點進(jìn)行標(biāo)識
有序列表也是一列項目，只是列表項目使用的是數(shù)字進(jìn)行標(biāo)記。 有序列表始于 標(biāo)簽。每個列表項始于
- 內(nèi)容一
- 內(nèi)容二
- 內(nèi)容三
列表符號
無序列表-列表符號:
type="circle" 空心圓 type=“disc” 實心圓 默認(rèn)值 type="square" 方塊符
有序列表-列表符號
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
列表嵌套
無序列表-嵌套
有序列表-嵌套
- 茶
- 紅茶
- 綠茶
- 果汁
- 牛奶
定義列表
定義列表不僅僅是一列項目，而是項目及其注釋的組合。定義列表以 標(biāo)簽開始。每個定義列表項以
dd是對dt的解釋
< dl>< /dl>用來創(chuàng)建一個普通的列表,
< dt>< /dt>用來創(chuàng)建列表中的上層項目，
< dd>< /dd>用來創(chuàng)建列表中最下層項目，
< dt>< /dt>和< dd>< /dd>都必須放在< dl>< /dl>標(biāo)志對之間。
dl是definition list的縮寫
dt是definition title的縮寫
dd是definition description的縮寫
list-style屬性具有三個屬性分量：
list-style-position ：設(shè)置列表項圖標(biāo)的位置，位于文本內(nèi)或者文本外
list-style-type： 設(shè)置列表項圖標(biāo)的類型
list-style-image ：使用圖像設(shè)置列表項圖標(biāo)
表單標(biāo)簽:
表單標(biāo)簽
表單是一個包含表單元素的區(qū)域，包括起來的都是表單的內(nèi)容
HTML標(biāo)簽 - Action和確認(rèn)按鈕：
當(dāng)用戶單擊確認(rèn)按鈕時，表單的內(nèi)容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。
HTML標(biāo)簽 - 隱藏域隱藏標(biāo)簽：
隱藏域在頁面中對于用戶是不可見的，在表單中插入隱藏域的目的在于收集或發(fā)送信息，以利于被處理表單的程序所使用。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時候，隱藏域的信息也被一起發(fā)送到服務(wù)器
標(biāo)簽的掌握
常用type類型：
type="text" 單行文本輸入框
type="password" 密碼（maxlength=""）
type="radio" 單項選擇（checked="checked"）
type="checkbox" 多項選擇
type="button" 按鈕
type="submit" 提交 type="image" 圖片提交
type="file" 上傳文件
type="reset" 重置
type="hidden" 隱藏
關(guān)于表單中的設(shè)置默認(rèn)值：
textarea沒有默認(rèn)值
標(biāo)簽的使用
label 元素不會向用戶呈現(xiàn)任何特殊效果。
不過，它為鼠標(biāo)用戶改進(jìn)了可用性。
如果您在 label 元素內(nèi)點擊文本，就會觸發(fā)此控件。
就是說，當(dāng)用戶選擇該標(biāo)簽時，瀏覽器就會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同。
例子：（重要---注冊表單--用戶體驗--必做）
單向選擇
表單和表格標(biāo)簽：
是文本域標(biāo)簽，可以在其中插入一段文字內(nèi)容，它有兩個常用屬性rows和cols
注意：
rows表示這個文本域有多少行
cols表示這個文本域有多少列
除了這兩個屬性它還有readonly（只讀，文本域的內(nèi)容無法改變，相當(dāng)于協(xié)議）和title（鼠標(biāo)放上提示）
標(biāo)簽的掌握
注：當(dāng)提交表單時，瀏覽器會提交選定的項目，或者收集用逗號分隔的多個選項，將其合成一個多帶帶的參數(shù)列表，并且在將 表單數(shù)據(jù)提交給服務(wù)器時包括 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 一般用它來布局
a 超鏈接標(biāo)簽 href*屬性：設(shè)置跳轉(zhuǎn)的網(wǎng)頁地址 target屬性：設(shè)置跳轉(zhuǎn)的目標(biāo) 結(jié)論：凡事頁面可以點擊跳轉(zhuǎn)或者表單提交的文字，都用a標(biāo)簽
img src*屬性用來設(shè)置圖片的url數(shù)據(jù) alt提供給搜索引擎搜索的 width height 結(jié)論 ：顯示圖片
ul li 列表 結(jié)論：只要將來設(shè)計頁面中有固定樣式的列表，就用ul和li
table caption tr td (th) 慢慢已經(jīng)被淘汰了 被ul li代替 如果是合并豎排的就是合并行（rowspan） 如果是合并橫排的就是合并列（colspan） HTML部分導(dǎo)圖總結(jié) HTML5標(biāo)簽集合
css基礎(chǔ)知識： 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òu)成：要添加樣式的盒子名或者標(biāo)簽名、和要添加的樣式。 盒子名或者標(biāo)簽名{屬性:值;}
CSS中幾種顏色的表示方法
用顏色名表示
有17個預(yù)先確定的顏色，它們是 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, 藍(lán)色 例子
內(nèi)部樣式表 當(dāng)單個頁面需要設(shè)置樣式時，就應(yīng)該使用內(nèi)部樣式表。 使用 標(biāo)簽在文檔里面定義內(nèi)部樣式表 從外部引入到樣式分為兩種：（注意寫在head標(biāo)簽里面） 當(dāng)樣式需要應(yīng)用于很多頁面時，就需要用到外部樣式表，首先需要創(chuàng)建一個css文件，然后引用到我們的頁面中。 Link樣式表式： Html式：
內(nèi)聯(lián)樣式表（優(yōu)先級高） 寫在標(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時，是一種并行(沒有嘗試是否是這樣)加載CSS方式，而@impor則在整個頁面加載完成后才加載。 兼容性的區(qū)別，因@import`CSS2.1才特有的，所以對于不兼容CSS2.1`的瀏覽器來說，無效。 在樣式控制上(比如動態(tài)改變網(wǎng)頁的布局時,使用javascript操作DOM)的區(qū)別，此時@import就無能為力了。
樣式的優(yōu)先級補(bǔ)充
相同權(quán)值情況下，CSS樣式的優(yōu)先級總結(jié)來說，就是——就近原則（離被設(shè)置元素越近優(yōu)先級別越高）： 內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部） > 嵌入樣式表（當(dāng)前文件中）> 外部樣式表（外部文件中） 權(quán)值不同時，瀏覽器是根據(jù)權(quán)值來判斷使用哪種css樣式的，哪種樣式權(quán)值高就使用哪種樣式
層疊優(yōu)先級是: 瀏覽器缺省< 外部樣式表 < 內(nèi)部樣式表 < 內(nèi)聯(lián)樣式 其中樣式表又有:類選擇器 < 類派生選擇器 < ID選擇器 < ID派生選擇器
派生選擇器以前叫上下文選擇器，所以完整的層疊優(yōu)先級是: 瀏覽器缺省 < 外部樣式表 < 外部樣式表類選擇器 < 外部樣式表類派生選擇器 < 外部樣式表ID選擇器 < 外部樣式表ID派生選擇器 < 內(nèi)部樣式表 < 內(nèi)部樣式表類選擇器 < 內(nèi)部樣式表類派生選擇器 < 內(nèi)部樣式表ID選擇器 < 內(nèi)部樣式表ID派生選擇器 < 內(nèi)聯(lián)樣式...共12個優(yōu)先級
另外，如果同一個元素在沒有其他樣式的作用影響下，其Class定義了多個并以空格分開，其優(yōu)先級順序為： 一個元素同時應(yīng)用多個class，后定義的優(yōu)先（即近者優(yōu)先），加上!important者最優(yōu)先！
css選擇器： class類選擇器可以重復(fù)利用 id選擇器唯一
標(biāo)簽選擇器 什么是選擇器：css選擇器就是要改變樣式的對象 選擇器{屬性:值;屬性:值;} 標(biāo)簽選擇器：頁面中所有的標(biāo)簽都是一個選擇器 p{color:red;}
ID選擇器 選擇id命名的元素 以 # 開頭 #p1{color:#0f0;}
類選擇器 class選擇器，選擇clas命名的元素 以.開頭 .first{color:#00f;} css代碼寫完后上線前要經(jīng)過壓縮處理 本地和服務(wù)器分兩個css版本（備份） 壓縮后注釋都清除，空間體積減少
群組選擇器 選擇多個元素,以逗號隔開 #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;} / 未訪問的鏈接 / （只用于a標(biāo)簽） a:visited {color:#00FF00;} / 已訪問的鏈接 / （只用于a標(biāo)簽） a:hover {color:#FF00FF;} /* 鼠標(biāo)移動到鏈接上 */（可和其他標(biāo)簽結(jié)合一起用） a:active {color:#0000FF;} / 選定的鏈接 /
注意 偽類選擇器的排序很重要，a:link?a:visited ?a:hover a:active，記作lvha
輸入偽類選擇器（針對表單） input:focus{color:red;} / 鍵盤輸入焦點 /
其他偽類選擇器 p:first-child{color:red;} /* 第一個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來實現(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%;
背景圖片的滾動 背景圖片是否隨著內(nèi)容的滾動而滾動由background-attachment設(shè)置 background-attachment:fixed; 固定，不隨內(nèi)容的滾動而滾動 background-attachment:scroll; 滾動，隨內(nèi)容的滾動而滾動
css文字文本屬性：
文字屬性 color:red; 文字顏色 font-size:12px; 文字大小 font-weight:“bold” 文字粗細(xì)(bold/normal) font-family:“宋體” 文字字體 font-variant:small-caps 小寫字母以大寫字母顯示
文本屬性 text-align:center; 文本對齊(right/left/center) line-height:10px; 行間距(可通過它實現(xiàn)文本的垂直居中) text-indent:20px; 首行縮進(jìn)
text-decoration:none; 文本線(none/underline/overline/line-through) letter-spacing: 字間距
盒子模型 盒子模型就是一個有高度和寬度的矩形區(qū)域 所有html標(biāo)簽都是盒子模型 div標(biāo)簽自定義盒子模型
所有的標(biāo)簽都是盒子模型 class和id的主要差別是：class用于元素組（類似的元素，或者可以理解為某一類元素），而id用于標(biāo)識多帶帶的唯一的元素。
盒子模型的組成
盒子模型組成部分： 自身內(nèi)容： width、height 寬高 內(nèi)邊距： padding 盒子邊框： border 邊框線 與其他盒子距離： margin 外邊距 內(nèi)容+內(nèi)邊距+邊框+外邊距=面積
border 邊框 常見寫法 border:1px solid #f00;
多帶帶屬性： border-width:
border-style: dotted 點狀虛線 dashed（虛線） solid（實線） double（雙實線） border-color (顏色)
padding 內(nèi)邊距
值：像素/厘米等長度單位、百分比 padding:10px; 上下左右 padding:10px 10px; 上下 左右 padding:10px 10px 10px; 上 左右 下 padding:10px 10px 10px 10px; 上 右 下 左（設(shè)置4個點-->順時針方向）
多帶帶屬性： 當(dāng)設(shè)置內(nèi)邊距的時候會把盒子撐大，為了保持盒子原來的大小，應(yīng)該高度和寬度進(jìn)行減小，根據(jù)width和height減小
margin 外邊距 值：與padding相同 多帶帶屬性：與padding相同 外邊距合并：兩個盒子同時設(shè)置了外邊距，會進(jìn)行一個外邊距合并 補(bǔ)充盒子模型內(nèi)容
標(biāo)準(zhǔn)盒子模型 盒子模型是css中一個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是 ie 盒子模型和標(biāo)準(zhǔn) w3c 盒子模型。他們對盒子模型的解釋各不相同，先來看看我們熟知的標(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）
例： 一個盒子的 margin 為 20px，border 為 1px，padding 為 10px，content 的寬為 200px、高為 50px，假如用標(biāo)準(zhǔn) w3c 盒子模型解釋，那么這個盒子需要占據(jù)的位置為：寬 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的實際大小為：寬 1*2+10*2+200=222px、高 1*2+10*2+50=72px；假如用ie 盒子模型，那么這個盒子需要占據(jù)的位置為：寬 20*2+200=240px、高 20*2+50=70px，盒子的實際大小為：寬 200px、高 50px 那應(yīng)該選擇哪中盒子模型呢？當(dāng)然是“標(biāo)準(zhǔn) w3c 盒子模型”了。怎么樣才算是選擇了“標(biāo)準(zhǔn) w3c 盒子模型”呢？很簡單，就是在網(wǎng)頁的頂部加上 doctype 聲明。 假如不加 doctype 聲明，那么各個瀏覽器會根據(jù)自己的行為去理解網(wǎng)頁，即 ie 瀏覽器會采用 ie 盒子模型去解釋你的盒子，而 ff 會采用標(biāo)準(zhǔn) w3c 盒子模型解釋你的盒子，所以網(wǎng)頁在不同的瀏覽器中就顯示的不一樣了。 反之，假如加上了 doctype 聲明，那么所有瀏覽器都會采用標(biāo)準(zhǔn) w3c 盒子模型去解釋你的盒子，網(wǎng)頁就能在各個瀏覽器中顯示一致了。 用 jquery 做的例子來證實一下 上面的代碼沒有加上 doctype 聲明，在 ie 瀏覽器中顯示 ie盒子模型，在 ff 瀏覽器中顯示“標(biāo)準(zhǔn)w3c 盒子模型”。 代碼2 與代碼1 唯一的不同的就是頂部加了 doctype 聲明。在所有瀏覽器中都顯示“標(biāo)準(zhǔn) w3c 盒子模型” 所以為了讓網(wǎng)頁能兼容各個瀏覽器，讓我們用標(biāo)準(zhǔn) w3c 盒子模型
擴(kuò)展 學(xué)會使用box-sizing布局
基本概念 塊級元素：默認(rèn)情況下獨占一行的元素，可控制寬高、上下邊距； 行內(nèi)元素：默認(rèn)情況下一行可以擺放多個的元素，不可控制寬高和上下邊距
行塊轉(zhuǎn)換 display:none; 不顯示 display:block; 變成塊級元素 display:inline; 變成行級元素 display:inline-block; 以塊級元素樣式展示，以行級元素樣式排列
溢出 overflow:hidden; 溢出隱藏 overflow:scroll; 內(nèi)容會被修剪，瀏覽器會顯示滾動條 overflow:auto; 如果內(nèi)容被修剪，則產(chǎn)生滾動條 文本不換行：white-space:nowrap; 長單詞換行：word-wrap:break-word;
行內(nèi)元素和快級元素小結(jié)
一、塊級元素：block element 每個塊級元素默認(rèn)占一行高度，一行內(nèi)添加一個塊級元素后無法一般無法添加其他元素（float浮動后除外）。兩個塊級元素連續(xù)編輯時，會在頁面自動換行顯示。塊級元素一般可嵌套塊級元素或行內(nèi)元素； 塊級元素一般作為容器出現(xiàn)，用來組織結(jié)構(gòu)，但并不全是如此。有些塊級元素，如只能包含塊級元素。 DIV 是最常用的塊級元素，元素樣式的display:block都是塊級元素。它們總是以一個塊的形式表現(xiàn)出來，并且跟同級的兄弟塊依次豎直排列，左右撐滿。
二、行內(nèi)元素：inline element 也叫內(nèi)聯(lián)元素、內(nèi)嵌元素等；行內(nèi)元素一般都是基于語義級(semantic)的基本元素，只能容納文本或其他內(nèi)聯(lián)元素，常見內(nèi)聯(lián)元素 “a”。比如 SPAN 元素，IFRAME元素和元素樣式的display : inline的都是行內(nèi)元素。例如文字這類元素，各個字母 之間橫向排列，到最右端自動折行。
三、block（塊）元素的特點: ①、總是在新行上開始； ②、高度，行高以及外邊距和內(nèi)邊距都可控制； ③、寬度缺省是它的容器的100%，除非設(shè)定一個寬度。 ④、它可以容納內(nèi)聯(lián)元素和其他塊元素
四、inline元素的特點 ①、和其他元素都在一行上； ②、高，行高及外邊距和內(nèi)邊距不可改變； ③、寬度就是它的文字或圖片的寬度，不可改變 ④、內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素
對行內(nèi)元素，需要注意如下: 設(shè)置寬度width 無效。 設(shè)置高度height 無效，可以通過line-height來設(shè)置。 設(shè)置margin 只有左右margin有效，上下無效。 設(shè)置padding只有左右padding有效，上下則無效。注意元素范圍是增大了，但是對元素周圍的內(nèi)容是沒影響的。
五、常見的塊狀元素 address – 地址 blockquote – 塊引用 center – 舉中對齊塊 dir – 目錄列表 div – 常用塊級容易，也是CSS layout的主要標(biāo)簽 dl – 定義列表 fieldset – form控制組 form – 交互表單 h1 – 大標(biāo)題 h2 – 副標(biāo)題 h3 – 3級標(biāo)題 h4 – 4級標(biāo)題 h5 – 5級標(biāo)題 h6 – 6級標(biāo)題 hr – 水平分隔線 isindex – input prompt menu – 菜單列表 noframes – frames可選內(nèi)容，（對于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容 noscript – 可選腳本內(nèi)容（對于不支持script的瀏覽器顯示此內(nèi)容） ol – 有序表單 p – 段落 pre – 格式化文本 table – 表格 ul – 無序列表
六、常見的內(nèi)聯(lián)元素 a – 錨點 abbr – 縮寫 acronym – 首字 b – 粗體(不推薦) bdo – bidi override big – 大字體 br – 換行 cite – 引用 code – 計算機(jī)代碼(在引用源碼的時候需要) dfn – 定義字段 em – 強(qiáng)調(diào) font – 字體設(shè)定(不推薦) i – 斜體 img – 圖片 input – 輸入框 kbd – 定義鍵盤文本 label – 表格標(biāo)簽 q – 短引用 s – 中劃線(不推薦) samp – 定義范例計算機(jī)代碼 select – 項目選擇 small – 小字體文本 span – 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊 strike – 中劃線 strong – 粗體強(qiáng)調(diào) sub – 下標(biāo) sup – 上標(biāo) textarea – 多行文本輸入框 tt – 電傳文本 u – 下劃線
七，可變元素 可變元素為根據(jù)上下文語境決定該元素為塊元素或者內(nèi)聯(lián)元素。 applet - java applet button - 按鈕 del - 刪除文本 iframe - inline frame ins - 插入的文本 map - 圖片區(qū)塊(map) object - object對象 script - 客戶端腳本 八、行內(nèi)元素與塊級元素有什么不同
區(qū)別一： 塊級：塊級元素會獨占一行，默認(rèn)情況下寬度自動填滿其父元素寬度 行內(nèi)：行內(nèi)元素不會獨占一行，相鄰的行內(nèi)元素會排在同一行。其寬度隨內(nèi)容的變化而變化。
區(qū)別二： 塊級：塊級元素可以設(shè)置寬高 行內(nèi)：行內(nèi)元素不可以設(shè)置寬高 區(qū)別三：
塊級：塊級元素可以設(shè)置margin，padding 行內(nèi)：行內(nèi)元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是豎直方向的margin-bottom; margin-top; padding-top; padding-bottom;卻不能生效。
區(qū)別四： 塊級：display:block; 行內(nèi)：display:inline;
替換元素有如下：（和img一樣的設(shè)置方法）
表格標(biāo)簽
表格標(biāo)簽：
是表格標(biāo)簽，可以用它定義一個表格。
姓名
性別
的border屬性不能少
標(biāo)簽的使用
行標(biāo)簽：
可以定義表格中的一行，一個<tr> 表示一行。
姓名
性別
姓名
性別
單元格標(biāo)簽:
可以定義表格中的一個單元格， 表示一個單元格。
姓名
性別
愛好
第二部分 CSS
第八章 css基礎(chǔ)知識
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:`
第十四章 塊元素、行元素與溢出