HTML语义化的理解

1、什么是HTML语义化?

“语义化”指的是在需要更少的人类干预的情况下,能够研究和手机信息,让网页能够被机器理解,最终让人类受益。

语义化的目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用。很明显Hx系列看起来很像标题,因为拥有粗体和较大的字号。<strong>,<em>用来区别于其他文字,起到了强调的作用。至于列表和表格很明显的告诉你他们是做什么的。

2、HTML语义化有什么好处?

语义化的网页的好处,最主要的就是对搜索引擎友好,有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取,你网站的推广便可以省下不少的功夫。
语义 Web 技术有助于利用基于开放标准的技术,从数据、文档内容或应用代码中分离出意义。
3、为什么要HTML语义化?
  • 在没有css的情况下,页面也能呈现出比较好的内容结构、代码结构。
  • 用户体验较好:例如:label标签的活用、title、alt用于解释名词或解释图片。
  • 方便其他设备解析(阅读器、移动设备)以意义的方式来渲染网页。
  • 便于团队维护:语义化的HTML更具可读性,团队遵循W3C标准。
  • 有利于SEO:和搜索引擎建立友好的交流,有利于爬虫抓取更多的有效信息。
4、HTML语义化标签
  • header元素

 该元素是网页或者section的页眉部分,通常包含h标签,包括网站标志、全局导航、全站链接、搜索框等。

也可以包含一节的目录或者nav或者相关的logo。

一个页面可以有多个header标签。

eg、

<header><hgroup><h1>网站标题</h1><h1>网站副标题</h1></hgroup>
</header>
  • title元素

该元素用来简短的描述网页内容,在页面中唯一存在。

搜索引擎会将title作为判断页面主要内容的指标,有效的title应该包含几个与页面内容密切相关的关键字,建议将title核心内容放在前60个字符中。

  • foot元素

该元素代表网页或section的页脚,通常包含该节内容的基本信息,或者代表附录、索引、许可协议、标签类别等信息。

一个页面中可以有多个footer,可以是任何网页或section的底部。

eg、

eg、
<footer>COPYRIGHT@浮川之畔
</footer>
  • hgroup元素

该元素代表网页或section的标题。可以将h1到h6的标签放在里面。

注:如果只有一个h标签,就不用hgroup。

如果有多个连续的h标签就用hgroup。

eg、

eg、
<hgroup><h1>这是一篇介绍HTML 5语义化标签和更简洁的结构</h1><h2>HTML 5</h2>
</hgroup>
  • nav标签

该元素是页面的导航链接区域,仅对页面中重要的链接群使用。

用来定义页面的主要导航部分。

eg、

<nav><ul><li>HTML 5</li><li>CSS3</li><li>JavaScript</li></ul>
</nav>
  • aside元素

该元素用来指定附注栏,通常被包含在article元素中作为主要内容的附属部分,其中的内容可以是与当前文章有关的相关资料、标签、名词解释等,是特殊的section。

 eg、

<article><p>内容</p><aside><h1>作者简介</h1><p>浮川之畔,新入门码农</p></aside>
</article>
  • main元素

该元素是页面的主体内容,一个页面只能使用一次。

  •  article元素

该元素包含一个报纸一样的东西,代表一个在文档、页面或网站中自成一体的内容。

如果在article中再嵌套article就代表内嵌的article中的内容和外部的是有关系的。

eg、

<article><header><h1>一篇文章</h1><p><time pubdate datetime="2012-10-03">2012/10/03</time></p></header><p>文章内容..</p><article><h2>评论</h2><article><header><h3>评论者: XXX</h3><p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p></header><p>哈哈哈</p></article><article><header><h3>评论者: XXX</h3><p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p></header><p>哈?哈?哈?</p></article></article></article>

article内部还可以嵌套section 

eg、

<article><h1>前端技术</h1><p>前端技术有那些</p><section><h2>CSS</h2><p>样式..</p></section><section><h2>JS</h2><p>脚本</p></section></article>

section 内部嵌套article。article是大主体,section是构成这个大主体的一部分。

eg、

<section><h1>介绍: 网站制作成员配备</h1><article><h2>设计师</h2><p>设计网页的...</p></article><article><h2>程序员</h2><p>后台写程序的..</p></article><article><h2>前端工程师</h2><p>给楼上两位打杂的..</p></article></section>

使用注意:

自身独立使用:article

