【前端｜HTML系列第2篇】HTML零基础入门之标签元素

野性酷女 2023-10-12 21:34 46阅读 0赞

![在这里插入图片描述][0eed64ea2f7444519ab54f8f7ac30772.png]

大家好，欢迎来到前端入门系列的第二篇博客。在这个系列中，我们将一起学习前端开发的基础知识，从零开始构建网页和Web应用程序。本篇博客将为大家介绍HTML（超文本标记语言）常用标签元素，帮助零基础小白快速入门。

### 这里写目录标题 ###

*  前言：学习目标
 *  1. 标题标签：h1-h6
 *  2.段落标签：p
 *  3.注释标签：!
 *  4. 链接标签：a
 *  5. 图像标签：img
 *  6. 列表标签：ul 和 ol
 *  7. div 标签和span标签
 *  8.表格标签：table、tr、td
 *  9. 文字格式标签
 *   *  9.1 粗体标签：\`<b>\` 和 \`<strong>\`
     *  9.2 斜体标签：\`<i> \`和 \`<em>\`
     *  9.3 下划线标签：\`<u>\`
     *  9.4 删除线标签：\`<s>\` 和 \`<del>\`
     *  9.5 上标和下标标签：\`<sup>\` 和 \`<sub>\`
 *  10. 表单标签
 *   *  10.1 \`<form> \`标签：
     *  10.2 \`<input>\` 标签：
     *  10.3 \`<label>\` 标签：
     *  10.4 \`<select>\` 和 \`<option>\` 标签：
     *  10.5 \`<textarea>\` 标签：
     *  10.6 \`<button>\` 标签：
 *  11. \`<br>\` 标签：
 *  12. 特殊字符
 *  总结

# 前言：学习目标 #

1.  掌握html常用表情的使用、基础特性以及用途。

# 1. 标题标签：h1-h6 #

简介：标题标签用于定义网页中的标题文本，从h1到h6，分别表示不同级别的标题，h1是最高级别的标题，h6是最低级别的标题。

特点：

*  标题标签具有语义化的作用，有助于网页的结构化和可读性。
 *  标题标签在页面中通常呈现较大的字体大小，并带有一定的样式效果。
 *  h1标签最常用于页面的主标题，而h2到h6标签则用于副标题或次要标题。

示例代码：

渲染效果：  
![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gep5MPbm-1687765067032)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626135641762.png)\]][img-Gep5MPbm-1687765067032_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626135641762.png]

# 2.段落标签：p #

简介：段落标签用于定义文本的段落，会自动在段落之间添加空白。

特点：段落标签具有默认的上下边距，并自动换行。

示例代码：

<p>这是一个段落。</p>
    <p>这是另一个段落。</p>

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XA89BjKk-1687765067039)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626144749245.png)\]][img-XA89BjKk-1687765067039_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626144749245.png]

# 3.注释标签：! #

简介：用于将代码转为注释，在运行代码时，注释不会渲染在页面上，快捷键ctrl+'/'就可以将代码快速变为注释

<!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>
          test
        </p>
    </body>
    </html>

渲染效果：  
![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qCdGNqWg-1687765067041)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626144727625.png)\]][img-qCdGNqWg-1687765067041_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626144727625.png]

# 4. 链接标签：a #

简介：链接标签用于创建超链接，将文本或图像链接到其他页面或资源。

特点：链接标签具有href属性，指定目标URL或资源的地址。

示例代码：

<a href="https://www.example.com">这是一个链接</a>

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>href</td> 
   <td>用于指定链接目标的URL地址（必须属性）</td> 
  </tr> 
  <tr> 
   <td>target</td> 
   <td>用于指定链接页面打开的方式，_self为默认方式在此页面直接跳转，_blank在新的窗口打开</td> 
  </tr> 
 </tbody> 
</table>

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hwvPoNKi-1687765067042)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626144833795.png)\]][img-hwvPoNKi-1687765067042_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626144833795.png]

用途：

1.  导航链接：`<a>`标签可用于创建导航菜单或链接到其他页面的导航链接。例如：
    
        <a href="index.html">首页</a>
        <a href="about.html">关于我们</a>
2.  外部链接：`<a>`标签可以用于创建指向其他网站的链接。例如：
    
        <a href="https://www.example.com">访问示例网站</a>
3.  锚链接：`<a>`标签可以用于创建页面内部的锚链接，以便在同一页面中快速导航到不同的部分。例如：
    
        <a href="#section1">跳转到第一节</a>
        ...
        <h2 id="section1">第一节</h2>
    
    我在a标签下面放置了200个div标签最后才是h2标签
    
    ![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IsW6MWri-1687765067044)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626145725147.png)\]][img-IsW6MWri-1687765067044_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626145725147.png]
    
    我们给h2标签设了个id属性，设置a标签里的href属性：“\#section1”，点击a标签就可以直接跳到h2标签的位置
    
    ![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s3iizVfS-1687765067044)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626145917526.png)\]][img-s3iizVfS-1687765067044_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626145917526.png]
4.  下载链接：`<a>`标签可以用于提供文件的下载链接。例如：
    
        <a href="files/document.pdf" download>下载文档</a>
5.  邮件链接：`<a>`标签可以用于创建发送电子邮件的链接。例如：
    
        <a href="mailto:info@example.com">发送邮件给我们</a>
6.  JavaScript动作：`<a>`标签可以与JavaScript代码一起使用，执行特定的动作或函数。例如：
    
        <a href="javascript:void(0);" onclick="myFunction()">点击这里</a>

这些只是`<a>`标签的一些常见用途，它还具有其他属性和功能，可以根据需要进行扩展和自定义。

# 5. 图像标签：img #

简介：图像标签用于在网页中插入图像。

特点：图像标签具有src属性，指定图像的URL或文件路径。

示例代码：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th align="center">描述</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>src</code></td> 
   <td align="center">图像的URL或文件路径</td> 
   <td><code>&lt;img src="image.jpg"&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>alt</code></td> 
   <td align="center">图像的替代文本</td> 
   <td><code>&lt;img src="image.jpg" alt="描述文本"&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>title</code></td> 
   <td align="center">鼠标悬停时显示的标题文本</td> 
   <td><code>&lt;img src="image.jpg" title="标题"&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>loading</code></td> 
   <td align="center">图像加载方式的提示（<code>lazy</code>、<code>eager</code>、<code>auto</code>）</td> 
   <td><code>&lt;img src="image.jpg" loading="lazy"&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7fEBiWs1-1687765067044)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626150328058.png)\]][img-7fEBiWs1-1687765067044_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626150328058.png]

# 6. 列表标签：ul 和 ol #

简介：无序列表标签（ul）用于创建无序列表，有序列表标签（ol）用于创建有序列表。

特点：无序列表使用圆点或其他符号来标记列表项，有序列表使用数字或字母来标记列表项。

示例代码：

<ul>
      <li>无序列表项1</li>
      <li>无序列表项2</li>
      <li>无序列表项3</li>
    </ul>
    
    <ol>
      <li>有序列表项1</li>
      <li>有序列表项2</li>
      <li>有序列表项3</li>
    </ol>

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yTzzCLIl-1687765067044)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626150411019.png)\]][img-yTzzCLIl-1687765067044_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626150411019.png]

# 7. div 标签和span标签 #

简介：

1.  标签是一个通用的容器标签，用于将一组相关元素包装在一起，并为其应用样式或JavaScript。
2.  `<span>` 标签用于对文本的某个部分进行标记或分组。

特点：

1.  \`\`
    
    \`标签没有特定的语义，主要用于布局和组织页面结构。
2.  `<span>`是一个内联元素，不会独占一行，只会包裹其内部的文本或其他内联元素。
3.  它本身并没有默认的样式或行为，主要用于通过 CSS 或 JavaScript 对其进行操作。

示例代码：

<div>
      <h1>这是一个 div 容器</h1>
      <p>这是 div 容器中的段落。</p>
      <img src="image.jpg" alt="图像描述">
    </div>
    <span onclick="myFunction()">Click me</span>

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d1tDGRUy-1687765067045)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626150911603.png)\]][img-d1tDGRUy-1687765067045_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626150911603.png]

与 `<div>` 标签相比，标签有以下区别：

1.  类型：`<span>` 是内联元素，而`<div>` 是块级元素。
2.  作用范围：`<span>`通常用于标记文本的一部分或内联元素，而`<div>` 通常用于分隔和包裹更大的文本块或其他元素。
3.  默认样式：`<span>`没有默认的样式，不会独占一行，而`<div>` 默认具有块级元素的特性，会自动占据一行并撑满父容器的宽度。
4.  嵌套关系：由于 `<span>` 是内联元素，它可以嵌套在其他内联元素中，如文本或其他内联元素。而 `<div>` 是块级元素，不能嵌套在内联元素中，只能作为容器嵌套其他块级或内联元素。

# 8.表格标签：table、tr、td #

简介：表格标签用于创建网页中的表格，包括表头、行和单元格。

特点：`<table>` 表示整个表格，`<tr>` 表示表格中的行，`<td>` 表示表格中的单元格。

示例代码：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xQdE75SF-1687765067045)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626151006757.png)\]][img-xQdE75SF-1687765067045_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626151006757.png]

以下是`<table>`标签独有的属性：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>border</code></td> 
   <td>指定表格边框的宽度</td> 
   <td><code>&lt;table border="1"&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>cellspacing</code></td> 
   <td>指定单元格之间的间距</td> 
   <td><code>&lt;table cellspacing="10"&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>cellpadding</code></td> 
   <td>指定单元格内容与边框之间的间距</td> 
   <td><code>&lt;table cellpadding="5"&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>width</code></td> 
   <td>指定表格的宽度</td> 
   <td><code>&lt;table width="400"&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>height</code></td> 
   <td>指定表格的高度</td> 
   <td><code>&lt;table height="300"&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>align</code></td> 
   <td>指定表格相对于周围内容的对齐方式</td> 
   <td><code>&lt;table align="center"&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>bgcolor</code></td> 
   <td>指定表格的背景颜色</td> 
   <td><code>&lt;table bgcolor="#f0f0f0"&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>summary</code></td> 
   <td>提供关于表格内容的摘要或描述</td> 
   <td><code>&lt;table summary="这是一个数据表格"&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>caption</code></td> 
   <td>定义表格的标题</td> 
   <td><code>&lt;caption&gt;这是一个表格标题&lt;/caption&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>colspan</code></td> 
   <td>指定单元格横跨的列数</td> 
   <td><code>&lt;td colspan="2"&gt;跨两列&lt;/td&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>rowspan</code></td> 
   <td>指定单元格纵跨的行数</td> 
   <td><code>&lt;td rowspan="3"&gt;跨三行&lt;/td&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>headers</code></td> 
   <td>定义当前单元格与其他单元格之间的关系</td> 
   <td><code>&lt;th headers="col1 row1"&gt;表头&lt;/th&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>scope</code></td> 
   <td>定义表头单元格的范围</td> 
   <td><code>&lt;th scope="col"&gt;列标题&lt;/th&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>colgroup</code></td> 
   <td>将表格列分组并应用共同的属性</td> 
   <td><code>&lt;colgroup&gt;&lt;col span="2" style="background-color:#f0f0f0;"&gt;&lt;/colgroup&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>thead</code></td> 
   <td>定义表格的表头部分</td> 
   <td><code>&lt;thead&gt;&lt;tr&gt;&lt;th&gt;表头1&lt;/th&gt;&lt;th&gt;表头2&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>tbody</code></td> 
   <td>定义表格的主体内容部分</td> 
   <td><code>&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;数据1&lt;/td&gt;&lt;td&gt;数据2&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>tfoot</code></td> 
   <td>定义表格的页脚部分</td> 
   <td><code>&lt;tfoot&gt;&lt;tr&gt;&lt;td&gt;总计&lt;/td&gt;&lt;td&gt;100&lt;/td&gt;&lt;/tr&gt;&lt;/tfoot&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>sortable</code></td> 
   <td>指示表格是否可排序</td> 
   <td><code>&lt;table sortable&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

# 9. 文字格式标签 #

文字格式化的标签主要用于调整文本的样式、格式和呈现方式。以下是一些常用的文字格式化标签的介绍：

## 9.1 粗体标签：`<b>` 和 `<strong>` ##

*  `<b>` 标签用于为文本设置粗体样式。
 *  `<strong>` 标签表示更强的重要性或强调文本，通常以粗体显示。 示例代码：

<p>This is <b>bold</b> text.</p>
    <p>This is <strong>strong</strong> text.</p>

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KlIcwnbv-1687765067045)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626151101612.png)\]][img-KlIcwnbv-1687765067045_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626151101612.png]

## 9.2 斜体标签：`<i>`和 `<em>` ##

*  `<i>`标签用于为文本设置斜体样式。
 *  `<em>` 标签表示强调文本，通常以斜体显示，具有更强的语义化。 示例代码：

<p>This is <i>italic</i> text.</p>
    <p>This is <em>emphasized</em> text.</p>

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ByHy5xY8-1687765067045)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626151136345.png)\]][img-ByHy5xY8-1687765067045_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626151136345.png]

## 9.3 下划线标签：`<u>` ##

*  `<u>` 标签用于为文本添加下划线。 示例代码：

<p>This is <u>underlined</u> text.</p>

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pygp6jeH-1687765067045)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626151204998.png)\]][img-pygp6jeH-1687765067045_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626151204998.png]

## 9.4 删除线标签：`<s>` 和 `<del>` ##

*  `<s>` 标签用于为文本添加删除线。
 *  `<del>` 标签表示已被删除的文本，通常以删除线显示，用于表示删除或过时的内容。 示例代码：

<p>This is <s>strikethrough</s> text.</p>
    <p>This is <del>deleted</del> text.</p>

![在这里插入图片描述][1a065cb9b8884282b05b366c4e42cbc7.png]

## 9.5 上标和下标标签：`<sup>` 和 `<sub>` ##

*   标签用于将文本设置为上标，通常用于表示指数、上标数字等。
 *   标签用于将文本设置为下标，通常用于表示化学式、数学公式等。 示例代码：

<p>This is superscript: X<sup>2</sup></p>
    <p>This is subscript: H<sub>2</sub>O</p>

![在这里插入图片描述][4e42f2e674604862858cdd744c329ae9.png]

这些文字格式化标签可以通过CSS样式进行进一步的定制和美化，以满足网页设计的需求。记住，在实际开发中，应尽量避免滥用格式化标签，优先考虑使用CSS来控制文本样式。

# 10. 表单标签 #

表单标签在HTML中扮演着关键的角色，用于创建用户交互性的表单，使用户能够输入数据并将其提交给服务器进行处理。下面是一些常用的表单标签的详细介绍：

## 10.1 `<form>`标签： ##

*  简介：`<form>` 标签用于创建表单，它包含了用户输入数据的一组元素。
 *  特点：表单可以通过设置不同的属性来指定数据提交的目标和方式。
 *  示例代码：
    
        <form action="/submit-form" method="POST">
          
        </form>

## 10.2 `<input>` 标签： ##

*  简介：`<input>` 标签用于创建不同类型的输入字段，如文本框、复选框、单选按钮等。
 *  特点：通过不同的 `type` 属性值，可以定义不同的输入字段类型。
 *  示例代码：
    
        <input type="text" name="username" placeholder="用户名">
        <input type="password" name="password" placeholder="密码">
        <input type="checkbox" name="remember" id="remember">
        <label for="remember">记住我</label>
        <input type="radio" name="gender" value="male"> 男
        <input type="radio" name="gender" value="female"> 女

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KxCdE4XU-1687765067045)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626151439841.png)\]][img-KxCdE4XU-1687765067045_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626151439841.png]

input标签不同的type的意义：

<table> 
 <thead> 
  <tr> 
   <th><code>type</code> 属性</th> 
   <th>描述</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>text</code></td> 
   <td>单行文本输入框</td> 
   <td><code>&lt;input type="text"&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>password</code></td> 
   <td>密码输入框</td> 
   <td><code>&lt;input type="password"&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>number</code></td> 
   <td>数字输入框</td> 
   <td><code>&lt;input type="number"&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>email</code></td> 
   <td>邮箱输入框</td> 
   <td><code>&lt;input type="email"&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>tel</code></td> 
   <td>电话号码输入框</td> 
   <td><code>&lt;input type="tel"&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>url</code></td> 
   <td>URL输入框</td> 
   <td><code>&lt;input type="url"&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>date</code></td> 
   <td>日期选择器</td> 
   <td><code>&lt;input type="date"&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>time</code></td> 
   <td>时间选择器</td> 
   <td><code>&lt;input type="time"&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>datetime</code></td> 
   <td>日期时间选择器</td> 
   <td><code>&lt;input type="datetime"&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>checkbox</code></td> 
   <td>多选框</td> 
   <td><code>&lt;input type="checkbox"&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>radio</code></td> 
   <td>单选框</td> 
   <td><code>&lt;input type="radio"&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>file</code></td> 
   <td>文件上传</td> 
   <td><code>&lt;input type="file"&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>submit</code></td> 
   <td>提交按钮</td> 
   <td><code>&lt;input type="submit"&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

## 10.3 `<label>` 标签： ##

*  简介： 标签用于为表单元素创建标签描述，提供可点击的标签文本。
 *  特点：通过将 元素与  元素关联，可以通过点击标签来聚焦到相关的表单字段。
 *  示例代码：
    
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username">

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jsB32oRD-1687765067045)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626151647610.png)\]][img-jsB32oRD-1687765067045_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626151647610.png]

## 10.4 `<select>` 和 `<option>` 标签： ##

*  简介：`<select>` 标签用于创建下拉列表，`<option>` 标签定义下拉列表中的选项。
 *  特点：用户可以从预定义的选项中选择一个值。
 *  示例代码：
    
        <select name="country">
          <option value="china">中国</option>
          <option value="us">美国</option>
          <option value="uk">英国</option>
        </select>

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ob1X7OHE-1687765067045)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626151750192.png)\]][img-Ob1X7OHE-1687765067045_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626151750192.png]

## 10.5 `<textarea>` 标签： ##

*  简介：`<textarea>` 标签用于创建多行文本输入框。
 *  特点：可以用于输入大段的文本或多行内容。
 *  示例代码：
    
        <textarea name="message" rows="4" cols="40"></textarea>

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4EaWPKVi-1687765067046)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626151834441.png)\]][img-4EaWPKVi-1687765067046_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626151834441.png]

## 10.6 `<button>` 标签： ##

*  简介：`<button>` 标签用于创建可点击的按钮。
 *  特点：可以用于提交表单、重置表单或执行自定义的JavaScript操作。
 *  示例代码：
    
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button" onclick="myFunction()">点击我</button>

这些是一些常用的表单标签，它们可以结合使用来创建丰富和交互性强的表单。通过使用这些标签以及适当的属性和事件处理，可以实现数据的输入、验证和提交。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gPjmvDLW-1687765067046)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626151855198.png)\]][img-gPjmvDLW-1687765067046_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626151855198.png]

# 11. `<br>` 标签： #

*  简介：`<br>` 标签用于在文本中创建换行效果。
 *  特点：`<br>` 标签是一个空标签，不需要闭合标签。
 *  示例代码：
    
        <p>This is the first line.<br>
        This is the second line.</p>

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wxUR33ty-1687765067046)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626151919098.png)\]][img-wxUR33ty-1687765067046_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626151919098.png]

# 12. 特殊字符 #

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N7WNj5d7-1687765067046)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626152520854.png)\]][img-N7WNj5d7-1687765067046_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626152520854.png]

# 总结 #

本篇文章详细的介绍了html常用标签的特点，展现，属性以及应用等方面，希望能够帮助零基础小白快速入门html，也可以作为大家查询html常用标签如何使用的检索工具。如果觉得写的不错，请给小豪点个关注吧！

[0eed64ea2f7444519ab54f8f7ac30772.png]: https://img-blog.csdnimg.cn/0eed64ea2f7444519ab54f8f7ac30772.png
[img-Gep5MPbm-1687765067032_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626135641762.png]: https://img-blog.csdnimg.cn/eff6759f504e4c74aad70e16856c561d.png
[img-XA89BjKk-1687765067039_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626144749245.png]: https://img-blog.csdnimg.cn/e29e671d1df64fd4be9b507b7e6a36b7.png
[img-qCdGNqWg-1687765067041_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626144727625.png]: https://img-blog.csdnimg.cn/eeafde8af35245269e61b5cf2693ca1c.png
[img-hwvPoNKi-1687765067042_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626144833795.png]: https://img-blog.csdnimg.cn/aaeb32d5aa144ecd8e85b79fa235118d.png
[img-IsW6MWri-1687765067044_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626145725147.png]: https://img-blog.csdnimg.cn/3eb7645430b84d2888e281da484e25a9.png
[img-s3iizVfS-1687765067044_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626145917526.png]: https://img-blog.csdnimg.cn/c51124c923f14dbca134caf21fa7bd31.png
[img-7fEBiWs1-1687765067044_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626150328058.png]: https://img-blog.csdnimg.cn/2eb36222a35a412a9d0b46c3771027d2.png
[img-yTzzCLIl-1687765067044_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626150411019.png]: https://img-blog.csdnimg.cn/dc8b2257bee04bad87ca55f4001d84f9.png
[img-d1tDGRUy-1687765067045_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626150911603.png]: https://img-blog.csdnimg.cn/58f5e9cf83ac41d494b2eed4472e6c8f.png
[img-xQdE75SF-1687765067045_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626151006757.png]: https://img-blog.csdnimg.cn/4a19d1ee94a3424aa8f08fbebc5f3f5f.png
[img-KlIcwnbv-1687765067045_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626151101612.png]: https://img-blog.csdnimg.cn/84ab265649c04dc38cb5a1299e60b491.png
[img-ByHy5xY8-1687765067045_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626151136345.png]: https://img-blog.csdnimg.cn/bd92d6c69d9f4051a1590bc64f53aa41.png
[img-pygp6jeH-1687765067045_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626151204998.png]: https://img-blog.csdnimg.cn/883532bfe1bb44c7a408a343d7080d80.png
[1a065cb9b8884282b05b366c4e42cbc7.png]: https://img-blog.csdnimg.cn/1a065cb9b8884282b05b366c4e42cbc7.png
[4e42f2e674604862858cdd744c329ae9.png]: https://img-blog.csdnimg.cn/4e42f2e674604862858cdd744c329ae9.png
[img-KxCdE4XU-1687765067045_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626151439841.png]: https://img-blog.csdnimg.cn/323985c52ab54df5acc60a88e376eeab.png
[img-jsB32oRD-1687765067045_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626151647610.png]: https://img-blog.csdnimg.cn/d8783002a1904088a858190c16967b31.png
[img-Ob1X7OHE-1687765067045_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626151750192.png]: https://img-blog.csdnimg.cn/cd875aa2ede841f3a0a0b77e53358a58.png
[img-4EaWPKVi-1687765067046_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626151834441.png]: https://img-blog.csdnimg.cn/1b2bbd327df94dc3a11c7baa26244f1c.png
[img-gPjmvDLW-1687765067046_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626151855198.png]: https://img-blog.csdnimg.cn/d39e7b1beb2c47cd80a8c597373b876a.png
[img-wxUR33ty-1687765067046_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626151919098.png]: https://img-blog.csdnimg.cn/4e8871bc59fa4922a416b119e91429df.png
[img-N7WNj5d7-1687765067046_Users_adherezheng_mynote_note_csdn_html_assets_image-20230626152520854.png]: https://img-blog.csdnimg.cn/ab08aa7a461b4c4d874d7f88e744489b.png