让学前端不再害怕英语单词(一)

news2025/7/22 14:05:28

有很多跟着我学习的学生经常跟我抱怨前端的单词很多,学了css又忘了html的单词,学了js又忘了css 的单词,所以本着给跟着我学习的学生提供一个学习前端不怕英语单词的课程,就打算写一篇博客去讲述如何增强在学习前端的时候巩固语法并且加强对英语单词的熟悉度

这一章节我们先讲下html,css和js的部分重点单词和联想记忆法

ps:自学团里的同学可以找我要typora文档

html

html全称Hyper Text Markup Language,即超文本标记语言
Hyper 超过 Text 文本 Markup标记 Language语言
虽然说我们不用怎么去记html,但万一面试官问起你html全称是什么,记不住可就完蛋
Hyper 不用记,
Text 文本,我们平时在桌面创建的“新建文本文档”的后缀就是txt,可以联想去助记
Markup 标记,这个需要我们记一下,我们主要记Mark,念“骂氪”,在开发的时候有些函数名可能就带有Mark,用于标记日期,标记里程碑之类的
Language 语言,我们也需要记,如果我们去阅读一下国外的官网的资料,可以看看哪里有Language这个按钮,可以把英语转换成中文

html标签里我们主要记如下几个单词:
head 头;body 身体;title 标题;style 样式;script脚本;div 元素
着六个单词是每个页面里一定会出现的,所以对于这几个单词我们看多了自然就会了,平时按F12也可以看到这几个单词
head&body
style&title
很明显,style区域就是我们写css的,script就是我们写js语法的

因为css全称Cascading Style Sheets,即层叠样式表,而js全称Javascript

在html的div标签中,我们可以看到class类,这个单词在计算机中是高频词

class 类,表示一类东西,比如苹果是红色的,我们可以把苹果归为红色类,class=‘red’,香蕉是黄色的,我们可以把香蕉归为class=‘yellow’
我们在小学的时候就学过classroom,即教室,同学都是同一个岁数的,比如9岁三年级学英语,那这个classroom里就都是9岁的学生,class=‘9岁’

id 身份号,联想index索引,都是用来实现标记作用功能的单词

如果在div里使用内联样式去设定样式,那我们在div标签里也可以看到style样式

css

css里频率出现最高的是无疑是width和height
width 宽度 height 高度
然后是我们设置边框的三个单词,从内到外分别是:
padding 内边距 border 边框 margin 外边距
那我们设置边框的时候需要对四个方向的距离进行设置,分别是:
top 上 right 右 bottom 下 left 左
四个方向的设置是按顺时针的,忘记了顺序想想时钟怎么走
按F12点击一个div标签滑到最底下可以看到边框,方便复习
方向
可以看到图里最上边有个position,这个单词我们通常用来干什么?
定位,所以position就是定位的意思
定位我们常说有四种定位:

/*相对定位*/
position:relative
/*绝对定位*/
position:absolute
/*粘滞定位*/
position:sticky
/*固定定位*/
position:fixed

故而relative就是相对的意思,其他的定位也是如此

对元素进行隐藏和展现我们通常会使用到display展现
隐藏是none,联想no,即不,没有
对应的是block 块,即div又出现了

display:none
display:block

说到display,我们经常使用的弹性布局不就是

display:flex

所以flex是弹性的意思

js

js最常用的是dom操作,用于获取对应的元素
示例图
所以我们可以对常见的dom操作进行一个简单的记忆
document是文档的意思,也就是我们的页面
dom

我们通过document页面去拿到对应的元素或者说标签
其实就是拿对应的div

在document文档里get得到element元素by通过classname元素名
get得到element元素by通过id身份号
get得到element元素by通过name名字
get得到element元素by通过tagname标签名

document.querySelector我们看Selector选择器可知是通过选择器去拿对应的元素
如果加个all,就是拿到选择器选定的所有元素,即document.querySelectorAll(‘’)

如在开发问题中遇到问题,可私聊博主
如有错字,还请原谅!近日会更下一章:让学前端不再害怕英语单词(二)和前端学习路线(三),同时也会更新前端静态页面开发思路(三)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/17007.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

通过阅读源码解决项目难题:GToken替换JWT实现SSO单点登录

文章目录jwt的问题jwt的请求流程图gtoken的优势注意问题演示demo入门示例运行效果启动项目:访问不认证接口:返回成功未登录时访问认证接口:返回错误提示请求登录接口:返回token携带token再次访问认证接口:返回成功分析…

postgres-operator 原理解析- 章节 I

这篇文章我想写postgres-operator如何利用kubernetes实现高可用功能其中的客户端流量路由部分。 总体的目的呢就是客户端数据库连接请求,如果通过利用kubernetes的机制实现将流量路由到实际的Postgresql主节点。 基础知识 Services without selectors 平常得Ser…

【Java进阶篇】第三章 常用类

文章目录一、String类1、String类概述2、String字符串的存储原理3、有String型属性的对象4、两种字符串对象创建方式的区别5、String类的特殊构造方法6、String类中的方法二、StringBuffer类1、StringBuffer类的构造方法2、String类和StringBuffer类的区别3、StringBuffer和Str…

我修复了一个 Vite Bug,让我的项目首屏性能提高了 25%

本文正在参加「金石计划 . 瓜分6万现金大奖」 一次偶然的机会,我将项目(基于 tdesign-vue-next-starter )由 Vite 2.7 升级成 Vite 3.x 后,发现首次运行 Vite dev 构建,页面首屏时间非常长,且一定会整个页…

Vue3基础看这一篇就够了(万字长篇,附实例代码及效果演示)

