第一章：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 一个好的页面是如何炼成的的更多相关文章

  1. web 全栈 学习 1 工程师成长思路图

    第一部分: 技术的三个阶段 实现 ---> 借鉴 ---> 优化 实现:为了实现功能,不考虑可读性.借鉴:阅读开源代码,开源程序,学到编程思想.优化:可读性,可执行. 阶段一:实现多做事, ...

  2. web前端全栈学习之路

    web前端全栈学习之路 --- 陆续更新中 一.HTML相关 1.HTML常用标签:http://www.cnblogs.com/wyb666/p/8733699.html 2.HTML5基础: 3. ...

  3. 《web全栈工程师的自我修养》读书笔记

    有幸读了yuguo<web全栈工程师的自我修养>,颇有收获,故在此对读到的内容加以整理,方便指导,同时再回顾一遍书中的内容. 概览 整本书叙述的是作者的成长经历,通过经验的分享,给新人或者 ...

  4. 处女作《Web全栈开发进阶之路》出版了！

    书中源码下载地址:https://github.com/qinggee/WebAdvanced 01. 当初决定写博客的原因非常的纯洁:只要每个月写上 4 篇以上博客,月底的绩效奖金就多 500 块. ...

  5. Web全栈工程师修养

    全栈工程师现在是个很热的话题,如何定义全栈工程师?在著名的问答网站Quora上有人提出了这个问题,其中一个获得了高票的回答是: 全栈工程师是指,一个能处理数据库.服务器.系统工程和客户端的所有工作的工 ...

  6. Java全栈学习路线、学习资源和面试题一条龙

    肝了一个月,终于把Java学习路线.面试题资源和电子书资源都整理好了. Java 从基础到微服务的学习路线,其中还包括科班知识.学习建议.后续的学习引导和相应的学习资源(视频.书籍.网站),还整理了J ...

  7. 从 rails 窥探 web 全栈开发（零）

    从 rails 窥探 web 全栈开发(零) 本文将讲述在学习之前几个必须要知道的概念,这些词汇在 rails 中都会出现. 本文前置条件:安装好 Ruby. 从 rails 窥探 web 全栈开发( ...

  8. 基于LeanCloud云引擎的Web全栈方案

    LeanEngine-Full-Stack The FULL STACK DEVELOPER 复杂的项目, 协作分工, 自动化流程,代码组织结构,框架选择,国际化方案等 Generator 或者See ...

  9. 《web全栈工程师的自我修养》阅读笔记

    在买之前以为这本书是教你怎么去做一个web全栈工程师,以及介绍需要掌握的哪些技术的书,然而看的过程中才发现,是一本方法论的书.读起来的感觉有点像红衣教主的<我的互联网方法论>,以一些自己的 ...

随机推荐

  1. 简单便捷的纯PHP网盘程序 Veno File Manager 2.6.3(VFM2)

    体验过很多国外网盘程序,例如:Owncloud.Bedrive.YetiShare.XFilesharing.uCloud.Cloudshare 等等,诸如此类,VFM2与这些臃肿的商用或非商用来的程 ...

  2. 通过Java的Domain类构建ElasticSearch的mapping

    通过给定一个Java的class类自行创建ElasticSearch的mapping Order的domain类 public class Order { public String system_i ...

  3. es6 - 导入导出

    今天用node纠结了半天,明明是正确的语法,一直报错,原来node和chrome并不支持es6语法.... 1. npm install package.json { "name" ...

  4. 网站添加ico图标

    打开某一个网页会在浏览器的标签栏处显示该网页的标题和图标,当网页被添加到收藏夹或者书签中时也会出现网页的图标,怎么在网页title左边显示网页的logo图标呢? 方法一(被动式): 制作一个ico格式 ...

  5. 【Python】ModuleNotFoundError: No module named 'matplotlib.pyplot'

    安装好matplotlib后,很激动的建立了一个文件夹matplotlib,并且在其下面建立了,mpl_squraes.py文件,代码编辑完成以后,点击运行,报错如下: 仔细分析了之后,发现是文件夹名 ...

  6. 为什么我们有时不用配置java环境变量？

    答案都在这个图中 完毕,如果还不懂请自行查询注册表相关内容学习.

  7. 分享下多年积累的对JAVA程序员成长之路的总结

    http://blog.csdn.net/zhongzelin/article/details/8643269我也搞了几年JAVA了,由于一向懒惰,没有成为大牛,只是一普通程序猿,不爱玩社交网站,不爱 ...

  8. 给定一个递增序列，a1 <a2 <...<an 。定义这个序列的最大间隔为d=max{ai+1 - ai }(1≤i<n),现在要从a2 ,a3 ..an-1 中删除一个元素。问剩余序列的最大间隔最小是多少？

    // ConsoleApplication5.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<vector> ...

  9. 【demo练习四】：WPF用户控件案例

    首先,新建vs中“用户控件(WPF)”,右键项目名 =>"添加"按钮 => 选择“新建项”. 然后选择“用户控件(WPF)” => 起名字 => 点击“添加 ...

  10. C#游戏开发高速新手教程Unity5.5教程

    C#游戏开发高速新手教程Unity5.5教程 试读文档下载地址:http://pan.baidu.com/s/1slwBHoD C#是微软公布的高级程序设计语言.这门语言和C语言一样,已经成为了大学计 ...