网页前端学习-03

HTML基础知识02

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

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

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

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

2.HTML常用标签

（1）标题标签

由h1到h6，大小依次变化，h1的大小最为之大，并且在变化中，字体粗细也要发生改变。其中最大的一项标题我们常用

这里输入想书写的标题

来凸显这样的标题，在文中的情况下，一般会使用

这里书写想表达的内容

这个大小来凸显标题。

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

a、段落标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，

标签用于定义段落。

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

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

特点：

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

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

b、换行标签

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

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

该标签语义：强制换行。

特点：

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

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

举例说明：

    
    
    
    


    
这里是第一段
    
这里是第二段
     下面数换行效果：

     进行了强制换行

运行结果：

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

（3）文本格式化标签

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

a、加粗

字体加粗的标签是或者。

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

b、倾斜

倾斜的标签是 或者。

同理更推荐使用前者。

c、删除线

删除线的标签是或者。

同理更推荐使用前者。

d、 下划线

下划线的标签是或者。

同理更推荐使用前者。

下面我们用代码来说话：

    
    
    
    


    我是加粗的文字

    我是倾斜的文字

    我是下划线的文字

    我是删除线的文字

运行结果：

 （3）div标签和span标签

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

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

span意为跨度，跨距。

特点：

1.

标签用来布局，但是现在一行只能放一个

。是一个大盒子。

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

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

（4）图像标签和路径

a、图像标签。

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

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

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

 

下面我们来拿实例说话：

    
    
    
    


演示1
    
演示2
    
演示3
    
演示4
    
演示5
    

 

 运行结果如下：

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

b、路径 

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

路径可以分为两种：

• 相对路径
• 绝对路径

1.相对路径

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

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

相对路径分类	符号	说明
同一级路径		图像文件唯一HTML文件同一级 如
下一级路径	/	图像文件唯一HTML文件下一级 如
上一级路径	../	图像文件唯一HTML文件上一级 如

2.绝对路径

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

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

C:\Users\lenovo\Desktop\123.jpg

 这一段便是本地绝对路径

https://img-home.csdnimg.cn/images/20201124032511.png

 以上这段是我复制的CSDN logo的图片链接。

一般用本地绝对路径较少应为每个人的电脑目录不相同，不能方便的找到网页中的图像因素。