前言
我将会按照这张图片来更新博客,感觉有用的话可以关注我一起学习,目前正在学习,有什么问题可以留言
工欲善其事必先利其器
想要学好前端,首先需要有一个合适的工具,根据赵老师多年经验推荐使用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哈
总结
以上写的内容并不多,大都是一些核心,也有可能有的地方写的不够完美或者有错误,欢迎提出问题,如果有想跟着我一起学的可以加我,联系方式在主页.