卢鹏博
发布于 2025-06-06 / 5 阅读
0
0

HTML学习笔记(一)—— 初识HTML

提起Html,想必许多人都不陌生,我们访问的网页基本都是html网页,就像你现在看到这篇文章一样。

HTML介绍

html,全称HyperText Markup Language,是一种超文本标记语言,类似于Markdown,但比Markdown更加丰富和实用。

顾名思义,html是一种标记语言,我们使用前后对应的『 标签 』来进行标记。

html代码是纯文本格式,所以几乎所有代码编辑器甚至记事本都能编辑html代码。

html代码的后缀通常是.html或.htm这里建议使用.html作为后缀名。

HTML基本格式

基本格式

要创建一个规范的html网页,下述内容是必有的:

<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>
  • <!DOCTYPE html>是html5(现在的主流和较新的html标准)的声明,使浏览器强制按照html5的格式渲染网页

  • <html>表示网页开始,</html>表示网页结束

  • <head></head>之间的是网站的头部,里面可以写一下网页的详细信息,比如编码格式,网站标题,icon标签图等

  • <body></body>之间的是网页的主题,是真正会显示给用户的那部分

头部定义

<head></head>之间,我们可以添加以下内容:

  • <meta charset="UTF-8">表示网站以UTF-8编码,适应中文

  • <title>网页标题</title>在网站顶端标签页显示标题

  • <link rel="icon" href="替换为你的图片链接" type="image/x-icon">在网站顶端标签页显示图标

以上是比较常用的几个内容,还有其它的内容:

等等。

<meta name="description" content="网页描述">
<meta name="keywords" content="关键词1,关键词2">
<meta name="author" content="作者名">
<link rel="stylesheet" href="styles.css">

示例HTML

我们尝试编写下面代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的HTML网页</title>
    <meta name="author" content="卢鹏博">
    <meta name="description" content="Html学习笔记(一)——初识HTML">
    <link rel="icon" href="./icon.svg" type="image/x-icon"> <!--href="./icon.svg"改为你自己图片的路径,图片格式svg,png,jpg等均可--> 
</head>
<body>
</body>
</html>

示例结果及链接:https://math-enthusiast.top/html/1.html

可以看到成功显示了图标和标题。

下一篇:https://blog.math-enthusiast.top/archives/1749021064353



评论