HTML标签简明通俗教程

学习&实践爱好者

已于 2024-10-29 14:08:08 修改

阅读量2k

点赞数 14

CC 4.0 BY-SA版权

分类专栏： HTML5与CSS3 JavaScrip技术前端开发文章标签： html 前端

于 2024-08-12 21:45:00 首次发布

本文链接：https://blog.csdn.net/cnds123/article/details/141128123

HTML标签简明通俗教程

基本知识

HTML：是超文本标记语言（Hyper Text Markup Language）的缩写，它是用于创建网页的标准标记语言。标签是构成HTML文档的基本单位。

【HTML中的标签（tag）和元素（element）

“标签”（tag）和“元素”（element）在一些语境中会被混淆或交替使用，但它们确实有不同的含义。标签是元素的一部分，但元素不仅仅是标签。

标签是构成HTML文档的基本单位，它们用尖括号包围。一个标签可以是开标签、闭标签或自闭合标签。

开标签：如 <p>，表示开始一个段落（paragraph）。

闭标签：如 </p>，表示段落的结束。

自闭合标签：如 <br /> 或 <img />，表示一个独立的元素，没有结束标签。

元素包括开始标签、结束标签（如果有的话）、属性、内容和其他元素。

例如：

在这个例子中：

<a> 和 </a> 是标签

整个 <a href="https://example.com">点击这里</a> 是一个元素，包括了开始标签、属性（href）、内容（"点击这里"）和结束标签。

可以总结为：

标签是构成元素的标记。标签是元素的一部分，但元素不仅仅是标签。】

HTML标签的类型

1.单标签是一个标签即可完整描述某个功能的标签

格式：

<标签名/>

/可以省略

常见的单标签包括 <br/>、<img/>、<hr/> 等。在 HTML5 中，单标签的结束斜杠（/）可以省略，例如 <br>、<img> 等都是有效的。

2.双标签

双标签即可以和结束的标签组成的标签，基本格式

<标签名>内容</标签名>

<标签名>为开始标签，</标签名>为结束标签

例如：<div>内容</div>、<p>段落</p> 等。

HTML的属性(attribute)

属性通常由名称和值组成，格式为：

attribute_name="value"

属性通常是以键值对的形式出现在元素（element）的开始标签内。属性值通常用引号（单引号或双引号）括起来，特别是当值包含空格时。有些属性不需要值（如required、disabled），被称为“布尔属性”，这些属性不需要值。当在元素上存在这些属性时，它们的值默认为 true；如果该属性不存在，则视为 false。

HTML特定元素属性：不同的 HTML 元素有特定的属性，这样的属性为不同的元素提供了独特的功能行为。如：

<img>的src：指定图像的 URL（必需的），altalt：提供图像的替代文本描述（为了可访问性，强烈推荐）。例：<img src="image.jpg" alt="描述性文本">

<a>的href：指定链接的目标URL（必需的），target：指定在何处打开链接（如 "_blank" 在新标签页打开）。例：<a href="https://example.com" target="_blank">访问示例网站</a>

<input>的type: 指定输入字段的类型（如 "text", "password", "checkbox", "radio" 等），name: 定义输入字段的名称，placeholder: 提供输入字段的提示文本，required: 指定输入字段为必填。例：<input type="text" name="username" placeholder="Enter your username" required>

等

HTML通用属性，也称为全局属性：

id：为元素提供唯一的标识符，可用于在 CSS 和 JavaScript 中定位元素。例：<div id="main-content">内容</div>

class：为元素指定一个或多个类名，用于样式化和脚本操作。例：<p class="text-danger highlighted">警告信息</p>

style：用于直接为元素应用内联 CSS 样式。例：<h1 style="color: blue; text-align: center;">标题</h1>

title：为元素提供提示信息，当鼠标悬停在元素上时显示。例：<a href="#" title="点击这里查看更多信息">链接</a>

HTML标签书写规则

1.HTML标签不区分大小写，推荐使用小写。

2.允许属性值不使用引号包起来：虽然在大多数情况下可以不使用引号，但最好还是使用引号，尤其是当值包含空格或特殊字符时。

3. 注释标签

常用标签及示例：

<!DOCTYPE html> <!-- 告诉浏览器使用规范-->
<html lang="zh">  <!-- lang是一个属性（attribute）用于指定网页内容的语言代码-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页名字</title>
</head>
<body>
    <!--标题标签-->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    <!--段落标签-->
    <p>段落A</p>
    <p>段落B</p>
    <!--换行标签-->
    本句后换行显示<br>    本句后换行显示<br>
    <!--水平线标签-->
    <hr>
    <!--粗体、斜体-->
    粗体：<strong>你好</strong>
    <br>
    斜体：<em>你好</em>
    <br>
    <!--特殊符号：空格：&nbsp; 大于号：&gt 小于号：&lt; -->
    在“||”内显示2个空格|&nbsp;&nbsp;| <br>
    大于号：&gt;<br>
    小于号：&lt; <br>
    <!--水平线标签-->
    <hr>
    <!--格式： <img src="图像的路径" alt="描述性文本">-->
    <img src="小花.png" alt="小花图片">

</body>
</html>

运行效果如下：