html的语义化面试题,前端面试题-HTML结构语义化

一、HTML语义化的背景

HTML结构语义化,是近几年才提出来的,对比之前的 HTML 结构,大多是一堆没有语义的标签。用的最多的就是 DIV+CSS,为了改变这种现状,开发者们和官方提出了 HTML结构语义化的概念,并且在 HTML5 添加了很多语义化标签。

二、HTML语义化的概念

语义化是指根据内容的结构,选择合适的标签,便于开发者阅读和写出更优雅的代码的同时,让浏览器的爬虫和机器很好的解析。

三、HTML语义化的必要

随着互联网的发展,WEB承载越来越多的信息(图片,音频,视频等),人们开始用机器来处理网络信息,就此诞生了搜索引擎。如次庞大及复杂的信息如何让搜索引擎处理和挖掘,所以让机器能够更好地读懂WEB上内容就变得越来越重要。

传统的Web由文档组成,W3C希望通过一组技术支撑 “数据的Web”,即 Web of Data,将Web看作一个存储和管理数据的大型分布式数据库。语义Web是构造这样的数据Web的重要一环,帮助人们创建数据并存储在Web上,创建相关的词汇表及数据的处理规则。

四、HTML语义化的作用

4.1 页面结构清晰

去掉或 CSS 样式丢失的时候,也能让页面呈现清晰的结构,增强页面的可读性。

4.2 支持更多设备

方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以有意义的方式来渲染网页。

4.3 利于SEO优化

和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息,搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。

4.4 便于团队开发和维护

在团队中大家都遵循W3C标准,可以减少很多差异化的东西,方便开发和维护,提高开发效率,甚至实现模块化开发。

五、HTML语义化的方法

(1)根据文档上下文结构合理的选用最适合表达当前语义的标签;

(2)尽可少使用无语义的标签

和 ;

(3)不要使用带有样式的标签,比如: 、 等,使用 CSS 设置;

(4)标题标签的使用应该根据重要性逐级递减,没有断层,并且一个页面只能有一个

(5)提高关键词密度,如图像的替代文本 alt,提示文本 title;

(6)正确使用内容容器,比如段落

,列表

  • ,
  1. ,
  2. ,
    ,
    ;

    (7)需要强调的文本,可以使用 标签(浏览器默认样式,能用 CSS 设置就不用), 默认样式是加粗(不用 ), 是斜体(不用 );

    (8)表格注意使用,标题

    ,表头 ,表格主体(正文),表注(页脚)。 定义表格行, 定义表头, 定义表格单元。

    (9)表单域使用

    标签,并且 标签为 定义标题;

    (10)每个 标签对应的说明文本都需要使用 标签,通过为 设置 id 属性,并且在 标签中设置 for=id 使说明文本和对应的 关联。

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

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

相关文章

从云网络时延看应用部署架构

简介: 介绍云网络时延的构成,并对其进行量化的分析,以及从云网络时延看不同应用对应的部署架构。 也简单的分析了5G时代对应用部署架构的影响和度量云网络时延的产品和工具。 在引出云网络时延这看起来比较专业的话题前,先看几个比…

mPaas 研发流程和线上运维介绍

简介: mPaas 研发流程和线上运维介绍 1. 背景 金融级移动开发平台 mPaaS[1](Mobile PaaS)为 App 开发、测试、运营及运维提供云到端的一站式解决方案,能有效降低技术门槛、减少研发成本、提升开发效率,协助企业快速搭…

html翻转切换div效果,图片翻转效果

