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

2023-11-24 19:30:43

在这里插入图片描述

大家好，欢迎来到前端入门系列的第二篇博客。在这个系列中，我们将一起学习前端开发的基础知识，从零开始构建网页和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 粗体标签：`` 和 ``
- 9.2 斜体标签：` `和 ``
- 9.3 下划线标签：``
- 9.4 删除线标签：`~~` 和 ``~~
- ~~9.5 上标和下标标签：`^{` 和 `_`}~~
~~10. 表单标签~~
- 10.1 `
 `标签：
- ~~10.2 `` 标签：~~
- ~~10.3 `` 标签：~~
- 10.4 `` 标签：</li><li>10.6 `<button>` 标签：</li></ul> </li><li>11. ` ` 标签：</li><li>12. 特殊字符</li><li>总结</li></ul> <h2><a id="_6"></a>前言：学习目标</h2> <ol><li>掌握html常用表情的使用、基础特性以及用途。</li></ol> <h2><a id="1_h2h6_12"></a>1. 标题标签：h2-h6</h2> 简介：标题标签用于定义网页中的标题文本，从h1到h6，分别表示不同级别的标题，h1是最高级别的标题，h6是最低级别的标题。 特点： <ul><li>标题标签具有语义化的作用，有助于网页的结构化和可读性。</li><li>标题标签在页面中通常呈现较大的字体大小，并带有一定的样式效果。</li><li>h1标签最常用于页面的主标题，而h2到h6标签则用于副标题或次要标题。</li></ul> 示例代码： <pre><code class="prism language-html"><h1>h1<h1> <h2>h2<h2> <h3>h3<h3> <h4>h4<h4> <h5>h5<h5> <h6>h6<h6> </code></pre> 渲染效果： <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/eff6759f504e4c74aad70e16856c561d.png" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gep5MPbm-1687765067032)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626135641762.png)]" /> <h2><a id="2p_39"></a>2.段落标签：p</h2> 简介：段落标签用于定义文本的段落，会自动在段落之间添加空白。 特点：段落标签具有默认的上下边距，并自动换行。 示例代码： <pre><code class="prism language-html"><p>这是一个段落。</p> <p>这是另一个段落。</p> </code></pre> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/e29e671d1df64fd4be9b507b7e6a36b7.png" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XA89BjKk-1687765067039)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626144749245.png)]" /> <h2><a id="3_55"></a>3.注释标签：!</h2> 简介：用于将代码转为注释，在运行代码时，注释不会渲染在页面上，快捷键ctrl+'/'就可以将代码快速变为注释 <pre><code class="prism language-html"><!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> </code></pre> 渲染效果： <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/eeafde8af35245269e61b5cf2693ca1c.png" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qCdGNqWg-1687765067041)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626144727625.png)]" /> <h2><a id="4_a_79"></a>4. 链接标签：a</h2> 简介：链接标签用于创建超链接，将文本或图像链接到其他页面或资源。 特点：链接标签具有href属性，指定目标URL或资源的地址。 示例代码： <pre><code class="prism language-html"><a href="https://www.example.com">这是一个链接</a> </code></pre> <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 referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/aaeb32d5aa144ecd8e85b79fa235118d.png" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hwvPoNKi-1687765067042)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626144833795.png)]" /> 用途： <ol><li> 导航链接：<code><a></code>标签可用于创建导航菜单或链接到其他页面的导航链接。例如： <pre><code class="prism language-html"><a href="index.html">首页</a> <a href="about.html">关于我们</a> </code></pre> </li><li> 外部链接：<code><a></code>标签可以用于创建指向其他网站的链接。例如： <pre><code class="prism language-html"><a href="https://www.example.com">访问示例网站</a> </code></pre> </li><li> 锚链接：<code><a></code>标签可以用于创建页面内部的锚链接，以便在同一页面中快速导航到不同的部分。例如： <pre><code class="prism language-html"><a href="#section1">跳转到第一节</a> ... <h2 id="section1">第一节</h2> </code></pre> 我在a标签下面放置了200个div标签最后才是h2标签 <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/3eb7645430b84d2888e281da484e25a9.png" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IsW6MWri-1687765067044)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626145725147.png)]" /> 我们给h2标签设了个id属性，设置a标签里的href属性：“#section1”，点击a标签就可以直接跳到h2标签的位置 <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/c51124c923f14dbca134caf21fa7bd31.png" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s3iizVfS-1687765067044)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626145917526.png)]" /> </li><li> 下载链接：<code><a></code>标签可以用于提供文件的下载链接。例如： <pre><code class="prism language-html"><a href="files/document.pdf" download>下载文档</a> </code></pre> </li><li> 邮件链接：<code><a></code>标签可以用于创建发送电子邮件的链接。例如： <pre><code class="prism language-html"><a href="mailto:info@example.com">发送邮件给我们</a> </code></pre> </li><li> JavaScript动作：<code><a></code>标签可以与JavaScript代码一起使用，执行特定的动作或函数。例如： <pre><code class="prism language-html"><a href="javascript:void(0);" onclick="myFunction()">点击这里</a> </code></pre> </li></ol> 这些只是<code><a></code>标签的一些常见用途，它还具有其他属性和功能，可以根据需要进行扩展和自定义。 <h2><a id="5_img_154"></a>5. 图像标签：img</h2> 简介：图像标签用于在网页中插入图像。 特点：图像标签具有src属性，指定图像的URL或文件路径。 示例代码： <pre><code class="prism language-html"><img src="image.jpg" alt="图像描述"> </code></pre> <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><img src="image.jpg"></code></td></tr><tr><td><code>alt</code></td><td align="center">图像的替代文本</td><td><code><img src="image.jpg" alt="描述文本"></code></td></tr><tr><td><code>title</code></td><td align="center">鼠标悬停时显示的标题文本</td><td><code><img src="image.jpg" title="标题"></code></td></tr><tr><td><code>loading</code></td><td align="center">图像加载方式的提示（<code>lazy</code>、<code>eager</code>、<code>auto</code>）</td><td><code><img src="image.jpg" loading="lazy"></code></td></tr></tbody></table> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/2eb36222a35a412a9d0b46c3771027d2.png" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7fEBiWs1-1687765067044)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626150328058.png)]" /> <h2><a id="6_ul__ol_176"></a>6. 列表标签：ul 和 ol</h2> 简介：无序列表标签（ul）用于创建无序列表，有序列表标签（ol）用于创建有序列表。 特点：无序列表使用圆点或其他符号来标记列表项，有序列表使用数字或字母来标记列表项。 示例代码： <pre><code class="prism language-html"><ul><li>无序列表项1</li><li>无序列表项2</li><li>无序列表项3</li> </ul><ol><li>有序列表项1</li><li>有序列表项2</li><li>有序列表项3</li> </ol> </code></pre> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/dc8b2257bee04bad87ca55f4001d84f9.png" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yTzzCLIl-1687765067044)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626150411019.png)]" /> <h2><a id="7_div_span_201"></a>7. div 标签和span标签</h2> 简介： <ol><li>标签是一个通用的容器标签，用于将一组相关元素包装在一起，并为其应用样式或JavaScript。</li><li><code></code> 标签用于对文本的某个部分进行标记或分组。</li></ol> 特点： <ol><li>`` `标签没有特定的语义，主要用于布局和组织页面结构。 </li><li><code> </code>是一个内联元素，不会独占一行，只会包裹其内部的文本或其他内联元素。</li><li>它本身并没有默认的样式或行为，主要用于通过 CSS 或 JavaScript 对其进行操作。</li></ol> 示例代码： <pre><code class="prism language-html"><div><h1>这是一个 div 容器</h1><p>这是 div 容器中的段落。</p><img src="image.jpg" alt="图像描述"> </div> <span onclick="myFunction()">Click me</span> </code></pre> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/58f5e9cf83ac41d494b2eed4472e6c8f.png" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d1tDGRUy-1687765067045)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626150911603.png)]" /> 与 <code></code> 标签相比，标签有以下区别： <ol><li> 类型：<code> </code> 是内联元素，而<code></code> 是块级元素。 </li><li> 作用范围：<code> </code>通常用于标记文本的一部分或内联元素，而<code></code> 通常用于分隔和包裹更大的文本块或其他元素。 </li><li> 默认样式：<code> </code>没有默认的样式，不会独占一行，而<code></code> 默认具有块级元素的特性，会自动占据一行并撑满父容器的宽度。 </li><li> 嵌套关系：由于 <code> </code> 是内联元素，它可以嵌套在其他内联元素中，如文本或其他内联元素。而 <code></code> 是块级元素，不能嵌套在内联元素中，只能作为容器嵌套其他块级或内联元素。 </li></ol> <h2><a id="8tabletrtd_242"></a>8.表格标签：table、tr、td</h2> 简介：表格标签用于创建网页中的表格，包括表头、行和单元格。 特点：<code><table></code> 表示整个表格，<code><tr></code> 表示表格中的行，<code><td></code> 表示表格中的单元格。 示例代码： <pre><code class="prism language-html"><table><tr><th>表头1</th><th>表头2</th></tr><tr><td>行1单元格1</td><td>行1单元格2</td></tr><tr><td>行2单元格1</td><td>行2单元格2</td></tr> </table> </code></pre> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/4a19d1ee94a3424aa8f08fbebc5f3f5f.png" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xQdE75SF-1687765067045)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626151006757.png)]" /> 以下是<code><table></code>标签独有的属性： <table><thead><tr><th>属性</th><th>描述</th><th>示例</th></tr></thead><tbody><tr><td><code>border</code></td><td>指定表格边框的宽度</td><td><code><table border="1"></code></td></tr><tr><td><code>cellspacing</code></td><td>指定单元格之间的间距</td><td><code><table cellspacing="10"></code></td></tr><tr><td><code>cellpadding</code></td><td>指定单元格内容与边框之间的间距</td><td><code><table cellpadding="5"></code></td></tr><tr><td><code>width</code></td><td>指定表格的宽度</td><td><code><table width="400"></code></td></tr><tr><td><code>height</code></td><td>指定表格的高度</td><td><code><table height="300"></code></td></tr><tr><td><code>align</code></td><td>指定表格相对于周围内容的对齐方式</td><td><code><table align="center"></code></td></tr><tr><td><code>bgcolor</code></td><td>指定表格的背景颜色</td><td><code><table bgcolor="#f0f0f0"></code></td></tr><tr><td><code>summary</code></td><td>提供关于表格内容的摘要或描述</td><td><code><table summary="这是一个数据表格"></code></td></tr><tr><td><code>caption</code></td><td>定义表格的标题</td><td><code><caption>这是一个表格标题</caption></code></td></tr><tr><td><code>colspan</code></td><td>指定单元格横跨的列数</td><td><code><td colspan="2">跨两列</td></code></td></tr><tr><td><code>rowspan</code></td><td>指定单元格纵跨的行数</td><td><code><td rowspan="3">跨三行</td></code></td></tr><tr><td><code>headers</code></td><td>定义当前单元格与其他单元格之间的关系</td><td><code><th headers="col1 row1">表头</th></code></td></tr><tr><td><code>scope</code></td><td>定义表头单元格的范围</td><td><code><th scope="col">列标题</th></code></td></tr><tr><td><code>colgroup</code></td><td>将表格列分组并应用共同的属性</td><td><code><colgroup><col span="2"></colgroup></code></td></tr><tr><td><code>thead</code></td><td>定义表格的表头部分</td><td><code><thead><tr><th>表头1</th><th>表头2</th></tr></thead></code></td></tr><tr><td><code>tbody</code></td><td>定义表格的主体内容部分</td><td><code><tbody><tr><td>数据1</td><td>数据2</td></tr></tbody></code></td></tr><tr><td><code>tfoot</code></td><td>定义表格的页脚部分</td><td><code><tfoot><tr><td>总计</td><td>100</td></tr></tfoot></code></td></tr><tr><td><code>sortable</code></td><td>指示表格是否可排序</td><td><code><table sortable></code></td></tr></tbody></table> <h2><a id="9__295"></a>9. 文字格式标签</h2> 文字格式化的标签主要用于调整文本的样式、格式和呈现方式。以下是一些常用的文字格式化标签的介绍： <h3><a id="91_b__strong_299"></a>9.1 粗体标签：<code></code> 和 <code></code></h3> <ul><li><code></code> 标签用于为文本设置粗体样式。</li><li><code></code> 标签表示更强的重要性或强调文本，通常以粗体显示。示例代码：</li></ul> <pre><code class="prism language-html"><p>This is <b>bold</b> text.</p> <p>This is <strong>strong</strong> text.</p> </code></pre> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/84ab265649c04dc38cb5a1299e60b491.png" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KlIcwnbv-1687765067045)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626151101612.png)]" /> <h3><a id="92_i__em_314"></a>9.2 斜体标签：<code> </code>和 <code></code></h3> <ul><li><code> </code>标签用于为文本设置斜体样式。</li><li><code></code> 标签表示强调文本，通常以斜体显示，具有更强的语义化。示例代码：</li></ul> <pre><code class="prism language-html"><p>This is <i>italic</i> text.</p> <p>This is <em>emphasized</em> text.</p> </code></pre> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/bd92d6c69d9f4051a1590bc64f53aa41.png" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ByHy5xY8-1687765067045)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626151136345.png)]" /> <h3><a id="93_u_327"></a>9.3 下划线标签：<code></code></h3> <ul><li><code></code> 标签用于为文本添加下划线。示例代码：</li></ul> <pre><code class="prism language-html"><p>This is <u>underlined</u> text.</p> </code></pre> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/883532bfe1bb44c7a408a343d7080d80.png" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pygp6jeH-1687765067045)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626151204998.png)]" /> <h3><a id="94_s__del_338"></a>9.4 删除线标签：<code><s></code> 和 <code><del></code></h3> <ul><li><code><s></code> 标签用于为文本添加删除线。</li><li><code><del></code> 标签表示已被删除的文本，通常以删除线显示，用于表示删除或过时的内容。示例代码：</li></ul> <pre><code class="prism language-html"><p>This is <s>strikethrough</s> text.</p> <p>This is <del>deleted</del> text.</p> </code></pre> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/1a065cb9b8884282b05b366c4e42cbc7.png" alt="在这里插入图片描述" /> <h3><a id="95_sup__sub_351"></a>9.5 上标和下标标签：<code></code> 和 <code></code></h3> <ul><li> 标签用于将文本设置为上标，通常用于表示指数、上标数字等。</li><li> 标签用于将文本设置为下标，通常用于表示化学式、数学公式等。示例代码：</li></ul> <pre><code class="prism language-html"><p>This is superscript: X<sup>2</sup></p> <p>This is subscript: H<sub>2</sub>O</p> </code></pre> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/4e42f2e674604862858cdd744c329ae9.png" alt="在这里插入图片描述" /> 这些文字格式化标签可以通过CSS样式进行进一步的定制和美化，以满足网页设计的需求。记住，在实际开发中，应尽量避免滥用格式化标签，优先考虑使用CSS来控制文本样式。 <h2><a id="10__366"></a>10. 表单标签</h2> 表单标签在HTML中扮演着关键的角色，用于创建用户交互性的表单，使用户能够输入数据并将其提交给服务器进行处理。下面是一些常用的表单标签的详细介绍： <h3><a id="101_form__371"></a>10.1 <code><form> </code>标签：</h3> <ul><li> 简介：<code><form></code> 标签用于创建表单，它包含了用户输入数据的一组元素。 </li><li> 特点：表单可以通过设置不同的属性来指定数据提交的目标和方式。 </li><li> 示例代码： <pre><code class="prism language-html"><form action="/submit-form" method="POST"> </form> </code></pre> </li></ul> <h3><a id="102_input__385"></a>10.2 <code><input></code> 标签：</h3> <ul><li> 简介：<code><input></code> 标签用于创建不同类型的输入字段，如文本框、复选框、单选按钮等。 </li><li> 特点：通过不同的 <code>type</code> 属性值，可以定义不同的输入字段类型。 </li><li> 示例代码： <pre><code class="prism language-html"><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"> 女 </code></pre> </li></ul> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/323985c52ab54df5acc60a88e376eeab.png" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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><input type="text"></code></td></tr><tr><td><code>password</code></td><td>密码输入框</td><td><code><input type="password"></code></td></tr><tr><td><code>number</code></td><td>数字输入框</td><td><code><input type="number"></code></td></tr><tr><td><code>email</code></td><td>邮箱输入框</td><td><code><input type="email"></code></td></tr><tr><td><code>tel</code></td><td>电话号码输入框</td><td><code><input type="tel"></code></td></tr><tr><td><code>url</code></td><td>URL输入框</td><td><code><input type="url"></code></td></tr><tr><td><code>date</code></td><td>日期选择器</td><td><code><input type="date"></code></td></tr><tr><td><code>time</code></td><td>时间选择器</td><td><code><input type="time"></code></td></tr><tr><td><code>datetime</code></td><td>日期时间选择器</td><td><code><input type="datetime"></code></td></tr><tr><td><code>checkbox</code></td><td>多选框</td><td><code><input type="checkbox"></code></td></tr><tr><td><code>radio</code></td><td>单选框</td><td><code><input type="radio"></code></td></tr><tr><td><code>file</code></td><td>文件上传</td><td><code><input type="file"></code></td></tr><tr><td><code>submit</code></td><td>提交按钮</td><td><code><input type="submit"></code></td></tr></tbody></table> <h3><a id="103_label__423"></a>10.3 <code><label></code> 标签：</h3> <ul><li> 简介：<label> 标签用于为表单元素创建标签描述，提供可点击的标签文本。</label> </li><li> 特点：通过将元素与 <label> 元素关联，可以通过点击标签来聚焦到相关的表单字段。</label> </li><li> 示例代码： <pre><code class="prism language-html"><label for="username">用户名：</label> <input type="text" id="username" name="username"> </code></pre> </li></ul> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/d8783002a1904088a858190c16967b31.png" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jsB32oRD-1687765067045)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626151647610.png)]" /> <h3><a id="104__select__option__439"></a>10.4 <code><select></code> 和 <code><option></code> 标签：</h3> <ul><li> 简介：<code><select></code> 标签用于创建下拉列表，<code><option></code> 标签定义下拉列表中的选项。 </li><li> 特点：用户可以从预定义的选项中选择一个值。 </li><li> 示例代码： <pre><code class="prism language-html"><select name="country"><option value="china">中国</option><option value="us">美国</option><option value="uk">英国</option> </select> </code></pre> </li></ul> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/cd875aa2ede841f3a0a0b77e53358a58.png" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ob1X7OHE-1687765067045)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626151750192.png)]" /> <h3><a id="105_textarea__458"></a>10.5 <code><textarea></code> 标签：</h3> <ul><li> 简介：<code><textarea></code> 标签用于创建多行文本输入框。 </li><li> 特点：可以用于输入大段的文本或多行内容。 </li><li> 示例代码： <pre><code class="prism language-html"><textarea name="message" rows="4" cols="40"></textarea> </code></pre> </li></ul> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/1b2bbd327df94dc3a11c7baa26244f1c.png" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4EaWPKVi-1687765067046)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626151834441.png)]" /> <h3><a id="106__button__473"></a>10.6 <code><button></code> 标签：</h3> <ul><li> 简介：<code><button></code> 标签用于创建可点击的按钮。 </li><li> 特点：可以用于提交表单、重置表单或执行自定义的JavaScript操作。 </li><li> 示例代码： <pre><code class="prism language-html"><button type="submit">提交</button> <button type="reset">重置</button> <button type="button" onclick="myFunction()">点击我</button> </code></pre> </li></ul> 这些是一些常用的表单标签，它们可以结合使用来创建丰富和交互性强的表单。通过使用这些标签以及适当的属性和事件处理，可以实现数据的输入、验证和提交。 <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/d39e7b1beb2c47cd80a8c597373b876a.png" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gPjmvDLW-1687765067046)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626151855198.png)]" /> <h2><a id="11_br__492"></a>11. <code> </code> 标签：</h2> <ul><li> 简介：<code> </code> 标签用于在文本中创建换行效果。 </li><li> 特点：<code> </code> 标签是一个空标签，不需要闭合标签。 </li><li> 示例代码： <pre><code class="prism language-html"><p>This is the first line.<br> This is the second line.</p> </code></pre> </li></ul> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/4e8871bc59fa4922a416b119e91429df.png" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wxUR33ty-1687765067046)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626151919098.png)]" /> <h2><a id="12__508"></a>12. 特殊字符</h2> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/ab08aa7a461b4c4d874d7f88e744489b.png" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N7WNj5d7-1687765067046)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626152520854.png)]" /> <h2><a id="_517"></a>总结</h2> 本篇文章详细的介绍了html常用标签的特点，展现，属性以及应用等方面，希望能够帮助零基础小白快速入门html，也可以作为大家查询html常用标签如何使用的检索工具。如果觉得写的不错，请给小豪点个关注吧！ <pre><code style="font-size:16px;">本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。如若内容造成侵权/违法违规/事实不符，请点击<a href="https://shimo.im/forms/N2A1gvJRpPh7K9qD/fill" target="_blank" rel="nofollow">【内容举报】</a>进行投诉反馈！</code></pre>  <link href="https://qiniu.techgrow.cn/readmore/dist/readmore.css" type="text/css" rel="stylesheet"> <script src="https://qiniu.techgrow.cn/readmore/dist/readmore.js" type="text/javascript"></script> <script> var regex = /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i var isMobile = navigator.userAgent.match(regex); if (!isMobile) { try { var plugin = new ReadmorePlugin(); plugin.init({ id: "readmore-container", blogId: "55721-7689706765131-406", name: "财经早读", keyword: "666", qrcode: "https://www.imspm.com/assets/img/caijingzaodu.jpg", type: "website", height: "auto", expires: "7", interval: "60", random: "1" }) } catch (e) { console.warn("readmore plugin occurred error: " + e.name + " | " + e.message); } } </script> </div>    <div class="article-donate"> <a href="javascript:" class="btn btn-primary btn-like btn-lg social-share-icon icon-heart addbookbark" data-type="archives" data-aid="736085" data-action="/addons/cms/ajax/collection.html">收藏</a> </div>  <div class="entry-meta"> <ul>  <li>标签：<a href="/dev.html" class="tag" rel="tag" target="_blank">技术</a></li>  </ul> <ul class="article-prevnext">  <li> 上一篇 > <a href="/dev/736084.html" target="_blank">class 原生js获取父元素_原生JS如何获取当前元素属于父元素第几个子元素</a> </li> <li> 下一篇 > <a href="/dev/736086.html" target="_blank">易语言提取HTML元素,从HTML的script元素内部提取对象键的值</a> </li>  </ul> </div> <div class="related-article"> <div class="row" style="margin: 0 -15px;">  <div class="col-xs-12"> <h3 style="font-size: 1.1em;">相关文章</h5> </div> <div class="col-xs-12"> <a href="/dev/747938.html" target="_blank">Duilib中list控件支持ctrl和shif多行选中的实现</a> </div> <div class="col-xs-12"> <a href="/dev/747937.html" target="_blank">[ICML2015]Batch Normalization:Accelerating Deep Network Training by Reducing Internal Covariate Shif</a> </div> <div class="col-xs-12"> <a href="/dev/747936.html" target="_blank">win10系统微软输入法于eclipse ctrl+shif+f冲突间接处理办法</a> </div> <div class="col-xs-12"> <a href="/dev/747935.html" target="_blank">Codeforces Round #259 (Div. 2) B. Little Pony and Sort by Shif</a> </div> <div class="col-xs-12"> <a href="/dev/747934.html" target="_blank">读LDD3，内存映射与DMA--PAGE_SHIF…</a> </div> <div class="col-xs-12"> <a href="/dev/747933.html" target="_blank">VMware虚拟机安装XP【要先分区，再设置BOOT 启动CD，shif+上移】</a> </div> <div class="col-xs-12"> <a href="/dev/747932.html" target="_blank">更换iBus五笔的左与右Shif</a> </div> <div class="col-xs-12"> <a href="/dev/747931.html" target="_blank">sublime ctrl+shif+f 没用解决办法</a> </div> <div class="col-xs-12"> <a href="/dev/747930.html" target="_blank">idea 对 ctrl + z 的撤销是 ctrl + shif + z</a> </div> <div class="col-xs-12"> <a href="/dev/747929.html" target="_blank">计算机最早的设计师应用于,计算机应用基础选择题doc.doc</a> </div> <div class="col-xs-12"> <a href="/dev/747928.html" target="_blank">win10自带截图神器：Win+Shift+S</a> </div> <div class="col-xs-12"> <a href="/dev/747927.html" target="_blank">Python基础之文件目录操作</a> </div> <div class="col-xs-12"> <a href="/dev/747926.html" target="_blank">python简述目录_Python基础之文件目录操作(示例代码)</a> </div> <div class="col-xs-12"> <a href="/dev/747925.html" target="_blank">tp5 如何做数据采集</a> </div> <div class="col-xs-12"> <a href="/dev/747924.html" target="_blank">任务2-7(服务器字体+阿里巴巴矢量库)</a> </div> <div class="col-xs-12"> <a href="/dev/747923.html" target="_blank">html标签（1)：h1~h6,p,br,pre,hr</a> </div> <div class="col-xs-12"> <a href="/dev/747922.html" target="_blank">TI 电量计介绍与芯片选型指南</a> </div> <div class="col-xs-12"> <a href="/dev/747921.html" target="_blank">几款TI电源芯片简介</a> </div> <div class="col-xs-12"> <a href="/dev/747920.html" target="_blank">TI DSP芯片C2000系列读取FLASH数据</a> </div> <div class="col-xs-12"> <a href="/dev/747919.html" target="_blank">德州仪器(Ti)平台嵌入式开发基础</a> </div> <div class="col-xs-12"> <a href="/dev/747918.html" target="_blank">TI三相电机智能栅极驱动芯片特点分类</a> </div> <div class="col-xs-12"> <a href="/dev/747917.html" target="_blank">省选模拟（12.08） T3 圈圈圈圈圈圈圈圈</a> </div> <div class="col-xs-12"> <a href="/dev/747916.html" target="_blank">Hadoop生态圈技术栈（上）</a> </div> <div class="col-xs-12"> <a href="/dev/747915.html" target="_blank">大数据开发基础入门与项目实战（三）Hadoop核心及生态圈技术栈之6.Impala交互式查询</a> </div> <div class="col-xs-12"> <a href="/dev/747914.html" target="_blank">小猿圈之Linux下Mysql 操作命令</a> </div> <div class="col-xs-12"> <a href="/dev/747913.html" target="_blank">大数据Hadoop生态圈常用面试题</a> </div> <div class="col-xs-12"> <a href="/dev/747912.html" target="_blank">大数据开发基础入门与项目实战（三）Hadoop核心及生态圈技术栈之4.Hive DDL、DQL和数据操作</a> </div> <div class="col-xs-12"> <a href="/dev/747911.html" target="_blank">备战Noip2018模拟赛11（B组）T3 Monogatari 物语</a> </div> <div class="col-xs-12"> <a href="/dev/747910.html" target="_blank">【智能优化算法-圆圈搜索算法】基于圆圈搜索算法Circle Search Algorithm求解单目标优化问题附matlab代码</a> </div> <div class="col-xs-12"> <a href="/dev/747909.html" target="_blank">NYOJ 78 圈水池</a> </div> <div class="col-xs-12"> <a href="/dev/747908.html" target="_blank">递归问题跑道汽车绕圈问题 Python实现</a> </div> <div class="col-xs-12"> <a href="/dev/747907.html" target="_blank">Hadoop生态圈（三）：MapReduce</a> </div>  </div> </div> <div class="clearfix"></div> </div> </div> </main> <aside class="col-xs-12 col-md-4">    <div class="panel panel-default hot-article"> <div class="panel-heading"> <h3 class="panel-title">内容推荐</h3> </div> <div class="panel-body"> <div class="media media-number"> <div class="media-left"> 1 </div> <div class="media-body"> <a class="link-dark" href="/jiaohutiyan/753475.html" title="大厂出品！保姆级教程帮你掌握「用户体验要素」" target="_blank">大厂出品！保姆级教程帮你掌握「用户体验要素」</a> </div> </div> <div class="media media-number"> <div class="media-left"> 2 </div> <div class="media-body"> <a class="link-dark" href="/jiaohutiyan/753348.html" title="大厂实战案例！设计师如何助力京东快递业务增长？" target="_blank">大厂实战案例！设计师如何助力京东快递业务增长？</a> </div> </div> <div class="media media-number"> <div class="media-left"> 3 </div> <div class="media-body"> <a class="link-dark" href="/jiaohutiyan/753116.html" title="总监干货！5个常见的UI设计规范创建误区" target="_blank">总监干货！5个常见的UI设计规范创建误区</a> </div> </div> <div class="media media-number"> <div class="media-left"> 4 </div> <div class="media-body"> <a class="link-dark" href="/kaifagongju/752540.html" title="数据库管理利器——Navicat Premium v17.0.4学习版(Windows+MacOS+Linux)" target="_blank">数据库管理利器——Navicat Premium v17.0.4学习版(Windows+MacOS+Linux)</a> </div> </div> <div class="media media-number"> <div class="media-left"> 5 </div> <div class="media-body"> <a class="link-dark" href="/jiaohutiyan/750353.html" title="进阶必学！快速掌握10种国际主流设计模型" target="_blank">进阶必学！快速掌握10种国际主流设计模型</a> </div> </div> <div class="media media-number"> <div class="media-left"> 6 </div> <div class="media-body"> <a class="link-dark" href="/jiaohutiyan/750352.html" title="春节期间，10个大厂的产品细节走心设计" target="_blank">春节期间，10个大厂的产品细节走心设计</a> </div> </div> <div class="media media-number"> <div class="media-left"> 7 </div> <div class="media-body"> <a class="link-dark" href="/jiaohutiyan/747940.html" title="如何帮助用户度过新人期？来看雪球APP的实战总结！" target="_blank">如何帮助用户度过新人期？来看雪球APP的实战总结！</a> </div> </div> <div class="media media-number"> <div class="media-left"> 8 </div> <div class="media-body"> <a class="link-dark" href="/ruanjianzixun/42357.html" title="Sketch 95.3最新版下载 (Sketch矢量绘图应用软件)" target="_blank">Sketch 95.3最新版下载 (Sketch矢量绘图应用软件)</a> </div> </div> <div class="media media-number"> <div class="media-left"> 9 </div> <div class="media-body"> <a class="link-dark" href="/ruanjianzixun/42356.html" title="Axure RP 9 最新正式版安装软件与汉化语言包下载(2023年3月30日更新)" target="_blank">Axure RP 9 最新正式版安装软件与汉化语言包下载(2023年3月30日更新)</a> </div> </div> <div class="media media-number"> <div class="media-left"> 10 </div> <div class="media-body"> <a class="link-dark" href="/chanpinsheji/42343.html" title="嘘！SaaS产品的差异化设计细节，一般人我不告诉他" target="_blank">嘘！SaaS产品的差异化设计细节，一般人我不告诉他</a> </div> </div> </div> </div>  <div class="panel panel-blockimg"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6421005227861480" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6421005227861480" data-ad-slot="1989994359" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="panel panel-default lasest-update">  <div class="panel-heading"> <h3 class="panel-title">最新更新</h3> </div> <div class="panel-body"> <ul class="list-unstyled"> <li> <a href="/chanpinjingli.html" target="_blank">[产品经理]</a> <a class="link-dark" href="/chanpinjingli/758173.html" title="3分钟绘制流程图！这个AI+绘图工具的神仙组合，学完老板直呼内行" target="_blank">3分钟绘制流程图！这个AI+绘图工具的神仙组合，学完老板直呼内行</a> </li> <li> <a href="/chanpinjingli.html" target="_blank">[产品经理]</a> <a class="link-dark" href="/chanpinjingli/758172.html" title="商业潜规则：打败你的不是AI，而是人性" target="_blank">商业潜规则：打败你的不是AI，而是人性</a> </li> <li> <a href="/chanpinsheji.html" target="_blank">[产品设计]</a> <a class="link-dark" href="/chanpinsheji/758171.html" title="DeepSeek+智能派单系统的实践分享" target="_blank">DeepSeek+智能派单系统的实践分享</a> </li> <li> <a href="/chanpinjingli.html" target="_blank">[产品经理]</a> <a class="link-dark" href="/chanpinjingli/758170.html" title="一文读懂本年实际损益借(贷)方发生额" target="_blank">一文读懂本年实际损益借(贷)方发生额</a> </li> <li> <a href="/chuangyexueyuan.html" target="_blank">[创业学院]</a> <a class="link-dark" href="/chuangyexueyuan/758169.html" title="大客户 vs 中小企业：需求竟天差地别？以企业培训数字化为例" target="_blank">大客户 vs 中小企业：需求竟天差地别？以企业培训数字化为例</a> </li> <li> <a href="/chanpinjingli.html" target="_blank">[产品经理]</a> <a class="link-dark" href="/chanpinjingli/758168.html" title="不要将员工的“猴子”背到自己身上：职场管理中的权责划分" target="_blank">不要将员工的“猴子”背到自己身上：职场管理中的权责划分</a> </li> <li> <a href="/chanpinjingli.html" target="_blank">[产品经理]</a> <a class="link-dark" href="/chanpinjingli/758167.html" title="人工智能的三层架构：从应用层到基础服务层，解密智能革命" target="_blank">人工智能的三层架构：从应用层到基础服务层，解密智能革命</a> </li> <li> <a href="/chanpinsheji.html" target="_blank">[产品设计]</a> <a class="link-dark" href="/chanpinsheji/758166.html" title="一文讲清楚iOS的SKAN4.0" target="_blank">一文讲清楚iOS的SKAN4.0</a> </li> </ul> </div>  </div>  <div class="panel panel-default hot-tags"> <div class="panel-heading"> <h3 class="panel-title">热门标签</h3> </div> <div class="panel-body"> <div class="tags"> <a href="/channel/数量.html" class="tag" target="_blank"> 数量</a> <a href="/channel/AI技术趋势.html" class="tag" target="_blank"> AI技术趋势</a> <a href="/channel/用户角色.html" class="tag" target="_blank"> 用户角色</a> <a href="/channel/心智游移.html" class="tag" target="_blank"> 心智游移</a> <a href="/channel/自然生态系统.html" class="tag" target="_blank"> 自然生态系统</a> <a href="/channel/会员权益.html" class="tag" target="_blank"> 会员权益</a> <a href="/channel/AirDrop.html" class="tag" target="_blank"> AirDrop</a> <a href="/channel/hashmap.html" class="tag" target="_blank"> hashmap</a> <a href="/channel/小龙虾.html" class="tag" target="_blank"> 小龙虾</a> <a href="/channel/焦虑.html" class="tag" target="_blank"> 焦虑</a> <a href="/channel/危机处理.html" class="tag" target="_blank"> 危机处理</a> <a href="/channel/发展.html" class="tag" target="_blank"> 发展</a> <a href="/channel/微信群折叠.html" class="tag" target="_blank"> 微信群折叠</a> <a href="/channel/toast.html" class="tag" target="_blank"> toast</a> <a href="/channel/测评新算法.html" class="tag" target="_blank"> 测评新算法</a> <a href="/channel/改版.html" class="tag" target="_blank"> 改版</a> <a href="/channel/wireshark.html" class="tag" target="_blank"> wireshark</a> <a href="/channel/投放方式.html" class="tag" target="_blank"> 投放方式</a> <a href="/channel/音频播放动效.html" class="tag" target="_blank"> 音频播放动效</a> <a href="/channel/timer.html" class="tag" target="_blank"> timer</a> <a href="/channel/女性商业.html" class="tag" target="_blank"> 女性商业</a> <a href="/channel/古典自媒体.html" class="tag" target="_blank"> 古典自媒体</a> <a href="/channel/海外博主.html" class="tag" target="_blank"> 海外博主</a> <a href="/channel/repeater.html" class="tag" target="_blank"> repeater</a> <a href="/channel/转账.html" class="tag" target="_blank"> 转账</a> <a href="/channel/万能钥匙.html" class="tag" target="_blank"> 万能钥匙</a> <a href="/channel/秋招.html" class="tag" target="_blank"> 秋招</a> <a href="/channel/快服务.html" class="tag" target="_blank"> 快服务</a> <a href="/channel/个人演讲.html" class="tag" target="_blank"> 个人演讲</a> <a href="/channel/客户共识.html" class="tag" target="_blank"> 客户共识</a> </div> </div> </div>  </aside> </div> </div> </main> <footer> <div id="footer"> <div class="container"> <div class="row footer-inner"> <div class="col-xs-12"> <div class="footer-logo pull-left mr-4"> <a href="/"></a> </div> <div class="pull-left"> Copyright © 2025 All rights reserved. 超级产品经理 <a href="https://beian.miit.gov.cn" target="_blank" rel="noopener">浙ICP备14026978号-4</a> <ul class="list-unstyled list-inline mt-2"> <li><a href="/p/aboutus.html" target="_blank">关于网站</a></li> <li><a href="/contactus.html" rel="nofollow" target="_blank">联系我们</a></li> </ul> </div> </div> </div> </div> </div> </footer> <div id="floatbtn">  <a class="hover" href="/index/cms.archives/post.html" target="_blank"> 立即 投稿 </a> <div class="floatbtn-item floatbtn-share"> <div class="floatbtn-wrapper" style="height:50px;top:0"> <div class="social-share" data-initialized="true" data-mode="prepend"> <a href="#" class="social-share-icon icon-weibo" target="_blank"></a> <a href="#" class="social-share-icon icon-qq" target="_blank"></a> <a href="#" class="social-share-icon icon-qzone" target="_blank"></a> <a href="#" class="social-share-icon icon-wechat"></a> </div> </div> </div> <a href="javascript:;"> <div class="floatbtn-wrapper"> <div class="qrcode"><img src="https://www.imspm.com/assets/img/gongzhonghao.jpg"></div> 微信公众账号 微信扫一扫加关注 </div> </a> <a id="back-to-top" class="hover" href="javascript:;"> 返回 顶部 </a>  </div> <script type="text/javascript" src="/assets/libs/jquery/dist/jquery.min.js?v=1.0.10"></script> <script type="text/javascript" src="/assets/libs/bootstrap/dist/js/bootstrap.min.js?v=1.0.10"></script> <script type="text/javascript" src="/assets/libs/fastadmin-layer/dist/layer.js?v=1.0.10"></script> <script type="text/javascript" src="/assets/libs/art-template/dist/template-native.js?v=1.0.10"></script> <script type="text/javascript" src="/assets/addons/cms/js/jquery.autocomplete.js?v=1.0.10"></script> <script type="text/javascript" src="/assets/addons/cms/js/swiper.min.js?v=1.0.10"></script> <script type="text/javascript" src="/assets/addons/cms/js/share.min.js?v=1.0.10"></script> <script type="text/javascript" src="/assets/addons/cms/js/cms.js?v=1.0.10"></script> <script type="text/javascript" src="/assets/addons/cms/js/common.js?v=1.0.10"></script> </body> </html>