web 全栈 学习 2 一个好的页面是如何炼成的
第一章:Web頁面內(nèi)容的構(gòu)成
2.Web內(nèi)容的分工
一個(gè)Web頁面可能的構(gòu)成(視覺上看);
①文字、鏈接、標(biāo)題
②交互入口(表單元素)
③圖片(哪些類型)
④動(dòng)畫
Flash動(dòng)畫
HTML5 CSS3 動(dòng)畫
⑤音視頻
背景音樂
Flash廣告視頻
HTML5視頻
⑥交互效果
問題:如下元素或者內(nèi)容,那個(gè)是網(wǎng)頁中最重要的? (A)
A.html
B.jsascript
C.CSS
D.服務(wù)器端腳本
E.其他頁面資源
3.從技術(shù)上看待一個(gè)頁面
①HTML 負(fù)責(zé)內(nèi)容與結(jié)構(gòu)
-是骨架和肉體,沒有內(nèi)容,一切都是失去了意義
②CSS 負(fù)責(zé)樣式與表現(xiàn)
-是裝飾美化,是皮膚,是外貌,賞心悅目,人人喜歡
③JavaScript 負(fù)責(zé)動(dòng)作與交互
-是動(dòng)作,是增強(qiáng),是機(jī)能。功能強(qiáng)大不但能提高體驗(yàn),還能提高效率
4.負(fù)責(zé)內(nèi)容的HTML
①結(jié)構(gòu)
結(jié)構(gòu)標(biāo)簽有哪些?(分塊、組成部分、骨架)
②語義
語義標(biāo)簽有哪些?(純內(nèi)容、肢體)
③其他元素類型
圖片(img、map)
對象(object、emed)
誤區(qū)在哪里?語義標(biāo)簽為什么重要?半結(jié)構(gòu)化與結(jié)構(gòu)化?
*** 結(jié)構(gòu)標(biāo)簽 ***
* 純結(jié)構(gòu)標(biāo)簽
- center - 居中對齊塊
- div - 常用塊控制標(biāo)簽
- span - 常用內(nèi)聯(lián)容器
- br - 換行
- head - 頭部
- body - 主體
* 看標(biāo)簽的結(jié)構(gòu)得注意很重要一點(diǎn)
- 標(biāo)簽本身的默認(rèn)結(jié)構(gòu)屬性(塊元素還是內(nèi)容元素)
- 互相轉(zhuǎn)換
*** 語義標(biāo)簽 ***
* 常見的有
- h1-hx
- p
- table
- li
- ul
- img
* 在 HTML5 中大大增多
- header nav footer article section aside figure summary details
5.負(fù)責(zé)樣式的 CSS
①內(nèi)容修改
- color、background、font
②選擇器與優(yōu)先級(jí)
- id、類、元素
③邊框三要素與邊距
- border(哪三要素)、margin
④空間與位置
- z-index、left、top、position
*表格布局 VS DIV+CSS
①什么是表格布局?
看一下新浪2007年的頁面
②什么是div+css布局?
看一下新浪2008的年頁面
③div+css就要通吃嗎?
在合適的時(shí)候,用合適的標(biāo)簽
④表格就不能使用了嗎?
不要太絕對,在二維數(shù)據(jù)展示的時(shí)候,還是合適用的
6.負(fù)責(zé)行為的JavaScript
①合法性驗(yàn)證,表單驗(yàn)證
②前后端數(shù)據(jù)交互,Ajax
③界面處理與動(dòng)畫實(shí)現(xiàn),界面效果
④環(huán)境檢測與系統(tǒng)API調(diào)用
⑤JavaScript優(yōu)化課程放在《編寫高效的JS以及前端的魔鬼細(xì)節(jié)》這一節(jié)
?
?
?
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/yhdsir/p/4940479.html
總結(jié)
以上是生活随笔為你收集整理的web 全栈 学习 2 一个好的页面是如何炼成的的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 知乎上不够伪善的内容
- 下一篇: 管理员账户遇到“操作需要管理员权限”解决