超级前端（c1web基础--html篇）

最新推荐文章于 2024-06-12 11:13:48 发布

干饭干饭干饭干饭干饭干饭干饭干饭

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量852

点赞数 1

分类专栏：前端学习之路文章标签：前端 c1认证

本文链接：https://blog.csdn.net/weixin_62514105/article/details/123572116

版权

前端学习之路专栏收录该内容

4 篇文章 1 订阅

订阅专栏

前言

我将会按照这张图片来更新博客，感觉有用的话可以关注我一起学习，目前正在学习，有什么问题可以留言
在这里插入图片描述

工欲善其事必先利其器
想要学好前端，首先需要有一个合适的工具，根据赵老师多年经验推荐使用Visual Studio Code.当然以后文章都会用这个进行实操.废话少说，直接开干

html

Visual Studio Code

下载好之后需要安装这两个扩展，当然如果你英文够硬，也可以不安装第一个
在这里插入图片描述

html基本结构

接下来让我们新建一个文件夹（下面包含这三个文件夹）在这里插入图片描述
我们将总文件夹拉到Visual Studio Code，然后建一个自己的html文件，并在英文状态下输入！号，点击TAB键，效果如下
这样，我们就得到了最简单的网页内容

head标签

前期内容涉及head标签较少，不过多介绍了，我们暂时只需要知道下面这串代码是修改网页名字的就可以了，有需要的看下面这个head标签详解（来自其他博主）

块标签

学习块标签，我们先来了解一下块标签的特点

块标签特点：*

1.独占一行，默认宽度占满父级，高度为0，子集内容撑开高度（横方向默认占满，高度body里面有多少占多少）

首先，我们需要知道我们操作的大体步骤
在这里插入图片描述
我们在body里面用div标签写上666，然后鼠标右键点击Open with Live Server，会看到以下截面

我们已经完成了最基础的操作，接下来我们来理解其特点
我们在body里面写上两个div标签

我们看到两个666并没有在一行上面显示，而是两个666叠起来的形状，这便是块标签的独占一行特点

接下来我们去理解其余内容，我们将div标签加上背景颜色，然后将第一个div标签的666删掉然后运行
在这里插入图片描述
我们会得到以下这个界面

我们会看到不加内容的div已经消失不见了，而且留下的div我们只写了666，但背景颜色确占了一行，这个便是默认宽度占满父级，高度为0，子集内容撑开高度
块标签特点已经差不多了解了，接下来我们学习一些其他块标签

接下来的内容可能会减少图片，因为大多数都是记忆内容，如果有什么疑问可以加最下方联系方式

h标签

h标签是标题的意思，分为以下几种:h1,h2,h3
h1是大标题，一个页面只能写一次
h2是副标题，一个页面不超过8个
h3是小标题，不受限制
h…

p标签

段落标签

ul，ol，li标签

也不做过多解释了，这些是记忆内容
在这里插入图片描述

article标签

顾名思义，这是一个文章标签，可以做以下内容
在这里插入图片描述
前期内容大致就先了解这些就够了

行标签

行标签特点：

1.不支持宽高，内容撑开高度
2.不支持上下外边框
3.不正常显示上下内边框
4.换行被解析
5.同排序跟显示，遇到父级边界换行

接下来我们来实操进行理解这些特点（为了显示的更明显，我们有时候会使用对比）

第一个特点

<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>
        span{
            height: 200px;
            width: 200px;
            background-color: red;
        }
        div{
            height: 200px;
            width: 200px;
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>
    <div>666</div>
    <span>666</span>
</body>

运行结果如下
在这里插入图片描述
结果很明显，我们给了行标签高度和宽度但是并没有像块标签那样成功显示出来

第二个特点

    <style>
        span{
            margin-top: 50px;
            height: 200px;
            width: 200px;
            background-color: red;
        }
        div{
            margin-top: 50px;
            height: 200px;
            width: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>666</div>
    <span>666</span>
</body>

在这里插入图片描述
我们看到第二个标签上面并没有像块标签那样留出空白，这就是第二个特点

第三个特点

    <title>Document</title>
    <style>
        span{
            margin-left: 20px;
            padding-top: 50px;
            height: 200px;
            width: 200px;
            background-color: red;
        }
        div{
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div>666666666666666666666666666666</div>
    <span>666</span>
</body>

打印结果如下
在这里插入图片描述
我们可以看到红色部分把上面的666给挡住了，这个是不正常显示上下内边框

第四个特点

   <body>
    <spa>666</spa>
    <spa>666</spa>
    <spa>666</spa>
    <span>666</span>6666<span>6666</span>666<span>666</span>
</body>

在这里插入图片描述
我们看到有的666是分开的，有的是连在一起的，这个就是换行解析

第五个特点

这个其实就是一行占满占下一行，没啥好说的

a标签

a标签是链接标签
我们进行一下a标签的使用

<body>
    <a href="https://www.csdn.net/?spm=1001.2101.3001.4476">csdn官网</a>
</body>

运行一下就可以看到结果

我们还可以对其添加一下额外的操作

<body>
    <a href="https://www.csdn.net/?spm=1001.2101.3001.4476" target="_blank">csdn官网</a>
</body>

自己弄一下做个对比就能发现有啥不一样了

i/em标签

倾斜字体

b/strong标签

加粗字体

总体样式如下
在这里插入图片描述

行块标签

这里我们只讲解img标签

img特点

1、同排序跟显示，遇到父级边界换行

2、没有宽高的时候内容撑开宽高

3、换行被解析

4、只给宽度或高度会等比例变化

img标签

src标签

资源路径

这里需要提几句，我们一般都使用我们建立的img文件夹下的图片，这样比较方便

alt标签

图片加载失败显示的文字

title标签

鼠标在图片位置显示的提示

加起来实现一下

<body>
    <img src="img/mmexport1638156044752.jpg"title="好好学习" alt="加载失败">
</body>

标签的互换

行块标签的互换
块标签：block
行标签：inline

  <style>
        span{
            display: block;
        }
    </style>
</head>
<body>
    <span>山有木兮木有枝</span>
    <span>心悦君兮君不知</span>
</body>

在这里插入图片描述
留几个你们可以训练的吧，把小郭好帅横着打一遍，再竖着打一遍，只改变display哈

总结

以上写的内容并不多，大都是一些核心，也有可能有的地方写的不够完美或者有错误，欢迎提出问题，如果有想跟着我一起学的可以加我，联系方式在主页.