web前端开发
文章平均质量分 89
先在MDN上复习HTML、CSS等基本网页设计知识,然后学习Javascript实现动态交互,最后学习react框架的使用
msmxsd
这个作者很懒,什么都没留下…
展开
-
【JavaScript】标准库方法列举
正则表达式*(regular expression)*是一种表达文本模式(即字符串结构)的方法,有点像字符串的模板,常常用来按照“给定模式”匹配文本。是 JavaScript 的原生对象,同时也是一个构造函数,可以用它生成新的数组。对象是 JavaScript 原生提供的三个包装对象之一,用来生成字符串对象。组匹配:正则表达式的括号表示分组匹配,括号中的模式可以用来匹配分组的内容。,用来描述对象的属性,控制它的行为,比如该属性是否可写、可遍历等等。对象还可以当作工具方法使用,将任意类型的值转为字符串。...原创 2022-08-10 15:44:00 · 454 阅读 · 1 评论 -
【JavaScript】数据类型&语法整理(错误处理机制等)
就是第二个参数,以此类推。这个对象只有在函数体内部,才可以使用。对象:在函数体内部读取所有参数。包含了函数运行时的所有参数,原创 2022-08-10 15:36:26 · 357 阅读 · 0 评论 -
Ajax介绍和简单用法
Ajax是AsynchronousJavavascriptXML的缩写,被译为异步JavaScript和XML。链接https//juejin.cn/post/6894971793745182727。商业转载请联系作者获得授权,非商业转载请注明出处。转载 2022-07-15 17:25:00 · 165 阅读 · 0 评论 -
【JavaScript】内置对象
什么是内置对象JavaScript中的对象分为3种:自定义对象、内置对象、浏览器对象,其中前两种是JS基础内容,属于ECMAScript,浏览器对象是JS独有的。内置对象就是JS语言自带的供开发者使用的对象,提供了一些常用的或是最基本而必要的功能。Math对象Math对象不是一个构造函数,不需要用new来调用,而是直接使用里面的属性和方法。Math属性可参见MDNMath.PI 表示一个圆的周长与直径的比例,Math.PI=π≈3.14159Math.max() 函数返回一组数中的最大值,如原创 2022-04-16 11:27:31 · 4337 阅读 · 0 评论 -
【JavaScript】客户端 Web API
根据MDN网站学习记录笔记客户端 Web API一、Web API简介二、操作文档 Document2.1 DOM 基本介绍2.2 DOM基本操作2.3 动态购物单三、从服务器获取数据四、第三方API五、绘制图形六、视频和音频API七、客户端存储一、Web API简介应用程序接口(API)是基于编程语言构建的结构,它们抽象了复杂的代码,并提供一些简单的接口规则直接使用。Web API是主要针对浏览器的API,在JavaScript语言中被封装成了对象,通过调用对象的属性和方法就可以使用Web A原创 2022-04-10 11:19:40 · 1019 阅读 · 0 评论 -
【JavaScript】对象
Object 对象一、对象二、创建对象的三种方式2.1 利用字面量创建对象变量 vs 属性、函数 vs 方法2.2 利用new Object创建对象2.3 利用构造函数创建对象三、new 关键字四、遍历对象属性一、对象在JavaScript中,对象是一组无序的相关属性和方法的集合,所有事物都是对象,例如字符串、数组、数值、函数等。二、创建对象的三种方式2.1 利用字面量创建对象对象字面量:就是{},包含了表达对象的属性和方法。var obj = { uname:'elsie',原创 2022-04-09 15:44:43 · 767 阅读 · 0 评论 -
【JavaScript】JS中的预解析
JavaScript解析器在运行JavaScript代码的时候分为两步:预解析 和 代码执行(按顺序从上到下)。预解析:js引擎会把js里面所有的var和function提升到当前作用域的最前面。预解析分为 变量预解析 和 函数预解析变量预解析(变量提升):把所有变量声明提升到当前作用域的最前面,不提升赋值操作。函数预解析(函数提升):把所有函数声明提升到当前作用域的最前面,不调用函数。//函数提升,成功调用fun();function fun(){ console.log(num);原创 2022-04-08 21:55:42 · 622 阅读 · 0 评论 -
【JavaScript】序列动画
根据MDN网站学习记录笔记异步JavaScript一、项目目标二、项目流程三、效果展示四、章节小结4.1 通用异步编程概念4.2 异步JavaScript简介4.2 如何使用Promises4.3 实现基于Promises的API4.4 介绍worker一、项目目标二、项目流程三、效果展示四、章节小结4.1 通用异步编程概念一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行不同的任务。JavaScript一般来说是单线程的即使有多个内核,也只能在单原创 2022-04-08 20:56:40 · 1234 阅读 · 0 评论 -
【JavaScript】JavaScript对象(为弹球示例增加新功能)
根据MDN网站学习记录笔记JavaScript对象原创 2022-04-06 17:24:36 · 856 阅读 · 0 评论 -
【JavaScript】照片库
根据MDN网站学习记录笔记—— JavaScript的基础要件照片库一、项目简介二、项目流程三、效果展示四、章节小结while 和 do...whileJavaScript arrow functionJavaScript Array filter() 方法一、项目简介HTML中body部分如下:<h1>照片库</h1><div class="full-img"> <img class="displayed-img" src="images/pic原创 2022-03-28 18:22:26 · 882 阅读 · 0 评论 -
【JavaScript】笑话生成器
根据MDN网站学习记录笔记笑话生成器项目简介项目步骤效果展示总结项目简介点击“随机生成笑话”按钮时生成一则笑话。若“生成”按钮按下之前,你在“输入自定义的名字”文字框中输入了一个自定义名字,那么生成的笑话中原有的名字(李雷 / Bob)将被取代。通过选择国家名称的单选按钮来确定界面语言以及笑话中温度和重量的制式。点一次按钮,生成一个新故事。点一次生成一个……项目步骤初始化变量和函数放置事件处理器并补全补全result()函数效果展示总结......原创 2022-03-26 17:20:45 · 2093 阅读 · 0 评论 -
【CSS】定位、多列布局及响应式布局
根据MDN网站学习记录笔记网格和浮动定位定位原创 2022-03-23 23:44:05 · 1051 阅读 · 0 评论 -
【CSS】网格和浮动
根据MDN网站学习记录笔记网格和浮动网格网格网格是由一系列水平及垂直的线构成的一种布局模式,用于web的二维布局系统。利用网格,你可以把内容按照行与列的格式进行排版。一个网格通常具有许多的列与行,以及行与行、列与列之间的间隙,这个间隙一般被称为沟槽。......原创 2022-03-22 16:01:25 · 395 阅读 · 0 评论 -
【CSS】布局介绍及弹性模型
根据MDN网站学习记录笔记CSS排版介绍CSS布局正常布局流(Normal flow)display属性弹性盒子(Flexbox)Grid布局浮动定位表格布局多列布局弹性盒子flex模型说明设置主轴方向换行flex项的动态尺寸flex的缩写与全写水平和垂直对齐介绍CSS布局正常布局流(Normal flow)正常布局流(normal flow)是指在不对页面进行任何布局控制时,浏览器默认的HTML布局方式。每个元素被看作一个盒模型,元素大致分为以下两种类型:块级元素:内容宽度是父元素的100%,原创 2022-03-21 22:16:55 · 532 阅读 · 0 评论 -
【CSS】练习一:排版社区大学首页
根据MDN网站学习记录笔记排版社区大学首页项目简介字体文本样式化基础链接列表导航栏菜单代码展示效果展示小结项目简介字体下载一些免费的字体。字体应该严肃,正式,给人信任的感觉 —— 主体使用serif字体,对标题结合使用sans-serif 或者 slab serif会是不错的选择。使用合适的服务对着两种字体生成无死角的@font-face代码。将你的body字体应用到body,heading字体应用到heading。文本样式化基础设置全站网页 font-size 为 10px。使用相原创 2022-03-20 22:34:49 · 1549 阅读 · 0 评论 -
【CSS】样式化文字
根据MDN网站学习记录笔记样式化文字基本文本和字体样式基本文本和字体样式原创 2022-03-20 15:28:35 · 495 阅读 · 0 评论 -
【CSS】构建基础Ⅱ
根据MDN网站学习记录笔记CSS构建基础二处理不同方向的文本溢出CSS的值与单位长度处理不同方向的文本CSS中的书写模式是指文本的排列方向是横向还是纵向的。writing-mode 属性使我们从一种模式切换到另一种模式。writing-mode的三个值分别是:horizontal-tb :块流向从上至下。对应的文本方向是横向的。vertical-rl: 块流向从右向左。对应的文本方向是纵向的。vertical-lr: 块流向从左向右。对应的文本方向是纵向的。逻辑属性和逻辑值CSS最近原创 2022-03-19 13:08:02 · 655 阅读 · 0 评论 -
【CSS】构建基础Ⅰ
根据MDN网站学习记录笔记CSS构建基础理解层叠资源顺序优先级理解层叠层叠如何在定义不止一个元素的时候应用css规则。注意一个规则覆盖另一个规则时只覆盖相同属性。考虑以下三因素(存在优先级):重要程度优先级资源顺序资源顺序有超过一条规则,而且都是相同的权重,那么最后面的规则会应用。理解为后面的覆盖前面的。优先级有些规则在最后出现,但是却应用了前面的规则。这是因为前面的有更高的优先级 — 它范围更小,因此浏览器就把它选择为元素的样式。不同类型的选择器有不同的分数值,把这些分数相加就原创 2022-03-17 19:04:42 · 258 阅读 · 0 评论 -
【CSS】基本知识
根据MDN网站学习记录笔记CSS构建基础CSS基本语法使用类名多种选择符根据状态确定样式函数@规则速记属性应用CSS的方法通过link将css导入html内部样式表内联样式常见选择器级联规则专用规则CSS如何运行浏览加载网页DOMCSS无法解析时CSS 是用来指定文档如何展示给用户的一门语言——如网页的样式、布局、等等。CSS基本语法h1 { color: red; font-size: 5em;}由一个选择器selector开头,选择将要用来添加样式的HTML元素,然后输入{原创 2022-03-15 15:59:52 · 546 阅读 · 0 评论 -
【HTML】表格
HTML表格表格表格标签允许单元格跨越多行和列为表格中的列提供共同的样式高级特性HTML练习三:构建行星数据项目概述项目要求表格是由行和列组成的结构化数据集(表格数据),能够使你简捷迅速地查找某个表示不同类型数据之间的某种关系的值 。表格标签所有表格内容都包含在<table></table>标签中,<tr>代表一行,<td>一般表示一行中的单元格,一行中有几个<td>就有几列,<th>与<td>相似,th用于添加标题原创 2022-03-15 11:09:40 · 861 阅读 · 0 评论 -
【HTML】练习三:Mozilla醒目页面
根据MDN网站学习记录笔记图片视频嵌入项目准备项目要求代码片段展示示例演示项目准备下载HTML和图片保存在本地设备,准备图片(将其中三张变为400px宽和120px宽重命名)和 mdn.svg 一起作为further-info区内资源链接的图标和网站页眉的火狐图标。创建1200px宽的red-panda.jpg和600px宽的版本项目要求为 header 添加一个图标为主 article 添加一个视频为 further info 的链接添加响应式图片一张小熊猫的艺术照代码片段展示原创 2022-03-13 18:00:08 · 555 阅读 · 0 评论 -
【HTML】多媒体与嵌入
多媒体与嵌入一、概述二、HTML中的图片img元素alt属性宽度和高度图片标题通过为图片搭配说明文字的方式来解说图片CSS背景图片三、视频和音频内容video元素使用多个播放源以提高兼容性四、从object到iframe——其他嵌入技术五、为Web新增向量图六、自适应图片一、概述本模块要探索怎样用HTML来让你的网页包含多媒体,包括可以包含图像的不同方式,以及怎样嵌入视频,甚至是整个其他的网页。二、HTML中的图片img元素可以用<img> 元素来把图片放到网页上。它是一个空元素(不需原创 2022-03-13 16:53:02 · 1100 阅读 · 0 评论 -
【HTML】练习二:构建内容丰富的网页
构建内容丰富的网页一、项目准备二、项目简介三、代码展示四、效果展示五、总结一、项目准备下载assets.zip,其中包含:HTML、CSS以及页面中使用的图片。利用VScode来完成测验。二、项目简介本项目的任务是为“观鸟网”的主页添加结构化的元素,使其可以进行布局设计。需要添加的有:- 页眉(<header>),应充满页面宽度,并包含网站主标题、网站 logo 和导航栏菜单。样式生效后标题和 logo 应显示在在两边,导航栏在它们下方。- 主内容区域(<main>),应原创 2022-03-10 09:25:16 · 651 阅读 · 1 评论 -
【Web前端开发】——HTML练习一:标记信件
本次测验要求你为你一封写好的信做出标记,以测验你基础和高级的 HTML 文本格式化技能,包括超链接等等。此外将测验你对一些 HTML <head> 内容的熟悉程度。准备工作开始测验之前,请先下载信件的起始文本和CSS代码。然后用文本编辑器(我选择使用vs code)创建一个新的 .html 文件来进行测验。项目概要本项目中,你的任务为一封大学内网信件进行标记,这封信是研究人员对一名学生有关申请博士学位问题的回复。块/结构语义:你应该使用适当的结构来构造整体文档,包括doctype、原创 2022-03-09 19:44:46 · 761 阅读 · 0 评论 -
【Web前端开发】——(一)HTML:基本介绍
文章目录前言HTML介绍块级元素和内联元素属性多媒体与嵌入HTML表格总结前言HTML (HyperText Markup Language) 不是一门编程语言,而是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单,一切取决于开发者。它由一系列的元素(elements)组成,这些元素可以用来包围不同部分的内容,使其以某种方式呈现或者工作。HTML介绍块级元素和内联元素<em>和</em>使内容斜体强调块级元素:在页面中以块的形式展现 —— 相对于其前原创 2022-03-08 16:38:49 · 978 阅读 · 0 评论 -
【Web前端开发】——JavaScript基础
文章目录前言一、JavaScript是什么?二、JavaScript快速入门变量运算符条件语句和函数事件三、完善示例网页添加一个图像切换器添加个性化欢迎信息前言JavaScript 是一门编程语言,可为网站添加交互功能(例如:游戏、动态样式、动画以及在按下按钮或收到表单数据时做出的响应等)。一、JavaScript是什么?JavaScript(缩写:JS)是一门完备的动态编程语言。当应用于 HTML 文档时,可为网站提供动态交互特性。二、JavaScript快速入门变量变量是存储值的容器。原创 2022-03-03 08:24:19 · 409 阅读 · 0 评论 -
【Web前端开发】——HTML和CSS基础
HTML和CSS基础前言一、HTML元素嵌套元素空元素HTML文档详解标记文本标题元素段落元素列表链接二、CSSCSS规则集详解多元素选择不同类型的选择器字体和文本字体选择盒子模型文档体的格式图像居中前言超文本标记语言 (英语:Hypertext Markup Language,简称:HTML ) 是一种用来结构化 Web 网页及其内容的标记语言HTML 由一系列的元素(elements)组成,这些元素可以用来包围不同部分的内容,使其以某种方式呈现或者工作。一、HTML元素嵌套元素可以将一原创 2022-03-03 08:24:00 · 104 阅读 · 0 评论