泽野之乡

发表于 更新于 分类于

BOM是什么

  1. 一些与浏览器改变尺寸，滚动条滚动的特效，都要借助BOM技术
  2. BOM(Browser Object Model, 浏览器对象模型) 是JS与浏览器窗口交互的接口

BOM常用对象

  1. Window 对象
    • window 对象是当前JS脚本运行所处的窗口，而这个窗口中包含DOM结构，window.document属性就是document对象
    • 在有标签页功能的浏览器中，每个标签都拥有自己的window 对象；也就是说，同一个窗口的标签页之间不会共享一个window对象
    • 全局变量是window变量的属性
      • var a = 1;window.a == a // true
    • 内置函数普遍是window的方法
      • 如setInterval、alert
      • window.alert ==alert // true
      • window.hasOwnProperty('alert') // true
  2. Navigator 对象
    • window.navgator 属性可以检索navigator对象，它内部含有用户此次活动的浏览器的相关属性和标识
      • appName 浏览器官方名称
      • appVersion 浏览器版本
      • userAgent 浏览器用户代理（含有内核信息和封装壳信息）
      • platform 用户操作系统
  3. History 对象
    • window.history 对象提供了操作浏览器会话历史的接口
    • 常用的操作就是模拟浏览器的回退按钮
    • history.back() history.go(-1)
  4. History 对象
    • window.location 标识当前所在网址，可以通过给这个属性赋值命令浏览器进行页面跳转
    • 重新加载当前页面
    • 可以调用location的reload方法以重新加载当前页面，参数true标识强制从服务器加载
    • GET请求查询参数
      • window.location.search 属性即为当前浏览器的GET请求查询参数
  5. 窗口尺寸相关属性
    • innerHeight
      • 浏览器窗口的内容区域的高度，包含水平滚动条（如果有的话）
    • innerWidth
      • 浏览器窗口的内容区域宽度，包含垂直滚动条（如果有的话）
    • outerHeight
      • 浏览器窗口的外部高度
    • outerWidth
      • 浏览器窗口的外部宽度
    • 获得不包含滚动条的窗口宽度，要用 document.documentElement.clientWidth
    • resize 事件
      • 在窗口大小改变以后，就会触发resize事件，可以使用window.onresize或者window.addEventListener(‘resize’) 来绑定事件处理函数
    • 已卷动高度
      • window.scrollY 属性表示在垂直方向已滚动的像素值
    • 已动高度
      • document.documentElement.scrollTop 属性也表示窗口卷动高度
      • document.documentElement.scrollTop 不是只读的，window.scrollY 属性是只读的
    • scroll事件
      • 在窗口被卷动之后，就会触发scroll事件，可以使用 window.onscroll 或者 window.addEventListener(‘scroll’) 来绑定事件处理函数
    • DOM元素都有offsetTop属性，表示此元素定位到祖先元素的垂直距离
      • 定位祖先元素：在祖先中，离自己最近的且拥有定位属性的元素

发表于 更新于 分类于

常用文本样式属性

  1. color
    • 设置文本内容的前景色
      • RGBA ，最后一个表示透明度，0表示纯透明，1表示纯实心
    • 16进制，RGB，RGBA
    • 如果颜色值是#aabbcc的形式，可以简写为#abc
      • #ff0000 -> #f00
  2. font-size
    • 设置字号，单位通常px
  3. font-weight
    • normal 正常粗细，与400等值
    • bold 加粗，与700等值
    • lighter 更细，大多数中文字体不支持
    • bolder 更粗，大多数中文字体不支持
  4. font-style
    • normal 取消倾斜，比如把天生倾斜的i、em等标签设置为不倾斜
    • italic 设置为倾斜字体（常用）
    • oblique 设置为倾斜字体（用常规字体模拟，不常用）
  5. text-decoration
    • none 没有修饰线
    • underline 下划线
    • line-through 删除线

