Stephen-wzw-CSDN博客

原创《Head First HTML and CSS 》中英文下载链接

前言从今天开始会更新《Head First HTML and CSS 》学习笔记，这本书作为入门HTML和CSS是一个很好的选择，豆瓣评分9.2分。文末提供中英文书籍下载链接。学习原则慢一点。你理解的越多，需要记的就越少。做练习，自己记笔记。阅读“没有傻问题”部分。重要说明先从基本HTML开始讲起，再是基于标准的HTML5。并没有涵盖全部的HTML、CSS元素或者属性。提倡页面结构和页面表现分离。建议使用多种浏览器。通常使用标记名表示元素名。书里的练习非常重要。有意安排了许

2021-01-29 21:28:15 1131

原创 TCP 三次握手，四次挥手详解

1. TCP 的运输连接管理TCP 是面向连接的协议，它基于运输连接来传送 TCP 报文段。TCP 运输连接的建立和释放是每一次面向连接的通信中必不可少的过程。TCP 运输连接有以下三个阶段：建立 TCP 连接数据传送释放 TCP 连接[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-83QMg4UN-1623745486923)(./TCP运输连接管理.png)]TCP 的运输连接管理就是使运输连接的建立和释放都能正常地运行。TCP 的连接建立需要解决以下

2021-06-15 16:25:57 222

原创 Vue Cli4 热更新失效，浏览器不会自动刷新内容

