HTML元素大全(1)

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>

属性	描述	值
align	标题的水平对齐方式	left、center、right

<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" />

属性	描述	值
color	线颜色	颜色
width	宽度	像素、百分比
size	线粗细	整数，像素
align	水平对齐方式，	left、center、right

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

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

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

属性	描述	值/示例
type	序号类型	无序列表：disc=实心圆、square=方块、circle=空心圆 有序列表：1=数字、a/A=字母、i/I=阿拉伯数字
start	有序列表：序号开始的值，默认1	<ol type="1" start="4">
reversed	有序列表：倒序排列	<ol type="1" reversed >
<li>的属性value	有序列表：设置序号值，会影响后面	<li type="I" value="5">

<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>	description list，描述列表，包含多组<dt>、<dd>
<dt>	description term( /tɜːrm/ 术语，项 )描述术语（标题），<dl>的子元素
<dd>	description definition(/ˌdefɪˈnɪʃn/，定义)描述内容，<dl>的子元素，放到<dl>后面，用来描述<dt>。默认样式左缩进：margin-inline-start: 40px

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

<blockquote>/<q>引用元素

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

元素/属性	描述
<blockquote>块元素	块级引用元素(quote /kwoʊt/ 引用、引文)，默认会增加缩进，一般都会加上额外的自定义样式。
cite	(/saɪt/ 引用)标注引文相关资源的url地址或相关解释信息，但并不会显示
<q>行内元素	行内引用行内元素，默认样式是用伪元素添加了引号“”
cite	同上块引用

️注意：默认样式不同浏览器不同，所以最好通过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>	（ /spæn/）无特定含义，是用来组织文档的行内元素（行内容器），外观取决于css	<span>span内容</span>
<font>	设置文本字体样式的文本元素，文本在标签里
face	字体类型，值为字体名称	face="楷体"
size	字体大小，从 1 到 7 的数字，默认3。不同于字号，已废弃不推荐使用。	推荐css代替
color	字体颜色	颜色
<pre>块元素	预格式的文本（predefine /ˈpriːdɪˈfaɪn/ 预定义），保留空格、换行符，默认等宽字体。只能包含文本/行内元素，不能再包含其他块元素了。
<b>	粗体样式（Bold），单纯样式效果
<strong>	粗体效果，加重语气，更强调语义，语义在搜索引擎、语音阅读时有效
<i>	_斜体_样式，单纯样式效果
<em>	_斜体_效果（emphasis/ˈemfəsɪs/强调），着重语气，和i相比强调的语义
<u>	下划线
<del>	删除线
<sub>	下标(字体小)
<sup>	上标(字体小)

<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...>语义元素

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

元素/属性	描述
<abbr>行内元素	缩略语或缩写（abbreviation /əˌbriːviˈeɪʃn/ 缩略），默认样式：下划线（虚线）
title	用title解释其含义，鼠标提示显示
<address>块元素	联系方式的元素，如地址、URL，邮箱等。默认样式：斜体+块元素
<code>行内元素	计算机代码，默认样式：等宽字体
<var>行内元素	变量名称：数学表达式或编程中的变量，默认样式：斜体
<kbd>行内元素	键盘、用户输入，默认样式：monotype 字体
<samp>行内元素	计算机程序输出，（sample，样本）默认样式：monotype 字体
<time>行内元素，IE	时间日期，用于根据不同的语言输出不同的格式
datetime	合法的日期时间值

<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。

元素/属性	描述
<div>	块级无语义元素(division 分区)
align	内部内容的对齐方式，已废弃
<header>IE9	页眉：文档头部相关区域
<nav>	导航栏：主导航相关区域
<footer>	页脚：底部相关区域，如页面下面的版权信息、文章后面的申明信息等
<aside>	侧边栏：页面内容以外的区域，如侧边栏、呼出框等
<main>	主内容：文档主内容区域
<article>	文章，表示一个独立的、可重复的内容块，如一篇博客、一条评论、一篇帖子
<section>	段落部件，文档中的章节、页眉、页脚，把article分为多个section

️注意：语义化块元素在_一些古老_的浏览器存在兼容性问题，如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这是网络互联的重要特性。行内元素，不会换行。双标签：标签内可以放其他内容，如文字、图片。

属性	描述	值/备注
href	超链接（hypertext reference），要跳转的目标链接地址，除了http地址，还支持页面内部的锚点跳转。	相对路径或网络路径，资源路径。 锚点/文档片段：页面内部跳转，用#号标识， 作为文档片段使用，跟在url后面  ● href="#"，或不设置，跳转到头部  ● 用<a>标签的name属性作为锚点，href="#name"：http://url#id  ● 用其他标签的id属性作为锚点，href="#id"：http://url#name 电子邮件连接：href="mailto:URL" 电话：href="tel:号码"
name	元素名称，可作为锚点	设置锚点<a name="p1"/>，跳转到锚点<a href="#p1"/>
target	告诉浏览器用什么方式来打开目标页面	- _self：在同一个网页中显示（默认值） - _blank：在新的窗口中打开。 - _parent：在父窗口中显示；_top：在顶级窗口中显示。
rel	与目标对象的关系
download	指示这是一个下载地址	值为本地保存文件名

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

<a href="http://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>