继承性

  1. color
  2. font-开头的
  3. list-开头的
  4. text-开头的
  5. line-开头的
  6. 因为文字相关属性有继承性，所以通常会设置body标签的字号、颜色、行高等，这样就能当做整个网页的默认样式了
  7. 在继承的情况下，选择器权重计算失效，而是“就近原则”，继承的不如元素选中的权重大

字体属性详解

  1. font-family
    • 字体可以是列表形式，一般英语字体放前面，后面的字体是前面字体的“后备”字体
    • font-family: serif, “Times New Roman”, “微软雅黑”;
    • 字体名称中有空格，必须用引号包裹
    • 中文字体可以称呼它们的英语名字
      • “Microsoft Yahei” 等同于 “微软雅黑”
      • “SimSun” 等价于 “宋体”
    • 字体通常必须是用户计算机中已经安装好的字体
    • 定义新字体，需要我们有新字体 @font-face

段落和行相关属性

  1. text-indent 属性
    • 定义文本内容首行缩进量
  2. line-height
    • 定义行高
    • line-height:30px
    • line-height:1.5 字号的倍数
    • line-height:150% 字号的倍数
  3. 单行文本垂直居中
    • 行高=盒子高度，即可实现单行文本的垂直居中
  4. text-align:center
    • 文字水平居中
  5. font 合写属性
    • font: italic bold 20px/1.5 “阿里妈妈刀隶体 Regular”;

发表于 更新于 分类于

认识盒模型

  1. 行内元素
  2. 块级元素
  3. 所有HTML标签都可以看成矩形盒子，由width、height、padding、border构成，称为“盒模型”

width和height属性详解

  1. width
    • 盒子内容的宽度
    • width属性通常是px，移动端开发会涉及百分数，rem等单位
    • 当块级元素（div、h系列、li等）没有设置width属性是，它将自动撑满，但这并不意味着width可以继承
  2. height
    • 表示内容的高度
    • width属性通常是px，移动端开发会涉及百分数，rem等单位
    • 盒子的height属性如果不设置，它将被内容被自动撑开，如果没有内容，则height默认是0
    • 高度省略掉，内容能被自动撑开

padding属性详解

  1. padding 是盒子的内边距，即盒子边框内壁到文字的距离
  2. padding 是四个方向的
    • padding-top
    • padding-left
    • padding-right
    • padding-bottom
  3. padding 四数值写法
    • padding:10px 20px 10px 20px 上右下左
  4. padding 三数值写法
    • padding:10px 20px 30px 上 左右 下
  5. padding 二数值写法
    • padding:10px 20px 上下，左右
  6. padding 一数值写法
    • padding:10px 四个方向都是10px

margin属性详解

  1. margin是盒子的外边距，盒子和其它盒子之间的距离
  2. margin 是四个方向的
    • margin-top
    • margin-left
    • margin-right
    • margin-bottom
  3. margin 四个方向
    • margin:10px 20px 10px 20px 上右下左
  4. margin 三数值写法
    • margin:10px 20px 30px 上 左右 下
  5. margin 二数值写法
    • margin:10px 20px 上下，左右
  6. margin 一数值写法
    • margin:10px 四个方向都是10px
  7. margin 的塌陷
    • 垂直方向的margin有塌陷现象：小的margin 会塌陷到大的margin 中，从而margin不叠加，只以大的值为准
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
       .box5{
              width: 200px;
              height: 200px;
              background-color: aqua;
              margin-bottom: 24px;
          }   
       .box6{
              width: 200px;
              height: 200px;
              background-color: rgb(28, 206, 108);
              margin-top: 32px;
          }
      以margin-top 32px 为准
    • 左右方向不会发生塌陷现象
  8. 一些元素有默认的margin
    • 比如（body、ul、p) 等，在开始制作网页的时候，要将它们清除
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
       *{
              margin: 0;
              padding: 0;
          }

          body,
          ul,
          p {
              margin: 0;
              padding: 0;
          }
      * 通配符有效率问题
  9. 盒子的水平居中
    • 将盒子左右两边的margin都设置为auto，盒水平居中
    • margin:0 auto
    • 文本居中 text-align:center 和盒子水平居中是两个概念

