</code>标签用于设置页面的标题，它将显示在浏览器的标题栏或<a href="https://so.csdn.net/so/search?q=%E6%A0%87%E7%AD%BE%E9%A1%B5&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E6%A0%87%E7%AD%BE%E9%A1%B5&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"标签页\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E6%A0%87%E7%AD%BE%E9%A1%B5&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"标签页\"}"}" data-tit="标签页" data-pretit="标签页">标签页</a>上。</p> </li><li> <p><code><meta></code>标签用于设置文档的元数据，如字符编码、关键词等。</p> </li></ul> </li></ul>
<pre data-index="3" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>页面标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
页面内容
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.157726;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li></ul></pre>
<ul><li><strong>注意</strong>：
<ul><li>HTML 的标签是有层级关系的，内部的标签必须位于外部标签的范围之内，无法单独存在。</li><li>HTML代码是没有格式的，可以全部写在一行，只不过我们习惯了缩进来表示代码</li></ul> </li></ul>
<h3><a name="t10"></a><a id="HTML1_85"></a>【四】HTML标签的分类1</h3>
<ul><li>HTML标签可以根据其闭合情况分为双标签和单标签（自闭标签）两种类型。</li></ul>
<h4><a name="t11"></a><a id="1_89"></a>【1】双标签</h4>
<ul><li>双标签由开始标签和结束标签组成，它们包围着要展示的内容。
<ul><li>开始标签用于标识标签的开始，通常以<code><</code>开头，以<code>></code>结尾。</li><li>结束标签用于标识标签的结束，通常以<code></</code>开头，以<code>></code>结尾。</li><li>标签的内容写在开始标签和结束标签之间。</li></ul> </li></ul>
<pre data-index="4" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>标题1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.example.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>这是一个链接<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.157726;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre>
<h4><a name="t12"></a><a id="2_101"></a>【2】单标签(自闭标签)</h4>
<ul><li>单标签（自闭标签）只有一个标签，它在自己内部闭合，不需要另一半标签。
<ul><li>单标签通常以<code><</code>开头，以<code>/></code>结尾。</li><li>单标签用于表示没有内容或没有需要包围的元素。</li></ul> </li></ul>
<pre data-index="5" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>图片<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.157726;"><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
<h3><a name="t13"></a><a id="2_111"></a>【五】标签的分类2</h3>
<ul><li>HTML中的标签还可以分为两种主要类型：块级标签和行内标签。</li></ul>
<h4><a name="t14"></a><a id="1_115"></a>【1】块级标签</h4>
<h5><a id="1_117"></a>（1）介绍</h5>
<ul><li>块级标签（Block-level elements）是指一类会<strong>独自占据一行</strong>的HTML元素。</li><li>它们从新的一行开始，直到遇到下一个块级标签或行内标签。</li><li>块级标签通常用于组织和结构化页面的不同部分，并且可以包含其他块级元素和行内元素。</li></ul>
<h5><a id="2_123"></a>（2）常见的块级标签</h5>
<ul><li><code><div></code>：用于定义文档中的一个区域或一个区块。</li><li><code><p></code>：用于定义段落。</li><li><code><h1>-<h6></code>：用于定义标题的级别。</li><li><code><ul></code>：用于创建无序列表。</li><li><code><ol></code>：用于创建有序列表。</li><li><code><table></code>：用于定义表格。</li></ul>
<h4><a name="t15"></a><a id="2_132"></a>【2】行内标签</h4>
<h5><a id="1_134"></a>（1）介绍</h5>
<ul><li>行内标签（Inline elements）是指在一行内显示的HTML元素，<strong>它们不会打断当前行并且只占据所需的内容宽度</strong>。</li><li>行内标签通常用于插入和标记文本中的小片段或注释，并且不能包含块级元素，只能包含其他行内元素。</li></ul>
<h5><a id="2_139"></a>（2）常见的行内标签</h5>
<ul><li><code><span></code>：用于对文本的某个部分进行样式化或划定特定区域。</li><li><code><a></code>：用于创建超链接。</li><li><code><strong></code>：使文本加粗显示。</li><li><code><em></code>：使文本斜体显示。</li><li><code><img></code>：用于插入图像。</li><li><code><br></code>：用于换行。</li></ul>
<h5><a id="3_148"></a>（3）补充</h5>
<ul><li>需要注意的是，HTML5中引入了一些新的标签和元素，它们的性质可能介于块级和行内之间，被称为块级行内元素（block-level inline element）或行内块级元素（inline block-level element）。
<ul><li>如 <code><button></code>、<code><input></code> 等，其具体表现取决于CSS的属性和样式。</li></ul> </li></ul>
<h4><a name="t16"></a><a id="3_153"></a>【3】总结</h4>
<ul><li>块级标签可以修改长度，行内标签不可以，修改了也不会发生变化。</li><li>块级标签内部可以嵌套任意的块级标签和行内标签，但 <code><p></code> 标签除外，它只能嵌套行内标签不能嵌套块级标签。</li><li>行内标签不能嵌套块级标签，但可以嵌套行内标签。</li></ul>
<h3><a name="t17"></a><a id="head_159"></a>【六】head常用标签</h3>
<h4><a name="t18"></a><a id="1title_161"></a>【1】title</h4>
<ul><li>用途：定义网页标题，显示在浏览器标签栏上</li></ul>
<pre data-index="6" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>网页标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.157726;"><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
<h4><a name="t19"></a><a id="2style_169"></a>【2】style</h4>
<ul><li>用途：定义内部CSS样式</li></ul>
<pre data-index="7" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<!--css代码-->
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.157726;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre>
<h4><a name="t20"></a><a id="3script_179"></a>【3】script</h4>
<ul><li>用途：定义内部JavaScript代码，也可用于引入外部JavaScript文件</li></ul>
<pre data-index="8" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span>js代码<span class="token operator">--</span><span class="token operator">></span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.157726;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre>
<h4><a name="t21"></a><a id="4link_189"></a>【4】link</h4>
<ul><li>用途：引入外部CSS文件</li></ul>
<pre data-index="9" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>style.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.157726;"><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
<h4><a name="t22"></a><a id="5meta_197"></a>【5】meta</h4>
<ul><li> <p>用途：用于在网页中提供元数据。</p>
<ul><li>元数据是描述数据的数据，它们提供关于网页内容、字符集、作者、关键字等信息，帮助搜索引擎和浏览器理解和处理网页。</li></ul> </li><li> <p>常见的<code><meta></code>标签</p> </li><li> <p><code><meta charset="字符集"></code>：</p>
<ul><li>指定网页文档使用的字符集，常见的字符集有UTF-8、ISO-8859-1等。</li></ul> </li><li> <p><code><meta name="viewport" content="viewport设置"></code>：</p>
<ul><li>用于指定网页在移动设备上的视口（viewport）设置，包括网页的宽度、初始缩放比例等。</li></ul> </li><li> <p><code><meta name="keywords" content="关键词"></code>：</p>
<ul><li>用于指定网页的关键词，帮助搜索引擎判断网页的相关性。</li></ul> </li><li> <p><code><meta name="description" content="网页描述"></code>：</p>
<ul><li>用于提供对网页内容的简要描述，显示在搜索结果页面中作为网页摘要。</li></ul> </li><li> <p><code><meta name="robots" content="指令"></code>：</p>
<ul><li>指定搜索引擎对网页的索引和抓取规则，如通过"noindex"禁止索引网页。</li></ul> </li><li> <p><code><meta http-equiv="参数" content="内容"></code>：</p>
<ul><li>用于设置HTTP响应头信息</li><li>如<code><meta http-equiv="refresh" content="5;url=http://example.com/"></code>可在5秒后自动跳转到指定地址。</li></ul> </li></ul>
<h3><a name="t23"></a><a id="_218"></a>【七】标签的两个重要属性</h3>
<h4><a name="t24"></a><a id="1id_220"></a>【1】id值</h4>
<ul><li>id值是类似于标签的<strong>唯一标识符</strong>，用于在同一个页面上唯一标识一个特定的元素。</li><li>每个id值在整个文档中都必须是唯一的，不能重复使用。</li><li>通过id值，我们可以在JavaScript或CSS中引用特定标签，并对其进行操作或样式化。</li><li>类似于标签的身份证号，在同一个页面上id值不能重复。</li></ul>
<h4><a name="t25"></a><a id="2class_227"></a>【2】class值</h4>
<ul><li><strong>一个HTML标签可以具有多个class值</strong>，这样可以将多个不同的样式或行为应用于同一个标签。</li><li>多个class值之间使用空格分隔。</li><li>通过class值，我们可以定义一组相关的样式或行为，并将其应用于多个标签，实现代码的重用和简化。</li><li>类似于面向对象中类的继承，一个class可以继承多个class值。</li></ul>
<h4><a name="t26"></a><a id="3_234"></a>【3】小结</h4>
<ul><li>使用id值和class值，我们可以在HTML中标识和操作特定的元素，以及应用样式和行为。</li><li><strong>id值用于唯一标识一个元素，而class值用于定义和应用一组相关的样式或行为。</strong></li></ul>
<h3><a name="t27"></a><a id="body_239"></a>【八】body常用标签</h3>
<ul><li>在HTML中，<code><body></code>标签是用来定义页面的主体内容的。</li></ul>
<h4><a name="t28"></a><a id="1h_243"></a>【1】h标签</h4>
<ul><li>h标签用于定义标题的级别，共有六个级别，从<code><h1></code>到<code><h6></code>，其中<code><h1></code>表示最高级别的标题，<code><h6></code>表示最低级别的标题。</li></ul>
<pre data-index="10" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>1级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>2级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.157726;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre>
<h4><a name="t29"></a><a id="2p_252"></a>【2】p标签</h4>
<ul><li>p标签用于定义段落，在网页中呈现一段文本。</li><li>p标签会自动在段落前后添加一些空白间距，用于区分段落之间的内容。</li></ul>
<pre data-index="11" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>段落一<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>段落二<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.157726;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre>
<h4><a name="t30"></a><a id="3a_262"></a>【3】a标签</h4>
<ul><li>a标签用于创建超链接，允许用户点击链接跳转到指定的URL或页面位置。</li></ul>
<pre data-index="12" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>目标链接<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.157726;"><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
<ul><li> <p>href属性：</p>
<ul><li>href属性指定了链接的目标URL或页面位置。可以是一个网址，也可以是页面中其他标签的id值，用于实现页面内的锚点跳转。</li><li>当a标签指定的网址从来没有被点击过时，a标签的字体颜色通常是蓝色。</li><li>当a标签指定的网址被点击过后，a标签的字体颜色通常是紫色。</li></ul> </li><li> <p>target属性：</p>
<ul><li>target属性用于指定链接在何处打开。</li><li><code>_self</code>：在当前窗口或标签页中打开链接（默认行为）。</li><li><code>_blank</code>：在新的窗口或标签页中打开链接。</li></ul> </li><li> <p>a标签的锚点功能：<br> 点击链接后自动跳转到页面中指定的区域</p> <pre data-index="13" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#顶部区域id<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>回到顶部<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.157726;"><li style="color: rgb(153, 153, 153);">1</li></ul></pre> </li><li> <p>通过在href属性中使用"#id值"，可以实现在页面内部的不同位置之间进行跳转。</p> </li></ul>
<h4><a name="t31"></a><a id="4img_291"></a>【4】img标签</h4>
<pre data-index="14" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>图片描述<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>图片信息<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>300<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.157726;"><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
<ul><li>src属性：
<ul><li>src属性用于指定图片的路径，可以是本地图片的路径或者网络上的图片链接。</li></ul> </li><li>alt属性：
<ul><li>alt属性用于提供图片的替代文本，当图片无法加载时，替代文本将显示在图片的位置上。这对于视觉障碍用户或者图片加载失败的情况下提供了描述性信息。</li></ul> </li><li>title属性：
<ul><li>title属性用于在鼠标悬停在图片上时显示一段文本信息。当用户将鼠标悬停在图片上方时，会显示title属性中指定的文本。</li></ul> </li><li>height和width属性：
<ul><li>height和width属性用于指定图片的高度和宽度。可以使用具体的像素值或者百分比来调整图片的尺寸。</li><li>当只设置其中一个属性时，另一个属性会按比例缩放以保持图片的宽高比。</li><li>如果同时设置了height和width属性，并且不考虑宽高比，可能会导致图片失真。</li></ul> </li></ul>
<h4><a name="t32"></a><a id="5_308"></a>【5】无序列表</h4>
<ul><li>无序列表使用<code><ul></code>和<code><li></code>标签来创建，其中<code><ul></code>定义列表，而<code><li></code>定义每个列表项。</li><li>无序列表通常使用符号（如圆点或实心点）来表示每个列表项。</li></ul>
<pre data-index="15" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>标签1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>标签2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.157726;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre>
<pre data-index="16" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">•标签1
•标签2
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.157726;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre>
<h4><a name="t33"></a><a id="6_325"></a>【6】有序列表</h4>
<ul><li>有序列表使用<code><ol></code>和<code><li></code>标签来创建，其中<code><ol></code>定义列表，而<code><li></code>定义每个列表项。</li><li>有序列表使用数字或字母来表示每个列表项的顺序。</li></ul>
<pre data-index="17" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>标签1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>标签2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.157726;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre>
<pre data-index="18" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">1.标签1
2.标签2
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.157726;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre>
<h4><a name="t34"></a><a id="7_342"></a>【7】标题列表</h4>
<ul><li>标题列表使用<code><dl></code>、<code><dt></code>和<code><dd></code>标签来创建，其中<code><dl></code>定义列表，<code><dt></code>定义标题，<code><dd></code>定义内容。</li><li>标题列表通常用于显示标题和对应的描述信息。</li></ul>
<pre data-index="19" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dl</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>标题一<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>内容一<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>标题二<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>内容二<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dl</span><span class="token punctuation">></span></span>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.157726;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre>
<pre data-index="20" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">标题一
内容一
标题二
内容二
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.157726;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre>
<h4><a name="t35"></a><a id="7div_363"></a>【7】div标签</h4>
<ul><li>div标签是最常见的HTML容器标签，用于将文档分隔成独立的区块。</li><li>它可以包裹其他标签，并通过设置样式控制内容的布局和外观。</li><li>虽然 <code><div></code> 没有具体的语义含义，但常被用于定义页面的整体结构或划分不同的内容区域。</li><li>可以通过CSS样式对div进行布局和样式的调整。</li></ul>
<pre data-index="21" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
这是div标签
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>div内的段落<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>div内的列表字段1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>div内的列表字段2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.157726;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li></ul></pre>
<h4><a name="t36"></a><a id="8span_381"></a>【8】span标签</h4>
<ul><li>span标签是内联元素，主要用于对文本或一小段文本进行样式上的控制。</li><li>通常用于对特定部分进行样式修饰或添加特殊效果，例如修改文字颜色、加粗、斜体等，或者配合CSS实现一些交互效果。与 <code><div></code> 不同，<code><span></code> 主要用于样式上的调整，没有具体的语义意义。’</li><li>可以通过设置span标签的样式属性来改变其中文本的外观。</li></ul>
<pre data-index="22" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>span标签的内容<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>本字段将<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">color</span><span class="token punctuation">:</span> red</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>span<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>写为红色<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.157726;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre>
<h4><a name="t37"></a><a id="9table_394"></a>【9】table标签</h4>
<ul><li>表格可以使用 <code><table></code>、<code><tr></code> 、<code><thead></code>、<code><tbody></code>、<code><th></code>和 <code><td></code> 标签来创建。</li><li>其中，<code><table></code> 标签用于定义整个表格，<code><tr></code> 标签用于定义表格的行，<code><td></code> 和<code><th></code>标签用于定义表格的单元格，<code><th></code>标签用于<strong>加粗显示</strong>字段信息。</li><li><code><thead></code>标签用于定义表格的<strong>表头</strong></li><li><code><tbody></code>标签用于定义表格的<strong>数据部分</strong></li></ul>
<pre data-index="23" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token comment"><!--基础表格--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">cellpadding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span> <span class="token attr-name">cellspacing</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>thead</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>表头-加粗信息<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>表头-普通信息<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>thead</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>数据部分第一行-水平占据两列<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">rowspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>数据部分第一行-垂直占据两行<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>数据部分第二行-水平占据两列<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">rowspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>数据部分第二行-垂直占据两行<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style="opacity: 0.157726;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li></ul></pre>
<ul><li><code>border</code>：为表格添加外边框。</li><li><code>cellpadding</code>：调整字体离边框距离。</li><li><code>cellspacing</code>：调整内边框离外边框的距离。</li></ul>
<h4><a name="t38"></a><a id="10form_428"></a>【10】form标签</h4>
<ul><li>表单可以使用 <code><form></code> 标签来创建。</li><li>表单允许<strong>用户在网页中输入信息并将其提交到服务器进行处理。</strong></li><li>在 <code><form></code> 标签内，你可以添加各种表单元素，例如文本输入框、复选框、单选按钮等，以便用户输入信息。还可以使用 <code><input></code> 标签来创建特定类型的表单元素。</li><li>表单的组成
<ul><li><strong>表单域</strong>（Form Fields）：用于接收用户输入的数据常见的表单域包括文本框（Input Text）、单选框（Radio Buttons）、复选框（Checkboxes）、下拉列表（Select）、文本区域（Textarea）等。</li><li><strong>提交按钮</strong>（Submit Button）：用户在填写完表单后，点击提交按钮将表单数据发送到服务器进行处理。</li><li><strong>取消按钮</strong>（Cancel Button）：允许用户取消当前的操作并清空表单内的所有数据。</li><li><strong>标签</strong>（Labels）：描述表单域的作用或意义，增加表单的可读性和易用性。</li><li><strong>校验机制</strong>（Validation）：用于验证用户输入的数据是否符合预期的格式或要求，常见的校验包括必填项（Required Fields）、长度限制（Length Limitation）、数据格式验证（Data Format Validation）等。</li></ul> </li></ul>
<pre data-index="24" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.157726;"><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
<ul><li><code>action</code>：控制数据提交的后端路径（给哪个服务端提交数据）。
<ul><li>不写任何值：<strong>默认</strong>将数据提交到<strong>当前</strong>页面所在的URL。</li><li>写全路径：例如 <code>action="https://www.baidu.com"</code>，将数据提交到百度的服务端。</li><li>只写路径后缀：例如 <code>action="/index/"</code>，自动识别出当前服务端的IP和端口拼接到前面，如 <code>host:port/index/</code>。</li></ul> </li></ul>
<h4><a name="t39"></a><a id="11input_450"></a>【11】input标签</h4>
<ul><li><code><input></code>标签是HTML中用于创建表单输入控件的标签之一。</li><li>它可以用于接受用户的输入，并将这些输入数据提交到服务器进行处理。</li></ul>
<h5><a id="1_455"></a>（1）参数</h5>
<ul><li><code>type</code>：指定输入框的类型，常见的类型包括：
<ul><li><code>text</code>：文本输入框，用于接受单行文本。</li><li><code>password</code>：密码输入框，输入的内容会被隐藏。</li><li><code>checkbox</code>：复选框，用户可以选择多个选项。</li><li><code>radio</code>：单选按钮，用户只能选择其中一个选项。加载默认选项要加<code>checker = "checker"</code>。当标签的属性名和属性值一样的时候可以简写<code>checker</code> 。</li><li><code>file</code>：文件上传框，用于选择上传的文件。</li><li><code>date</code>：日期</li><li><code>submit</code>：提交按钮，用于提交表单数据。</li><li><code>reset</code>：重置按钮，用于重置表单数据。</li><li>button：普通的按钮，本身没有功能，可以给他绑定js功能</li></ul> </li><li><code>name</code>：指定输入框的名称，在表单提交时，会将输入框的值与名称一起发送到服务器。</li><li><code>value</code>：指定输入框的初始值。</li><li><code>placeholder</code>：在输入框为空时显示的提示文本。</li><li><code>required</code>：设置为<code>true</code>时，表示输入框必须填写内容才能提交表单。</li><li><code>readonly</code>：设置为<code>true</code>时，表示输入框只读，用户无法编辑。</li><li><code>disabled</code>：设置为<code>true</code>时，表示输入框被禁用，用户无法编辑且不会被提交。</li><li><code>size</code>：指定输入框的可见宽度，单位为字符数。</li><li><code>maxlength</code>：指定输入框中可以输入的最大字符数。</li><li><code>autocomplete</code>：控制浏览器是否自动填充输入框。常见的值有<code>on</code>（开启自动填充）和<code>off</code>（关闭自动填充）。</li></ul>
<h5><a id="2_477"></a>（2）示例</h5>
<pre data-index="25" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>页面标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>注册页面<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>title<span class="token punctuation">"</span></span> <span class="token attr-name">readonly</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>32<span class="token punctuation">"</span></span>
<span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span> 注册标题框<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
username:<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span>
<span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>admin<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
password:<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span>
<span class="token attr-name">maxlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>15<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span>
<span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>000<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
sex：
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gender<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
female <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gender<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gender<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
male <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gender<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
hobby:
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gender<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
swimming <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobby<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobby<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
running <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobby<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
brith_day:
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>birth_date<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>birth_date<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>birth_date<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2024-01-01<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
file update:
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file_update<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file_update<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file_update<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>提交<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>重置<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>闲置按钮<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style="opacity: 0.157726;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li><li style="color: rgb(153, 153, 153);">45</li><li style="color: rgb(153, 153, 153);">46</li><li style="color: rgb(153, 153, 153);">47</li><li style="color: rgb(153, 153, 153);">48</li><li style="color: rgb(153, 153, 153);">49</li><li style="color: rgb(153, 153, 153);">50</li><li style="color: rgb(153, 153, 153);">51</li><li style="color: rgb(153, 153, 153);">52</li><li style="color: rgb(153, 153, 153);">53</li><li style="color: rgb(153, 153, 153);">54</li><li style="color: rgb(153, 153, 153);">55</li><li style="color: rgb(153, 153, 153);">56</li><li style="color: rgb(153, 153, 153);">57</li><li style="color: rgb(153, 153, 153);">58</li><li style="color: rgb(153, 153, 153);">59</li><li style="color: rgb(153, 153, 153);">60</li><li style="color: rgb(153, 153, 153);">61</li><li style="color: rgb(153, 153, 153);">62</li><li style="color: rgb(153, 153, 153);">63</li><li style="color: rgb(153, 153, 153);">64</li><li style="color: rgb(153, 153, 153);">65</li><li style="color: rgb(153, 153, 153);">66</li><li style="color: rgb(153, 153, 153);">67</li><li style="color: rgb(153, 153, 153);">68</li></ul></pre>
<p><img src="https://1000bd.com/contentImg/2024/03/06/161345158.png" alt="请添加图片描述"></p>
<h4><a name="t40"></a><a id="12select_553"></a>【12】select标签</h4>
<h5><a id="1_555"></a>（1）参数</h5>
<ul><li><code>value</code> 属性定义了选项的实际值，它通常在提交表单时用作数据的标识符。
<ul><li>当用户选择该选项时，所选选项的 <code>value</code> 值将被发送到服务器或在客户端的 JavaScript 中使用。</li></ul> </li></ul>
<h5><a id="1_560"></a>（1）下拉列表单选框</h5>
<pre data-index="26" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>identify<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>identify<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>super<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>超级管理员<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>admin<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>管理员<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>normal<span class="token punctuation">"</span></span> <span class="token attr-name">che</span><span class="token punctuation">></span></span>普通用户<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.157726;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre>
<h5><a id="2_570"></a>（2）复选框</h5>
<ul><li><code>multiple</code> 是一个用于 <code><select></code> 元素的布尔属性，用于指定是否允许多选。
<ul><li>用户可以按住 Ctrl 键（在 Windows 或 Linux 上）或 Command 键（在 macOS 上）并单击选项来进行多选。</li><li>用户还可以按住 Shift 键并选择一个范围内的选项来进行连续多选。</li></ul> </li></ul>
<pre data-index="27" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobby<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobby<span class="token punctuation">"</span></span> <span class="token attr-name">multiple</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>swimming<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>游泳<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>running<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>跑步<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reading<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>读书<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>listening<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>听歌<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.157726;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre>
<h5><a id="3_585"></a>（3）多级选项框</h5>
<ul><li><code><optgroup></code> 是一个用于 <code><select></code> 元素的标签，用于创建选项组。
<ul><li><code><optgroup></code> 元素用于将相关的选项分组在一起，以便在下拉列表中进行更好的组织和可读性。</li></ul> </li></ul>
<pre data-index="28" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>addr<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>addr<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chinese<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Beijing<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>北京<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Shanghai<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>上海<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>America<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Alabama<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>亚拉巴马州<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Alaska <span class="token punctuation">"</span></span><span class="token punctuation">></span></span>阿拉斯加州<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.157726;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li></ul></pre>
<p><img src="https://1000bd.com/contentImg/2024/03/06/161345169.png" alt="请添加图片描述"></p>
<h4><a name="t41"></a><a id="13textarea_606"></a>【13】textarea标签</h4>
<ul><li><code><textarea></code> 标签用于创建一个多行文本输入框，允许用户输入多行文本。</li></ul>
<h5><a id="1_610"></a>（1）参数</h5>
<ul><li><code>name</code>：用于指定文本区域的名称，该名称将在提交表单时用作标识符。</li><li><code>id</code>：用于指定文本区域的唯一标识符。</li><li><code>cols</code>：用于指定文本区域的可见宽度，以列数为单位。可以使用一个正整数值来设置列数。</li><li><code>rows</code>：用于指定文本区域的可见高度，以行数为单位。可以使用一个正整数值来设置行数。</li><li><code>maxlength</code>：用于限制用户在文本区域中输入的最大字符数。</li></ul>
<pre data-index="29" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>message<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>message<span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">maxlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.157726;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre>
</div>
</div>
</li>
<li class="list-group-item ul-li">
<b>相关阅读:</b><br>
<nobr>
<a href="/Article/Index/1486458">Python笔记三之闭包与装饰器</a> <br />
<a href="/Article/Index/1525775">C++类与对象二</a> <br />
<a href="/Article/Index/950037">每日一练——单链表排序</a> <br />
<a href="/Article/Index/768882">LeetCode_299_猜数字游戏</a> <br />
<a href="/Article/Index/1263003">SprimgMVC增删改查·</a> <br />
<a href="/Article/Index/780401">C学生数据库_将链表保存进数据库</a> <br />
<a href="/Article/Index/1108480">高纯度高活性艾美捷人重组MEGACD40L蛋白（可溶性）</a> <br />
<a href="/Article/Index/847110">【微服务34】分布式事务Seata源码解析二：Seata Server启动时都做了什么【云原生】</a> <br />
<a href="/Article/Index/1286928">文件名批量重命名与翻译的实用指南</a> <br />
<a href="/Article/Index/1224327">DeepStream系列之yolov8部署测试</a> <br />
</nobr>
</li>
<li class="list-group-item from-a mb-2">
原文地址：https://blog.csdn.net/weixin_48183870/article/details/136190538
</li>
</ul>
</div>
<div class="col-lg-4 col-sm-12">
<ul class="list-group" style="word-break:break-all;">
<li class="list-group-item ul-li-bg" aria-current="true">
最新文章
</li>
<li class="list-group-item ul-li">
<nobr>
<a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <br />
<a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <br />
<a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <br />
<a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <br />
<a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <br />
<a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <br />
<a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <br />
<a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <br />
<a href="/Article/Index/1887520">AnatoMask论文汇总</a> <br />
<a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> <br />
</nobr>
</li>
</ul>
<ul class="list-group pt-2" style="word-break:break-all;">
<li class="list-group-item ul-li-bg" aria-current="true">
热门文章
</li>
<li class="list-group-item ul-li">
<nobr>
<a href="/Article/Index/888177">十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！</a> <br />
<a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <br />
<a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <br />
<a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <br />
<a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <br />
<a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <br />
<a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <br />
<a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <br />
<a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br />
<a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> <br />
</nobr>
</li>
</ul>
</div>
</div>
</div>
<!-- 主体 -->
<!--body结束-->
<!--这里是footer模板-->
<!--footer-->
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-muted center foot-height">
Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a>
<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a>
</div>
<div style="width:300px;margin:0 auto; padding:0px 5px;">
<a href="/regex.html">正则表达式工具</a>
<a href="/cron.html">cron表达式工具</a>
<a href="/pwdcreator.html">密码生成工具</a>
</div>
<div style="width:300px;margin:0 auto; padding:5px 0;">
<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
<img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a>
</div>
</div>
</div>
</div>
</nav>
<!--footer-->
<!--footer模板结束-->
<script src="/js/plugins/jquery/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
<!--这里是scripts模板-->
<!--scripts模板结束-->
</body>
</html>