HTML元素大全(1)

• 2022 年 10 月 25 日
• 筆記
• 前端WEB

01、基础元素

<h1/2/3/4/5/6>标题

从大h1到小h6，块元素，有6级标题。是一种标题类语义标签，内置了字体、边距样式。

• 合理使用h标签，主要用于标题，不要为了加粗效果而随意使用。
• h1用于最重要的标题内容，会被搜索引擎使用，用得太多影响SEO效果。

<h1 align="center">标题标签h1/2/3/4/5/6：一级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

<p>段落元素

段落元素<p>内容</p>（**paragraph **/ˈpærəɡrɑːf/ 段落、分段）块元素，表示一个内容段落，前后自动换行，段落之间会有间隙（默认margin上、下=1em），比<br>的行间距更大。

<p align="left">段落文字1</p>
<p align="center">段落文字2<br/>012</p>
普通文字1，用br换行<br>普通文字1

<br>换行

换行元素（Break）：<br>，单标签，默认行间距。HTML中不识别输入的回车换行，需用<br>标签换行。

<hr>水平线

水平线元素：<hr>，单标签，有颜色color、长度width、粗细size、对齐align等属性，CSS中可用border设置样式。

<br>
<hr width="80%" color="green" align="left" size=1 />
<hr width="80%" color="green"  />
<hr width="300px" color="red" size="3" />

<ul-li/ol-li>列表标签

列表都是块元素，li中可以放任何东西，常用来组织列表相关内容，如商品列表、树形结构、导航等。

• 无序列表<ul><li></li></ul>：unordered list，li为列表项，属性type可定义符号样式，默认disc（实心圆）。
• 有序列表<ol><li></li></ol>：ordered list，li为列表项，属性type可定义排序样式，默认1（数字）。

<ul type="disc">            		<!-- type可定义符号样式，默认disc=实心圆，可自定义样式取代-->
  <li type="square">l1    			<!--square=方块-->
    <ul><li>l1的嵌套子节点</li></ul>
  </li>            
  <li type="circle">l2</li>			<!--circle=空心圆-->
  <li>l3</li>
</ul>
<ol type="1">           <!-- type可定义排序样式，默认1=数字-->
  <li type="a">l1</li> 	<!-- a=小写字母排序-->
  <li type="A">l2</li> 	<!-- A=大写字母排序-->
  <li type="i">l3</li> 	<!-- i=小写阿拉伯字母排序-->
  <li type="I">l4</li> 	<!-- I=大写阿拉伯字母排序-->
  <li>l5</li>
</ol>

• 无序标签、有序标签可以多层（相互）嵌套。
• 列表项中的内容可以是文本，也可以是其他标签，如图片img、a标签。
• 使用场景：新闻列表，导航按钮。
• list-style-type：在css中设置列表符号样式，如ul li{list-style-type:disc} ``ol li{}，枚举值-菜鸟教程。
  • disc、circle…：实心、空心符号
  • decimal…：数字

⌨️快捷键（VSCode）：标签名*数量>子标签名*数量，快速输入多组父子标签，加大括号则为标签中内容。ul>li*3：快速输入ul标签+3组子li标签。

<dl/dt/dd>语义化描述列表

作用同<ul/li>类似，通常用于展示词汇表或者元数据 (键 – 值对列表)，块元素。JD首页的分类导航就是用的<dl/dt/dd>结构。

<dl>
  <dt>人物简介：</dt>
  <dd>一代诗仙</dd>
  <dt>代表作：</dt>
  <dd>仰天大笑出门去，下楼排队做核酸</dd>
</dl>

<blockquote>/<q>引用元素

语义化引用元素，代表其中的文字是引用内容。

⚠️注意：默认样式不同浏览器不同，所以最好通过css统一样式。

<style>
  blockquote {
    font-size: 1rem;
    color: #999;
    border-left: .2rem solid #dfe2e5;
    margin: 1rem 0;
    padding: .25rem 0 .25rem 1rem;
  }
</style>
<div>
  <blockquote>
    块引用blockquote文本<q>行内引用q</q>
  </blockquote>
  <q>行内引用q</q>
</div>

<span/font/b/i/u/del>文本元素

针对文本内容的常规元素。除了pre是块元素，其他都是行内元素。文本标签一般会嵌套在<p>标签中使用，实现不同语义/效果。

<span style="color:blue">span内容</span>
<font size="4" color="red" face="楷体">font标签内容</font>
<pre style="color:yellowgreen;font-family:'楷体'; font-size: 18px;">pre字体内容   ，
  支持回车和空   格</pre>
<b>粗体b</b> &nbsp;
<strong>粗体strong</strong>&nbsp;
<i>斜体i</i>&nbsp;
<em>em标签</em>&nbsp;
<u>下划线u</u>&nbsp;
<del>删除线del</del>&nbsp;
<sub>下标sub</sub>&nbsp;
<sup>上标sup</sup>

<abbr/address/code…>语义元素

表示特点语义的元素，默认提供了一些样式（吃藕丑）。

