HTML常用元素以及意义

hypnos_xy
7 阅读9分钟

HTML 常用元素

！DOCTYPE

主要就是告诉标准通用标记语言解析器应该使用什么样的文档类型定义 Document Type Definition（DTD）来解析文档 常见的声明：

<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

head

<head>  元素包含机器可读的文档相关信息（元数据），如文档的标题、脚本和样式表

meta

<meta>  元素表示那些不能由其他 HTML 元相关（meta-related）元素表示的元数据信息。


<meta charset="UTF-8">
<meta name="author" content="aaa@mail.abc.com">
<!-- SEO -->
<meta name="description" content="描述描述描述描述描述">
<meta name="keywords" content="关键字关键字关键字关键字关键字">
<!-- 视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

title

<title> 元素 定义文档的标题，显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。

style

<style>  元素包含文档的样式信息或文档的部分内容。其中的 CSS 会应用于包含 <style> 元素的文档内容

script

<script>  元素用于嵌入可执行代码或数据，这通常用作嵌入或者引用 JavaScript 代码。<script> 元素也能在其他语言中使用。

属性：

  • async:对于普通脚本，如果存在 async 属性，那么普通脚本会被并行请求，并尽快解析和执行。该属性能够消除解析阻塞的 Javascript。解析阻塞的 Javascript 会导致浏览器必须加载并且执行脚本，之后才能继续解析
  • defer:这个布尔属性的设置是为了向浏览器表明，该脚本是要在文档被解析后，但在触发 DOMContentLoaded 事件之前执行的。
  • type 该属性表示所代表的脚本类型

  1. 属性未设置（默认），一个空字符串，或一个 JavaScript MIME 类型:text/javascript、application/json

    <script type="text/javascript">

  2. module 此值导致代码被视为 JavaScript 模块。其中的代码内容会延后处理。

    <script type="module">
    // 支持 ES6 模块化语法
    import { myFunction } from './module.js';
    export const myVar = 10;
</script>

  3. importmap此值代表元素体内包含导入映射（importmap）表。导入映射表是一个 JSON 对象，开发者可以用它来控制浏览器在导入 javaScript 模块时如何解析模块标识符。

    <script type="importmap">
{
  "imports": {
    "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
  }
}
</script>

link

<link>  元素规定了当前文档与某个外部资源的关系。该元素最常用于链接样式表，此外也可以被用来创建站点图标（比如 PC 端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。

  • rel 设定为 preload，表示浏览器应该预加载该资源,preload告诉浏览器立即下载指定的资源，因为该资源将在当前页面中很快被使用。它优先于prefetch，因为当前页面需要它。
  • rel 设定为 prefetch，prefetch用于在浏览器空闲时加载可能在未来页面中使用的资源（例如，用户可能点击的链接）。
  • rel 设定为 dns-prefetch,dns-prefetch：仅提前进行DNS解析。
<link rel="dns-prefetch" href="https://cdn.example.com">

src和href的区别：

src (源)：嵌入外部资源到当前文档中，把东西"拿进来"成为文档的一部分，src资源通常需要被浏览器解析/执行，替代原有的内容

href (超文本引用)：建立当前文档与其他资源的关联，和外部资源"手拉手"，相当于资源的引用，href的资源保持独立，不被嵌入

a

  • href 超链接所指向的 URL。链接不限于基于 HTTP 的 URL——它们可以使用浏览器支持的任何 URL 协议： 带 tel: URL 的电话号码。 带 mailto: URL 的电子邮件地址。 带 sms: URL 的短信。 带 javascript: URL 的可执行代码。 如果 web 浏览器不支持其他 URL 方案，网站可以使用 registerProtocolHandler()。
  • target该属性指定在何处显示链接的 URL，作为浏览上下文的名称（标签、窗口或 <iframe>）。以下关键词对加载 URL 的位置有特殊含义： _self：当前浏览上下文。（默认） _blank：通常在新标签页打开，但用户可以通过配置选择在新窗口打开。 _parent：当前浏览环境的父级浏览上下文。如果没有父级框架，行为与 _self 相同。 _top：最顶级的浏览上下文（当前浏览上下文中最“高”的祖先）。如果没有祖先，行为与 _self 相同。

