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

HTML——基本标签

1. 结构标签

  • <html>:这是HTML文档的根元素,所有其他HTML元素都应该位于<html>元素内部。
  • <head>:包含了文档的元数据,如文档的标题、字符集定义、样式链接、脚本链接等。这些信息不会直接显示在网页上,但对网页的渲染和行为至关重要。
  • <title>:定义了文档的标题,这个标题会显示在浏览器的标题栏或页面的标签上。
  • <body>:包含了可见的页面内容,如文本、图片、链接、表格、列表和表单等。
<!DOCTYPE html>
<html>
<head>
<title>你好</title>
    <meta charset="UTF-8">
</head>
<body>


</body>
</html>

2. 文本格式化标签

  • 标题标签<h1><h6>,用于定义标题,<h1>是最高级别的标题,<h6>是最低级别的标题。标题标签默认会以粗体显示,并且大小依次递减。
  • 段落标签<p>,用于定义段落。浏览器会自动在段落前后添加空行。
  • 换行标签<br>,用于插入一个简单的换行符,而不是一个段落。
  • 加粗标签<strong><b>,都用于加粗文本,但<strong>表示重要性更高的文本。
  • 斜体标签<em><i>,都用于将文本显示为斜体,但<em>表示强调的文本。
  • 删除线标签<del><s>,都用于在文本上添加删除线,但<del>表示不再准确或不再相关的内容。
  • 下划线标签<u>,用于为文本添加下划线,但通常不推荐仅用于装饰目的,因为它可能会与链接混淆。
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
</head>

<body>
	<h1>创建不同字体大小的标题</h1>
	<h2>创建不同字体大小的标题</h2>
	<h3>创建不同字体大小的标题</h3>
	<h4>创建不同字体大小的标题</h4>
	<h5>创建不同字体大小的标题</h5>
	<h6>创建不同字体大小的标题</h6>
	<p>123</p>
	<br>
	<strong>1244</<strong>
		<b>123</b>
		<em>2</em>
		<i>2</i>
		<del>2</del>
		<u>1</u>

</body>

</html>

3. 链接和图片标签

超链接标签<a>,用于定义超链接,可以链接到另一个页面、图片、文件、电子邮件地址或同一页面内的某个位置。它有一个href属性,用于指定链接的目标地址。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <img src="https://www.educoder.net/attachments/download/207801" alt="小狗"/>
</body>
</html>

4. 列表标签

  • 无序列表<ul>,用于创建无序列表,列表项使用<li>标签定义。
  • 有序列表<ol>,用于创建有序列表,列表项同样使用<li>标签定义。有序列表的列表项会自动编号。

5. 表格标签

  • 表格标签<table>,用于定义表格。
  • 表格行标签<tr>,定义表格中的一行。
  • 表头单元格标签<th>,定义表格的表头单元格,通常用于列标题,并会自动加粗和居中显示。
  • 数据单元格标签<td>,定义表格的标准单元格,用于存放数据。

6. 表单标签

  • 表单标签<form>,用于创建表单,以收集用户输入。表单可以包含输入字段、复选框、单选按钮、提交按钮等。
  • 输入标签<input>,是表单中最常用的标签之一,根据type属性的不同,可以表示文本框、

7. 其他常用标签

  • 密码框、提交按钮等多种类型的输入控件。
  • <div>:用于定义文档中的分区或节,是一个块级元素,常用于布局和样式化。
  • <span>:用于定义文档中的行内元素,通常用于对小块文本进行样式化。
  • <hr>:表示一条水平线,用于分隔内容。

相关文章:

  • Basler 相机与LabVIEW进行集成
  • 便捷数据检索与下载,拟合曲线预测趋势 轻松管理多个项目,实现在线监测
  • Python和C++气候模型算法模型气候学模拟和统计学数据可视化及指标评估
  • SQLite的入门级项目学习记录(四)
  • SpringDataJPA基础增删改查
  • 解决内存8G但是需要读取一个几百G的文件到内存的方法
  • 学术界的利器:Zotero插件提升你的研究效率
  • 深入探究 Flask 的应用和请求上下文
  • 【深度学习】(1)--神经网络
  • leetcode:2124. 检查是否所有 A 都在 B 之前(python3解法)
  • 11 vue3之插槽全家桶
  • 云计算实训50——Kubernetes基础命令、常用指令
  • 205. 同构字符串-LeetCode(C++)
  • Ubuntu20.04点击文件闪退
  • PHP中如何比较两个对象
  • 【PyTorch单点知识】像素洗牌层:torch.nn.PixelShuffle在超分辨率中的作用说明
  • 基于matlab的通信系统设计及仿真
  • 【算法】滑动窗口—最小覆盖子串
  • go的学习笔记
  • 问:Java中的多线程有哪些实现方式?
  • 上海虹桥国际咖啡文化节周五开幕,来看Coffeewalk通关攻略
  • 人才争夺战,二三线城市和一线城市拼什么?洛阳官方调研剖析
  • 山西省委常委李金科添新职
  • 上海下周最高气温在30℃附近徘徊,夏天越来越近
  • 高培勇:中国资本市场的发展应将预期因素全面纳入分析和监测体系
  • 习近平结束对俄罗斯国事访问并出席纪念苏联伟大卫国战争胜利80周年庆典回到北京