【HTML】之基本标签的使用详解

HTML(HyperText Markup Language,超文本标记语言)是构建网页的基础。它不是一种编程语言,而是一种标记语言,用于描述网页的内容和结构。本文将带你了解HTML的基础知识,并通过详细的代码示例和中文注释进行讲解。

本文使用软件:VS Code

相关教程:VS Code安装

1. HTML文档的基本结构

每个HTML文档都遵循一定的结构:

<!DOCTYPE html>  <!-- 声明文档类型为HTML5 -->
<html lang="zh-CN"> <!-- 根元素,lang属性指定语言为中文 -->
<head><meta charset="UTF-8"> <!-- 设置字符编码为UTF-8,支持中文 --><title>我的第一个网页</title> <!-- 设置网页标题,显示在浏览器标签页 -->
</head>
<body><!-- 网页的可见内容放在这里 --><h1>这是一个一级标题</h1><p>这是一个段落。</p>
</body>
</html>

运行:

<!DOCTYPE html>:声明文档类型为HTML5,这是必须的,它告诉浏览器如何解析HTML文档。

  • <html>:HTML文档的根元素,所有其他元素都包含在其中。lang属性指定文档的语言,方便搜索引擎和屏幕阅读器理解。

  • <head>:包含关于HTML文档的元信息,例如字符编码、标题、样式表链接等。这些信息不会直接显示在网页上。

  • <meta charset="UTF-8">:设置字符编码为UTF-8,确保能够正确显示各种语言的字符,包括中文。

  • <title>:设置网页标题,显示在浏览器标签页或窗口标题栏中。

  • <body>:包含网页的可见内容,例如文本、图像、视频等。

2. 常用HTML标签

2.1 标题标签

<h1>到<h6> 用于定义不同级别的标题,<h1> 表示最重要的标题,<h6> 表示最不重要的标题。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

运行:

2.2 段落标签

<p> 用于定义段落。

<p>这是一个段落。浏览器会自动在段落前后添加空白。</p>

运行:

2.3 换行标签

<br> 用于插入换行符。

<p>这是一行文字。<br>这是另一行文字。</p>

运行:

2.4 链接标签

<a> 用于创建超链接,href 属性指定链接的目标地址。

<a href="https://www.example.com">点击访问示例网站</a>

运行:

2.5 图像标签

<img> 用于插入图像,src 属性指定图像的URL,alt 属性提供替代文本,当图像无法显示时显示。

<img src="image.jpg" alt="这是一张图片">

运行:

2.6 列表标签
  • 无序列表:<ul> 和 <li>

<ul><li>列表项 1</li><li>列表项 2</li><li>列表项 3</li>
</ul>

运行:

  • 有序列表:<ol> 和 <li>

<ol><li>列表项 1</li><li>列表项 2</li><li>列表项 3</li>
</ol>

运行:

2.7 div 和 span 标签
  • <div>:块级元素,用于组织文档结构,通常用于CSS样式设置。

  • <span>:内联元素,用于对一小段文本进行样式设置。

<div style="background-color:lightblue;">这是一个div,它会占据一行。 <span style="color:red;">这是一个span,它只包裹着文字。</span>
</div>

运行:

2.8 表格标签

<table>、<tr>、<th>、<td> 用于创建表格。

<table><tr>  <!-- 表格行 --><th>表头 1</th> <!-- 表头单元格 --><th>表头 2</th></tr><tr><td>数据 1</td> <!-- 表格数据单元格 --><td>数据 2</td></tr>
</table>

运行:

3. 总结

本文介绍了HTML的基础知识和一些常用的标签,希望能够帮助你入门HTML。学习HTML是一个循序渐进的过程,需要不断练习和实践。记住,熟能生巧!下期见,谢谢~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/883761.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PyMol3.0 Educational Version激活教程(激活一次可用半年)

访问网址&#xff1a;https://www.pymol.org/edu/ 填写学生信息表单然后pymol会给邮箱发一个邮件&#xff0c;点开邮件中的网址便可以下载license并且可以从官网下载pymol3.0版本&#xff08;推荐使用Windows EXE Installler&#xff09;安装好之后打开软件&#xff0c;然后会弹…

异地组网最简单的方法

异地组网的方法多种多样&#xff0c;每种方法都有其特定的优缺点和适用场景&#xff0c;本期梳理一些相对简单且常用的异地组网方法&#xff0c;开始~ 一、使用硬件路由器的 VPN 功能 前提条件 你需要有支持 VPN 功能的路由器&#xff0c;如华硕、中兴等品牌。这些路由器在设置…

【Java基础】2、Java基础语法

f2/fnf2&#xff1a;选中点中的文件名 ​​​​​​​ 1.注释 为什么要有注释&#xff1f; 给别人和以后的自己可以看懂的解释 注释含义 注释是在程序指定位置的说明性信息&#xff1b;简单理解&#xff0c;就是对代码的一种解释 注释分类 单行注释 //注释信息 多行注释…

使用AMD GPU和LangChain构建问答聊天机器人

Question-answering Chatbot with LangChain on an AMD GPU — ROCm Blogs 作者&#xff1a;Phillip Dang 2024年3月11日 LangChain是一个旨在利用语言模型强大功能来构建前沿应用程序的框架。通过将语言模型连接到各种上下文资源并基于给定的上下文提供推理能力&#xff0c;L…

20241027_北京郊游香山公园

这次是第二次去香山公园&#xff0c;天气不是很晴朗&#xff0c;有雾。 乘坐地铁到的时候&#xff0c;第一趟车&#xff0c;我这么聪明&#xff0c;那肯定是不会坐的&#xff0c;因为没有座位&#xff0c;路程30多分钟&#xff0c;我都20多岁了&#xff0c;身体那肯定顶不住。 …

