备案控制台
开发者社区 开发与运维 文章 正文

2023 年使用的 10 大 html 元素

2023-03-02 83
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 2023 年使用的 10 大 html 元素

HTML 是一种功能强大的标记语言，可用于为我们的 Web 应用程序提供结构并提供强大的可访问性优势，但前提是使用得当。

在本文中，我们将发现您可能不知道的十大 HTML 元素，但它们可以帮助您创建更易访问且结构合理的 Web 应用程序。

Translate

HTML 中的 translate 属性用于指定元素的内容是否被翻译。此属性是 HTML5 中的新属性。translate 属性是全局属性的一部分，可用于任何 HTML 元素。

句法：

<element translate = "yes|no">
复制代码

属性值：translate 属性包含下面列出的两个值：

  • yes：该属性用于指定元素的内容可以被翻译。
  • no：该属性用于指定元素的内容不能被翻译。

例子：

<!DOCTYPE html>
<html>
    <head>
      <title>translate attribute</title>
        <style>
          </>
        </style>
    </head>
        <body>
          <h2><strong >translate attribute</strong></h2>
          <p translate="no">Don't translate this!</p>
          <p translate="yes">This tag can be translated to any language.</p>
        </body>
</html>          
复制代码

在上面的示例中，我们指定paragraph tag 不应翻译第一个。

Map

该<map>标签用于定义图像映射。图像映射是具有可点击区域的图像。元素

的必需名称属性与usemap 属性相关联，并在图像和地图之间创建关系。 该元素包含许多元素，这些元素定义了图像映射中的可点击区域。<map>``<img>'s

<map>``<area>

该<map>标签支持HTML中的全局属性，也支持HTML中的事件属性。

句法：

<map name=""> </map>
复制代码

例子：

<!DOCTYPE html>
<html>
 <head>
    <title>
        HTML | <map> Tag
    </title>
</head>
  <body>
<h1>The map and area elements</h1>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
</body>
</html>
复制代码

Draggable

此 draggable 属性用于指定元素是否可拖动。链接和图像默认是可拖动的。draggable 属性常用于拖放操作。

该draggable属性支持 HTML 中的全局属性。

句法：

<element draggable = "true|false|auto">
复制代码

draggable可以有以下值：

  • true：元素可以被拖动
  • false：无法拖动元素。
  • auto：此值表示使用默认浏览器。

例子：

对于这个例子，我们将创建一个可拖动的 div 元素：

步骤 1) 添加 HTML：

<!-- Draggable DIV -->
     <div id="mydiv">
      <!-- Include a header DIV with the same name as the draggable DIV, followed by "header" -->
       <div id="mydivheader">Click here to move</div>
      <p>Move</p>
      <p>this</p>
      <p>DIV</p>
    </div>
复制代码

步骤 2) 添加 CSS：

#mydiv {
      position: absolute;
      z-index: 9;
      background-color: #f1f1f1;
      border: 1px solid #d3d3d3;
      text-align: center;
    }
    #mydivheader {
      padding: 10px;
      cursor: move;
      z-index: 10;
      background-color: #2196F3;
      color: #fff;
    }
复制代码

唯一重要的风格是position: absolute，其余的由你决定。

步骤 3) 添加 JavaScript：

// Make the DIV element draggable:
    dragElement(document.getElementById("mydiv"));
    function dragElement(elmnt) {
      var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
      if (document.getElementById(elmnt.id + "header")) {
        // if present, the header is where you move the DIV from:
        document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
      } else {
        // otherwise, move the DIV from anywhere inside the DIV:
        elmnt.onmousedown = dragMouseDown;
      }
      function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();
        // get the mouse cursor position at startup:
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.onmouseup = closeDragElement;
        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
      }
      function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();
        // calculate the new cursor position:
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        // set the element's new position:
        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
      }
      function closeDragElement() {
        // stop moving when mouse button is released:
        document.onmouseup = null;
        document.onmousemove = null;
      }
    }
复制代码

整体代码和输出将如下所示：

网络异常，图片无法展示
|

capture