<div >
  <p>我们使用 <abbr title="超文本标记语言（Hyper text Markup Language）">HTML（abbr缩写）</abbr> 来组织网页文档。</p>
  <p>欢迎光临怡红院！联系方式（address）：<address>长安南路 &nbsp;&nbsp;<a href="">发送邮件</a></address></p>
  <code>code代码</code>&nbsp;&nbsp;
  <var>var变量</var>&nbsp;&nbsp;
  <kbd>键盘kbd </kbd><kbd>Fn</kbd>+<kbd>R</kbd>&nbsp;&nbsp;
  <samp>计算机输出samp</samp>&nbsp;&nbsp;
  <time datetime="2016-01-20">2016 年 1 月 20 日</time>
</div>

<div>及语义<header/footer…>

<div>是一个容器元素，是一个“纯粹的”、“无任何语义的”容器块元素，用来把不同的内容分区管理。本身无任何表现效果，配合css使用。
在HTML5中增加了和div相同作用的语义化块布局元素标签，这些元素定义了一个大概的语义范围，并没有一个严格的界限，同样也么有任何样式。语义块元素可读性更好，也更有利于SEO。

⚠️注意：语义化块元素在_一些古老_的浏览器存在兼容性问题，如IE8。

<h2>div布局</h2>
<div style="height: 280px;">
    <div class="header">div class="header" </div>
    <div class="nav">div class="nav"</div>
    <div style="height: calc(100% - 140px);">
        <div class="left">div class="left"</div>
        <div class="right">div class="right"</div>
    </div>
    <div class="footer">div class="footer"</div>
</div>
<h2>语义布局</h2>
<div style="height: 280px;">
    <header class="header">header class="header" </header>
    <nav class="nav">div class="nav"</nav>
    <main style="height: calc(100% - 140px);">
        <aside class="left">aside class="left"</aside>
        <article class="right">article class="right"</article>
    </main>
    <footer class="footer">footer class="footer"</footer>
</div>
<!--样式-->
<style>
    .header,
    .footer {
        background-color: antiquewhite;
        height: 40px;
        text-align: center;
        line-height: 40px;
        float: none;
    }

    .nav {
        background-color: aquamarine;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }

    .left {
        background-color: rgb(201, 223, 215);
        float: left;
        width: 150px;
        height: 100%;
        text-align: center;
    }

    .right {
        background-color: rgb(238, 252, 206);
        float: left;
        height: 100%;
        width: calc(100% - 150px);
        text-align: center;
    }
</style>

<a>超链接

元素是最常用的超链接标签，主要属性是href这是网络互联的重要特性。行内元素，不会换行。双标签：标签内可以放其他内容，如文字、图片。

⚠️当不希望a标签执行跳转，用来执行其onclick事件时，需设置href="javascript:void(0)"，申明不执行跳转。

<a href="//www.baidu.com" target="_self" title="鼠标悬停提示的内容">显示的内容=a标签=百度</a>
<a href="../ftest/html.md">相对地址</a>

<!-- 页面内#锚点跳转 -->
<a href="#">默认#-跳转到头部</a>
<a href="#m1">a标签的name属性作为锚点</a>   <!--a name="m1"-->
<a href="#hp">任意元素的id属性作为锚点</a>

<a href="javascript:void(0)">不执行a标签跳转</a>

当a标签设置了href属性后，就是一个可以点击操作的超链接了，鼠标样式为小手形状（pointer），同时有三种显示模式（默认样式），都可以通过css样式（伪元素选择器）调整。

• 未点击时，显示为蓝色字体+下划线
• 点击访问过，显示为紫色字体+下划线
• 鼠标点击链接时，显示为红色字体+下划线

<a>元素标签的样式应该遵循上面的基本逻辑，基本原则就是让人容易分辨出这是一个超链接。

02、<table>表格

<table>是一个嵌套组合的复合元素，块元素，一个表格table，有多个行，每行有多个单元格组成，常用于展示集合数据。<table>包含多种特有的子元素，构成表格的各个部分。
表格元素结构/顺序：<table>►<caption>►<colgroup>►<thead>►<tbody>/<tr>►<tfoot>

⌨️快捷键（VSCode）：
多组标签文本输入：标签名*数量{文本内容}，后面加上花括号，自动补充标签内容。如table>tr*2>td*4{单元格}

<table border="2" width="500px" bgcolor="#F5F5F5" align="center"
    style="border-collapse:collapse;font-size: large;">
    <colgroup>
        <col>
        <col width="30%" style="background-color: azure;">
        <col class="col" span="2">
    </colgroup>
    <thead height="40px">
        <tr>
            <th width="30%">name</th>
            <th>age</th>
            <th colspan="2">birthday</th>
        </tr>
    </thead>
    <tr align="center">  <!--数据行-->
        <td align="right" bgcolor="lightblue" rowspan="2">zhangsan</td>
        <td>22</td>
        <td colspan="2">2000-12-12</td>
    </tr>
    <tr align="left">  <!--数据行-->
        <td align="center">23</td>
        <td>2000-12-12</td>
        <td>多了一格</td>
    </tr>