相关内容使用:section

无语义使用:div

  • section元素

该元素代表网页中的‘节或段。“段”可以是指一篇文章里按照主题的分段;“节”可以是指一个页面里的分组。

section标签内通常带有标题。

一张页面可以用section划分为简介、文章条目和联系信息。不过在文章内页,最好用article。section不是一般意义上的容器元素,如果想作为样式展示和脚本的便利,可以用div。

article、nav、aside可以理解为特殊的section,所以如果可以用article、nav、aside就不要用section,没实际意义的就用div

eg、

<section><h1>section是啥?</h1><article><h2>关于section</h1><p>section的介绍</p><section><h3>关于其他</h3><p>关于其他section的介绍</p></section></article>
</section>
  • small元素

该元素指定细则,输入免责声明、注解、署名、版权等。只能用于短语,不能用在长的法律声明。

  • address元素

该元素用来表示作者、相关人士或组织的联系信息。

  • del元素

该元素表示被移除的内容。

  • ins元素

该元素表示被添加的内容。

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368597.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

乒乓球比赛赛程_10月5日至10月11日中央电视台直播录播乒乓球比赛安排

10月5日至10月11日这一周中央电视台居然没有播乒乓球比赛?全国乒乓球锦标赛从5日开始进行各单项比赛&#xff0c;7日进行混双决赛&#xff0c;9日进行男双决赛和女单决赛&#xff0c;10日进行女双决赛和男单决赛。场场都是精彩好看的比赛&#xff0c;中央电视台体育频道一场都…

集合实例(集合覆盖)

集合覆盖是一种优化求解问题&#xff0c;对很多组合数学和资源选择问题给出了很好的抽象模型。 问题如下&#xff1a;给定一个集合S&#xff0c;集合P由集合S的子集A1到An组成&#xff0c;集合C由集合P中的一个或多个子集组成。如果S中的每个成员都包含在C的至少一个子集中则称…

