小白学前端02「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」。前言教学常用标签介绍

「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」。

前言

这篇主要讲一下关于前端html的一些标签

然后再讲一些基本的css

工具 : 记事本, 浏览器

教学

常用标签介绍

div: 用得最多的标签

a: 链接标签(可以插入一些链接) href是a标签的属性

img: 图片标签可以插入一些图片 src是img标签的属性

注释:
    /*在css中用这种注释*/ 

<html>
 <head></head>
 <body>
<a href="http://www.baidu.com/"></a><!--可以链接到百度  -->
<img src="可以放一些图片的地址">
 </body>
</html>

关于文件路径的问题

./ 是在当前文件夹的文件

../ 是当前文件夹外的文件

css的使用

语法层面

<html>
<head>
<!-- css代码要写在style标签中而style标签要写在head中  -->
<style>
  /*这里面可以写css相关代码了/*
<style/>
</head>
<body>
  <a href="http://www.baidu.com/"></a><!--可以链接到百度  -->
  <img src="可以放一些图片的地址">
</body>
</html>

css选择器
css选择器大概分为三种, 元素选择器, 类选择器, id选择器
1. 元素选择器: div (这样就可以直接选择)
```
div {
  background-color: red;
}
```
2. 类选择器需要先写一个类名(类名可以重复)
```
<div class="haha"><div>
```
3. id选择器: 和类选择器相似, 但id选择器的类名是唯一的
```
<div class="hehe"><div>
```

css代码 (大家可以在自己的记事本中尝试一下)

<html>
<head>
<!-- css代码要写在style标签中而style标签要写在head中  -->
<style>
  /*这里面可以写css相关代码了 px是像素的意思/*
  div {
    width: 100px; /*宽度*/
    height: 100px; /*高度*/
    background-color: red;
  }
  .haha {
     background-color: green;
  }
  #hehe {
     background-color: orange;
  }
<style/>
</head>
<body>
  <a href="http://www.baidu.com/"></a><!--可以链接到百度  -->
  <img src="可以放一些图片的地址">
  <div><div/>
  <div class="haha"><div/>
  <div id="hehe"><div/>
</body>
</html>

最终效果

后记

本节主要是文件地址, 和css选择器比较有难度
推荐大家到freecamp上面去做题练习进不会很块的加油