该capture属性指定（可选）应捕获新文件，以及应使用哪个设备来捕获该accept属性定义的类型的新媒体。capture文件输入类型支持该属性。

值包括user和environment。

该capture属性将一个字符串作为其值，该字符串指定用于捕获图像或视频数据的相机（如果该accept属性指示输入应属于其中一种类型）。

注意：Capture 以前是一个布尔属性，如果存在，则请求使用设备的媒体捕获设备（例如相机或麦克风）而不是请求文件输入。

例子：

当设置为文件输入类型时，带有麦克风和摄像头的操作系统将显示一个用户界面，允许选择现有文件或创建新文件：

<p>
      <label for="soundFile">What does your voice sound like?:</label>
      <input type="file" id="soundFile" capture="user" accept="audio/*">
      </p>
      <p>
      <label for="videoFile">Upload a video:</label>
      <input type="file" id="videoFile" capture="environment" accept="video/*">
      </p>
      <p>
      <label for="imageFile">Upload a photo of yourself:</label>
      <input type="file" id="imageFile" capture="user" accept="image/*">
      </p>
复制代码

整体代码和输出将如下所示：

网络异常，图片无法展示
|

拼写检查

HTML 中的拼写检查功能用于检测文本字段中的语法或拼写错误。

可以使用拼写检查属性将拼写检查功能应用于 HTML 表单。spellcheck 属性是一个枚举属性，它定义是否检查 HTML 元素是否有错误。它可以与inputHTMLtextarea中的字段一起使用。

它可能具有以下值：

  • true: 这表示如果可能的话，应该检查元素的拼写错误；
  • false: 表示不应检查元素的拼写错误。

未设置该属性时，取默认值，一般由元素类型和浏览器定义。该值也可以从祖先元素继承，这意味着仅当其最近的祖先的拼写检查状态为 时，才会检查元素内容是否存在拼写错误true。

句法：

html 中输入字段中拼写检查属性的语法：

<input type="text" spellcheck="value">
复制代码

在 html 的文本区域字段中进行拼写检查的语法：

<textarea type="text" spellcheck="value"></textarea>
复制代码

在上面的语法中，分配给拼写检查的值将定义是否在元素上启用拼写检查。

在 HTML 表单中启用拼写检查

要在 HTML 表单中启用拼写检查，拼写检查属性设置为true.

下面是一个启用了拼写检查的示例 HTML 程序：

<!DOCTYPE html>
    <html>
       <body>
            <h3>Example of Enabling SpellCheck</h3>
           <form>
                <p>
                    <input type="text" spellcheck="true">
                </p>
                <p>
                    <textarea spellcheck="true"></textarea>
                </p>
                <button type="reset">Reset</button>
            </form>    
        </body>
    </html> 
复制代码

输出：

网络异常，图片无法展示
|

请注意，当我们输入inputandtextarea box时，它正在检查拼写，因此将“loleem ippssun”和“dulor cit amet”标记为拼写错误。

在 HTML 表单中禁用拼写检查

要在 HTML 表单中禁用拼写检查，将拼写检查属性设置为false.

下面是禁用拼写检查的示例 HTML 程序：

<!DOCTYPE html>
    <html>
       <body>
            <h3>Example of Disabling SpellCheck</h3>
           <form>
                <p>
                    <input type="text" spellcheck="false">
                </p>
                <p>
                    <textarea spellcheck="false"></textarea>
                </p>
                <button type="reset">Reset</button>
            </form>    
        </body>
    </html>  
复制代码

输出：

网络异常，图片无法展示
|

请注意，当我们输入inputandtextarea box时，它没有检查拼写，因此忽略了拼写错误的“loleem ippssun”和“dulor cit amet”。

accept

accept 属性指定服务器接受的文件类型（可以通过文件上传提交）。

此属性指定服务器接受的文件类型。此属性只能与元素一起使用。此属性不用于验证工具，因为文件上传应在服务器上进行验证。

句法：

<input accept = "file_extension">
复制代码

