html基本知识点（看了就能懂）

一、axios下载引入

cnpm i axios --save

import axios from "axios"; Vue.prototype.$axios = axios;

二、ElementUI下载

cnpm i element-ui --save

import ElementUI from "element-ui"; import "element-ui/lib/theme-chalk/index.css"; Vue.use(ElementUI);

npm i element-plus --save import ElementPlus from 'element-plus' import 'element-plus/dist/index.css'

三、vant下载

vue3 cnpm i vant@next --save

import Vant from "vant"; import "vant/lib/index.css"; createApp(App).use(store).use(router).use(Vant).mount('#app')

vue2 cnpm i vant --save

import Vant from "vant"; import "vant/lib/index.css"; Vue.use(Vant);

四、本地存储

cnpm i vuex-persist --save 在store里引入 import vuexPersist from "vuex-persist";

plugins: [ new vuexPersist({ storage: window.localStorage, }).plugin, ],

五、rem转化

1）安装三个插件

这我们使用自动将 px 单位转化为 rem 单位的插件
安装命令 npm install postcss --save-dev npm install postcss-pxtorem@5.1.1 --save-dev 可以将 px 单位自动转化为 rem 单位注：--save-dev 是安装在开发环境下项目打包的时候不会被打包进dist文件夹 --save 的意思是安装在生产环境下项目打包的时候会被打包进 dist文件夹
还需要安装 npm i amfe-flexible --save 安装引入后单位转化才可以使用要安装三个东西 px才能自动的转化为 rem 这些工具帮助我们自动的实现移动端的适配

在 main.js 中引入 amfe-flexible

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "amfe-flexible";  //rem转化的工具
createApp(App).use(store).use(router).use(Vant).mount("#app");

3）

在项目根目录下创建一个 postcss.config.js

// 该文件项目启动后会自动运行
// postcss.config.js
module.exports = {plugins: {// postcss-pxtorem 插件的版本需要 >= 5.0.0"postcss-pxtorem": {rootValue({ file }) {// 判断是否是vant的文件 如果是就使用 37.5为根节点字体大小// 否则使用75 因为vant使用的设计标准为375 但是市场现在的主流设置尺寸是750return file.indexOf("vant") !== -1 ? 37.5 : 75;},// 配置哪些文件中的尺寸需要转化为rem *表示所有的都要转化propList: ["*"],},},
};

六、安装git

百度 搜索 git
代开git官网
下载 -- 一路回车安装

桌面点击右键 -- git bash

注册gi te e并且新建仓库

百度 打开 码云

注册  ---- 进入 码云


新建远程仓库：右上角 + ,新建仓库

克隆远程仓库到本地

桌面新建文件夹，文件夹内 右键 git  bash
git clone '远程仓库地址'
例如： git clone https://gitee.com/courseP7/asdv.git

本地到远程 *
```
1. git add . 将本地的暂存
2. git commit -m "描述信息"git config --global user.email "你的邮箱"git config --global user.name "你的名字"
3. git push 
```
七、css的引入方式有哪些？

行内样式表（行内式）格式：<p style=""></p> 内部样式表（内嵌式）格式：<style> p { color: red; } </style> 外部样式表（外链式）格式：<link rel="stylesheet" href="" /> 导入样式表（导入式）格式：@import url("")

八、选择器的分类及优先级?

基础选择器：全局选择器（通配符选择器）、标签选择器、id选择器、类选择器复合选择器：链接伪类选择器 Css选择器优先级。 ID选择器 > 类选择器 > 标签选择器 > 全局选择器

九、长度单位px和em的区别？

都是相对长度单位，但

px，是相对于显示器的屏幕分辨率而言的 em，是相对于当前对象内文本的字体尺寸。1em就是一个字的大小。

十、文字样式属性有哪些?

font-size  文字大小

font-family 文字的字体 font-weight 文字粗细 font-style 文字样式（倾斜） color 文字颜色

十一、英文字母大小写转换？

text-transform: capitalize； /* 首字母大写 */

text-transform: lowercase； /* 全部小写 / text-transform: uppercase； / 全部大写 */

十二、文字的装饰效果及属性？

text-decoration属性属性值：none(默认)/overline(上划线)/line-through(删除线)/underline(下划线)

十三、设置中英文之间字词的间距

   word-spacing: 词间距   英文单词之间letter-spacing:字间距    所有字符之间

十四、设置段落的垂直对齐方式

vertical-align: top(顶端对齐)/middle(居中对齐)/bottom(底部对齐)/baseline(基线对齐);

十五、页面导入样式，使用link和@import有什么区别？

1）从属关系: link是标签，@import是css提供的. 2）加载差异: link：结构和样式同时加载；而@import 先加载结构，后加载样式 3) 兼容性:link没有兼容问题，@import不兼容ie5以下的浏览器. 4) 可操作性: link可以通过js操作dom插入link标签改变样式，而@import不能

