第一周：了解前端开发

什么是WEB

WEB：

web:本意是蜘蛛网，现在就是互联网中浏览器打开的网页

web应用：应用在web上的应用

web应用原理

（浏览器内核 ： 解析,渲染页面）常见的浏览器内核：

 - IE             trident  被废了  webkit
 - firefox        gecko
 - chrome         webkit  /blink
 - safari         webkit
 - opera          presto   被废了   用blink

b/s,c/s模式应用

• b/s: browser 服务器 /server 让用户访问的机器
  b/s：方便，不需要安装下载，跨平台，操作都是通过服务器远程处理业务
• c/s: client 客户端 /server 服务器
  c/s：考虑跨平台的问题，大部分处理可以在本地处理

web开发流程

• 需求分析 产品经理 售前开发工程师
  网站类型分析
  针对用户群体
  市场价值及竞品分析
  主要的业务功能有哪些
  整体网站的流程是怎样的
  草图、原型图 设计 UI工程师
• 编码（前端 后台）
• 测试
• 上线 实施工程师 安装部署 培训
• 维护 开发 运维

图片

布局素材

png图 psd图 ps作出的图

关于图片

 					png（8,24）							jpg									gif
大小 				大						    		一般    						    很小
质量      			高（无损压缩，不失真）      		    一般（有损失 失真）                   低
透明度    		    支持透明的                    		不支持透明             			    支持透明
用途     		    logo 常年不换的小图 透明的     		产品图 banner  					    长换       小动图
png   8               24
      颜色色值少      颜色色值多
      质量一般        质量大
      大小一般        大小大
      支持全透明      支持全透明或者半透明

基本HTML

html文档

文档类型:html4、XHTML（过渡性 严格型） html5 严格型

文档声明: html5文档类型 （简洁）

没有文档头：会转化成浏览器的怪异模式，向下开启了一种兼容模式的渲染

html标签

标签的特点：天生透明的

html Hypertext Markup Language 超文本链接标示语言

html 标签 是整个网页的根标签 只有一对

head 头部标签

meta charset=“UTF-8” 编码字符集(一个中文占几个字节 utf-8 3    gb2312 2)

title 窗口标签显示的文字

body 页面的内容

好用的标签属性

h1
制作logo 增加seo优化 放图片、放文字

img alt
图片挂了以后显示的内容

a href

• 锚点 定的位置加id或者给name添加名字#id
• 超链接
• 打开本地文件 绝对路径 相对路径 还可以和锚点结合
• 打电话 tel:xxxxxxxxx
• 发邮件 mailto:xxxxxxxx
• 协议限定符 可以写js javascript:js代码
• 和ifream配合 ( a target 写 ifream上name属性的值)
• 完全空白页面 about:blank

a target目标

• _blank 新的窗口
• _self 本窗口 默认
• _parent 父窗口(没用)
• _top 顶级窗口(没用)

ifream标签

• 框架 frameset框架集被废除了
• scrolling="是否出现滚动条 yes no auto(默认 自动) "
• 作用 1、a和ifream配合 做后台管理系统 2、做广告
  缺点：不利于seo 不利于搜索

table的完整写法

    <caption>表名</caption>			    注意*：thead，tbody，tfoot必须同时出现
<thead><tr><th></th></tr></thead>	    如果tbody里面内容过多，建议放在tfoot后面
<tbody><tr><td></td></tr></tbody>
<tfoot><tr><td></td></tr></tfoot>

form表单 最大的容器 ,在提交表单时候使用

action  提交的地址	
method  请求方式（get默认情况、post）
get和post区别	1、get不安全，post相对安全

小知识

BFC

块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，
该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
BFC满足下列条件之一：

• float的值不为none
• overflow的值不为visible
• display的值为inline-block、table-cell、table-caption
• position的值为absolute或fixed

分享一个好用的表单插件网址

http://validform.club/document.html