常用语义化HTML标签

最新推荐文章于 2023-06-14 13:31:40 发布
最新推荐文章于 2023-06-14 13:31:40 发布
阅读量329 收藏
点赞数 1
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/djcbpl/article/details/90764659
版权

常用语义化HTML标签

一、标签使用的误区
很多开发人员在项目开发中，经常标签乱用；本来是写个标题用“<h3>文本标题</h3>”就好的，经常会写成<span>文本标题</span>,其实，其实第一种写法才是WC3推荐的写法，因为标题就是标题，使用H1 至 H6标签才是正确选择。现在的网页布局方式都叫“DIV+CSS”，满屏代码都是“DIV”其实是一个错误的理解，导致了很多人过度依赖与滥用DIV标签， HTML提供了我们一共七八十个标签，其中常用的有三十个左右，DIV不过是一个相对的空标签而已，在很多情况下，我们可以使用其他更合适且更符合场景的标签可以替代它。

二、标签的差异

共性：都是一个容器，可以在其中放置内容

差异：分为行内和块级两个大类，且不同便签有相应含义上的预设语义，如：h-标题，p-段落，i-斜体，a-链接，b-加粗，等等

三、标签语义化的好处

a、让结构更简洁清晰，让搜索引擎更友好

b、通过多重组合，减少不必要的CSS依赖

四、语义化标签的使用

a、列表：ul、ol、li、dl、dt、dd

b、标题：h1~h6

c、段落：p

d、强调：strong，B

e、表格：table、tr、td，以及表格的其他成员th、thead、tbody、tfood

五、常用HTML标签表

