前端基础总结

前端基础总结

20%的技能，可以从事80%的工作

1.html

（1）src 和 href 的区别

<img src="">
<script src=""></script>
<!-- src:会中断当前页面的解析 -->
<link href="">
<!-- href:不中断当前页面解析（同步），不推荐使用@import -->

（2）defer和async这两个属性的作用？

<script src="xxx.js" defer></script>
<!-- defer:下载并不执行，不中断html，dom完成后执行 -->
<script src="xxx.js" async></script>
<!-- async:下载完立即执行，下载时不中断html，执行时中断 -->

（3）html文档属性（名值对）

<meta name="xxx" content="xxxx">

<!-- TDK:title,description,keyword-->
<meta charset="UTF-8">
<meta name="keywords" content="php,js,css,html">
<title>标题</title>
<!-- 移动端视口 -->
<meta name="viewport" content="width=device-with">

（4）html5 语义化标签

<!-- 页眉 -->
<header></header>
<!-- 主体 -->
<main></main>
<!-- 页脚 -->
<footer></footer>
<!-- 侧边栏 -->
<div class='ads'></div>
<aside class="ads"></div>
<!-- div 替换品 section -->
<!-- 导航 -->
<nav>
    <a href="xxx">xxx</a>
    <a href="xxx">xxx</a>
    <a href="xxx">xxx</a>
</nav>
<!-- 表单 -->
<label for="input.id">标签</label>
<input type="text/email/number/color/date/search/range" id="">
<input type="xxx" name="" value="" autocomplete>
<!-- autocomplete:必须有name,必须提交过 -->
<select name="xxx">
    <option>xxx</option>
</select>
<textarea></textarea>
<!-- 列表：多行单列表格 -->
<ul>
    <li>item</li>
    <li>item</li>
</ul>
<!-- dl/dt/dd：一般用来做菜单等，不用作数据渲染 -->
<dl>
    <dt>title</dt>
    <dd>xxx</dd>
    <dd>xxx</dd>
<dl>
<!-- 表格：table  -->
<table>
    <caption>标题</caption>
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan=2>xxx</td>
            <!-- <td>xxx</td> -->
            <td>xxx</td>
        </tr>
        <tr>
            <td rowspan=2>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>
        <tr>
            <!-- <td>xxx</td> -->
            <td>xxx</td>
            <td>xxx</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>
    </tfoot>
</table>

（5）元素类型

<!-- 块级：垂直排列 -->
<div></div>
<table></table>
<ul><li</li></ul>
<!-- 行内元素 -->
<a></a>
<span><span><select></select><em></em>
<!-- 行内块元素：还是行内元素，但可以设置宽高 -->
<!-- 行内块：通常都是外部资源，图片、视频等 -->
<img><input>
<!-- 双标签 -->
<h2 class="title">Hello world!</h2>
<!-- 单标签 -->
<img><input><link>
<!-- 空元素 -->
<br><hr>

2. css

(1) 选择器

/* div:标签，class:属性 */
<div class="box" id="wrap">
    <p>xxx</p>
    <span>xxx</span>
    <em>xxx</em>
</div>
/* 1.标签选择器 */
div {}
/* 2.属性选择器 */
div[class="box"]{}
div[id="wrap"]{}
/* <div id="wrap" class="container"> */
/* id,class都是属性，也是通用属性，所以设计语法糖 */
div.box{}
div#wrap{}
/* 标签，class,id:权重选择器的依据 */
/* 后代：空格 */
div p {}
/* 子元素 */
div > p {}
/* 兄弟级：相邻  p + span 同级*/
div > p + span {}
/* 同级后面所有元素：~ *  */
div > p ~ * {}
/* * : 通配 */
div > * {}
/* 3.伪类选择器：主要用来获取子元素，要有一个查询起点 */
/* 获取任意一个 */
div : nth-of-type(an+b) {} 
/* 第一个 */
div : first-of-type {}
/* 最后一个 */
div : last-of-type {}
/* 权重：id,calss,tag: 高到低 */
div : 0,0,1
div .title : 0,1,1
div p.title : 0,1,2
div #active .title * : 1,1,2

(2) 盒模型

.box {
    width:100px;
    height:100px;
    border:1px solid;
    background:#ccc;
    padding:5px;
    margin:10px;
    box-sizing:border;
    /* width,height是包括了border,padding,margin的 */
    }
/* 盒模型属性不可继承 */
/* 文本属性，大小，颜色可以继承 */
###(3) 单位
/* 1. px:像素 ，绝对*/
/* 2. em:默认字号：font-size:16px,可以继承 */
/* 3.rem:根元素字号：font-size:16px,页面中其他地方，直接用rem引用保持一致 */
/* 4.vw,vh:视口单位，1vw=1/100视口视口宽度 */
/* 移动布局：rem + vw , 按IPHONE6 375px 来写，实际宽度750px */

3. js

(1) ECMAScript

// 1.数据类型:原始类型,引用类型
// 2.原始类型:number,string,boolean
// 3.引用类型:object,array,function,set,map
// 4.声明方式
// let 变量
// const 常量
// function 函数
// 5.作用域:块作用域,函数作用域,全局
// 作用域链:查询变量,用来向上找东西
// 6.流程控制
// 6.1 分支:if
//  双分支语法糖,写法: 条件 ? true : false;
//  多分支语法糖,写法: 
swich (){case } 
// 6.2 循环 
while(){};
do{}
while();
//  循环三条件:初始化,循环条件,更新条件
//  do-while,初始条件在外部
for (三要素) {};
array.forEach();
//数组
for (let item of arr) {};
//对象
for (let key in obj) { obj[key] };
// 7. 解析,针对对象和数据集合
// 模板 = 数据
// 重命名,如果变量已经存在
{a,b as b1} = {a:1,b:2};
[a,b] = [100,200];

(2) DOM

// 1.查询,基本已经不用
document.querySelectorAll();
document.querySelector();
getElementById.....
// 2.遍历:添加元素
// 父元素.append(el);
// 同级元素.after(el);
// 同级元素.before(el);
// 自身.remove();
// 等,看笔记,一共8个
// 3. classList:动态设置 class
ele.classList.add('a','b');
ele.classList.remove('a','b');
ele.classList.replace('a','b');
ele.classList.toggle('a');
// 4. dataset:自定义属性: 'data-'前缀
<div data-uname='admin'></div>
// dataset.uname,拿到自定义属性

(3) BOM

location.href="xxx.php"
location.assign()
// assign() : 页面替换,没有历史记录,没办法返回,一般银行等特殊情况下用

<!-- 有问题建议去 mdn 查询. -->