十六、为什么要初始化CSS样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异

十七、style标签写在body前和body后有什么区别？

写在body前页面加载自上而下当然是先加载样式. 写在body后后加载样式（可能会出现页面闪烁问题）

十八、vue2json 代码片段

{ // Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. // Placeholders with the same ids are connected. // Example: // "Print to console": { // "scope": "javascript,typescript", // "prefix": "log", // "body": [ // "console.log('$1');", // "$2" // ], // "description": "Log output to console" // } "Print to console": { "scope": "vue", "prefix": "vue", "body": [ "<template>", " <div class='$1'></div>", "</template>", "", "<script>", "export default {", " data() {", " return {};", " },", " created() {},", " methods: {},", " components:{}", "};", "</script>", "", "<style lang='scss'>", "", "</style>", "" ], "description": "Log output to console" } }

十九、vue3json代码片段

{ // Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. // Placeholders with the same ids are connected. // Example: // "Print to console": { // "scope": "javascript,typescript", // "prefix": "log", // "body": [ // "console.log('$1');", // "$2" // ], // "description": "Log output to console" // } "Print to console": { "scope": "vue", "prefix": "vue", "body": [ "<template>", " <div class='$1'></div>", "</template>", "", "<script>", "import { ref, reactive, toRefs } from 'vue';", "import { useStore } from 'vuex';", " import { useRouter, useRoute } from 'vue-router';", " export default {", "setup(props, ctx) {", "const data = reactive({});", "return { ...toRefs(data) };", " },", " };",

  "</script>","","<style lang='scss'>","","</style>",""
],
"description": "Log output to console"

} }

二十、封装axios请求

import Axios from "axios" 加载 import { Toast } from "vant"; const app=Axios.create({ baseURL:"", // timeout:5000, })

app.interceptors.request.use( (config)=>{ Toast({ message: '加载中...', icon: ‘’ }); return config }, (err)=>{ return Promise.reject(err) } ); app.interceptors.response.use( (res)=>{ if (res.data.code == 0) { Toast.clear(); } return res }, (err)=>{ return Promise.reject(err) } ); export default app

封装管理接口 import http from "./http.js" async function getbanner(){ let {data} =await http.get("/banner/list") return data }

export {getbanner}

二十一、vue脚手架安转

第一步：查看node 版本号如果低于版本10 的话安装最新版node

如果没有cnpm 的话需要安装cnpm 如果已经安装过cnpm 可以跳过

安装cnpm的命令是：

npm install -g cnpm --registry=https://registry.npm.taobao.org

第二步：cmd终端中安装vue脚手架 cnpm i @vue/cli -g

安装成功后可以执行 vue -V (注意：-V 是大写) 查看vue版本号来检测是否成功

第三步：

创建项目：在想要创建项目的文件夹中打开终端，执行 vue create demo （demo是要创建的项目的名称）

如果出现如下界面输入y 意思是问你要不要使用淘宝镜像，没有这个界面的话执行下一步就行

第一个界面选择如下意思是

第一次创建项目需要手动选择项目配置上下键进行切换按回车键执行下一步

第二个界面按如下用空格键进行选择，用上下键切换意思是选择项目的配置和功能

第三个界面选择vue的版本我们要选择第二个版本

第四个界面问你选择的路由的模式输入n 按回车下一步就行

第五个界面选择如下

第六个界面意思是问你把配置文件分开放还是放在一起

第七个界面：是不是要把你刚才的配置存下来并且起一个名字，下次再次执行 vue create xxx命令创建项目的时候就可以直接使用这个保存下来的模版了

第八个界面：项目创建成功执行提示的两个命令（cd xxx 和npm run serve）就可以开启vue的项目啦！！！

二十二、表格的结构

<table> <caption>表格标题标签</caption> <thead> <tr> <th>表头单元格标签</th> </tr> </thead> <tbody> <tr> <td>单元格标签</td> </tr> </tbody> </table>

二十三、单元格的合并属性?

跨列合并colspan 跨行合并rowspan

二十四、无序列表的type取值有哪些？默认是什么？

disc 实心圆（默认）、circle 空心圆、square 小方块

二十五、列表标签分为哪几种？（定义列表的结构？）

有序 <ol> <li></li> </ol> 无序 <ul> <li></li> </ul> 自定义 <dl> <dt></dt> <dd></dd> </dl>

二十六、Form表单中单选按钮如何实现单选效果？

设置相同的name值 <input type="radio" name="sex" />男 <input type="radio" name="sex" />女

二十七、复选框和单选按钮默认被选中的属性是什么？下拉框中的选项默认被选中是什么？

1) checked 2) selected

