码农知识堂 - 1000bd
Python
PHP
JS/TS
JAVA
C/C++
C#
GO
Kotlin
Swift
【JavaWeb】第一章 HTML标签
文章目录
1、B/S软件结构
2、前端的开发流程
3、网页的组成部分
4、HTML简介
5、新建html文件
6、html文件的书写规范
7、html标签的语法
8、常用的html标签
8.1 字体标签：`
`
8.2 标题标签：`
`到`
`
8.3 超链接标签：`
`
8.4 列表标签`
`和`
`
8.5 图片标签`
`
8.6 表格标签`
`
8.7 内嵌页面标签`
`</a></li><li><a href="#88__240" rel="nofollow" target="_self">8.8 特殊字符</a></li><li><a href="#89_form_254" rel="nofollow" target="_self">8.9 表单标签`<form>`</a></li><li><a href="#810_div_span_p_437" rel="nofollow" target="_self">8.10 其他标签`<div> <span> <p>`</a></li></ul> </li></ul> </div> <p></p> <p>JavaWeb学习：<br> <img src="https://1000bd.com/contentImg/2024/04/30/a26d3f2b54fdab11.png" alt="在这里插入图片描述"></p> <h2><a name="t1"></a><a id="1BS_5"></a>1、B/S软件结构</h2> <p>C/S结构，即Client - -Server客户端服务端结构，而B/S结构，即Browser - -Server浏览器服务器结构<br> <img src="https://1000bd.com/contentImg/2024/04/30/a4dac9da0a424181.png" alt="在这里插入图片描述"></p> <h2><a name="t2"></a><a id="2_9"></a>2、前端的开发流程</h2> <p><img src="https://1000bd.com/contentImg/2024/04/30/d9fcb59dd3f7626b.png" alt="在这里插入图片描述"></p> <h2><a name="t3"></a><a id="3_11"></a>3、网页的组成部分</h2> <ul><li><strong>内容</strong>：即在页面中看到的数据，使用html展示</li><li><strong>表现</strong>：指这些内容在页面上的展现形式，比如布局、颜色、大小等，使用CSS完成</li><li><strong>行为</strong>：指页面元素与输入设备的交互的相应，通过JavaScript实现</li></ul> <h2><a name="t4"></a><a id="4HTML_17"></a>4、HTML简介</h2> <p>全称<a href="https://so.csdn.net/so/search?q=Hyper&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=Hyper&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"Hyper\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=Hyper&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"Hyper\"}"}" data-tit="Hyper" data-pretit="hyper">Hyper</a> Text Markup Language，即超文本标记语言。HTML通过标签来标记要显示的网页中的各个部分，从而告诉浏览器怎么显示其中的内容。</p> <h2><a name="t5"></a><a id="5html_21"></a>5、新建html文件</h2> <ul><li> <p>先新建工程project<br> <img src="https://1000bd.com/contentImg/2024/04/30/cbd6946d4b1ce089.png" alt="在这里插入图片描述"></p> </li><li> <p>再工程下面创建html文件<br> <img src="https://1000bd.com/contentImg/2024/04/30/abb5198bc6609532.png" alt="在这里插入图片描述"><br> <img src="https://1000bd.com/contentImg/2024/04/30/ae01c4284a1a4403.png" alt="在这里插入图片描述"></p> </li><li> <p>选择运行的浏览器<br> <img src="https://1000bd.com/contentImg/2024/04/30/ef024ff0a363ef20.png" alt="在这里插入图片描述"><br> <img src="https://1000bd.com/contentImg/2024/04/30/43999f3248718851.png" alt="在这里插入图片描述"></p> </li></ul> <h2><a name="t6"></a><a id="6html_34"></a>6、html文件的书写规范</h2> <pre data-index="0" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span>html<span class="token operator">></span>表示整个html页面的开始 <span class="token operator"><</span>head<span class="token operator">></span> 头信息 <span class="token operator"><</span>tittle<span class="token operator">></span>标题<span class="token operator"><</span><span class="token operator">/</span>tittle<span class="token operator">></span> 标题 <span class="token operator"><</span><span class="token operator">/</span>head<span class="token operator">></span> <span class="token operator"><</span>body<span class="token operator">></span> 页面主题内容 <span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>html<span class="token operator">></span> 表示整个html页面的结束 <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.984061;"><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-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><!-- 这是一条注释 --> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.984061;"><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2024/04/30/94a433a917db34d6.png" alt="在这里插入图片描述"></p> <h2><a name="t7"></a><a id="7html_57"></a>7、html标签的语法</h2> <ul><li>标签的格式</li></ul> <pre data-index="2" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><标签名>封装的数据</标签名> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.984061;"><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <ul><li>标签名对大小写不敏感，<body>和<BODY>一样</li><li>标签拥有自己的基本属性和事件属性，其中，基本属性用来修改简单的样式效果；而事件属性可以设置事件响应后的代码<br> <img src="https://1000bd.com/contentImg/2024/04/30/b476d9eca27c3548.png" alt="在这里插入图片描述"></li></ul> <pre data-index="3" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span>body<span class="token operator">></span>加背景颜色属性 <span class="token operator"><</span>body bgcolor<span class="token operator">=</span><span class="token string">"blue"</span><span class="token operator">></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.984061;"><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> <pre data-index="4" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span>body<span class="token operator">></span>标签加事件属性 <span class="token operator"><</span>body onclick<span class="token operator">=</span><span class="token string">"alert('加油啊')"</span><span class="token operator">></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.984061;"><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> <p>alert()是javaScript语言提供的一个警告框函数，它可以接受任意参数，传参就是警告框的信息。<br> <img src="https://1000bd.com/contentImg/2024/04/30/b1ad9f6ac30c4867.png" alt="在这里插入图片描述"></p> <ul><li>标签分为单标签和双标签<br> <img src="https://1000bd.com/contentImg/2024/04/30/aa5dd54f094c12a6.png" alt="在这里插入图片描述"></li><li>标签不能交叉嵌套</li></ul> <pre data-index="5" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span>div<span class="token operator">></span><span class="token operator"><</span>span<span class="token operator">></span> 努力<span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator"><</span>div<span class="token operator">></span> 错误写法： <span class="token operator"><</span>div<span class="token operator">></span><span class="token operator"><</span>span<span class="token operator">></span> 努力<span class="token operator"><</span>div<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.984061;"><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> <ul><li>标签必须闭合，不论单双标签</li></ul> <pre data-index="6" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span>div<span class="token operator">></span>加油<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>br<span class="token operator">/</span><span class="token operator">></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.984061;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> <ul><li>属性必须有值，属性值必须加引号</li></ul> <pre data-index="7" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span>font color<span class="token operator">=</span><span class="token string">"blue"</span><span class="token operator">></span>努力<span class="token operator"><</span><span class="token operator">/</span>font<span class="token operator">></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.984061;"><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <ul><li>注释标签不能嵌套</li></ul> <p>ps:<br> html代码不是很严谨，有时标签漏了没闭合，浏览器或者<a href="https://so.csdn.net/so/search?q=IJ&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=IJ&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"IJ\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=IJ&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"IJ\"}"}" data-tit="IJ" data-pretit="ij">IJ</a>也会帮忙修复，但别这样。</p> <h2><a name="t8"></a><a id="8html_112"></a>8、常用的html标签</h2> <h3><a name="t9"></a><a id="81_font_114"></a>8.1 字体标签：<code><font></code></h3> <p>font是字体标签，用来修改文本的字体、颜色、大小，相应的属性值为face、color、size</p> <pre data-index="8" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span>font color<span class="token operator">=</span><span class="token string">"red"</span> face<span class="token operator">=</span><span class="token string">"宋体"</span> size<span class="token operator">=</span><span class="token string">"10"</span><span class="token operator">></span>这是字体标签<span class="token operator"><</span><span class="token operator">/</span>font<span class="token operator">></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.984061;"><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <h3><a name="t10"></a><a id="82_h1h6_122"></a>8.2 标题标签：<code><h1></code>到<code><h6></code></h3> <p>标题标签用h1到h6，其中h1最大，h6最小。该标签拥有对齐align属性，属性值为left、center、right，即<a href="https://so.csdn.net/so/search?q=%E5%B7%A6%E5%AF%B9%E9%BD%90&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%B7%A6%E5%AF%B9%E9%BD%90&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"左对齐\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E5%B7%A6%E5%AF%B9%E9%BD%90&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"左对齐\"}"}" data-tit="左对齐" data-pretit="左对齐">左对齐</a>、居中、右对齐，默认left</p> <pre data-index="9" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span>h1<span class="token operator">></span>标题<span class="token number">1</span><span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span> <span class="token operator"><</span>h2 align<span class="token operator">=</span><span class="token string">"center"</span><span class="token operator">></span>标题<span class="token number">1</span><span class="token operator"><</span><span class="token operator">/</span>h2<span class="token operator">></span> <span class="token operator"><</span>h3<span class="token operator">></span>标题<span class="token number">1</span><span class="token operator"><</span><span class="token operator">/</span>h3<span class="token operator">></span> <span class="token operator"><</span>h4<span class="token operator">></span>标题<span class="token number">1</span><span class="token operator"><</span><span class="token operator">/</span>h4<span class="token operator">></span> <span class="token operator"><</span>h5<span class="token operator">></span>标题<span class="token number">1</span><span class="token operator"><</span><span class="token operator">/</span>h5<span class="token operator">></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.984061;"><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> <h3><a name="t11"></a><a id="83_a_134"></a>8.3 超链接标签：<code><a></code></h3> <p>超链接标签<a>有两个属性，属性href设置链接的地址。属性target设置哪个目标进行跳转，target属性值_self表示当前页面，_blank表示新开个页面去跳转</p> <pre data-index="10" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"www.baidu.com"</span><span class="token operator">></span>百度<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.984061;"><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <h3><a name="t12"></a><a id="84_ulol_141"></a>8.4 列表标签<code><ul></code>和<code><ol></code></h3> <p>列表标签分为无序列表<ul>和有序列表<ol>，o即order，其中的<li>是列表项，type属性可以修改列表项前面的符号</p> <pre data-index="11" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token comment">//加了type="none"，则截图前面的黑点就不见的</span> <span class="token operator"><</span>ul type<span class="token operator">=</span><span class="token string">"none"</span><span class="token operator">></span> <span class="token operator"><</span>li<span class="token operator">></span>甲<span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span> <span class="token operator"><</span>li<span class="token operator">></span>乙<span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span> <span class="token operator"><</span>li<span class="token operator">></span>丙<span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span> <span class="token operator"><</span>li<span class="token operator">></span>丁<span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>ul<span class="token operator">></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.984061;"><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> <p>运行：<br> <img src="https://1000bd.com/contentImg/2024/04/30/8a660a534d2beec7.png" alt="在这里插入图片描述"></p> <pre data-index="12" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span>ol<span class="token operator">></span> <span class="token operator"><</span>li<span class="token operator">></span>甲<span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span> <span class="token operator"><</span>li<span class="token operator">></span>乙<span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span> <span class="token operator"><</span>li<span class="token operator">></span>丙<span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span> <span class="token operator"><</span>li<span class="token operator">></span>丁<span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>ol<span class="token operator">></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.984061;"><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> <p>运行:<br> <img src="https://1000bd.com/contentImg/2024/04/30/6f4f4f1402d9880d.png" alt="在这里插入图片描述"></p> <h3><a name="t13"></a><a id="85_image_167"></a>8.5 图片标签<code><image></code></h3> <p>image标签用来显示图片，它有src属性，可以设置图片的路径，不同于Java中的盘符起手，绝对路径的写法格式则是<strong>http://ip:port/工程名/资源路径</strong>。相对路径的表示javaSE中是从工程名开始，而src属性是 . 表示当前文件所在的目录， …表示当前文件的上一层目录，直接一个文件名表示./文件名</p> <pre data-index="13" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span>image src<span class="token operator">=</span><span class="token string">"http://xx:xxx/test/test.png"</span> width<span class="token operator">=</span><span class="token string">"100"</span> height<span class="token operator">=</span><span class="token string">"200"</span> border<span class="token operator">=</span><span class="token string">"1"</span> alt<span class="token operator">=</span><span class="token string">"图片丢失啦"</span><span class="token operator">/</span><span class="token operator">></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.984061;"><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p>width属性设置宽和heigth设置长，border属性设置边框粗细，alt属性用来设置图片路径找不到的时候代替显示的文本内容。</p> <h3><a name="t14"></a><a id="86_table_177"></a>8.6 表格标签<code><table></code></h3> <p>表格标签即<table>，其中行用<tr>，每行中的每个格子用标签<td>，<th>是表头标签，自带居中加粗效果。</p> <p>align属性加在td标签中设置单元格的对齐属性，加在table标签设置的是整个表格的位置对齐属性。table标签还有cellspacing属性设置单元格间距</p> <pre data-index="14" class="set-code-hide prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span>table border<span class="token operator">=</span><span class="token string">"2"</span> width<span class="token operator">=</span><span class="token string">"300"</span> height<span class="token operator">=</span><span class="token string">"300"</span> cellspacing<span class="token operator">=</span><span class="token string">"2"</span><span class="token operator">></span> <span class="token operator"><</span>tr<span class="token operator">></span> <span class="token operator"><</span>td align<span class="token operator">=</span><span class="token string">"center"</span><span class="token operator">></span><span class="token operator"><</span>b<span class="token operator">></span><span class="token number">1</span><span class="token operator">-</span><span class="token number">1</span><span class="token operator"><</span><span class="token operator">/</span>b<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>th<span class="token operator">></span><span class="token number">1</span><span class="token operator">-</span><span class="token number">2</span><span class="token operator"><</span><span class="token operator">/</span>th<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token number">1</span><span class="token operator">-</span><span class="token number">3</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span> <span class="token operator"><</span>tr<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token number">2</span><span class="token operator">-</span><span class="token number">1</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token number">2</span><span class="token operator">-</span><span class="token number">2</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token number">2</span><span class="token operator">-</span><span class="token number">3</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span> <span class="token operator"><</span>tr<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token number">3</span><span class="token operator">-</span><span class="token number">1</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token number">3</span><span class="token operator">-</span><span class="token number">2</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>table<span class="token operator">></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style="opacity: 0.984061;"><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></ul></pre> <p>运行效果：<br> <img src="https://1000bd.com/contentImg/2024/04/30/922dd3b8704c9dbf.png" alt="在这里插入图片描述"><br> <strong>跨行跨列的效果：</strong><br> <img src="https://1000bd.com/contentImg/2024/04/30/4492e91acdf8d95d.png" alt="在这里插入图片描述"></p> <p>设置跨列，在<td>标签加colspan属性，设置跨行，加rowspan属性</p> <h3><a name="t15"></a><a id="87_iframe_213"></a>8.7 内嵌页面标签<code><iframe></code></h3> <p><iframe>标签可以在页面开辟一个小区域显示一个单独的页面，其中src属性设置内嵌的页面,width和height属性设置页面大小</p> <pre data-index="15" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span>iframe src<span class="token operator">=</span><span class="token string">"hello.html"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>iframe<span class="token operator">></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.984061;"><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p>iframe标签和a标签组合使用步骤：</p> <ul><li>在iframe标签中使用name属性定义一个名称</li><li>在a标签的target属性上设置iframe的name的属性值</li></ul> <p><strong>从而达到点击超链接，内嵌页面跟着变化的效果</strong>。</p> <pre data-index="16" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span>iframe src<span class="token operator">=</span><span class="token string">"hello.html"</span> width<span class="token operator">=</span><span class="token string">"500"</span> height<span class="token operator">=</span><span class="token string">"500"</span> name<span class="token operator">=</span><span class="token string">"abc"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>iframe<span class="token operator">></span> <span class="token operator"><</span>br<span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>ul<span class="token operator">></span> <span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"1.html"</span> target<span class="token operator">=</span><span class="token string">"abc"</span><span class="token operator">></span><span class="token number">1</span><span class="token punctuation">.</span>html<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span> <span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"2.html"</span> target<span class="token operator">=</span><span class="token string">"abc"</span><span class="token operator">></span><span class="token number">2</span><span class="token punctuation">.</span>html<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span> <span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"3.html"</span> target<span class="token operator">=</span><span class="token string">"abc"</span><span class="token operator">></span><span class="token number">3</span><span class="token punctuation">.</span>html<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>ul<span class="token operator">></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.984061;"><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> <p>运行效果：<br> <img src="https://1000bd.com/contentImg/2024/04/30/78867577464c88e6.png" alt="在这里插入图片描述"></p> <h3><a name="t16"></a><a id="88__240"></a>8.8 特殊字符</h3> <p>下面的例子中，<br/>标签会被解析成换行，想让它显示为文本，需将其转换你成字符集</p> <pre data-index="17" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;">这是<span class="token operator"><</span>br<span class="token operator">/</span><span class="token operator">></span>标签 <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.984061;"><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p>改为：</p> <pre data-index="18" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;">这是<span class="token operator">&</span>lt<span class="token punctuation">;</span>br<span class="token operator">&</span>gt<span class="token punctuation">;</span>标签 <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.984061;"><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p>此外，通常情况下，HTML会去掉文档中的空格，比如html文件中输入了10个连续空格，则其中九个会被过滤掉，空格用 <br> <img src="https://1000bd.com/contentImg/2024/04/30/a46268557c56b3bc.png" alt="在这里插入图片描述"></p> <h3><a name="t17"></a><a id="89_form_254"></a>8.9 表单标签<code><form></code></h3> <p>表单就是html页面中用来收集用户信息的所有元素集合，然后把这些信息发送给服务器，form标签就是表单。</p> <blockquote> <ul><li>input type=text 是文本输入框，value设置默认显示内容</li><li>input type=password是密码输入框，value设置默认显示的内容</li><li>input type=radio是单选框，加checked="checked"表示默认选中，name属性可以对其进行分组（同一个组里的选项才限制单选）</li><li>input type=checkbox是复选框，加checked="checked"表示默认选中</li><li>input type=reset是重置按钮，value属性可以修改按钮上的文本</li><li>input type=submit是提交按钮，value属性可以修改按钮上的文本</li><li>input type=button是按钮，value属性可以修改按钮上的文本</li><li>input type=file是文件上传域，点击可选择电脑本地文件</li><li>input type=hidden是隐藏域，当我们需要向服务器发送某些信息，而这些信息不需要用户参与输入。就可以用隐藏域，提交的时候一起发送给服务器</li><li>select标签是下拉列表框，option标签是下拉框中的一个个选项，selected="selected"设置默认选中</li><li>textarea表示多行文本输入框，且其实标签和结束标签的中间文本就是默认值，rows设置可以显示几行的高度，超过这几行出现滚动条，cols属性设置每行可以显示几个字符的宽度</li></ul> </blockquote> <pre data-index="19" class="set-code-hide prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span><span class="token operator">!</span><span class="token constant">DOCTYPE</span> html<span class="token operator">></span> <span class="token operator"><</span>html lang<span class="token operator">=</span><span class="token string">"zh_CN"</span><span class="token operator">></span> <span class="token operator"><</span>head<span class="token operator">></span> <span class="token operator"><</span>meta charset<span class="token operator">=</span><span class="token string">"UTF-8"</span><span class="token operator">></span> <span class="token operator"><</span>title<span class="token operator">></span>表单收集<span class="token operator"><</span><span class="token operator">/</span>title<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>head<span class="token operator">></span> <span class="token operator"><</span>body<span class="token operator">></span> <span class="token operator"><</span>form<span class="token operator">></span> 用户名称：<span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"text"</span> value<span class="token operator">=</span><span class="token string">"默认值user"</span><span class="token operator">/</span><span class="token operator">></span><span class="token operator"><</span>br<span class="token operator">/</span><span class="token operator">></span> 用户密码：<span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"password"</span><span class="token operator">/</span><span class="token operator">></span><span class="token operator"><</span>br<span class="token operator">/</span><span class="token operator">></span> 确认密码：<span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"password"</span><span class="token operator">/</span><span class="token operator">></span><span class="token operator"><</span>br<span class="token operator">/</span><span class="token operator">></span> 性别：<span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"radio"</span> name<span class="token operator">=</span><span class="token string">"sex"</span> checked<span class="token operator">=</span><span class="token string">"checked"</span><span class="token operator">/</span><span class="token operator">></span>男<span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"radio"</span> name<span class="token operator">=</span><span class="token string">"sex"</span><span class="token operator">/</span><span class="token operator">></span>女<span class="token operator"><</span>br<span class="token operator">/</span><span class="token operator">></span> 兴趣爱好：<span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"checkbox"</span> checked<span class="token operator">=</span><span class="token string">"checked"</span><span class="token operator">/</span><span class="token operator">></span>Java<span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"checkbox"</span><span class="token operator">/</span><span class="token operator">></span>Sleep<span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"checkbox"</span><span class="token operator">/</span><span class="token operator">></span>fight<span class="token operator"><</span>br<span class="token operator">/</span><span class="token operator">></span> 国籍：<span class="token operator"><</span>select<span class="token operator">></span> <span class="token operator"><</span>option<span class="token operator">></span>中国<span class="token operator"><</span><span class="token operator">/</span>option<span class="token operator">></span> <span class="token operator"><</span>option selected<span class="token operator">=</span><span class="token string">"selected"</span><span class="token operator">></span>英国<span class="token operator"><</span><span class="token operator">/</span>option<span class="token operator">></span> <span class="token operator"><</span>option<span class="token operator">></span>美国<span class="token operator"><</span><span class="token operator">/</span>option<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>select<span class="token operator">></span><span class="token operator"><</span>br<span class="token operator">/</span><span class="token operator">></span> 自我评价：<span class="token operator"><</span>textarea rows<span class="token operator">=</span><span class="token string">"10"</span> cols<span class="token operator">=</span><span class="token string">"20"</span><span class="token operator">></span>这里写默认值<span class="token operator"><</span><span class="token operator">/</span>textarea<span class="token operator">></span><span class="token operator"><</span>br<span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"reset"</span> value<span class="token operator">=</span><span class="token string">"重置输入内容"</span><span class="token operator">/</span><span class="token operator">></span><span class="token operator"><</span>br<span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"submit"</span> value<span class="token operator">=</span><span class="token string">"提交"</span><span class="token operator">/</span><span class="token operator">></span><span class="token operator"><</span>br<span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"button"</span> value<span class="token operator">=</span><span class="token string">"按钮"</span><span class="token operator">/</span><span class="token operator">></span><span class="token operator"><</span>br<span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"file"</span><span class="token operator">/</span><span class="token operator">></span><span class="token operator"><</span>br<span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"hidden"</span><span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>form<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>html<span class="token operator">></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style="opacity: 0.984061;"><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></ul></pre> <p>运行效果：</p> <p><img src="https://1000bd.com/contentImg/2024/04/30/cfac548d09565d45.png" alt="在这里插入图片描述"></p> <p><strong>表单格式化—将表单的放入table中</strong>，一列存提示语，一列存值</p> <pre data-index="20" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span>form<span class="token operator">></span> <span class="token operator"><</span>table<span class="token operator">></span> <span class="token operator"><</span>tr<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span>提示语<span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span>值<span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>table<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>form<span class="token operator">></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.984061;"><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> <pre data-index="21" class="set-code-hide prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span><span class="token operator">!</span><span class="token constant">DOCTYPE</span> html<span class="token operator">></span> <span class="token operator"><</span>html lang<span class="token operator">=</span><span class="token string">"zh_CN"</span><span class="token operator">></span> <span class="token operator"><</span>head<span class="token operator">></span> <span class="token operator"><</span>meta charset<span class="token operator">=</span><span class="token string">"UTF-8"</span><span class="token operator">></span> <span class="token operator"><</span>title<span class="token operator">></span>表单收集<span class="token operator"><</span><span class="token operator">/</span>title<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>head<span class="token operator">></span> <span class="token operator"><</span>body<span class="token operator">></span> <span class="token operator"><</span>form<span class="token operator">></span> <span class="token operator"><</span>h1 align<span class="token operator">=</span><span class="token string">"center"</span><span class="token operator">></span>用户注册<span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span> <span class="token operator"><</span>table align<span class="token operator">=</span><span class="token string">"center"</span><span class="token operator">></span> <span class="token operator"><</span>tr<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span>用户名称：<span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"text"</span> value<span class="token operator">=</span><span class="token string">"默认值user"</span><span class="token operator">/</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span> <span class="token operator"><</span>tr<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span>用户密码：<span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"password"</span><span class="token operator">/</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span> <span class="token operator"><</span>tr<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span>确认密码：<span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"password"</span><span class="token operator">/</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span> <span class="token operator"><</span>tr<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span>性别：<span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"radio"</span> name<span class="token operator">=</span><span class="token string">"sex"</span> checked<span class="token operator">=</span><span class="token string">"checked"</span><span class="token operator">/</span><span class="token operator">></span>男<span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"radio"</span> name<span class="token operator">=</span><span class="token string">"sex"</span><span class="token operator">/</span><span class="token operator">></span>女<span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span> <span class="token operator"><</span>tr<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span>兴趣爱好：<span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"checkbox"</span> checked<span class="token operator">=</span><span class="token string">"checked"</span><span class="token operator">/</span><span class="token operator">></span>Java<span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"checkbox"</span><span class="token operator">/</span><span class="token operator">></span>Sleep<span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"checkbox"</span><span class="token operator">/</span><span class="token operator">></span>fight<span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span> <span class="token operator"><</span>tr<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span>国籍：<span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span> <span class="token operator"><</span>select<span class="token operator">></span> <span class="token operator"><</span>option<span class="token operator">></span>中国<span class="token operator"><</span><span class="token operator">/</span>option<span class="token operator">></span> <span class="token operator"><</span>option selected<span class="token operator">=</span><span class="token string">"selected"</span><span class="token operator">></span>英国<span class="token operator"><</span><span class="token operator">/</span>option<span class="token operator">></span> <span class="token operator"><</span>option<span class="token operator">></span>美国<span class="token operator"><</span><span class="token operator">/</span>option<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>select<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span> <span class="token operator"><</span>tr<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span>自我评价：<span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token operator"><</span>textarea rows<span class="token operator">=</span><span class="token string">"10"</span> cols<span class="token operator">=</span><span class="token string">"20"</span><span class="token operator">></span>这里写默认值<span class="token operator"><</span><span class="token operator">/</span>textarea<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span> <span class="token operator"><</span>tr<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"reset"</span> value<span class="token operator">=</span><span class="token string">"重置输入内容"</span><span class="token operator">/</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td align<span class="token operator">=</span><span class="token string">"center"</span><span class="token operator">></span><span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"submit"</span> value<span class="token operator">=</span><span class="token string">"提交"</span><span class="token operator">/</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span> <span class="token operator"><</span>tr<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"button"</span> value<span class="token operator">=</span><span class="token string">"按钮"</span><span class="token operator">/</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"file"</span><span class="token operator">/</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span> <span class="token operator"><</span>tr<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"hidden"</span><span class="token operator">/</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>table<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>form<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>html<span class="token operator">></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style="opacity: 0.984061;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li><li style="color: rgb(153, 153, 153);">45</li><li style="color: rgb(153, 153, 153);">46</li><li style="color: rgb(153, 153, 153);">47</li><li style="color: rgb(153, 153, 153);">48</li><li style="color: rgb(153, 153, 153);">49</li><li style="color: rgb(153, 153, 153);">50</li><li style="color: rgb(153, 153, 153);">51</li><li style="color: rgb(153, 153, 153);">52</li><li style="color: rgb(153, 153, 153);">53</li><li style="color: rgb(153, 153, 153);">54</li><li style="color: rgb(153, 153, 153);">55</li><li style="color: rgb(153, 153, 153);">56</li><li style="color: rgb(153, 153, 153);">57</li><li style="color: rgb(153, 153, 153);">58</li></ul></pre> <blockquote> <p>form标签的<code>action属性设置提交的服务器地址，method属性设置提交的方式</code>GET（默认）还是POST</p> </blockquote> <pre data-index="22" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span>form action<span class="token operator">=</span><span class="token string">"http://localhost:8080"</span> method<span class="token operator">=</span><span class="token string">"get"</span><span class="token operator">></span> …… <span class="token operator"><</span><span class="token operator">/</span>form<span class="token operator">></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.984061;"><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> <p><strong>表单提交的时候，数据没有发送给服务器的三种情况：</strong></p> <ul><li>表单项没有name属性，加name=“key”，key就是接口传参的key</li></ul> <pre data-index="23" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"text"</span> value<span class="token operator">=</span><span class="token string">"默认值user"</span><span class="token operator">/</span><span class="token operator">></span> 改为： <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"text"</span> name<span class="token operator">=</span><span class="token string">"username"</span> value<span class="token operator">=</span><span class="token string">"默认值user"</span><span class="token operator">/</span><span class="token operator">></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.984061;"><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> <p><img src="https://1000bd.com/contentImg/2024/04/30/07ee5ed0804e4687.png" alt="在这里插入图片描述"></p> <ul><li>单选、复选、下拉列表框中的option标签，都需要加value属性，否则传入的值变为一串编码</li></ul> <pre data-index="24" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"radio"</span> name<span class="token operator">=</span><span class="token string">"sex"</span> checked<span class="token operator">=</span><span class="token string">"checked"</span><span class="token operator">/</span><span class="token operator">></span>男<span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"radio"</span> name<span class="token operator">=</span><span class="token string">"sex"</span><span class="token operator">/</span><span class="token operator">></span>女 <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.984061;"><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p>此时boy显示为on<br> <img src="https://1000bd.com/contentImg/2024/04/30/622de4faace43fa9.png" alt="在这里插入图片描述"><br> 加入value：</p> <pre data-index="25" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"radio"</span> name<span class="token operator">=</span><span class="token string">"sex"</span> value<span class="token operator">=</span><span class="token string">"boy"</span> checked<span class="token operator">=</span><span class="token string">"checked"</span><span class="token operator">/</span><span class="token operator">></span>男<span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"radio"</span> name<span class="token operator">=</span><span class="token string">"sex"</span> value<span class="token operator">=</span><span class="token string">"girl"</span><span class="token operator">/</span><span class="token operator">></span>女 <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.984061;"><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2024/04/30/95080348a9407983.png" alt="在这里插入图片描述"></p> <ul><li>表单项不在提交的form标签中</li></ul> <pre data-index="26" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"hidden"</span> name<span class="token operator">=</span><span class="token string">"admin"</span> passwd<span class="token operator">=</span><span class="token string">"123"</span><span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>form action<span class="token operator">=</span><span class="token string">"http://localhost:8080"</span> method<span class="token operator">=</span><span class="token string">"get"</span><span class="token operator">></span> …… <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.984061;"><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> <p>比如这里的hidden在提交的form标签外</p> <blockquote> <p>method属性选GET请求的特点是：</p> </blockquote> <ul><li>浏览器中的地址栏显示：action属性值[+?+请求参数] ,请求参数格式是name=value&name=value</li><li>不安全</li><li>它有数据长度的限制<br> <img src="https://1000bd.com/contentImg/2024/04/30/a4ab41bead10d997.png" alt="在这里插入图片描述"></li></ul> <blockquote> <p>method属性选post请求的特点是：</p> </blockquote> <ul><li>浏览器地址栏中只有action属性值，也就是服务器的地址</li><li>相对于GET要安全些</li><li>理论上没有长度限制</li></ul> <h3><a name="t18"></a><a id="810_div_span_p_437"></a>8.10 其他标签<code><div> <span> <p></code></h3> <p><img src="https://1000bd.com/contentImg/2024/04/30/512ba93961564993.png" alt="在这里插入图片描述"></p> <ul><li>p段落标签，默认会在段落的上方或者下方各空出一行来</li></ul> <p><img src="https://1000bd.com/contentImg/2024/04/30/82e434f069a09f3f.png" alt="在这里插入图片描述"></p> <p>div和span标签的具体用法特点在CSS章节中再整理。</p> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/1268341">Android 状态栏显示运营商名称</a> <br /> <a href="/Article/Index/1256035">edu 154 div2 c ( 模拟</a> <br /> <a href="/Article/Index/745983">基于web在线餐饮网站的设计与实现——蛋糕甜品店铺(HTML+CSS+JavaScript)</a> <br /> <a href="/Article/Index/1362351">安全论坛和外包平台汇总</a> <br /> <a href="/Article/Index/1016063">Spring Security oauth2.0 服务端</a> <br /> <a href="/Article/Index/1516784">LLM 技术图谱（LLM Tech Map）& Kubernetes (K8s) 与AIGC的结合应用</a> <br /> <a href="/Article/Index/1195052">java毕业设计“传情旧物”网站mybatis+源码+调试部署+系统+数据库+lw</a> <br /> <a href="/Article/Index/1076927">java-php-net-python-基于的相册软件的设计与实现计算机毕业设计程序</a> <br /> <a href="/Article/Index/1223602">Unity3D下如何实现跨平台低延迟的RTMP、RTSP播放</a> <br /> <a href="/Article/Index/952266">01 uniapp/微信小程序 项目day01</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/llg___/article/details/127631891 </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>