图片翻转效果* { margin: 0; padding: 0;}ul { list-style-type: none;}body { font: 14px "Microsoft Yahei"; overflow-x: hidden; background-color: #2B2B2B; }h1 { width: 900px; margin: 40px auto 100px; font: 32px "Microsoft Yahei"; text-align…

市值突破3000亿,Fortinet发布2021Q2财报

Fortinet 近日发布了截至6月30日的2021财年第二季度财报。Fortinet 第二季度营收增长强劲,高达 8.01 亿美元,同比增长 30%。 截至美国时间2021年8月12日纳斯达克证券交易市场收盘,Fortinet公司股价达到309.33美元,市值达到505.2亿…

Apache Flink 在实时金融数据湖的应用

简介: 本文由京东搜索算法架构团队分享,主要介绍 Apache Flink 在京东商品搜索排序在线学习中的应用实践 一、背景 在京东的商品搜索排序中,经常会遇到搜索结果多样性不足导致系统非最优解的问题。为了解决数据马太效应带来的模型商品排序多…

写给小白的云计算入门科普

作者:小枣君来源:鲜枣课堂云计算介绍2006年8月9日,当时的谷歌首席执行官埃里克施密特(Eric Schmidt)在搜索引擎大会(SES San Jose 2006)上,首次提出了“云计算”(Cloud C…

input 没显示 html,html - 为什么我的input type =“submit”没有显示?

Closed. This question is off-topic. It is not currently accepting answers. Learn more。想改进这个问题吗?Update the question所以堆栈溢出的值小于aa>。两年前关闭。我想在标题上加一个按钮,但它没有显示出来,我想它在div下面。为什…

阿里云拨测:主动探测Web应用质量,助力提升用户体验

简介: 阿里云拨测是一种针对互联网应用(Web页面、网络链路等)进行应用性能和用户体验监测的服务,无需嵌码即可为云上用户提供开箱即用的企业级主动拨测式应用监测解决方案。 随着中国数字化经济的蓬勃发展,越来越多的企…

大数据,从青铜到王者

一.大数据方向工作介绍大数据方向的工作目前分为三个主要方向:01.大数据工程师02.数据分析师03.大数据科学家04.其他(数据挖掘本质算是机器学习,不过和数据相关,也可以理解为大数据的一个方向吧)二.大数据工程师的技能要求总结如下…

如何编写有效的接口测试?

简介: 在所有的开发测试中,接口测试是必不可少的一项。有效且覆盖完整的接口测试,不仅能保障新功能的开发质量,还能让开发在修改功能逻辑的时候有回归的能力,同时也是能优雅地进行重构的前提。编写接口测试要遵守哪些原…

商业方向的大数据专业_结合当前的人才需求趋势,大数据专业考研时可以选择哪些主攻方向...

首先,对于大数据专业的本科生来说,当前读研是不错的选择,随着大数据技术开始逐渐落地应用,产业领域需要大量高端应用型人才,所以如果没有继续读博的计划,可以重点关注一下专硕。在读研方向的选择上&#xf…

Seata RPC 模块的重构之路

简介: RPC 模块是我最初研究 Seata 源码开始的地方,因此我对 Seata 的 RPC 模块有过一些深刻研究,在我研究了一番后,发现 RPC 模块中的代码需要进行优化,使得代码更加优雅,交互逻辑更加清晰易懂&#xff0c…

被算法“监控”的打工人,这家公司 150 人被算法裁定为“不敬业”

整理 | 禾木木出品 | AI科技大本营(ID:rgznai100)导读近日,一家公司通过 AI 算法裁掉三成员工的消息在网上引起热议。当你上班时突然收到一封邮件显示“效率低下”而要求马上离开公司,你会怎么想呢?据 Game World Obse…

10倍性能提升!DLA SQL推出基于Alluxio的数据湖分析加速功能

简介: 在存储计算分离的场景下,通过网络从远端存储读取数据是一个代价较大的操作,往往会带来性能的损耗。以OSS为例,OSS数据读取延时通常较本地磁盘大很多,同时OSS对单个用户使用的带宽上限做了限制,这都会…

80×60长40米的地笼_石家庄Q345矩形方管 220*80*8方管 华东地区

摘要: 石家庄Q345矩形方管 220*80*8方管 华东地区 无锡征图钢业有限公司是一家以生产矩形钢管为主的方管厂作为专业矩管生产,无缝方管生产企业,矩形钢管生产工艺采用先进的热轧钢管生产线生产,产品销往 ,并部分出口&am…

惠普台式计算机型号怎么看,惠普电脑怎么看型号

惠普电脑怎么看型号如今很多人都已经习惯了使用笔记本电脑,然而又有很多人在用了很长时间后很难第一时间说出所使用笔记本电脑的型号,或者是不知道从哪里查看。下面是jy135小编收集整理的win7电脑配置怎么看,欢迎阅读。如今很多人都已经习惯了…

大促密集,CDN如何保障电商体验如丝般顺滑?

简介: 前不久,阿里云技术天团空降CSDN在线峰会,对核心技术竞争力进行解读。其中,阿里云高级技术专家曾福华分享了《双11: CDN如何保障电商大促如丝般顺滑》的议题。俗话说:养兵千日,用兵一时。每一次的战役…

fullcalendar 显示的时间间隔只有四十五分钟_NHR系列智能显示控制仪表RS485通信中应用...

请点击上方蓝字关注我们!01摘要NHR系列智能显示控制仪表是经过多年开发制造经验而设计生产,集诸多全新功能于一身的新一代智能显示控制仪表。针对现场温度、压力、液位、速度、流量等各种信号进行采集、显示、控制、远传、通讯、打印等处理,构…

高德地图驾车导航内存优化原理与实战

简介: 一般APP只需要关注前台内存过高的系统强杀FOOM,高德地图有不少用户使用后台导航,所以也需要关注后台的内存过高导致的系统强杀BOOM,且后台强杀较前台强杀更为严重。为了提升用户体验,内存治理迫在眉睫。 ​​背景…

向下一代互联网迈进 声网发布全链路加速FPA为互联网增加QoS保障

8月19日,声网Agora举办线上产品发布会,正式发布了“全链路加速FPA(Full-Path Accelerator)”。全链路加速FPA基于声网的软件定义实时网络 SD-RTN™,通过覆盖全球的多点端到端传输优化,全面提升了包含最后一…