HTML入门

HTML入门
目录
1 HTML快速入门

 1.1 HTML 的介绍
- HTML（HyperText Markup Language）：超文本标记语言
- 超文本：比普通文本更强大
- 标记：就是标签。可以使用一系列标签，将网络上的文档格式统一，使分散的资源连接为一个逻辑整体
1.1.1 HTML 的组成
- HTML 页面是由一系列的元素（Element）组成的，而元素是通过标签创建出来的
标签
- 一对标签（ tags）可以设置一段文字样式，添加一张图片或者添加超链接等等。例如：
```
<h1>今天是个好日子h1>
1
```
在HTML中，
标签表示标题，那么，我们可以使用开始标签和结束标签包围文本内容，这样其中的内容就以标题的形式显示了。

显示效果如下：

属性

HTML标签可以拥有属性。属性提供了有关 HTML 元素的 更多的信息 。我们只能在开始标签中，加入属性。通常以名称=值 成对的形式出现， 比如：name=‘value’ 。例如：
```
<h1 align="center">今天是个好日子!!!</h1>
1
```
显示效果如下：

1.2 入门案例

 1.2.1 案例效果

 1.2.2 实现步骤
1. 在项目下的web目录中新建一个HTML文件
2. 修改 </code>标签中的内容：01-入门案例</li><li>在<code><body></code>标签中编写一个<code><h1></code>标签，内容为：这是我的第一个HTML入门案例</li><li>在 <code><h1></code> 标签中指定属性align，属性值为center</li><li>通过浏览器打开查看页面</li></ol> <h3><a name="t7"></a><a id="13__39"></a>1.3 总结</h3> <ul><li>HTML是一种标记语言，用来组织页面，使用元素和属性。</li><li>这个元素的主要部分有：</li></ul> <ol><li>元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。</li><li>开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。</li><li>结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。</li><li>内容（Content）：元素的内容，本例中就是所输入的文本本身。</li><li>属性（Attribute）：标签的附加信息。</li></ol> <ul><li>在学习HTML时，要抓住两个方面：</li></ul> <ol start="6"><li>掌握标签所代表的含义。</li><li>掌握在标签中加入的属性的含义。</li></ol> <h2><a name="t8"></a><a id="2_HTML__52"></a>2 HTML 基本语法</h2> <h3><a name="t9"></a><a id="21_HTML__53"></a>2.1 HTML 的注释</h3> <ol><li>什么是注释</li></ol> <ul><li>注释是用于解释说明程序的</li></ul> <ol start="2"><li>注释的格式</li></ol> <pre data-index="2" 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=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <ol start="3"><li>注释特点</li></ol> <ul><li>被注释掉的标签，不会被浏览器解析</li></ul> <h3><a name="t10"></a><a id="22_HTML__63"></a>2.2 HTML 标签</h3> <ol><li>标签的分类</li></ol> <ul><li>开始和结束标签 <code><h1></h1> </code></li><li>自闭和标签 <code> <hr/></code></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;"> <h1>一级标题</h1> <br/> <hr/> <h2>二级标题</h2> <div class="hljs-button signin active" 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></ul></pre> <img src="https://1000bd.com/contentImg/2024/04/22/99b8b1b7ee00a8d8.png" alt="在这里插入图片描述"> <ol start="2"><li>标签的嵌套</li></ol> <ul><li>正确的嵌套格式：<code><h1>文本</h1></code></li><li>错误的嵌套格式：<code><h1>文本</h1></code></li></ul> <pre data-index="4" class="set-code-show prettyprint"><code class="prism language-coffeescript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><h1>一级标题</h1> <br/> <hr/> <h2><u>二级标题</u></h2> <div class="hljs-button signin active" 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></ul></pre> <img src="https://1000bd.com/contentImg/2024/04/22/ddfb2c64016aeda4.png" alt="在这里插入图片描述"> <ol start="3"><li>块级元素和行内元素</li></ol> <ul><li>块级元素：在页面中以块的形式展现，自己独占一行，后面的内容会自动换行。 <code> <hr> <div></code></li><li>行内元素：在页面中以行的形式展现，不会换行。 <code> </code></li></ul> <ol start="4"><li>div 和 span</li></ol> <ul><li><code><div></code> 是一个通用的内容容器，并没有任何特殊语义。它可以被用来对其它元素进行分组，一般用于样式化相关的需求。它是一个块级元素。</li><li><code> </code> 是短语内容的通用行内容器，并没有任何特殊语义。它可以被用来编组元素以达到某种样式。它是一个行内元素。</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;">  <div>一个div</div> <div>两个div</div> <span>一个span</span> <span>两个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=""><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> <img src="https://1000bd.com/contentImg/2024/04/22/4b099c0e1c144a1d.png" alt="在这里插入图片描述"> <blockquote> 注意：div和span在页面布局中有重要作用。 </blockquote> <h3><a name="t11"></a><a id="23_HTML__106"></a>2.3 HTML 的属性</h3> <ol><li>什么是属性</li></ol> <ul><li>属性可以提供一些额外的，这些信息不会直接显示在内容中，但可以改变标签的样式或提供数据使用</li></ul> <ol start="2"><li>定义格式</li></ol> <ul><li>属性名=属性值</li></ul> <ol start="3"><li>属性的规范</li></ol> <ul><li>同一个标签中属性的名称必须唯一</li><li>不区分大小写，建议使用小写</li><li>属性值可以使用单引号或双引号括起来，建议使用双引号</li></ul> <ol start="4"><li>常用属性 <img src="https://1000bd.com/contentImg/2024/04/22/21e864a545569c6c.png" alt="- class："></li></ol> <pre data-index="6" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">  <div class="cls">第一个div</div> <div class="cls">第二个div</div> <div id="1">第三个div</div> <div id="2">第四个div</div> <div style="background-color: aqua">第五个div</div> <div class="hljs-button signin active" 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> <img src="https://1000bd.com/contentImg/2024/04/22/eafab34b67a0928a.png" alt="在这里插入图片描述"> <h3><a name="t12"></a><a id="24_HTML__127"></a>2.4 HTML 的特殊字符</h3> <ol><li>说什么是特殊字符</li></ol> <ul><li>在HTML中，字符 <code><</code>, <code>></code>,<code>"</code>,<code>'</code> 和 <code>&</code> 是特殊字符. 它们是HTML语法自身的一部分</li></ul> <ol start="2"><li>常用的特殊字符 <img src="https://1000bd.com/contentImg/2024/04/22/6fdb572d8c1e2649.png" alt="在这里插入图片描述"></li></ol> <pre data-index="7" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> 本网站有特殊解释权<br/> 本网站有 特殊解释权 <div class="hljs-button signin active" 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> <img src="https://1000bd.com/contentImg/2024/04/22/3483fa30bf181325.png" alt="在这里插入图片描述"> <h2><a name="t13"></a><a id="3_HTML___139"></a>3 HTML 案例新闻文本</h2> <h3><a name="t14"></a><a id="31__140"></a>3.1 案例效果</h3> <img src="https://1000bd.com/contentImg/2024/04/22/a5c1404b35cc4c4c.png" alt="在这里插入图片描述"> <h3><a name="t15"></a><a id="32__142"></a>3.2 案例分析</h3> <h4><a name="t16"></a><a id="321_div__143"></a>3.2.1 div 样式布局</h4> <ul><li>在 <code><head></code>标签中，通过<code><style></code>标签来控制样式</li><li>样式格式 基本格式</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;">格式: <style> 标签名{ 属性名:属性值; } </style> <div class="hljs-button signin active" 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> 多个属性名格式： <pre data-index="9" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><style> 标签名{ 属性名1:属性值1; 属性名2:属性值2; 属性名3:属性值3; } </style> <div class="hljs-button signin active" 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></ul></pre> div的多样式： <pre data-index="10" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><style> 标签名{ 属性名:属性值1 属性值2 属性值3; } </style> <div class="hljs-button signin active" 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> 演示： <pre data-index="11" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>样式演示</title> <style> div{ /*边框*/ border: 1px solid pink; /*宽度*/ width: 60%; /*高度*/ height: 500px; /*外边框边距*/ margin: auto; } </style> </head> <body> <div>第一个div</div> </body> </html> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></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><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></ul></pre> <img src="https://1000bd.com/contentImg/2024/04/22/3fb12a012e3f20a1.png" alt="在这里插入图片描述"> <h4><a name="t17"></a><a id="322__207"></a>3.2.2 文本标签</h4> 使用文本内容标签设置文字基本样式 <img src="https://1000bd.com/contentImg/2024/04/22/90d6484a8a0367a7.png" alt="在这里插入图片描述"> <h3><a name="t18"></a><a id="33__210"></a>3.3 实现步骤</h3> <ol><li>创建初始页面。</li><li>使用div标签划分区域（标题，作者，副标题，正文），设置div样式。</li><li>编辑正文。 <ol><li>使用h1标签加入标题。</li><li>使用em标签加入作者信息。</li><li>使用hr标签加入分割线。</li><li>使用h3标签加入副标题。</li><li>使用p标签加入正文。</li><li>使用ol标签，li标签加入列表信息。</li><li>使用strong标签，加入文字强调效果。</li></ol> </li></ol> <h2><a name="t19"></a><a id="4_HTML_222"></a>4 HTML案例-头条页面</h2> <h3><a name="t20"></a><a id="41__223"></a>4.1 案例效果</h3> <img src="https://1000bd.com/contentImg/2024/04/22/5091e2db9cd259ae.png" alt="在这里插入图片描述"> <h3><a name="t21"></a><a id="42__225"></a>4.2 案例分析</h3> <h4><a name="t22"></a><a id="421_div_226"></a>4.2.1 <a href="https://so.csdn.net/so/search?q=div%E5%B8%83%E5%B1%80&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=div%E5%B8%83%E5%B1%80&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"div布局\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=div%E5%B8%83%E5%B1%80&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"div布局\"}"}" data-tit="div布局" data-pretit="div布局">div布局</a>的进阶</h4> <img src="https://1000bd.com/contentImg/2024/04/22/dc43dad45378363f.png" alt="在这里插入图片描述"> 想要将div布局成案例效果，首先需要对多个div进行区分，再分别设置每一个div自身的效果。 <h5><a id="1div_class_229"></a>1）div 的class值</h5> 首先编写六个div，设置边框样式 <pre data-index="12" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <style> div{ border: 1px solid pink; } </style>  <div>top</div>  <div>navbar</div>  <div>left</div>  <div>center</div>  <div>right</div>  <div>footer</div> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></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><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></ul></pre> <img src="https://1000bd.com/contentImg/2024/04/22/d2246d58630a4490.png" alt="在这里插入图片描述"> 发现通过div设置的样式都是一致的，无法个性化布局。如何区分不同的div呢？ 使用class的值，格式： <pre data-index="13" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">.class值{ 属性名:属性值; } <标签名 class="class值"> 提示: class是自定义的值 <div class="hljs-button signin active" 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> 修改后 <pre data-index="14" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><style> div{ border: 1px solid pink; } .left{ width: 20%; float: left; height: 500px; } .center{ width: 59%; float: left; height: 500px; } .right{ width: 20%; float: left; height: 500px; } </style>  <div>top</div>  <div>navbar</div>  <div class="left">left</div>  <div class="center">center</div>  <div class="right">right</div>  <div>footer</div> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></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><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></ul></pre> 演示 <img src="https://1000bd.com/contentImg/2024/04/22/46ed40b144c58b61.png" alt="在这里插入图片描述"> 所以，使用class属性值，可以帮助我们区分div，更加精确的设置标签的样式。 <h4><a name="t23"></a><a id="422__317"></a>4.2.2 图片标签</h4> <img src="https://1000bd.com/contentImg/2024/04/22/9bee11e6a404e95d.png" alt="在这里插入图片描述"> 其他属性 <img src="https://1000bd.com/contentImg/2024/04/22/7b64a34b1f141fde.png" alt="在这里插入图片描述"> <h4><a name="t24"></a><a id="423__321"></a>4.2.3 超链接</h4> <img src="https://1000bd.com/contentImg/2024/04/22/2e4f4991c8235725.png" alt="在这里插入图片描述"> 去掉下划线 根据某些样式的布局需求，去除下划线更为美观。 <pre data-index="15" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">a { text-decoration:none; // none 表示不显示 } <div class="hljs-button signin active" 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="t25"></a><a id="5_HTML_331"></a>5 HTML案例-登录页面</h2> <h3><a name="t26"></a><a id="51__332"></a>5.1 案例效果</h3> <img src="https://1000bd.com/contentImg/2024/04/22/5443fcb834417353.png" alt="在这里插入图片描述"> <h3><a name="t27"></a><a id="52__334"></a>5.2 案例分析</h3> <h4><a name="t28"></a><a id="521__335"></a>5.2.1 表单标签</h4> <img src="https://1000bd.com/contentImg/2024/04/22/7b369772490dbee8.png" alt="在这里插入图片描述"> 举例： <pre data-index="16" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><form > //表单元素 </form> <div class="hljs-button signin active" 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> 表单的属性 <img src="https://1000bd.com/contentImg/2024/04/22/ccad782a264236b4.png" alt="在这里插入图片描述"> 举例： <pre data-index="17" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <form action="/web/login" method="get"> </form>  <form action="/web/reg" method="post"> </form> <div class="hljs-button signin active" 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></ul></pre> GET与POST说明： <code>post</code>：指的是 HTTP <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5" rel="nofollow">POST 方法</a>；表单数据会包含在表单体内然后发送给服务器。 <code>get</code>：指的是 HTTP <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3" rel="nofollow">GET 方法</a>；表单数据会附加在 <code>action</code> 属性的URI中，并以 ‘?’ 作为分隔符，然后这样得到的 URI 再发送给服务器。. GET与POST对比： <img src="https://1000bd.com/contentImg/2024/04/22/3afa1c567c5fc780.png" alt="在这里插入图片描述"> <h4><a name="t29"></a><a id="522__364"></a>5.2.2 表单元素入门</h4> 表单元素指的是 input 元素、复选框、下拉框、提交按钮等 <img src="https://1000bd.com/contentImg/2024/04/22/4c70e4ac0a0586b8.png" alt="在这里插入图片描述"> <h5><a id="1_367"></a>1）简单的文本输入框</h5> <ul><li>label 标签：表单的说明 <ul><li>for 属性值：匹配 input 标签的 id 属性值</li></ul> </li><li>input 标签：输入条件 <ul><li>type 属性：表示输入类型，text值为普通文本框</li><li>id 属性：表示标签唯一标识</li><li>name 属性：表示标签名称</li><li>value 属性：表示标签数据</li></ul> </li></ul> 代码实现 <pre data-index="18" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><form action="" method="post"> <label for="username">Username:</label> <input type="text" id="username" name="username" value="tom"> </form> <div class="hljs-button signin active" 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></ul></pre> <img src="https://1000bd.com/contentImg/2024/04/22/adb8a1c49c5b11cd.png" alt="在这里插入图片描述"> <h5><a id="2_385"></a>2）提交用户名的表单</h5> <ul><li>button 标签：表示按钮 <ul><li>type 属性：表示按钮类型，submit值为提交按钮</li></ul> </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;"><form action="" method="post"> <label for="username">Username:</label> <input type="text" id="username" name="username" value="tom"> <button type="submit" >login</button> </form> <div class="hljs-button signin active" 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> <img src="https://1000bd.com/contentImg/2024/04/22/23544f788ce30f6c.png" alt="在这里插入图片描述"> <h4><a name="t30"></a><a id="523__396"></a>5.2.3 关于属性值</h4> <h5><a id="1NAME__VALUE__397"></a>1）NAME 和 VALUE 属性</h5> <img src="https://1000bd.com/contentImg/2024/04/22/99e21a84e5ca4ae0.png" alt="在这里插入图片描述"> 使用方式： 以name属性值作为键，value属性值作为值，构成键值对提交到服务器，多个键值对浏览器使用<code>&</code>进行分隔。 举例： <img src="https://1000bd.com/contentImg/2024/04/22/1e54f229e5a98329.png" alt="在这里插入图片描述"> <h5><a id="2TYPE__404"></a>2）TYPE 属性</h5> <ul><li>input 标签的 type 属性 <ul><li>基本的文本属性 <img src="https://1000bd.com/contentImg/2024/04/22/8849ee2abbbd25e4.png" alt="在这里插入图片描述"> 举例：</li></ul> </li></ul> <pre data-index="20" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <form action="#" method="get"> <label for="username">Username:</label> <input type="text" id="username" name="username"> <br/> <label for="password">Password:</label> <input type="password" id="password" name="password"><br/> <label for="email">Email: </label> <input type="email" id="email" name="email"><br/> <button type="submit"> login</button> </form> <div class="hljs-button signin active" 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> <img src="https://1000bd.com/contentImg/2024/04/22/0d2329804f0f8945.png" alt="在这里插入图片描述"> <ul><li>单选多选属性 <img src="https://1000bd.com/contentImg/2024/04/22/fb73958bc8e34f63.png" alt="在这里插入图片描述"> 举例：</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;"><form action="#" method="get"> <label for="gender">性别:</label> <input type="radio" id="gender" name="gender" value="boy"/>男 <input type="radio" name="gender" value="girl" checked="checked"/>女 <hr/> <label for="hobby">爱好: </label> <input type="checkbox" id="hobby" name="hobby" value="sport"/> 体育 <input type="checkbox" name="hobby" value="tech"/> 科技 <input type="checkbox" name="hobby" value="fun" /> 娱乐 <input type="checkbox" name="hobby" value="video" checked="checked"/> 短视频 </form> <div class="hljs-button signin active" 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><li style="color: rgb(153, 153, 153);">12</li></ul></pre> <img src="https://1000bd.com/contentImg/2024/04/22/4c05b7f90b38e11d.png" alt="在这里插入图片描述"> <ul><li>按钮属性 <img src="https://1000bd.com/contentImg/2024/04/22/a52c13a8d486292f.png" alt="在这里插入图片描述"></li><li>HTML5 新增的 type 值 <img src="https://1000bd.com/contentImg/2024/04/22/0020442969387ba1.png" alt="在这里插入图片描述"> <img src="https://1000bd.com/contentImg/2024/04/22/57164fbdd1241e9a.png" alt="在这里插入图片描述"></li><li>button 标签的 type 属性 <img src="https://1000bd.com/contentImg/2024/04/22/a09d2e7c92d1dc62.png" alt="在这里插入图片描述"></li></ul> <h5><a id="3HTML5__452"></a>3）HTML5 新增属性</h5> <img src="https://1000bd.com/contentImg/2024/04/22/1b3804e2ab432291.png" alt="在这里插入图片描述"> <h4><a name="t31"></a><a id="524__454"></a>5.2.4 更多表单元素</h4> <img src="https://1000bd.com/contentImg/2024/04/22/772144e539e2214b.png" alt="在这里插入图片描述"> select举例： <pre data-index="22" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><form action="#" method="post"> <label for="pet-select">Choose a pet:</label> <select name="pets" id="pet-select"> <option value="">--Please choose an option--</option> <option value="dog">Dog</option> <option value="cat">Cat</option> <option value="hamster">Hamster</option> <option value="parrot">Parrot</option> <option value="spider">Spider</option> <option value="goldfish">Goldfish</option> </select> </form> <div class="hljs-button signin active" 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><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></ul></pre> <img src="https://1000bd.com/contentImg/2024/04/22/aaec50013d134f11.png" alt="在这里插入图片描述"> textarea举例： <pre data-index="23" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><textarea name="textarea" rows="10" cols="50">Write something here</textarea> <div class="hljs-button signin active" 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> <img src="https://1000bd.com/contentImg/2024/04/22/73d156634689ae06.png" alt="在这里插入图片描述"> fieldset举例： <pre data-index="24" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><form action="#" method="post"> <fieldset> <legend>是否同意</legend> <input type="radio" id="radio_y" name="agree" value="y"> <label for="radio_y">同意</label> <input type="radio" id="radio_n" name="agree" value="n"> <label for="radio_n">不同意</label> </fieldset> </form> <div class="hljs-button signin active" 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></ul></pre> <img src="https://1000bd.com/contentImg/2024/04/22/71793e467288dcaa.png" alt="在这里插入图片描述"> <h3><a name="t32"></a><a id="53__497"></a>5.3 实现步骤</h3> <ol><li>设置背景图。</li><li>基本上下两部分布局。</li><li>实现上部（图片）</li><li>实现下部（表单）</li><li>实现页面跳转，从案例3跳转到案例2。</li></ol> </div> </div> </li> <li class="list-group-item ul-li"> 相关阅读: <a href="/Article/Index/1390417">Meta Hacker Cup 2023 Round 1 题解</a> <a href="/Article/Index/867628">分布式 ID</a> <a href="/Article/Index/1117791">c#入参使用引用类型为啥要加ref?</a> <a href="/Article/Index/1111290">再度入榜 | 中睿天下入选《中国网络安全企业100强》</a> <a href="/Article/Index/1042973">压力测试工具----JMeter</a> <a href="/Article/Index/982976">SD-WAN是零售业的创收者</a> <a href="/Article/Index/653660">HCM 初学 ( 三 ) - 快速输入PA70、PA71 浏览员工信息PA10</a> <a href="/Article/Index/653895">＜数据结构＞停车场管理系统，利用栈和队列实现，包含纯c语言版和C++版的全注释源码</a> <a href="/Article/Index/640990">计网 | 形象理解路由协议RIP、OSPF、BGP</a> <a href="/Article/Index/826767">JSP基础知识</a> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/m0_59620032/article/details/127853459 </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"> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> </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"> <a href="/Article/Index/888177">十款代码表白小特效一个比一个浪漫赶紧收藏起来吧！！！</a> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> </li> </ul> </div> </div> </div>     <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;" />京公网安备 11010502049817号</a> </div> </div> </div> </div> </nav>   <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script>   </body> </html>

目录

1 HTML快速入门

1.1 HTML 的介绍

1.1.1 HTML 的组成

标签

标签表示标题，那么，我们可以使用开始标签和结束标签包围文本内容，这样其中的内容就以标题的形式显示了。 显示效果如下：

属性

1.2 入门案例

1.2.1 案例效果

1.2.2 实现步骤

标签表示标题，那么，我们可以使用开始标签和结束标签包围文本内容，这样其中的内容就以标题的形式显示了。

显示效果如下：