整个前端开发的工作流程

1. 产品经理提出项目需求
2. UI出设计稿
3. 前端人员负责开发静态页面(跟前端同步的后台人员在准备数据)
4. 前后台的交互
5. 测试
6. 产品上线(后期项目维护)

互联网原理

1. 当用户在浏览器输入网址的时候，就会发送到对应的服务器，请求该网址对应的网页信息
2. 服务器会把该网址对应的网页资源，都下载到你电脑的临时文件夹
3. 临时文件夹中的资源，通过浏览器显示出来(所以，我们第二次请求网站的时候，速度会快很多)

元素

• 行内元素：一行中有n多个行内元素，行内元素不能设置宽和高
• 块元素：一个块元素，独自占一行；
• 行内块元素：一行中可以有多个行内块元素，但是可以设置宽和高

html骨架结构

• !DOCTYPE..文档声明头(html5,html4.01,XHTML)
• 在html4.01和XHTML中各有3个小规范
  1. strict 严谨的
  2. transitional 普通的
  3. frameset 框架
• html：超文本标记语言；里面用的都是"标签对儿"
  1. head
  • meta（charset:UTF-8,GB2312）
  • <meta name="description" content="要描述的内容"/>
  • <meta name="keywords" content="关键字，关键词"/>
    (以上两个meta都是为了SEO优化)
  • <title>页面的标题</title>
  1. body
  • 标题<h1></h1><h2></h2>
  • 段落 p:虽然p是块元素，但是他里面放的也是图片，文字；
  • span:里面用来放文本：图片，文字；
  • a链接<a href="要跳往的地址"></a>
  • 图片<img src="相对地址/绝对地址"
• css：写在 <style></style> 里面
  • 样式的基本语法：
    选择器(div){
    key:value
    }

  p{    height:40px;    line-height:40px;    background-color:red;}

  • 选择器：
    1. 标签选择器：div,h,p,a,img,span
    2. class选择器:.xinxi
       (千万不要用汉字和数字开头做为class名，一定要用英文)

html更多解读

• html只考虑标签嵌套，跟tab和空格无关，无数个空格，也只算作一个
• 图片标签[图片上传失败...(image-fd7aaf-1518537900016)]
  • 相对路径：以当前页面为出发点查找的；(./ 或 不写,找到父级../)
  • 绝对路径：都是以http开头的；例如：
  • 图片标签上有两个常用属性，src属性：引入图片地址; alt标签：图片无法正常加载时，用来替代的文字；(alt也可以省略)
• a链接常用的属性
  1. href:'要跳往的地址',href的作用
  • 可以填写绝对路径，跳到直到的网页
  • 可以写#：1）不确定地址的时候 2)简单的回到顶部效果
  • 利用锚点进行页面切换
  1. title:鼠标移上时的提示
  2. target:打开方式(默认的_self当前页面打开; _blank新页面打开)
  3. 这些属性中，title和target都可以省略；
• a链接的锚点使用
  1. 本页面各个模块之间的相互跳转
  2 实现不同页面之间，不同模块的相互跳转
  <a href="detail.html#detail1"></a>

列表

• 无序列表:无序列表中的li也是容器；

• 有序列表

• 定义列表：dl,dt,dd都是容器

     
    
      
       表头
      
    
      
       详情介绍
      
     

表单

• 表单用<from action="提交到哪里"></from>
• 输入文本框 <input type="text" placeholder="默认提示"/>
• 输入密码 <input type="password" placeholder="默认提示"/>
• 单选按钮：单选按钮组，一定要加上name，否则无法实现单选效果；

男女

• 多选框 <input type="checkbox" checked/>

• 下拉单

    北京    上海    深圳

• name和value主要用于前端向后台提交数据；
• id：
  1. 设置样式(不建议)
  2. 在JS阶段，用来获取元素
  3. id配合a链接，进行锚点设置；
• 留言框：<textarea name="" value="" cols="" rows=""></textarea>

按钮

• 普通按钮 type=button
• 提交按钮 type=submit
• 重置按钮 type=reset

选择器

• 标签选择器：div h1~h6 p span a img ul li ol dl dt dd input select

添加一个小icon的步骤：

• 到官网上去取图片（以京东为例）：
  2. 把以上图片另存为，存到电脑中
  3. 注意：把icon图标放到文件夹的"根目录"；
  4. 在html页面中加入：<link rel="icon" href="favicon2.ico" type="image/x-icon"／>

一个完整的页面由三部分构成：

• html：超文本标记语言
  • 通过语义化标签，搭建页面"结构"
• css:层叠样式表
  • 负责页面"样式"，美化页面的
• js:轻量级的脚本语言；交互指的是两个地方（行为）
  • 前端自己在页面上写的"动效"
  • 前后台的"数据交互"
    结构，样式，和行为三者相结合

css的引入方式

1. 嵌入式；(内嵌式)

1. 行内样式

1. 外链式（真正的开发，用的都是外链）

css的优先级

• 行内>内嵌>外链

css常见属性和样式

• 当设置错误的时候，在chrome的控制台，会有黄色的叹号，进行提示
• color：颜色值； 颜色有三种表示方法
  快捷键：c+tab
  • 用英文：red
  • rgb(255,0,0)
  • #fff
• font-size:字体大小
  • 快捷键：fsz30->font-size:30px
    font:400 14px/28px "宋体";
• background:添加背景
  图片默认是横向重复和纵向重复
  • 位置：
    • 横向位置：left center right
    • 纵向位置：top center bottom
  • 综合写法：background: url("images/bg2.png") no-repeat left center red;
    • background-image:url("图片地址")
    • background-repeat:no-repeat; /repeat-x;/repeat-y
    • background-position:0 0
    • background-color:red
• 字体是否倾斜
  • font-style:italic 倾斜／ normal 正常
• 下划线和删除线
  • text-decoration: line-through; 删除线
  • text-decoration: none; 去除下划线
  • text-decoration: underline;添加下划线

css中的选择器：

• 1.标签选择器：div p ul li dt dd em i u del strong b input label from table
  • 缺点：只能进行共性的操作，无法个性操作
• 2.class选择器
• 3.id：
  • .class名,同一个页面能有无数个相同的class名
  • #id名，同一个页面只能有一个ID名；（ID名是不能重复的）
  • 在真正的开发过程中，class是用来设置样式的，id是用来获取元素

• 4.后代选择器：div p(把div容器下，子子孙孙的p元素都选择上了)
• 5.子选择器：div > p(选择div容器下的儿子)；兼容IE7+
• 6.交集选择器: div.div1
• 7.并集选择器：div,p
• 8.通配符*：代表所有的元素
• 9.序选择器：兼容IE8+
  • div > p:first-child
  • div > p:last-child
• 10.下一个兄弟选择器 ul li+li{} 兼容IE7+

开发常用的浏览器

• chrome
• IE7~11
• firefox

CSS的继承性和层叠性

• 以font开头的属性都能够继承；line-height
• color可以继承
• text开头的也可以继承，比如text-align

css权重

• !important权重无穷大；（少用为好）
• id的权重大于class的权重

css盒子模型

• css盒子模型由5部分：
  • 内容的宽高+padding+border+margin
• 单行文本的居中：height = line-height
• 多行文本的居中，padding和line-height
• padding：
  • padding是内边距

  • padding的颜色和内容的颜色一致；background-color填充的是border以内的颜色

  • padding是复合值

    padding:30px; ->pl30; pt30;pr30;pb30
    padding:20px 30px; ->上下为20px 左右30px
    padding:10px 20px 30px; -> 上10px 左右20px 下30px
    padding:10px 20px 30px 10px; 上 右 下 左

    如果现设置padding:30px

    再设置padding-left:10px
    请问最后的值各是多少？
    左10px; 其他都是30px
• margin：外边框
• border:
  • border:1px solid #000;
  • border-width
  • border-style：solid（实体）,dashed（虚线）,dotted（点）
  • border-color

行内元素和块级元素

• p标签虽然是文本标签，但是它可以当容器来使用，p标签内一定不能放div; p段落也是块元素，他独占一行
• 文本元素：p span a i em u b strong img
• 容器级：div li dt dd h级（不建议）
• 除了p，所有的文本元素，都是行内元素
• 所有容器级别的元素，都是块元素
• 块和行内元素的相互转化
  • display：inline; //行内
  • display:inline-block;//行内块
  • display：block; //块
• 关于定位：大部分情况，建议的是:父相子绝（父亲：相对定位，儿子：绝对定位）
• 关于脱离文档流的方法
  • 浮动 float:left; float:right;
  • 绝对定位 position:absolute;
  • 固定定位 position:fixed;
  • 重点：1）父相子绝 2）行内元素一点脱离文档流，就可以设置宽高了；
  • 注意：行内元素，一旦脱离文档流，虽然能设置宽高，但是，如果不设置宽的话，会默认跟内容一样宽；而块级元素，如果不设置宽度的话，默认跟父级一样块，没有父级的话，默认跟屏幕一样宽
• 清除浮动
  • 固定高度height:xxxpx;
    缺点：如果作为产品列表的容器展示，我们无法知道容器的具体高度
  • overflow:hidden
    1. 溢出隐藏
    2. 清除浮动
       缺点：如果父容器比较小，子容器比较大；父容器如果通过overflow:hidden来清除浮动的话，子容器就看不到了
  • clear:both
    缺点：可以解决浮动引起的文档流错乱问题，但是上面浮动元素的父容器该没有高度还没有高度
  • 伪类清除浮动

  ul::after{    display: block;    height:0;    content: '';    clear: both;}

• 透明度处理
  • rgba() 背景透明，文字不透明；
  • opacity:0 背景透明，文字也透明；

  opacity:0.1;/*不兼容IE7浏览器*/filter:alpha(opacity=10);

最基本的开发，首先必须创建的项目结构

• images文件夹：放切好的图片
• css文件夹：放置css文件：index.css
• index.html文件

关于继承

• 宽度继承：如果没有父级，块元素的宽度默认跟可视区一样宽；如果有父级的情况下，默认跟父级宽度一样宽(宽度可以继承，但高度无法继承;)
• font可以继承
• color可以继承：当遇到a标签的时候， color无效；
• line-height可以继承

当文本超度固定宽度的处理方法：

• 单行文本出超固定宽度出现省略号的写法：

white-space:nowrap;overflow:hidden;text-overflow:ellipsis

• 英文不折行的问题处理： word-wrap:break-word;

• 出现滚动条的写法overflow-y:scroll;

区分伪类和伪元素

• 伪元素：用:和::都可以，现在建议用::
• 伪类：给当前选择器添加动效，只能用: