家好，今天给大家介绍一款，文字旋转跳动动画特效html页面前端源码，可自定义内容 （图1）。送给大家哦，获取方式在本文末尾。

特效炫酷（图2）

源码完整，需要的朋友可以下载学习（图3）

本源码编码：10167，需要的朋友，点击下面的链接后，搜索10167，即可获取。

就爱UI - 分享UI设计的点点滴滴

据地图平台是字节跳动内部的大数据检索平台，每天近万的字节员工在此查找所需数据。数据地图通过提供便捷的找数，理解数服务，大大节省了内部数据的沟通和建设成本。

数据血缘图谱介绍

字节的数据可分为端数据和业务数据，这些记录往往需要通过加工处理才能产生业务价值。数据加工处理的流程一般是读取原始数据，进行数据清洗，再经过多种计算和存储，最终汇入指标、报表和数据服务系统。数据血缘描述了数据的来源和去向，以及数据在多个处理过程中的转换，是组织内使数据发挥价值的重要基础能力。

数据地图平台在 2021 年接入了全链路核心元数据，包括但不限于：Hive、Clickhouse、Kafka、BI 报表、BI 数据集、画像、埋点、MySQL、Abase。这些数据全部要通过数据血缘连接起来，进而可以进行影响分析、内部审计、SLA 保障、归因分析、理解和查找数据、自动化推荐等操作。

随着内部数据不断膨胀，简单的数据血缘图谱已经无法满足万级表血缘的关系展示。一些突出的问题包括看不清单个表的直接上下游，看不清数据链路，整体情况等等。因此需要重构一种更清晰、灵活、便利的方式。下图简单展示了优化后的使用效果。

在新版血缘图谱中，我们可以直接清晰的看到每个表的多层上下游依赖关系，甚至可以直接看到一些特殊场景下用户关注的表属性，通过点击节点高亮查看数据链路，更可以看清每层的统计信息。在下文中我们将详细拆解优化的全过程。

需求发现

要做出一个能满足用户需求的图产品，首先是要清楚用户想从图中获取什么信息，从而有针对性的将这些信息展示出来。从血缘图谱的背景本身可以推断出用户希望在图谱中查看表之间的关系，查看关系链路，而更多的使用场景待发掘。因此我们对内部重度用户进行了访谈，整理得出了以下不同用户角色使用数据血缘图谱的用户场景。

结合访谈结果和用户的日常反馈，数据血缘图谱的场景按目前用户的使用频率从大到小排序依次为：

抽象出几个主要需求即为：

1. 表血缘关系查看：能从图中清楚的浏览用户关注的表的上下游血缘关系，最好还能便捷的查看一些场景相关的表属性。
2. 表血缘链路查看：能清晰的查看到某个上游/下游表到用户关注表的链路情况。
3. 按关键指标分组查看：例如当表数据发生变更时，分组查看所有下游表的负责人以便通知变更。
4. 筛选关键信息查看：例如用户找数据指标的时候，仅看相关的报表更高效。

问题分析

其实上述需求旧版血缘图谱都有一定程度上的满足，我们需要去找出旧版血缘图谱提供的功能为什么不满足用户需求，有哪些问题需要在新版中注意避免。

• 概览：在数据量较小的情况下可用，在数据量大的时候完全不可用。看不清每层有多少个节点，层级关系是怎么样的，且链路查看困难。

• 旧版血缘图谱中功能细节粗糙：
• 用户无法直观的区分节点：旧版节点上显示了表类型、库名、表名。因此表名只能显示几个字符，不具备辨识度。
• 无法知晓表到表之间的任务：旧版血缘图谱仅在侧边栏列出了与当前表相关的任务有哪些并未列出加工逻辑的对应关系，归因分析困难。
• 分组结构不清晰：旧版是在原图中框出节点来展示分组的。一方面是空间利用率更低，另一方面是看节点时难定位到所属分组，看分组时则无法看清包含的节点。
• 筛选功能不直观：符合筛选条件的节点高亮展示，而被筛掉的表仍在图中，无法有效提升用户浏览效率。

方案设计

用户在使用过程中看重的是查看关系的效率和属性的完备度，因此在设计优化方案时会尽量从这两点出发去考虑。

首先是表数据查看的效率问题。看不清表名，无法区分相同前缀的表是用户痛点之一。首先我们统计了现有表的平均字符数是 47 位，于是调宽了节点让用户能更直观的区分表名。用数据地图平台中通用的类型图表来代替色块图例，让数据类型一目了然。