属性值：

  • file_extension ：它指定用户可以选择的文件扩展名，如 .gif、.jpg、.png、.doc）。
  • audio/* : 用户可以选择所有的声音文件。
  • video/* : 用户可以选择所有的视频文件。
  • image/* ：有效的媒体类型，没有参数。查看 IANA Media Types以获得完整的标准媒体类型列表
  • media_type ：没有参数的有效媒体类型。

例子：

在这个例子中，我们将指定服务器只接受文件上传中的图像文件：

<!DOCTYPE html>
    <html>
        <head>
            <title>accept attribute</title>
        </head>
        <body>
            <h2>Accept attribute</h2>
            <form action=" ">
            <label for="img">Select image:</label>
            <input type="file" name="img" accept="image/*">
            <input type="submit">
            </form>
        </body>
    </html>             
复制代码

输出：

网络异常，图片无法展示
|

注意：该accept属性只能与 一起使用<input type="file">。

下载

该download属性指定href当用户单击超链接时将下载目标（属性中指定的文件）。

该download属性的可选值将是文件下载后的新名称。它用于<a>和<area>元素。

允许的值没有限制，浏览器会自动检测正确的文件扩展名并将其添加到文件中（.img、.pdf、.txt、.html 等）。

如果省略该值，则使用原始文件名。

句法：

<element download="filename">
复制代码

属性值：

它包含可选的单个值“文件名”。它指定下载文件的新文件名。

download您可能会看到如下所示的属性实现示例：

<a href="document.pdf" download>Download PDF</a>
复制代码

如果没有download上面的属性，那么浏览器将导航到该document.pdf位置并在浏览器中打开文件。

当您指定download属性时，计算机将：

  • 将文件保存在浏览器设置中定义的默认下载位置
  • 或者下载前问你把文件保存在哪里

该download属性还接受一个值，您可以将其指定为文件名别名：

<a href="document.pdf" download="HTML5_download.pdf">Download PDF</a>
复制代码

注意：当您下载document.pdf文件时，浏览器会自动将文件重命名为download属性值。

项目范围

HTMLitemscope属性item types用于确保包含在块中的 HTML 是关于特定项目的。为任何元素定义itemscope属性都会创建一个新项，这会产生许多与该元素关联的名称-值对。

相关属性itemtype用于指定描述项目及其属性上下文的词汇表（例如投资组合站点）的有效 URL。

句法：

<element itemscope></element>
复制代码

当您itemscope为元素指定属性时，将创建一个新项。该项目由一组名称-值对组成。对于具有itemscope属性和itemtype属性的元素，您还可以指定id属性。您可以使用该id属性为新项目设置全局标识符。全局标识符允许该项目与 Web 页面上的其他项目相关联。

例子：

表示投资组合的结构化数据：

以下示例指定了itemtype并指定了四个相关itemprop属性。

物品种类 文件夹
道具 （道具名称） （道具价值）
道具 开发商 约翰保罗埃兹
项目范围 道具 堆 前端开发
道具 名称 头像
道具 文件夹 访问投资组合

HTML

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML itemscope Attribute</title>
    </head>
    <body>
        <div itemscope itemtype="https://johnpauleze.netlify.app">
            <h1 itemprop="name">Avatar</h1>
            <span>Developer: <span itemprop="developer">Johnpaul Eze</span> (born june 26th)</span>
            <span itemprop="stack">Frontend dev</span>
            <a href="https://johnpauleze.netlify.app" itemprop="Portfolio">Visit Portfolio</a>
          </div>
    </body>
    </html>
复制代码

输出：

网络异常，图片无法展示
|

在此处查找有关itemprop属性的更多信息。

itemtype

itemtype 属性指定 URL，但 URL 不与任何资源相关联，而是被浏览器用作标识符。itemtype 属性只能在那些包含 itemscope 属性的元素上指定，否则它将无法正确执行。itemtype URL 中使用的项目类型必须是 schema.org 提供的规范中定义的那些类型。一些引用 schema.org 上的微数据的浏览器会在网页上查找特定资源，并且这些 itemtype 和 itemscope 属性最常被使用。itemtype 属性的值应包含一组无序的唯一标记，这些标记区分大小写，指定每个标记都包含绝对且有效的 URL。属性的值应至少包含 1 个标记。

句法：

<div itemscope itemtype="URL">
        <span itemprop="item1">item name</span>
        <span itemprop="item2">item name</span>
    </div>
复制代码

注意：itemtype必须是 URL，或者您也可以使用我们在以下示例中使用的 URN（统一资源名称）。

属性值：该属性必须包含一个有效的 URL，该 URL 不包含前导和尾随空格。

支持的标签：

<div>和<span>标签。

例子：

此示例描述了itemtypeHTML 中属性的实现。

HTML

<!DOCTYPE html>
    <html>
    <head>
        <title>HTML itemtype attribute</title>
    </head>
    <body>
        <h1>FreeCodeCamp</h1>
        <h4>Tutorials and Courses</h4>
        <div itemscope itemtype=
            "https://www.freecodecamp.org/">
            <span itemprop="description">
                FreeCodeCamp is a portal for developers.
                It has tutorials on various topics.
            </span>
            <br>
            Course: <span itemprop="course">JavaScript</span>
            <br>
            Tutorial: <span itemprop="tutorial">React</span>
            <br>
        </div>
    </body>
    </html>
复制代码

输出：

网络异常，图片无法展示
|

在此处查找有关itemprop属性的更多信息。

itemtype

HTML 中的 dropzone 属性用于指定拖动的数据在放置在任何元素上时是否被复制、移动或链接。此属性是 HTML5 中的新属性。

句法：

<element dropzone = "copy | move | link">
复制代码

属性值：

  • 复制：拖放数据将导致拖动数据的副本。
  • 移动：放下数据将导致拖动的数据移动到新位置。
  • 链接：删除数据将导致指向原始数据的链接

例子：

<!DOCTYPE html>
    <html>
    <head>
        <title>dropzone</title>
    </head>
    <body draggable="true">
        <h2> dropzone attribute</h2>
        <div dropzone="copy">DIV</div>
        <div dropzone="move">DIV1</div>
        <div dropzone="copy">DIV2</div>
    </body>
    </html>
复制代码

注意：流行的浏览器不支持 dropzone 属性。

结论：

在本文中，我们重点介绍了可能对软件开发初学者有用的前 10 个 HTML 元素。建议使用它们来提高网站的可访问性和搜索引擎优化。


文章标签：
JavaScript
前端开发
自然语言处理
定位技术
SEO
HTML5
移动开发
关键词：
HTML元素
饱饱巴士
目录
相关文章
aliyun5297948689-49597
|
16天前
|
移动开发 IDE 前端开发
HTML基础-标签与元素：构建网页的基石
【6月更文挑战第1天】HTML是网页基础，由标签和元素定义内容结构与样式。本文介绍HTML标签（如`<p>`）和元素（包括开始、结束标签及内容），并列出常见错误：忘记闭合标签、错误嵌套顺序、不恰当使用自封闭标签及混淆标签与属性。建议遵循标准、使用IDE辅助、验证代码和持续实践来避免错误。示例代码展示基本用法：`<html><head><title>...</title></head><body>...</body></html>`。学习HTML标签与元素是前端开发入门关键。
aliyun5297948689-49597
25 3
Want595
|
5天前
|
存储 前端开发 JavaScript
HTML元素周期表
HTML元素周期表
Want595
14 1
aliyun5297948689-49597
|
11天前
|
前端开发 JavaScript 开发者
HTML基础-块级元素与内联元素
【6月更文挑战第6天】HTML中的元素分为块级和内联元素，两者在网页布局中扮演重要角色。块级元素占用整行，可设置宽高，常用于组织结构；内联元素只占内容宽度，常用于文本样式和链接。理解它们的区别并正确选择是创建清晰布局的关键。常见问题包括错误选择元素、忽视默认样式和不熟悉`display`属性。解决方法包括根据语义选择元素、清除默认样式以及灵活使用`display`属性转换元素行为。熟练掌握这些能提升网页的语义化、可访问性和布局效率。
aliyun5297948689-49597
22 0
aliyun5297948689-49597
|
13天前
|
移动开发 前端开发 数据安全/隐私保护
HTML基础-表单元素与属性：深入浅出指南
【6月更文挑战第4天】本文介绍了HTML表单的基础知识，包括`&lt;form&gt;`标签、各种表单元素（如文本输入、密码、单选、复选、下拉菜单和提交按钮）以及相关属性。易错点包括忘记设置`name`属性、不使用`label`、忽视表单验证和不安全的提交方式。建议使用HTML5内置验证属性增强安全性，并使用`POST`方法处理敏感信息。提供的完整注册表单示例展示了这些概念的应用。
aliyun5297948689-49597
21 0
aliyun5297948689-49597
|
14天前
|
前端开发 UED SEO
HTML基础-链接与图片插入：网页的连接与视觉元素
【6月更文挑战第2天】本文介绍了HTML中`<a>`和`<img>`标签的使用，包括链接的基本结构、目标类型以及图片的插入、尺寸调整和对齐方式。常见问题涉及链接和图片路径、缺失`alt`属性及尺寸不匹配，解决方案包括正确引用资源、使用绝对URL和重视`alt`属性。通过示例代码，展示了创建链接和图片的方法，强调了提升网页用户体验的重要性。
aliyun5297948689-49597
27 3
sunrr
|
16天前
|
移动开发 搜索推荐 UED
HTML元素
【6月更文挑战第1天】HTML元素
sunrr
20 7
啥都不会。
|
18天前
|
Web App开发 移动开发 数据安全/隐私保护
HTML5 表单元素
HTML5 表单元素
啥都不会。
15 0
啥都不会。
|
18天前
HTML 元素
HTML 元素
啥都不会。
14 0
米果粒
|
23天前
HTML 元素
HTML 元素。
米果粒
19 2
sunrr
|
25天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式？
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式？
sunrr
28 1

热门文章

最新文章

  • 1
    【HTML5】标记文字
  • 2
    HTML5使用 JavaScript File API 实现文件上传
  • 3
    使用 playn 和 GWT 开发 html5 游戏。搭建环境。helloworld。
  • 4
    整理发布html的select控件实用js操作
  • 5
    第2天：HTML常用标签
  • 6
    WebBrowser 显示Html内容不得不知的技巧
  • 7
    HTML DOM clearInterval() 方法
  • 8
    【转】HTML5杂谈 概念与现行游戏 割绳子 宝石迷阵
  • 9
    JavaScript网站设计实践（六）编写live.html页面 改进表格显示
  • 10
    MDWiki —— 基于 Markdown 和 HTML 5 的纯客户端 Wiki/CMS
  • 1
    【专栏：HTML与CSS前端技术趋势篇】HTML与CSS在PWA（Progressive Web Apps）中的应用
    45
  • 2
    【专栏：HTML与CSS前端技术趋势篇】前端框架（React/Vue/Angular）与HTML/CSS的结合使用
    51
  • 3
    【专栏：HTML 与 CSS 前端技术趋势篇】Web 性能优化：CSS 与 HTML 的未来趋势
    35
  • 4
    【专栏：HTML与CSS前端技术趋势篇】渐进式增强与优雅降级在前端开发中的实践
    49
  • 5
    【专栏：HTML与CSS前端技术趋势篇】网页设计中的CSS Grid与Flexbox之争
    46
  • 6
    【专栏：HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
    33
  • 7
    【专栏：HTML与CSS实战项目篇】创建一个具有复杂布局的电商详情页
    46
  • 8
    【专栏：HTML与CSS实战项目篇】使用HTML5与CSS3制作一个动态表单验证页面
    41
  • 9
    【专栏：HTML 与 CSS 实战项目篇】实现一个在线产品展示页面
    132
  • 10
    【专栏：HTML与CSS实战项目篇】打造一个动态新闻网站
    153

    • 相关课程

    更多
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS

    • 相关电子书

    更多
  • 《零基础HTML入门教程》
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • HTML及前端框架
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考