HTML标签简明通俗教程

基本知识

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

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

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

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

开标签：如

，表示开始一个段落（paragraph）。

闭标签：如

，表示段落的结束。

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

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

例如：

点击这里

在这个例子中：

和是标签

整个点击这里是一个元素，包括了开始标签、属性（href）、内容（"点击这里"）和结束标签。

可以总结为：

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

HTML****标签的类型

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

格式：

<标签名/>

/可以省略

常见的单标签包括
、、

等。在 HTML5 中，单标签的结束斜杠（/）可以省略，例如
、等都是有效的。

2.双标签

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

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

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

例如：

内容

、

段落

等。

HTML的属性(attribute)

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

attribute_name="value"

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

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

的src：指定图像的 URL（必需的），altalt：提供图像的替代文本描述（为了可访问性，强烈推荐）。例：描述性文本

的href：指定链接的目标URL（必需的），target：指定在何处打开链接（如 "_blank" 在新标签页打开）。例：访问示例网站

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

等

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

id：为元素提供唯一的标识符，可用于在 CSS 和 JavaScript 中定位元素。例：

内容

class：为元素指定一个或多个类名，用于样式化和脚本操作。例：

警告信息

style：用于直接为元素应用内联 CSS 样式。例：

标题

title：为元素提供提示信息，当鼠标悬停在元素上时显示。例：链接

HTML****标签书写规则

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

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

注释标签

常用标签及示例：

<!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>

运行效果如下：

图像标签说明

HTML图像标签格式

其中：

src（必需）：指定图像的路径（图像地址）。这个路径可以是相对路径（相对于当前HTML页面的位置），也可以是绝对路径（完整的URL）。

alt（非必需）：为图像提供替代文本。当图像无法显示时（如网络问题、图像文件损坏、用户使用了屏幕阅读器等），浏览器将显示这个替代文本。

还有

width和height（非必需）

width设置图像的宽度，height设置图像的高度，可以用像素（px）或百分比（%）为单位。

class 和 id（非必需）

用于应用 CSS 样式或通过 JavaScript 进行操作。

等

主要作用是控制页面在不同设备上的显示方式。主要用于控制视口（viewport）的宽度和初始缩放级别，确保网页在不同设备上（包括移动设备）都能良好展示，提高用户体验。

1)name="viewport"

它指示该标签与视口（viewport）有关。视口（viewport）是用户在设备上查看网页内容的可见区域。

2)content 属性包含了几个重要的参数：

a) width=device-width

将页面宽度设置为适应不同设备的的屏幕宽度。确保页面不会出现水平滚动条。

b) initial-scale=1.0

设置页面的初始缩放级别1.0 表示不进行缩放，意味着不会放大或缩小网页，而是按设备的真实宽度显示。

超链接标签格式

链接显示的文本或图像

其中：

href属性（必需）：用于指定链接的目标地址，可以是另一个网页的URL、网站内部的页面地址、文件下载地址、电子邮件地址（mailto:），或者是一个锚点（用于页面内的跳转）。例如：<a href="https://www.baidu.com>百度一下

当你想让用户能够通过点击链接来发送电子邮件时，你可以将标签的 href 属性设置为 mailto: 后跟电子邮件地址。例如：

发送邮件给某人

标签也可以用作页面内的锚点，允许用户点击链接后跳转到同一页面的特定部分。这通过给目标元素（通常是

、

等）设置一个 id 属性，并在标签的 href 属性中使用 # 后跟该 id 值来实现。例如：

第一节

跳转到第一节

target属性（非必需）：用于指定链接的打开方式。常用的值包括_self（在当前窗口打开，默认值）、_blank（在新窗口或新标签页中打开）、_parent（在父框架中打开）、_top（在整个浏览器窗口中打开，忽略任何框架）。

标签也可以用于创建指向电子邮件地址的链接。

超链接标签示例：

<!DOCTYPE html>  
<html>  
<head>  
    <title>示例</title>  