盒模型计算

  1. 盒子的总宽度 = width + 左右border + 左右padding
  2. 盒子的总高度 = height + 上下border + 上下padding

box-sizing属性

  1. 将盒子添加 box-sizing:border-box 之后，padding、border 变为内缩，不再外扩

display

  1. 行内元素
    • 能并排显示
    • 不能设置宽高
    • width自动收缩
    • a、span、em、b、u、i 等
  2. 块级元素
    • 不能并排显示
    • 能设置宽高
    • width自动撑满
    • div、section、header、h系列、li、ul等
  3. 行内块元素
    • img、input等
    • 既能并排显示、又能设置宽高
  4. 行内元素和块级元素的互相转换
    • display:block
      • 转换为块级元素
    • display:inline
      • 转为行内元素
    • disaplay:inline-block
      • 即将元素转为行内块
    • display:none
      • 可以将元素隐藏，元素将彻底放弃位置，如同没有写标签一样
    • visibility:hidden
      • 也可以将元素隐藏，但是元素不放弃自己的位置

发表于 更新于 分类于

过渡（最低支持 IE10）

  1. 过渡的基本使用
    • transition 过渡属性是CSS3浓墨重彩的特性，过渡可以为一个元素在不同的样式之间变化自动添加“补间动画”
    • 优点：动画更细腻，内存开销小
    • transition: width 1s linear 0s;
      • 如果所有属性要参与过渡，可以写 all
    • 参数说明：什么属性需要过渡，动画时长，变化速度曲线，延迟时间
      过渡的四个小属性
      • transition-duration 动画时间
      • transition-property 哪些属性要过渡
      • transition-timing-function 动画变化曲线（缓动效果）
        • ease
        • linear
        • ease-in
        • ease-out
        • ease-in-out
        • 贝塞尔曲线
      • transition-delay 延迟时间
    • 哪些属性可以参与过渡？
      • 所有数值属性都可以参与过渡，比如
        • width
        • height
        • left
        • top
        • border-radius
      • 背景颜色和文字颜色都可以被过渡
      • 所有变形（包括2D和3D）都能被过渡
  2. 过渡的缓动效果（参考 transition-timing-function 属性）

动画

  1. 动画的定义和调用

    • 可以使用 @keyframes 来定义动画，keyframes 表示“关键帧”，在项目上线前，要补上@-webkit-这样的私有前缀

    • 定义动画后，就可以用 animation 属性调用动画

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
       <!DOCTYPE html>
       <html lang="en">
       <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>动画的定义</title>
        <style>
            @keyframes r{
                from {
                    transform: rotate(0);
                }
                to {
                    transform: rotate(360deg);
                }
            }
            .box1 {
                width: 200px;
                height: 200px;
                border: 1px solid #333;
                animation: r 1s linear 0s;
            }
        </style>
       </head>
       <body>
        <div class="box1"></div>
       </body>
      </html>

    • animation: r 1s ease 3s 3;

      • 动画的参数：动画的名称，执行的时间，动画效果，延迟时间，执行次数
      • 如果想永远设置执行就是 infinite 属性
      • 如果想让动画的第2、4、6…..（偶数次）自动逆向执行，那么要加上 alternate 参数即可
      • 如果想让动画停止在最后结束状态，那么要加上 forwards

    • 多关键帧动画

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      @keyframes changeColor {
           0% {
               background-color: red;
           }

           50% {
               background-color: yellow;
           }

           100% {
               background-color: aqua;
           }
       }

发表于 更新于 分类于

audio标签（兼容到IE9）

  1. 属性
    • autoplay（某些浏览器不支持自动播放、本地自动播放是可以的）
    • loop （重复播放）

