【Web前端】——HTML基础知识总结

文档中心

在这里插入图片描述

🐚 作者: 阿伟
💂 个人主页: Flyme awei

🐋 希望大家多多支持😘一起进步呀！

💬 文章对你有帮助👉关注✨点赞👍收藏📂

前端技术之HTML

在这里插入图片描述

文章目录

前端技术之HTML
一、HTML
- 1.1网络传输的三大基石
- 1.2什么是HTML
- 1.3HTML标准结构
- 1.4集成开发环境
二、HTML中标签的使用
- 2.1head中的标签
- 2.2body中的标签
- - 2.2.1文本标签
  - 2.2.2多媒体标签
  - 2.2.3超链接标签
  - 2.2.4设置锚点
- 2.3列表标签
- - 2.3.1无序列表
  - 2.3.2有序列表
- 2.4表格标签
三、框架
- 3.1内嵌框架
- - 3.1.1练习：邮箱
  - - 登录首页
    - 邮箱首页
    - 邮箱上侧
    - 邮箱左侧
- 3.2框架集合
四、form表单
- 4.1form表单作用
- 4.2forme表单细节
- - name属性
  - action属性
  - method 属性
- 4.3form表单练习:模拟百度搜索
- 4.4表单元素
- - 4.4.1文本框
  - 4.4.2密码框
  - 4.4.3单选按钮
  - 4.4.4多选按钮
  - 4.4.5文件
  - 4.4.6影藏域
  - 4.4.7普通按钮
  - 4.4.8重置按钮
  - 4.4.9提交按钮
  - 4.4.10下拉按钮
  - 4.4.11多行文本框
  - 4.4.12lable标签
五、HTML5新增
- 5.1新增type类型
- 5.2新增属性
总结

一、HTML

1.1网络传输的三大基石

URL：在WWW上，每一信息资源都有统一的且在网上唯一的地址，该地址就叫URL（Uniform Resource Locator,统一资源定位符），它是WWW的统一资源定位标志，就是指网络地址。

HTTP协议：http是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII码形式给出；而消息内容则具有一个类似MIME的格式。这个简单模型是早期Web成功的有功之臣，因为它使得开发和部署是那么的直截了当。

HTML：HTML称为超文本标记语言。

1.2什么是HTML

1.HTML 指的是超文本标记语言: HyperText Markup

超文本：比普通的文本厉害

标记：标记=标签

标签：由尖括号包围起来的关键词
分类：双标记标签/封闭类型标签

单标记标签/非封闭类型标签

语言：HTML是一个描述网页的语言

2.HTML的作用：

学习HTML就是学习各种各样的标签，然后组成一个页面，这个页面可以被浏览器解析，解析完以后可以在浏览器中将页面进行展示。

1.3HTML标准结构

标准结构：

【Web前端】——HTML基础知识总结

运行界面：让浏览器解析：直接用浏览器将文件打开即可：
【Web前端】——HTML基础知识总结

1.4集成开发环境

集成开发环境（IDE，Integrated Development Environment ）：是用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面等工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。所有具备这一特性的软件或者软件套（组）都可以叫集成开发环境。如微软的Visual Studio系列，Borland的C++ Builder、Delphi系列等。该程序可以独立运行，也可以和其它程序并用。IDE多被用于开发HTML应用软件。
例如，许多人在设计网站时使用IDE（如webstorm、DreamWeaver等），因为很多项任务会自动生成。
【Web前端】——HTML基础知识总结

二、HTML中标签的使用

2.1head中的标签