</head>  
<body>  
  <h3>超链接</h3>  
  <p>点击下面的链接访问百度：</p>  
  <a href="https://www.baidu.com/">访问百度一下</a>
  
  <h3>页面内链接示</h3>
  <a href="#section2">跳转到第二部分</a>  
  <p>这是第一部分的内容...</p>    
  <p>第一部分的1...</p> 
  <p>第一部分的2...</p> 
  <p>第一部分的3...</p> 
  <p>第一部分的4...</p> 
  <p>第一部分的5...</p> 
  <p>第一部分的6...</p> 
  <p>第一部分的7...</p> 
  <p>第一部分的8...</p> 
  <p>第一部分的9...</p> 
  <p>第一部分的10...</p> 
  <p>第一部分的11...</p> 
  <p>第一部分的12...</p> 
  <p>第一部分的13...</p> 
  <p>第一部分的14...</p> 
  <p>第一部分的15...</p> 
  <p>第一部分的16...</p> 
  <p>第一部分的17...</p> 
  <p>第一部分的18...</p> 
  <p>第一部分的19...</p> 
  <p>第一部分的20...</p> 
  <p>第一部分的21...</p> 
  <p>第一部分的22...</p> 
  <h3 id="section2">第二部分</h3>  
  <p>这是第二部分的内容...</p> 
  <p>这是第二部分的内容...</p>   
</body>  
</html>

输入和文本域标签

在 HTML 中，输入（标签是 <input>）和文本域（标签是<textarea>）是表单的基本元素，用于接受用户输入数据。

<input> 标签用于创建各种类型的输入字段（也称为输入控件），如文本框、密码框、单选按钮、复选框等。输入（Input）标签基本格式：

其中

type属性定义输入字段（Input Fields）类型，常见值：

text：文本输入框

password：密码输入框

email：电子邮件地址输入框

number：数字输入框

radio：单选按钮

checkbox：复选框

submit：提交按钮

button：普通按钮

file：文件上传

date：日期选择器

submit：提交按钮

reset：重置按钮

下拉列表

<select> 标签用于创建下拉列表。可让用户可以从一个预定义的选项中选择一个或多个值。<select>标签内部包含一系列的<option>标签，每个<option>标签定义了一个可供选择的选项。

基本结构

<option value="option1">选项1</option>

<option value="option2" selected>选项2</option>

<option value="option3">选项3</option>

</select>

其中：

<option>标签之间的文本（如“选项 1”）是用户在下拉列表中看到的选项文本。

属性

name：定义下拉列表的名称，用于提交表单时的参数名称。

id：定义下拉列表的唯一标识符，常用于 JavaScript 和 CSS 选择器。

multiple：允许用户选择多个选项（默认为单选模式）。

size：定义下拉列表的可见选项数（如果 multiple 属性存在）。

value：指定选项的值，提交表单时传递。

selected：指定默认选中的选项。

disabled：使选项不可选。

下拉列表示例：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例</title>  
</head>  
<body>  
  <p>下拉框
    <select name="列表名称">
        <option value="选择项">中国</option>
        <option value="选择项" selected>美国</option>
       <option value="选择项">英国</option>
    </select>
 </p>

</body>  
</html>

自定义按钮

使用<button>或<input type="button">标签创建基础按钮。

<button> 标签是 HTML 中用于创建按钮的元素。它的基本格式如下：

其中

type 属性指定按钮的类型。默认值是 submit。

type="button"：普通按钮，点击时不会提交表单。

type="submit"：提交按钮，点击时会提交表单数据。

type="reset"：重置按钮，点击时会重置表单中的所有控件到初始值。

name 属性定义按钮的名称（用于表单提交时），可选。

disabled 属性是一个布尔属性，当存在时，按钮将被禁用，用户无法与之交互。

onclick：绑定 JavaScript 事件处理程序，在按钮被点击时执行。

使用<button>标签创建按钮

a.基本按钮:

b.带有类型的按钮:

c.带有图标的按钮:

<img src="icon.png" alt="图标"> 带图标的按钮

</button>

d.使用CSS样式的按钮:

绿色按钮

</button>

e.带有onclick事件的按钮:

使用input标签创建按钮:

