0x03 HTML-基础知识

这篇文章主要主要介绍在HTML中,最常出现的4类基础标签,分别是:标题、段落、链接以及图像。

1.HTML 标题

需要大家注意的是,这里所说的标题是页面内容的标题,而不是在浏览器标签中的标题(不是在 <title> … </title>之间设置的标题)。

在HTML中,页面内容中,标题分为6种,他们分别是:<h1> … </h1>、<h2> … </h2>、<h3> … </h3>、<h4> … </h4>、<h5> … </h5>、<h6> … </h6>。接下来我们做一个示例让大家看看效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>这里是标签标题</title>
</head>
<body>
    <h1>这里是页面内容中的一级标题</h1>
    <h2>这里是页面内容中的二级标题</h2>
    <h3>这里是页面内容中的三级标题</h3>
    <h4>这里是页面内容中的四级标题</h4>
    <h5>这里是页面内容中的五级标题</h5>
    <h6>这里是页面内容中的六级标题</h6>
</body>
</html>

在之前的文章里已经强调,我们在编辑HTML的时候,页面内容都要写在<body> … </body>之间,接下来看一下一级标题到六级标题的差异(我们直接将HBuildX一同截图)。

2. HTML 段落

在HTML中,段落是通过<p>标签来定义的,内容是放在<p> … </p>之间。接下来我们做一个示例让大家看看效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>这里是标签标题</title>
</head>
<body>
    <p>这里是第一个段落</p>
    <p>这里是第二个段落</p>
    <p>这里是第三个段落</p>
</body>
</html>

最终展示的效果如下:

3.HTML 链接

在HTML中,链接是通过<a>标签来定义的,链接文字是放在<a> … </a>之间,具体链接的地址是<a>标签中的“href”来指定的。接下来我们做一个示例让大家看看效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>这里是标签标题</title>
</head>
<body>
    <a href="https://www.lixh.cn">点击这里</a>
</body>
</html>

最终展示的效果如下:

4.HTML 图像

在HTML中,图像是通过<img>标签来定义的,图像的地址是在<img>标签中的“src”来指定的。接下来我们做一个示例让大家看看效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>这里是标签标题</title>
</head>
<body>
    <img src="https://www.lixh.cn/wp-content/uploads/2020/02/html5-220x150.jpg" width="220" height="150" />
</body>
</html>

最终展示的效果如下:

在<img>标签中的“src”是用来指定图片的存储位置,这里面可以对相对路径或决对路径。而“width”与“height”用来指定图片在页面上显示的宽度与高度(是以像素为单位的)。

扩展知识

在HTML中,路径指文件存放的位置,在网页中利用路径可以引用文件,插入图像、视频等。表示路径的方法有两种:相对路径,绝对路径。

相对路径是指目标相对于当前文件的路径,网页结构设计中多采用这种方法来表示目标的路径。

绝对路径就是你的主页上的文件或目录在硬盘上真正的路径,(URL和物理路径)例如:C:\abc\aa.txt 代表了aa.txt文件的绝对路径。https://www.lixh.cn/wp-content/uploads/2020/02/html5-220×150.jpg也代表了一个URL绝对路径。

像素是指由图像的小方格组成的,这些小方块都有一个明确的位置和被分配的色彩数值,小方格颜色和位置就决定该图像所呈现出来的样子。就如我们常说的显示器分辨率1920×1080,其实就相当于有1920条横线,有1080条纵线,每条横线与纵线的交叉点就看做是一个小方格,也就是一个像素。

转载请附上原文出处链接及本声明
李老师的博客 » 0x03 HTML-基础知识

发表评论

提供最优质的文章集合

立即查看 了解详情