菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 彭婉嘉-20230428 [打印本页]

作者: 鱼小仙 时间: 2023-5-3 15:24
标题: 彭婉嘉-20230428
一、今日知识点
1 响应式开发的原理
使用媒体查询针对不同的宽度的设备进行布局和样式的设置，从而适配不同的设备，
通常设备的划分情况如下：
      小于768px的宽度为超小屏幕
      768~992之间的为小屏设备
      992~1200px之间的是中等屏幕
      1200px以上的是大屏幕
响应式布局的容器
      响应式需要一个父级作为布局容器，来配合子元素实现变化效果
      父级容器版心的尺寸
         小于768px的宽度为超小屏幕版心宽度设置为100%
         768~992之间的为小屏设备  版心宽度设置为750px
         992~1200px之间的是中等屏幕版心宽度设置为970px
         1200px以上的是大屏幕版心宽度设置为1170px
2 BootStrap前端框架
简介
      它是一个标准化的HTML+CSS的代码库
      提供了简洁、方便使用的组件
      有自己的生态圈，更新迭代比较好
      能提升开发效率
版本简介
      2.x.x ：停止维护，代码不够简洁
      3.x.x，4.x.x：是目前使用比较多的版本，对IE6 7不支持，IE8只是部分支持，适用于开发响应式布局、移动设备优先的项目
      5.x.x：最新版，目前不是很流行。
BootStrap的基本使用
      目前只考虑BootStrap框架中的css样式库的使用。
      引入方式
      组件使用
BootStrap的栅格系统
      Bootstrap需要为页面分配栅格系统，有两个类可以进行使用 .container和.container-fluid 作用如下
         .container
            响应式布局容器
            768px以下宽度设置为100%
            768px~992px之间宽度设置为750px
            992px~1200px之间宽度设置为970px
            1200px以上宽度设置为1170px
         .container-fluid
            流式布局的容器，百分百宽度
            会占据全部的视口
      栅格系统
         系统会将页面最多分为12列。
         栅格系统通过行（row）和列（column）的组合来控制页面布局，我们的页面内容就可以放到这些创建好的布局中
         注意点：
            按照不同的屏幕可以划分1~12等份，使row可以去除父元素的左右15px的内边距值
            xs：extra small，sm：small，md：medium， lg:large
            每一个rwo都是新的一行
            每一列默认左右会有15px的内边距值
            可以在不同的屏幕宽度下设置不同的列数分配，使用多类名实现即可。
         不同屏幕下划分份数的类前缀
            超小屏幕（<768px） .col-xs-
            小屏幕下（768px<= 屏幕宽度 <=970px） .col-sm-
            中等屏幕下（970px<= 屏幕宽度 <=1200px） .col-md-
            大屏幕下（屏幕宽度 >= 1200px） .col-lg-
      栅格列嵌套
         栅格系统内置的列可以再次进行嵌套，简单理解就是一个列内部再分成若干个小列，我们可以通过添加一个新的.row元素和一系列的col-lg-元素来实现
         每一个新的.row都代表有一个新的行，行中可以分配的列数是1~12列，多余的列会自动换到下一行进行展示。
      栅格列偏移
         使用.col-lg-offset-类可以实现将列向右进行偏移，原理实际是用margin-left来实现的。
      栅格的列排序
         使用.col-lg-push和.col-lg-pull两个类可以实现列排序
      栅格的响应式工具
         为了加快页面的开发，利用媒体查询，可以针对不同的设备来控制页面元素的显示和隐藏
         隐藏内容
         显示内容
3 前端页面的总结
PC端：
      先写结构，在去整理样式
      结构永远比样式更重要
      H5C3在部分浏览器中可能会出现兼容性的问题
移动端
      移动端的主流方案：单独制作移动端页面
      移动端的备选方案：响应式页面兼容移动端
      移动端的技术选型：流式布局、flex布局（推荐）、rem布局（推荐）、响应式布局
4 认识JavaScript
什么是js
      js 是世界上最流行的语言之一，是一种运行在客户端的脚本语言，（script是脚本的意思）
      脚本语言：就是不需要编译，运行过程由js解释器（js引擎）逐行来进行解释并执行
      现在也会基于Node.js来实现服务端的编程
JS和HTML、CSS的关系
      HTML/CSS 是标记语言-描述性的语言
         HTML 决定网页的结构
         CSS 决定网页的样式（表现）
      JS是脚本语言-是编程类的语言
         实现页面行为或者交互的语言。
JS的解析方式
      浏览器分成两个部分
         渲染引擎
            用来解析HTML/CSS的引擎，俗称内核，比如Chrome的blink内核
         JS引擎
            也叫做JS的解释器，用来读取网页中的JS代码，处理代码并执行，比如Chrome的JS解释器 V8
JS的组成
      ECMAScript
         ECMAScript由ECMA国际（原来的欧洲计算机制造商协会）进行标准化的一门编程语言，一般被称为JavaScript（网景公司）或者JScript（微软公司）。
      DOM
         文档对象模型（DocumentObject Model，简称DOM），是W3C组织推荐的处理可扩展语言，通过DOM我们可以对页面上的各种元素进行操作（大小、位置、颜色等等）
      BOM
         浏览器对象模型（BrowserObject Model，简称BOM），指的是浏览器对象模型，提供独立于页面的，可以与浏览器窗口进行交互的对象结构，比如可以进行浏览器跳转、获取分辨率等等。
JS的三种引入方式
      行内式
         可以将少部分的js代码写到行内式的事件属性中，比如onclick。
         注意单双引号的使用：在HTML中我们推荐使用双引号，但是在js中我们推荐使用单引号。
         可读性比较差，不好维护。
         一般不建议使用。
      内嵌式
         注意点
            可以将多行的js代码写到script标签中
            我们练习的时候的常用方式
      外部引入
         为了优化HTML代码结构，会将大量的js代码放到js文件中，外部进行导入，方便维护和复用
         是实际开发中的使用方式。

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)