Vue Cli4 热更新失效在VScode中，需要保存文件后自动刷新浏览器的内容，否则还得手动刷新浏览器，给开发造成极大的不便。我们要在项目根目录下找到vue.config.js（若没有这个文件，则新建一个），增加 hot: true。module.exports = { devServer: { port: 3000, open: true, hot: true,//自动保存 },}再重新加载项目即可。有时这样任然无法解决问题，原因好像在于版本问题。解决办法：

2021-04-20 19:38:22 4961

原创 JavaScript 数据结构与算法——第 2 章栈

2.1 栈数据结构栈是一种**后进先出（LIFO）**原则的有序集合。函数调用栈：A 调用 B，B 中又调用 C ，C 中又调用 D。会先将 A 压入栈，A 没有执行完，所以不会弹出栈在 A 执行过程中调用了 B ，会将 B 压入栈，这时候 B 在栈顶，A 在栈底如果这时候 B 可以执行完，那么 B 会弹出栈，但是 B 没有执行完，它调用了 C所以 C 会压入栈，并且在栈顶，而 C 调用了 D ，D 会压入栈顶当前栈顺序：栈底 A -> B -> C -&gt

2021-04-19 21:27:23 225

原创 JavaScript 数据结构与算法——第 1 章数组

1.1 创建和初始化数组有两种创建数组的方法：关键字：let arr = new Array()字面量：let arr = []1.1.1 访问元素和迭代数组求斐波那契数列的前为20个数字。已知斐波那契数列中第一个数字是1，第二个是2，从第三项开始，每一项都等于前两项之和。let fibonacci = [];fibonacci[1] = 1;fibonacci[2] = 2;for (let i = 3; i < 20; i++) { fibonacci[i] =

2021-04-19 20:34:04 203

原创 CSS3 flex 弹性盒布局

一、基本概念1.1 flexbox 是什么CSS3 的新布局模式，是一种当页面需要适应不同屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。flex 弹性盒是一个一维布局模型，可以在界面中的项目之间提供空间分布和强大对齐功能的布局方式。所谓一维布局模型是指：flex 在同一时刻只控制行或列。这和二维布局模型 Grid Layout （同时控制行和列）相反。1.2 flexbox 的两个轴flexbox 有两个轴——主轴和交叉轴。主轴由 flex-direction 属性定义，而交叉轴和主轴

2021-04-09 15:22:36 160

原创一文弄懂 CSS 定位：position

0、引言这份笔记是记录在 b 站上看到一个视频，讲 CSS 的定位方式，内容非常好，因此记录下来。视频地址见文末。1、为什么会有 positon 定位我们知道每个布局都是盒子，期望布局像搭积木一样，从上往下挨个堆盒子，就能完成各式各样的页面，然而多实现几个页面就会发现：文档流中任意一个元素位置调整都会影响后面的元素。有一种脱离文档流的解决办法就是浮动，但浮动规则的局限性很大，它会向左上角或右上角靠过去，可惜这两个方向并不是布局的全部。日益增长的网页复杂度，和落后的 CSS 布局方式之间的矛盾越来越大

2021-03-25 22:06:29 119

原创 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to crrent location: “/home“

在 Vue 项目中，重复点击路由时，控制台报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to crrent location: “/home”网上解决方案为只需在 router 文件夹下，添加如下代码：// src/router/index.jsconst VueRouterPush = Router.prototype.pushRouter.prototype.push = funct

2021-03-24 11:13:12 99

原创 Error: Cannot find module ‘webpack-cli/package.json‘

webpack安装后需要安装webpack cli：npm install -d webpack-cli运行后报错：Error: Cannot find module 'webpack-cli/package.json'解决方案：全局安装webpack-clinpm i -g webpack-cli成果解决：webpack -vwebpack 5.27.2webpack-cli 4.5.0...

2021-03-24 10:23:58 14695 16

原创改变border-bottom的长度

无法直接修改border-bottom的长度，不过可以通过设置伪元素来获得类似的效果。.active { color: #ed9d36; text-align: center;}.active::after { content: ''; width: 50%; height: 1px; display: block; margin: 0 auto; border-bottom: 2px solid #ed9d36; padding: 1px;}...

2021-03-23 20:20:35 9599

原创 CSS设置高度为百分比时，里面的元素居中

高度为百分比时，设置里面的元素居中/* 方法一 */.box { height: 25%; display: table;}.box>span { display: table-cell; vertical-align: middle;}/* 推荐使用方法二 */h1 { display: flex; align-items: center;}

2021-03-17 15:50:29 602

原创 CSS设置内容最多显示一行或者两行，超出部分显示...

最多显示一行、两行注意：需要是块级元素，否则不生效/* 显示两行 */div { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }/* 显示一行 */div { overflow: hidden; white-space: nowrap; text-overflow: e

2021-03-17 15:49:19 9244

原创 Vue给文件起别名——使用、报错及解决方法

文件路径引用在实战开发中，如果需要引用的文件层级很深，我们就可能遇到以下代码：<img src="../../../assets/image/home.icon"/>。如果后续项目文件路径变化了呢？那么就需要手动去修改每个文件中的路径，在项目初始阶段文件不多时，这样做还有可能；一旦文件增多，这样一个个修改路径就很麻烦。因此，我们需要在一开始时，就给文件夹起别名，这样不管层级多深或者文件路径更改，之后都直接用这个别名即可。Vue-Cli3在vue.config.js（如果没有，则在根目

2021-03-12 10:49:05 3291

原创 CSS设置内容超出宽度时，可以横向滚动，并且隐藏滚动条

内容超出，可左右滑动在这里只贴出CSS代码，关键是给父元素设置CSS属性。当一个块级元素的内容在水平方向发生溢出时，overflow-x决定应该截断溢出内容，或者显示滚动条，或者直接显示溢出内容。合法值：visible | hidden | scroll | autovisible：内容不会被截断，且可以显示在内容盒外hidden：内容会被截断，且不会显示滚动条scroll：桌面浏览器总是显示滚动条，无论内容是否发生溢出auto：取决于浏览器本身，当内容发生溢出时，桌面浏览器如Edge会显示

2021-03-10 09:53:28 22506 1

原创 Vue动态绑定class实现选中标签样式

设置选中标签样式在筛选列表中，当标签处于活跃时，需给定不同样式<template> <div class="category-selector"> <ul class="sort-type"> <li v-for="(item, index) in sortTypeTag" :key="index"> <a href="javascript:void(0);" @click="changeSortType(it

2021-03-10 09:24:05 1474

原创《Head First HTML and CSS》学习笔记——9、盒模型

盒模型CSS将每个元素看作由一个盒子表示，每个盒子由一个内容区（context area）以及可选的内边距（padding）、边框（border）、和**外边距（margin）**组成。内容区包含内容，内容区被可选的透明内边距包围，内边距周围可放置一个可选的边框，最后有一个可选的透明外边距包围所有部分。一些细节：外边距提供元素之间的间距，而内边距是在内容区周围增加额外的空间如果有一个边框，则内边距在边框的里面，而外边距在边框的外面由于内外边距是透明的，因此它们会呈现背景颜色或背景图片元素的背

2021-03-08 09:28:48 86

原创无法显示Echarts——Echarts引用方式

无法显示Echarts下为Echart.vue组件代码，是根据Echarts官网上的入门示例编写。<template> <div style="height: 100%" ref="echart">echart</div></template><script>export default { data() { return {}; }, methods: { initCharts() { //

2021-03-03 11:33:02 1178

原创《Head First HTML and CSS 》学习笔记——7、CSS入门

目录加一点样式CSS基本语法把CSS放入HTML中选择器创建一个CSS文件继承覆盖继承为单独的段落指定样式相关链接加一点样式从第一章到第六章，都是在学习HTML的相关知识，用来创建Web页面结构。从这一章开始学习CSS，来控制页面的表现。CSS基本语法假设有一所房子，主人要重新设计一到两个房间，看看他的想法吧：bedroom { drapes: blue; carpet: wool shag; }bathroom { tile: 1in white; drape

2021-03-01 20:58:48 127

原创《Head First HTML and CSS 》学习笔记——8、字体和颜色样式

目录文本属性字体引入Web字体字体大小字体粗细字体风格Web颜色Web颜色如何工作指定颜色的方法文本装饰相关链接文本属性首先宏观看一下哪些属性可以指定和改变字体的外观，再逐个学习各个属性需要注意的细节问题。font-family：字体body { font-family: Verdana, Geneva, Arial, sans-serif;}font-size：字体大小body { font-size: 14px;}color：文本颜色body { color

2021-03-01 20:56:58 138

原创《Head First HTML and CSS 》学习笔记——6、严肃的HTML

目录严肃的HTMLHTML5 doctype字符编码相关链接严肃的HTML这章学习最新的HTML5的一些知识，能确保HTML在所有浏览器上能有更一致的显示，页面能加载得更快，可以很好的结合CSS。HTML5 doctype在以前的HTML页面中，页面最上面使用了一个doctype，告诉浏览器所使用的HTML版本。下面给出HTML5 doctype：<!doctype html>。以后把他作为文档的第一行加到HTML文件中就行了。HTML5过人之处：HTML5是当前的HTML标准，

2021-02-19 10:09:41 89

原创《Head First HTML and CSS》学习笔记——5、认识媒体

目录认识媒体浏览器如何处理图像介绍元素相关链接认识媒体这一章将学习如何为页面添加第一个媒体类型：图像。会专门讨论<img>，学完这一章，就能全面地了解使用它及其属性的所有细节了。浏览器如何处理图像浏览器对<img>元素的处理和其他元素不同。以<h1>为例，浏览器在页面上看到这些标记时，只需要把它们显示出来就行了，而看到<img>时，浏览器在显示图像之前，必须先获取这个图像。下面以浏览器收到http://wickedlysmart.com/lounge

2021-02-17 15:36:25 94 1

原创《Head First HTML and CSS 》学习笔记——4、Web镇之旅

目录连接起来在Web上发布自己的网站找一家托管公司域名回到正题，URL什么是HTTP链接到其他Web页面锚点链接相关链接连接起来到目前为止，我们做的所有事情都是在自己的计算机上创建HTML页面，所链接的页面也都在自己的计算机上，这一章将讲解如何将自己的Web页面发布到互联网上以及链接的相关内容。在Web上发布自己的网站将网站发布到Web上，需要如下几个步骤：找一家托管公司。为你的网站选一个名字。想办法把文件从你的计算机上传到托管公司的服务器上。把你的新网站告诉你的朋友、家人和粉丝。

2021-02-17 11:10:26 94 2

原创《Head First HTML and CSS 》学习笔记——3、构建模块

目录构建模块认识新元素列表块元素和内联元素相关链接构建模块前面两章已经学了不少东西了：标记、元素、链接、路径……这一章主要将重点放在建设上：从概念到蓝图来设计Web页面，浇筑地基，完成建设，甚至最后还可以加几笔润色。全书代码见文末。<html> <head> <title>My Trip Around the USA on a Segway</title> </head> <body> <h1&

2021-02-14 15:47:34 94

原创《Head First HTML and CSS 》学习笔记——2、深入了解超文本

目录认识HTML中的“HT”Head First Lounge 改良了解属性组织目录结构技术难点相关链接未完待续。。。认识HTML中的“HT”上一章简单认识了HTML，知道它是一个标记语言（HTML中的"ML"），用来描述网页的结构，现在我们再来了解HTML中的"HT"，也就是超文本（hypertext）。它能让我们摆脱单个页面的束缚，链接到其他页面。顺便认识一个新元素——<a>元素。Head First Lounge 改良附录代码见文末。下载之后，查看文件夹“Chapter2/lo

2021-02-02 19:15:56 113

原创《Head First HTML and CSS 》学习笔记——1、Web语言

认识HTML超文本标记语言(HyperText Markup Language)，简称HTML。目录认识HTMLWeb工作流程Web服务器能做什么Web浏览器能做什么从Head First Lounge 学到的未完待续....Web工作流程要建立Web页面，需要创建HTML文件，把他们放在一个Web服务器上一旦把文件放在Web服务器上，任何浏览器就能通过互联网得到你的Web页面Web服务器能做什么每个服务器会存储HTML文件、图像、声音和其他类型的文件服务器就是一个连接到互联网的计

2021-01-30 00:11:18 226 2

原创 Axure 制作左侧导航栏实现三级菜单效果

Axure 制作左侧导航栏实现三级菜单效果先放入菜单的相关元件，可以使用矩形，设置相应样式。选中所有三级菜单，点击鼠标右键，选择转换为动态面板和设为隐藏，同时将面板命名为‘’ThreePanel‘’。选中二级菜单和刚才设置的ThreePanel，点击鼠标右键，选择转换为动态面板和设为隐藏，（此时为了方便起见，暂不设为隐藏）；之后，把这个新设置的动态面板命名为“Submenu”。再双击“SubMenu”，选中“二级菜单”，添加交互动作，首先点击右侧交互，再点击右下角按钮。出现

2021-01-25 15:13:49 4061 2

原创项目开发流程

目录[1.1 流程图](#1.1 流程图)[1.2 职能描述](#1.2 职能描述)[1.3 阶段描述](#1.3 阶段描述)1.1 流程图1.2 职能描述业务：指的是业务方或者需求方，如果是一家外包公司，那么这个业务大部分指的是甲方。设计：一般情况下，指的都是 UI 设计师，在大一些的互联网公司，还会有交互设计师这样的岗位。产品：指的是产品经理（统称），在公司里还会被进一步细分。开发：指的是研发工程师，比如前端工程师，后端工程师，ios/android 工程师等。测试：指的是测试

2021-01-23 16:12:20 77

原创 Vue 文件保存后，浏览器不自动刷新

Vue 文件保存后，浏览器不自动刷新在VScode中，需要保存文件后自动刷新浏览器的内容，否则还得手动刷新浏览器，给开发造成极大的不便。我们要在项目根目录下找到vue.config.js（若没有这个文件，则新建一个），增加 hot: true。module.exports = { devServer: { port: 3000, open: true, hot: true,//自动保存 },}再重新加载项目即可。...

2021-01-23 13:15:03 13960 12

原创 Echarts安装失败

npm 安装 Echarts 失败使用 npm 安装 Echarts ：npm install echarts --save安装后报错，原因在于使用的 Vue 版本和 Echarts 版本不兼容。我使用的 Vue 版本号为 @2.6.11，而 Echarts 版本号为 @5.0.1。进入 package.json 查看版本号。 "dependencies": { "axios": "^0.21.1", "core-js": "^3.6.5", "echarts": "

2021-01-23 12:57:49 5599 1

Wzw的博客