HTML常用标签超详细整理

 <h2>HTML概述</h2>

<h3>1.1 什么是HTML</h3>

<p>HTML是做网站的、Web开发、互联网生态开发(PC端+移动端+微应用) 目前我们使用的都是HTML5,支持传统的PC端开发，还支持移动端开发还支持微应用开发,从而替换了部分传统的移动端开发技术</p>

<h3>1.2  HTML概念</h3>

<p>HTML:Hyper Text Markup Language，超文本标记语言。是用来帮助我们构建网页的。</p>

<p>【超文本】：网页本身是一个文本文件，而超文本指的是这种文件中既可以包含文本信息，又可以包含图片，音频，视频和链接等非文字的信息。</p>

<p>【标记语言】：标记，也叫做标签。也就是说HTML这门语言是由标签组成的。</p>

<p>HTML的标签包含以下两种:</p>

<p>(1) 带有标签体的标签&lt; a&gt;标签体&lt; /a &gt;</p>

<p>(2) 不带标签体的标签(自结束标签)&lt; br/&gt;,&lt; hr/&gt;</p>

<p>HTML通过提前约定好的标签来构建我们的网页内容，通过浏览器来进行解释执行</p>

<p>浏览器是一个HTML的解释器，在浏览器中内置了一个解释器，该解释器中包含了所有HTML标签的展示风格</p>

<h2>HTML常用基础标签</h2>

<p>HTML文件的骨架:</p>

<p style="text-align: center"><img src="https://zsrimg.ikafan.com/file_images/article/202203/2022031715550677.jpg" alt="" /></p>

<p>Head标签：其中可以对网页进行整体设置 Body标签：是HTML的正文标签,我们在网页上能看到的内容都写在该标签中</p>

<p><mark>HTML的IDE工具</mark></p>

<p>(1) DW(Dreamweaver)</p>

<p>(2) HBuilder</p>

<p>(3) Subline</p>

<p>(4) VSCode</p>

<p>(5) WebStorm</p>

<p>(6) 记事本</p>

<p>(7) 其他编程语言的IDE工具</p>

<h3>标签的分类:</h3>

<p>1.带有标签体的标签，这种标签成对出现;有开始标签也有单独的结束标签,:&lt;html&gt;&lt;/html&gt;,&lt;head&gt;&lt;/head&gt;,&lt;body&gt;&lt;/body&gt;<br />

2.没有标签体的标签（空标签，自结束标签）,开始在结束在同一个标签中&lt;br /&gt;,&lt;hr /&gt;</p>

<h3>常用基本标签</h3>

<p><mark>1.标题标签hn(h1——h6)</mark></p>

<p style="text-align: center"><img src="https://zsrimg.ikafan.com/file_images/article/202203/2022031715550678.jpg" alt="" /></p>

<p><mark>2.字体标签(font)</mark></p>

<p style="text-align: center"><img src="https://zsrimg.ikafan.com/file_images/article/202203/2022031715550679.jpg" alt="" /></p>

<p><mark>3.段落标签（p）</mark></p>

<p style="text-align: center"><img src="https://zsrimg.ikafan.com/file_images/article/202203/2022031715550680.jpg" alt="" /></p>

<p>主要用于将一段内容包裹起来，便于后期的统一设置，p标签本身没有效果,标签内的内容与标签外的内容空一行（自动换行）</p>

<p><mark>4.换行标签(br)</mark></p>

<p><code>&lt; br/ &gt;</code>换行标签，中间不空行</p>

<p><mark>5.水平线标签(hr)</mark></p>

<p><mark></mark> <code>&lt; hr/ &gt;</code></p>

<p style="text-align: center"><img src="https://zsrimg.ikafan.com/file_images/article/202203/2022031715550681.jpg" alt="" /></p>

<p><mark>6.图片标签(img)</mark></p>

<p><code>&lt; img src=”图片地址” width=”宽度” height=”高度” / &gt;</code></p>

