目录

一、什么是HTML

二、HTML的基本结构:

三、结构与属性:

四、常见标签:


一、什么是HTML

HTML:超文本标记语言(HyperText Markup Language)
超文本:指的是网页中可以显示的内容(图片,超链接,视频…)
标记语言:标记–>标签(标注)买东西–>商品标签(价格,材质,型号…)
标记语言中,就是提供了许多的标签,不同标签有不同的功能,
最终运行时,由浏览器对标前进行解析,最终呈现出不同标签的样子

二、HTML的基本结构:

ARuiiiiiii

1.:声明html语言的版本 html5

2.:html标签是标记语言中根标签

3.:head 为标签头

4.:是设定编码形式,UTF-8 就是在互联网上使用最广的一种 Unicode 的实现方式。

5.</strong>:title是设置标题</p><p><strong>6.</strong>:网页身体,可以在其中编写可见所需内容</p><h3>三、结构与属性:</h3><p>在讲常用标签之前,来解释一下标签相关知识点:</p><p><strong>标签结构:</strong><br /> 标签体双标签<br /> 自闭合标签,没有修饰的内容,只是完成某个功能单标签</p><p><strong>注意:双标签的”/”在结束标签之前,单标签”/”在标签名之后</strong></p><p><strong></strong></p><pre><code class="language-html"><b>aaa</b><br /></code></pre><p><strong>标签的属性:</strong></p><p>可以通过改变标签属性,设置标签显示的格式<br /> 属性必须写在开始标签中<br /> 属性格式 属性名=”值”<br /> 一个标签中可以写多个属性</p><p>例如:</p><pre><code class="language-html"><font color="blue" size="4">百度</font></code></pre><p>就是设定标签体(即:百度)的颜色和大小</p><p>标签也可改变属性:</p><pre><code class="language-html"></code></pre><p>bgcolor=”blue”即将整个网页背景改为蓝色</p><h3>四、常见标签:</h3><p><strong>1.标题标签:</strong></p><p><h1></h1><p>…</p><h6></h6><p> 每一个标题标签会独占一行<br /> align=”” 控制标签内容在标签体中水平对齐方式(align=”center”即水平居中)</p><pre><code class="language-html"><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h1 align="center"><font>1级标签</font></h1><h2 align="right">2级标签</h2></code></pre><p>图示:</p><p><noscript><img decoding="async" class="aligncenter" src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/79e60278612d427d8b718c8e903691a7.png" /></noscript><img decoding="async" class="lazyload aligncenter" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/79e60278612d427d8b718c8e903691a7.png" /></p><p> <strong> 2.标尺线:</strong>换行标签</p><hr /><p>用于换行加分割线</p><p><strong>3.段落标签:</strong></p><pre><code class="language-html"><hr /><p>二叉搜索树是一种数据结构,用于存储数据并支持快速的插入、删除和搜索操作。它是一种树形结构。</p><p>二叉搜索树的高效性与其关键字的特性密切相关。</p></code></pre><p>图示:</p><p><noscript><img decoding="async" class="aligncenter" src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/070bc342dc884dca9352a0a8784d7950.png" /></noscript><img decoding="async" class="lazyload aligncenter" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/070bc342dc884dca9352a0a8784d7950.png" /></p><p><strong>4.列表:</strong></p><p>无序列表:</p><ul></ul></p><p>即标签体呈现的内容前没有序号,自动换行</p><p>有序列表:</p><ol></ol></p><p>即标签体呈现的内容前有序号,自动换行</p><pre><code class="language-html">列表无序列表<ul type="square"><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li></ul>有序列表<ol><li>列表5</li><li>列表6</li><li>列表7</li><li>列表8</li></ol></code></pre><p>图示:</p><p><noscript><img decoding="async" class="aligncenter" src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/4b66452ea1934530a846711612b7a7b9.png" /></noscript><img decoding="async" class="lazyload aligncenter" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/4b66452ea1934530a846711612b7a7b9.png" /></p><p><strong>5.超链接:</strong></p><p>:HTML 使用超级链接与网络上的另一个文档相连,通俗的说就是通过连接来访问其他网页资源</p><p>href=”网页的地址”<br /> target=”_blank”在新窗口打开目标网页<br /> target=”_self”在当前窗口打开一个新网页 (target:默认值为_self)</p><pre><code class="language-html">百度</code></pre><p><noscript><img decoding="async" class="aligncenter" src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/0b388ff7adb241abbf685803e8d72917.png" /></noscript><img decoding="async" class="lazyload aligncenter" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/0b388ff7adb241abbf685803e8d72917.png" /></p><p>点击标签体“百度”后就会跳到地址对应的页面</p><p>6.图像标签:</p><p><noscript><img decoding="async" class="aligncenter" src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/e894d09e3e7f43aea26f2f7cada1590a.png" /></noscript><img decoding="async" class="lazyload aligncenter" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/e894d09e3e7f43aea26f2f7cada1590a.png" /></p><p>7.特殊符号转义:</p><p>在HTML中预留了一些字符,这些预留字符是不能在网页中直接使用的,例如空格或一些特殊标志。</p><p>1)&lt和&bt:分别代表符号“”</p><p>2)&nbsp代表一个空格</p><p>3)&reg表示注册商标</p><p>4)&copy表示版权</p><pre><code class="language-html"><b>标签的功能是加粗文字<hr />®©</code></pre><p>图示:</p><p><noscript><img decoding="async" class="aligncenter" src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/9b7a5255fcb5405fa0ce87c89e14e1ee.png" /></noscript><img decoding="async" class="lazyload aligncenter" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/9b7a5255fcb5405fa0ce87c89e14e1ee.png" /></p></article></div><div class="related-posts"><h2 class="related-posts-title"><i class="fab fa-hive me-1"></i>相关文章</h2><div class="row g-2 g-md-3 row-cols-2 row-cols-md-3 row-cols-lg-4"><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/26601/" title="五金轴尺寸机器视觉测量软硬件方案–康耐德智能" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/img_convert/c50e28994912a425260910f0eb066198.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/26601/" title="五金轴尺寸机器视觉测量软硬件方案–康耐德智能">五金轴尺寸机器视觉测量软硬件方案–康耐德智能</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/32146/" title="网格交易具体实操步骤,详细攻略" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/d5e9c8f249b24ed3a95ab44868eb8850.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/32146/" title="网格交易具体实操步骤,详细攻略">网格交易具体实操步骤,详细攻略</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/14193/" title="野心藏住不住了!OpenAI或在悄悄聘请国际承包商,以培训其软件工程方面的人工智能。" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/img_convert/ea986a281b557b1d82784bd8a1e46ab8.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/14193/" title="野心藏住不住了!OpenAI或在悄悄聘请国际承包商,以培训其软件工程方面的人工智能。">野心藏住不住了!OpenAI或在悄悄聘请国际承包商,以培训其软件工程方面的人工智能。</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/2890/" title="2021国防科技大学计算机学院无军籍考研409分经验贴(数一+英一+834)" data-bg="https://img.inotgo.com/imagesLocal/202209/23/202209230625390847_8.jpg"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/2890/" title="2021国防科技大学计算机学院无军籍考研409分经验贴(数一+英一+834)">2021国防科技大学计算机学院无军籍考研409分经验贴(数一+英一+834)</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/25806/" title="Web应用三层架构和Java后端(应用层)三层架构" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/45846b9f7656430d858b2fcb662dbdd1.jpeg"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/25806/" title="Web应用三层架构和Java后端(应用层)三层架构">Web应用三层架构和Java后端(应用层)三层架构</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/1626/" title="驳”一切不谈考核的管理都是扯淡”" data-bg="https://img.maxssl.com/uploads/?url=https://img2022.cnblogs.com/blog/2753310/202207/2753310-20220715171435427-754319490.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/1626/" title="驳”一切不谈考核的管理都是扯淡”">驳”一切不谈考核的管理都是扯淡”</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/40231/" title="山西电力市场日前价格预测【2023-12-26】" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/1518acbdab4a4784b00dd54e855a7e22.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/40231/" title="山西电力市场日前价格预测【2023-12-26】">山西电力市场日前价格预测【2023-12-26】</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/40576/" title="前端实现图片转Base64" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/5f50c6918d974ec18a47360264a36ac9.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/40576/" title="前端实现图片转Base64">前端实现图片转Base64</a></h2></div></article></div></div></div></div><div class="sidebar-wrapper col-md-12 col-lg-3 h-100" data-sticky><div class="sidebar"><div id="recent-posts-4" class="widget widget_recent_entries"><h5 class="widget-title">最新关注</h5><ul><li> <a href="https://www.maxssl.com/article/57859/">【MySQL】InnoDB存储引擎</a></li><li> <a href="https://www.maxssl.com/article/57858/">DB-GPT:强强联合Langchain-Vicuna的应用实战开源项目,彻底改变与数据库的交互方式</a></li><li> <a href="https://www.maxssl.com/article/57857/">TigerBeetle:世界上最快的会计数据库</a></li><li> <a href="https://www.maxssl.com/article/57856/">【SQL server】玩转SQL server数据库:第三章 关系数据库标准语言SQL(二)数据查询</a></li><li> <a href="https://www.maxssl.com/article/57855/">马斯克400条聊天记录被法院公开,原来推特收购是在短信上谈崩的</a></li><li> <a href="https://www.maxssl.com/article/57854/">戏精摩根大通:从唱空比特币到牵手贝莱德</a></li></ul></div><div id="ri_sidebar_posts_widget-2" class="widget sidebar-posts-list"><h5 class="widget-title">热文推荐</h5><div class="row g-3 row-cols-1"><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/30132/" title="网络基础" data-bg="https://img.maxssl.com/uploads/?url=https://img2023.cnblogs.com/blog/3222269/202310/3222269-20231011182737912-1871308528.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/30132/" title="网络基础">网络基础</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/50298/" title="【Java】IDEA 配置java开发环境(windows)" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/16e066c9a2ce453e827e62fb2f2499b1.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/50298/" title="【Java】IDEA 配置java开发环境(windows)">【Java】IDEA 配置java开发环境(windows)</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/22134/" title="Django的数据库配置、生成(创建)过程、写入数据、查看数据的学习过程记录" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/4f2795e6156b4bdab97eeefbbde360fe.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/22134/" title="Django的数据库配置、生成(创建)过程、写入数据、查看数据的学习过程记录">Django的数据库配置、生成(创建)过程、写入数据、查看数据的学习过程记录</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/44930/" title="【C语言】指针" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/44930/" title="【C语言】指针">【C语言】指针</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/9946/" title="龙芯Ceph 集群手动部署(LoongArch架构、Ceph N版、手动部署MON、OSD、MGR、Dashboard服务)" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/9880251c26a747feb867427f62593812.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/9946/" title="龙芯Ceph 集群手动部署(LoongArch架构、Ceph N版、手动部署MON、OSD、MGR、Dashboard服务)">龙芯Ceph 集群手动部署(LoongArch架构、Ceph N版、手动部署MON、OSD、MGR、Dashboard服务)</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/1508/" title="FSO+递归生成文件列表(xml)" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/1508/" title="FSO+递归生成文件列表(xml)">FSO+递归生成文件列表(xml)</a></h2></div></div></article></div></div></div></div></div></div></div></main><footer class="site-footer py-md-4 py-2 mt-2 mt-md-4"><div class="container"><div class="text-center small w-100"><div>Copyright © <script>today=new Date();document.write(today.getFullYear());</script> maxssl.com 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">浙ICP备2022011180号</a></div><div class=""><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7656930379472324" crossorigin="anonymous"></script></div></div></div></footer><div class="rollbar"><ul class="actions"><li><a target="" href="https://www.maxssl.com/" rel="nofollow noopener noreferrer"><i class="fas fa-home"></i><span></span></a></li><li><a target="" href="http://wpa.qq.com/msgrd?v=3&uin=6666666&site=qq&menu=yes" rel="nofollow noopener noreferrer"><i class="fab fa-qq"></i><span></span></a></li></ul></div><div class="back-top"><i class="fas fa-caret-up"></i></div><div class="dimmer"></div><div class="off-canvas"><div class="canvas-close"><i class="fas fa-times"></i></div><div class="logo-wrapper"> <a class="logo text" href="https://www.maxssl.com/">MaxSSL</a></div><div class="mobile-menu d-block d-lg-none"></div></div> <script></script><noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://www.maxssl.com/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script><script src='//cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js' id='jquery-js'></script> <script src='//cdn.bootcdn.net/ajax/libs/highlight.js/11.7.0/highlight.min.js' id='highlight-js'></script> <script src='https://www.maxssl.com/wp-content/themes/ripro-v5/assets/js/vendor.min.js' id='vendor-js'></script> <script id='main-js-extra'>var zb={"home_url":"https:\/\/www.maxssl.com","ajax_url":"https:\/\/www.maxssl.com\/wp-admin\/admin-ajax.php","theme_url":"https:\/\/www.maxssl.com\/wp-content\/themes\/ripro-v5","singular_id":"43548","post_content_nav":"0","site_notify_auto":"0","current_user_id":"0","ajax_nonce":"d552a1f34b","gettext":{"__copypwd":"\u5bc6\u7801\u5df2\u590d\u5236\u526a\u8d34\u677f","__copybtn":"\u590d\u5236","__copy_succes":"\u590d\u5236\u6210\u529f","__comment_be":"\u63d0\u4ea4\u4e2d...","__comment_succes":"\u8bc4\u8bba\u6210\u529f","__comment_succes_n":"\u8bc4\u8bba\u6210\u529f\uff0c\u5373\u5c06\u5237\u65b0\u9875\u9762","__buy_be_n":"\u8bf7\u6c42\u652f\u4ed8\u4e2d\u00b7\u00b7\u00b7","__buy_no_n":"\u652f\u4ed8\u5df2\u53d6\u6d88","__is_delete_n":"\u786e\u5b9a\u5220\u9664\u6b64\u8bb0\u5f55\uff1f"}};</script> <script src='https://www.maxssl.com/wp-content/themes/ripro-v5/assets/js/main.min.js' id='main-js'></script> </body></html>