九阳真经前端篇——更新至ES6

最新推荐文章于 2023-02-08 11:09:45 发布

VIP文章太极梦龙

最新推荐文章于 2023-02-08 11:09:45 发布

阅读量538

点赞数

分类专栏： Vue 前端知识点

本文链接：https://blog.csdn.net/wyf521995/article/details/103232298

版权

HTML

HTML语义化

HTML语义化就是让页面内容结构化,它有如下优点:

易于用户阅读,样式丢失的时候能让页面呈现清晰的结构
有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重
方便其他设备解析,如盲人阅读器根据语义化渲染网页
有利于开发和维护,语义化更具有可读性,代码更好维护,与CSS关系更和谐

如:

<header>代表头部
<nav>代表超链接区域
<main>定义文档主要内容
<article>可以表示文章、博客等内容
<aside>通常表示侧边栏或嵌入内容
<footer>代表尾部

HTML5新标签(待补充)

有<header>,<footer><aside><nav><video><audio><canvas>等

CSS

盒子模型

盒模型分为标准和模型和怪异盒模型(IE盒模型)

box-sizing:content-box	//标准盒模型
box-sizing:border-box	//怪异盒模型

标准盒模型：元素的宽度等于style里的width+margin+border+padding宽度

如下代码，整个宽高还是120px

div{
   
    box-sizing: content-box;
    margin: 10px;
    width: 100px;
    height: 100px;
    padding: 10px;
}

怪异盒模型：元素宽度等于style里的width宽度

如下代码，整个宽高还是100px

div{
   
    box-sizing: border-box;
    margin: 10px;
    width: 100px;
    height: 100px;
    padding: 10px;
}

rem与em的区别

rem是根据根的font-size变化，而em是根据父级的font-size变化

CSS选择器

css常用选择器

通配符：*
ID选择器：#ID
类选择器：.class
元素选择器：p、a    等
后代选择器：p span、div a   等
伪类选择器：a:hover 等
属性选择器：input[type="text"]  等

css选择器权重

!important -> 行内样式 -> #id -> .class -> 元素和伪元素 -> * -> 继承 -> 默认

CSS3新特性(待补充)

transition:过渡
transform:旋转,缩放,移动或者倾斜
animation:动画
gradient:渐变
shadow:阴影
border-radius:圆角

行内元素和块级元素

行内元素(display;inline)

宽度和高度是由内容决定，与其他元素共占一行的元素，我们将其叫行内元素，例如：<span> 、 <i> 、 <a>等

块级元素

默认宽度由父容器决定，默认高度由内容决定，独占一行并且可以设置宽高的元素，我们将其叫做块级元素，例如：<p> 、<div> 、<ul>等

相对定位和绝对定位的区别

position:absolute

绝对定位：是相对于元素最近的已定位的祖先元素

position:relative

相对定位：相对定位是相对于元素在文档中的初始位置

Flex布局(待补充)

复习链接:https://juejin.im/post/5d428c5451882556dc30535c

BFC

复习链接:https://blog.csdn.net/wyf521995/article/details/103106913

简单描述

什么是BFC?

BFC格式化上下文，它是一个独立的渲染区域，让处于 BFC 内部的元素和外部的元素相互隔离，使内外元素的定位不会相互影响

如何产生BFC?

display: inline-block

position: absolute/fixed

BFC作用

BFC最大的一个作用就是：在页面上有一个独立隔离容器，容器内的元素和容器外的元素布局不会相互影响

解决上外边距重叠;重叠的两个box都开启bfc;
解决浮动引起高度塌陷;容器盒子开启bfc
解决文字环绕图片;左边图片div,右边文字容器p,将p容器开启bfc

水平垂直居中(待补充)

Flex布局

display: flex  //设置Flex模式
flex-direction: column  //决定元素是横排还是竖着排
flex-wrap: wrap     //决定元素换行格式
justify-content: space-between  //同一排下对齐方式，空格如何隔开各个元素
align-items: center     //同一排下元素如何对齐
align-content: space-between    //多行对齐方式

水平居中

行内元素：display: inline-block;
块级元素：margin: 0 auto;
Flex: display: flex; justify-content: center

垂直居中

行高 = 元素高：line-height: height
flex: display: flex; align-item: center

less,sass,styus三者的区别

变量

Sass声明变量必须是『$』开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号：分隔开。

Less 声明变量用『@』开头，其余等同 Sass。

Stylus 中声明变量没有任何限定，结尾的分号可有可无，但变量名和变量值之间必须要有『等号』。

作用域

Sass：三者最差，不存在全局变量的概念

Less：最近的一次更新的变量有效，并且会作用于全部的引用！

Stylus：Sass 的处理方式和 Stylus 相同，变量值输出时根据之前最近的一次定义计算，每次引用最近的定义有效；

嵌套

三种 css 预编译器的「选择器嵌套」在使用上来说没有任何区别，甚至连引用父级选择器的标记 & 也相同

继承

Sass和Stylus的继承非常像，能把一个选择器的所有样式继承到另一个选择器上。使用『@extend』开始，后面接被继承的选择器。Stylus 的继承方式来自 Sass，两者如出一辙。 Less 则又「独树一帜」地用伪类来描述继承关系；

导入@import
- Sass 中只能在使用 url() 表达式引入时进行变量插值
```
$device: mobile;
@import url(styles.#{
       $device}.css);
```
- Less 中可以在字符串中进行插值
```
@device: mobile;
@import "styles.@{device}.css";
```
- Stylus 中在这里插值不管用，但是可以利用其字符串拼接的功能实现
```
device = "mobile"
@import "styles." + device + ".css"
```

link与@import区别于选择(待补充)

<style type="text/css">
	@import url(CSS文件路径地址);
</style>
<link href="CSSurl路径" rel="stylesheet" type="text/css" /

link功能较多，可以定义 RSS，定义 Rel 等作用，而@import只能用于加载 css；

当解析到link时，页面会同步加载所引的 css，而@import所引用的 css 会等到页面加载完才被加载；

@import需要 IE5 以上才能使用；

link可以使用 js 动态引入，@import不行

多行文本的文本省略号(待补充)

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical

JavaScript

JS的几条基本规范

1、不要在同一行声明多个变量
2、请使用===/！==来比较true/false或者数值
3、使用对象字面量替代new Array这种形式
4、不要使用全局变量
5、Switch语句必须带有default分支
6、函数不应该有时候有返回值，有时候没有返回值
7、For循环必须使用大括号
8、IF语句必须使用大括号
9、for-in循环中的变量 应该使用var关键字明确限定作用域，从而避免作用域污染

JS引用方法

行内引入

<body>
  <input type="button" onclick="alert('行内引入')" value="按钮"/>
  <button onclick="alert(123)">点击我</button>
</body>

内部引入

<script>
  window.onload = function() {
   
    alert("js 内部引入！");
  }
</script>

外部引入

<body>
  <div></div>

  <script type="text/javascript" src="./js/index.js"></script>
</body>

注意:

1，不推荐写行内或者HTML中插入

JS的基本数据类型(待补充)

Undefined、Null、Boolean、Number、String、新增:Symbol

数组操作(待补充)

最低0.47元/天解锁文章

太极梦龙

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
九阳真经前端篇——更新至ES6

HTMLHTML语义化HTML语义化就是让页面内容结构化,它有如下优点:易于用户阅读,样式丢失的时候能让页面呈现清晰的结构有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重方便其他设备解析,如盲人阅读器根据语义化渲染网页有利于开发和维护,语义化更具有可读性,代码更好维护,与CSS关系更和谐如:<header>代表头部<nav>代表超链接区域...
复制链接

扫一扫