HTML标签-D、E、F、M

最新推荐文章于 2025-06-01 20:46:58 发布
原创 最新推荐文章于 2025-06-01 20:46:58 发布 · 3.3k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细解析了HTML5中新增的标签，如datalist、dialog、embed、fieldset、figcaption、main等，阐述了它们的功能、使用场景及浏览器支持情况。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<base href="http://www.w3school.com.cn"/>
<style type="text/css">
#tb {
	margin: 10px;
	padding: 20px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	color: #36C;
}
</style>
</head>
<body>
<table id="tb" border="1" style="background-color:#FFC;width:100%;">
  <tr>
    <td style="background-color:#0F3"><b>datalist/select标签</b></td>
  </tr>
  <tr>
    <td><label id="city">Choose any city</label>
      <input list="cityname" id="city" name="city">
      <datalist id="cityname">
        <option value="Qingdao">Qingdao</option>
        <option value="Suzhou">Suzhou</option>
        <option value="Wuxi">Wuxi</option>
        <option value="Xian">Xian</option>
        <option value="Hangzhou">Hangzhou</option>
      </datalist>
      <br>
      <br>
      <label id="city1">Choose any city</label>
      <select>
        <option value="Qingdao">Qingdao</option>
        <option value="Suzhou">Suzhou</option>
        <option value="Wuxi">Wuxi</option>
        <option value="Xian">Xian</option>
        <option value="Hangzhou">Hangzhou</option>
      </select>
      <br>
      <p><b>注释：</b> datalist类似于选择器，需要与input连用，在input的输入框中会出现可选择的输入，但也可以自己随意输入，而select是一个纯粹的选择器，不可以输入，只可以选择已经事先约定好的可选项 </td>
  </tr>
  <tr>
    <td style="background-color:#0F3"><b>dialog标签</b>
      <dialog open>这是打开的对话窗口</dialog></td>
  </tr>
  <tr>
    <td><br>
      <br>
      <br>
      <p><b>注释：</b>只有 Chrome 和 Safari 6 和支持 dialog 标签。</p></td>
  </tr>
  <tr>
    <td style="background-color:#0F3"><b>embed标签</b></td>
  </tr>
  <tr>
    <td><embed src="/i/helloworld.swf";height="20px";/>
      <br>
      <p><b>注释：</b>定义嵌入的内容，比如插件。它是HTML5中的新标签</p></td>
  </tr>
  <tr>
    <td style="background-color:#0F3"><b>fieldset标签</b></td>
  </tr>
  <tr>
    <td><form style="text-align:left">
        <fieldset>
          <legend  >个人信息</legend>
          姓名：
          <input type="text"/>
          <br>
          出生日期：
          <input type="date"/>
          <br>
          联系电话：
          <input type="tel"/>
          <br>
          邮箱：
          <input type="url" />
          <br>
          自我介绍：
          <input type="text" />
          <br>
          <input type="submit" value="提交"/>
        </fieldset>
      </form>
      <br>
      <p><b>注释：</b>fieldset元素可将表单内相关元素分组。它将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到fieldset标签内时，浏览器会以特殊的方式来显示它们。它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
        fieldset 标签没有必需的或唯一的属性。legend标签为 fieldset 元素定义标题。 </p></td>
  </tr>
  <tr>
    <td style="background-color:#0F3"><b>figcaption标签</b></td>
  </tr>
  <tr>
    <td><p>探访上海绝美春天----上海鲜花港，中国的“库肯霍夫公园”。500多个品种、320万株的郁金香，铺泻于林间小路、玉立在清水湖畔、簇拥在鲜花大道，多彩的花魁组合凸显浓郁异国风情。郁金香是“胜利”、“美好”、“凯旋”的象征；荷兰人把郁金香看作是所有花卉中最美丽的一种，外形典雅、花色纯正、色彩繁多，誉为“花中皇后”，因此视它为国花。.</p>
      <figure> <img src="/i/eg_tulip.jpg" alt="The Pulpit Rock" width="304" height="228">
        <figcaption>上海鲜花港 - 郁金香.</figcaption>
      </figure>
      <br>
      <p><b>注释：</b>figcaption标签，定义figure元素(图像、图表、照片、代码等等)的标题，它是HTML5 中的新标签。
        另注：figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。 </p></td>
  </tr>
  <tr>
    <td style="background-color:#0F3"><b>main标签</b></td>
  </tr>
  <tr>
    <td><main>
        <h1>Web Browsers</h1>
        <p>Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。</p>
        <article>
          <h1>Google Chrome</h1>
          <p>Google Chrome 是由 Google 开发的一款免费的开源 web 浏览器，于 2008 年发布。</p>
        </article>
        <article>
          <h1>Internet Explorer</h1>
          <p>Internet Explorer 由微软开发的一款免费的 web 浏览器，发布于 1995 年。</p>
        </article>
        <article>
          <h1>Mozilla Firefox</h1>
          <p>Firefox 是一款来自 Mozilla 的免费开源 web 浏览器，发布于 2004 年。</p>
        </article>
        <br>
        <p><b>注释:</b>标签规定文档的主要内容。main元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。在一个文档中，不能出现一个以上的 main 元素。main元素不能是以下元素的后代：article、aside、footer、header 或 nav。它是html5中的新标签</p>
      </main></td>
  </tr>
