入门前端基础(保姆式教学2)

184 阅读4分钟

上一篇文章已经写了关于认识前端和了解标签,不了解的可以先了解入门前端基础(保姆式教学1)

今天继续讲解前端基础知识,初学者入门必备部分。了解前端是怎么开发的,怎么使用html+css+js,用自己开发经验描述他们的关系

HTML

  • html称为超文本标记语言,是用来描述网页的一种语言,是整个网页的基础骨架.定义网页内容。
  • 用自己的话描述就是像人的骨架一样。html是整个网页的一个基础,简单理解为标签,上一章说的单标签和双标签即<p>我是标签</p>组成的标签
  • 可以用来布局整体结构,例如头部,身体、脚部等

css

  • css称为层叠样式表,设定网页的表现样式
  • 用自己的话描述就是像人一样喜欢打扮变成漂亮的自己,例如会买衣服,首饰,烫发等,css就有这个效果,他可以控制标签的表现形式,例如:控制文字的颜色、文字的位置、文字的3D效果等。
  • 他的写法一般是在style标签里面如下,控制了div标签的宽高内容颜色。
<style>
div {
 width: 300px;
 height: 100px;
 color: red;
}
</style>

js

  • js全称JavaScript是一种脚本语言,它是连接前台(html)和后台服务器的桥梁,对网页行为进行编程,定义网页的行为
  • 用自己话描述就是人的行为一样,例如要吃饭、要洗澡、要睡觉都是行为,js就是网页的一个行为,例如平时我们点击按钮就会弹出一个提示框、鼠标移入某个位置就会出现放大或者提示说明,这些都是js控制的结果。
  • js一般都是在script标签里面写,都是一些逻辑处理,如下,则是一个js里面的基本函数,这个函数可以绑定到页面的任何一个地方,当点击这个按钮就会触发函数输出‘我点击了按钮’。
<script>
function onClickBut () {
    console.log('我点击了按钮')
}
</script>

三者有何种关系呢?

  • 作为一个完整的页面三者缺一不可,就像人一样,有了人的整体不可能不穿衣服吧?有了衣服不可能不用吃饭吧?或者只吃饭不穿衣服,好像也不正常吧?所以三者关系紧密相关
  • 那三者我们应该怎么学习呢?我们应该怎么写?怎么记呢?

怎么学习三者?

  • 我本人建议先记住上一章常用html标签,先知道标签的作用和布局先。因为html标签就是基础的基础,第一步必会的知识。
  • 记住常用的标签,然后就可以开始使用css了,css需要学些什么呢?css和html其实一样,都需要记和背,css有固定的格式和固定的样式名称。例如:width:表示宽,height:表示高,color:表示文字颜色,background:表示元素的背景颜色。
  • 最后就是学习js了,js是全部内容中最难的,也是最灵活多变的,所有业务逻辑基本都是在js里书写。这部分的话需要记语法和格式,要记的其实也不多,只是需要自己写很多逻辑。

css怎么控制html标签?

  • 想要控制html标签,需要给标签一个class属性,class名称是固定的需要记住,例如:<div class='header'></div>,class固定名称,class后面的自己命名,例如写成zhangshan或者abc都可以,只要是英文就行。
  • 有了class属性之后,就到style标签里面写自己想要写的内容,如果是class属性写样式格式必须是.开头,如果是标签的话格式就是标签名称。例如:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .div-color{
      color: red;
    }
    div {
      width: 400px;
      height: 100px;
      background: gray;
    }
  </style>
</head>
<body>
  <div class="div-color">
    <p>用css控制我是的文字红色</p>
  </div>
</body>
<script></script>
</html>

image.png image.png

  • 学到这里基本算是html和css完成了一个阶段了,剩下的需要自己去记住和背熟常用的内容了
  • js的话,这里就不说了,先把html和css会用先,才能一步一步的进步

学习网站(推荐)

  • 这里介绍一个学习网站,菜鸟教程
  • 学习基础的人基本可以在这个网站学习,有很多常用的html和css,也有js,相当于一个编辑工具放到网页,编写完后直接显示在页面,方便学习者练习操作。

image.png image.png

总结

  • 介绍了html、css、js是什么,三者关系是怎样的
  • 需要记住html常用标签、css常用属性和格式
  • 利用好推荐的教学网站
  • 最后就是贵在坚持和多练习,才是成功的基本法宝