head标签—》里面放的是页面的配置信息
head标签用于定义文档的头部，它是所有头部元素的容器。中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：
、、、、、 </code>。 应该把标签放在文档的开始处，紧跟在后面，并处于标签之前。 文档的头部经常会包含一些标签，用来告诉浏览器关于文档的附加信息。 <pre><code class="prism language-html"><!DOCTYPE html><html><head><meta charset="UTF-8"><style></style><script></script><meta name="author" content="awei"/><meta name="keywords" content="关键字"/><meta name="keywords" content="head标签" /><link rel="icon" sizes="any" mask href="//www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"/><title>head标签</title></head><body>This is awei a html ...</body></html></code></pre> <h2>2.2body中的标签</h2> body标签—》里面放的就是页面上展示出来的内容 body 元素是定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）body是用在网页中的一种HTML标签，标签是用在网页中的一种HTML标签，表示网页的主体部分，也就是用户可以看到的内容，可以包含文本、图片、音频、视频等各种内容！ <h3>2.2.1文本标签</h3> <pre><code class="prism language-html"><!DOCTYPE html><html><head><meta charset="UTF-8"><title>文本标签</title></head><body><h1>H1标题</h1><h2>H2标题</h2><h3>H3标题</h3><h4>H4标题</h4><h5>H5标题</h5><h6>H6标题</h6><p>文 本</p> <p>文 本</p> <b>加粗</b><i>倾斜</i><u>下划线</u><i><u><b>加粗倾斜下划线</b></u></i><pre><font size="5">public static void main(String[] args){System.out.println("预编译")}</font></pre><del>Flyme awei</del><p>hello,<br />word</p><font size="7" color="aqua" face="微软雅黑">字体大小颜色样式</font></body></html></code></pre> 页面展示： <img src="https://img-blog.csdnimg.cn/d46d36a1cd7740d484259c35c981c217.png" alt="【Web前端】——HTML基础知识总结" alt="在这里插入图片描述" /> <h3>2.2.2多媒体标签</h3> <pre><code class="prism language-html"><!DOCTYPE html><html><head><meta charset="UTF-8"><title>多媒体标签</title></head><body><img src="img/76cc7e7c572c4bd7b368add704a02383.png" width="300px"title="这是一张图片" alt="图片加载失败提示语"/><br /><embed src="vido/日落.mp4"></embed><embed src="music/我要你.mp3"></embed></body></html></code></pre> 页面展示： <img src="https://img-blog.csdnimg.cn/c5da98fcd0224ef0b998c2e5f86205e6.png" alt="【Web前端】——HTML基础知识总结" alt="在这里插入图片描述" /> <h3>2.2.3超链接标签</h3> <pre><code class="prism language-html"><!DOCTYPE html><html><head><meta charset="UTF-8"><title>超链接标签</title></head><body><a href="01head标签.html">超链接</a><br /><a href="02文本标签.html" target="_self">这是一个超链接</a><br /><a href="03多媒体标签.html" target="_blank">这是一个超链接</a><br /><a href="https://blog.csdn.net/m0_68744965?spm=1000.2115.3001.5343" target="_blank"><img src="img/76cc7e7c572c4bd7b368add704a02383.png"/></a></body></html></code></pre> 页面展示： <img src="https://img-blog.csdnimg.cn/7ddfda32ec1844c8be5f6d53e8b89df2.png" alt="【Web前端】——HTML基础知识总结" alt="在这里插入图片描述" /> <h3>2.2.4设置锚点</h3> <pre><code class="prism language-html"><!DOCTYPE html><html><head><meta charset="UTF-8"><title>设置锚点</title></head><body><a name="1F">java语言</a><h1>java</h1><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><p>java</p><a name="2F">python语言</a><h1>python</h1><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><p>python</p><a name="3F">javascript语言</a><h1>javascript</h1><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><p>javascript</p><a href="#1F">java</a><a href="#2F">python</a><a href="#3F">javascript</a></body></html></code></pre> <img src="https://img-blog.csdnimg.cn/bba17988d5d54961be91f81907adb02b.png" alt="【Web前端】——HTML基础知识总结" alt="在这里插入图片描述" /> <h2>2.3列表标签</h2> <h3>2.3.1无序列表</h3> <h3>2.3.2有序列表</h3> <pre><code class="prism language-html"><!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><h1>Python</h1><ul type="circle"><li>django</li><li>flask</li><li>pygame</li><li>numpy</li><li>pandas</li></ul><h1>Python Web学习路线</h1><ol><li>Python基础语法</li><li>Python高级</li><li>Python网络</li><li>Mysql</li><li>Web前端</li><li>Linux</li><li>Flask Django</li></ol><h1></h1></body></html></code></pre> 页面展示： <img src="https://img-blog.csdnimg.cn/2b36f1d3eb064042a291ddd39a8c065e.png" alt="【Web前端】——HTML基础知识总结" alt="在这里插入图片描述" /> <h2>2.4表格标签</h2> <pre><code class="prism language-html"><!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><table border="1px" cellpadding="0px" width="600px" height="300px" background="img/1d08d8edcc7c432cb36ec517d5d859b0.png"><tr bgcolor="cornsilk" align="center"><td>姓名</td><td>学号</td><td>性别</td><td>年龄</td><td>成绩</td></tr><tr align="center"><td>张三</td><td>1901</td><td rowspan="3" align="center">男</td><td>18</td><td>97</td></tr><tr align="center"><td >李四</td><td >1902</td><td colspan="2">66</td></tr><tr align="center"><td>王二</td><td>1903</td><td>18</td><td>68</td></tr></table></body></html></code></pre> 页面展示： <img src="https://img-blog.csdnimg.cn/6b0900eaaf3544e1b620f14bbc6bb20a.png" alt="【Web前端】——HTML基础知识总结" alt="在这里插入图片描述" /> <hr /> <h1>三、框架</h1> <h2>3.1内嵌框架</h2> <blockquote> 内嵌框架是用于在网页中嵌入一个网页并让它在网页中显示. </blockquote> <pre><code class="prism language-html"><!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><h1>java图书展示</h1><ol><li><a href="imgbook/java核心技术.jpg" target="my_iframe">java核心技术</a></li><li><a href="imgbook/think in java.jpg" target="my_iframe">think in java</a></li><li><a href="imgbook/大话设计模式.jpg" target="my_iframe">大话设计模式</a></li><li><a href="imgbook/深入理解java虚拟机.jpg" target="my_iframe">深入理解java虚拟机</a></li><li><a href="imgbook/算法图解.jpg" target="my_iframe">算法图解</a></li></ol><body></body></html></code></pre> <img src="https://img-blog.csdnimg.cn/0e393d9112bb46aa851cb7493d98d41e.png" alt="【Web前端】——HTML基础知识总结" alt="在这里插入图片描述" /> <pre><code class="prism language-html"><!DOCTYPE html><html><head><meta charset="UTF-8"><title>内嵌框架</title></head><body><iframe src="书籍导航.html" height="700px" width="30%"></iframe><iframe name="my_iframe" width="69%" height="700px" src="imgbook/算法图解.jpg"></iframe></body></html></code></pre> <img src="https://img-blog.csdnimg.cn/1378f50d967e4ed7831b14e04ecf7805.png" alt="【Web前端】——HTML基础知识总结" alt="在这里插入图片描述" /> <h3>3.1.1练习：邮箱</h3> <h4>登录首页</h4> <pre><code class="prism language-html"><!DOCTYPE html><html><head><meta charset="UTF-8"><title>登录首页</title></head><body><button>用户名</button>:<input type="text" /><br /><button>密 码</button>:<input type="password" /><br /><a href="邮箱首页.html" target="_blank">登 录</a></body></html></code></pre> <img src="https://img-blog.csdnimg.cn/889410916d214940b06d96181577adbf.png" alt="【Web前端】——HTML基础知识总结" alt="在这里插入图片描述" /> <h4>邮箱首页</h4> <pre><code class="prism language-html"><!DOCTYPE html><html><head><meta charset="UTF-8"><title>邮箱首页</title></head><body><iframe width="100%" height="100px" src="邮箱上侧页面.html"></iframe><iframe width="20%" height="600px" src="邮箱左侧页面.html"></iframe><iframe name="right_iframe" width="79%" height="600px"></iframe></body></html></code></pre> <img src="https://img-blog.csdnimg.cn/97bb9dda8848478aa9a5cdeb806dd01e.png" alt="【Web前端】——HTML基础知识总结" alt="在这里插入图片描述" /> <h4>邮箱上侧</h4> <pre><code class="prism language-html"><!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><h1>欢迎<font color="aqua">Flyme awei</font>来到邮箱</h1></body></html></code></pre> <img src="https://img-blog.csdnimg.cn/c4b2e8a5505040e5907555fcda390f11.png" alt="【Web前端】——HTML基础知识总结" alt="在这里插入图片描述" /> <h4>邮箱左侧</h4> <pre><code class="prism language-html"><!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><ul><li><a target="right_iframe">写信</a></li><li><a target="right_iframe">收信</a></li><li><a target="right_iframe">通讯录</a></li></ul></body></html></code></pre> <h2>3.2框架集合</h2> <blockquote> <code>frameset</code> 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，<code>frameset</code> 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 <code>cols</code> 或 <code>rows</code> 属性。 里面如果只有一个框架用<code>frame</code>标签，如果多个框架用<code>frameset</code>标签，用<code>cols</code> 或 <code>rows</code>进行行，列的切割 </blockquote> <pre><code class="prism language-html"><!DOCTYPE html><html><head><meta charset="UTF-8"><title>框架集合</title></head><frameset rows="20%,*,30%"><frame /><frameset cols="33%,*,33%"><frame /><frame /><frame /></frameset><frameset cols="50%,*"><frame /><frame /></frameset></frameset></html></code></pre> <img src="https://img-blog.csdnimg.cn/49af62a11a6d487c9fad3301ba76b220.png" alt="【Web前端】——HTML基础知识总结" alt="在这里插入图片描述" /> <hr /> <h1>四、form表单</h1> <h2>4.1form表单作用</h2> <blockquote> 表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个Html 文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。这里我们只讲怎样使用Html 标志来设计表单。 所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。 一个表单一般应该包含用户填写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。 </blockquote> <img src="https://img-blog.csdnimg.cn/ff17d631e3b64629b779198d2162d1e6.png" alt="【Web前端】——HTML基础知识总结" alt="在这里插入图片描述" /> <blockquote> 表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个Html 文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。这里我们只讲怎样使用Html 标志来设计表单。 </blockquote> <blockquote> 所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。 </blockquote> <blockquote> 一个表单一般应该包含用户填写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。 </blockquote> <h2>4.2forme表单细节</h2> <h3>name属性</h3> <blockquote> 表单提交时的名称 </blockquote> <h3>action属性</h3> <blockquote> 提交到的地址 </blockquote> <h3>method 属性</h3> <blockquote> 默认情况下不写method属性的时候就相当于method=“get” get：提交的数据可见，不安全 post：提交的数据不可见,安全. </blockquote> <pre><code class="prism language-html"><!DOCTYPE html><html><head><meta charset="UTF-8" method="get"><title>frome表单</title></head><body><form action="提交到目标资源路径"><button>用户名</button>：<input type="text" name="username"/><br /><button>密 码</button>：<input type="password" name="pwd"/><input type="submit" /></form></body></html></code></pre> <pre><code class="prism language-html"></code></pre> <img src="https://img-blog.csdnimg.cn/e7a46fec5d584f8496b9ae9de0663830.png" alt="【Web前端】——HTML基础知识总结" alt="在这里插入图片描述" />因为action="提交到目标资源路径’’ ,这个路径没有，所以未找到文件。 <h2>4.3form表单练习:模拟百度搜索</h2> <pre><code class="prism language-html"><!DOCTYPE html><html><head><meta charset="UTF-8"><title>百度一下，你就知道</title><link rel="icon" sizes="any" mask href="//www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"></head><body><form action="https://www.baidu.com/s" method="get"><input type="text" name="wd"/><input type="submit" value="百度一下"/></form></body></html></code></pre> <img src="https://img-blog.csdnimg.cn/8c533d6457a4466895ab06ccf4e78db3.png" alt="【Web前端】——HTML基础知识总结" alt="在这里插入图片描述" /> <h2>4.4表单元素</h2> <blockquote> form表单中可以放入的标签就是表单元素 </blockquote> <h3>4.4.1文本框</h3> <blockquote> <code>input</code>标签用途很广泛，通过<code>type</code>属性值的不同，来表现不同的形态。 </blockquote> <blockquote> <code>type="test"</code> 文本框，里面的文字可见 </blockquote> <blockquote> 表单元素必须有一个属性<code>：name</code> 有了<code>name</code>才可以采集提交数据 提交的时候会以键值对的形式拼接在一起 </blockquote> <blockquote> <code>value</code>属性：文本框中的具体内容。 键值对：<code>name=value</code>的形式 如果<code>value</code>提前写好，那么默认效果就是<code>value</code>中的内容。 一般默认提示语：用<code>placeholder</code>，不会用<code>value</code>，<code>value</code>只是文本框中的值 </blockquote> <blockquote> <code>readonly</code>只读：只是不能修改，可以正常提交 <code>disable</code>：禁用，不能提交 </blockquote> <h3>4.4.2密码框</h3> <blockquote> <code>type="password"</code> </blockquote> <h3>4.4.3单选按钮</h3> <blockquote> –单选按钮 注意：一组单选按钮，必须通过<code>name</code>属性来控制，让他们在同一个分组中 正常情况下，提交数据为：<code>gender</code>为<code>on</code>，通过不同的<code>value</code>值来控制 默认选中：<code>checked="checked"</code> </blockquote> <h3>4.4.4多选按钮</h3> <blockquote> <code>type="checkbox"</code> </blockquote> <h3>4.4.5文件</h3> <blockquote> <code>type="file"</code> </blockquote> <h3>4.4.6影藏域</h3> <blockquote> <code>type="hidden"</code> </blockquote> <h3>4.4.7普通按钮</h3> <blockquote> <code>type="button"</code> </blockquote> <h3>4.4.8重置按钮</h3> <blockquote> <code>type="reset"</code> </blockquote> <h3>4.4.9提交按钮</h3> <blockquote> <code>type="submit"</code> </blockquote> <h3>4.4.10下拉按钮</h3> <blockquote> 下拉列表:<code></code>标签 默认选中<code>：selected="selected"</code> 多选：<code>multiple="multiple"</code> </blockquote> <h3>4.4.11多行文本框</h3> <blockquote> <code><textarea rows="10" cols="30"></code>请<a href="https://www.csdndoc.com/tag/%e5%9c%a8%e8%bf%99%e9%87%8c" title="View all posts in 在这里" target="_blank" style="color:#0ec3f3;font-size: 18px;font-weight: 600;">在这里</a>填写信息<code></textarea></code> </blockquote> <h3>4.4.12lable标签</h3> <blockquote> 一般会在想要获得焦点的标签上加一个<code>id</code>属性，然后<code>lable</code>中的for属性与<code>id</code>配合使用 </blockquote> 全部代码： <pre><code class="prism language-html"><!DOCTYPE html><html><head><meta charset="UTF-8"><title>表单元素</title></head><body><form action="" method="get"><h1><font color="antiquewhite">请输入身份信息</font></h1><input type="text" name="uname" placeholder="请输入身份证信息"/><input type="password" name="pwd" id="" value="" placeholder="请输入密码"/><input type="text" value="请检查信息" readonly="readonly"/><input type="radio" name="gender" value="0" checked="checked"/>男<input type="radio" name="gender" value="1"/>女<br /><h1><font color="aqua">你喜欢的语言</font></h1><input type="checkbox" name="favlan" value="0"/>java<input type="checkbox" name="favlan" value="1"/>python<input type="checkbox" name="favlan" value="2"/>php<input type="checkbox" name="favlan" value="3"/>javascript<input type="file" /><input type="hidden" name="uname2" value="6666"/><input type="button" name="" id="" value="" /><input type="reset" /><img src="img/1d08d8edcc7c432cb36ec517d5d859b0.png" /><input type="image" /><br />你喜欢的城市：<select name="city" multiple="multiple"><option value="0" selected="selected">昆明</option><option value="1">长沙</option><option value="2">青岛</option><option value="3">大理</option><option value="4">丽江</option></select><br /><br />自我介绍：<textarea style="resize: none;" rows="10" cols="30">请在这里填写信息</textarea><br /><br /><label for="uname">用户名：</lable></lable></liable><input type="text" name="username" id="uname"/><input type="submit" value="提交"/></form></body></html></code></pre> 页面汇总： <img src="https://img-blog.csdnimg.cn/4956ea69f4ff41c381570901315ce8d4.png" alt="【Web前端】——HTML基础知识总结" alt="在这里插入图片描述" /> <h1>五、HTML5新增</h1> <h2>5.1新增type类型</h2> <pre><code class="prism language-html"><!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="" method="get">  <input type="email" name="email" />  <input type="url" />  <input type="color" />  <input type="number" min="1" max="10" step="3" value="4"/>  1<input type="range" min="1" max="10" name="range" step="3"/>10  <input type="date" />  <input type="month" />  <input type="week" />  <input type="submit" /> </form> </body></html></code></pre> <h2>5.2新增属性</h2> <pre><code class="prism language-html"><!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><select multiple="multiple"></select><input type="text" autofocus="autofocus" /><input type="text" required="required" /></body></html></code></pre> <hr /> <h1>总结</h1> <blockquote> 学习HTML就是学习各种各样的标签，然后组成一个页面，这个页面可以被浏览器解析，解析完以后可以在浏览器中将页面进行展示。 </blockquote> <img src="https://img-blog.csdnimg.cn/1de6d9e4c9c44a11b311737625984211.png#pic_center" alt="在这里插入图片描述" /> 注：部分素材来源于网络，如有侵权请联系博主删除。 <a href="http://www.mkfeng.com" target="_blank">麦克风网</a> </div> <div class="clear"></div> <div class="article_tags"> <div class="tagcloud"> 网络标签：<a href="https://www.csdndoc.com/tag/%e5%9c%a8%e8%bf%99%e9%87%8c" rel="tag">在这里</a> <a href="https://www.csdndoc.com/tag/%e6%a0%87%e7%ad%be" rel="tag">标签</a> <a href="https://www.csdndoc.com/tag/%e8%a1%a8%e5%8d%95" rel="tag">表单</a> </div> </div> </div> </div> <div> <ul class="post-navigation row"> <div class="post-previous twofifth"> 上一篇 <a href="https://www.csdndoc.com/doc/16680.html" rel="prev">【python笔试①】——列表推导式（列表解析式）题目</a> </div> <div class="post-next twofifth"> 下一篇 <a href="https://www.csdndoc.com/doc/16682.html" rel="next">【Python面向对象进阶⑥】——元类</a> </div> </ul> </div> <div class="article_container row box article_related"> <div class="related"> <div class="newrelated"> <h2>相关问题</h2> <ul> <li><a href="https://www.csdndoc.com/doc/4629.html">Java手写线程池-第二代（原创）</a></li> <li><a href="https://www.csdndoc.com/doc/7754.html">到底什么是云原生？下一个内卷？</a></li> <li><a href="https://www.csdndoc.com/doc/2350.html">【Vuex深入以及模块化编码】</a></li> <li><a href="https://www.csdndoc.com/doc/3826.html">List的模拟实现和实现中遇见的一些问题C++</a></li> <li><a href="https://www.csdndoc.com/doc/7978.html">W801_FreeRtos-学习</a></li> <li><a href="https://www.csdndoc.com/wzlb/20539.html">古代的元宵节持续几天</a></li> <li><a href="https://www.csdndoc.com/doc/5109.html">如何查看mysql数据库操作记录日志，以及开启mysql日志</a></li> <li><a href="https://www.csdndoc.com/wzlb/23600.html">小程序可以个人开发吗</a></li> <li><a href="https://www.csdndoc.com/doc/6728.html">PCF8951 A/D转换模块</a></li> <li><a href="https://www.csdndoc.com/wzlb/20184.html">元宵节是祈福节吗吗</a></li> </ul> </div> </div> </div> <div class="clear"></div> <div id="comments_box"> </div> </div> <div id="sidebar"> <div id="sidebar-follow"> <div class="search box row"> <div class="search_site"> <form id="searchform" method="get" action="https://www.csdndoc.com/index.php"> <button type="submit" value="" id="searchsubmit" class="button">☚</button> <label><input type="text" class="search-s" name="s" x-webkit-speech="" placeholder="请输入搜索内容"></label> </form></div></div> <div class="widget_text widget box row widget_custom_html"><h3>公告</h3><div class="textwidget custom-html-widget"><style> .custom-html-widget p { font-family: 'Arial', sans-serif; font-size: 26px; line-height: 1.5; text-align: justify; margin-bottom: 20px; color: black; } </style> 水利万物而不争, 而万物莫能与之争。</div></div> <div class="widget box row widget_tag_cloud"><h3>标签</h3><div class="tagcloud"><a href="https://www.csdndoc.com/tag/%e4%bb%a3%e7%a0%81" class="tag-cloud-link tag-link-19 tag-link-position-1" style="font-size: 13.965217391304pt;" aria-label="代码 (786个项目)">代码</a> <a href="https://www.csdndoc.com/tag/%e5%85%83%e7%b4%a0" class="tag-cloud-link tag-link-500 tag-link-position-2" style="font-size: 12.747826086957pt;" aria-label="元素 (629个项目)">元素</a> <a href="https://www.csdndoc.com/tag/%e5%87%bd%e6%95%b0" class="tag-cloud-link tag-link-111 tag-link-position-3" style="font-size: 15.791304347826pt;" aria-label="函数 (1,123个项目)">函数</a> <a href="https://www.csdndoc.com/tag/%e5%8a%9f%e8%83%bd" class="tag-cloud-link tag-link-294 tag-link-position-4" style="font-size: 9.9478260869565pt;" aria-label="功能 (371个项目)">功能</a> <a href="https://www.csdndoc.com/tag/%e5%8f%82%e6%95%b0" class="tag-cloud-link tag-link-680 tag-link-position-5" style="font-size: 9.4608695652174pt;" aria-label="参数 (335个项目)">参数</a> <a href="https://www.csdndoc.com/tag/%e5%8f%98%e9%87%8f" class="tag-cloud-link tag-link-81 tag-link-position-6" style="font-size: 11.165217391304pt;" aria-label="变量 (470个项目)">变量</a> <a href="https://www.csdndoc.com/tag/%e5%91%bd%e4%bb%a4" class="tag-cloud-link tag-link-570 tag-link-position-7" style="font-size: 9.4608695652174pt;" aria-label="命令 (336个项目)">命令</a> <a href="https://www.csdndoc.com/tag/%e5%9c%a8%e8%bf%99%e9%87%8c" class="tag-cloud-link tag-link-33 tag-link-position-8" style="font-size: 21.147826086957pt;" aria-label="在这里 (3,056个项目)">在这里</a> <a href="https://www.csdndoc.com/tag/%e5%ad%97%e7%ac%a6%e4%b8%b2" class="tag-cloud-link tag-link-556 tag-link-position-9" style="font-size: 10.678260869565pt;" aria-label="字符串 (428个项目)">字符串</a> <a href="https://www.csdndoc.com/tag/%e5%ae%b9%e5%99%a8" class="tag-cloud-link tag-link-332 tag-link-position-10" style="font-size: 9.4608695652174pt;" aria-label="容器 (338个项目)">容器</a> <a href="https://www.csdndoc.com/tag/%e5%af%b9%e8%b1%a1" class="tag-cloud-link tag-link-175 tag-link-position-11" style="font-size: 14.208695652174pt;" aria-label="对象 (831个项目)">对象</a> <a href="https://www.csdndoc.com/tag/%e5%b1%9e%e6%80%a7" class="tag-cloud-link tag-link-468 tag-link-position-12" style="font-size: 9.5826086956522pt;" aria-label="属性 (344个项目)">属性</a> <a href="https://www.csdndoc.com/tag/%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f" class="tag-cloud-link tag-link-39 tag-link-position-13" style="font-size: 10.434782608696pt;" aria-label="应用程序 (407个项目)">应用程序</a> <a href="https://www.csdndoc.com/tag/%e6%89%8b%e6%9c%ba" class="tag-cloud-link tag-link-28 tag-link-position-14" style="font-size: 10.069565217391pt;" aria-label="手机 (378个项目)">手机</a> <a href="https://www.csdndoc.com/tag/%e6%8c%87%e9%92%88" class="tag-cloud-link tag-link-849 tag-link-position-15" style="font-size: 8.1217391304348pt;" aria-label="指针 (262个项目)">指针</a> <a href="https://www.csdndoc.com/tag/%e6%8e%a5%e5%8f%a3" class="tag-cloud-link tag-link-110 tag-link-position-16" style="font-size: 10.313043478261pt;" aria-label="接口 (400个项目)">接口</a> <a href="https://www.csdndoc.com/tag/%e6%8f%92%e5%85%a5%e5%9b%be%e7%89%87" class="tag-cloud-link tag-link-336 tag-link-position-17" style="font-size: 16.765217391304pt;" aria-label="插入图片 (1,344个项目)">插入图片</a> <a href="https://www.csdndoc.com/tag/%e6%93%8d%e4%bd%9c" class="tag-cloud-link tag-link-179 tag-link-position-18" style="font-size: 9.8260869565217pt;" aria-label="操作 (366个项目)">操作</a> <a href="https://www.csdndoc.com/tag/%e6%95%b0%e6%8d%ae" class="tag-cloud-link tag-link-97 tag-link-position-19" style="font-size: 17.860869565217pt;" aria-label="数据 (1,655个项目)">数据</a> <a href="https://www.csdndoc.com/tag/%e6%95%b0%e6%8d%ae%e5%ba%93" class="tag-cloud-link tag-link-92 tag-link-position-20" style="font-size: 9.4608695652174pt;" aria-label="数据库 (336个项目)">数据库</a> <a href="https://www.csdndoc.com/tag/%e6%95%b0%e7%bb%84" class="tag-cloud-link tag-link-671 tag-link-position-21" style="font-size: 13.113043478261pt;" aria-label="数组 (669个项目)">数组</a> <a href="https://www.csdndoc.com/tag/%e6%96%87%e4%bb%b6" class="tag-cloud-link tag-link-109 tag-link-position-22" style="font-size: 15.791304347826pt;" aria-label="文件 (1,118个项目)">文件</a> <a href="https://www.csdndoc.com/tag/%e6%96%b9%e6%b3%95" class="tag-cloud-link tag-link-112 tag-link-position-23" style="font-size: 15.304347826087pt;" aria-label="方法 (1,030个项目)">方法</a> <a href="https://www.csdndoc.com/tag/%e6%97%b6%e9%97%b4" class="tag-cloud-link tag-link-21 tag-link-position-24" style="font-size: 8.3652173913043pt;" aria-label="时间 (276个项目)">时间</a> <a href="https://www.csdndoc.com/tag/%e6%a8%a1%e5%9e%8b" class="tag-cloud-link tag-link-49 tag-link-position-25" style="font-size: 8.1217391304348pt;" aria-label="模型 (263个项目)">模型</a> <a href="https://www.csdndoc.com/tag/%e7%89%88%e6%9c%ac" class="tag-cloud-link tag-link-15 tag-link-position-26" style="font-size: 9.095652173913pt;" aria-label="版本 (315个项目)">版本</a> <a href="https://www.csdndoc.com/tag/%e7%94%a8%e6%88%b7" class="tag-cloud-link tag-link-100 tag-link-position-27" style="font-size: 15.182608695652pt;" aria-label="用户 (1,002个项目)">用户</a> <a href="https://www.csdndoc.com/tag/%e7%94%b5%e8%84%91" class="tag-cloud-link tag-link-564 tag-link-position-28" style="font-size: 9.704347826087pt;" aria-label="电脑 (352个项目)">电脑</a> <a href="https://www.csdndoc.com/tag/%e7%9a%84%e6%98%af" class="tag-cloud-link tag-link-41 tag-link-position-29" style="font-size: 8.4869565217391pt;" aria-label="的是 (280个项目)">的是</a> <a href="https://www.csdndoc.com/tag/%e7%a8%8b%e5%ba%8f" class="tag-cloud-link tag-link-102 tag-link-position-30" style="font-size: 22pt;" aria-label="程序 (3,671个项目)">程序</a> <a href="https://www.csdndoc.com/tag/%e7%a8%8b%e5%ba%8f%e5%91%98" class="tag-cloud-link tag-link-58 tag-link-position-31" style="font-size: 11.165217391304pt;" aria-label="程序员 (471个项目)">程序员</a> <a href="https://www.csdndoc.com/tag/%e7%ae%97%e6%b3%95" class="tag-cloud-link tag-link-225 tag-link-position-32" style="font-size: 8.4869565217391pt;" aria-label="算法 (284个项目)">算法</a> <a href="https://www.csdndoc.com/tag/%e7%b1%bb%e5%9e%8b" class="tag-cloud-link tag-link-273 tag-link-position-33" style="font-size: 8.8521739130435pt;" aria-label="类型 (300个项目)">类型</a> <a href="https://www.csdndoc.com/tag/%e7%b3%bb%e7%bb%9f" class="tag-cloud-link tag-link-138 tag-link-position-34" style="font-size: 10.55652173913pt;" aria-label="系统 (417个项目)">系统</a> <a href="https://www.csdndoc.com/tag/%e7%ba%bf%e7%a8%8b" class="tag-cloud-link tag-link-463 tag-link-position-35" style="font-size: 11.895652173913pt;" aria-label="线程 (532个项目)">线程</a> <a href="https://www.csdndoc.com/tag/%e7%bb%84%e4%bb%b6" class="tag-cloud-link tag-link-523 tag-link-position-36" style="font-size: 10.8pt;" aria-label="组件 (438个项目)">组件</a> <a href="https://www.csdndoc.com/tag/%e8%87%aa%e5%b7%b1%e7%9a%84" class="tag-cloud-link tag-link-5 tag-link-position-37" style="font-size: 14.695652173913pt;" aria-label="自己的 (915个项目)">自己的</a> <a href="https://www.csdndoc.com/tag/%e8%8a%82%e7%82%b9" class="tag-cloud-link tag-link-676 tag-link-position-38" style="font-size: 12.382608695652pt;" aria-label="节点 (583个项目)">节点</a> <a href="https://www.csdndoc.com/tag/%e8%ae%be%e5%a4%87" class="tag-cloud-link tag-link-25 tag-link-position-39" style="font-size: 8.1217391304348pt;" aria-label="设备 (264个项目)">设备</a> <a href="https://www.csdndoc.com/tag/%e8%af%ad%e8%a8%80" class="tag-cloud-link tag-link-36 tag-link-position-40" style="font-size: 9.704347826087pt;" aria-label="语言 (353个项目)">语言</a> <a href="https://www.csdndoc.com/tag/%e8%bd%af%e4%bb%b6" class="tag-cloud-link tag-link-155 tag-link-position-41" style="font-size: 10.434782608696pt;" aria-label="软件 (404个项目)">软件</a> <a href="https://www.csdndoc.com/tag/%e9%98%9f%e5%88%97" class="tag-cloud-link tag-link-678 tag-link-position-42" style="font-size: 8pt;" aria-label="队列 (254个项目)">队列</a> <a href="https://www.csdndoc.com/tag/%e9%a1%b5%e9%9d%a2" class="tag-cloud-link tag-link-279 tag-link-position-43" style="font-size: 9.5826086956522pt;" aria-label="页面 (348个项目)">页面</a> <a href="https://www.csdndoc.com/tag/%e9%a1%b9%e7%9b%ae" class="tag-cloud-link tag-link-82 tag-link-position-44" style="font-size: 10.191304347826pt;" aria-label="项目 (387个项目)">项目</a> <a href="https://www.csdndoc.com/tag/%e9%b8%bf%e8%92%99" class="tag-cloud-link tag-link-136 tag-link-position-45" style="font-size: 8pt;" aria-label="鸿蒙 (257个项目)">鸿蒙</a></div> </div> <div class="widget box row"> <div id="tab-title"> <div class="tab"> <ul id="tabnav"> <li class="selected">猜你想看的文章</li> </ul> </div> <div class="clear"></div> </div> <div id="tab-content"> <ul> <li><a href="https://www.csdndoc.com/doc/3747.html">01.深入理解乱码的原理</a></li> <li><a href="https://www.csdndoc.com/doc/4284.html">数商云橡胶行业一体化解决方案丨提高产业链协同，实现稳定发展</a></li> <li><a href="https://www.csdndoc.com/wzlb/26967.html">黄奕为什么离婚呢（黄奕为什么离婚）</a></li> <li><a href="https://www.csdndoc.com/doc/13097.html">【JUC并发编程】详解Java关键字之 volatile</a></li> <li><a href="https://www.csdndoc.com/wzlb/23159.html">微信答题小程序有哪些</a></li> <li><a href="https://www.csdndoc.com/doc/10517.html">从spring boot到spring cloud（一）服务的发展史</a></li> <li><a href="https://www.csdndoc.com/doc/5574.html">【操作系统】进程的切换与控制·到底有啥关系？</a></li> <li><a href="https://www.csdndoc.com/doc/5127.html">一站式机器学习开业平台 MLflow 怎么样？</a></li> <li><a href="https://www.csdndoc.com/doc/8979.html">Android内存优化（一）内存泄露监测与问题排查</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="clear"></div> <div id="footer"> <div class="container"> <div class="twothird"> </div> </div> <div class="container"> <div class="twothird"> <div class="copyright"> Copyright © 2012 - 2024 <a href="https://www.csdndoc.com/">程序员档案馆</a> Powered by <a href="/lists">网站分类目录</a> | <a href="/top100.php" target="_blank">精选推荐文章</a> | <a href="/sitemap.xml" target="_blank">网站地图</a> <a href="https://beian.miit.gov.cn/" rel="external">陕ICP备05009492号</a> 声明：本站内容来自互联网，如信息有错误可发邮件到f_fb#foxmail.com说明，我们会及时纠正，谢谢 本站仅为个人兴趣爱好，不接盈利性广告及商业合作 </div> </div> <div class="third"> <a href="http://www.xiaoboy.cn" target="_blank">小男孩</a> </div> </div> </div>  <div id="tbox"> <a id="home" href="https://www.csdndoc.com" title="返回首页"></a> <a id="pinglun" href="#comments_box" title="前往评论"></a> <a id="gotop" href="javascript:void(0)" title="返回顶部"></a> </div> <script src="//css.5d.ink/body5.js" type="text/javascript"></script> <script> function isMobileDevice() { return /Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent) || /iPhone|iPad|iPod/i.test(navigator.userAgent) || /Windows Phone/i.test(navigator.userAgent); } // 加载对应的 JavaScript 文件 if (isMobileDevice()) { var script = document.createElement('script'); script.src = '//css.5d.ink/js/menu.js'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } </script> <script> $(document).ready(function() { $("#sidebar-follow").pin({ containerSelector: ".main-container", padding: {top:64}, minWidth: 768 }); $(".mainmenu").pin({ containerSelector: ".container", padding: {top:0} }); $(".swipebox").swipebox(); }); </script> </body></html>