前端基础——初识

银酱不是酱

已于 2022-02-15 22:35:44 修改

阅读量610

点赞数 1

文章标签：前端 css html

于 2022-01-06 13:22:03 首次发布

本文链接：https://blog.youkuaiyun.com/yinyinlee07/article/details/122341335

版权

本文介绍了前端开发的基础，包括HTML元素的分类、CSS选择器的使用，如id、类和标签选择器，以及BEM命名规范。通过实例展示了如何添加图片，解释了内联样式和背景图片的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端基础学习第一天

文章目录

- 前端基础学习第一天

一、HTML CSS JavaScript初步了解

HTML是整体框架，CSS设置不同样式，JavaScript实现动态请求、网络交互等效果。

<!DOCTYPE html>
<html>
<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>
</head>
<body>
    
</body>
</html>

打开VScode，shift+！然后回车，开始编程之旅。

二、熟读HTML菜鸟教程

1.结识HTML元素三大类：行内元素（内联元素）、块级元素、行内块元素。

块级元素：成块称快的元素，高度宽度都可改变。会霸占一整行，所以会让其他元素另起一行（遇到其他元素就自动换行）。

例：<div>、<p>、<table>、<h1>~<h6>、<ul>、<ol>等

行内元素：显著的特征就是高度宽度不可改变。并且不会自动换行，高度宽度随自身文本或者其他内容而定。

例：<span>、<a>、<br>等

行内块元素：综合块级和行内元素的特性。不会自动换行同时高度宽度等都可设置。

例：<img>

2. 常用选择器分类：id选择器、类选择器、标签（元素）选择器、通配符选择器

id选择器写法：

<div id="head">
    </div>

#head{     
        }

插播一下：id具有唯一性，相当于身份证号码，当用document去获取元素的id时，只会返回指定id的第一个对象，其他具有同样id的对象不会被选中。

类选择器写法：

 <div class="head">
    </div>

.head{     
        }

标签选择器写法：

div{
        }

通配符选择器：“*”

*{
       }

选择器权重:

!important（5级）>内联样式（4级）>id选择器（3级）>类选择器（2级）>标签（元素）选择器（1级）>通配符选择器（0级）

此外，权值可以相加，也就是同时使用标签选择器和类选择器，会比只使用类选择器的权重要大。

<style>
        div.head{
            width: 500px;
            height: 300px;
            background-color: cadetblue;
        }
        .head{
            width: 300px;
            height: 200px;
            background-color: brown;
        }
</style>

<div class="head">    
    </div>

运行结果：

要强调一下!important，如果在样式中添加了!important，那么该样式的优先级会成为最高的，此方法不太常用。

运行结果：

内联样式就是写在标签里的<style>，它的权重也是高于其他选择器的。

还有一种选择器叫伪类选择器，今天仅仅了解到伪类选择器中的a:hover，它可以用来添加鼠标划过的一些效果。

<style>
        .head{
            width: 200px;
            height: 100px;
            background-color: cadetblue;
        }
        .head:hover{
            background-color: chocolate;
        }
    </style>

<body>
    <div class="head">
    </div>
</body>

运行结果：

3.添加图片的不同方式：“background-image”、img标签

（1）background是元素中的一种样式，background有许多属性，包括background-image。background-image可以添加图像，接下来简单演示。

<style>
   .head{
            width: 200px;
            height: 200px;
            background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2F31b242c9-13cf-2957-1ab4-6382b5c9d194%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644035111&t=512ca4b4f91fddb8db34651d027a4bbb');
        }
</style>

<body>
    <div class="head">
        
    </div>
</body>

实际图像是这样的（图片来自网络）：

运行效果是这样：

图像只显示了左上角一点点，那么我想要完整显示的话，可以这样做：

background-size: 250px; //设置背景图宽度

但设置了宽度后，div盒子本身宽高比背景图的大，所以会自动向x轴和y轴重复显示，那么要取消重复，可以这样做：

background-repeat: no-repeat;

仅x轴重复：

background-repeat: repeat-x;

仅y轴重复：

background-repeat: repeat-y;

（2）img标签同样也可以添加图像，写法如下：

<img src="此处放链接">

不设置宽高的话，img标签会显示实际图像大小，并且完整显示：

总结:

"Background-image"是一种CSS样式，以我自己的理解，相当于是给div盒子作了装修，所以盒子本身如果没有高宽，那么background-image就不会显示；而标签是HTML标签，不设置宽高它也会显示图像。

4.BEM命名规范（Block——Element——Modifier）

BEM分别对应block（块）、element（元素）、modifier（修饰符），而命名方式则根据block__element–modifier来命名。

范例：

<div class="block">
	  ...
	  <span class="block__elem"></span>
	  <span class="block__elem--mod"></span>
	</div>

.block__elem { color: #042; }
.block__elem--mod{ color: #044; }