html4.0
web 標(biāo)準(zhǔn)
- 結(jié)構(gòu)（html）,行為（js）,表現(xiàn)（css）
html概念
- 超文本標(biāo)記語(yǔ)言
h5文檔聲明及其作用
<!doctype html>
告知瀏覽器使用哪種html或xhtml規(guī)范
html元素
- 塊元素
- h1-h6,p,div,ul,ol,li,dl,dt,dd,form,table,tr,td,th,hr,fieldset
- 內(nèi)聯(lián)元素
- a,span,strong,b,em,i,label
- 超鏈接如何在新窗口打開(kāi) target="_blank"
- 內(nèi)聯(lián)塊元素
- img,input,textarea,select
- alt和title的區(qū)別
- 相對(duì)路徑的三種寫法
- img,input,textarea,select
- a,span,strong,b,em,i,label
- 可變?cè)?/li>
表格（作用：顯示數(shù)據(jù)）
- 表格相關(guān)html元素
- table,tr,td,th,caption
- 表格行分組：thead,tbody,tfoot
- table,tr,td,th,caption
- 表格相關(guān)html屬性
- 合并行：rowspan 合并列：colspan
- 水平對(duì)齊 ：align="left|center|right"
- 垂直對(duì)齊：valign="top|middle|bottom"
- 表格重要css屬性
- 合并相鄰單元格邊框 border-collapse:collapse;
表單（作用：搜集用戶信息）
- 表單元素
- 文本框凛膏，密碼框鼻由，提交按鈕伪货，單選按鈕，復(fù)選按鈕 <input type="***"/>
- 下拉列表（select）晴玖，文本域（textarea）
- 表單重要html屬性
- checked 選中狀態(tài)單選或復(fù)選
- disabled 禁用狀態(tài)的表單元素
- placeholder 添加默認(rèn)提示信息
- required 必填項(xiàng)，不能為空
- autofocus 自動(dòng)聚焦
- 如何取消h5表單驗(yàn)證
- novalidate
- h5新增表單type屬性值
- type="email"
- type="url"
- type="range"
- type="number"
- 表單字段集及表單字段集標(biāo)題
- fieldset,legend
- 表單的組成：表單域，表單控件噪矛，提示信息（label）
div的作用：主要用來(lái)劃分板塊
iframe如何去掉或隱藏滾動(dòng)條： scrolling="no"
css
css語(yǔ)法及其特點(diǎn)
- 層疊樣式表
- 實(shí)現(xiàn)了結(jié)構(gòu)與表現(xiàn)相分離
css樣式表的創(chuàng)建
- 內(nèi)聯(lián)樣式（行內(nèi)医清，行間樣式）
- <h1 style="color:red;"></h1>
- 內(nèi)部樣式（嵌入式樣式）
- <style type="text/css"></style>
- 外部樣式
- 使用link引入
- <link rel="stylesheet" type="text/css" href="1.css"/>
- 使用@import
- 使用link引入
- link和@import引入外部樣式的區(qū)別
- 老祖宗區(qū)別
- 加載順序不同
- 瀏覽器支持性不同
- 對(duì)js改變dom不同
- 樣式表的優(yōu)先級(jí)
- !important>內(nèi)聯(lián)>內(nèi)部>外部
css2.0選擇器
- id選擇器
- <p id="box"></p> #box{color:red;}
- class選擇器
- <div class="box box1"></div> .box{color:blue;}
- 元素選擇符（類型選擇符起暮，標(biāo)簽選擇器）
- a{text-decoration:none;}
- 后代選擇器
- .box a{font-size:12px;}
- 群組選擇器
- ul,ol{list-style:none;}
- 通配符
- *{margin:0; padding:0;}
- 偽類選擇器
- a:hover
- 滑過(guò)父元素，控制子元素的變化
css選擇器權(quán)重
- 內(nèi)聯(lián)：1000 id:100 class,偽類状勤，屬性： 10 標(biāo)簽選擇器鞋怀，偽元素：1
- css層疊的含義
- !important>內(nèi)聯(lián)>內(nèi)部>外部
- id>class>標(biāo)簽
- 權(quán)重相同時(shí)取后面定義的樣式
css核心屬性
- 字體類屬性
- 字體類型 font-family:"微軟雅黑",Arial;
- 字體大小 font-size:16px|1em|medium;
- 字體加粗 font-weight:normal|bold|bolder|100-900;
- 字體顏色 color:#000|rgb(0,0,0)|black;
- 文本類屬性
- 水平對(duì)齊方式
- text-align:left|center|right|justify;
- 行高
- line-height (行高不允許設(shè)置負(fù)值)
- 文本修飾
- text-decoration:none|underline|line-through|overline;
- 首行縮進(jìn)
- text-indent 設(shè)置為較大負(fù)值時(shí)會(huì)有隱藏效果
- 垂直對(duì)齊方式
- vertical-align:baseline|top|middle|bottom;
- 水平對(duì)齊方式
- 背景類屬性
- 背景色
- background-color
- 背景圖
- background-image:url(1.jpg);
- 背景平鋪屬性
- background-repeat:no-repeat|repeat|repeat-x|repeat-y;
- 背景圖位置
- background-position:left|center|right|數(shù)值 top|center|right|數(shù)值;
- 背景簡(jiǎn)寫屬性
- background:#f00 url(1.jpg) repeat-x left bottom;
- 背景圖尺寸
- background-size:數(shù)值|百分比|cover|contain;
- 背景色
- 浮動(dòng)屬性
- float:none|left|right;
- clear:none|left|right|both;
css盒模型
- content
- width
- height
- padding
- 背景可以延伸到padding區(qū)域
- 當(dāng)需要調(diào)整子元素在父元素中位置關(guān)系時(shí)，給父元素設(shè)置padding
- padding不允許設(shè)置負(fù)值
- border
- border:3px solid|dashed|dotted|double red;
- 使用border屬性實(shí)現(xiàn)三角效果
- 背景可以延伸到border區(qū)域持搜，當(dāng)設(shè)置為實(shí)線時(shí)密似，會(huì)遮擋背景
- margin
- 背景不能延伸到margin區(qū)域
- margin可以設(shè)置負(fù)值
- 當(dāng)需要調(diào)整元素之間的位置關(guān)系時(shí)，給本元素設(shè)置margin
- 標(biāo)準(zhǔn)盒模型和怪異盒模型的區(qū)別和轉(zhuǎn)換
- box-sizing:border-box; 標(biāo)準(zhǔn)轉(zhuǎn)為怪異
- box-sizing:content-box; 怪異轉(zhuǎn)為標(biāo)準(zhǔn)
標(biāo)準(zhǔn)盒模型
- 總寬度
- width+左右padding+左右border+左右margin
- 總高度
- height+上下padding+上下border+上下margin
怪異盒模型
- 總寬度
- width+左右margin
- 總高度
- height+上下margin
元素類型轉(zhuǎn)換
- display
- block
- inline
- inline-block
- img,input
- none
- 元素隱藏不可見(jiàn)的兩種方式
- display:none;
- visibility:hidden;
- 元素隱藏不可見(jiàn)的兩種方式
- list-item
- table
- 不定寬塊元素水平居中
- table-cell
- 不定寬高的子元素在父元素中水平垂直都居中
- flex
- 彈性盒
定位（層模型）position
- 默認(rèn)值： static
- 絕對(duì)定位： absolute
- 具有定位屬性的父包含塊
- 相對(duì)定位：relative
- 元素偏移前的位置
- 固定定位： fixed
- 瀏覽器窗口
- 相對(duì)定位和絕對(duì)定位的區(qū)別
- 透明度 opacity:0-1; 如何兼容IE6 filter:alpha(opacity=0-100);
- 定位層疊屬性 z-index
錨點(diǎn)鏈接
- 目標(biāo)偽類選擇器
溢出
- 容器溢出
- overflow:hidden|scroll|auto|visible;
- 文本溢出
- 單行文本省略號(hào)設(shè)置（四個(gè)條件缺一不可）
寬高自適應(yīng)
- 寬度自適應(yīng)
- 通欄效果
- 高度自適應(yīng)
- 最小高度 min-height 如何IE6
- 高度塌陷問(wèn)題解決方案及其優(yōu)缺點(diǎn)
- 偽元素
- :before
- :after
- 居中
- 文本葫盼，圖片等行內(nèi)元素水平居中
- 父元素{text-align:center;}
- 定寬塊元素水平居中
- 左右margin為auto
- 不定寬高的元素在屏幕窗口水平垂直都居中
- 固定定位 position:fixed; left:0; top:0; right:0; bottom:0; margin:auto;
- html,body{height:100%;} body{display:flex; justify-content:center; align-items:center;}
- position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
- 不定寬高的子元素在父元素中水平垂直都居中
- 相對(duì)定位結(jié)合絕對(duì)定位
- 父元素{display:table-cell; text-align:center; vertical-align:middle;}
- 彈性盒
- css3變形
- 文本葫盼，圖片等行內(nèi)元素水平居中
圖片整合的概念及優(yōu)勢(shì)
css3圓角
- border-radius:50%;
常見(jiàn)兼容性問(wèn)題
- 雙倍浮動(dòng)bug
- display:inline;
- 表單元素行高不一致
- float:left; 或 vertical-align:middle;
- 圖片默認(rèn)有空隙
- display:block;或float:left;
- 圖片添加超鏈接有邊框
- border:0;
- IE6下不識(shí)別高度小于10px的容器
- overflow:hidden;
- 鼠標(biāo)指針bug
- cursor:pointer;
- opacity低版本IE瀏覽器不識(shí)別
- filter:alpha(opacity=30)
- min-height屬性IE6不識(shí)別
- _height:100px;
css hack(過(guò)濾器)
- 下劃線屬性過(guò)濾器
- _height:100px;
- !important關(guān)鍵詞過(guò)濾器
- height:100px!important;
五大瀏覽器內(nèi)核及其代表作品
- IE內(nèi)核
- Trident
- Mozilla Firefox
- Gecko
- Safari,Chrome
- Webkit
- Opera
- Presto
- 聯(lián)合開(kāi)發(fā)
- Blink
seo優(yōu)化
站內(nèi)優(yōu)化
- 頁(yè)面主體優(yōu)化（給網(wǎng)站添加標(biāo)題）
- 頁(yè)面頭部?jī)?yōu)化（添加關(guān)鍵詞和描述）
- 添加網(wǎng)站導(dǎo)航或網(wǎng)站地圖
- 添加友情鏈接
- 圖片添加alt和title
- 盡量避免使用flash或圖片熱點(diǎn)鏈接残腌，給a添加title屬性
站外優(yōu)化
- 網(wǎng)站品牌建設(shè)，百度推廣，網(wǎng)站流量分析
h5新標(biāo)簽
結(jié)構(gòu)性標(biāo)簽
- header,footer,nav,section,article,aside,hgroup,figure,figcaption,dialog
其他h5標(biāo)簽
- mark,meter,progress
音頻
- audio 支持的音頻格式：mp3,ogg,wav
視頻
- video 支持的視頻格式：mp4,ogg,webm
css3選擇器
基本選擇器
- id,class,*,群組抛猫，元素
層次選擇器
- E F 后代選擇器
- E > F 子選擇器
- E + F 相鄰兄弟選擇器
- E～F 通用兄弟選擇器
偽類選擇器
- 結(jié)構(gòu)性偽類選擇器
- :first-child :last-child :nth-child(n)
- :first-of-type :last-of-type :nth-of-type(n)
- 目標(biāo)偽類選擇器
- E:target E是指錨點(diǎn)鏈接連接到那個(gè)元素
- UI狀態(tài)偽類選擇器（form表單元素）
- E:checked 匹配選中狀態(tài)的單選或復(fù)選按鈕
- E:enabled 匹配啟用狀態(tài)的表單元素
- E:disabled 匹配禁用狀態(tài)的表單元素
屬性選擇器
- li[class="box"]
- a[href^="http"]
- a[href$="com"]
漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)
css3屬性針對(duì)不同瀏覽器內(nèi)核兼容寫法
- -webkit-
- -moz-
彈性布局
flex容器屬性
- 改變主軸方向
- flex-direction:row|column;
- flex項(xiàng)目換行
- flex-wrap:wrap;
- 主軸對(duì)齊方式
- justify-content:flex-start|flex-end|center|space-between|space-around;
- 交叉軸對(duì)齊方式
- align-items:flex-start|flex-end|center;
flex項(xiàng)目屬性
- 改變某個(gè)flex項(xiàng)目的交叉軸對(duì)齊方式
- align-self:flex-start|flex-end|center;
- flex項(xiàng)目不等比例縮小
- flex-shrink:0;
- flex:1;應(yīng)用
- 等比例分配空間
- 分配剩余空間給某個(gè)flex項(xiàng)目
響應(yīng)式布局
概念
- 使用一套css樣式適配多個(gè)終端設(shè)備蟆盹，響應(yīng)窗口的變化，布局發(fā)生變化
核心原理
- 媒體查詢
- @media screen and (min-width:640px) and (max-width:960px){body{background:blue;}}
移動(dòng)端布局
移動(dòng)端相關(guān)概念
- 屏幕尺寸闺金，屏幕分辨率逾滥，ppi（像素密度），DPR（物理像素與邏輯像素的比值）
移動(dòng)端常見(jiàn)布局方案及其特點(diǎn)
- 百分比布局（流式布局）
- 文字流式败匹，控件彈性寨昙，圖片等比縮放
- 等比例縮放布局（rem布局）
- 混合布局
移動(dòng)端相關(guān)單位
- px,em,rem,vw
圣杯布局
- 頂部和底部固定，剩余空間分配給中間部分掀亩，設(shè)置flex為1
css3變形基礎(chǔ)
四種變形
- transform:rotate(旋轉(zhuǎn))|scale(縮放)|skew(傾斜)|translate(位移);
- 使用位移實(shí)現(xiàn)居中
改變變形元素中心點(diǎn)位置
- transform-origin
改變變形元素的類型
- transform-style:preserve-3d;
css3動(dòng)畫
transition動(dòng)畫
- transition:all 1s;
animation動(dòng)畫
- 定義動(dòng)畫關(guān)鍵幀
- @keyframes hello{0%{ } 100%{
}}
- @keyframes hello{0%{ } 100%{
- animation:hello 5s linear infinite paused;
transition和animation的區(qū)別
文本陰影和盒陰影
文本陰影 text-shadow:0 5px 5px red;
盒陰影 box-shadow:inset 5px -5px 5px gray;
BFC
概念——塊級(jí)格式化上下文
如何觸發(fā)BFC
- float除none以外的值
- overflow除visible以外的值（hidden舔哪，auto，scroll）
- display為table-cell,inline-block,table-caption
- position：absolute|fixed;
BFC的作用
- 解決上下margin重疊問(wèn)題
- 解決高度塌陷問(wèn)題
- 實(shí)現(xiàn)多欄布局效果
