HTML标签简明通俗教程

学习&实践爱好者

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

阅读量384

点赞数 6

分类专栏： HTML5与CSS3 文章标签： html 前端

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

版权

HTML5与CSS3 专栏收录该内容

80 篇文章 15 订阅

订阅专栏

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标签书写规则

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

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

3. 注释标签

常用标签及示例：

<!DOCTYPE html> <!-- 告诉浏览器使用规范-->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!--  title标签：网页名字-->
  <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 进行操作。

等

超链接标签格式

<a href="链接地址" target="打开方式">链接显示的文本或图像</a>

其中：

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

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

<a href="mailto:someone@example.com">发送邮件给某人</a>

<a> 标签也可以用作页面内的锚点，允许用户点击链接后跳转到同一页面的特定部分。这通过给目标元素（通常是 <h1>、<h2>、<p> 等）设置一个 id 属性，并在 <a> 标签的 href 属性中使用 # 后跟该 id 值来实现。例如：

<a href="#section1">跳转到第一节</a>

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

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

超链接标签示例：

<!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>标签定义了一个可供选择的选项。

基本结构

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

1. 无序列表 (<ul>)

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

示例代码：

</ul>

其中，属性：

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

disc：实心圆点（默认）

circle：空心圆点

square：方块

2. 有序列表 (<ol>)

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

示例代码：

</ol>

其中属性：

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

1：阿拉伯数字（默认）

A：大写字母

a：小写字母

I：大写罗马数字

i：小写罗马数字

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

3. 定义列表 (<dl>)

定义列表使用<dl>（Description List）标签定义，它通常用于术语及其定义的列表，或者任何成对的列表项。在定义列表中，<dt>（Definition Term）标签用于标记术语或名称，而<dd>（Definition Description）标签则紧跟在<dt>之后，用于提供该术语的定义或描述。

示例代码：

<dl>

<dd>HyperText Markup Language，超文本标记语言，用于构建网页。</dd>

<dd>Cascading Style Sheets，层叠样式表，用于设计网页的外观。</dd>

<dt>JavaScript</dt>

<dd>一种编程语言，用于网页的交互和动态效果。</dd>

</dl>

在定义列表中，<dt>和<dd>元素不必成对出现，但它们通常用于定义和描述成对的关系。

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

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

基本表格结构

<tr>

</tr>

<tr>

</tr>

</table>

在上面的例子中，border="1"属性被添加到<table>标签中，以便能够清楚地看到表格的边框。然而，在现代网页设计中，推荐使用CSS来设置表格的样式，因为这样可以提供更灵活和强大的样式控制标签：

<tr>：定义表格的行。

<th>：定义表头单元格。

<td>：定义普通单元格。

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

<caption>：为表格提供标题。它应该被放置在<table>标签内部的最前面。

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

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

</head>  
<body>  

<h2>表格示例</h2>  

<!-- border属性在这里仅用于演示，实际开发中推荐使用CSS来设置边框 -->    
<table  border="1">  
    <caption style="font-size: 20px; font-weight: bold;">学生信息表</caption>  
 
    <tr>  
        <th>姓名</th>  
        <th>年龄</th>  
        <th>专业</th>  
    </tr>
 
    <tr>  
        <td>张三</td>  
        <td>20</td>  
        <td>计算机科学</td>  
    </tr>  
    <tr>  
        <td>李四</td>  
        <td>22</td>  
        <td>软件工程</td>  
    </tr>  
    <tr>  
        <td>王五</td>  
        <td>19</td>  
        <td>数据科学</td>  
    </tr>

    <tr>  
      <td colspan="3">制表：某某</td>  
    </tr>  
 
</table> 
</body>
</html>

例子中，colspan="3"属性被添加到页脚行的<td>标签中，以便该单元格能够横跨三列。这对于在表格底部添加总结信息或脚注非常有用。

与表格相关的标签还有：

<thead>：包含表格的表头内容。虽然这不是必需的，但它有助于在视觉上区分表头和表格主体，并且对于屏幕阅读器等辅助技术来说也是有益的。

<tbody>：包含表格的主体内容。同样，这不是必需的，但有助于组织和样式的应用。

<tfoot>：包含表格的页脚内容。它通常用于包含表格的总结或脚注信息。

表单

HTML中的表单（Forms）是一种允许用户输入数据的结构，这些数据通常会被发送到服务器进行处理。表单的基本结构由 <form> 标签定义，表单可以包含多种输入元素，如文本框、密码框、单选按钮、复选框、下拉选择菜单、提交按钮等，用于收集用户的信息。

表单的基本结构由 <form> 标签定义，内部可以包含各种输入控件（也称为输入字段）、按钮和标签。包含：输入标签(<input>)、多行文本框标签(<textarea>)、下拉列表标签(<select> 和 <option>)、按钮标签(<button>)。

表单数据处理

表单（Forms）是用户与网站交互的重要方式之一，允许用户输入数据并提交给服务器处理。处理表单数据时，HTTP协议提供了两种主要的方法：GET和POST。

GET 方法：将数据附加到 URL 中，适合获取数据，不适合处理大量数据或敏感信息。

GET方法的数据是附加在URL上的，当使用GET方法提交表单时，表单中的数据会被附加到URL的末尾，数据之间用&符号分隔，每个数据项由键=值的形式组成。例如，如果你有一个包含用户名（username）和密码（password）的表单，并且用户输入了user作为用户名和pass作为密码，那么提交表单后，URL可能会变成类似http://example.com/login?username=user&password=pass的形式。不适合处理大量数据或者敏感信息（如密码），因为 URL 有长度限制，而且在浏览器历史记录或者服务器日志中可能会暴露这些信息。

POST 方法：将数据包含在请求体中，适合提交数据和处理敏感信息。

POST方法将表单数据包含在HTTP请求的体（body）中发送给服务器，而不是附加在URL上。这意味着数据的发送对用户来说是不可见的，也不会在URL中留下痕迹。因此它非常适合用于提交表单数据，特别是包含敏感信息（如密码、个人信息等）的表单。此外，POST方法也适用于提交大量数据，因为请求体的大小限制通常比URL的长度限制要大得多。

HTML5的表单(form)介绍 https://blog.csdn.net/cnds123/article/details/120653578

行内元素与块元素

在HTML（HyperText Markup Language）中，元素根据其显示方式和在文档流中的行为被分类为行内元素（Inline Elements）和块元素（Block Elements）。

行内元素（Inline Elements）

定义：行内元素则是与文本在同一行内显示的元素，通常不会独占一行。

特点：

只占据其内容的宽度。

不能设置宽度和高度。

边距会影响到其周围的文本行。

常见的行内元素：

<span>

<a>

<img>

<em>

块级元素（Block Elements）

定义：块级元素是指可以独占一行的元素。它们通常在页面中形成一个“块”，并且在其前后会自动换行。

特点：

占据整个宽度。

可以设置宽度、高度、边距和内填充等样式。

常见的块级元素：

<div>

<p>

<ol>、<ul>（有序和无序列表）

<table>

行内元素与块元素示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例</title>
</head>
<body>
    <p>这是一个包含<span style="color: red; font-size: 20px;">红色行内元素</span>的文本示例。</p>  

    <div style="background-color: yellow;">
        <h3>这是一个div块级元素的标题</h3>
        <p>这是一个一个div块级元素的段落。</p>
    </div>
</body>
</html>