1：html的介绍与基础1

Charles Wesley

已于 2024-08-13 11:19:59 修改

阅读量1.3k

点赞数 49

分类专栏： html（CSS）文章标签： html css

于 2024-08-13 10:50:17 首次发布

本文链接：https://blog.csdn.net/2301_76578848/article/details/141151372

版权

html（CSS）专栏收录该内容

3 篇文章 1 订阅

订阅专栏

1.1html的介绍

HTML是一种标记语言，用于创建，设计网页及其内容。它通过标记和标签定义网页中的结构和元素，如标题、段落、链接、图像等。HTML 文件通常以 `.html` 扩展名保存，并通过浏览器进行渲染，展示给用户，即我们现在所看到的网页。在html中会出现很多类似于<h1>这样的东西，我们称它为标签，html中需要注意的是，标签往往是成双成对的出现。比如说<h1> </h1>

1.2html的基础1

1.2.1标题，头部与基本的格式怎么写

1.2.1.1标题与基本格式

标题的英文是head,所以它的标签是<h>,而<h1>--<h6>便是标题的等级，<h1>便是最大的那个标题，而<h6>就是最小的标题。但是在写代码的时候，与之前我更新的python文档中还是很不一样的。看一下一个例子

这里的话需要注意，html的运行方式与python很不一样，因为python属于后端，html属于前端，这个是啥意思呢，前端就是指你可以看到的网页。所以说vscode无法像浏览器一样解析这一段代码，给你一个网页，所以运行与python很不一样。运行的步骤第一步：保存你的代码，第二步：找到这个编程所对应的文件，第三步：用浏览器打开。

<html>
<body>
<h1>Charles Wesley</h1>
<h2>Charles Wesley</h2>
<h3>Charles Wesley</h3>
<h4>Charles Wesley</h4>
<h5>Charles Wesley</h5>
<h6>Charles Wesley</h6>
</body>
</html>

这里首先需要写<html>，这个表示这段代码表示的是html的语言，注意不要忘记</html> （但是这个vscode中会自动显示）body很简单的意思，就是网页的主题，那么接下来就是标题<h1> ---<h6>，可以来看一下他们的区别

这个从上往下，便是一级标题到六级标题。

当然我们可以开心的是，我们已经制作了一个网页，但是不开心的是这个网页显然不能满足我们他所的欲望，因为这个实在是太简单了。

在这一块中可以添加<hr>标签，这个标签指的是可以在中间加上一条分割线（注意这个与一般的标签不一样，它没有</hr>的需求，所以你常常只看到<hr>在代码中。）

<html>
<body>
<h1>Charles Wesley</h1>
<hr>
<h2>Charles Wesley</h2>
<hr>
<h3>Charles Wesley</h3>
<hr>
<h4>Charles Wesley</h4>
<hr>
<h5>Charles Wesley</h5>
<hr>
<h6>Charles Wesley</h6>
</body>
</html>

可以看到h1的标题与h2的标题之间有一条线，这个就是<hr>的作用，同样再次强调一下<hr>没有</hr>。

1.2.1.2头部

何为头部

这个箭头所指的“CSDN博客-专业IT指数发表平台”这个叫做头部

头部的标签一般使用<title>来完成，当然别忘记了它的“兄弟”。

<html>
<body>
<title> Charles Wesley</title>
<h1>Charles Wesley</h1>
<p>在<br>CSDN<br>上更新博客</p>
<hr>
<h2>Charles Wesley</h2>

</body>
</html>

这里的头部已经改成了Charles Wesley。

1.2.2段落

段落的英文是paragraph，所以说在html的标签是<p>，注意不要忘记它的“兄弟”</p>

接下来就是用一个例子来看一下

<html>
<body>
<h1>Charles Wesley</h1>
<p>在CSDN上更新博客</p>
<hr>
<h2>Charles Wesley</h2>

</body>
</html>

可以看一下我们的网页

你看在第一个标题下面就有我们的正文了，也就是<p>中所写的东西

这个代码还是非常简单的。

但是在我们写段落的时候有些时候想换一下行，这里有一个关于换行的标签，这个标签也非常的特殊，与之前学到的<hr>一样没有“兄弟”，它是<br> 我们用来换行。

<html>
<body>
<h1>Charles Wesley</h1>
<p>在<br>CSDN<br>上更新博客</p>
<hr>
<h2>Charles Wesley</h2>

</body>
</html>

在段落这理增加了<br>标签

可以看一下我们新的页面

在这里发现在 CSDN 上更新博客这几个换行

1.2.3链接

1.2.3.1基本的网页链接

同样在一个网页中，你会常常看见超文本链接，假设你喜欢周深（我也很喜欢他），在百度百科搜索周深，在百度百科中会有很多关于他的链接，那么链接怎么在html代码进行书写呢这里就有一个标签是关于超文本链接的

<a>就是这个标签，但是这个标签有一定的格式，就是<a href="URL">想要呈现的文字</a>

<html>
<body>
<title> Charles Wesley</title>
<h1>周深</h1>
<p>一个非常优秀的歌手</p>
<a href="https://baike.baidu.com/item/%E5%91%A8%E6%B7%B1/15089196">这个是他的介绍</a>
<hr>
</body>
</html>

你可以看到我们所熟悉的超链接，点一下就可以到我所写的那个网页了（这个网页出自百度百科）

同样这个是周深老师的网页，然后如果有冒犯的话，非常抱歉，我会马上改成其他的示例。

这个就是跳转的网页。

1.2.3.2图像链接

图像其实有两种方式进行编写，第一种方式运用这个图像链接

图像英文是image, 标签是<img>

这个的格式是有一点复杂的

<html>
<body>
<title> Charles Wesley</title>
<h1>周深</h1>
<p>一个非常优秀的歌手</p>
<a href="https://baike.baidu.com/item/%E5%91%A8%E6%B7%B1/15089196">这个是他的介绍</a>
<a href="https://www.duitang.com/blog/?id=1333702828">
    <img src="https://c-ssl.duitang.com/uploads/blog/202104/05/20210405194705_65f81.thumb.1000_0.jpg"> 
</a>
<hr>
</body>
</html>

这个与之前不一样的点在第二个a这里首先需要找到这个图片的原来的网页，

我首先在百度中搜索这个图片，然后知道原来出自于堆糖里，非常感谢漘騟所提供的照片，然后在href后面的URL（网址）这边写上原来的网址，然后在在里面插入<img>。关于后面的那一串东西也很简单就能完成，我回到百度的照片中，然后右击鼠标出现的第一个选项（相信标签页打开照片）之后能出现这个页面

而上面的URL就是之后要写在后面的代码。

你们可以运行一下。看看结果。

1.2.4注释

最后一个小节，就是关于注释，注释的重要性，就是提醒你在很长一段时间没有关注这个代码，然后你很容易忘记掉这个代码是啥意思，在这个时候注释就发挥了自己的能力。

html的注释是

<html>
<body>
<title> Charles Wesley</title>
<h1>周深</h1>
<p>一个非常优秀的歌手</p>
<a href="https://baike.baidu.com/item/%E5%91%A8%E6%B7%B1/15089196">这个是他的介绍</a>
<a href="https://www.duitang.com/blog/?id=1333702828">
    <img src="https://c-ssl.duitang.com/uploads/blog/202104/05/20210405194705_65f81.thumb.1000_0.jpg" alt="周深"> 
</a>
<hr>
<!-- 不重要的注释 -->
</body>
</html>

在这里有一个这个就是关于html的注释。在网页中不回现实出来，同样这个代码也不会报错。