video 标签（兼容到IE9）

  1. 属性
    • 同 audio 标签
    • width 视频播放器宽度

大纲标签（区块标签）

  1. section 文档的区域，语义比div大
  2. article 文档的核心文章内容，会被搜索引擎主要抓取
  3. nav 导航条
  4. footer 页脚
  5. aside 文档的非必要相关内容，比如广告等
  6. main 网页核心部分
  7. header 页头

语义化标签

  1. span 文本中的区块标签
  2. b 加粗标签
  3. i 斜体标签
  4. u 下划线标签
  5. strong 加粗标签
  6. em 斜体标签
  7. mark 标记标签
  8. figure-figcaption 用于表示图片和图片的标题

常用标签

  1. a 标签
    • 1、a 标签 anchor 锚 的首字母
      2、hypertext reference 超文本引用
      3、title 用于设置鼠标的悬停文本
    • 属性
      • href 超文本引用
      • target
        • _blank 在新窗口或新标签页中打开链接。
        • _self 在父级框架中打开链接。
        • _top 在当前窗口中打开链接（默认值）。
        • _parent 在顶级框架中打开链接。
      • title 用于设置鼠标的悬停文本
    • 说明
      • mailto:me.test.com 邮件
      • tel:135555555555 拨打电话
      • #top 回到顶部
  2. img 标签
    • src
    • width、height
    • alt alternate 替代品的缩写，它是图像的描述，不是强制性的(有利于搜索引擎优化)
    • title 鼠标悬停时候显示
    • class、style 设置样式用
    • loading 指定图像加载方式，可选值有”eager”（立即加载）和”lazy”（延迟加载）。
    • decoding 指定图像解码方式，可选值有”async”（异步解码）和”sync”（同步解码）。

发表于 更新于 分类于

table

  1. tr
  2. td
    • colspan 用来设置 td 或者 th 的列跨度
    • rowspan 用来设置 td 或者 th 的行跨度
  3. thead/th
    • 标题小格（td 和 th 是同一级别的）
    • colspan 用来设置 td 或者 th 的列跨度
    • rowspan 用来设置 td 或者 th 的行跨度
  4. tbody
  5. tfooter
  6. caption
    • 表格的标题

属性

  1. border
    • 1
    • 2

发表于 更新于 分类于

input

  1. type
    • color 颜色选择控件
    • date、time 日期时间选择控件
    • email 电子邮件输入控件
    • file 文件选择控件
    • number 数字输入控件
    • range 拖拽条
    • search 搜索框
    • url 网址输入控件
    • button 按钮
    • submit 提交，在外层为 form 情况下有效
    • reset 重置
    • password 密码
    • radio 单选按钮需要名称设置为一样的
    • checkbox 多选按钮需要名称设置为一样的
    • hidden 对用户不可见，隐藏字段
  2. placeholder 提示符
  3. value 值 是否禁用
  4. disabled 是否必填，在外层是form表单情况下有效
  5. required
  6. name
  7. id
  8. list
    • 设置预选项（list=”province-list”）
      1
      2
      3
      4
      5
      <datalist id="province-list">
               <option value="浙江杭州">
               <option value="河北石家庄">
               <option value="浙江温州">
           </datalist>

textarea

  1. name
  2. id
  3. cols 一行显示多少字符
  4. rows 一列显示多少字符
  5. placeholder 提示符

select/option

  1. select
  • name
  • id
  • disable 是否禁用
  • multiple 选项是否支持多选
  • required 是否必填
  • autofocus 自动获取焦点
  • autocomplete 自动完成

fieldset/legend

  1. 即输入区加有文字的边框。
  2. 定义域的标题，即边框上的文字。

button

  1. 定义一个按钮。

label

  1. 定义一个控制的标签。如输入框前的文字，用以关联用户的选择。
  2. for

发表于 更新于 分类于