二十八、form中method属性的属性值有哪两个？优缺点是什么？

1) get 安全性低、传输量小、速度快 2) post 安全性高、传输量大、速度慢

二十九、写出四个为按钮类型的表单控件。

提交按钮：<input type="submit" /> 重置按钮：<input type="reset" /> 普通按钮：<input type="button" /> 图片提交按钮：<input type="image" src="路径" />

三十、label标签怎么写？它的作用是什么？

1) 方法一： <label> <input type="checkbox" /> 学习 </label> 方法二： <label for="sex">男</label> <input type="radio" name="sex" id="sex"> 2) 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

三十一、五大浏览器及其内核

IE trident 火狐（firefox） gecko 谷歌（chrome） blink 苹果（safari） webkit 欧朋（opera） blink

三十二、web三大标准

html 结构 css 表现 js 行为

三十三、html的结构/骨架标签

<html>

   <head><meta charset="UTF-8"><title></title></head>

三十四、标签的分类及语法

单标签：<标签名/> 双标签：<标签名></标签名>

三十五、标签的关系

嵌套关系（父子关系）并列关系（兄弟关系）

三十六、什么是标签语义化，标签语义化的好处是什么？

所谓标签语义化，就是指标签的含义好处：

   1. 方便代码的阅读和维护2. 让浏览器或是网络爬虫可以很好地解析3. 具有更好地搜索引擎优化

7、超链接的target属性是什么作用？它有哪些属性值？目标窗口的打开方式 _self 默认值，在自身窗口打开 _blank 在新窗口中打开 8、链接标签的注意事项。 1. 外部链接需要添加 http:// www.baidu.com 2. 内部链接直接链接内部页面名称即可，比如 < a href="index.html"> 首页 </a > 3. 空连接， < a href="#"> 空链接</a > 4. 网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

   #### 三十七、html注释标签是什么？（一句话总结注释标签。）

html： css:/* */ 注释是为了更好的解释这部分代码的作用，程序是不执行这个代码的。

#### 三十八、一句话总结相对路径？相对路径就是 目标文件 位于 HTML 页面的位置。#### 三十九、Doctype作用? 严格模式与混杂模式如何区分1、文档类型声明，用于告知浏览器以何种模式来渲染文档2、严格模式和混杂模式的区别：严格模式：页面排版及 JS 解析是以该浏览器支持的最高标准来执行混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容

四十、常用的转义字符有哪些 ?

&nbsp;　　不断行的空格
&ensp;　　半方大的空格
&emsp;　  全方大的空格
&lt;　　　  小于 <
&gt;　　　 大于 >
&copy;  版权

