前端三剑客第一剑—Html基础标签讲解

前端三剑客第一剑—Html基础标签讲解
Web资源

所以Web资源，就是后端写好的一些资源(一般是存放在网络中其他主机上的文件，我们可以理解成服务器)

由这些来供我们前端通过网络拿取(一般通过应用层的HTTP协议)，我们拿到这些资源，咔咔在我们的前端展示(前端例如浏览器)，用户可以通过这些资源获取信息或者跳转到下一个页面，重复获取新的资源。

接下来是我的灵魂画图，我相信诸位能懂。

基本标签

标签各式各样，就相当于HTML的代码体，不同标签有不同的作用，我们甚至可以在标签中穿插各种属性。

HTML结构主体

主体由这么几部分组成：

整个HTML的根元素
```
<html lang="en">
   (此处写关于文档的几乎一切内容)
html>
```
```
<head>
        <meta charset="UTF-8">
        <title>Titletitle>
head>
```
保存文档的一些元信息(元信息可以理解成文档的属性，并不需要对外部可见)

表示字符集格式

就是文档标题，保存在这个位置：</p> <h2 id="%E2%80%8B%E7%BC%96%E8%BE%91%3Ch%3E"><a name="t5"></a><img alt="" height="417" src="https://1000bd.com/contentImg/2022/08/03/034211827.png" ><h></h2> <p>标题标签，依次向下越来越小</p> <pre data-index="2"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">h1</span>></span><span class="hljs-tag"></<span class="hljs-name">h1</span>></span></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h2 id="%3Cp%3E"><a name="t6"></a><p></h2> <p>段落标签，<span style="color:#fe2c24;">并不是说他写在哪个标题底下就是哪个段落</span></p> <pre data-index="3"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h2 id="%3Cimg%3E%C2%A0"><a name="t7"></a><img> </h2> <p>图片标签，标签中可以描述图片的描述信息，图片来源(绝对路径，相对路径，超级链接)</p> <pre data-index="4"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:712px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:300px;"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"http://127.0.0.1:8080/boy.jpg"</span> <span class="hljs-attr">alt</span> = <span class="hljs-string">"铭哥全路径"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height:500px;"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"boy.jpg"</span> <span class="hljs-attr">alt</span> = <span class="hljs-string">"铭哥相对路径"</span>></span></div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h2 id="%3Cbr%3E"><a name="t8"></a><br></h2> <p>理解为换行标签，单独使用即可，不需要跟结尾标签</p> <pre data-index="5"><code class="language-html hljs language-xml">XXXXX<span class="hljs-tag"><<span class="hljs-name">br</span>></span>YYYYY</code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h2 id="%E5%9B%9B%E7%A7%8D%E6%96%87%E5%AD%97%E6%A0%B7%E5%BC%8F"><a name="t9"></a>四种文字样式</h2> <h3 id="%E5%8A%A0%E7%B2%97"><a name="t10"></a>加粗</h3> <p>可以是<b></p> <pre data-index="6"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">b</span>></span><span class="hljs-tag"></<span class="hljs-name">b</span>></span></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>也可以是<strong></p> <pre data-index="7"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">strong</span>></span>年轻时诋毁铭哥<span class="hljs-tag"></<span class="hljs-name">strong</span>></span></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h3 id="%E6%96%9C%E4%BD%93"><a name="t11"></a>斜体</h3> <p>可以是<i></p> <pre data-index="8"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>也可以是<em></p> <pre data-index="9"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">em</span>></span>老年时消费铭哥<span class="hljs-tag"></<span class="hljs-name">em</span>></span></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h3 id="%E4%B8%AD%E5%88%92%E7%BA%BF"><a name="t12"></a>中划线</h3> <p>可以是<s></p> <pre data-index="10"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">s</span>></span><span class="hljs-tag"></<span class="hljs-name">s</span>></span></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>也可以是<del></p> <pre data-index="11"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">del</span>></span>年轻时仰慕铭哥<span class="hljs-tag"></<span class="hljs-name">del</span>></span></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h3 id="%E4%B8%8B%E5%88%92%E7%BA%BF"><a name="t13"></a>下划线</h3> <p>可以是<u></p> <pre data-index="12"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">u</span>></span><span class="hljs-tag"></<span class="hljs-name">u</span>></span></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>也可以是<ins></p> <pre data-index="13"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">ins</span>></span><span class="hljs-tag"></<span class="hljs-name">ins</span>></span></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h2 id="%E8%B6%85%E9%93%BE%E6%A0%87%E7%AD%BE%3Ca%20herf%3E"><a name="t14"></a>超链标签<a herf></h2> <pre data-index="14"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://github.com/linus"</span>></span>黄三明的代码<span class="hljs-tag"></<span class="hljs-name">a</span>></span></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h3 id="target%EF%BC%8C%E5%8F%AF%E4%BB%A5%E4%BD%BF%E9%A1%B5%E9%9D%A2%E6%96%B0%E5%BB%BA%E8%B7%B3%E8%BD%AC%EF%BC%8C%E8%80%8C%E9%9D%9E%E5%8E%9F%E5%9C%B0%E8%B7%B3%E8%BD%AC%EF%BC%8C%E4%B9%9F%E5%B0%B1%E6%98%AF%E8%AF%B4%E4%BC%9A%E7%94%9F%E6%88%90%E6%96%B0%E7%9A%84%E9%A1%B5%E9%9D%A2%E6%9D%A5%E6%8C%91%E8%BD%AC"><a name="t15"></a>target，可以使页面新建跳转，而非原地跳转，也就是说会生成新的页面来挑转</h3> <pre data-index="15"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"http://127.0.0.1:8080/about-blank.html"</span>></span></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h2 id="%E5%BB%BA%E8%A1%A8%3Ctable%3E"><a name="t16"></a>建表<table></h2> <pre data-index="16"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">table</span> <span class="hljs-attr">border</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"border-collapse: collapse;"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">thead</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> 放表头内容</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">thead</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">tbody</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> 放主题内容</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">tbody</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">table</span>></span></div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>其实和html的整体框架差不多</p> <p><img alt="" height="274" src="https://1000bd.com/contentImg/2022/08/03/034211923.png" ></p> <h3 id="%C2%A0%3Ctr%3E%3Cth%3E"><a name="t17"></a> <tr><th></h3> <p>tr主要是一个开启一行内容的作用，th是标题标签</p> <pre data-index="17"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">tr</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>项目编写时间<span class="hljs-tag"></<span class="hljs-name">th</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>项目耗时<span class="hljs-tag"></<span class="hljs-name">th</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>项目名称<span class="hljs-tag"></<span class="hljs-name">th</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>项目描述<span class="hljs-tag"></<span class="hljs-name">th</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>我的角色<span class="hljs-tag"></<span class="hljs-name">th</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">tr</span>></span></div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><tr><td></p> <p>td是段落标签，不演示了就</p> <h2 id="%E5%88%97%E8%A1%A8%E6%A0%87%E7%AD%BE"><a name="t18"></a>列表标签</h2> <h3 id="%3Col%3E%E6%9C%89%E5%BA%8F%E5%88%97%E8%A1%A8"><a name="t19"></a><ol>有序列表</h3> <p>开启一个有序列表，默认排序，需要会在前方显示</p> <h3 id="%3Cul%3E%E6%97%A0%E5%BA%8F%E5%88%97%E8%A1%A8"><a name="t20"></a><ul>无序列表</h3> <p>无序列表</p> <h3 id="%3Cli%3E%E4%B8%80%E8%A1%8C%E5%86%85%E5%AE%B9"><a name="t21"></a><li>一行内容</h3> <p>配合ol或者ul使用，类似这种</p> <pre data-index="18"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">ul</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>画画<span class="hljs-tag"></<span class="hljs-name">li</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>跳舞<span class="hljs-tag"></<span class="hljs-name">li</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>唱歌<span class="hljs-tag"></<span class="hljs-name">li</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>写前端<span class="hljs-tag"></<span class="hljs-name">li</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>刷 OJ<span class="hljs-tag"></<span class="hljs-name">li</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>写 Java<span class="hljs-tag"></<span class="hljs-name">li</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">ul</span>></span></div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h2 id="%E5%88%86%E5%89%B2%E6%A0%87%E7%AD%BE"><a name="t22"></a>分割标签</h2> <h3 id="%3Cdiv%3E%E5%9D%97%E7%BA%A7%E5%88%86%E5%89%B2"><a name="t23"></a><div>块级分割</h3> <p>用于将标签分割成一个个部分，担任分块的作用，后面一般会<span style="color:#fe2c24;">写一个class属性代表块</span></p> <pre data-index="19"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"个人评价"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">h2</span>></span>个人评价<span class="hljs-tag"></<span class="hljs-name">h2</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>内向，活泼，不爱说话，喜欢唱歌、跳舞。<span class="hljs-tag"></<span class="hljs-name">p</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">div</span>></span></div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h3 id="%3Cspan%3E%E5%86%85%E8%81%94%E5%88%86%E5%89%B2"><a name="t24"></a><span>内联分割</h3> <p>可以说是，分割一个个小的字段吧，类似这种</p> <pre data-index="20"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:742px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">ol</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span>></span>2000 - 2006<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-left: 10px;"</span>></span>小葵花幼儿园<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span>></span>2006 - 2012<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-left: 10px;"</span>></span>小葵花小学<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span>></span>2012 - 2015<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-left: 10px;"</span>></span>小葵花初中<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span>></span>2015 - 2018<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-left: 10px;"</span>></span>小葵花高中<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span>></span>2018 - 2022<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-left: 10px;"</span>></span>小葵花大学<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">ol</span>></span></div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h1 id="%3Cform%3E%E4%B8%BB%E4%BD%93"><a name="t25"></a><form>主体</h1> <p>form标签大多负责用户提交内容，用来与用户交互。</p> <p>主体中我们可以设置几个属性，包括：</p> <h2 id="%E4%B8%BB%E4%BD%93%E5%B1%9E%E6%80%A7"><a name="t26"></a>主体属性</h2> <p>action — 提交资源的路径，默认为当前路径</p> <p>method — 采用的HTTP协议方式，默认为get</p> <p>enctype — 编码格式</p> <pre data-index="21"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/应该会404"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"get"</span> <span class="hljs-attr">enctype</span>=<span class="hljs-string">"multipart/form-data"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">form</span>></span></div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <hr> <h1 id="%3Cinput%3E%E5%8F%8A%E5%85%B6%E5%86%85%E9%83%A8%E6%A0%87%E7%AD%BE"><a name="t27"></a><input>及其内部标签</h1> <p><span style="color:#fe2c24;"><strong>作用于form内部</strong></span></p> <p><span style="color:#fe2c24;"><strong>input标签是不需要闭合标签的</strong></span></p> <h2 id="type%E5%9F%BA%E6%9C%AC%E5%B1%9E%E6%80%A7"><a name="t28"></a>type基本属性</h2> <p>input内部的type属性为以下几种：</p> <h3 id="text"><a name="t29"></a>text</h3> <p>最普通的文本格式</p> <pre data-index="22"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"aaa"</span>></span></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h3 id="hidden"><a name="t30"></a>hidden</h3> <p>隐藏起来的文本，用户看不到</p> <pre data-index="23"><code class="language-html hljs language-xml"> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"hidden"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"yyy"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"这个是用户看不到的"</span>></span></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h3 id="password"><a name="t31"></a>password</h3> <p>密码文本，输入的文本是看不到具体内容的，会隐藏具体数字</p> <pre data-index="24"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"password"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"bbb"</span>></span> </code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h3 id="radio"><a name="t32"></a>radio</h3> <p>单选框</p> <pre data-index="25"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"ccc"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"本科"</span>></span> 我是单选框 </code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h3 id="checkbox"><a name="t33"></a>checkbox</h3> <p>复选框</p> <pre data-index="26"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"ddd"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"我是复选框1"</span>></span> 我是复选框</code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h2 id="%E9%99%84%E5%8A%A0%E5%B1%9E%E6%80%A7"><a name="t34"></a>附加属性</h2> <h3 id="disabled"><a name="t35"></a>disabled</h3> <p>不允许修改常用于文本框 (value的值显示在文本框中)</p> <pre data-index="27"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"这里不允许你修改"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"zzz"</span> <span class="hljs-attr">disabled</span>></span></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h3 id="readonly"><a name="t36"></a>readonly</h3> <p>只可读常用于文本框 (value的值显示在文本框中)</p> <pre data-index="28"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"xxx"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"这个不允许修改"</span> <span class="hljs-attr">readonly</span>></span></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><img alt="" height="94" src="https://1000bd.com/contentImg/2022/08/03/034212065.png" > 上图中是disabled和readonly的一个对比</p> <h3 id="placeholder"><a name="t37"></a>placeholder</h3> <p>提示用户填写文本的属性，<span style="color:#fe2c24;"><strong>多用于文本输入框</strong></span></p> <p>我们在此属性添加的文本内容会在用户填写之前显示在文本框中 </p> <pre data-index="29"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"aaa"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"这里请输入用户名"</span>></span></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h3 id="%E2%80%8B%E7%BC%96%E8%BE%91"><a name="t38"></a><img alt="" height="69" src="https://1000bd.com/contentImg/2022/08/03/034212266.png" ></h3> <h3 id="check"><a name="t39"></a>check</h3> <p>多用于单选框和复选框，代表默认勾选或者不勾选</p> <pre data-index="30"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"ccc"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"本科"</span> <span class="hljs-attr">checked</span>></span> 本科</code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h2 id="name%E4%BB%A5%E5%8F%8Avalue"><a name="t40"></a>name以及value</h2> <h3 id="name%E7%9A%84%E4%BD%9C%E7%94%A8%E7%82%B9"><a name="t41"></a>name的作用点</h3> <p>name主要是命名作用</p> <p><span style="color:#fe2c24;"><strong>name属性最为重要的地方表现在单选框中，因为相同name的单选框是互斥的</strong></span></p> <h3 id="value%E7%9A%84%E4%BD%9C%E7%94%A8%E7%82%B9"><a name="t42"></a>value的作用点</h3> <p><span style="color:#fe2c24;"><strong>value一般在readonly和disabled中可以被用户看到</strong></span></p> <h1><a name="t43"></a><img alt="" height="94" src="https://1000bd.com/contentImg/2022/08/03/034212065.png" ></h1> <hr> <h1 id="%E5%85%B6%E4%BB%96%E4%BD%9C%E7%94%A8%E4%BA%8Eform%E7%9A%84%E6%A0%87%E7%AD%BE"><a name="t44"></a>其他作用于form的标签</h1> <h2 id="%3Clable%3E"><a name="t45"></a><lable></h2> <p>lable简单来说就是可以在我们用户在进行页面交互时，点击文字也就相当于点击了</p> <p><img alt="" height="98" src="https://1000bd.com/contentImg/2022/08/03/034212387.png" ></p> <p> </p> <pre data-index="31"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">label</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"ccc"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"小学"</span> <span class="hljs-attr">checked</span>></span> 小学</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">label</span>></span></div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h2 id="%3Cselect%3E%E5%92%8C%3Coption%3E"><a name="t46"></a><select>和<option></h2> <p>启动select进入选择标签，我们可以建立多个option标签来填入选择的选项</p> <pre data-index="32"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"求职岗位"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Java开发"</span>></span>Java<span class="hljs-tag"></<span class="hljs-name">option</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"前端"</span>></span>Web<span class="hljs-tag"></<span class="hljs-name">option</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">select</span>></span></div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><img alt="" height="72" src="https://1000bd.com/contentImg/2022/08/03/034212556.png" ></p> <h2 id="%C2%A0%3Ctextarea%3E"><a name="t47"></a> <textarea></h2> <p>这个标签也是一种文本输入的形式</p> <p><img alt="" height="56" src="https://1000bd.com/contentImg/2022/08/03/034212738.png" ></p> <p>ps：最好不要把文字写在标签中间，这样会占用文本</p> <pre data-index="33"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">label</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> 你的爱好：</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"爱好"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">label</span>></span></div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h1 id="%3Cform%3E%E5%86%85%E5%AE%B9%E9%83%A8%E5%88%86%E5%B0%8F%E7%BB%93"><a name="t48"></a><form>内容部分小结</h1> <p>没啥可说的，一图流</p> <p><img alt="" height="304" src="https://1000bd.com/contentImg/2022/08/03/034213089.png" ></p> <p> </p> <p> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/654335">Redis原理篇——数据结构</a> <br /> <a href="/Article/Index/748907">算法竞赛进阶指南 0x57 倍增优化DP</a> <br /> <a href="/Article/Index/969137">【动态规划】按位与最大的最长子数组</a> <br /> <a href="/Article/Index/1452820">神经网络常见评价指标AUROC（AUC-ROC）、AUPR（AUC-PR）</a> <br /> <a href="/Article/Index/817432">鹰潭实验室设计要素盘点</a> <br /> <a href="/Article/Index/1146949">纵目科技冲刺科创板上市：拟募资20亿元，股东阵容强大</a> <br /> <a href="/Article/Index/902399">让我们谈谈密码哈希</a> <br /> <a href="/Article/Index/1003592">谈谈行情与就业吧！</a> <br /> <a href="/Article/Index/1284657">AGV是如何和WMS系统对接的？</a> <br /> <a href="/Article/Index/1261424">Oracle 遍历变量游标</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/weixin_65278827/article/details/126078335 </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>     <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>   <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script>   </body> </html>

Web资源

基本标签

HTML结构主体