下面提供一个完整的HTML页面示例，展示如何使用<button>和<input>标签创建不同类型的按钮，并附带简单的JavaScript交互。源码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML按钮示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            padding: 20px;
        }
        h1 {
            color: #333;
        }
        .button-group {
            margin-bottom: 20px;
        }
        button, input[type="button"], input[type="submit"], input[type="reset"] {
            margin: 5px;
            padding: 10px 15px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>HTML按钮示例</h1>

    <div class="button-group">
        <h2>使用 &lt;button&gt; 标签</h2>
        <button>基本按钮</button>
        <button type="button">按钮类型</button>
        <button type="submit">提交按钮</button>
        <button type="reset">重置按钮</button>
        <button disabled>禁用按钮</button>
        <button onclick="myFun()">点击事件按钮</button>
        <button style="background-color: #4CAF50; color: white;">带样式的按钮</button>
    </div>

    <div class="button-group">
        <h2>使用 &lt;input&gt; 标签</h2>
        <input type="button" value="输入按钮">
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <input type="button" value="禁用按钮" disabled>
    </div>

    <div class="button-group">
        <h2>带图标的按钮</h2>
        <button>
            <img src="按钮.png" alt="图标" style="vertical-align: middle; margin-right: 5px;">
            运行
        </button>
    </div>

    <script>
         function myFun(){
             alert('按钮被点击了！')
         }
    </script>
</body>
</html>

列表

HTML中的列表标签用于在网页上创建有序列表、无序列表以及定义列表。这些列表标签为内容的组织和展示提供了灵活的方式。

无序列表 (

无序列表使用

（List Item）标签包裹。无序列表中的每个列表项前面通常会显示一个项目符号（通常是圆点），但这个样式可以通过CSS进行自定义。

示例代码：

列表项 1
列表项 2
列表项 3

其中，属性：

type：指定项目符号的样式，常见值包括：

disc：实心圆点（默认）

circle：空心圆点

square：方块

有序列表 (

)

有序列表使用

标签包裹列表项。与无序列表不同，有序列表中的每个列表项前面会显示一个编号（默认是阿拉伯数字），但编号的样式和类型（如罗马数字、字母等）也可以通过CSS进行自定义。

示例代码：

列表项 1
列表项 2
列表项 3

其中属性：

type：指定列表项的编号样式。可选值包括：

1：阿拉伯数字（默认）

A：大写字母

a：小写字母

I：大写罗马数字

i：小写罗马数字

start：指定列表项的起始编号（默认为 1）。

定义列表 (
)

定义列表使用

（Definition Term）标签用于标记术语或名称，而

（Definition Description）标签则紧跟在

之后，用于提供该术语的定义或描述。 示例代码： HTML HyperText Markup Language，超文本标记语言，用于构建网页。 CSS Cascading Style Sheets，层叠样式表，用于设计网页的外观。 JavaScript 一种编程语言，用于网页的交互和动态效果。 在定义列表中，

和

元素不必成对出现，但它们通常用于定义和描述成对的关系。

一个简单而完整的列表示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例</title>

</head>  
<body>  
  
<h2>列表示例</h2> 

    <!--有序列表-->
    <ol>
      <li>C++</li>
      <li>JavaScript</li>
      <li>Python</li>
    </ol>

    <!--无序列表-->
    <ul>
      <li>C++</li>
      <li>JavaScript</li>
      <li>Python</li>
    </ul>

    <!--自定义列表-->
    <!--dt:列表名称；dd：列表内容-->
    <dl>
      <dt>学科</dt>
      <dd>C++</dd>
      <dd>JavaScript</dd>
      <dd>Python</dd>
    </dl>

</body>
</html>

表格

HTML的表格使用

标签来创建，它允许你以行和列的形式组织数据。表格在网页上非常有用，尤其是当你需要展示大量数据，如统计信息、商品列表、财务数据、成绩单等时。

基本表格结构

<th>标题1</th> 

<th>标题2</th> 

<th>标题3</th>

<td>数据1</td> 

<td>数据2</td> 

<td>数据3</td>

在上面的例子中，border="1"属性被添加到

标签中，以便能够清楚地看到表格的边框。然而，在现代网页设计中，推荐使用CSS来设置表格的样式，因为这样可以提供更灵活和强大的样式控制标签：

：定义表格的行。

：定义表头单元格。

：定义普通单元格。

rowspan 和 colspan：用于合并单元格。

HTML标签简明通俗教程

HTML标签简明通俗教程

基本知识

标题

超链接标签格式

第一节

输入和文本域标签

下拉列表

自定义按钮

列表

表格

表单

行内元素与块元素

设置背景图片

HTML页面结构框架标签

发表评论

“HTML标签简明通俗教程”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航

HTML标签简明通俗教程

HTML标签简明通俗教程

基本知识

标题

超链接标签格式

第一节

输入和文本域标签

下拉列表

自定义按钮

列表

表格

表单

行内元素与块元素

设置背景图片

HTML****页面结构框架标签

发表评论

“HTML标签简明通俗教程”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航

HTML页面结构框架标签