四十一、什么是超链接？及他的属性？

<a></a>    用于连接两个网页
href    跳转目标
target  目标窗口的打开方式           _self (默认)       _blank(在新窗口打开)

四十二、target属性值有哪些？

_self（默认 在本身页面打开目标窗口）    _blank（在新窗口打开目标窗口）

四十三、标题标签的对齐方式

align=”left/center/right”
Css中 text-align: left/center/right;

四十四、图片标签及属性？

<img/>
属性值：src 指定图片路径；title 提示文本；alt 替换文本；border 边框；width 宽度；height 高度；

四十五、块级元素、行内元素、行内块元素的特点及转换？

块级元素（div,p,h1-h6,ul, li）： 1. 可以设置宽高、内边距、外边距 2. 独占一行 3. 可以包含块级、行内元素和文本行内元素 (span,a,em)： 1. 不可以设置宽高,宽高由内容撑开，margin上下无效 2. 一行显示多个 3. 只能包含行内元素和文本（注意：a标签不能包含a标签）

行内块元素（img）： 1. 可以设置宽高、内边距、外边距（块级特点） 2. 一行显示多个（行内特点）

相互转换：display:inline(行内元素)/block(块级元素)/inline-block(行内块元素)/none(不显示);

四十六、怎么计算盒子模型的大小（宽高）？

标准盒模型：实际的大小=width/height(内容content)+padding+border box-sizing: content-box;

怪异盒模型：实际的大小=width/height(内容content+padding+border) box-sizing: border-box;

四十七、关于居中

text-align: center; 文本水平居中（行内元素、行内块元素） margin: 0 auto; 块级元素水平居中 line -height：；单行文本垂直居中（行高=盒子高） vertical-align: middle ; 段落的垂直居中（针对行内元素、行内块元素有效）

四十七、边框的综合设置。

border : border-width || border-style || border-color border: 1px solid red;

四十八、Ps常用快捷键

文件--打开 -- 可以打开我们要测量的图片 ctrl+r 可以打开标尺或者视图 -- 标尺右击标尺，把里面的单位改为像素 ctrl+ 加号键可以放大视图 ctrl+ 减号缩小视图按住空格键，鼠标可以变成小手，拖动 ps 视图用选区拖动可以测量大小 ctrl+ d可以取消选区或者旁边空白处点击一下也可以取消选区

四十九、上下margin重合的问题

1、相邻块元素垂直外边距的合并解决方案：尽量给只给一个盒子添加margin值 2、嵌套块元素垂直外边距的合并（塌陷）解决方案：可以为父元素定义上边框。可以为父元素定义上内边距可以为父元素添加overflow:hidden。

五十、css的复合属性:一个属性后面可以放置多个属性值

margin：10px 20px; padding: 10px 20px; background: #ddd url() no-repeat; border:1px solid #ddd; font: 12px/1.5 "微软雅黑",TimesNewRoma;

五十一、什么是浮动，浮动属性有哪些属性值。

浮动是指设置了浮动的元素会脱离标准流的控制（脱标），并移动到指定位置。 left（左浮动）right（右浮动）none（默认）

五十二、float 对块属性标签的影响？

1、设置浮动后，一行可以显示多个块级元素，且中间没有间隙。 2、设置浮动后，默认转换为类似于行内块的显示模式，所以元素没有设置宽高时，默认由内容撑开

五十三、浮动的特性

1、脱标、不占位置 2、多个盒子设置浮动后，会一行内显示且顶端对齐排列。 3、浮动元素会具有行内块元素的特性。

五十四、清除浮动的几种方式。

0、加高法：给父元素设置高度 1、额外标签法：在浮动元素的末尾添加一个空的标签给这个标签设置clear:both;

   <div style="clear:both;"></div>

2、溢出法: 可以给父级添加 overflow为 hidden/auto/scroll 都可以实现。 3、::after 伪元素方式 .clearfix:after{ content:""; display:block; clear:both; } .clearfix {*zoom:1;} //IE6-7不支持伪元素，通过zoom触发haslayout

