|
从5月17日开班到现在，已经从一个小白学习了一些前端的知识： 1、什么是前端？ 前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。 2、常见的浏览器 IE、火狐（Firefox）、谷歌（Chrome）、safari和Operra，统称5大浏览器，我们常用谷歌浏览器。 HTML 1、Web标准 由于各个浏览器的内核不同，所以我们要遵循W3C组织制定的web标准让所有浏览器最终显示的效果完全一致。Web标准不是一个标准是一系列的标准： 结构标准（html） ---- 搭建页面的结构 表现标准/样式标准（css）---- 页面样式的美化 行为标准（javascript）--- 实现页面的交互效果 2、HTML的认识 HTML是超文本标记语言，不是编程语言； 所有的html标记（标签）都要放在尖括号<>里面 3、HTML的主要结构： <html> <head> <title>标题</tilte> </head> <body> 网页主体内容 </body> </html> 4、html标签分类 常见的双标签 div、span、p、h1-h6、b、strong、s、del、i、em、ins、u、a 常见的单标签 br、hr、img 5、html注释： <!--注释内容 --> 添加注释的作用：说明代码的含义，更好的管理代码的可读性，程序是不会对注释的代码进行解析的； 快捷键：Ctrl+？ 表单 完整的表单由提示文本、表单、表单域（总体的提交数据的标签）组成 Input按钮组控件 普通按钮：<input type=“button” value=“普通按钮”/> 必须要自己设置value值； 提交按钮：<input type=“submit” />； 可以设置自己的value值也可以用默认的； 重置按钮：<input type=“reset” />；可以设置自己的value值也可以用默认的； 图片按钮：<input type=“image“ src=”图片路径”/> src属性必须书写查找图片路径； 文件域：<input type=“file” /> 上传文件使用； CSS 1、Css的作用 Cascading Style Sheets，简称层叠样式表，主要是用来进行页面的版面布局和外观样式的美化； 2、使用css的原理 能够将结构html和样式css分离书写，简化代码，提高可阅读性； 3、css的书写位置 分为3类：行内式、内嵌式（内部样式）、外部链接式 三种链接方式的使用总结 行内样式表：书写方便，权重高。缺点：没有实现样式和结构相分离； 内部样式表：部分结构和样式的分离。缺点：没有彻底分离； 外部样式表：完全实现结构和样式分离，方便各个页面的使用。缺点：需要引入 4、Css注释 /*css注释内容 */ 快捷键 Ctrl+？， 如果是外部链接的css快捷键是ctrl+shift+？ 5、Css选择器的分类 Css选择器分为两类：基础选择器和高级选择器（复合选择器） 基础选择器：标签选择器（html选择器）、类选择器、ID选择器 复合选择器：后代选择器、并集选择器、指定标签选择器 CSS选择器作用 选择标签的，把想要选择的元素标签选择出来。 6、链接伪类选择器 链接的伪类四种状态： a:link 未访问的链接（访问前） a:visited 已访问的链接（访问后） a:hover 鼠标移动到连接上（鼠标经过） a:active 选定的链接（按下鼠标的时候） 注意：以上的顺序不能颠倒； 实际工作中我们不需要将四个伪类状态都书写，如果4个都要写顺序不能乱； 7、标签显示模式 实际开发的时候有的需要独占一行，有的需要一行放多个，所以把标签的显示模式分为以下三种： 块级元素：自己独占一行； --- 代表标签 div、h标签 行内元素：一行可以共存多个；--- 代表标签 span 、a 行内块元素：一行可以共存多个； --- 代表标签 img 、input 8、盒子模型 盒子模型组成 内容： 实体化宽高和里面的文字图片等等 边框： border 内边距： padding 拉开内容到盒子边缘的距离； 外边距： margin 拉开盒子与盒子之间的距离； 网页布局的三种机制 普通流：块级元素独占一行，从上向下顺序排列；常用的元素：div、hr、p、h1-h6、ul、ol、dl、form、table； 行内元素一行共存多个，从左到右排列，碰到父元素边缘则自动换行；常用元素：span、a、i、em； 浮动：让盒子从普通流中浮起来，让多个块级盒子一行显示； 定位：将盒子在浏览器的某一个位置，后期会经常用到； css属性书写顺序 1、布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式） 2、自身属性：width/ height / margin / padding / border / background 3、文本属性：color/ font / text-decoration / text-align / vertical-align / white- space /break-word 4、其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow /background:linear-gradient … 定位布局： 定位模式+边偏移（方向英文更改） 边偏移： top、bottom、left、right属性； 定位的精髓： 利用更改方向英文来进行位置设置； 2、定位模式 常见的定位模式分为：相对定位、绝对定位、固定定位 定位属性 定位属性：position 取值不同实现的效果不同，如下： 静态定位：position:static; 相对定位：position:relative; 绝对定位：position:absolute; 固定定位：position:fixed; 子绝父相的应用 子绝父相：子级绝对，父级相对，父级盒子做了相对定位定位了，但是依然占位，不会影响其他盒子的布局； 注意：其实实际工作中不一定是子绝父相，其实只要父级有了定位属性，子级就会以父级为参照，但是一般用的最多的还是子绝父相； banner滚动图片的布局思路 一个父级盒子作为总体的大盒子，然后里面的滚动图片用ul>li>a实现，两侧的小箭头一般我们用单独的span或者div实现（css里面用子绝父相进行定位实现），切换的小圆点用ol>li实现（css里面用子绝父相将ol进行定位，然后将里面的li浮动控制外边距即可）；
| 
收藏
淘帖
踩
