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以及前端的魔鬼细节》这一节
web 全栈 学习 2 一个好的页面是如何炼成的的更多相关文章
- web 全栈 学习 1 工程师成长思路图
第一部分: 技术的三个阶段 实现 ---> 借鉴 ---> 优化 实现:为了实现功能,不考虑可读性.借鉴:阅读开源代码,开源程序,学到编程思想.优化:可读性,可执行. 阶段一:实现多做事, ...
- web前端全栈学习之路
web前端全栈学习之路 --- 陆续更新中 一.HTML相关 1.HTML常用标签:http://www.cnblogs.com/wyb666/p/8733699.html 2.HTML5基础: 3. ...
- 《web全栈工程师的自我修养》读书笔记
有幸读了yuguo<web全栈工程师的自我修养>,颇有收获,故在此对读到的内容加以整理,方便指导,同时再回顾一遍书中的内容. 概览 整本书叙述的是作者的成长经历,通过经验的分享,给新人或者 ...
- 处女作《Web全栈开发进阶之路》出版了!
书中源码下载地址:https://github.com/qinggee/WebAdvanced 01. 当初决定写博客的原因非常的纯洁:只要每个月写上 4 篇以上博客,月底的绩效奖金就多 500 块. ...
- Web全栈工程师修养
全栈工程师现在是个很热的话题,如何定义全栈工程师?在著名的问答网站Quora上有人提出了这个问题,其中一个获得了高票的回答是: 全栈工程师是指,一个能处理数据库.服务器.系统工程和客户端的所有工作的工 ...
- Java全栈学习路线、学习资源和面试题一条龙
肝了一个月,终于把Java学习路线.面试题资源和电子书资源都整理好了. Java 从基础到微服务的学习路线,其中还包括科班知识.学习建议.后续的学习引导和相应的学习资源(视频.书籍.网站),还整理了J ...
- 从 rails 窥探 web 全栈开发(零)
从 rails 窥探 web 全栈开发(零) 本文将讲述在学习之前几个必须要知道的概念,这些词汇在 rails 中都会出现. 本文前置条件:安装好 Ruby. 从 rails 窥探 web 全栈开发( ...
- 基于LeanCloud云引擎的Web全栈方案
LeanEngine-Full-Stack The FULL STACK DEVELOPER 复杂的项目, 协作分工, 自动化流程,代码组织结构,框架选择,国际化方案等 Generator 或者See ...
- 《web全栈工程师的自我修养》阅读笔记
在买之前以为这本书是教你怎么去做一个web全栈工程师,以及介绍需要掌握的哪些技术的书,然而看的过程中才发现,是一本方法论的书.读起来的感觉有点像红衣教主的<我的互联网方法论>,以一些自己的 ...
随机推荐
- RecyclerView的滚动事件分析
列表的滚动一般分为两种: 手指按下 -> 手指拖拽列表移动 -> 手指停止拖拽 -> 抬起手指 手指按下 -> 手指快速拖拽后抬起手指 -> 列表继续滚动 -> 停 ...
- Ubuntu下安装JDK图文解析
我们在64位的Ubuntu中安装JDK,选择的是jdk1.6.0_32版本号.安装文件名称为jdk-6u32-linux-x64.bin(这个是64位系统的),假设是32位系统的还须要去官网下载32位 ...
- CocoaAsyncSocket 文档1:Socket简单介绍
前言 CocoaAsyncSocket是 IOS下广泛应用的Socket三方库,网上相关样例数不胜数.这里我就不直接上代码,本文由B9班的真高兴发表于CSDN博客.另辟一条思路:翻译SocketAsy ...
- 19:ReverseNumber数字颠倒
题目描述 描述:输入一个整数,将这个整数以字符串的形式逆序输出 程序不考虑负数的情况,若数字含有0,则逆序形式也含有0,如输入为100,则输出为001 输入描述:输入一个int整数 输出描述:将这个整 ...
- uva 11404 dp
UVA 11404 - Palindromic Subsequence 求给定字符串的最长回文子序列,长度一样的输出字典序最小的. 对于 [l, r] 区间的最长回文串.他可能是[l+1, r] 和[ ...
- php nginx超时出错
执行PHP操作大文件insert mysql数据库时,出现这个错误提示 The page you are looking for is temporarily unavailable.Please t ...
- mongo的时间类型,erlang中对其的处理
需求:要想在一个调度中,从mongo中查出大于一个时间戳的所有的数据总和. 这个需求很简单,一个是scheduler,还有另一个就是查出来大于某个时间戳的总和,比如大于每天0点时间点的和. 需要注意的 ...
- git连接到github(SSH无密码登陆)
[0]README 0.1)本文旨在尝试在linux环境下免密码连接到github,并进行push + pull projects in github by git commands. 0.1) 对s ...
- 【转】win7 任务计划 任务映像已损坏或篡改(异常来自HRESULT:0x80041321)
请这样操作:1. 以管理员身份运行命令提示符并执行命令chcp 437schtasks /query /v | find /i "ERROR: Task cannot be loaded:& ...
- ES6之路
从工作到现在,虽然是PHP出身,一直都和JS形影不离,从JQ和原生处理页面,到后来被angular1的MVVM模式惊艳到,再到弃angular转战vue,到现在使用react,一路走来,跳坑无数,现在 ...