目录 前言 概述 Vue3组合式api VS Vue2选项式api 基础部分 setup 选项式api的风格 组合式api的风格 区别 响应式数据 ref reactive shallowReactive 与 shallowRef 计算属性和监听 computed 函数 watch 函数 watchEffect 生命周期 响应式数据只读 toRaw 返回代…

呼叫中心中间件(mod_cti基于FreeSWITCH)-背景音(彩话)接口

背景音,就是给通话添加一个背景音,比如办公室的噪音,键盘敲击声,等。彩话,就是通话过程播放一个声音,代替人工说话,这个声音双方可以同时听到,而且播放过程不影响双方通话。 用处 …

「JVS低代码开发平台」关于逻辑引擎的触发讲解

JVS逻辑引擎是代码开发套件中的业务瓶装的核心,用于去实现各种场景下的逻辑功能,可以把他理解为一个程序配置器与程序的执行器。 逻辑引擎是可以被多种配置器调用的触发的,从而实现了各种业务场景中对应功能的实现,那么接下来我们…

RabbitMQ初步到精通-第四章-RabbitMQ工作模式-PUB/SUB

第四章-RabbitMQ工作模式-PUB/SUB 1.模式介绍 1.1 模式 此模式称为发布订阅模式,从此模式开始,我们就不再使用默认的交换机了,开始定义我们自己的交换机。 此发布订阅模式,使用的交换机类型为Fanout。定义好交换机,消…

【MATLAB教程案例42】语音信号的MFCC特征提取matlab仿真

欢迎订阅《FPGA学习入门100例教程》、《MATLAB学习入门100例教程》 本课程学习成果预览: 目录 1.软件版本 2.MFCC理论概述

JavaScript之BOM复习(54th)

1、BOM概述 1、BOM Browser Object Model 浏览器对象模型 2、它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window 3、BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性 4、BOM 缺乏标准,JavaScript 语法的…

用QT实现一个简单的桌面宠物

有时候桌面空空的,或者屏幕空旷了,我们就可以找一点东西来点缀一下,那么桌面宠物是一个不错的选择。 作为一个程序猿,如何实现一个桌面宠物呢? 本文就给大家带来的是如何用qt提供一种思路并写一个简单的桌面宠物。 思…

深入理解Linux网络技术内 幕(八)——设备注册和初始化

文章目录前言设备注册之时设备除名之时分配net_device结构NIC注册和除名的架构设备初始化设备驱动程序初始化设备类型初始化:xxx_setup函数可选的初始化和特殊情况net_device结构的组织查询设备状态队列规则状态注册状态设备的注册和除名切割操作:netdev…

C#编程的构成要素(结合unity做实例分析)

目录 定义变量 变量的名称很重要 将变量作为占位符 疯狂的方法 方法驱动行为 方法也是占位符 类的引入 一直在使用类 日常蓝图 注释是关键 将脚本附加到游戏对象上 脚本成为组件 类与组件通信 本文主要来自<<C#实践入门>>哈里森.费隆 著&#xff0c;仅用…

甘露糖-聚乙二醇-氨基|mannose-PEG-NH2|氨基-PEG-甘露糖

甘露糖-聚乙二醇-氨基|mannose-PEG-NH2|氨基-PEG-甘露糖 氨基&#xff08;Amino&#xff09;由一个氮原子和两个氢原子构成&#xff0c;化学式为-NH2。在有机化学中&#xff0c;氨基是基本碱基&#xff0c;大多数含有氨基的有机物都有一定碱的特性&#xff0c; 中文名称&…

基于数学形态学的路面裂缝图像处理技术-含Matlab代码

⭕⭕ 目 录 ⭕⭕✳️ 一、引言✳️ 二、图像预处理✳️ 三、路面裂缝图像的边缘检测✳️ 3.1 裂缝识别✳️ 3.2 裂缝区域信息获取✳️ 3.3 裂缝特征提取✳️ 四、参考文献✳️ 五、Matlab代码获取✳️ 一、引言 对于路面裂缝而言&#xff0c; 采用图像处理技术对其进行识别与计…

③计算机病毒实验实验报告

班级 计科2101 姓名 彭彭头 学号 时间 2022年5月6日 成绩 实验项目名称 计算机病毒实验二 实验目的 1、了解脚本病毒的感染方式。 2、了解脚本病毒的手工清除方法。 实验内容 通过批处理文件进行计算机病毒和编写&#xff0c;了解脚本病毒的感染方式。 实验环…

Java笔记(十三)

文献种类&#xff1a;专题技术总结文献 开发工具与关键技术&#xff1a; IntelliJ IDEA、Java 语言 作者&#xff1a; 方建恒 年级&#xff1a; 2020 撰写时间&#xff1a; 2022 年 11 月 18 日 Java笔记(十三) 今天我给大家继续分享一下我的Java笔记&#xff0c; 我们继续来…

【Linux】环境基础开发工具使用

Vim Vim 是一个编辑器 只能编辑&#xff0c;只能写代码 直接输入vim &#xff1a; q就是退出 touch新文件&#xff0c;vim 进入 vim是一款多模式的编辑器 命令模式&#xff08;默认打开的模式&#xff09; 按 i 进入编辑模式/插入模式 esc回到命令模式 冒号进入底行…

【前沿技术RPA】 一文了解UiPath的代码审查工具Workflow Analyzer

&#x1f40b;作者简介&#xff1a;博主是一位.Net开发者&#xff0c;同时也是RPA和低代码平台的践行者。 &#x1f42c;个人主页&#xff1a;会敲键盘的肘子 &#x1f430;系列专栏&#xff1a;UiPath &#x1f980;专栏简介&#xff1a;UiPath在传统的RPA&#xff08;Robotic…

[附源码]java毕业设计企业员工管理系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…