1 前端课程： 2 3 1.后面要用到 4 2.把前面学习的一些内容（数据）（静态数据） 展示到前端，给用户看 浏览器 5 3.增加交互 6 4.增加用户体验 7 8 前端工程师主要工作： 9 1.html5页面 web移动端页面 10 2.跟后端交互（数据） 11 3.游戏的h5 12 4.切图（ui干掉了） 13 5.nodejs（后端语言） 14 课程安排： 15 前端三大语言： 16 1.HTML 17 2.CSS 18 3.JS 19 20 4.jQuery 一个模块就是一个py文件 一个js文件就是一个模块 jquery.js 21 5.Bootstrap HTML+CSS+JS +JQUERY 22 23 24 25 前端自行补充内容： 26 1.响应式 27 2.移动端 28 3.nodejs 29 4.前端三大框架： 30 1.react 2.angular 3.vue 31 32 Django web框架 33 34 35 今日内容： 36 html标签 37 css 38 结构：html。表示：css。行为：Javascript。 39 40 41 **************html标签分类******************************** 42 块级标签：==>blockdiv p ul ol dl 43 （1）独占一行 44 （2）可以设置宽高 45 （3）如果不设置宽，宽度是浏览器的100% 46 47 行内标签: a span ==》inline 48 (1)在一行内显示 49 （2）不能设置宽 高 50 （3）如果不设置宽高，默认是内容的宽高 51 52 行内块标签：inline-block 53 （1）在一行内显示 54 （2）可以设置宽高 55 56 57 display: inline|block|none|inline-block； 58 59 60 从学习p的第一天开始，就要死死记住：p标签是一个文本级标签，p里面只能放文字、图片、表单元素。 61 62 其他的一律不能放。 63 64 要想实现并排元素显示： 必须要浮动，但是浮动会带来问题，所以记得要浮动必须要清除浮动 65 66 67 68 小马哥 69 山东潍坊人 70 四年的时间（ios、web） 71 72 73 上午内容回顾： 74 html中的一堆标签： 75 76 行内标签：display:inline 77 a:超链接 href：连接资源地址 title:所有的标签中都有title属性 78 span: 小的区域 79 i： 80 em: 81 strong: 82 83 84 (1)在一行内显示 85 (2)不能设置宽高 86 (3)它的宽和高是内容的宽高 87 88 行内块标签：display:inline-block 89 img 、input 90 (1)在一行内显示 91 (2)可以设置宽高 92 93 块级标签： 94 div p 95 (1)独占一行 96 (2)可以设置宽高 97 (3)如果不设置宽度，默认是父盒子的100%宽 98 99 100 html+css 没有逻辑可言 101 css就是带你们挖坑 填坑 跳进坑（开个玩笑啦） 102 103 （1）下午内容介绍： 104 ul:无序列表 它的孩子只能li。还有ol dl。dl中只能是dd和dt 105 106 107 108 table border='1' 更细的边框线 109 tr 行 110 td 单元格的数据 111 112 form表单标签 113 action: 提交的地址 114 method：提交的方式 115 116 表单控件： 117 input 118 属性：type 119 text:普通的文本 120 password：密码的文本 121 radio:单选框 122 checkbox:多选框 123 file：上传文件 124 select: 下拉列表 125 option：下拉列表的每一个选项 126 textarea：多行文本输入框 rows:行数 cols:列数 127 128 所有的表单控件中都有name属性，这个name属性与服务端有很大的联系。 129 130 131 前端工具： 132 自行百度脑补 133 gulp 134 webpack 135 136 css知识点介绍： 137 138 1.css的三种引入方式 139 行内样式 140 内接样式 141 外接样式 142 链接式 143 导入式 144 145 2.基础选择器 146 类选择器 147 id选择器 148 标签选择器 149 通配符选择器 150 3.高级选择器 151 后代选择器 152 子代选择器 153 组合选择器 154 交集选择器 155 4.选择器补充 156 a标签的伪类选择器 157 伪元素选择器（在博客上有，大家先看一下） 158 5.选择器的继承性和层叠性 159 160 6.选择器权重问题处理 161 162 7.盒模型和盒模型的计算 163 164 8.讲了一点浮动的实现，但是有坑，下周详细讲这块内容 165 166 167 168 今日作业： 169 1.百度注册页面实现 170 2.小米顶部栏实现 171 172 173 预习： 174 http://www.cnblogs.com/majj/p/9039830.html 浮动
1 回顾： 2 html：语义化的标签 3 div：块级标签 将页面进行分割 4 5 span：行内标签 6 img 7 8 ul ol dl 它的孩子只能是li 9 10 a：超链接标签 href：链接地址 路径一定要写相对的 ./ 11 12 table 13 form ：与后端进行交互常用 14 input 15 思维导图！！！ 16 p：文本级标签 p a span i em 只能放文本、图片、表单元素 17 排版标签：div、ul、ol、li 18 19 行内标签：文本级标签中除了p，其它标签都是行内标签（行内块标签） 20 块级标签：所有的排版标签都是块级标签，再加上p 21 *****************display、浮动、定位、z-index 22 行内标签：display：inline; .点是行内标签 23 （1）在一行内显示 24 （2）不能设置宽高 25 （3）它的宽和高是内容的宽高 26 块级标签：display:block; 27 （1）独占一行 28 （2）可以设置宽高 29 （3）它的宽是父盒子的宽度100%； 30 行内块标签：img input display:inline-block; 31 （1）在一行内显示 32 （2）可以设置宽高 33 通过display属性对标签进行转化 none|inline-block|block 34 display：none 当前盒子不显示（隐藏） 35 36 37 css选择器： 38 基础选择器： 39 标签选择器：选择标签的‘共性’，而不是特性 div{}、ul{}、ol{}、form{} 40 类选择器：.box{} 41 id选择器：#box{} 只能选择特性，主要是为了js 42 *通配符选择器：重置样式 43 44 高级选择器： 45 后代选择器（儿子、孙子...） 46 div p{} 47 子代选择器（儿子） 48 div>p{} 49 组合选择器： 50 div，ul，dl，form{} 51 交集选择器：第一个选择器是标签选择器，第二个选择器是类选择器 52 两个标签中间的一部分 53 form input.active{ 54 200px; 55 } //012 id 类 标签 56 form input{} //002 57 伪类选择器：‘爱恨准则’ 58 a:hover{} 59 伪元素选择器：p:first-letter{} p:before{content:'lijie';} before、after里一定要加content 60 p:after{content:'.'; }------解决浮动带来的问题 61 p::after{ 62 /*解决浮动带来的问题*/ 63 content:''; 64 display: block; 65 /* 100px; 66 height: 100px; 67 background-color: red;*/ 68 visibility: hidden; 69 height: 0; 70 } 71 72 权重问题： 继承性 层叠性 73 数数的问题 74 75 行内的样式>内接样式>外接 76 权重问题比较：id>类>标签 （100>010>001） 77 继承来的属性权重为0，如果权重都为0，谁描述的近谁优先 78 # 总结： 79 # 1.先看标签元素有没有被选中，如果选中了，就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上 80 # 2.如果没有被选中标签元素，权重为0。 81 # 如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性 82 83 继承： 84 例子 line-height=100px; '文本的行高' 85 置灰的都不是继承来的 86 87 记住：有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。 88 但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。 89 90 盒模型：标准文档流 91 margin：调整兄弟之间的距离 92 padding：调整父子标签之间的位置，注意减width或height 93 94 content（width,height）--padding（内边距）--border（边框）---margin 95 #ajax技术：预习
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css" media="screen"> 6 *{ 7 padding:0; 8 margin: 0; 9 } 10 div{ 11 200px; 12 height: 100px; 13 background-color: green; 14 color: red; 15 font-size: 20px; 16 text-align: center; 17 /*文本的行高*/ 18 line-height: 100px; 19 } 20 /*p{ 21 background-color: yellow; 22 }*/ 23 </style> 24 </head> 25 <body> 26 <div> 27 <p>德国</p> 28 </div> 29 30 </body> 31 </html>
1 作业讲解： 2 1.注意结构 3 css 4 font 5 img 6 js 7 mi_index 8 2.加注释，命名规范 9 3.*重置样式 10 4.搜索内容位置，加padding 11 5.边框：border：none border：1px solid red;
1 1.坑一：margin垂直方向塌陷问题： 需要只设置一个盒子 2 当设置第一个盒子为margin-bottom:50px; 3 第二个盒子为margin-top:100px;那么小的margin会掉到大的magin中，这就是margin塌陷 4 5 水平方向上不会产生塌陷问题 6 ‘奇技淫巧’ 7 8 2.标准文档流 三个特性;空白折叠；高矮不齐、底边对齐；自动换行，一行写不满换行写--记住！ 9 3.脱离标准文档流：浮动、绝对定位、固定定位-------记住！ 10 4.浮动：--听课！！12:10-12：30 11 浮动的现象：----背过！！！ 12 1.脱标：脱标的元素不在标准流下占位置 13 浏览器认为第一个盒子不是标准文档流的盒子，认为第二个盒子为标准文档流的盒子 14 2.浮动的元素互相贴靠 15 3.浮动的元素字围效果（一般使用是字围绕图片） 16 第一个元素浮动，第二个元素不浮动，那么第二个元素的文字会围绕着第一个浮动元素显示 17 看例子 18 19 4.凡是脱标（浮动、绝对定位、固定定位）的元素，不区分行内标签还是块标签，宽高可以任意设置 20 浮动永远不是一个盒子在浮动，要浮动一起浮动 21 浮动带来的好处： 22 1.实现元素并排 23 2.可以按照自己的规则走（设置盒模型的宽和高） 24 5.浮动带来的问题：父盒子撑不起来了 25 加入父盒子， margin: 0 auto;设置盒子水平居中 26 6.浮动解决： 27 1.**给父盒子设置固定高度 百年不变导航栏 28 2.内墙法：给最后一个浮动的元素添加一个块级标签，并且该标签设置属性 clear:both; 29 例子 设置一个空的div BFC 30 3.*****伪元素清除法：例子clearfix--常用背过 5条语句 31 .clearfix:after { 32 content: "."; 33 display: block; 34 height: 0; 35 visibility: hidden; 36 clear: both 37 } 38 39 4.**overflow:hidden 40 7.overflow: 41 visible默认值 hidden（超出部分隐藏） auto scroll inherit继承 42 visible 默认值。内容不会被修剪，会呈现在元素框之外。 43 hidden 内容会被修剪，并且其余内容是不可见的。 44 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 45 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 46 inherit 规定应该从父元素继承 overflow 属性的值。 47 48 数据驱动视图（界面）的展示 先确定目的，再干活 49 8.浮动元素margin塌陷不会出现任何问题 50 51 标准流下的标签，兄弟之间使用margin调整位置，父子之间使用padding调整子标签的位置（小心盒模型的计算） 52 脱标的元素，margin和padding可以任意使用 53 margin: 0 auto;设置盒子水平居中 浮动的盒子margin: 0 auto;不起任何作用 54 使用margin：0 auto;注意点： 55 1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center; 56 57 2.只有标准流下的盒子 才能使用margin:0 auto; 58 59 当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了 60 61 3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;
1 文本属性： 2 text-align：justify 两端对齐，只对英文字母有效，中文无效 3 text-indent：em 相对字体，根据父盒子的字体大小，来设置的单位 4 rem：移动端的单位，在html中设置font-size后，子盒子的大小也能进行缩放 5 css单位选择： 6 px: 绝对单位 固定不变的 7 em: 相对字体 根据父盒子的字体大小来设置的单位 8 %：百分比 9 rem: 只根据html的font-size来调整页面所有标签的盒模型的大小 10 11 text-decoration属性规定文本修饰的样式 12 line-height：设置单行文本垂直居中；多行文本需要加padding（总高度-文本高度）/2 复制博客 13 (1)针对单行文本垂直居中 14 15 公式：行高的高度等于盒子的高度，可以使当行文本垂直居中，注意只适用单行文本。 16 17 (2)针对多行文本垂直居中 18 19 行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。 20 21 第一步，一个宽度300*300的盒子，看盒子中一共显示了几行文字，假如是5行，再看一下行高，如果行高是line-height:30px; 那么就知道行高*5=150px 22 23 第二步，让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px; 24 25 26 27 圆：border-radius:100% 或50% 即可设置为圆形 28 背景颜色：一共有三种：单词、rgb表示法、十六进制表示法 29 rgb（255,255,255） 白色 000黑色 30 31 sublime 安装colorPicker插件 ctrl+shift+c 出现颜色 32 33 图片处理; 34 background-image: url(./1.jpg); 35 background-repeat:repeat|no-repeat|repeat-x|repeat-y ; 36 background-position: x y; 37 x和y如果是正值，意味着调整当前图片的位置信息，相对于原来的位置进行调整 38 x和y如果是负值，切背景图，注意：一定要有明确的width和height '精灵图技术' 39 background-attachment:fixed 40 为什么有精灵图技术？ 41 audio音频 video 视频 script link a 42 img标签 src属性 往后端发get请求 优缺点 43 44 字体图标： 45 iconfont的使用： 例子 找到图标添加到项目，在线链接或下载到本地，即可 46 vertical-align：垂直对齐