整个前端开发的工作流程
- 产品经理提出项目需求
- UI出设计稿
- 前端人员负责开发静态页面(跟前端同步的后台人员在准备数据)
- 前后台的交互
- 测试
- 产品上线(后期项目维护)
互联网原理
- 当用户在浏览器输入网址的时候，就会发送到对应的服务器，请求该网址对应的网页信息
- 服务器会把该网址对应的网页资源，都下载到你电脑的临时文件夹
- 临时文件夹中的资源，通过浏览器显示出来(所以，我们第二次请求网站的时候，速度会快很多)
元素
- 行内元素：一行中有n多个行内元素，行内元素不能设置宽和高
- 块元素：一个块元素，独自占一行；
- 行内块元素：一行中可以有多个行内块元素，但是可以设置宽和高
html骨架结构
html更多解读
列表
<ul>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
</ol>
<dl>
<dt>表头</dt>
<dd>详情介绍</dd>
</dl>
表单
- 表单用<from action="提交到哪里"></from>
- 输入文本框
<input type="text" placeholder="默认提示"/>
- 输入密码
<input type="password" placeholder="默认提示"/>
- 单选按钮：单选按钮组，一定要加上name，否则无法实现单选效果；
<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女
<select>
<option name="city" value="bj">北京</option>
<option name="city" value="sh">上海</option>
<option name="city" value="sz">深圳</option>
<select>
- name和value主要用于前端向后台提交数据；
- id：
- 设置样式(不建议)
- 在JS阶段，用来获取元素
- 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的步骤：
- 到官网上去取图片（以京东为例）：
- https://www.jd.com/favicon.ico
- 把以上图片另存为，存到电脑中
- 注意：把icon图标放到文件夹的"根目录"；
- 在html页面中加入：
<link rel="icon" href="favicon2.ico" type="image/x-icon"／>
一个完整的页面由三部分构成：
- html：超文本标记语言
- css:层叠样式表
- js:轻量级的脚本语言；交互指的是两个地方（行为）
- 前端自己在页面上写的"动效"
- 前后台的"数据交互"
结构，样式，和行为三者相结合
css的引入方式
- 嵌入式；(内嵌式)
<style>
body{
height:100%;
background-color: red;
}
</style>
- 行内样式
<body style="height:100%; background: #333333">
- 外链式（真正的开发，用的都是外链）
<link rel="stylesheet" href="style.css"/>
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是用来获取元素
<div class="div1 div2 div3" id="div1"></div>
- 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+
开发常用的浏览器
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
行内元素和块级元素
最基本的开发，首先必须创建的项目结构
- images文件夹：放切好的图片
- css文件夹：放置css文件：index.css
- index.html文件
关于继承
- 宽度继承：如果没有父级，块元素的宽度默认跟可视区一样宽；如果有父级的情况下，默认跟父级宽度一样宽(宽度可以继承，但高度无法继承;)
- font可以继承
- color可以继承：当遇到a标签的时候， color无效；
- line-height可以继承
当文本超度固定宽度的处理方法：
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
区分伪类和伪元素
- 伪元素：用:和::都可以，现在建议用::
- 伪类：给当前选择器添加动效，只能用:
