HTML 标签及使用方法

WiCard 编程教程 13 2 月, 2024 | 0

在网页设计中，HTML 标签用于更改文本或插入模板、页面元素和编程代码。本文研究了常用 HTML 标记的一些示例。

您还可以使用本教程来学习如何为 Arduino（例如 ESP8266 和 ESP32）项目设计基本的 Web 应用程序模板。

如何使用 HTML 标签

标签（或标签 / tag）有两种写法：

单行标签：包含页面上的对象（例如图像、按钮、框…）或更改（例如换行符）的标签。

单行标签有时不会改变页面的外观。

一行标签的编写方法如下：

内容标签：为内容或文本赋予某种风格或功能的标签。

<tagname><tagname/>
<tagname>Content<tagname/>

DOCTYPE 标签

该标签应始终放置在使用 HTML 设计的文件的开头，如下所示：

<!DOCTYPE html>

缩进 / Indentation

缩进意味着每个从新行开始并在另一行结束的 HTML 标记（及其内容）必须在行首编写制表符缩进。

如果已经存在制表符缩进，则必须向其添加另一个制表符缩进。

缩进不是强制性的，但它是更高质量设计所必需的。

属性 / Attribute

属性是放置在标签名称前面的设置。

属性值应括在等号后面的“ ”内。

标签的属性是预定义的：

<tagname attribute1=”value” attribute2=”value” />
<tagname attribute1=”value” attribute2=”value”> [Content] </tagname>

检查一些 HTML标签

html标签：该标签必须包含页面的全部内容，放置在Doctype标签之后。

<!DOCTYPE html>
<html>
</html>

head 标签和 body 标签：head 标签用来放置页面的常规设置、搜索引擎设置等，body 标签用来放置页面的内容。如下：

<!DOCTYPE html>
<html>
	<head>
		[webpage settings]
	</head>
	<body>
		[webpage content]
	</body>
</html>

页面标题 <title>：标题标签用于定义写在页面顶部（在浏览器选项卡上）的页面标题。该 HTML 标签必须在设置部分（head）中定义。

段落标签 <p>：用于确定内容段落。

段落中的样式属性 (style)：该属性用于更改文本颜色、右对齐、左对齐、字体、字体大小等功能。样式值必须写为 css 命令（值：属性类型；）

例子: <p style=”color: red;”> content </p>

粗体标签 <b>：用于将文本内容加粗。

换行标签 <br />：用于显示下一行文本的延续。该标签被写为单行标签。

斜体标签 <i>：此标签以微小角度显示文本。

下划线标签 <u>：该标签为里面的文本内容添加下划线。

marquee 标签 (<marquee></marquee>)：您可以使用此标签在 HTML 代码中插入动画文本。要将文本从左向右移动，请使用 Direction=”right” 属性；要将文本从右向左移动，请使用 Direction=”left” 属性。

标题标签标题标签 (headings)

标题标签包括<h1>、<h2>、<h3>、<h4>、<h5>、<h6>，以不同的大小显示段落的标题。

标题标签在定义搜索引擎关键字时具有特殊用途。

以下示例展示了如何使用所有这些标签：

<!DOCTYPE html>
<html>
	<head>
		<title>page title</title>
	</head>
	<body>
		<h3>paragraph subject<h3>
		<p style="color:red;">red text</p>
		text1<br />text2<b>text3</b>
		<i>text4</i><u>tex5</u>

		<marquee direction="left" >
			Hello
		</marquee>
	</body>
</html>

桌子设计

还可以使用标签来显示表格。表格有四个主要标签：

1-表格标签 (<table>)：该HTML标签将表格部分与页面内容的其余部分分开，表格的常规设置放置在该标签的属性中。

2-行标签 (<tr>)：该标签用于分隔行。要绘制表格，此标记必须放置与表格中现有的行数一样多的行。

3- 标题标签 (<th>)：此标签在第一行标签内用作列标题。

4- 表列标签 (<td>)：在接下来的行中，每一列使用一个列标签。

表中的样式属性 (style)

该属性（样式 / style）在表格中用于设置表格的框、颜色和样式。

边框功能：该功能用于设置框线。该属性中的可调整值为颜色、厚度、颜色类型。

例子：

border: 3px black solid;

3px 表示框框的厚度为三个像素。

黑色表示框边框的颜色。

而solid表示颜色的类型（可以显示）。

下面的命令连接表格每一行和每一列的框，最好在表格标签的 style 属性中定义：

border-collapse: collapse;

下面的例子绘制了一个带有框的表格:

<!DOCTYPE html>
<html>
	<head>
		<title>page title</title>
	</head>

	<body>
		<p style="color:red;">text</p>
		<table style="border-collapse: collapse;">
			<tr>
				<th style="border: 3px solid black;">heading1</th>
				<th style="border: 3px solid black;">heading2</th>
			</tr>
			<tr>
				<td style="border: 3px solid black;">r1 c1</td>
				<td style="border: 3px solid black;">r1 c2</td>
			</tr>
			<tr>
				<td style="border: 3px solid black;">r2 c1</td>
				<td style="border: 3px solid black;">r2 c2</td>
			</tr>
		</table>
	</body>
</html>

您可以使用记事本或其他文本编辑器将上述代码另存为 .html 文件，并在 Web 浏览器中查看结果。

w3schools 是 HTML 标签的一个很好的参考。

***“”电子、编程和 Arduino 项目，包括为工程师、学生和业余爱好者提供的源代码、原理图和 PCB 计划“”***

WiCard

作者：M. Mahdi K. Kanan – 全栈电子和编程工程师、WiCardTech 创始人

HTML 标签

HTML 标签及使用方法