什么是HTML语义化标签以及强调它的重要性

什么是html语义化标签

HTML语义化标签也是HTML的所有标签,css所有标签

为什么强调我们写的时候要语义化
  • 利于代码的解读性
  • 利于SEO,方便爬虫更好更快的识别,比如h1标题,一般都是标题,nav导航等,智能识别和过滤。
  • 利于浏览器渲染与解析,乱使用标签或嵌套标签,浏览器内核计算速率会变复杂
HTML语义化的所有标签
1:定义上的:

<!--...-->   定义注释。

<!DOCTYPE>  定义文档类型。

<html>定义 HTML 文档。

<body>     定义文档的主体。

<script>定义客户端脚本。

<frame>定义框架集的窗口或框架。

<frameset>定义框架集。

<head>定义关于文档的信息。

<iframe>定义内联框架。

<meta>定义关于 HTML 文档的元信息。

<link>定义文档与外部资源的关系。

<noframes>定义针对不支持框架的用户的替代内容。

<noscript>定义针对不支持客户端脚本的用户的替代内容。

2:功能上的(js或者css上的作用比较有特色的语义化标签):

<a>           定义锚。

<abbr>      定义缩写。

<address> 定义文档作者或拥有者的联系信息。

<area>       定义图像映射内部的区域。

<audio>    定义声音内容。

<base>     定义页面中所有链接的默认地址或默认目标。

<br>         定义简单的折行。

<button>  定义按钮 (push button)。

<col>定义表格中一个或多个列的属性值。

<colgroup>定义表格中供格式化的列组。

<dfn>        定义一个定义项目。

<code>     定义计算机代码文本。

<samp>     定义样本文本。

<kbd>       定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。

<var>       定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。

<cite>       定义引用。可使用该标签对参考文献的引用进行定义,比如书籍或杂志的标题。

<datalist>定义下拉列表。

 <wbr> 定义长单词在哪里换号;元素来添加 Word Break Opportunity(单词换行时机)

<video>定义视频。

<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。

<title>定义文档的标题。

<time>定义日期/时间。

<textarea>定义多行的文本输入控件。

<strong>定义强调文本。

<style>定义文档的样式信息。

<sub>定义下标文本。

<summary>为 <details> 元素定义可见的标题。

<sup>定义上标文本。

<source>定义媒介源。

<samp>定义计算机代码样本。

<section>定义 section。

<select>定义选择列表(下拉列表)。

<rt>定义 ruby 注释的解释。

<ruby>定义 ruby 注释。

<q>定义短的引用。

<progress>定义任何类型的任务的进度。

<param>定义对象的参数。

<pre>定义预格式文本。

<optgroup>定义选择列表中相关选项的组合。

<option>定义选择列表中的选项。

<output>定义输出的一些类型。

<details>定义元素的细节。

<dir>不赞成使用。定义目录列表。

<div>定义文档中的节。

<dfn>定义定义项目。

<dialog>定义对话框或窗口。

<dl>定义定义列表。

<dt>定义定义列表中的项目。

<embed>定义外部交互内容或插件。

<fieldset>定义围绕表单中元素的边框。

<figcaption>定义 figure 元素的标题。

<figure>定义媒介内容的分组,以及它们的标题。

<form>定义供用户输入的 HTML 表单。

<hr>定义水平线。

<img>定义图像。

<input>定义输入控件。

<ins>定义被插入文本。

<kbd>定义键盘文本。

<keygen>定义生成密钥。

<label>定义 input 元素的标注。

<legend>定义 fieldset 元素的标题。

<map>定义图像映射。

<mark>定义有记号的文本。

<menu>定义命令的列表或菜单。

<menuitem>定义用户可以从弹出菜单调用的命令/菜单项目。

<meter>定义预定义范围内的度量。

<nav>定义导航链接。

<object>定义内嵌对象。

3:结构上的(方便分块查看,这个很重要):结构上的可以被其他div+css代替但是好的前端会用这些标签来使代码可读性增强。


<header>定义 section 或 page 的页眉。

<dd>定义定义列表中项目的描述。

<article>  定义文章。

<aside>    定义页面内容之外的内容。

尤其上面的四位主要用于划分页面块,一般不做样式处理


<p>定义段落。

<em>       把文本定义为强调的内容。

<strong>  把文本定义为语气更强的强调的内容。

<bdo>       定义文字方向。

<bdi>        定义文本的文本方向,使其脱离其周围文本的方向设置,与bdo配合使用试试。

<big>        定义大号文本。

<b>           定义粗体字。

<del>定义被删除文本。

<ul>定义无序列表。

<ol>定义有序列表。

<table>定义表格。

<tbody>定义表格中的主体内容。

<td>定义表格中的单元。

<tfoot>定义表格中的表注内容(脚注)。

<th>定义表格中的表头单元格。

<thead>定义表格中的表头内容。

<tr>定义表格中的行。

<footer>定义 section 或 page 的页脚。

<h1> to <h6>定义 HTML 标题。

<i>定义斜体字。

<li>定义列表的项目。
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值