当前位置: 首页 > article >正文

【前端】入门基础(一)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。


http://www.kler.cn/a/590223.html

相关文章:

  • Git 面试问题,解决冲突
  • ‌RTSPtoWeb, 一个将rtsp转换成webrtc的开源项目
  • C++之list类及模拟实现
  • Redis 安装详细教程(小白版)
  • 《企业级 Webpack 5 优化实战:构建速度提升 400% 的完整方案》
  • VO和DO在前后端中的对应关系详解
  • 中间件漏洞之weblogic
  • Centos离线安装openssl-devel
  • C/C++蓝桥杯算法真题打卡(Day6)
  • “查找”功能发展到今天,便利了生活哪些地方?
  • Bash语言的堆
  • DNS主从服务器
  • 【Linux篇】:初步理解何为进程--从硬件“原子“到PCB“粒子“的进程管理革命
  • Spring Cloud Stream - 构建高可靠消息驱动与事件溯源架构
  • Python----计算机视觉处理(Opencv:图像缩放)
  • vulkanscenegraph显示倾斜模型(5.3)-相机
  • 【eNSP实战】基本ACL实现网络安全
  • AI大模型本地化谷云科技全域集成能力重构企业数智化生态
  • Logo语言的链表插入
  • 全栈网络安全-渗透测试-3