语义化元素

  1. <article> 元素表示文档、页面、应用或网站中具有独立分发或复用意义的自包含内容块，例如论坛帖子、杂志或报纸文章、博客条目、产品卡片、用户评论、交互式组件等独立内容项。
  2. <aside> 元素用于表示文档中内容仅与主内容间接相关的部分。通常以侧边栏或提示框的形式呈现。
  3. <summary> 元素 指定了 <details>元素展开盒子的内容的摘要，标题或图例。点击 <summary> 元素可以切换父元素 <details> 开启和关闭的状态。
  4. <details>  元素可创建一个组件，仅在被切换成展开状态时，它才会显示内含的信息。<summary>元素可为该部件提供概要或者标签。
  5. <dialog>  元素表示一个对话框或其他交互式组件，例如一个可关闭警告、检查器或者窗口。
  6. <fieldset>  元素用于对表单中的控制元素进行分组（也包括 label 元素）。
  7. <legend>  元素表示其父元素 <fieldset> 内容的标题。
  8. <figure>  元素代表一段独立的内容，可能包含 <figcaption>元素定义的说明元素。该插图、标题和其中的内容通常作为一个独立的引用单元。
  9. <figcaption> 元素是用来描述其父节点 <figure> 元素里的其余内容的标题或说明。为 <figure> 提供一个无障碍描述
  10. <footer>  元素表示其最近的祖先分段内容的页脚或分段根元素。<footer> 通常包含有关该部分作者、版权数据或相关文档链接的信息。
  11. <header> 元素表示介绍性内容，通常是一组介绍性或导航性辅助内容。它可能包含一些标题元素，也可能包含徽标、搜索表单、作者姓名和其他元素。
  12. <label> 元素（标签）表示用户界面中某个元素的说明。
  13. <main> 元素呈现了文档的 <body> 或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。
  14. <menu>  元素在 HTML 规范中被描述为 <ul>的语义替代，但浏览器将其视为与 <ul>没有区别（并通过无障碍树暴露）。它表示一个无序列表（由 <li> 元素表示）。
  15. <nav>元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。
  16. <progress>  元素用来显示一项任务的完成进度。虽然规范中没有规定该元素具体如何显示，浏览器开发商可以自己决定，但通常情况下，该元素都显示为一个进度条形式。
  17. <section> 元素 表示 HTML 文档中一个通用独立章节，它没有更具体的语义元素来表示。一般来说会包含一个标题。
  18. <time> 元素用来表示一个特定的时间段。该元素可包含 datetime 属性，用于将日期转换为机器可读格式，从而获得更好的搜索引擎结果或自定义功能（如提醒）

其他元素

  1. <form> 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。
  2. <button> 元素表示一个可点击的按钮，可以用在表单或文档其他需要使用简单标准按钮的地方。
  3. <canvas> 元素可被用来通过 JavaScript绘制图形及图形动画
  4. <div>  元素是流式内容的通用容器。
  5. <iframe>  表示嵌套的浏览上下文。它能够将另一个 HTML 页面嵌入到当前页面中
  6. <img> 元素将一张图像嵌入文档。
  7. <input>  元素用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据。取决于设备和用户代理不同，表单可以使用各种类型的输入数据和控件。<input> 元素是目前 HTML 中最强大、最复杂的元素之一，因为它有大量的输入类型和属性组合。
  8. <li> 元素用于表示列表中的项目。它必须包含在一个父元素中：有序列表（<ol>）、无序列表（<ul>）或菜单（<menu>）。在菜单和无序列表中，列表项通常使用项目符号显示。在有序列表中，通常在左侧显示一个升序计数器，如数字或字母。
  9. <ol> 元素 表示有序列表，通常渲染为一个带编号的列表。
  10. <ul>  元素表示无序的项目列表，通常渲染为项目符号列表。
  11. <option>  元素用于定义包含在 <select>、<optgroup>或 <datalist> 元素中的一项。
  12. <p> 元素表示文本的一个段落。在视觉媒体中，段落通常表现为用空行和/或首行缩进与相邻段落分隔的文本块，但 HTML 段落可以是相关内容的任何结构分组，如图像或表格字段。
  13. <select> 元素 表示一个提供选项菜单的控件：
  14. <span> 元素是一个通用的行级容器，本身不具备特殊含义
  15. <style>  元素包含文档的样式信息或文档的部分内容。其中的 CSS 会应用于包含 <style> 元素的文档内容。
  16. <template>元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以 (原文为 may be) 在运行时使用 JavaScript 实例化
  17. <textarea> 元素是一个多行纯文本编辑控件，适用于允许用户输入大量自由格式文本的场景
  18. <video> 元素用于在文档中嵌入媒体播放器，用于支持文档内的视频播放。
  19. <table>  元素表示表格数据——即在一个由包含数据的行和列组成的二维表格中呈现的信息。<tbody>、<td>、<tr>、<tfoot>、<thead>
avatar
文章
阅读
粉丝