【React】React18核心源码解读

前言 本文使用 React18.2.0 的源码&#xff0c;如果想回退到某一版本执行git checkout tags/v18.2.0即可。如果打开源码发现js文件报ts类型错误请看本人另一篇文章&#xff1a;VsCode查看React源码全是类型报错如何解决。 阅读源码的过程&#xff1a; 下载源码 观察 package…

亚信安全DeepSecurity中标知名寿险机构云主机安全项目

近日&#xff0c;亚信安全DeepSecurity成功中标国内知名寿险机构的云主机安全项目。亚信安全凭借在云主机安全防护领域的突出技术优势&#xff0c;结合安全运营的能力&#xff0c;以“实战化”为指导&#xff0c;为用户提供无惧威胁攻击、无忧安全运营的一站式云安全体系&#…

前端 eslint 配置,以及在git提交之前自动format

目录 1、配置eslint步骤 1、eslint安装配置步骤 2、配置scripts步骤 3、测试eslint 2、配置git-hook1、安装环境2、最终效果 众所周知&#xff0c;前端项目可以在报很多error的情况下运行。但是良好的代码规范仍然有利于项目的开发维护&#xff0c;这里提供我的规范&#xff0c…

Spring Boot实现的中小企业设备信息管理系统

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…

vue使用阿里svg图标

最近开发项目的写前端时候&#xff0c;发现element的图标库不能满足我的需求&#xff0c;当然&#xff0c;大部分是够用的&#xff0c;不过某些特定按钮没有合适的图标,我是发现没有批量导入按钮的图标&#xff0c;所以找了阿里的适量图标库来使用 阿里矢量图标库 阿里矢量图…

【PythonWeb开发】Flask-RESTful参数解析

flask-restful中的reqparse.RequestParser是一个用于解析和验证参数的工具。它可以帮助开发者从请求中提取参数&#xff0c;并确保这些参数符合预期的格式和类型。参数解析的意思就是规范化传入的参数并获取到这些参数。 一、什么是 reqparse.RequestParser&#xff1f; reqpa…

深入了解 kotlinx-datetime:配置与使用指南

深入了解 kotlinx-datetime&#xff1a;配置与使用指南 在Kotlin多平台开发中&#xff0c;处理日期和时间是常见的需求。kotlinx-datetime库提供了强大且简洁的API来帮助开发者应对这一挑战。本文将详细介绍如何配置kotlinx-datetime库&#xff0c;并通过生动的示例演示其核心…

ventoy安装和使用

本文涉及一种快捷安装不同版本操作系统的工具的安装和使用。 背景 笔者以前安装系统&#xff0c;一般是先下载系统ISO镜像&#xff0c;使用UltraISO将镜像写入U盘&#xff0c;然后用U盘启动。 近年来着手国产化的适配工作&#xff0c;当然因故无法接触核对业务&#xff0c;主…

《Python游戏编程入门》注-第4章1

《Python游戏编程入门》的第4章是“用户输入&#xff1a;Bomb Cathcer游戏”&#xff0c;通过轮询键盘和鼠标设备状态实现Bomb Cathcer游戏。 1 Bomb Cathcer游戏介绍 “4.1 认识Bomb Cathcer游戏”内容介绍了Bomb Cathcer游戏的玩法&#xff0c;即通过鼠标来控制红色“挡板”…

Unity3D学习FPS游戏(5)武器瞄准和准星

前言&#xff1a;一个FPS游戏最基本的角色控制&#xff0c;在前面几篇已经基本实现&#xff0c;接下来我们将进入到武器篇。本篇将实现武器武器瞄准和准星。 武器瞄准和准星 武器瞄准思路实现效果 武器准星思路实现效果 补充知识协程线性插值 武器瞄准 思路 FPS游戏在准备开枪…

vue-echarts使用

vue-echarts使用 排名柱状图示例代码 汇总示例代码 平均时效示例代码 全图 排名柱状图 示例 代码 // 排名趋势<!-- 排名数据趋势图 --><div class"rank"><div class"rank_title"><div class"rank_title_left"><spa…

大语言模型及LangChain介绍

1. 大语言模型介绍 1.大语言模型总览 LangChain 是一个用于构建基于语言模型的应用程序的框架&#xff0c;特别是与大型语言模型&#xff08;LLMs&#xff09;交互的应用。它旨在简化和加速开发过程&#xff0c;使开发者能够更轻松地创建复杂的自然语言处理&#xff08;NLP&a…

【04】RabbitMQ的集群机制

1、RabbitMQ的性能监控 关于RabbitMQ的性能监控&#xff0c;在管理控制台中提供了非常丰富的展示。例如&#xff1a;首页这个整体监控页面&#xff0c;就展示了非常多详细的信息&#xff1a; 还包括消息的生产消费频率、关键组件的使用情况等等非常多的消息。都可以在这个管理…

GO语言实现AES-CFB加密

这里为了使用方便&#xff0c;实现代码不作为一个函数而是作为一个包&#xff0c;这样在后面的代码中也可以进行复用。包和导入 package encryptimport ("crypto/aes" // 提供 AES 加密算法实现"crypto/cipher" // 提供加密算法接口和模式&…

富格林:利用可信经验敢于追损

富格林指出&#xff0c;在解决因陷阱而导致的亏损问题时&#xff0c;投资者自己首先要具备可信经验以及敢于追损的决心。客观来说&#xff0c;当今贵金属投资行业中的陷阱并不复杂&#xff0c;多半是通过一些伪装和噱头来实现亏损陷阱的布置。富格林将分享以下可信投资经验加强…