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