盒子阴影

  1. box-shadow: 10px 20px 30px rgba(0, 0, 0, .4);
  2. inset（内阴影，可选），x偏移，y偏移，模糊量，阴影延展（可选），颜色
  3. 可以用逗号隔开多个阴影
    1
    2
    3
    4
    5
    6
    .box1 {
           width: 100px;
           height: 100px;
           box-shadow: inset 10px 20px 30px 40px rgba(0, 0, 0, .4),10px 20px 30px #ff0000;
           border: 1px solid #333;
       }

边框

  1. border-top
  2. border-bottom
  3. border-left
  4. border-right
  5. border-方向-style 边框线形
  6. border-方向-width 边框宽度
  7. border-方向-color 边框颜色
  8. border-方向:none 去掉边框
  9. 利用border制作三角形
    • width: 0; height: 0; border: 20px solid transparent; margin-top: 50px; border-top-color: #ff0000;
  10. 边框的三要素
    • 线宽度、线型、线颜色
      • solid 实线
      • dotted 虚线（圆）
      • double 双边
      • dashed 虚线（矩形）
    • border:1px solid #ff0

发表于 更新于 分类于

背景基础知识

  1. 背景颜色基础知识
    • background-color: ;
    • 背景颜色可以用十六进制，rgba,rgb,表示
    • padding 是有背景颜色的
  2. 背景图片基础知识
    • 用来设置背景图片。 background-image: url();
    • 可以是相对路径，绝对路径，网络图片

背景图片高级属性

  1. 背景图片的重复模式
    • background-repeat 属性可以用来设置背景的重复模式
    • repeat x,y均平铺（默认）
    • repeat-x x轴平铺
    • repeat-y y轴平铺
    • no-repeat 不平铺
  2. 背景尺寸
    • background-size: 100px 100px; 宽，高
    • 设置背景图片尺寸，兼容到IE9
    • 值也可以用百分比来表示，表示盒子宽高分别百分之多少。
    • 需要等比例设置的值，可以设置auto
    • contain和cover
      • background-size: contain; 表示将背景图片只能改变尺寸以容纳到盒子里
      • cover表示将背景图片智能改变尺寸以撑满盒子
  3. 背景裁切
    • background-clip 属性用来设置元素的背景裁切到哪个盒子。兼容到IE9
      1
      2
      3
      4
      5
      6
      7
      8
      9
      .box5{
              margin: 50px 0;
              width: 300px;
              height: 300px;
              border: 10px dotted #000;
              background-image: url('./images/niaochao.jpg');
              padding: 24px;
              background-clip: border-box;
      }
    • border-box 背景延伸至边框（默认值）
    • padding-box 背景延伸至内边（padding)，不会绘制边框处（仅在dotted、dashed边框可察觉）
    • content-box 背景被裁剪至内容区
  4. 背景固定
    • background-attachment 属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动
      1
      2
      3
      4
      5
      6
      7
      .box4{
             width: 200px;
             height: 200px;
             background-attachment: fixed;
             background-image: url('./images/gugong.jpg');
             overflow-y: scroll;
       }
      • fixed 自己滚动条不动，外部滚动条不动
      • local 自己滚动条动，外部滚动条动
      • scroll 自己滚动条不动，外部滚动条动（默认值）
    • 用途：视差滚动特效
  5. 背景图片位置
    • background-position: 100px 200px;
    • 设置背景图片在盒子的位置
    • 可以用位置描述符 top left right bottom
  6. background综合属性
    • background: white url("images/goblin.png") no-repeat center center;
    • 背景颜色，背景图片，背景重复，背景位置

渐变背景

  1. 线性渐变
    • background-image: linear-gradient(to right, blue, red);
    • 渐变方向，开始颜色，结束颜色
    • 渐变方向可以写成度数，比如45deg
    • 可以有多个颜色值，并且可以用百分数定义它们出现的位置 linear-gradient(to bottom,blue,yellow 20%,red)
    • 浏览器私有前缀
      • Chrome -webkit-
      • Firefox -moz-
      • IE、Edge -ms-
      • 欧朋 -o-
  2. 径向渐变
    • 盒子可以使用 background-image: radial-gradient(50% 50%,red,blue); 创建径向渐变
    • 参数：圆心坐标，颜色，颜色，颜色

