【前端】入门基础（一）html标签
文章目录
- 一、什么是前端
- 二、HTML页面
- 1、第一个html页面编写
- 2、知识详解---标签
- 3、常用标签
- 1、注释标签
- 2、标题标签h1-h6
- 3、段落标签
- 4、换行标签
- 三、谢谢观看！
一、什么是前端
前端指的是用户在使用网站或应用程序时直接看到和与之交互的部分，也称为“客户端”。它负责将数据以视觉化、交互化的方式呈现给用户，并处理用户的输入行为（如点击、滑动、输入等）。简单来说，前端就是用户眼前的一切。
前端的三层核心技术：
- HTML（结构层）：定义页面的骨架和内容，如标题、段落、按钮、图片等。
- CSS（样式层）：控制页面的外观，包括颜色、字体、布局、动画等。
- JavaScript（行为层）：实现动态交互，例如点击按钮弹出提示、加载数据、验证表单等。
二、HTML页面
这里使用的工具是vscode。
1、第一个html页面编写
<html>
<head>
<title> 这里是页面标题 </title>
</head>
<body>
这里是页面内容
</body>
</html>
在文件资源管理器中打开.html文件（后面会介绍简单打开方法）即可出现以下页面：
2、知识详解—标签
上述代码中的< html>与< /html>、< head>与< /head>、< body>与< /body> 、< title>与< /title>就是一对对的标签。HTML标签通过层级嵌套构建网页的逻辑结构，将内容划分为可识别的模块。
单双标签：
简单来说：双标签成对出现，单标签独立存在。上述程序中均为双标签。
- < html>与< /html>
<html>标签是HTML文档的根元素，所有其他元素都嵌套在它里面。</html>是闭合标签，表示HTML文档的结束。
< html>：标记 HTML 文档的开始，告知浏览器“这是一个 HTML 文件”。
< /html>：标记 HTML 文档的结束，表示“内容到此为止”。 - < head>与< /head>
< head> 和 < /head> 是 HTML 文档的头部标签，用于定义与页面相关的元数据（metadata）和资源配置，这些内容不会直接显示在网页上，但对页面功能、SEO、性能等至关重要。 - < body>与< /body>
< body> 和 < /body> 是 HTML 文档的主体标签，用于包裹所有可见的页面内容，包括文本、图片、链接、表格、表单等。它是用户与网页交互的直接载体。 - < title>与< /title>
< title> 是 HTML 文档中用于定义网页标题的标签，其内容会显示在浏览器标签页、书签以及搜索引擎结果中。
3、常用标签
1、注释标签
快捷键：Ctrl+/
注释的内容不会显示在页面中。
2、标题标签h1-h6
该标签是一个双标签，可以用来设置几级标题。
<html>
<head>
<title> 这是页面标题 </title>
</head>
<body>
<!-- 这是注释 -->
<h1>h1标题</h1>
<h2>h2标题</h2>
<h3>h3标题</h3>
<h4>h4标题</h4>
<h5>h5标题</h5>
<h6>h6标题</h6>
</body>
</html>
3、段落标签
< p> 与 < /p>，用来划分段落：
人为在标签内打入的换行符是不会被页面识别的
页面中显示的仍为一个段落。这时就需要用到段落标签：
<html>
<head>
<title> 这是页面标题 </title>
</head>
<body>
<!-- 这是注释 -->
<p>前端指的是用户在使用网站或应用程序时直接看到和与之交互的部分，也称为“客户端”。</p>
<p>它负责将数据以视觉化、交互化的方式呈现给用户，并处理用户的输入行为（如点击、滑动、输入等）。</p>
<p>简单来说，前端就是用户眼前的一切。</p>
</body>
</html>
上图中的段落就划分成功了。
4、换行标签
< br>或< br/>，换行标签是一个单标签，这里推荐使用< br/>。
如下：
上面的程序是我人为在标签内打入的换行符，它在显示成页面时只会将其识别为空格：
这时，我们就需要借助换行标签：
<html>
<head>
<title> 这是页面标题 </title>
</head>
<body>
<!-- 这是注释 -->
前端指的是用户在使用网站或应用程序时直接
<br/>看到和与之交互的部分，也称为“客户端”。
它负责将数据以视觉化、交互化的方式呈现给用户，并处理用户的输入行为（如点击、滑动、输入等）。
简单来说，前端就是用户眼前的一切。
</body>
</html>
三、谢谢观看！
文中一些概念定义来自DeepSeek。