<!--标签-->定义注释。
<body>定义文档的主体，默认有外边距，注意清除。
<head>定义页面的信息。
<html>定义 HTML 文档。
<meta>定义页面的描述信息，便于搜索优化。
<title>定义文档的标题。
<link />定义引用外部文件，如联入CSS样式表。
<style>定义内联的CSS样式信息。
<script>定义内联或外联的客户端脚本，如JS。
<a>定义锚链接或其他链接，行内元素。
<img />定义引入一张图片，行内元素。
<strong>定义强调文本，样式为加粗，行内元素。
<span>定义一个行内元素的空盒子。
<div>定义一个块级元素的空盒子。
<h1> to <h6>定义标题部分，默认有外边距，块级元素。
<ul>定义无序列表，默认有外边距和内边距，块级元素。
<ol>定义有序列表，即数字列表，默认有内外边距，块级元素。
<li>定义列表的项目，一般被嵌套在<ul>和<ol>内，块级元素。
<dl>自定义列表的项目，默认有外边距和内边距，块级元素。
<dt>自定义列表的标题，嵌套在<dl>内，与<dd>区别，块级元素。
<dd>自定义列表的内容，嵌套在<dl>内，与<dt>区别，块级元素。
<p>定义段落，默认有一个行高的外边距。
<table>定义表格。
<tr>定义表格中的行。
<td>定义表格中的单元。
<th>定义表格中的表头单元格。
<thead>定义表格中的表头内容。
<tbody>定义表格中的主体内容。
<tfoot>定义表格中的表注内容（脚注）。
<br />定义一个回车换行。
<map>定义图像映射，即鼠标热区。
<area>定义图像映射内部的区域。
<form>定义输入提交的表单。
<button>定义表单中的按钮 (push button)。
<input>定义表单中的输入控件。
<select>定义表单中的选择列表（下拉列表）。
<textarea>定义多行的文本输入控件标签
mark标记定义有标记的文本（黄色选中状态）
<frame>定义框架集的窗口或框架。
**六、H5新增标签** >
标签说明
<article>标记定义一篇文章
<header>标记一个区域的头部
<nav>标记定义导航链接
<saction>标记定义一个区域
<aside>标记定义页面的内容部分的侧边栏（像淘宝，京东左侧菜单）
<hgroup>标记定义文件中一个区块的相关信息
<figure>标记定义一组包裹多媒体内容以及它们的标题
<figcaption>标记定义figure元素的标题
<footer>标记一个区域的底部
<dialog>标记定义一个对话框（会话框）类似微信
<video>标记定义一个视频
<audio>标记定义音频内容
<source>标记定义媒体资源
<canvas>一个画布，使用API，可画出酷炫的效果
<embed>标记定义外部的可交互的内容或插件，比如flash
<datalist>为input标记定义一个下拉列表，配合option使用
<details>标记定义一个元素的详细信息，配合summary使用
心灵的制造商
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解HTML5常用的语义化标签
01-21
快速查询 article | aside | nav | section | header | footer 架构预览 nav 定义导航链接的... <li><a>Html5</a></li> article 定义文章 装载显示一个独立的文章内容，论坛帖子、新闻、博客文章、用户评论等，
HTML语义化标签：
weixin_70443954的博客
11-25 2835
HTML语义化标签
语义化标签大全
qq_42241357的博客
09-19 832
语义化标签 什么是HTML语义化标签？常见HTML语义化标签大全 语义化的标签，旨在让标签有自己的含义。 一、什么是HTML语义化标签 语义化的标签，旨在让标签有自己的含义。 1 <p>一行文字</p> 2 <span>一行文字</span> 如上代码，p 标签与 span 标签都区别之一就是，p 标签的含义是：段落。而 span 标签责没有独特的含义。 二、语义化标签的优势 代码结构清晰，方便阅读，有利于团队合作开发。 方便其他设备解析（如屏幕阅读器、盲
html-语义化标签
chan1996的博客
09-21 285
【面试整理】语义化标签
HTML中的语义化标签
ct5211314的博客
09-05 6248
语义化标签可以理解为用于进行网页页面构建的标签，他们不会影响页面内容，只是对页面结构的规范话。
HTML系列之语义化标签（H5)
老__L的博客
02-12 2482
本文主要介绍address、article、aside、footer、header、nav、section标签。 以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的。
HTML标签语义化的介绍
12-11
下面摘自百度百科： html标签语义：即html标签的含义。 首先是关于语义（Semantics）和默认样式的区别，默认样式是浏览器设定的一些常用tag的表现形式，个人认为他的主要目的就是让大家直观的认识标签(markup)和属性...
语义化你的HTML标签和属性
01-08
语义化你的HTML标签和属性 分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。一个 XHTML 元素的存在就意味被标记内容的那部分有相应的结构化的意义，没有理由使用其他的标记。换句话说，不要让 CSS...
HTML5中新标签和常用标签详解
01-19
今天先介绍下 html5 新增的结构元素，有的经常使用到，有的用不上，虽然说它们的出现是更促进页面更有语义，更好的 seo，但其实当页面禁用样式后，它们的展现跟 div 是没撒差别，有同学可能会说，既然一样，又不影响...
常用的HTML5列表标签
12-14
注意：ul标签是给列表内容添加语义的不是添加小圆点的；ul标签和li标签是一个整体，一起出现；ul标签中不推荐包含其它标签,可以在li标签中添加其它标签 如何快速编写ul格式：ul>li*3 按tab键 生成一对ul标签，3对li...
常见的HTML​​​​​​​5语义化标签
xiaogangblog的博客
07-16 354
<title>：页面主体内容。 <hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。 <ul>：无序列表。 <li>：有序列表。 <header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。 <nav>：标记导航，仅对文档中重要的链接群使用。（因为搜索...
HTML常见的语义化标签
机会平等
10-12 1444
HTML常见的语义化标签 <title>：页面主体内容。 <hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。 <ul>：无序列表。 <li>：有序列表。 <header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。 <nav>：标记导航，仅对文档中重要的链接群使用。 <main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。 &l
HTML语义化的理解
番茄脸红了~
06-14 699
html语义化及其基础内容理解
HTML基础标签及其语义
gswsssw的博客
05-10 1539
一、HTML语法规范 1.1、基本语法表述 <html></html>#标签通常都是成对出现（双标签），开始结束标签 <br />#单标签 1.2、标签关系 包含关系与并列关系 包含关系 <head>#父标签 <title> </title>#子标签 <head> 并列关系 <head> </head> <body> </body&...
前端实训课程 HTML5 课堂笔记
vsoperator的博客
06-15 151
首先，对于前端学习有几点自己的原则：WHATWG文档MDN文档下列属性是通用的，所有 HTML 元素 都可以指定。 （即使是本规范中没有定义的那些元素）：本规范定义的这些属性只用于 HTML 元素 的属性。 当本规范引用具有这些属性的元素时， 没有定义这些属性的命名空间下的元素不得当作具有这些属性的元素处理。HTML 元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。​​
HTML语义化
jewfer的博客
01-15 3300
什么是HTML语义化 根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好的解析。 为什么要语义化 为了在没有CSS的情况下，页面也能呈现出很好的内容结构和代码结构。 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息（爬虫依赖于标签来确定上下文和各个关键字饿权重） 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义.
语义化标签
qq_43944285的博客
03-02 1170
语义化
HTML语义化标签的理解
weixin_47227886的博客
04-10 5070
1. 语义化的背景： 以前的HTML的结构，基本上就是DIV+CSS。然而，DIV它并没有什么任何的意义，全靠CSS显示页面的样式。 那么近几年呢，开发者提出了HTML结构的语义化，所以W3C就制定出了语义化标签。 2. 什么是语义化 语义化就是构成HTML结构的标签要有意义。 比如有这样的标签： header表示页面头部 main表示页面主题 footer表示页面底部 那么这些标签构成的HTML结构就是有意义的，也是语义化的。 ​ 如果说页面的头部、主体以及底部都用div来表示，那.
《HTML标准》解读：详解语义类标签
weixin_44384265的博客
11-21 447
本文主要基于《HTML标准》4.3-4.5节讲解HTML的语义类标签，主要包括区域类标签、组合内容类标签、文本级标签。
HTML5语义化标签
最新发布
11-14
以下是HTML5中常用的一些语义化标签及其作用： 1. header：定义文档的头部区域，通常包含网站的标题、logo、导航等信息。 2. nav：定义导航链接的容器，通常包含一组链接，用于导航到网站的不同部分。 3. section：...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值