CSS精灵（雪碧图，前端优化方案之一）

  1. CSS精灵：将多个小图标合并制作到一张图片上，使用background-position属性单独展示其中一个，这样的技术叫做CSS精灵技术，也叫做CSS雪碧图
  2. 减少HTTP请求数，加快网页速度，缺点：不方便测量，后期修改不方便

发表于 更新于 分类于

String 和 StringBuilder

String

  1. 如何创建 String 对象
    • String s1 = “test”
    • String s2 = new String();
    • String s3 = new String(“test”)
  2. String 对象的常用方法
方法 说明
[charAt(int index)] 返回指定索引位置的字符
[concat(String str)] 将指定字符串连接到该字符串的结尾
[contains(CharSequence s)] 判断是否包含指定的字符序列
[endsWith(String suffix)] 判断字符串是否以指定的后缀结束
[equals(Object obj)] 比较字符串是否相等
[equalsIgnoreCase(String str)] 比较字符串是否相等,忽略大小写
[indexOf(int ch)] 返回指定字符在该字符串中首次出现处的索引
[indexOf(String str)] 返回指定子字符串在该字符串中首次出现处的索引
[isEmpty()] 判断字符串是否为空
[length()] 返回字符串的长度
[replace(char oldChar, char newChar)] 使用新值替换字符串中出现的所有旧值
[split(String regex)] 根据给定正则表达式的匹配拆分此字符串
[startsWith(String prefix)] 判断字符串是否以指定的前缀开始
[substring(int beginIndex)] 返回一个新的字符串,它是此字符串的一个子字符串
[toCharArray()] 将此字符串转换为一个新的字符数组
[toLowerCase()] 使用默认语言环境的规则将此 String 所有字符都转换为小写
[toUpperCase()] 使用默认语言环境的规则将此 String 所有字符都转换为大写
[trim()] 返回字符串的副本,删除前导空白和尾部空白
  1. == 和 equals 方法的区别
比较项 == 运算符 equals() 方法
比较对象 比较两个对象的引用是否指向同一个对象(内存地址是否相同) 比较两个对象的内容是否相同
适用类型 基本数据类型(如 int、double 等)和引用数据类型(如 String、Integer 等) 引用数据类型(如 String、Integer 等)
默认行为 基本数据类型比较值是否相同,引用数据类型比较引用是否相同 对于引用数据类型,默认比较对象的内容是否相同
重写 不能重写 可以被子类重写以实现自定义的比较逻辑

总的来说:

  • == 比较的是对象的内存地址，equals() 比较的是对象的内容。
  • 对于基本数据类型，== 比较的是值是否相同。
  • 对于引用数据类型，如果没有重写 equals() 方法，那么 equals() 方法等价于 ==。
  • 通常比较引用数据类型的相等性时，应该使用 equals() 方法，因为这样可以比较对象的内容。
  1. String 的不可变性
    • String 对象一旦被创建，则不能修改，是不可变的。
    • 所谓的修改其实是创建了新的对象，所指向的内存空间不变，

StringBuilder

  1. 与 String 区别
    • String 具有不可变性，而 StringBuilder 不具备
  2. 使用建议
    • 当频繁操作字符串时，使用 StringBuilder
  3. StringBuilder 和 StringBuffer
    • 二者基本相似
    • StringBuffer 是线程安全的，StringBuilder 则没有，所以性能略高。
  4. 常用方法
    • StringBuilder append(String str)
    • StringBuilder delete(int start,int end)
    • StringBuilder insert(int offset,String str)
    • StringBuilder replace(int start,int end,String str)
0%