</table>
<style>
    .col{
        border: 2px solid red;
        width: 200px;
    }
</style>

03、多媒体与嵌入

像<img>和<video>这样的元素被称之为替换元素，因为这些元素的内容和尺寸由外部资源所定义，而不是元素自身。

<img>图片

图片标签<img>（image）单标签、行内元素，最核心属性src指向图片地址，可以是网络路径、文件地址。行内元素，不会自动换行，可嵌套在a标签里面，实现图片点击跳转效果。

新的srcset、sizes属性可用来更好的实现响应式图片，以适应不同分辨率的设备。不过老旧的浏览器并不支持，所以仍需保留src，以便更好的兼容。

⚠️注意：在调试srcset、sizes的时候，img会缓存图片，手动调整浏览器窗口大小并不会立即生效，需清除缓存（或禁用缓存）。而<picture>不会有这个困扰！

<img src="../res/sk (13).png" width="50px" title="鼠标悬停显示文字" border=3 ></img>
<img src="" alt="图片不存在" />
<img src="../res/sk (19).png" align="left" width="50px" height="40px" />
<a href="//www.baidu.com"><img src="../res/sk (2).png" height="60px" /></a>

<img src="../static/images/128.png"
     srcset="../static/images/128.png 350w,
             ../static/images/256.png 750w,
             ../static/images/512.png 900w,
             ../static/images/1024.png 1000w"

     sizes="(max-width: 320px) 100px,
            (max-width: 450px) 200px,
            (max-width: 700px) 300px,
            (max-width: 800px) 400px,
            (max-width: 900px) 500px,
            1024px">
<img srcset="/res/head-48.gif 300w, /res/qq.png 600w"
                    sizes="(min-width: 500px) 600px,300px" src="/res/head-48.gif" alt="">

<picture>现代图片

<picture>图片，由多个媒体资源<source>组成，<picture>元素标签内部依然需要包含一个<img>元素，<picture>不支持或没有匹配到合适的<source>时，则会显示内部<img>。

在图片格式上，推荐多用新的图形，如.svg、.webp、.jpeg，可以在有高质量的同时有较低的文件大小。

<picture>
    <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
    <source media="(min-width: 800px)" srcset="elva-800w.jpg">
    <img src="elva-800w.jpg" alt="">
</picture>
<picture>
    <source srcset="/res/qq-128.png" media="(min-width: 500px)">
    <img src="/res/head-48.gif" alt="">
</picture>

<figure>内容块语义元素

为了更好的展示图片内容，可使用 HTML5 的 <figure> 和 <figcaption> 元素，专门用来展示图形内容的语义化容器元素，不过本身并没有什么特别的样式，需css。

<figure>
    <img src="//file03.16sucai.com/2017/1100/16sucai_P591F9E071.JPG" alt="晚霞">
    <figcaption>洗一洗，那是我逝去的青春！</figcaption>
</figure>
<style>
    figure{
        display: flex;
        flex-flow: column;
        max-width: 250px;
    }
    figure figcaption{
        text-align: center;
        background-color: #2221;
        padding: 4px;
    }
</style>

<video>视频/<audio>音频

<video width="300px" autoplay controls src="//interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"></video>
<audio controls src="//mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/viper.mp3"></audio>

<iframe>内联框架

<iframe>内联框架，嵌入一个完整的HTML页面，iframe 元素会创建其文档的内联框架，有自己的会话历史记录 (session history)和DOM 树。<iframe>嵌入的文档会被包含在 window.frames，通过脚本可以访问其contentDocument。同时在框架内部，脚本可以通过 window.parent 引用父窗口对象。

<iframe>的上下级可以相互访问，这的确很方便，但这同样非常危险，因为你的网页可被人任何人嵌入。脚本访问框架内容必须遵守同源策略（协议、端口、IP地址（域名）都相同），并且无法访问非同源的 window 对象的几乎所有属性。跨域的<iframe>通信可以通过 Worker.postMessage() 来实现。

⚠️因此被嵌入，和嵌入其他网页，都需要格外谨慎小心，注重安全防范。

• 使用HTTPS。
• 使用 sandbox 属性控制权限。
• 配置 CSP 指令，在meta中配置CSP 安全策略。
• 需重视安全问题，只有在必要时嵌入。

<embed/object> 过时的嵌入元素

<embed>和<object>元素用来嵌入多种外部内容的通用嵌入工具，如 Java 小程序、Flash、PDF、浏览器插件，甚至视频，SVG 和图像等类型。现代的WEB技术已比较成熟了，就像IE一样，插件也将逐步称为历史。

<object type="application/pdf" width="500" height="800" data="//mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/mypdf.pdf">
    <p>You don't have a PDF plugin, but you can <a href="mypdf.pdf">download the PDF file.</a></p>
</object>

©️版权申明：版权所有@安木夕，本文内容仅供学习，欢迎指正、交流，转载请注明出处！原文编辑地址