欢迎关注csdn前端领域博主: 前端小王hs
email: 337674757@qq.com
前端交流群: 598778642

有很多跟着我学习的学生经常跟我抱怨前端的单词很多,学了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也可以看到这几个单词


很明显,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是文档的意思,也就是我们的页面

我们通过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(‘’)

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

让学前端不再害怕英语单词(一)相关推荐

  1. 让学前端不再害怕英语单词(四)

    前三章直通车↓↓↓ 让学前端不再害怕英语单词(一) 让学前端不再害怕英语单词(二) 让学前端不再害怕英语单词(三) 在第一章和第二章,我们大致讲了下前端三剑客和利用接口处理后端返回数据的一些单词,在第 ...

  2. 让学前端不再害怕英语单词(三)

    前两章直通车↓↓↓ 让学前端不再害怕英语单词(一) 让学前端不再害怕英语单词(二) 由于前两章都反响强烈,都上了全站的热榜,所以今天打算把第三章也写出来 第三章我们主要讲一下css中的伪类的英语单词还 ...

  3. 学前端不用害怕英语单词

    很多和我一起学习的同学经常向我抱怨前端单词很多,但是忘记了html单词和js单词.所以为了给和我一起学习的同学提供一个前端不怕英语单词的课程,我打算写一篇关于如何在前端加强语法巩固和熟悉英语单词的博客 ...

  4. 学计算机所需要的英语单词,学计算机最少要懂的英语单词是什么

    PC:个人计算机Personal Computer ·CPU:中央处理器Central Processing Unit ·CPU Fan:中央处理器的"散热器"(Fan) ·MB: ...

  5. 学python必会英语单词_Python必备常用英语词汇(一)

    path [ pɑ:θ ] 路径 unexpected [ˌʌnɪkˈspektɪd] 不期望的 class [klɑ:s] 类 usage [ˈju:sɪdʒ] 使用 public ['p ʌbli ...

  6. 学python要学的英语单词_学python必备的英语单词(终身受益)

    1.view n.看  风景 意图 2.navigate vt.驾驶 航行于 使通过 3.code n.编码 代码 密码 法典 遗传密码 4.external  adj.外面的 外部的 表面的 外用的 ...

  7. 考研英语单词如何有效记忆?

    相比考研政治,考研英语就要从早期开始复习,毕竟政治可以速成,英语是一个靠积累的学科,不是靠速成的学科.针对第一轮复习,以考研英语单词和语法长难句为主,当然如果你英语基础还不错的,在大学期间通过四六级, ...

  8. Nodejs+vue+Elementui英语单词学习网站express前端源码

    越来越多的学生喜欢把前端Vue+nodejs技术组合当做自己的毕业设计项目.其实是非常新颖的毕设了.在众多毕设项目中也算是给老师眼前一亮.也给自己的加不少分.总比那些jsp图书管理.进销存系统等几十年 ...

  9. 如何从零开始学计算机的英语单词,如何把英语从零开始

    原标题:如何把英语从零开始 大脑记忆的保鲜时间是有限的,一旦过了时间,就会遗忘.英语学习也是一样,一旦忘了,那么英语从零开始再学习,就不是一件值得庆幸的事了.文章通过三步来告诉你如何从零开始学英语. ...

最新文章

  1. 姚期智:这是一个“前所未有”的金融科技与计算机科学的黄金时代
  2. php当前栏目位置,thinkphp获取栏目和文章当前位置的方法,_PHP教程
  3. 永远不要去依赖别人_读书心得马琴:永远不要依靠别人来保证你的安全读后感...
  4. JavaScript数组方法大全(推荐)
  5. linux命令运行中,输入命令,如果输入错误,怎么删除?
  6. php显示时间,php实现用已经过去多长时间的方式显示时间
  7. PID控制器改进笔记之四:改进PID控制器之设定值响应
  8. java—IO流——读取键盘输入的字母并转换成大写字母输出在控制台上
  9. YYH算组合数(NOIP模拟赛Round 6)
  10. 接口规范 10. 并发限制相关接口
  11. 【CVTE Web后台开发实习生2019.12.05在线笔试】总结
  12. 英特尔:已获得向华为供货许可;央视曝光“微信清粉”软件存风险;HHVM 4.75 发布|极客头条
  13. java连接查询where_SQL中join连接查询时条件放在on后与where后的区别
  14. XP蓝屏代码集(转)
  15. qudp socket信号不触发_QT下udpsocket一段时间接收不到数据的问题
  16. windows系统突然提示winload.exe文件错误
  17. Java主要学习哪些内容
  18. AOSP ~ Camera - YUV格式简介
  19. wordpress好用的插件-wordpress插件自动采集伪原创发布插件免费
  20. 常见的状态码1xx、2xx、3xx、4xx、5xx、

热门文章

  1. 天猫仿站秒杀系统开发
  2. 回顾2017:谈谈过去一年的成长
  3. ### 通达信数据之实时机构持股数据接口
  4. speedoffice表格中身份证号码显示不全怎么解决?
  5. 使用STM8S003K3 ADC简介以及初始化
  6. bugku练习Web 1(web2--成绩单)
  7. 编写mblock遇到的问题
  8. ORA-01591错误的原因和处理方法
  9. 单反相机eos1代使用教学_eos r5是佳能多年来的首款革命性相机
  10. hiredis 判断主节点