本文已收录于专栏
⭐️ 《HTML》⭐️
HTML快速入门
HTML 框架
<title>
</head>
<body>
<body>
</html>
<div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><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></ul></pre>
<pre data-index="1" 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> 作用是告诉浏览器使用哪种HTML版本来显示网页,表示最新的HTML。
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zh-CN<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>lang表示：当先文档的显示语言 zh-CN–表示中文 en–表示英文
<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>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 comment"><!-- 文档的元数据：即附属信息配置--></span>这里是规定网页内容编码为UTF-8，防止出现乱码
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</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>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment"><!--适配手机 --></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>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>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" 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=""><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></ul></pre>
<p><code><html></code>标签<br> HTML <code><html> </code>元素 表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。所有其他元素必须是此元素的后代。</p>
<p><code><head></code>标签<br> HTML <code>head </code>元素 规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。</p>
<p><code><body></code>标签<br> HTML <code>body </code>元素表示文档的内容。document.body 属性提供了可以轻松访问文档的 body 元素的脚本。</p>
<p><code><title></code>标签<br> HTML <code><title> </code>元素 定义文档的标题，显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。</p>
<p><code><meta></code><br> HTML 元素表示那些不能由其它 HTML 元相关元素表示的任何元数据信息。即附属信息配置。</p>
<p>常见属性：</p>
<ul><li>charset：这个属性声明了文档的字符编码。</li><li>如果使用了这个属性，其值必须是与 ASCII 大小写无关（ASCII case-insensitive）的”utf-8”。</li><li>name： name 和 content 属性可以一起使用，以名 - 值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值。</li><li>icon：<code><link rel="icon" href="images/icon.png"></code></li><li><code><!-- 多行注释 --></code><br> 快捷键：Ctrl + /</li></ul>
<h2><a name="t2"></a><a id="_79"></a>常用标签</h2>
<p>(1)、HTML元素根据浏览器表现形式分为两类：①<a href="https://so.csdn.net/so/search?q=%E5%9D%97%E5%85%83%E7%B4%A0&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=%E5%9D%97%E5%85%83%E7%B4%A0&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"块元素\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E5%9D%97%E5%85%83%E7%B4%A0&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"块元素\"}"}" data-tit="块元素" data-pretit="块元素">块元素</a>；②行内元素；</p>
<p>(2)、块元素特点：</p>
<p>（1）独占一行，排斥其他元素跟其位于同一行，包括块元素和<a href="https://so.csdn.net/so/search?q=%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0&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=%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"行内元素\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"行内元素\"}"}" data-tit="行内元素" data-pretit="行内元素">行内元素</a>；<br> （2）块元素内部可以容纳其他块元素或行元素；<br> 常见块元素有：<code><h1>, <p>, <pre>, <ul>, <ol>, <table></code>。</p>
<p>(3)、行内元素特点：</p>
<p>（1）可以与其他行内元素位于同一行；<br> （2）行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；<br> 常见行内元素有：<code><i>, <b>, <del>, <ins>, <td>, <a></code></p>
<h3><a name="t3"></a><a id="_95"></a>块级元素</h3>
<h4><a name="t4"></a><a id="div_97"></a><strong><code><div></code>标签</strong></h4>
<p>块级标签，会<a href="https://so.csdn.net/so/search?q=%E8%87%AA%E5%8A%A8%E6%8D%A2%E8%A1%8C&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=%E8%87%AA%E5%8A%A8%E6%8D%A2%E8%A1%8C&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"自动换行\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E8%87%AA%E5%8A%A8%E6%8D%A2%E8%A1%8C&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"自动换行\"}"}" data-tit="自动换行" data-pretit="自动换行">自动换行</a>，本身没有语义，是一个盒子。</p>
<p><code><div></code>元素是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。</p>
<h4><a name="t5"></a><a id="h_103"></a><code><h></code>标签</h4>
<p>HTML<code><h1>–<h6></code>标题 (Heading) 元素呈现了六个不同的级别的标题<code>，<h1></code> 级别最高，而<code> <h6></code> 级别最低。</p>
<p><img src="https://1000bd.com/contentImg/2023/10/25/080713740.png" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PB8jguND-1661222926884)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220815213556329.png)]"></p>
<h4><a name="t6"></a><a id="p_110"></a><code><p></code>标签</h4>
<p>HTML </p>
<p>元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，</p>
<p> 是块级元素。</p>
<h4><a name="t7"></a><a id="br_114"></a><code><br></code>标签</h4>
<p>HTML<code> <br></code> 元素在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要。</p>
<h4><a name="t8"></a><a id="hr_118"></a><code><hr></code>标签</h4>
<p>HTML<code> <hr></code> 元素表示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）。</p>
<hr> 在 HTML 的早期版本中，它是一个水平线。现在它仍能在可视化浏览器中表现为水平线，但目前被定义为语义上的，而不是表现层面上。所以如果想画一条横线，请使用适当的 css 样式来修饰。
<hr>
<p><img src="https://1000bd.com/contentImg/2023/10/25/080713588.png" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q1vVcCfw-1661222926885)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220815213708816.png)]"></p>
<h3><a name="t9"></a><a id="_129"></a>行内元素</h3>
<h4><a name="t10"></a><a id="span_131"></a><code><span></code>标签</h4>
<p>行内标签，不会换行，本身没有语义，是一个盒子。。</p>
<p><code><span></code> 元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者 Id 属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。<code><span> </code>与 <code><div> </code>元素很相似，但 <code><div></code> 是一个 块元素 而<code> <span></code> 则是 行内元素。</p>
<h4><a name="t11"></a><a id="_137"></a>文本格式化标签</h4>
<h5><a id="_139"></a>加粗</h5>
<p><code><strong></code>标签、<code><b></code>标签均可使字体加粗</p>
<p><code><strong></code><strong>的语义更强烈。</strong></p>
<h5><a id="_145"></a>倾斜</h5>
<p><code><em></code>、<code><i></code>均可使字体倾斜</p>
<p><code><em></code><em>的语义更强烈。</em></p>
<h5><a id="_151"></a>删除线</h5>
<p><code><del></code>、<code><s></code>均可使字体倾斜</p>
<p><code><del></code><del>的语义更强烈。</del></p>
<h5><a id="_157"></a>下划线</h5>
<p><code><ins></code>、<code><u></code>均可使字体倾斜</p>
<p><code><ins></code><ins>的语义更强烈。</ins></p>
<h3><a name="t12"></a><a id="_165"></a>图像标签</h3>
<h4><a name="t13"></a><a id="img_167"></a><code><img></code>标签</h4>
<p>HTML <code><img> </code>元素将一份图像嵌入文档。<br> 默认为行内元素，即display: inline。</p>
<h4><a name="t14"></a><a id="src_172"></a><code>src属性</code></h4>
<p>该属性是必须的，它包含了你想嵌入的图片的文件路径。</p>
<h4><a name="t15"></a><a id="alt_176"></a><code>alt属性</code></h4>
<p>替换文本，当图片显示不出来的时候，用文字替换。</p>
<p> <img src="/img.jpg" alt="就像这样"></p>
<h4><a name="t16"></a><a id="title_182"></a><code>title属性</code></h4>
<p>提示文本，当鼠标放到图像上时，提示的文字。</p>
<h4><a name="t17"></a><a id="height_187"></a><code>height属性</code></h4>
<p>图像的高度，在 HTML5 中的单位是 CSS 像素，在 HTML 4 中既可以是像素，也可以是百分比。</p>
<p>可以只指定 width 和 height 中的一个值，浏览器会根据原始图像进行缩放。</p>
<h4><a name="t18"></a><a id="width_193"></a><code>width属性</code></h4>
<p>图像的宽度，在 HTML5 中单位是 CSS 像素， 在 HTML 4 中可以是像素也可以是百分比。</p>
<h4><a name="t19"></a><a id="border_197"></a><code>border属性</code></h4>
<p>给图像设置边框，一般用CSS设定</p>
<h3><a name="t20"></a><a id="_201"></a>相对路径</h3>
<p>以引用文件的所在位置为参考基础，而建立出的目录路径。</p>
<p>这里简单来说就是图片相对于HTML页面的位置。</p>
<h4><a name="t21"></a><a id="_207"></a>图片在同一级目录</h4>
<p>直接写出图片名称写出即可。<br> <code> <img src = "/people.jpg"></code></p>
<p><img src="https://1000bd.com/contentImg/2023/10/25/080713736.png" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ego7krEb-1661222926887)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220821190400110.png)]"></p>
<h4><a name="t22"></a><a id="_215"></a>图片在下一级目录</h4>
<p>写出图片所在的文件名称。<br> 如<code> <img src = "/images/people.jpg"></code></p>
<p><img src="https://1000bd.com/contentImg/2023/10/25/080713812.png" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-thwpTNkF-1661222926887)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220821190547716.png)]"></p>
<h4><a name="t23"></a><a id="_223"></a>图片在上一级目录</h4>
<p>先用 … /来退回所引用文件的上一级，然后再写出图片所在的文件名称即可。<br> <code> <img src = "../images/people.jpg"></code></p>
<p><img src="https://1000bd.com/contentImg/2023/10/25/080713641.png" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xdnIiqwj-1661222926888)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220821190316710.png)]"></p>
<h3><a name="t24"></a><a id="_231"></a>绝对路径</h3>
<p>绝对路径是指：目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。</p>
<p>例如：<code>D:\Note\HTML\workspace </code>一般不常用，了解即可。</p>
<p>注意 绝对路径 是 \ 相对路径是 /。</p>
<h3><a name="t25"></a><a id="_239"></a>超链接标签</h3>
<p><code><a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a></code></p>
<p>属性：</p>
<p>target：用来指定链接页面的打开方式。</p>
<ul><li>_self为在本窗口打开</li><li>_blank为在新窗口打开</li></ul>
<p>外部链接：</p>
<ul><li> <pre data-index="2" class="set-code-show prettyprint"><code class="prism language-HTML has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><a href= "http://www.baidu.com"百度</a>
<div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> </li></ul>
<p>内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可.</p>
<ul><li> <pre data-index="3" class="set-code-show prettyprint"><code class="prism language-HTML has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><a href = "index.html"> 首页</a>>
<div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> </li></ul>
<p>空链接：如果当时没有确定链接目标时，可以用 ‘#’ 来代替。</p>
<ul><li> <pre data-index="4" class="set-code-show prettyprint"><code class="prism language-HTML has-numbering" onclick="mdcp.signin(event)" style="position: unset;">< a href = '#'>首页</a>
<div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> </li></ul>
<p>如果 href 里面地址是一个文件或者压缩包，会下载这个文件</p>
<ul><li> <pre data-index="5" class="set-code-show prettyprint"><code class="prism language-HTML has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><a href="img.zip"></a>
<div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> </li></ul>
<p>网页元素的链接</p>
<ul><li> <pre data-index="6" class="set-code-show prettyprint"><code class="prism language-HTML has-numbering" onclick="mdcp.signin(event)" style="position: unset;">< a href = "http://www.baidu.com"><img src = "img.jpg"> <a>
<div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> </li></ul>
<h3><a name="t26"></a><a id="_280"></a>锚点链接</h3>
<p>可以快速定位到页面中的某个位置</p>
<ul><li>在链接文本中 href 属性中 设置为 # + 标志</li><li>找到目标位置标签，里面添加一个 id 属性 = 标志</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;"><a href = "#two">第二季</a>
<h3 id = "two">第二季介绍</h3>
<div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre>
<h3><a name="t27"></a><a id="_292"></a>注释标签</h3>
<p>快捷键 Ctrl + /</p>
<h3><a name="t28"></a><a id="_296"></a>特殊字符</h3>
<p><img src="https://1000bd.com/contentImg/2023/10/25/080713828.png" alt="img"></p>
<p> 空格</p>
<p>&it 小于号 litter</p>
<p>> 大于号 big</p>
<h3><a name="t29"></a><a id="_306"></a>表格标签</h3>
<p>用于展示数据，非常清晰。</p>
<p><strong>表格基本框架</strong></p>
<pre data-index="8" class="set-code-show prettyprint"><code class="prism language-HTML has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><body>
<table>
<tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr>//三行三个单元格
<tr> <td>林晓</td> <td>男</td> <td>18</td> </tr>
<tr> <td>林晓</td> <td>男</td> <td>18</td> </tr>
<tr> <td>林晓</td> <td>男</td> <td>18</td> </tr>
</table>
</body>
<div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><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>
<ul><li> <p>table 用来定义表格的标签</p> </li><li> <p>tr 用来定义表格中的行，必须嵌套在<code><table><table></code>标签中。</p> </li><li> <p>td 用来定义表格中的单元格，必须嵌套在<code><tr><tr></code>标签中。</p> </li><li> <p>th 用来定义表格中的表头，表头单元格里面的内容加粗居中显示。</p> </li></ul>
<p><img src="https://1000bd.com/contentImg/2023/10/25/080713869.png" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iuw2sqgF-1661222926889)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220821222227386.png)]"></p>
<h4><a name="t30"></a><a id="_332"></a>表格结构标签</h4>
<p>为了更好的表示表格的语义，可以将表格分割成 表格头部 和表格主体两大部分</p>
<ul><li>用 <code><thead></thead></code> 标签表示表格的头部区域，<code><thead></code>内部必须拥有<code><tr></code>标签，一般是位于第一行</li><li>用<code><tbody></tbody></code> 标签表示表格的主体区域，主要是用于放数据本体</li><li>以上标签都是放在<code><table></table></code>标签中</li></ul>
<p><img src="https://1000bd.com/contentImg/2023/10/25/080713603.png" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JoBifuZw-1661222926890)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220821224752984.png)]"></p>
<p><img src="https://1000bd.com/contentImg/2023/10/25/080713984.png" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LJ0Rfhcu-1661222926891)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220821224926076.png)]"></p>
<p>跨行合并：上面的单元格为目标单元格。</p>
<p>跨列合并：左侧的单元格为目标单元格。</p>
<p>合并单元格三部曲：</p>
<p><img src="https://1000bd.com/contentImg/2023/10/25/080714005.png" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dR14fWbp-1661222926892)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220821225409143.png)]"></p>
<h3><a name="t31"></a><a id="_357"></a>列表标签</h3>
<h4><a name="t32"></a><a id="_359"></a>无序列表</h4>
<pre data-index="9" class="set-code-show prettyprint"><code class="prism language-HTML has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><ul>
<li></li>
<li></li>
<li></li>
</ul>
<div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><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>
<ul><li><code>ul</code> 里面只能包含li，没有顺序。</li><li><code>li </code>里面可以包含任何标签。</li></ul>
<h4><a name="t33"></a><a id="_372"></a>有序列表</h4>
<pre data-index="10" class="set-code-show prettyprint"><code class="prism language-HTML has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><ol>
<li></li>
<li></li>
<li></li>
</ol>
<div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><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>
<ul><li>里面只能包含li，有顺序。</li></ul>
<h4><a name="t34"></a><a id="_384"></a>自定义列表</h4>
<pre data-index="11" class="set-code-show prettyprint"><code class="prism language-HTML has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>联系我们</dd>
</dl>
<div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><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>
<ul><li>里面只能包含dt和dd，dt和dd里面可以放任何标签。</li></ul>
<h3><a name="t35"></a><a id="_396"></a>表单标签</h3>
<p>目的：收集用户信息。</p>
<p>一个完整的表单通常由<strong>表单域，表单控件（表单元素）和提示信息</strong>3部分组成</p>
<p><img src="https://1000bd.com/contentImg/2023/10/25/080714060.png" alt="在这里插入图片描述"></p>
<h4><a name="t36"></a><a id="_404"></a>表单域</h4>
<ul><li>表单域是一个包含表单元素的区域。</li><li><code><form></from></code>标签用于定义表单域，会把它范围内的表单元素信息提交给服务器。</li></ul>
<h4><a name="t37"></a><a id="_409"></a>表单区域</h4>
<p>在表单域可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。</p>
<h5><a id="input_413"></a>input</h5>
<p>输入表单元素</p>
<p><strong>text：可以在输入框输入任意文本</strong></p>
<ul><li>验证码：<code><input type = "text" name ="username" vlue = "请输入用户名" maxlength ="6"></code></li><li>value：默认显示在输入框的提示文字。</li><li>maxlenth：用户输入的字符串最大长度。</li></ul>
<p><strong>password :密码框,用户看不见输入内容</strong></p>
<ul><li>密码：<code><input type = "password"> </code></li></ul>
<p><strong>radio：单选框</strong></p>
<ul><li>性别<code>：男<input type = "radio"> 女<input type = "radio"> </code></li><li>name 是表单元素名字 这里性别单选按钮必须有相同的 name ，才可以实现多选一。</li><li>check：将check = “checked”后，当页面打开时就默认选中这个按钮。</li></ul>
<p><strong>checkbox:复选框</strong></p>
<ul><li>爱好：<code>吃饭<input type = "checkbox">睡觉<input type = "checkbox"></code></li><li>check：将check = “checked”后，当页面打开时就默认选中这个按钮。</li></ul>
<p>submit：按钮键</p>
<ul><li><code> <input type ="submit" value = "免费注册" ></code></li><li>点了提交按钮，可以把表单域 form里面的表单元素 里面的信息 提交到后台服务器。</li></ul>
<p><strong>reset:重置按钮。</strong></p>
<ul><li><code><input type =" " value = "重新填写" ></code></li><li>重置按钮可以还原表单元素初始的默认状态。</li></ul>
<p><strong>button:普通按钮，后期结合JS 搭配使用。</strong></p>
<ul><li><code><input type = "button" value ="获取短信验证码"> </code></li></ul>
<p><strong>file：文件域，上传文件使用</strong></p>
<ul><li><code><intput type ="file"></code></li></ul>
<p><strong>lable：用于绑定一个表单元素，当点击 标签内的文件是，浏览器就会自动将焦点（光标）转到表单上，用来增加用户体验。</strong></p>
<ul><li><code><label for="sex"> 男 </lable></code><br> <code> <input type="radio" name="sex" id="sex" /></code></li></ul>
<h5><a id="select_461"></a>select</h5>
<pre data-index="12" class="set-code-show prettyprint"><code class="prism language-HTML has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><select>
<option selected="selected">选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
<div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><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>
<ul><li><code><select></code>中至少包含一对<code><option></code></li><li>在<code><option></code>中定义 <code>selected="selected"</code> 时，当前项即为默认选中项。<br> <img src="https://1000bd.com/contentImg/2023/10/25/080714076.png" alt="- "></li></ul>
<h4><a name="t38"></a><a id="texterae_477"></a>texterae</h4>
<ul><li>用于定义多行文本输入的控件</li></ul>
<pre data-index="13" class="set-code-show prettyprint"><code class="prism language-HTML has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><textarea>
文本内容
</textarea>nian
<div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><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>
<h2><a name="t39"></a><a id="_487"></a>完结散花</h2>
<p>ok以上就是对 HTML快速入门 的全部讲解啦，很感谢你能看到这儿。如果有遗漏、错误或者有更加通俗易懂的讲解,欢迎小伙伴私信我，我后期再补充完善。</p>
<h2><a name="t40"></a><a id="_491"></a>参考文献</h2>
<p><a href="https://www.w3school.com.cn/">https://www.w3school.com.cn/</a><br> <a href="https://blog.csdn.net/Augenstern_QXL/article/details/115419453">https://blog.csdn.net/Augenstern_QXL/article/details/115419453</a></p>
</div>
</div>
</li>
<li class="list-group-item ul-li">
<b>相关阅读:</b><br>
<nobr>
<a href="/Article/Index/810795">docker常见面试题</a> <br />
<a href="/Article/Index/1389667">Floorplan——关于channel、模拟模块、PAD摆放</a> <br />
<a href="/Article/Index/711117">为人处世之道，与君共勉！</a> <br />
<a href="/Article/Index/1131010">总结：Springboot工作记录</a> <br />
<a href="/Article/Index/1230022">【LeetCode】304. 二维区域和检索 - 矩阵不可变</a> <br />
<a href="/Article/Index/710757">基于ROS和turtlebot2的多机器人导航定位配置记录</a> <br />
<a href="/Article/Index/1183893">虚拟化基本知识及virtio-net初探</a> <br />
<a href="/Article/Index/822584">深度学习：资料整理</a> <br />
<a href="/Article/Index/866637">【操作系统】第三章：内存管理</a> <br />
<a href="/Article/Index/1711498">java：CompletableFuture的简单例子</a> <br />
</nobr>
</li>
<li class="list-group-item from-a mb-2">
原文地址：https://blog.csdn.net/m0_66139206/article/details/126480259
</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>