其次对于数据量大时看不清数据关系的问题，我们需要一个更紧凑清晰的数据呈现方式。通过需求分析和用户调研，我们了解到用户关心的是节点所在层级和节点之间的联系。对于同一层级节点的先后顺序，次层级节点之间的关系不是很看重。

说到紧凑的布局方式，自然而然我们就想到了列表。如果能用一个列表来承载层级血缘的节点，用连线来连接不同层级的节点，那么久可以表达节点之间的血缘关系了。当节点较多超出一屏时可以拖动此列滚动条来查看更多节点，连线随之刷新位置。当层级不满一屏时整体居中展示，层级过多超过一屏时可以左右滑动查看。这样在保留层级结构信息的同时最大程度的利用了可视区域，展示出了尽可能多的数据。

新版血缘图谱支持了点击任意节点则高亮该节点到主节点的链路功能。配合列滚动和连线刷新，不管数据量多大总能看清一整条数据链路。

我们还在每列列表顶部增加了层级信息和节点统计，让用户能同时查看每个节点细节和节点的整体分布。最终实现效果如下图：

当用户想去找数，理解数或做归因分析时，不仅要了解一个表的上游依赖，更需要理解表的加工逻辑。因此我们在节点的连线上新增了任务信息。当用户 hover 到连线上后，连线会加粗高亮并弹出任务信息。我们还附上了大数据开发平台的对应任务链接，点击链接即可跳转到新页面查看任务逻辑详情。

在设计分组功能时，采用了每列独立分组的方式。一般认为用户会关注有对应分组数据的节点，因此总将有分组的数据放在上面，无分组数据的置底，这样排序能提升用户的浏览效率。

旧版血缘图谱的筛选功能是在前端处理的，由于一些性能限制导致筛选后只能显示部分数据，用户无法得知符合条件的节点是否已经全部展示。新版血缘图谱针对这个用户痛点，将前端筛选改为了服务端筛选，尽量展示全符合要求的数据。每个层级的顶栏对应更新为筛选后的统计信息。同时更新连线，如果筛选后节点之间是有关联的，也会展示关联关系和高亮关系链路。

不同职能的用户在不同场景下使用血缘图谱时关注的节点属性并不相同，如果血缘图谱可以直接在图上显示用户当前想关注的表属性就能帮助用户更高效的解决问题。于是我们在血缘图谱上设计了属性展示功能，用户可以勾选自己感兴趣的属性直接显示到图中。比如下图中展示了每个节点表热度和生命周期两个属性。

技术实现

技术选型

在编码实现之前，我们需要进行技术选型。好的选型往往能让编码事半功倍。在做技术选型时，我们会主要考虑实现复杂度、研发周期、可扩展性三个角度。分析整个血缘图谱的需求：

1. Canvas 实现滚动条，节点文字标签混排很复杂，要达到 HTML 的美观度需要大量调试，后续迭代要新增属性标签，进行流式布局会很头痛。开放组件给别的产品复用也有很大的定制成本。而这些问题使用 React 框架渲染就可以轻松解决。
2. 如果用 DOM 实现不但很难实现箭头，在连线高亮时也很难灵活处理层叠关系。在大数据量下连线很多，还容易出现性能问题。而这是 Canvas 的优势。

于是我们结合两者之长，选用了 React + Canvas 的混合模式来实现血缘图谱。Canvas 居于底部，仅负责画连线。React 在上层负责渲染节点响应 hover 等交互。DOM 层叠关系如下：

整个血缘图谱的初始化流程如下：

