浅谈对Html的了解

最新推荐文章于 2025-06-04 22:36:18 发布

原创最新推荐文章于 2025-06-04 22:36:18 发布 · 524 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html

本文介绍了HTML（超文本标记语言）的基础知识，包括其定义、作用及基本语法。讲解了HTML如何通过标记语言描述网页结构，实现文本、图片、链接等内容的展示，并提供了常见标签如p、h、a和img的使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浅谈对Html的了解

Html：hyper Text markup Language!
超文本标记语言，一种用于描述网页的语言，切记html不是变编程语言！
运用一套标记语言通过浏览器解析后呈现给用户。
超文本的简单理解： 1.将图片、音频等超出文本限制的内容加入html标签中，2.可以将一个文件转到另一个文件，与世界各地的主机进行文本链接（超级链接文本）。

HTML的基本框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  	 Holle wored
</body>
</html>

（注:本人是用的Visual Studio Code软件写的html代码，个人也比较推荐开始学习的人使用者款软件）
其中html跟标签head body是结构化标签

<head>
    <meta charset="UTF-8">
 </head>

其中 charset是编码字符集
(1) UTF-8最常用
(2) gbk国家标本扩展版本（包含亚裔版本，和繁体字符集）
(3) unicode万国码

<html lang="en,zh">

lang=“en,zh” 注释：language en=english zh=zhongwen
告诉爬虫你的网页基本是什么内容，你的网页被百度搜索引擎放到前面的可能性更大
下面给大家简单介绍几个常用的基本标签：
(注:大部分标签都是成双成对的出现的，只有极少部分是单身狗)

<body>
    <p>这是段落1</p>
    <p>这是段落2</p>
    <p>这是段落3</p>
</body>

<body>
    <p>这是段落1</p><p>这是段落2</p><p>这是段落3</p>
</body>

p标签 表示文本的一个段落。下图为上面两个标签所呈现的相同效果
在这里插入图片描述
h标签 标题标签（这里随便提一下快速生成多个标签，以下面的h标签为例）
快速生成n个相同的标签：h${标题}*n

<body>
        <h1>标题1</h1>
        <h2>标题2</h2>
        <h3>标题3</h3>
        <h4>标题4</h4>
        <h5>标题5</h5>
        <h6>标题6</h6>
</body>

效果图如下
在这里插入图片描述
（注：大小样式与标签级别没有关系）
h标签的功能：⒈独成一段 ⒉加粗字体 ⒊更改字体的大小
a标签 可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。

<body>
    <a href="https://www.baidu.com/">点击进入百度首页</a>
</body>

在这里插入图片描述
点击后会跳转到百度首页。

img 标签 将一份图像嵌入文档。

<body>
    <img src="./李白.jpg" alt="这是李白">
</body>

在这里插入图片描述
alt里面是当图片文件加载不出来时的文字介绍

html标签的关系

1.嵌套关系

<body>
    <h><a href=""></a></h>
</body>

2.并列关系

<head></head>
<body></body>

上述如果有什么错误结论，欢迎大神提出，本人日后也会好好改进！！！