HTML标签（一）

<p> ：段落标签,表示一个文本的段落，默认上下有16px的外边距

<p>段落标记</p>

<h1>-<h6> : 标题标签，默认有外边距

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

<span> : 没有任何语义，主要是给css样式用。

<span>行内元素</span>

<br> :强制换行，只要遇到 <br> 就会换行

<p>1234567<br>7766</p>

<wbr> 不能显示整行才会换行，能显示完整行就不会换行。

<p>1234567<wbr>7766</p>

<hr> 显示一根横线，一般会用样式代替，一般不建议用了

<p>1234567<hr>7766</p>

<pre> 会保留用户输入的格式。

<pre>123456</pre>

<b> 加粗，没有任何语义。

<p>12345<b>677766</b></p>

<strong> 有加粗效果，有强调的语义，如果有强调的内容可以用该标签。

<p>12345<strong>677766</strong></p>

<i> 表示斜体，没有任何语义。

<p>12345<i>677766</i></p>

<em> 表示斜体，有强调的语义。

<p>12345<em>677766</em></p>

<sup> 上标， <sub> 下标， <var> 表示一个变量，默认是斜体效果

<p>12345<sup>6</sup>77667</p>
<p>12345<sub>6</sub>77667</p>
<var>变量</var>

<blockquote> 表示引用一段内容， <cite> 表示引用出自某人某处， <q> 也是表示引用，是一个行内元素.

<blockquote>床前明月光，疑是地上霜</blockquote>
<cite>李白</cite>
<br>
<q>引用</q>

<code> 表示内容是一段代码，显示为等宽字体效果。

<code>
    var i=0;
</code>

<mark> 标记一段内容，一般默认显示黄色背景。

<mark>标记一段内容</mark>

<a> 可以跳转网址，
href 可以指定跳转地址
ping 属性是指定一个网址，用户点击的时候，回向该地址发一个post请求，主要用于跟踪用户的行为
dowload 表示当前的链接是一个用于下载的url 图片 

    <a href="#">不跳转</a>
    <a href="https://www.baidu.com"  ping="http://www.baidu.com?id=111"></a>>跳转到百度</a>
    <a href="1.html" download>下载</a>
    <a href="1.html"></a>
    <a href="#span">跳转到span锚点</a>
    <a href="tel:13200000000">拨打电话</a>

<img>图片标签

  <!-- 图片懒加载 -->
    <img loading="lazy" src="./images/img.png" width="200" alt="图片加载失败">

    <figure>
        <img loading="lazy" src="./images/img.png" width="200" alt="图片加载失败">
        <!-- 图片的描述 -->
        <figcaption>this is a beautiful picture</figcaption>
    </figure>

<small> 比主题内容小一号的字体

     <h1>h1</h1>
    <h1><small>small h1</small></h1>

<time> 用于日期的文本，datetime属性可以给具体的时间,主要是用于搜索引擎抓取时间。

<p>开会时间：<time datetime="2022-4-10T14:00:00">今天下午</time></p>

<data> 用于数据文本，value属性可以写入具体的数值，主要是用于搜索引擎抓取。

<p>本次第一：<data value="100">小明</data></p>

<address> 只能用于地址文本

 <address>
        <p>网站问题请联系张三xxxx@mail.com</p>
        <p>邮寄地址：xxxxxxxxxxxx</p>
    </address>

<del> 文本会有删除线，表示删除的内容

   <del>删除线</del>

<ins> 表示插入的内容。

<ins>插入的内容</ins>

<abbr> 用于简写专业术语，title属性是对简写的一个说明，鼠标移动到有title属性的标签上面，可以显示title的文本 内容。

<p><abbr title="HyperText Markup Language">html</abbr>是编写网页的语言</p>

div元素 没有任何特效，就是一个没有任何语义的块级元素，主要用作网页的布局。

<div>块级元素</div>

<header> 表示头部区域，有页头的语义。可以用在不同的场景，比如网页有头部，一片文章也可以有头部，一个网 页可以有多个header。

 <footer> 表示底部区域,有页尾的语义。可以用在不同的场景，一般和 <header> 对应。

<main> 网页主体内容，一个网页只能有一个main

    <header>头部区域</header>
    <main>主题内容，只能有一个</main>
    <footer>底部区域</footer>

article 表示一篇文章或者帖子，可以有header，footer，p，div，section，aside等。

    <article>文章或帖子</article>

<section> 表示独立主题的部分

    <section>独立主题的部分</section>

<aside> 针对网页级别来说，是侧边栏。针对文章级别可以表示文章的评论。

    <aside>侧边栏</aside>

<nav> 导航的元素，主要放导航模块，一般一个网页只有一个nav

    <nav>导航的元素</nav>

<iframe>网页容器，可以在引入其他网页，并显示

属性：

src 引入网页的地址。

frameborder 控制边框的宽度，为0则不显示边框.
allowfullscreen 全屏按钮可以在当前页面全屏 多媒体标签 

 <iframe 
     height="700" 
     width="1200"
     src="https://blog.csdn.net/lzsan_/article/details/124068692?spm=1001.2014.3001.5502" 
     frameborder="0" 
     allowfullscreen>
     
 </iframe>