h5基础整理

最新推荐文章于 2024-07-23 16:10:02 发布

小福消遣

最新推荐文章于 2024-07-23 16:10:02 发布

阅读量158

点赞数

文章标签： css3 html5 javascript

本文链接：https://blog.csdn.net/qq_43042062/article/details/84403946

版权

前端页面有哪三层构成

结构层;主要指DOM节点;Html/XHtml
表现层;主要是指页面渲染;CSS
行为层：指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要是有js组成

<!DOCTYPEHTML>

告知浏览器以何种模式来渲染文档

link和@import的区别

link属于XHTML标签，而@import完全是css提供的一种方式。link标签除了可以加载css外，还可以做很多其他的事情。比如定义RSS，定义rel属性等，而@import就只能加载css了。
加载顺序的区别。当一个页面被加载的时候，link引用的css会同时被加载，而@import引用的css会等到页面全部被下载完再被加载。
兼容性的差别。由于@import是css2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的浏览器才能是识别，而link标签无此问题。
使用dom控制样式的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签因为@import不是dom可以控制的。

块级元素：

块级元素会独占一行，其宽度自动填满其父元素宽度。
可以设置width,height属性。(即使设置了宽度，也是独占一行的，除非用float属性等特殊情况）
可以设置margin(外边距)和padding(内边距)。

行内元素：

行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化（其宽度由内容撑开）。
设置width,height属性无效。
水平方向上的padding-left,padding-right,margin-left,margin-right产生边距效果，但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom不会产生效果。

转换：

1 给行内元素加上 display:block 这样的属性，让行内元素也有每次都从新行开始的属性。
2 给块级元素加上 display:inline 这样的属性，让块级元素不具有从新行开始的属性。
3 给行内元素加上 display:inline-block 属性，仍为行内元素，但是可以设置width及height属性等

css选择器

优先级算法

行内样式 - > 内联样式 -> 外联样式
！import > id > class > tag

选择器优先级权值：

!important=10000
style=1000
id=100
.class=10
tag=1
*=0

注：权重是可以叠加的

id选择器（#myid）
类选择器（.myclassname）
标签选择器（div，h1, p）
相邻选择器（h1 + p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（*）
属性选择器(a[rel = ‘external’])
伪类选择器（a:hover，li：nth-child）

css可继承属性

font-size
font-family
color
text-indent/首行缩进

浏览器内核

Trident内核：代表作品是IE
Gecko内核：代表作品Firefox（火狐）
Webkit内核：代表作品是Safari（苹果）
prosto内核：Opera（欧朋）
Blink内核：chrome（谷歌）

弹性盒模型

一、设置在父元素上

1. display:flex; 将父元素设置为弹性盒，子项目默认全部在主轴方向一行显示，不会换行。子项目在侧轴方向会默认被拉伸。

2. flex-direction 设置主轴方向

        row：从左向右（默认）
        row-reverse：与row相反；
        column 垂直向下
        column-reverse：与column相反；

3. flex-wrap 伸缩换行

        nowrap默认不换行
        wrap 换行
        wrap-reverse 换行反向

4. flex-flow:flex-direction||flex-wrap 伸缩流方向与换行

5. justify-content 定义子项目在主轴上的对齐方式；

        flex-start 默认子项目向主轴的起始位置靠齐；
        flex-end 默认子项目向主轴的结束位置靠齐；
        center 默认子项目向主轴的中间位置靠齐；
        space-between 将主轴多余部分平分在子项目之间
        space-around 将主轴多余部分环绕在子项目之间

6. align-items 设置单行子项目在侧轴方向的对齐方式

        stretch默认拉伸(没设置侧轴方向尺寸情况)
        flex-start默认在侧轴方向的起始位置对齐（设置侧轴方向尺寸情况）
        flex-end 在侧轴方向的结束位置对齐
        center 在侧轴方向的中间位置对齐
        baseline 在侧轴方向以基线对齐

7. align-content 同时控制多行子项目在侧轴方向的对齐方式

                等同于justify-content

二、设置在子元素上

备注：子元素的主轴若是水平方向，则必须设置width或者flex比例。若为垂直，则必须设置height或者flex比例。

flex 将子元素在主轴方向上进行比份
align-self 设置某个子项目在侧轴方向的单行中的对齐方式
order规定子项目的显示顺序
设置了order的子项目会放在没设置的子项目后面。如果都设置了，order值小的元素先摆放。

多列布局

column-width：定义列宽，代表每列最小的宽度
column-count：定义列数；代表最多的列数
column-gap：定义列间距；不能为负数；
column-rule：定义列边框
column-span：定义多列布局中子元素的跨列效果；通常用于标题；
none：不跨列；
all：跨所有列*/

媒体查询

语法： @media screen and (条件){选择器{声明}}
条件：min-width 页面宽度大于最小宽度时，样式生效。min-width应从小写到大;
max-width 页面宽度小于最大宽度时，样式生效。max-width应从大写到小;

 div{width: 300px;height: 300px;background: blue;}
      @media screen and (max-device-width:1200px){
            div{background: pink;}
      }
      @media screen and (max-device-width:992px){
            div{background: green;}
      }
      @media screen and (max-device-width:768px){
            div{background: red;}
      }

flex布局案例

/* <!-- 最大盒子设 --> */
height: 100%;display:flex;flex-direction:column;


/* 头部底部  直接在ul上设置即可*/

/* ul设 */
display:flex;height:100px;  justify-content: space-between;

/* li设 */
flex:1;

 /* 有字体图标的li设 上下*/
 flex:1;display:flex;flex-direction:column;justify-content: center;align-items:center;

/* 中间main部分 */
flex:1;overflow-x:hidden;overflow-y:auto;

JavaScript由三部分组成：

ECMAScript（核心）
DOM（文档对象模型）
BOM （浏览器对象模型

规定js脚本异步执行：

//第一种方案
<script type="text/javascript" src="xxxxxxx.js" async="async"></script> 

// 第二种
// defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。
// 如果您的脚本不会改变文档的内容，可将 defer 属性加入到 <script> 标签中，以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止
<script type="text/javascript" defer="defer"> 
    alert(document.getElementById("p1").firstChild.nodeValue); 
</script>

得到浏览器窗口的宽度和高度(兼容所有浏览器)

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

六种基本数据类型：

字符串（String）、数字(Number)、布尔(Boolean)、对象(Object)、空（Null）、未定义（undefined）

jQuery绑定事件方法：

//第1种
$(document).ready(function(){
    $("#clickme").click(function(){
          alert("hello world click")
    })
})

//第2种
$('#clickmebind').bind("click", function(){
    alert("Hello World bind");
});

//第3种
$('#clickmeon').on("click",function(){
    alert("hello world on")
})
//第4种
$("button").live("click",function(){
    $("p").slideToggle();
});

//第5种
$("div").delegate("button","click",function(){
    $("p").slideToggle();
});

//第6种：  只绑定一次事件
$(document).ready(function(){
　　$("p").one("click",function(){
　　　　$(this).animate({fontSize:"+=6px"});
　　});
});

实现点击回到顶部的方案

//1
    <body style="height:2000px;">
        <div id="target"></div>
        <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>

        <script>
            test.onclick = function(){
                target.scrollIntoView();
            }
        </script>
    </body>




//2
    <body style="height:2000px;">
        <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
        <script>
            test.onclick = function(){
                 document.body.scrollTop = document.documentElement.scrollTop = 0;
            }
        </script>
    </body>



//3
    <body style="height:2000px;">
        <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
        <script>
            test.onclick = function(){
                 scrollTo(0,0);
            }
        </script>
    </body>



//4
    <body style="height:2000px;">
        <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
        <script>
            test.onclick = function(){
                 var top = document.body.scrollTop || document.documentElement.scrollTop
                 scrollBy(0,-top);
            }
        </script>
    </body>



//5
//动画版


// <h1>返回顶部</h1>
// <div class="box" style="width: 30px;height: 30px;color: red;background: #000;position:fixed;bottom: 20px;right: 20px;">99999999999</div>
// <div id="to_top">返回顶部</div>
<script>
    var timer = null;

    var box = document.querySelector('.box');
    box.onclick = function(){
        cancelAnimationFrame(timer);
        timer = requestAnimationFrame(function fn(){
            var oTop = document.body.scrollTop || document.documentElement.scrollTop;
            if(oTop > 0){
                scrollTo(0,oTop-50);
                timer = requestAnimationFrame(fn);
            }else{
                 cancelAnimationFrame(timer);
            } 
        });
    }
</script>

闭包：

原理：

1. 闭包是指函数嵌套函数，将函数返回(return)到函数的外部
2. 是指有权访问另一函数作用域的变量
闭包是连接函数内部和函数外部的一个桥梁

垃圾回收机制：

是指函数执行完毕，垃圾回收机制会自动清除内部的无引用变量

变量访问规则：

内部函数可以访问外部函数的变量，外部函数不能访问函数内部的函数变量

闭包可以访问三个作用域中的变量：

1. 在自己作用域中声明的变量
2. 在父函数中声明的变量
3. 在全局作用域中声明的变量

特性：

1. 封闭性：外界无法访问闭包内部的变量，除非闭包主动向外界提供访问接口
2. 持久性：一般函数执行完毕，系统会自动注销函数，而闭包在外部函数被调用之后，闭包结构依然保存在
3. 让变量始终保存在内存当中

优点：

1. 减少全局变量
2. 避免全局环境的污染
3. 减少传递函数的参数量

缺点：

占用内存资源大
过多使用闭包会导致内存溢出

原型和原型链，原型链的作用？

原理：实例与Object原型对象之间的链条称为原型链
1. javascript中每个对象都有一个内部属性[prototype],这就是原型。
2. 访问一个对象的原型可以用es5的Object.getprototypeOf()方法，或者用es6的__proto__属性
3. js运行时在查找调用属性和方法时并不止是查到一层原型，原型本身也是对象，因此运行js时还会查找到原型对象的原型，一直找到Object的原型为止。这就构成了一个链式结构，称为原型。
原型链的作用：
1. 通过原型链可以可以形成类似继承的效果。比如：我们创建一个数组，这个数组的方法就是从原型链继承而来的。

构造函数与普通函数的区别：

构造函数：是一种特殊的方法、主要用来创建对象时初始化对象，总与new运算符一起使用，创建对象的语句中构造函数的函数名必须与类名完全相同。
与普通函数相比只能由new关键字调用，构造函数是类的标示。

jsonp的使用（GET）

使用JSONP需要服务器端提供必要的支持。
只支持get请求

// getData必须是全局函数
// script标签一般动态创建，请求服务器地址,并附带函数名
// 服务器返回js文件
function getData(data){
    console.log(data);
}
<scriptsrc="http://localhost:3000/getJSONP?callback=getData"></script>

JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小

去除字符串中的空格方法：

trim();

trim()：只能去除两边的空格，无法去除中间的空格
trimLeft()：去除左边的空格
trimRight()：去除右边的空格
replace(); 替换，支持正则表达式

    function rmWhiteSpace(str) {
        return str.replace(/\s*/g,"");
    }

字符串反置
使用数组内置的reverse方法，先将字符串转化为数组，再将数组转化为字符串。

 * 功能：字符串反置
 * 函数名:strReverse
 * 参数：一个字符串
 */function strReverse(str){    return str.split("").reverse().join("");
}

es5:

document.addEventListener('DOMConentLoaded',function()=>{
    // DOM树建构完成后才执行
});

strict模式严格模式：‘use strict’;
Array增加方法：

增加了every、some 、 forEach 、 filter 、 indexOf 、 lastIndexOf 、 isArray 、map 、reduce 、 reduceRight方法。

JSON对象方法：

    JSON.parse();//字符串转对象或数组
    JSON.stringify();//数组或对象转json字符串

    /*
    eval方法转换:
         eval("("+json字符串+")"); 它的作用是，将一个普通的json格式的字符串，转换成Json格式的对象 
    */
     var list = eval("("+request.responseText+")");

函数方法：

bind();

es6：

let
const
箭头函数
结构
字符串模板
…扩展符
symbol数据类型：值第一无二，不能与其他类型运算
set集合
map映射：键值对
生成器函数
字符串方法:

includus() 判断是否包含某个字符，返回boolear
repeat() 得到字符串重复n次后的结果，n可以小数不能为负数

数组方法:

Array.from(); set集合转为数组

对象方法：

Object.assign(target,obj1,obj2,…objn);
合并对象
克隆对象
注：如果相同的，后面会覆盖前面的
简写：
属性简写：把变量变为属性名
方法简写：把变量的值作为属性值

模块导入导出(es6)

导入: import a from “…/…/”;
导出：export default a;

undefined 和 not defined

undefined 生命未赋值
not defined 未定义

Promise

const isGreater = (a, b) => {
return new Promise ((resolve, reject) => {
  if(a > b) {
    resolve(true)
  } else {
    reject(false)
  }
  })
}
isGreater(1, 2)
.then(result => {
  console.log('greater')
})
.catch(result => {
  console.log('smaller')
})

RequireJs将数据或功能导出模块？

直接用return导出
.加载一个module模块用module.exports导出
.加载一个require模块在函数中写入var module = require（‘module’）再用module.exports 导出

export和exports的区别：

export是es6引入的语法，用于导出模块中的变量，对象，函数，类。对应的导入关键字是import
exports其实是module.exports的引用

export和export default的区别 :

export和export default都是es6的导出语法

二者的区别有以下几点：

export default在一个模块中只能有一个，当然也可以没有。export在一个模块中可以有多个。
export default的对象、变量、函数、类，可以没有名字。export的必须有名字。
export default对应的import和export有所区别

npm是什么

Node模块包管理器; npm是云端包管理器，是用来安装模块，创建模块，发布模块，测试模块

Gulp、grunt

前端自动化工具 js构建工具

Webpack：

一个功能强大的打包工具，vue使用webpack进行打包，通过vue-loader将vue文件打包成浏览器可以识别的js文件。

使用Webpack的优势

支持commonJS，可以使模块加载器灵活定制。
使用babel-loader加载器，该加载器能使我们使用ES6的语法来编写代码。
可以通过配置打包成多个文件，有效的利用浏览器的缓存功能提升性能
使用模块加载器，可以支持sass，less等处理器进行打包且支持静态资源样式及图片进行打包

.Babel

ES6代码转为ES5代码

git

1. git add 文件名

git add .

2把文件提交到仓库中去

  git commit -m '我提交时候的备注（相当于注释）'

.查看commit状态

git status

查看修改内容

 git diff 你的文件名

.版本退回

git log
1. 退回到上个版本: git reset --hard HEAD^
2. 退回两个版本: ： git reset --hard HEAD^^
3. 如果需要退回好多版本就在后面加上 ^,1个代表1个版本

删除

rm b.txt 这个是删除b文件的命令

git reset --hard 版本号来回复文件

git reset --hard 要恢复的版本号

连接本地仓库

git remote add origin https: // github.com/你的账号/你的项目名称

将本地的库推送到master分支（就是推送到服务器上）

git push -u origin master
第二次及后面推送：git push origin master

面试聊人生：

你遇到难题时怎么解决？自己解决找同事商量研究向领导汇报
你经常上哪些技术网站
你怎么与你的领导相处？什么时候向他汇报工作？
你之前的公司都有哪些部门？都分别负责什么事？

测试技术部开发部产品研发部前端开发组运维部售后部行政部（考勤，请假，会议）财务部

小福消遣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5基础整理

前端页面有哪三层构成结构层;主要指DOM节点;Html/XHtml表现层;主要是指页面渲染;CSS行为层：指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要是有js组成&amp;lt;!DOCTYPEHTML&amp;gt;告知浏览器以何种模式来渲染文档link和@import的区别link属于XHTML标签，而@import完全是css提供的一种方式。link标签除了可以加载c...
复制链接

扫一扫