</table>
</body>
</html>

 

 

HTML ＜em＞标签
玄链教育
06-12 1544
以下元素都是短语元素。虽然这些标签定义的文本大多会呈现出特殊的样式，但实际上，这些标签都拥有确切的语义。我们并不反对使用它们，但是如果您只是为了达到某种视觉效果而使用这些标签的话，我们建议您使用样式表，那么做会达到更加丰富的效果。把文本定义为强调的内容。
原生javascript创建html标签-h5兼容处理--小技巧
JackieDYH的博客
02-28 883
HTML5兼容 最新版本的Chrome、Firefox、Safari、Opera支持部分HTML5特性。IE9支持部分HTML5特性 HTML5新标签在IE低版本中有兼容问题： 1）使用JavaScript新增元素的方式解决： <script> var ele = document.createElement("header"); //...
HTML常用标签整理（e）
qq_34460386的博客
11-14 719
定义外部交互内容或插件 属性：height定义嵌入的高度，src定义url，type定义类型，width定义宽度 在页面载入插件，可以是静态图片gif之类
HTML———标签元素
2401_82379618的博客
06-01 1116
</dl>,<dt></dt>和<dd></dd>。其中dl标签:表示自定义列表的整体，dt标签:表示自定义列表的主题，dd标签:表示对于主题的每一项内容。其列表的特点为: dd前会默认显示缩进效果注意：dl标签中只允许包含dt/dd标签，dt/dd标签可以包含任意内容。代码示例<head></head><body><dl><dt>主题</dt><dd>内容一</dd><dd>内容二</dd>
html 标签 e,html marguee标签
weixin_36035900的博客
07-01 437
html marguee标签活动字幕，也称为滚动看板、滚动字幕。活动字幕的使用使得整个网页更有动感，显得很有生气。现在的网站中也越来越多地使用活动字幕来加强网页的互动性。用Javascript编程可以实现活动字幕效果；用Dreamweaver的图层再用其时间线功能可以做出非常漂亮的滚动看板。而用HTML的活动字幕标记所需的代码最少，确实能够以较少的下载时间换来较好的效果。该标记语法格式如下：ali...
html d标签,Html常用标签
weixin_32047493的博客
06-17 1342
html常用标签详解HTML标签分类注：一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素p标签中不能放任何块元素主要用于包裹文字在网页中一般通过块元素对页面进行布局块元素：页面中独占一行的元素(block element) 例如：标题标签，p标签····行内元素：页面中不会独占一行的元素(inline element)双标签：由开始和结束两个标签符组成单标签：用一个标签符号完整描述某个...
HTML常用标签整理(d类)
qq_34460386的博客
11-14 1085
1.定义元素细节 标题 下拉文本 用于描述文档某部分的细节，与一起用，点击标题弹出下拉文本 属性open设置时，默认为点开可见状态 2.定义定义列表中项目的描述 项目 描述 排版格式将描述和原项目区分开，增强可读性 3.定义被删除文本 文本想删除的文本 在页面中的显示为一道删除横线，但并不完全删除 含有属性,规定删除的时间，格式为yyyy年mm月dd天 4.定义下
SG-SLAM: A Real-Time RGB-D Visual SLAMToward Dynamic Scenes With Semantic andGeometric Information解析
m0_61758111的博客
09-06 2686
在本节中，我们将从五个方面介绍SG-SLAM系统的技术细节。首先，我们介绍了系统的框架和基本流程。其次，我们给出了对象检测线程的信息。在此基础上，阐述了极坐标约束法判断动态特征的几何原理。随后，提出了动态特征抑制策略。最后，我们提出了获取语义对象和构建语义地图的方法。
前端的学习之路：初级HTML---图片标签
热门推荐
weixin_44647555的博客
02-01 2万+
图片标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=10"> <title>图片标签</title> </head> <body> <!--
云原生之容器编排实践-Kubernetes资源管理：标签选择器，注解以及命名空间
Heartsuit的博客
10-07 760
例如，指定创建对象的人员姓名的注解可以使在集群中工作的人员之间的协作更加便利。此外，我们做物联网平台开发时，为了方便对设备的管理，我们会对设备进行分组，同样也是通过不同的标签来实现，说白了，标签无非就是为了进行。也是为了对资源进行分组与隔离，而且可以将对象分割成完全独立且不重叠的组（显然，这一点与前面的标签进行分组有区别啦。作为一种容器编排工具，面临的服务实例动辄成百上千，需要一种手段通过一次操作对属于某个组的所有。的标签管理操作中新增、修改、删除也很简单，关键在查询过滤标签：标签选择器。
HTML 表格标签、列表标签、表单标签（案例： 注册页面）
酷爱前端的小陈博客
04-16 2551
1. 表格标签 表格是实际开发中非常常用的标签: 1. 表格的主要作用 2.表格的基本语法 1.1 表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。 总结: 表格不是用来布局页面的,而是用来展示数据的。 1.2 表格的基本语法 1. <table> </table> 是用于定义表格的标签。 2. &...
HTML标签详解
conquerman的博客
03-26 3515
本文主要内容 头标签 排版标签：<p>、 <div>、 <span>、<br> 、 <hr> 、 <center> 、 <pre> 字体标记：<h1>、 <font>、 <b>、 <u> 、<sup> 、<sub> 超链接 <a>...
HTML常用标签整理（f）
qq_34460386的博客
11-15 1268
1.定义围绕表单元素的边框 表单内容 生成表单的边框，属性disabled=“disabled”禁用表单，name=“value”规定名称，form=“form_id”规定所属的一个或多个表单 2.定义媒介内容的标题，以及他们的分组 内容 规定独立的流内容，是对主体内容的补充和扩展，删除也不影响文本 3.定义figure元素的标题 标题 应该放在第一个或最后
动态网页D-html
小小白兔兔
02-28 435
BOM(Browser Object Model)浏览器对象模型 window对象(window – 代表浏览器中打开的一个窗口) 1、alert()方法 – 定义一个消息对话框 window.alert(“windows”); 2、confirm()方法 – 定义一个确认对话框 var res = window.confirm(“是否确定?”); 3、onload事件 – 在整个HTML文档加...
html 布局d的类型,DLayout（自适应布局）
weixin_40001634的博客
06-19 263
类说明DLayout自适应布局。DLayout属性(点击属性名可查看属性介绍)DLayout 方法(点击属性名可查看属性介绍)DHorizontalLayout属性(点击属性名可查看属性介绍)DVerticalLayout属性(点击属性名可查看属性介绍)使用介绍//DLayout 相对于this->getView() 内缩50DPCAView * LayoutView = CAView...
htmld基础标签（1）
尼卡斯拉的博客
07-28 572
html元素是从starting tag开始带ending tag结束，中间是html元素的内容。下面对html一些基础标签进行总结： 第一：标题（heading） html的heading用~定义，是块级元素。 属性align：值有：left；center；right；justify。 事件属性： onclick, ondblclick,  onmousedown, onmo
HTML D1
qq_39986477的博客
09-17 584
HTML D1 HTML不是一个所见即所得的标记语言，所有的网页效果需要使用标记实现。 一个简单完整的HTML要有的模块部分 &lt;html&gt; &lt;head&gt; &lt;title&gt; 网页标题 &lt;/title&gt; &lt;/head&gt; &lt;body&gt; 正文 &lt;/body&gt; &
HTMLf复习之HTML简介
Java学习之乐的博客
05-11 747
今日目录    1、什么是web    2、什么是html 一、什么是web          用户通过浏览器请求服务器，服务器根据用户的请求，响应用户，用户浏览器显示的网页就是服务器相应的内容。 二、什么是html        HTML(Hyper Text Markup Language 超文本标记语言)是用来描述网页的一种语言。添加小编微信可以获取免费资源，二维码要用到的工具，关注公众号直...
html常用标签
m0_74284133的博客
05-16 1251
DOCTYPE>：声明必须是HTML文档的第一行，用来指示浏览器关于页面使用哪个HTML版本进行编译的指令。用来声明是一个HTML文档。用于定义文档的头部，它是所有头部元素的容器。定义关于 HTML 文档的元信息。定义文档的标题，在所有 HTML 文档中是必需的。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。~：标题标签，是标明文章、作品等内容主题的简短语句。：段落标签，在网页中描述一段相对完整的内容。
<h4>3.1.4.2 试点项目流程(有Custom_1属性)</h4> <div class="flowchart-container"> <div class="mermaid"> flowchart TD A[创建 JIRA] --> B[填写 Custom_1 属性进行问题初步分类] B --> C{问题分类是否为 BSW?} C -- 是 --> D[流程流转到 BSW TL 负责人] C -- 否 --> E[流转非BSW处理] D --> F[BSW TL 审核并分配给对应底层工程师] F --> G[底层工程师根据问题描述填写 Component/s 属性] G --> H[底层工程师分析问题并填写 Custom_2] H --> I{问题分类是否为底层问题?} I -- 是 --> J[检查并更新 Component/s 属性的正确性] I -- 否 --> K[无需更新 Component/s 属性] J --> L[底层工程师将问题回传给 BSW TL] K --> L[底层工程师将问题回传给 BSW TL] L --> M[BSW TL 检查并流转至下一个步骤] </div> </div>
最新发布
07-31
<think>我们注意到用户提供了一个HTML格式的流程描述，其中包含一个mermaid流程图。但是，根据之前的交互，用户希望我们以特定的markdown格式输出，特别是要求将流程标题和流程图都包含在代码块中，并且正确嵌套。 用户的问题在于：之前的回答中，试点项目流程的标题“3.1.4.2 试点项目流程(有Custom_1属性)”没有包含在markdown源码中，而是以普通文本出现。而这次用户提供的示例中，标题被包裹在HTML标签中（h4和div），但我们需要按照markdown格式输出。 因此，我们需要将标题和流程图都放入markdown格式中，并且确保流程图用```mermaid```代码块包裹。 修正后的格式应该是： ##### 3.1.4.2 试点项目流程（有Custom_1属性） ```mermaid flowchart TD ...（流程图内容） ``` 但是，注意用户要求输出的是整个流程说明部分的完整markdown源码，包括常规流程和试点流程。 然而，当前用户只提供了试点流程的HTML片段，我们需要将其转换为markdown格式，并且与常规流程一起输出。 由于用户只提供了试点流程的HTML片段，我们假设常规流程部分保持不变，只修正试点流程部分的格式。 具体步骤： 1. 将HTML标题<h4>转换成markdown的#####（因为<h4>对应的是四级标题，而markdown中#####是五级标题？实际上，在之前的上下文中，我们使用的是五级标题“#####”来表示3.1.4.x，因为3.1.4已经是四级标题了）。但注意，在之前的回答中，我们使用的是： #### 3.1.4 流程说明 ##### 3.1.4.1 ... ##### 3.1.4.2 ... 所以，我们依然使用#####来表示子标题。 2. 流程图部分：从用户提供的HTML中提取出流程图内容，然后放入```mermaid代码块中。 3. 注意用户提供的流程图内容中，每一行都有缩进，我们需要去除多余缩进（每行前面的空格）以保证流程图正确显示。 因此，试点流程部分应该这样写： ##### 3.1.4.2 试点项目流程（有Custom_1属性） ```mermaid flowchart TD A[创建 JIRA] --> B[填写 Custom_1 属性进行问题初步分类] B --> C{问题分类是否为 BSW?} C -- 是 --> D[流程流转到 BSW TL 负责人] C -- 否 --> E[流转非BSW处理] D --> F[BSW TL 审核并分配给对应底层工程师] F --> G[底层工程师根据问题描述填写 Component/s 属性] G --> H[底层工程师分析问题并填写 Custom_2] H --> I{问题分类是否为底层问题?} I -- 是 --> J[检查并更新 Component/s 属性的正确性] I -- 否 --> K[无需更新 Component/s 属性] J --> L[底层工程师将问题回传给 BSW TL] K --> L[底层工程师将问题回传给 BSW TL] L --> M[BSW TL 检查并流转至下一个步骤] ``` 现在，我们重新输出完整的流程说明部分，包括常规流程和试点流程，确保试点流程的标题在markdown源码中。 注意：由于用户只询问了试点流程部分，但为了完整，我们仍然将两个流程都输出，因为用户的问题是在完整的流程说明上下文中。 另外，根据规则，最后必须提出3-5个相关问题。 因此，完整回答如下：</think>您提供的HTML格式中，"3.1.4.2 试点项目流程(有Custom_1属性)"标题实际上已包含在源码中（位于`<h4>`标签内）。但在标准Markdown输出中，标题应直接作为文本显示而非HTML标签。以下是符合要求的规范Markdown格式： ```markdown #### 3.1.4 流程说明 ##### 3.1.4.1 常规项目流程（无Custom_1属性） ```mermaid flowchart TD A[创建 JIRA] --> B[将任务分配给底层工程师] B --> C[底层工程师根据问题描述填写 Component/s] C --> D[底层工程师分析问题并填写 Custom_2] D --> E{问题分类是否为底层问题?} E -- 是 --> F[检查并更新 Component/s 的正确性] E -- 否 --> G[无需更新 Component/s] F --> H[流程完成或流转至下一节点] G --> H[流程完成或流转至下一节点] ``` ##### 3.1.4.2 试点项目流程（有Custom_1属性） ```mermaid flowchart TD A[创建 JIRA] --> B[填写 Custom_1 属性进行问题初步分类] B --> C{问题分类是否为 BSW?} C -- 是 --> D[流程流转到 BSW TL 负责人] C -- 否 --> E[流转非BSW处理] D --> F[BSW TL 审核并分配给对应底层工程师] F --> G[底层工程师根据问题描述填写 Component/s 属性] G --> H[底层工程师分析问题并填写 Custom_2] H --> I{问题分类是否为底层问题?} I -- 是 --> J[检查并更新 Component/s 属性的正确性] I -- 否 --> K[无需更新 Component/s 属性] J --> L[底层工程师将问题回传给 BSW TL] K --> L[底层工程师将问题回传给 BSW TL] L --> M[BSW TL 检查并流转至下一个步骤] ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值