• 数据预处理：服务端给到点边结构的数据。由于两个节点之间可能存在多个任务，对应会有多条连线记录。而血缘图谱中相同两个节点之间仅一条连线，对应多个任务。先做连线的合并处理。
• 计算节点层级：服务端会给到点边结构的数据，根据主节点的连线关系向来源和去向两个方向做广度遍历来确定每个节点的层级。
• 数据分组：按分组条件对每列数据进行分组计算。
• 节点布局：根据层级和分组情况布局节点，相对应的每个节点有 { x, y, width, height 属性以确定每个节点的定位。
• 初始化画布：画布用于绘制连线，响应连线的交互。采用内部自研的图形渲染引擎实现。
• 渲染节点：根据节点的位置和分组情况用 React 渲染出每一列节点 DOM。
• 渲染画布：根据前景的列和节点位置调整画布，绘制连线。在渲染连线时分两个图层：默认状态连线在底层；高亮链路和高亮连线状态下的连线在上层。这样做的好处是高亮的连线永远在默认状态的上方，不用特殊处理图形的层叠关系。

实现细节

用这种混合模式的一个挑战就是 Canvas 和 DOM 的刷新率和同步率。在血缘图谱中滚动横向滚动条和每一列的纵向滚动条时 Canvas 要进行及时的刷新以保证连线和节点的相对位置一定。

• 当图谱横向滚动时，每条连线的斜率不变，只是端点左右平移了。我们可以通过更新绘图矩阵来加速这种情况下的更新，不需要去重计算每条连线的位置。具体做法是监听容器的滚动事件，根据容器的 scrollLeft 属性来更新绘图矩阵后重绘。
• 当图谱纵向滚动时，与当前滚动的列中节点相连的连线斜率和端点都有变化，而与滚动列不直接相连的连线无需更新。我们仅重计算并更新与当前列连接的线条位置。

另一个挑战是 DOM 节点在大数据量下的性能问题。通常情况下我们认为 Canvas 在大数据量渲染有更好的性能，而万级的 DOM 节点就会让用户在使用中感受到卡顿了。这时候我们想到了按需渲染。 用户在图谱可视区域中一屏能看到的节点数量是有限的，高度为 1120 的容器中，一列仅存在至多 30 个节点。如果仅渲染可见的节点，则能保证使用过程的流畅。具体做法是在节点布局时增加以下步骤：

• 根据视口的位置（主要是图容器的横向滚动距离 scrollLeft ）和每一列的滚动距离（主要是每一列容器的纵向滚动距离 scrollTop ）计算目前的可视范围。
• 计算节点坐标时判断是否在可视范围的上半屏和下半屏内，如果在此范围内则打标。多显示一屏的节点是希望在用户上下滚动浏览节点时不会出现空白区域闪一下等体验不佳的问题。
• 计算出每一列的真实长度。

在 React 渲染时更新每列容器的长度，将节点根据坐标绝对定位到正确的位置上。看起来就跟全量渲染的效果一致，渲染效率大幅提升。

然而问题并不止于此。在进行大数据量的纵向滚动时，会发现帧率很低，交互还是不流畅。分析得知是由于列表滚动时会在短时间内进行大量线条重计算和渲染。于是还要在 Canvas 绘制上进行优化。

我们从上图可以看到在单层节点很多的情况下，主节点与不可见节点的连线可见，但是没有任何价值，只是加重了用户对当前节点连线查看的负担。因此我们对线条也进行了渲染优化，仅当一条连线两端的节点都在可见范围中时才渲染连线，在连线的 Tooltip 上增加了来源去向的展示辅助查看。至此我们做到了在复杂情况下的流畅展示血缘数据。

总结

以上就是数据血缘图谱的整个优化过程。在这个过程中，我总结起来就是在了解用户诉求的前提下，克制地表达关系图中的信息，在合适的场景下突出核心的内容。做图分析产品时不需要拘泥于某种形式，而是真正的从用户需求出发，为用户服务。

关于我们

火山引擎大数据研发治理套件 DataLeap

一站式数据中台套件，帮助用户快速完成数据集成、开发、运维、治理、资产、安全等全套数据中台建设，帮助数据团队有效的降低工作成本和数据维护成本、挖掘数据价值、为企业决策提供数据支撑。

欢迎加入字节跳动数据平台官方群，进行数据技术交流、获取更多内容干货

点击 大数据研发治理套件-火山引擎 了解产品详情

1 HTML概念

HTML，超文本标记语言（Hyper Text Markup Language），是一门描述性语言。标记，标签，元素，叫法不同，意思相同。HTML超文本标记语言主要通过标签的方式，对网页页面的文本、图片、音频、视频等内容进行描述。学习HTML，就是学习各种标签，来搭建网页的结构。

2 HTML结构

结构：!DOCTYPE

说明：作用是告诉浏览器用哪个文档规范来解析文档

标签：html

说明：用于搭建HTML网页文档结构和网页布局

?标签：head

说明：用于定义HTML网页文档的头部,它是所有头部元素的容器?

?标签：body

说明：用来定义HTML网页文档的主体区域?

?标签：meta

说明：用来描述HTML网页文档的属性?

?标签：title

说明：用来放到HTML网页文档的头部，是搜索引擎首要抓取的目标代码?

?2.1 标签

标签，也叫作标记，是由一对尖括号<>，里面包含单词组成

2.1.1 双标签

<html></html>

2.1.2 单标签

<br>

2.1.3 标签关系

嵌套关系

<html>
    <head>
    </head>
</html>

并列关系

<head>
</head>
<body>    
</body>

3 注释

注释用来帮助程序员记录程序设计方法，辅助程序阅读

4 head标签

4.1 title标签

双标签，定义网页的标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>百度一下，你就知道了</title>
</head>
<body>

</body>
</html>

4.2 meta标签

是单标签，用来描述HTML网页文档的属性

4.2.1 name属性

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 网页关键字 -->
    <meta name="keywords" content="html,css,javascript">
    <!-- 网页描述 -->
    <meta name="description" content="基础前端知识">
    <!-- 网页作者 -->
    <meta name="author" content="buddha">
    <!-- 网页版权信息 -->
    <meta name="copyright" content="版权所有，翻版必究">
</head>
<body>

</body>
</html>

标签属性：

1、标签的属性写在开始标签内部

2、标签名与属性之间要有空格隔开

3、一个标签可以同时存在多个属性

4、属性之间以空格隔开

5、属性没有先后顺序之分

4.2.2 http-equiv属性

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 设置网页编码完整写法 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <!-- 设置网页编码简写写法 -->
    <meta charset="UTF-8">
    <!-- 网页打开3秒后跳去百度 -->
    <meta http-equiv="refresh" content="3;url=https://www.baidu.com">
</head>
<body>

</body>
</html>

4.3 style标签

是双标签，用来定义标签的css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        /* css内联样式写这里 */
    </style>
</head>
<body>

</body>
</html>

4.4 link标签

是单标签，是用来引入外部css样式文件

<link rel="stylesheet" href="css/index.css" type="text/css">

4.5 script标签

是双标签，是用来写JavaScript代码的地方

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        /* 这里写JavaScript代码 */
    </script>

</head>
<body>

</body>
</html>

4.6 base标签

是单标签，是用来设置整个网页的基础路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="https://pic.rmb.bdstatic.com">

</head>
<body>
    <img src="bjh/news/e7fb4c2be6a2e439ff7e3197fa205d8f1336.gif">
</body>
</html>

开发中很少用到，有人使用知道就行

上面所述标签是放在head标签里的，接下来接触的标签都是放在body标签内的

5 文本标签

5.1 标题标签

是双标签，h是header的缩写

<h1>h1标签：一级标题</h1>
<h2>h2标签：二级标题</h2>
<h3>h3标签：三级标题</h3>
<h4>h4标签：四级标题</h4>
<h5>h5标签：五级标题</h5>
<h6>h6标签：六级标题</h6>

特点：

1、字体加粗

2、独占一行

3、从h1到h6，字体逐渐减小

4、使用<h>标签的主要意义是告诉搜索引擎这是一段文字的标题

5、<h1>在一个页面最多只能有一个，不要用多个

5.2 段落标签

是双标签，p是paragraph的缩写

<p>这是一段文字</p>
<p>这是一段文字</p>
<p>这是一段文字</p>

特点：

1、独占一行

2、段落与段落之间，存在间隙

5.3 换行标签

是单标签，br是break的缩写

<p>这是一段<br>文字</p>

特点：

1、强制换行

2、单标签

5.4 水平线标签

是单标签，hr是horizon地平线的缩写

<p>这是一段文字</p>
<hr>
<p>这是一段文字</p>

特点：

1、在页面中显示一条水平线

2、单标签

6 文本格式化标签

<b>这是一段文字</b>
<strong>这是一段文字</strong>
<br>
<u>这是一段文字</u>
<ins>这是一段文字</ins>
<br>
<i>这是一段文字</i>
<em>这是一段文字</em>
<br>
<s>这是一段文字</s>
<del>这是一段文字</del>

特点：

1、不会独占一行

2、推荐使用标签2所在列标签

6.1 上标标签

sup是superscripted这个单词的缩写

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    a<sup>2</sup>
</body>
</html>

6.2 下标标签

sub是subscripted这个单词的缩写

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    H<sub>2</sub>O
</body>
</html>

6.3 字符实体

在网页中展示特殊符号效果时，需要使用字符实体替代

7 媒体标签

7.1 图片标签

<img src="./001.jpg" alt="">

img标签常见属性：

只设置宽或高，会自动等比缩放，宽高只需要数字，不需要'px'

<img src="./001.jpg" alt="图片加载失败" title="这是程序兔" width="200" height="200">

绝对路径：指目录下的绝对位置，比如从根目录开始的路径，或完整的网络地址

相对路径：从当前文件开始出发找目标文件的过程

7.2 音频标签

<audio src="music.mp3" controls autoplay loop></audio>

audio标签常见属性：

支持mp3、wav、ogg三种音频格式

7.3 视频标签

<video src="video.mp4" controls loop autoplay></video>

支持mp4、webm、ogg三种视频格式

7.4 超链接标签

超链接，是双标签，实现各个独立页面之间进行跳转，可以跳去站外也可以在站内之间跳转

<a href="链接地址">文本或图片</a>

站外跳转，采用绝对路径

<a href="http://www.baidu.com" target="_blank">百度</a>

站内跳转，采用相对路径

<!-- a页面 -->
<a href="b.html">跳去b页面</a>

<!-- b页面 -->
<p>b页面</p>

页面内跳转

<a href="#ms">美食</a>
<a href="#jd">景点</a>
<h3 id="ms">推荐美食</h3>
<!-- 省略n个br标签 -->
<br>
<h3 id="jd">推荐景点</h3>

target属性值

target属性值一般使用_self（默认）和_blank

8 列表标签

8.1 无序列表

<ul type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

解释：

1、ul，unordered lists，无序列表，li，list item，列表项

2、ul标签子标签只允许是li标签

3、li标签可以包含任意内容

type属性值

<ul>
    <li>你</li>
    <li>我</li>
    <li>他</li>
</ul>

8.2 有序列表

<ol type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

解释：

1、ol，ordered lists，有序列表，li，list item，列表项

2、ol标签子标签只允许是li标签

3、li标签可以包含任意内容

type属性值

<ol>
    <li>你</li>
    <li>我</li>
    <li>他</li>
</ol>

8.3 自定义列表

<dl>
    <dt>名词</dt>
    <dd>描述</dd>
    ……
</dl>

解释：

1、dl，definition lists，自定义列表；dt，definition term，自定义列表组；dd，definition description，自定义列表描述

<dl>
    <dt>称呼</dt>
    <dd>你</dd>
    <dd>我</dd>
    <dd>他</dd>
</dl>

9 表格标签

9.1 表格基本结构

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

解释：

1、tr，table row，表格行；td，table data cell，表行单元格

<table>
    <tr>
        <td>1</td>
    </tr>
</table>

9.2 表格标签属性

<table border="1" width="200" height="50">
    <tr>
        <td>1</td>
    </tr>
</table>

9.3 表格标题标签

<caption>标题内容</caption>，位于表格内第一行

<table border="1" width="200" height="50">
    <caption>数字</caption>
    <tr>
        <td>1</td>
    </tr>
</table>

9.4 表格表头单元格标签

<th></th>，th，table header cell，表头单元格

<table border="1" width="200" height="50">
    <caption>数字</caption>
    <tr>
        <th>序号</th>
    </tr>
    <tr>
        <td>1</td>
    </tr>
</table>

9.5 表格语义化结构标签

thead、tbody、tfoot

<table border="1" width="200" height="50">
    <caption>数字</caption>
    <thead>
        <tr>
            <th>序号</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>汇总</td>
        </tr>
    </tfoot>
</table>

9.6 合并单元格

<td rowspan="跨越的行数"></td>

<td colspan="跨越的列数"></td>

<table border="1" width="200" height="50">
    <caption>数字</caption>
    <thead>
        <tr>
            <th>序号</th>
            <th>金额</th>
            <th>金额</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td rowspan="2">20</td>
            <td rowspan="2">20</td>
        </tr>
        <tr>
            <td>2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>汇总</td>
            <td colspan="2">40</td>
        </tr>
    </tfoot>
</table>

10 表单标签

10.1 form标签

双标签，包裹其它表单标签

<form>
    // 表单
</form>

form标签的常用属性

name属性

一个页面中，表单可能不止一个。name属性，用来区分不同的表单

<form name="myForm"></form>

method属性

用来指定表单数据使用哪种提交方式给后端

<form method="get"></form>

action属性

用来指定表单数据提交到哪个地址

<!-- 比如提交到index.php地址 -->
<form action="index.php"></form>

target属性

该属性跟a标签的target属性一样，其属性值也是四个，一般情况只用到_blank属性值，默认也是这个值

<form target="_blank"></form>

enctype属性

<form enctype="multipart/form-data"></form>

10.2 input标签

input是单标签

<input type="表单类型">

单行文本框常用属性

<form>
    <input type="text" value="默认值" size="长度" maxlength="可输入字符">
</form>

<form>
    <label>姓名：<input type="text" value="曹操" size="20" maxlength="10"></label>
</form>

密码文本框常用属性

密码文本框常用属性和单行文本框常用属性相同

<input type="password" value="默认值" size="长度" maxlength="可输入字符">

<form>
    <label>密码：<input type="password" value="12345678" size="20" maxlength="10"></label>
</form>

单选框

<input type="radio" name="组名" value="取值" checked="checked">

<form>
    性别：
    <input type="radio" name="sex" value="男" checked="checked">男
    <input type="radio" name="sex" value="女">女
</form>

复选框

复选框和单选框的属性都相同，区别复选框可以多选

<form>
    爱好：
    <input type="checkbox" name="hobby" value="篮球" checked>篮球
    <input type="checkbox" name="hobby" value="足球" checked>足球
    <input type="checkbox" name="hobby" value="台球">台球
</form>

普通按钮

<input type="button" value="取值">

<form>
    <input type="button" value="普通按钮">
</form>

<button>普通按钮</button>

区别：

1、input是单标签，button是双标签

2、button标签的信息除了文本，还可以是图像、其它标签等

3、button有type属性，属性值可以是button、submit、reset等

提交按钮

<input type="submit" value="取值">

<form>
    <input type="submit" value="提交">
</form>

把对应表单数据提交给后端服务器

重置按钮

<input type="reset" value="取值">

<form>
    <input type="reset" value="重置">
</form>

点击重置后，所在form表单里所有内容被清空了

文件上传

<input type="file">

<form>
    <input type="file">
</form>

10.3 多行文本框

<textarea name="文本名称" cols="列数" rows="行数"></textarea>

<form>
    <textarea name="文本名称" cols="1" rows="2"></textarea>
</form>

10.4 下拉列表

<select>
    <option>选项内容</option>
    <option>选项内容</option>
</select>

下拉列表标签是为了节省页面空间

select标签属性

<form>
    <select name="age" size="4" multiple="multiple" disabled="disabled">
        <option>18岁以下</option>
        <option>18-28岁</option>
        <option>28-38岁</option>
        <option>38岁以上</option>
    </select>
</form>

option标签属性

<form>
    <select name="age" size="5">
        <option value="1">18岁以下</option>
        <option value="2" disabled="disabled">18-28岁</option>
        <option value="3" selected="selected">28-38岁</option>
        <option value="4">38岁以上</option>
    </select>
</form>

11 框架标签

<iframe src="URL" width="数值" height="数值"></iframe>

框架标签常用属性

<iframe src="https://www.bilibili.com" width="300" height="200"></iframe>

有些文档禁止被嵌入

12 标签类型

HTML标签分为三种，行内标签、块级标签和行内块级标签。

12.1 行内标签

特点：

1、在页面内只占据刚好能包裹自己内容的空间

2、没有宽高，内容多大就多大，行内标签不能嵌套块级标签（a标签除外）

3、行内标签设置宽高无效，可以对行高line-height进行设置

4、可以设置外边距margin和内边距padding，但只对左右边距有效果，上下无效

5、常见行内标签span、a、strong、ins、del、br等

span标签

双标签，行内标签，本身没有固定样式

<p>我是<span>中国人</span></p>

12.2 块级标签

特点：

1、独占一行

2、高度、宽度、外边距、内边距都可以设置生效

3、宽度默认是父级宽度的100%

4、是一个容器盒子，可以嵌套多层子级行内标签、块级标签，文本类块级标签除外

5、常见块级标签div、p、h1~h6、ol、ul、li等

div标签

双标签，块级标签，本身没有固定样式

<!-- 头部区域 -->
<div></div>
<!-- 内容区域 -->
<div></div>

12.3 行内块级标签

特点

1、在页面内只占据刚好能包裹自己内容的空间

2、高度、宽度、外边距、内边距都可以设置生效

3、常见块级标签img、input、td

12.4 标签类型转换

通过css样式display属性转换，这是css的内容