前端html基本结构

前端html基本结构
前言：

前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页和界面

前端开发中最基本也是最必须的三个技能。前端的开发中,在页面的布局时：
- 1. HTML:页面结构:可以把他看成一个文档,定义展示页面的内容结构
- 1. CSS:页面表现:元素大小、颜色、位置、隐藏或显示、部分动画效果
- 1. JavaScript:页面行为:部分动画效果、页面与用户的交互、页面功能
一、HTML基本结构

HTML: 超文本标记语言,是网页制作必备的编程语言“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素
1. HTML页面结构
 
 超文本标记语言的结构包括“头"部分（Head）、和“主体”部分（Body）,其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容
```
DOCTYPE html>
<html lang="en">
<head>
	
	<meta charset="UTF-8">
	<title>Titletitle>
head>
<body>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
```
 1、文档声明 : DOCTYPE声明该html文件使用的HTML版本 ------> 为HTML 5
 2、页面头部:
 
 1.标签中的 lang="“en” 定义网页的语言为英文,定义成中文是 'lang=“zh-CN”
 2.标签中的 </blockquote> 3、页面内容: <blockquote> <body:元素定义文档的主体,也就是页面显示的内容,body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等) </blockquote> </li></ol> <h2><a name="t2"></a><a id="HTML_39"></a>二、常见的HTML标签使用</h2> 1、注释: <blockquote> 定义和用法：注释标签用于在源代码中插入注释。注释不会显示在浏览器中。您可使用注释对您的代码进行解释,这样做有助于您在以后的时间对代码的编辑。当您编写了大量代码时尤其有用。 </blockquote> 例如: 这是注释,快捷键:ctrl+/ <pre data-index="1" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">  <p>这是一段普通的段落。</p> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> 2、标题标签: h1-h6标签 <blockquote> 定义和用法: 标签可定义标题的大小,分为 h1-h6 注意: 由于 h 元素拥有确切的语义,因此请您慎重地选择恰当的标签层级来构建文档的结构。因此,请不要利用标题标签来改变同一行中的字体大小 </blockquote> 例如: <pre data-index="2" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> 3、段落标签:p标签 <blockquote> 定义和用法：标签定义段落,一个P标签标示一个段落,元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,您也可以在样式表中规定 </blockquote> 例如: <pre data-index="3" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <p>7日晚上10点,中国机队进行排查</p> <p>新闻实践史不是对新闻历史的碎片化、浅表性阐释</p> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> 4、分割线:hr标签 <blockquote> 定义和用法:标签在 HTML 页面中创建一条水平线。水平分隔线以在视觉上将文档分隔成各个部分,在 HTML中 </blockquote> 例如: <pre data-index="4" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <p>7日晚上10点,中国机队进行排查</p> <hr> <p>新闻实践史不是对新闻历史的碎片化、浅表性阐释</p> <hr> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> 5、换行标签: br标签 <blockquote> 定义和用法: 插入一个换行符，标签是空标签,意味着它没有结束标签 </blockquote> 例如: <pre data-index="5" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <p>7日晚上10点,中国国际航空在其官方微博<br>确认了这一情况</p> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> 6、字体斜体标签: i标签 <blockquote> 定义和用法: 字体进行倾斜 </blockquote> 例如: <pre data-index="6" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <i>中国</i>国际航空 <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> 7、字体加粗标签: b标签 <blockquote> <ol><li>定义和用法:字体进行加粗</li></ol> </blockquote> 例如: <pre data-index="7" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <b>新闻</b>实践史不是对新闻历史的碎片化 <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> 8、图片标签: img标签 <blockquote> 定义和用法: 向网页中嵌入一幅图像 标签的属性： <ol><li>src:为图片链接</li><li>alt:为图片名称</li><li>height:定义图像的高度</li><li>width:定义图像的宽度</li></ol> </blockquote> <blockquote> 注意: 本地图片地址链接格式为:./600.jpg </blockquote> 例如: <pre data-index="8" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="这是网络图片"> <img src="./600.jpg" alt="这是本地图片"> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> 9、链接标签: a标签 <blockquote> 定义和用法: 标签定义超链接,用于从一个页面链接到另一个页面 </blockquote> 例如: <pre data-index="9" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <a href="https://www.baidu.com">百度一下</a> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> 10、列表标签: <ol><li>无序列表: ul 标签 <blockquote> 定义和用法: 在网页上定义一个无编号的内容列表可以用 例如: </blockquote> <pre data-index="10" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <ul> <li>无序列表文字1</li> <li>无序列表文字2</li> <li>无序列表文字3</li> </ul> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> </li><li>有序序列表:ol标签 <blockquote> 定义和用法: 在网页上定义一个有编号的内容列表可以用 例如: </blockquote> <pre data-index="11" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <ol> <li>有序列表文字1</li> <li>有序列表文字2</li> <li>有序列表文字3</li> </ol> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> </li></ol> 11、表格标签: table标签 <blockquote> 定义: 向网页中嵌入一幅图像，tabel标签定义 HTML 表格 </blockquote> <blockquote> table标签的使用： <ol><li>简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成</li><li>tr元素:定义表格行</li><li>th元素:定义表头</li><li>td元素:定义表格单元</li><li>表格默认没有边框,需要边框在table里加: border=“2px”</li></ol> </blockquote> 例如: <pre data-index="12" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <table border="2px">  <tr> <th>名字</th> <th>年龄</th> <th>手机号码</th> </tr> <tr> <td>小米</td> <td>23</td> <td>15112552344</td> </tr> </table> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li></ul></pre> <h2><a name="t3"></a><a id="HTML_192"></a>三、HTML块元素和行内元素的使用</h2> 1、块元素:div标签 <blockquote> 定义和用法： <ol><li>标签块元素,表示一块内容,div标签可以把文档分割为独立的、不同的部分</li><li>可以使用css设置宽高</li><li>默认是占用一整快</li></ol> </blockquote> 例如: <pre data-index="13" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <div style="height:100px;background: red;">哈哈哈哈</div> <div style="height:200px;background: yellow;">这是第二块</div> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> 2、行内元素:span标签,i标签,b标签 <blockquote> 定义和用法： <ol><li>不能设置宽高</li><li>设置多个行内元素,一般用于文字显示</li></ol> </blockquote> 例如: <pre data-index="14" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <span style="height:200px;background: green;width: 500px;">python8888</span> <span style="height:200px;background: mediumvioletred;">java7888</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> 3、行内块元素 <blockquote> 定义和用法： <ol><li>将一行内容分为多个快</li><li>所有的元素都可以通过css设置为行内块元素</li><li>可以看成是一行内分成多个列进显示</li><li>通过css设置: display: inline-block</li></ol> </blockquote> <img src="https://1000bd.com/contentImg/2022/08/18/154546767.png" alt="在这里插入图片描述"> <h2><a name="t4"></a><a id="HTML_228"></a>四、HTML表单的使用</h2> 1、 form标签 <blockquote> 定义和用法： <ol><li>form: 标签用于为用户输入创建 HTML 表单,表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等</li></ol> </blockquote> <ol><li> 参数： <blockquote> <ol><li>action: 定义表单数据提交地址（不写默认本地地址)</li><li>method: 表单提交的方式(常见的有get和post)</li></ol> </blockquote> 例如: <pre data-index="15" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <h1>用户登录</h1> <form action="" method="get"></form> <div> 账号:<input type="text"> </div> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> </li><li> form表单中包含的元素： <ol><li> input标签 input的参数: <blockquote> <ol><li>value属性: 定义表单元素的值</li><li>name属性: 定义表单元素的名称,此名称是提交数据时的键名</li></ol> </blockquote> input标签的type的属性： <blockquote> <ol><li>text ------> 定义单行文本输入框</li></ol> </blockquote> <pre data-index="16" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <div>  <label for="u">账号:</label> <input type="text" name="username" value="henry001" id="u"> </div> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <blockquote> <ol start="2"><li>password ------> 定义密码输入框</li></ol> </blockquote> <pre data-index="17" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <div>  密码:<input type="password" name="pwd"> </div> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <blockquote> <ol start="3"><li>radio ------> 定义单选框</li></ol> </blockquote> <pre data-index="18" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <div>  <input type="radio" name="sex" value="nan">男 <input type="radio" name="sex" value="nu">女 <input type="radio" name="sex" value="weizhi">未知 </div> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> <blockquote> <ol start="4"><li>checkbox ------> 定义复选框</li></ol> </blockquote> <pre data-index="19" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <div> 记住密码:<input type="checkbox" name="status" value="1"> </div> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <blockquote> <ol start="5"><li>file ------> 定义上传文件</li></ol> </blockquote> <pre data-index="20" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <div> 上传头像:<input type="file" name="pic"> </div> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <blockquote> <ol start="6"><li>date ------> 日期选择器</li></ol> </blockquote> <pre data-index="21" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <div> 日期:<input type="date" name="date1"> </div> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <blockquote> <ol start="7"><li>submit ------> 定义提交按钮</li></ol> </blockquote> <pre data-index="22" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <div> <input type="submit"> </div> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <blockquote> <ol start="8"><li>button ------> 定义一个普通按钮</li></ol> </blockquote> <pre data-index="23" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <div> <input type="button" value="普通按钮"> </div> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <blockquote> <ol start="9"><li>reset ------> 定义重置按钮</li></ol> </blockquote> <pre data-index="24" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <div> <input type="reset"> </div> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <blockquote> <ol start="10"><li>image ------> 定义图片作为提交按钮,用src属性定义图片地址</li></ol> </blockquote> <pre data-index="25" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <div> <input type="image" src="./600.jpg"> </div> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <blockquote> <ol start="11"><li>hidden ------> 定义一个隐藏的表单域,用来存储值</li></ol> </blockquote> </li><li> label标签 <blockquote> 定义和用法: <ol><li>label 标签为 input 元素定义标注（标记）</li><li>label 标签的 for 属性应当与相关元素的 id 属性相同</li></ol> </blockquote> <pre data-index="26" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <div>  <label for="u">账号:</label> <input type="text" name="username" value="henry001" id="u"> </div> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> </li><li> textarea标签 <blockquote> 定义和用法: <ol><li>textarea标签定义多行的文本输入控件</li><li>可以通过 cols 和 rows 属性来规定 textarea 的尺寸</li></ol> </blockquote> <pre data-index="27" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <div> 个人介绍: <textarea cols="30" rows="10"></textarea> </div> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> </li><li> select标签 <blockquote> 定义和用法: <ol><li>select 元素可创建单选或多选菜单,也可以用于选择数据提交表单</li></ol> </blockquote> <pre data-index="28" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <div> 选择城市: <select name="city"> <option value="sh">上海</option> <option value="bj">北京</option> <option value="sz">深圳</option> </select> </div> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li></ul></pre> </li><li> option标签 <blockquote> 定义和用法: <ol><li>option 元素定义下拉列表中的一个选项。option 元素位于 select 元素内部</li></ol> </blockquote> <pre data-index="29" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <div> 选择城市: <select name="city"> <option value="sh">上海</option> <option value="bj">北京</option> <option value="sz">深圳</option> </select> </div> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li></ul></pre> </li></ol> </li></ol> <h2><a name="t5"></a><a id="iframe_401"></a>五、iframe的使用</h2> <blockquote> 定义和用法: <ol><li>iframe 元素会创建包含另外一个文档的内联框架（即行内框架）</li></ol> </blockquote> 将登陆的页面链接到其他页面 <pre data-index="30" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <div>  <iframe src="https://www.baidu.com/" height="1000" width="2000"></iframe> </div> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> </div> </div> </li> <li class="list-group-item ul-li"> 相关阅读: <a href="/Article/Index/942357">CS61B spring21 lab7代码</a> <a href="/Article/Index/1368728">Vue3路由引入报错解决：无法找到模块“xxx.vue”的声明文件 xxx隐式拥有 “any“ 类型。</a> <a href="/Article/Index/1070936">SpringBoot（一）：SpringBoot快速入门</a> <a href="/Article/Index/1660543">请教下Elasticsearch7.14向量检索</a> <a href="/Article/Index/1085365">R语言绘制指数分布，并为指数分布着不同色</a> <a href="/Article/Index/819302">Go简单入门</a> <a href="/Article/Index/1295693">亚马逊鲲鹏系统一款可以帮助AMZ商品加购系统</a> <a href="/Article/Index/815763">Eureka</a> <a href="/Article/Index/1314428">论坛系统测试用例设计</a> <a href="/Article/Index/660742">Navicat向mysql数据库中导入sql文件常见报错问题总结及解决办法</a> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/qq_40236497/article/details/126365333 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/888177">十款代码表白小特效一个比一个浪漫赶紧收藏起来吧！！！</a> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> </li> </ul> </div> </div> </div>     <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" />京公网安备 11010502049817号</a> </div> </div> </div> </div> </nav>   <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script>   </body> </html>

前言：

一、HTML基本结构