元素/属性	描述	值/备注
<table>	定义表格元素
border	表格外边框粗细，>=1，会同时开启单元格边框（1），通过css合并	像素
align	整个表格相对于父容器的对齐方式	right、center、left
width、height	表格宽度、高度，table/tr/td/th都支持	像素、百分比
bgcolor	背景色，table/tr/td/th都支持	bgcolor="#F5F5F5"
<tr>	表格行(table row)，包含多个th或td
align	行内（单元格）内容的水平对齐方式，默认left	right、center、left
valign	vertical，垂直对齐默认middle，对应的css属性为vertical-align	top、middle、bottom
rowspan	行（水平）单元格合并，合并下面的单元格，需去掉对应的单元格	合并单元格的数量
<td>	基本单元格（table data cell），<tr>的子元素
align	单元格内容的对齐方式	right、center、left
width	单元格宽度，一列中多个高度设置则取最大值。
colspan	列（垂直）单元格合并，合并右边的单元，需去掉对应的单元格	合并单元格的数量
其他语义化子元素	让表格结构更清晰，也更容易进行样式管理
<thead>	表头，1个可选，包0或多个<tr> 元素
<th>	表头单元格(table header cell)，同<td>，默认样式：居中、加粗
scope	表头类型，（/skoʊp/范围）row=行表头，col=列表头。	便于阅读器理解表格
<caption>	表格标题，1个可选，可用css的caption-side设置位置
<colgroup>	表格列分组，0个或多，包含多个<col>。目的是统一列样式管理
span	横跨的列数，还有width、class、style用于管列样式	css支持的样式好像不多
<col>	列：<colgroup> 子元素，并不能创建列，只是管理样式
<tbody>	表格主体数据区域，零个或多个 <tbody>，包含多个<tr>元素	DOM中一直都会有的
<tfoot>	汇总行，1个可选，包含0 或多个<tr> 元素

⌨️快捷键（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标签里面，实现图片点击跳转效果。

元素/属性	描述	值/备注
src	图片资源的地址，支持网络路径、文件路径。	资源路径说明
alt	图片无效时的占位文字，建议填写有意义内容（或空），阅读器会读	这是一个充满人性化的属性！
height、width	高宽，只设置一个属性会自动等比缩放，所以一般设置一个即可	尺寸，图片无效时尺寸也无效了
srcset	候选图像：图像url 宽度w/像素密度x，多个逗号分割，优先于src。 根据屏幕密度，和sizes的设置来选择（下载）图像。	配合sizes实现响应式图片
sizes	资源的大小：媒体条件 尺寸值，多个逗号隔开。 基于媒体查询选择最合适图像（srcset）及设置图像显示大小	sizes="(max-width: 600px) 200px, 50vw
border	边框粗细，已废弃，由css的border代替	像素
align	相对于父容器内的对齐排列方式。已废弃	top、bottom、middle、left、right

新的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="http://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>。

元素/属性	描述
<source>	媒体资源	<picture>的子元素
srcset	资源url
media	媒体查询	media="(min-width: 800px)"大于800px时命中
type	资源的MIME 类型	type="image/svg+xml"

在图片格式上，推荐多用新的图形，如.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>块元素	可附标题内容元素(figure /ˈfɪɡə(r)/ 图形)，代表一段独立的内容。不一定要是一张图片，可以是几张图片、一段代码、音视频、方程、表格或别的。默认样式：缩进
<figcaption>块元素	描述了 <figure> 元素的说明/标题(caption /ˈkæpʃ(ə)n/ 说明、字幕、标题)

<figure>
    <img src="https://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>	媒体播放器，除了属性，还有很多JS方法事件用于视频播放控制
src	视频资源url，MP3 (音频) 和 MP4/H.264 (视频) 是被广泛支持的两种格式，MP4专利到2027
controls	启用视频控制功能
width、height	宽高
autoplay	启用自动播放，一般不建议使用
loop	启用循环播放（ /luːp/ 循环）
muted	开启静音（muted /ˈmjuːtɪd/）
poster	默认显示的海报图片URL（/ˈpəʊstə(r)/ 海报）
<source>	媒体资源，代替src，可以放多个，提升浏览器对媒体格式的兼容性。<video>、<audio>、<picture>的子元素
<track>	时序字幕，<video>、<audio>的子元素
标签内的内容	当浏览器不支持<video>时会显示，降级方案
<audio>	音频播放器( /ˈɔːdiəʊ/ )
同<video>	和<video>基本相同，除了没有width、height、poster属性

<video width="300px" autoplay controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"></video>
<audio controls src="https://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>	内联框架
src	url地址
height/width	高度、宽度（默认300px）
frameborder	是否显示边框，1(yes)，0(no)，推荐用css设置border
sandbox	安全性相关设置，支持很多参数
srcdoc	可以被渲染到iframe的HTML 代码
name	名称，window.frames.name
<frame>	HTML 4 中用来定义窗口（框架），H5已不支持

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

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

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

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

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

元素/属性	描述
<embed> 单标签	( embed /ɪmˈbed/ 嵌入)将外部内容嵌入文档
src	资源url地址
type	资源的 MIME 类型
height/width	高度、宽度
<object>	嵌入一个外部资源
data	资源url地址
type	资源的 MIME 类型
height/width	高度、宽度

<object type="application/pdf" width="500" height="800" data="https://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>

---

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