网页前端学习-03

Leoma_

已于 2022-07-15 10:58:55 修改

阅读量1.9k

点赞数 2

分类专栏：前端学习笔记文章标签：前端学习 html 网络

于 2022-07-14 22:44:54 首次发布

本文链接：https://blog.csdn.net/Leoma_/article/details/125793131

版权

前端学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML基础知识02

1.vscode书写骨架里些许代码的解释

<!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>666</title>
</head>
<body>

</body>
</html>

①、<!DOCTYPE html>这一行指令可以理解为不是html代码的部分，它充当的作用是告诉浏览器我们需要书写的html版本，如上述代码第一行则代表的是我们要书写的是html5这个版本，DOCTYPE是文档类型声明标签。

②、<html lang="en"> 用来强调是中文网站还是英文网站，en代表英文的缩写，zh-CN指的是中文。

③ 、<meta charset="UTF-8"> charset是字符集的含义，后面的utf-8是万国码，这样书写不写会出现乱码的情况。

2.HTML常用标签

（1）标题标签

由h1到h6，大小依次变化，h1的大小最为之大，并且在变化中，字体粗细也要发生改变。其中最大的一项标题我们常用<h1>这里输入想书写的标题</h1>来凸显这样的标题，在文中的情况下，一般会使用<h4>这里书写想表达的内容</h4>这个大小来凸显标题。

（2）段落标签以及换行标签

a、段落标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，<p>标签用于定义段落。

p可以理解为单词paragraph（段落）的缩写，方便记忆。

该标签语义：可以把HTML文档分割为若干段落。

特点：

1.文本在一个段落中会根据浏览器窗口的大小自动换行。

2.段落和段落之间保有空隙。

b、换行标签

在HTML中，一个段落中的文字从左到右依次排列，直到浏览器窗口的右端，然后才自动换行，如果希望某段文本强制换行显示，就需要使用换行标签<br \>。

br可以理解为单词break（打断，换行）的缩写，方便记忆。

该标签语义：强制换行。

特点：

1.是个单标签，正如在我们专栏中《前端网页学习-02》中所提及的会出现的特殊情况。

2.负责简单的开始新的一行，而段落与段落之间的间距则要比换行间距大。

举例说明：

<!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>
</head>
<body>
    <p>这里是第一段</p>
    <p>这里是第二段</p>
     下面数换行效果：<br />
     进行了强制换行
</body>
</html>

运行结果：

我们可以明显的从例子中看出段落与换行之间的行距是不相同的。

（3）文本格式化标签

标签语义：突出重要性，比普通文字更重要。

a、加粗

字体加粗的标签是<strong></strong>或者<b></b>。

虽说后面的标签要比前面的标签更加简洁，但是前面的标签语义更加强烈。

b、倾斜

倾斜的标签是 <em></em>或者<i></i>。

同理更推荐使用前者。

c、删除线

删除线的标签是<del></del>或者<s></s>。

同理更推荐使用前者。

d、下划线

下划线的标签是<ins></ins>或者<u></u>。

同理更推荐使用前者。

下面我们用代码来说话：

<!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>
</head>
<body>
    我是<strong>加粗</strong>的文字<br \>
    我是<em>倾斜</em>的文字<br \>
    我是<ins>下划线</ins>的文字<br \>
    我是<del>删除线</del>的文字
</body>
</html>

运行结果：

（3）div标签和span标签

这两个标签与前两个提到的标签极为不同的一点是这两个标签是没有语义的，就可以把他们二者理解为一个盒子，用来装内容。

div可以理解为单词division（分割、分区）的缩写，

span意为跨度，跨距。

特点：

1.<div>标签用来布局，但是现在一行只能放一个<div>。是一个大盒子。

2.<span>标签用来布局，一行上可以写多个 <span>。是一个小盒子。

二者具体关系等俺深入学习后进行补充，也欢迎各路大神为小白我补充。

（4）图像标签和路径

a、图像标签。

首先我们在引用图像标签的时候就要用到代码段：

<img src="图片路径" \>

其中img以及src是必不可缺少的内容，还有其他标签属性：

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本。图像不能显示的文字。
title	文本	提示文本。鼠标放到图像上，显示的文字。
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框明细

下面我们来拿实例说话：

<!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>
</head>
<body>
<p>演示1</p>
    <img src="123.jpg" title="此处是演示title作用">
<p>演示2</p>
    <img src="1123.jpg" title="此处是演示title作用" alt="此处是演示alt也就是图片无法显示该怎么办">
<p>演示3</p>
    <img src="123.jpg" title="此处是演示title作用" width="500">
<p>演示4</p>
    <img src="123.jpg" title="此处是演示title作用" height="100">
<p>演示5</p>
    <img src="123.jpg" title="此处是演示title作用" border="100">
</body>
</html>

运行结果如下：

（注：1.在一般使用width或者height时尽量只使用一个方面进行修改，以防网页中的画面扭曲，只修改一个数据（宽度或者高度）的话网页会根据一定比例修改另一个数值，当然如果自己有确切的数值的话也可以忽略这一点。titile作用没体现出来，截图的时候自动把箭头忽略了，大家可以自行尝试下。2.每个属性之间要用空格隔开，并且每个属性之间也没有固定的顺序可言。）

b、路径

页面中的图片会非常多，通常我们会新建一个文件夹来存放这些图像文件，这是再查找图像，就需要采用“路径”的方式来指定图像文件的位置。

路径可以分为两种：

相对路径
绝对路径

1.相对路径

这里的相对路径是以引用文件所在位置为参考基础而建立出的目录路径。

简单来说，就是图片相对于HTML页面的位置。

相对路径分类	符号	说明
同一级路径		图像文件唯一HTML文件同一级如<img src="123.jpg" />
下一级路径	/	图像文件唯一HTML文件下一级如<img src="images/123.jpg" />
上一级路径	../	图像文件唯一HTML文件上一级如<img src="../123.jpg" />

2.绝对路径

是指目录下的绝对位置，直接到达目标位置，通常是从盘符还是得路径。

可以分为本地绝对路径和互联网的绝对路径。