第一章：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)容，希望文章能夠幫你解決所遇到的問題。

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