4、双伪元素.clearfix:before,.clearfix:after { content:"";display:block; }.clearfix:after {clear:both;}.clearfix {*zoom:1;     //IE6-7不支持伪元素，通过zoom触发haslayout}

五十五、 ::before和:before有何异同？

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素伪类: 用于已有元素处于某种状态时为其添加对应的样式。伪元素: 用于创建一些不在DOM树中的元素，并为其添加样式。伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。相同点: :befor和::before写法是等效的，:before是CSS2的写法，::before是CSS3的写法不同点: :before的兼容性要比::before好，不过在H5开发中建议使用::before比较好

五十六、定位 position的值有哪些?

static 静态定位（默认）：可以理解为没有定位，
relative 相对定位：相对于自己原来的位置，依然占据原来的位置
absolute 绝对定位：相对于最近的有定位的祖先元素定位的，如果父元素没有设置定位，则参照浏览器定位，脱标不占位，“子绝父相”
fixed 固定定位：始终相对于浏览器的可视窗口，脱标不占位

五十七、z-index的特性? / Z-index熟悉在使用的时候注意什么?

1、值可以是正整数、负整数或0，数值越大，盒子越靠上；
2、如果属性值相同，则按照书写顺序，后来居上；
3、数字后面不能加单位。
4、`z-index` 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

五十八、文字溢出显示省略号

   Width:200px; 先强制一行内显示文本    white-space:nowrap; (不换行)再超出部分隐藏      overflow:hidden;最后用省略号代替超出部分   text-overflow:ellipsis;

五十九、display和visibility的异同

相同：都可以隐藏元素
不同：display隐藏的元素不占用地方，visibility元素隐藏了但是依旧占据原有位置

六十、在任何浏览器中，图片都会有间距，如何解决

根本原因在于img标签是行内块元素，该元素默认垂直对齐方式为以父元素的基线，但是展示时又是以bottomline为对齐方式，因此造成了上下两个img标签之间的间隙
解决方案:1. 将其改变为block元素img { display:block}2. 改变其垂直对齐方式   img {vertical-align:top/middle/bottom; }   3. 把父元素的文字大小设置为0div {font-size:0};

六十一、用纯CSS创建一个三角形的原理是什么

首先，需要把元素的宽度、高度设为0。然后设置边框样式为透明，代码如下:
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

六十二、怎么样让一个元素消失

1、opacity：0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
2、visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件 可见：隐藏
3、display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉。
4、设置宽和高为0，设置透明度为0，设置z-index的值为-1000
5、设置text-indent的值为-9999px

六十三、CSS Sprites（精灵图，雪碧图）使用步骤

使用步骤: 1. css 精灵图，把一堆小的图片整合到一张大的图片（png）上 2. 再利用css的"background-image","background-position"的组合进行背景定位为什么要使用css sprites: 1. 减少请求次数，减轻服务器压力 2. 体积小缺点： 1. 合并图片麻烦 2. 维护麻烦

六十四、 CSS overflow属性溢出元素内容区的内容会如何处理？

参数是scroll时候，必会出现滚动条
参数是auto时候，有超出部分的时候出现滚动条
参数是visible时候，溢出的内容出现在父元素之外
参数是hidden时候，溢出隐藏

六十五、属性选择器

E[att]     选择具有att属性的E元素
E[att="val"] 选择具有att属性且属性值为val的E元素
E[att^="val"]    选择具有att属性且属性值以val开头的E元素
E[att$="val"]    选择具有att属性且属性值以val结尾的E元素
E[att*="val"]    选择具有att属性且属性值中包含val的E元素

六十六、伪类选择器

fo si te chai ou 的 :first-child 匹配父元素中的第一个子元素 :las5t-child 匹配父元素中的最后一个子元素 :nth-child(n) 匹配父元素中的第几个子元素 :first-of-type 指定类型E的第一个 :last--of-type 指定类型E的最后一个 :nth--of-type(n) 指定类型E的第n个