HTML语义化
时间:2022-07-24
本文章向大家介绍HTML语义化,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
HTML语义化
每日更新前端基础,如果觉得不错,点个star吧 ? https://github.com/WindrunnerMax/EveryDay
语义化可以总结为 根据内容选择标签,用最恰当的标签来标记内容
例如网页中的标题使用<h1>~<h6>
这样的标签,而不是使用<div>+css
语义化好处
- 使HTML结构变的清晰,有利于维护代码和添加样式
- 通常语义化HTML会使代码变的更少,使页面加载更快
- 即使在没有CSS样式的条件下,也能很好地呈现出内容结构、代码结构
- 便于团队开发和维护,语义化更具可读性,遵循
W3C
标准,可以减少差异化 - 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页
- 提升搜索引擎优化(SEO)的效果。和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息,爬虫可以依赖于标签来确定上下文和各个关键字的权重
注意语义化编写
- 尽可能少的使用无语义的标签
<div>
和<span>
- 不要使用纯样式标签,如
<b>
是纯样式标签,而<strong>
的语义为加粗 - 在
<lable>
标签中设置for
来让说明文本和相对应的<input>
关联起来 - 表单域要用
<fieldset>
标签包起来,并用<legend>
标签说明表单的用途 - 需要强调的文本,可以包含在strong或者em标签中,
<strong>
默认样式是加粗,<em>
是斜体 - 使用表格时,标题要用
<caption>
,表头用<thead>
,主体部分用<tbody>
包围,尾部用<tfoot>
包围。表头和一般单元格要区分开,表头用<th>
,单元格用<td>
常用语义化标签
-
<h1>~<h6>
定义页面的标题,<h1>-<h6>
元素等级以此降低。 -
<header>
页眉通常包括网站标志、主导航、全站链接以及搜索框。 -
<nav>
提供当前文档内或其他文档的导航链接,导航部分的常见示例是菜单,目录和索引。 -
<main>
主要内容区域由与文档的中心主题或应用程序的中心功能直接相关或扩展的内容组成。 -
<article>
专注于单个主题的博客文章,报纸文章或网页文章。 -
<address>
提供了一个或多个人员或组织的联系信息。 -
<section>
定义文档中的节,表示HTML
文档中包含的独立部分。 -
<aside>
表示文档的一部分,其内容仅与文档的主要内容间接相关,通常显示为侧边栏。 -
<footer>
定义文档的底部区域,通常包含文档的作者,著作权信息,联系信息等。 -
<hgroup>
表示文档部分的多级标题,它对一组<h1>~<h6>
元素进行分组。 -
<ul>
表示项目的无序列表,通常呈现为项目符号列表。 -
<ol>
表示项目的有序列表,通常呈现为编号列表。 -
<li>
表示列表中的项目。 -
<strong>
表示强调突出重点内容,浏览器通常以粗体显示内容。 -
<em>
标记强调重点的文本,可以嵌套<em>
元素,嵌套的每个级别都表示强调程度更高。 -
<small>
代表旁注和小字体,例如版权和法律文本,独立于其样式表示。 -
<abbr>
表示缩写或首字母缩写词。 -
<cite>
用于描述对引用的创意作品的引用,并且必须包括该作品的标题。 -
<figure>
表示独立的内容,可能带有可选的标题,该标题使用<figcaption>
元素指定。 -
<figcaption>
表示说明其父<figure>
元素的其余内容的标题或图例。 -
<blockquote>
定义块引用,可以使用<cite>
元素提供文本表示 -
<mark>
表示被标记或突出显示以供参考或标记目的的文本。 -
<time>
表示特定的时间。 -
<data>
表示特定的日期。 -
<dfn>
用于表示在定义短语或句子的上下文中定义的术语。 -
<code>
计算机代码的简短片段的方式显示其内容的样式。 -
<samp>
输出的示例或引用的内联文本或样本文本。 -
<kbd>
表示文本是从键盘上键入的,它经常用在与计算机相关的文档或手册中。 -
<del>
表示已从文档中删除的文本范围。 -
<ins>
表示已添加到文档中的文本范围。 -
<menu>
表示用户可以执行或激活的一组命令,例如上下文菜单等。 -
<dialog>
表示对话框或其他交互式组件,例如检查器或子窗口。 -
<summary>
元素为<details>
元素的显示框指定摘要,标题或图例。 -
<details>
描述文档或文档某个部分的细节。 -
<bdi>
: 允许设置一段文本,使其脱离其父元素的文本方向设置。 -
<progress>
: 定义任何类型的任务的进度。 -
<ruby>
: 定义ruby
注释(中文注音或字符)。 -
<rt>
: 定义字符(中文注音或字符)的解释或发音。 -
<rp>
: 在ruby
注释中使用,定义不支持ruby
元素的浏览器所显示的内容。 -
<wbr>
: 规定在文本中的何处适合添加换行符。 -
<meter>
: 定义度量衡,仅用于已知最大和最小值的度量。
弃用的HTML元素
这些是旧的HTML元素,已弃用,不应继续使用。 不要在新项目中使用它们,应尽快在旧项目替换它们,即使它们现在依然可以使用。
<acronym>
、<applet>
、<basefont>
、<bgsound>
、<big>
、<blink>
、<center>
、<command>
、<content>
、<dir>
、<element>
、<font>
、<frame>
、<frameset>
、<image>
、<isindex>
、<keygen>
、<listing>
、<marquee>
、<menuitem>
、<multicol>
、<nextid>
、<nobr>
、<noembed>
、<noframes>
、<plaintext>
、<shadow>
、<spacer>
、<strike>
、<tt>
、<xmp>
- Spring Boot中使用Actuator的/info端点输出Git版本信息
- Spring Batch:文件的批量读写Flatfile(XML,CSV,TXT)
- 项目本机部署过程中的若个问题
- Android View体系(十一)自定义ViewGroup
- Java并发编程(四)Java内存模型
- Android View体系(十)自定义组合控件
- 算法(一)时间复杂度
- Android Studio详细安装流程和配置、主题
- html5 jqueryrotate插件实现旋转动画
- 为什么要使用String
- Android网络编程(十一)源码解析Retrofit
- android Material Design详解
- android EventBus详解(三)
- Android绘制优化(一)绘制性能分析
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例