<p style="text-align: center"><img src="https://zsrimg.ikafan.com/file_images/article/202203/2022031715550682.jpg" alt="" /></p>

<p><mark>7.背景音乐(audio)</mark></p>

<p><code>&lt; audio src=”音乐” autoplay=“autoplay” loop=”loop”/ &gt;</code></p>

<p style="text-align: center"><img src="https://zsrimg.ikafan.com/file_images/article/202203/2022031715550683.jpg" alt="" /></p>

<p><mark>8.视频(video)</mark></p>

<p>在H5之前大多数视频使用flash插件实现的，但flash插件加载速度较慢，在H5之后专门提供了一个视频的标签;</p>

<p><mark>9.超链接标签(a)</mark></p>

<p>用法1：超链接:主要用于将多个页面关联到一起，使用超链接可以直接访问另一个页面;</p>

<p style="text-align: center"><img src="https://zsrimg.ikafan.com/file_images/article/202203/2022031715550684.jpg" alt="" /></p>

<p>通过base标签统一设置页面超链接的显示目标&lt; base target="_blank" / &gt; 用法2：用于锚记页面中的某个位置或其他页面中的某个位置</p>

<p style="text-align: center"><img src="https://zsrimg.ikafan.com/file_images/article/202203/2022031715550685.jpg" alt="" /></p>

<p style="text-align: center"><img src="https://zsrimg.ikafan.com/file_images/article/202203/2022031715550686.jpg" alt="" /></p>

<p><mark>10.列表标签</mark></p>

<p>(1)有序列表</p>

<p><code>&lt; ol &gt;</code></p>

<p><code> &lt; li &gt;列表项&lt; /li &gt; </code></p>

<p><code>&lt; /ol &gt;</code></p>

<p style="text-align: center"><img src="https://zsrimg.ikafan.com/file_images/article/202203/2022031715550687.jpg" alt="" /></p>

<p>(2)无序列表</p>

<p style="text-align: center"><img src="https://zsrimg.ikafan.com/file_images/article/202203/2022031715550788.jpg" alt="" /></p>

<p>(1) 自定义列表</p>

<p>dl：外围标签</p>

<p>dt：列表的标题标签</p>

<p>dd：设置列表的具体列表项</p>

<p style="text-align: center"><img src="https://zsrimg.ikafan.com/file_images/article/202203/2022031715550789.jpg" alt="" /></p>

<p><mark>11.marquee标签</mark></p>

<p style="text-align: center"><img src="https://zsrimg.ikafan.com/file_images/article/202203/2022031715551090.jpg" alt="" /></p>

<p style="text-align: center"><img src="https://zsrimg.ikafan.com/file_images/article/202203/2022031715551091.jpg" alt="" /></p>

<p><mark>12.文本设置标签</mark></p>

<p><code>&lt; b &gt;&lt; /b &gt;</code>字体加粗</p>

<p><code>&lt; i &gt;&lt; /i &gt;</code>设置斜体</p>

<p><code>&lt; u &gt;&lt; /u &gt;</code>设置文本下划线</p>

<p><code>&lt; s &gt;&lt; /s &gt;</code>在文本上设置一个删除线</p>

<p><mark>13.其他基本标签</mark></p>

<p><code>2&lt; sup &gt;n&lt; /sup &gt;</code>：设置上标</p>

<p><code>log&lt; sub&gt;10&lt; /sub&gt;10</code>:设置下标</p>

<p style="text-align: center"><img src="https://zsrimg.ikafan.com/file_images/article/202203/2022031715551092.jpg" alt="" /></p>

<p>以上就是HTML概述及常用标签，欢迎各位在评论区留言一起讨论学习~，如果觉得不错三连支持一下</p>

<p>到此这篇关于HTML常用标签超详细整理的文章就介绍到这了,更多相关HTML 标签内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！</p>