HTML语义化

语义化可以总结为根据内容选择标签，用最恰当的标签来标记内容
例如网页中的标题使用<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> 描述文档或文档某个部分的细节。

弃用的HTML元素

这些是旧的HTML元素，已弃用，不应继续使用。
不要在新项目中使用它们，应尽快在旧项目替换它们，即使它们现在依然可以使用。

HTML的必考知识点你会吗？

HTML语义化

语义化好处

注意语义化编写

常用语义化标签

弃用的HTML元素

猜你喜欢