Drawwhile计算机软件,计算机程序设计、小女纸又怒编一程序、求鉴定、

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼srand(time(NULL));while (1){while (!kbhit()) //在没有按键的情况下,蛇自己移动身体{if (food.addFood 1) //需要出现新食物{food.x rand() % 400 60;food.y rand() % 350 60;//食物出现后必须在整格内才能让蛇吃到while (f…

python eval 用法

eval 功能&#xff1a;将字符串str当成有效的表达式来求值并返回计算结果。 语法&#xff1a; eval(source[, globals[, locals]]) -> value 参数&#xff1a; source&#xff1a;一个Python表达式或函数compile()返回的代码对象 globals&#xff1a;可选。 变量作用域&…

带有正则表达式模式的Google Guava Cache

最近我看到了一个关于Google Guava的精彩演讲 &#xff0c;我们在我们的项目中得出结论&#xff0c;使用它的缓存功能真的很有趣。 让我们看一下regexp Pattern类及其编译功能 。 在代码中经常可以看到&#xff0c;每次使用正则表达式时&#xff0c;程序员都会使用相同的参数重…

关闭运动轨迹_网球初学者如何正确入门网球运动,有哪些学习细节

网球是一个非常有趣的球类运动。 当您开始入门时&#xff0c;您会越来越喜欢它。 那么网球初学者应该如何正确入门呢&#xff1f; 有什么独特的入门经验&#xff1f;即使没有网球经验&#xff0c;只要您能正确正确地进行定期训练&#xff0c;仍然可以取得很大的进步。首先&…

input长度随输入内容动态变化 input光标定位在最右侧

<input type"text" οnkeydοwn"this.onkeyup();" οnkeyup"this.size(this.value.length>4?this.value.length:4);" size"4"> <input type"text">的默认size就是20 如果你在style里定义了width属性,又…

phpstorm+wamp+xdebug配置php调试环境

本篇文章主要是&#xff1a;教大家如果搭建一套phpstormwampxdebug调试php的环境现在大多数的程序员使用的调试方式一般都是echo, var_dump, file_put_contents等其他方式&#xff0c;效率比较低下&#xff0c;因此我们有必要学习用工具调试&#xff0c;工具调试主要可以用来解…

计算机专用英语1500词带音标,带音标的计算机英语1500词

带音标的计算机英语1500词 (46页)本资源提供全文预览&#xff0c;点击全文预览即可全文预览,如果喜欢文档就下载吧&#xff0c;查找使用更方便哦&#xff01;29.9 积分&#xfeff;计算机专用英语词汇1500词《电脑专业英语》1. file [fail] n. 文件&#xff1b;v. 保存文件 2. …

需求改进与系统设计

第一部分 需求与原型改进 1.1改进的原型 1.1.1 改进说明 相较上一次的原型&#xff0c;这一次我们确定了主题颜色&#xff0c;并且使功能一眼就能看懂&#xff0c;让新用户能很快上手。 并且进一步完善了前期的调查问卷分析。得出结论同学们不去食堂吃饭的大部分原因是排队…

了解ADF Faces clientComponent属性

我相信大多数ADF开发人员都知道ADF Faces属性clientComponent 。 在这篇文章中&#xff0c;我将展示此属性实际上如何影响组件渲染以及它如何改变其行为。 让我们开始考虑一个非常简单的示例&#xff1a; <af:inputText label"Label 1" id"it1" /> …

谈谈一些有趣的CSS题目(十五)-- 谈谈 CSS 关键字 initial、inherit 和 unset

开本系列&#xff0c;谈谈一些有趣的 CSS 题目&#xff0c;题目类型天马行空&#xff0c;想到什么说什么&#xff0c;不仅为了拓宽一下解决问题的思路&#xff0c;更涉及一些容易忽视的 CSS 细节。解题不考虑兼容性&#xff0c;题目天马行空&#xff0c;想到什么说什么&#x…

小程序沉浸式_企业开发小程序:客户裂变式增长

最近几年&#xff0c;各行各业中都有不少企业、商家获客难窘境。因此&#xff0c;很多企业、商家想知道&#xff1a;"怎么做&#xff0c;才能获取到大量流量&#xff1f;"小编给大家推荐一种方式&#xff1a;开发一个微信小程序&#xff0c;然后利用小程序来获取大量…

单点拖拽和多点多拽

demo见github:https://github.com/fei1314/drag/tree/master 一、拖拽原理手指所处的位置到一个div顶部的距离L一直不变。 二、单点拖拽1.touchstart:单指按下2.touchmove&#xff1a;单指移动3.touchend&#xff1a;单指抬起a.在touchstart事件中&#xff0c;利用拖拽原理&…

伪代码是计算机语言,伪代码书写格式

《伪代码书写格式》由会员分享&#xff0c;可在线阅读&#xff0c;更多相关《伪代码书写格式(3页珍藏版)》请在人人文库网上搜索。1、精品文档伪代码伪代码是用介于自然语言和计算机语言之间的文字和符号来描述算法。每一行(或几行)表示一个基本操作。它不用图形符号&#xff0…

JDBC连接Mysql数据库

注释&#xff1a;&#xff08;以下代码会抛出多个异常&#xff0c;仅表达出JDBC连接Mysql数据库的过程步骤&#xff09;加载数据库驱动(即 实例化驱动类对象)Class.forName("com.mysql.cj.jdbc.Driver"); 获取数据库的连接Connection conn null; conn DriverManage…

Elasticsearch:用于内容丰富的文本分析

每个文本搜索解决方案都与其提供的文本分析功能一样强大。 Lucene是这样的开源信息检索库&#xff0c;提供了许多文本分析的可能性。 在本文中&#xff0c;我们将介绍ElasticSearch提供的一些主要文本分析功能&#xff0c;这些功能可用来丰富您的搜索内容。 内容丰富 以一个典…

[CSS] Scale on Hover with Transition

效果 源码 <!doctype html><html class"outline color"><head><meta charset"utf-8"><title>图片scale动画</title><style>.img-box {position: relative;width: 740px;height: 420px;overflow: hidden;}/* 彩色…

热敏电阻温度特性曲线_热敏电阻与体温计的应用关系

相信体温计大家都熟悉&#xff0c;热敏电阻与体温计的应用关系大家都知道吗&#xff1f;热敏电阻热敏电阻探头测量体温的原理又是什么呢&#xff0c;小编跟大家分析一下&#xff0c;希望以下详细的介绍能帮助到大家&#xff01;热敏电阻探头测量体温的原理分析如下&#xff1a;…

js总结

var a {"name": "Alex", "age": 18}; console.log(a.name); console.log(a["age"]);就是字典&#xff0c;for (var i in a ){     console.log(a[i])}var anew Object()a.name"egon";a.age18;ES6中新增了map数据结构&…