自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(27)
  • 收藏
  • 关注

原创 Cannot read property ‘init‘ of undefined

在项目中导入echarts插件时,报了这个问题:原因是版本高,导入方式有变化import * as echarts from ‘echarts’

2021-07-28 19:43:44 140 1

原创 JavaScript算法--数组

算法--数组一、创建数组二、访问数组三、添加/删除数组元素1、插入元素2、删除元素在任意位置添加或删除元素“二维”数组迭代二维数组的元素多维数组其它数组方法数组合并一、创建数组let day = new Array();或者let day = new Array(7);或者let day = new Array(‘sunday’,‘monday’,tueaday’,‘wednesday’);或者let day = [ ];或者let day = [‘sunday’,‘monday’,tu

2021-06-07 17:01:46 223

原创 练习:观鸟网(主要练习文档结构)

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>观鸟网</title> <link href="https://fonts.googleapis.com/css?family=Long+Cang|Noto+Sans+SC:300" rel="stylesheet"> <link rel="stylesheet" hre

2021-05-13 15:01:51 718

原创 练习:一封信

<!doctype html><html><head><meta charset="utf-8"><link rel="stylesheet" href="信件style.css"><title>回信</title></head><body> <address class="sender-column"> 中国北京市门头沟区,102300<br>

2021-05-13 15:01:27 130

原创 学习笔记(十二)HTML表格

表格基础表格表格高级特性标题基础表格<table></table>:每一个表格的内容都包含在这两个标签中;<td>列(单元格):在表格中,最小的内容容器是单元格, 是通过 <td> 元素创建的 (‘td’ 代表 ‘table data’).;<tr>行:如果想让这一行停止增加,并让单元格从第二行开始,我们需要使用 <tr> 元素<th>:表格中的标题是特殊的单元格,通常在行或列的开始处,定义行或列包含的数据类型。用

2021-05-13 15:00:54 658

原创 学习笔记(十一)自适应图片

自适应图片切换分辨率并切换图像一些有用的开发工具切换分辨率切换图像为什么我们不能使用 CSS 或 JavaScript 来做到这一效果?新图像格式总结自适应图片——一种可以在不同的屏幕尺寸和分辨率的设备上都能良好工作以及其他特性的图片切换分辨率并切换图像使用两个新的属性—srcset和sizes来提供更多额外的资源图像和提示,帮助浏览器选择正确的一个资源。<img srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w.jp

2021-05-06 15:25:38 399

原创 学习笔记(十)在网页中添加矢量图形

在网页中添加矢量图形矢量图和位图概念SVG是什么将SVG添加到页面矢量图和位图概念在网上,你会和两种类型的图片打交道 — 位图和矢量图:位图使用像素网格来定义 — 一个位图文件精确得包含了每个像素的位置和它的色彩信息。流行的位图格式包括 Bitmap (.bmp), PNG (.png), JPEG (.jpg), and GIF (.gif.)矢量图使用算法来定义 — 一个矢量图文件包含了图形和路径的定义,电脑可以根据这些定义计算出当它们在屏幕上渲染时应该呈现的样子。 SVG 格式可以让我们创造用

2021-05-06 15:24:53 493

原创 学习笔记(九)从对象到iframe - 其他嵌入技术

从对象到iframe - 其他嵌入技术嵌入的简史<iframe>嵌入的简史很久以前,很流行在网络上使用框架创建网站 — 网站的一小部分存储于单独的HTML页面中。这些被嵌入在一个称为框架集的主文档中,它允许您指定每个框架能够填充在屏幕上的区域,非常像调整表格的列和行的大小。这些做法在90年代中期至90年代后期被认为是比较酷的,有证据表明,将网页分解成较小的块,这样有利于下载速度 —尤其是在那时网络连接速度太慢的情况下更为明显。然而,这些技术有很多问题,随着网络速度越来越快,这些技术带来的问题远

2021-05-06 15:21:15 129

原创 学习笔记(四)web入门--HTML+CSS+JS+发布网站

web入门--HTML+CSS+JS+发布网站HTML基础知识CSS基础“CSS规则集”详解多元素选择不同类型的选择器字体和文本一切皆盒子JavaScript基础变量注释运算符条件语句函数事件小结发布网站==获取主机服务和域名==使用在线工具如 GitHub 或 Google App Engine通过GitHub发布使用像 Thimble 的基于 Web 的集成开发环境HTML基础知识标题图片段落列表无序列表(Unordered List)中项目的顺序并不重要,就像购物列表。用一个 &l

2021-05-06 15:11:33 671

原创 表格和列表的一些CSS属性

表格和列表的一些CSS属性表格的CSS:列表CSS:表格的CSS:表格的标题<caption>…</caption>会到表格的下面table{ caption-side:bottom;}表格单元格只有内边距和边框,没有外边距,但是有边框间距(border-spacing)折叠边框:table{ border-collapse:collapse}列表CSS:改变无序列表的项目符号:li{ list-style-type:disc}

2021-05-03 21:36:05 68

原创 CSS3新特性---应用多重背景和使用渐变背景

CSS3新特性---应用多重背景和使用渐变背景应用多重背景使用渐变背景为元素设置不透明度应用多重背景输入background-color:b,这里b是指希望元素应用的备用颜色输入background-image:u,u,u,这里的u是url列表,中间用逗号隔开输入background-position:p,p,p,这里的p是成对的x-offset和y-offset,用逗号分隔输入background-repeat:r,r,r,,指的是repeat-x、repeat-y、no-repeat,用逗号

2021-05-03 20:56:06 404

原创 CSS---Web字体

CSS---Web字体在哪里?自托管Web字体服务从Font Squirrel下载Web字体应用字体使用Google Fonts的Web字体在哪里?自托管自托管Web字体来源于你的服务器,就像其他资源(如图像、CSS文件)一样。如果需要与字体相关的花费,通常也是一次性的购买支出,是否将字体文件上传到网站上并将其包含到代码中取决于你自己。其中有一些自托管字体来源:Font Squirrel(www.fontsquirrel.com)MyFont(http://myfonts.com)The Le

2021-05-03 20:15:16 266

原创 CSS---视觉区域和屏幕区域的不同及meta元素

CSS---视觉区域和屏幕区域的不同及meta元素视觉区域与屏幕区域meta元素视觉区域与屏幕区域视觉区域viewport指的是浏览器显示页面的区域,不包含浏览器及地址栏、按钮等。媒体查询的width特性对应的是视觉区域的宽度。而device-width指的是屏幕的宽度。在移动设备上,默认情况下这两个值不同。比如Mobile Safari(iphone的浏览器)的视觉区域默认是980像素,而iphone的屏幕宽度只有320像素。因此,iphone会像设为980像素宽的桌面浏览器那样显示页面,并将页面

2021-05-03 17:31:07 228

原创 CSS---媒体查询语法

CSS---媒体查询语法有两种方式:一种是用link标签,然后通过media属性控制选择,即指向外部样式表链接。语法如下:<link rel="stylesheet" media="logic type and (feature:value)" href="your-stylesheet.css" >另一种是位于样式表中的媒体查询。语法如下;@media logic type and (feature:value){/*目标CSS样式规则*/}其中代码组成部分释义如下:

2021-05-03 17:13:39 176

原创 CSS---浏览器自定添加连字符

可以手动插入软连字符&shy。也可以使用新的属性hyphens属性,让浏览器自动插入连字符,但IE10之前版本、安卓设备中内置的WebKit浏览器,甚至基于Blink的Chrome和Opera都根本不支持hyphens要想使用自动连字符功能,需要以下两点:设置语言代码 <html lang=“en”>将CSS相关元素的hyphens设置为auto;p{ hyphens:auto;}要关闭连字符,可以将hyphens设为manual。...

2021-05-02 16:29:00 291

原创 CSS---定位与浮动

CSS---浮动浮动能将一个元素拉到容器的一侧,这样文档流就可以包围它。

2021-05-01 21:46:50 162

原创 CSS---将全局修改盒模型为border-box

将全局修改盒模型为border-box,CSS代码如下:/*根元素设置为border-box*/:root{ box-sizing:border-box;}/*其他所有元素和伪元素继承其盒模型*/*,::before::after{ box-sizing:inherit;}

2021-05-01 11:13:19 685

原创 学习笔记(八)视频和音频内容

视频和音频内容<vidio>例:<video src="rabbit320.webm" controls> <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p></video><video> 标签内的内容这个叫做后备内容 — 当浏览器不支持 <video> 标签的时候,就会显示这段内容,这使得我们能够对旧的浏览器

2021-04-30 20:28:21 267

原创 学习笔记(七)多媒体嵌入--HTML中的图片

多媒体嵌入--HTML中的图片src属性alt属性width和height属性title属性为图片搭配说明文字CSS背景图片总结src属性<img src=" "> ,src属性包含指向我们想要引入图片的路径:相对路径绝对路径建议使用相对路径,否则,会让浏览器做更多的工作。通常我们都会把图片和 HTML 放在同一个服务器上。警告:不能盗版alt属性alt属性的值应该是对图片的文字描述,用于在图片无法显示或不能被看到的情况。width和height属性宽度和高度属性来指定你

2021-04-30 20:28:04 105

原创 学习笔记(六)---文档与网站结构+HTML调试

文档与网站架构文档基本组成部分页眉通常横跨于整个页面顶部有一个大标题 和/或 一个标志。 这是网站的主要一般信息,通常存在于所有网页。导航栏指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏,导航栏通常应在所有网页之间保持一致,否则会让用户感到疑惑,甚至无所适从。许多 web 设计人员认为导航栏是标题栏的一部分,而不是独立的组件,但这并非绝对;还有人认为,两者独立可以提供更好的 无障碍访问特性,因为屏幕阅读器可以更清晰地分辨二者。主内容中心的大部分区域是当前网页大多

2021-04-30 20:27:34 208

原创 学习笔记(五)--学习高级文字排版,理解语义化

HTMLhead元数据:disabled表示不可以输入,输入框会变成灰色<input type="text" disabled="disabled">下面方式也可以:<!-- 使用disabled属性来防止终端用户输入文本到输入框中 --><input type="text" disabled><!-- 下面这个输入框没有disabled属性,所以用户可以向其中输入 --><input type="text">产生效果:

2021-04-30 20:26:02 213

原创 学习笔记(三)关于Web的一些基础知识

Web入门安装基础软件设计网页外观上传或保存文件总结安装基础软件计算机文本编辑器,可以是 纯文本编辑器Visual Studio Code、Sublime Text、Atom、Brackets、GNU Emacs 或 VIM;也可以是混合编辑器 Dreamweaver 或 WebStorm。Web浏览器,用来测试代码。有Firefox,Chrome,Opera, Safari,Internet Explorer 和 Microsoft Edge。图像编辑器,像 GIMP、Paint.NET、Ph

2021-04-30 20:18:00 259

原创 学习笔记(二)主要是一些HTML的标签学习

HTML什么是HTMLHTML标签HTML标题HTML段落HTML链接HTML 图像HTML元素HTML属性标签实例HTML标题标准属性时间属性HTML水平线HTML注释标签段落标签拆行clear属性什么是HTMLHTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言,而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网

2021-04-30 20:16:55 644 2

原创 学习笔记(一)前后端的基础理论

学习笔记(4.17)基础理论访问一个网址的过程HTML是一种标记语言,在论坛上天机阿德富文本内容(论坛代码)也是一种标记语言如果不加css,页面效果如下图所以很多时候我们需要自定义样式,现行通用的规定样式的语言是CSSCSS代码的基本格式是属性:值HTML5和XHTMLJavaScript是做动态效果的,所谓的AJAX是不用刷新就能与服务器进行交互,更新页面...

2021-04-30 20:12:48 907 4

原创 利用视口相对单位定义字号

视口的相对单位基本概念使用视口单位定义字号基本概念CSS中除了相对font-size定义的em和rem这类相对单位,还有相对于浏览器视口定义长度的视口的相对单位视口指的是浏览器窗口里网页可见部分的边框区域,不包含浏览器的地址栏、工具栏、状态栏。有以下四种相对单位:vh:设置高度vw:设置宽度vmin:设置宽、高中较小的一方vmax:设置宽、高中较大的一方以上单位的值都是0-100的数字,相当于视口的宽、高都为100。例如:50vw等于视口宽度的一半;25vh等于视口高度的1/4;vmi

2021-04-30 20:03:04 196 1

原创 CSS---盒模型

CSS----盒模型一、基本概念二、关于背景的属性三、详细设置1.内边距和外边距2.边框四、box-sizing:border-box五、多样式表1.使用多个样式表2.选择样式表一、基本概念从css的角度看,每个元素就是一个盒子,每个盒子由内容区(content area)以及可选的内边距(padding)、边框(border)和外边距(margin)组成。内容区:每个元素都会有一些内容,如文本或图像。在内容区中,内容和盒子边缘之间没有空间。内边距:可选。可以在内容和边框之间创建一些空间,内边距

2021-04-30 17:50:23 110

原创 CSS---为文本添加样式

层叠、优先级和继承层叠层叠

2021-04-29 21:04:45 904

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除