Html语义化理解

news/2024/7/19 11:55:16 标签: 爬虫, 前端

1、什么是HTML语义化?

<基本上都是围绕着几个主要的标签,像标题(H1~H6)、列表(li)、强调(strong em)等等>

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

2、为什么要语义化?

  • 为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;
  • 用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;
  • 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
  • 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
  • 便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

3、写HTML代码时应注意什么?

  • 尽可能少的使用无语义的标签div和span;
  • 在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;
  • 不要使用纯样式标签,如:b、font、u等,改用css设置。
  • 需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i);
  • 使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;
  • 表单域要用fieldset标签包起来,并用legend标签说明表单的用途;
  • 每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

 4、HTML5新增了哪些语义标签,详述之。

  见这位前端大拿的blog。

转载于:https://www.cnblogs.com/xiaohangzi/p/5877413.html


http://www.niftyadmin.cn/n/908716.html

相关文章

EXCEL快学一(基础知识)单元格操作、行(列)操作 、行列操作

实际应用项目&#xff1a;http://github.crmeb.net/u/long EXCEL快学一&#xff1a;EXCEL基础知识 Excel是一种电子表格理软件&#xff0c;主要用于对资料的数据处理、统计、分析与计算&#xff0c;功能十分强大。 国内目前常用的有WPS EXCEL和微软OFFICE EXCEL&#xff0c;两…

STK卫星工具箱下载

简介 STK的全称是Satellite Tool Kit&#xff08;卫星工具箱&#xff09;&#xff0c;STK/Pro 9.0最新出品,完整版,是由Analytical Graphics公司开发的一款在航天工业领域中处于绝对领先地位的商品化分析软件。它支持航天任务周期的全过程&#xff0c;包括概念、需求、设计、制…

解析thinkPHP基于反射实现钩子的方法

这里给大家推荐一款免费迭代 二开便捷的商城项目&#xff1a;源码直通车>>> 下面由thinkphp框架教程栏目给大家解析thinkPHP基于反射实现钩子的方法&#xff0c;希望对需要的朋友有所帮助&#xff01; ThinkPHP框架的控制器模块是如何实现 前控制器、后控制器&#xf…

函数式编程 : 一个程序猿进化的故事

阿袁工作的第1天: 函数式编程的历史 阿袁中午和阿静一起吃午餐。阿袁说起他最近看的《艾伦图灵传 如谜的解谜者》。 由于阿袁最近在学习Scala&#xff0c;所以关注了一下图灵传中关于函数式编程的一些历史。 关于函数式编程的故事&#xff0c;可以从1928年开始讲起&#xff1a;…

【神经网络与深度学习】公开的海量数据集

海量数据&#xff08;又称大数据&#xff09;已经成为各大互联网企业面临的最大问题&#xff0c;如何处理海量数据&#xff0c;提供更好的解决方案&#xff0c;是目前相当热门的一个话题。类似MapReduce、 Hadoop等架构的普遍推广&#xff0c;大家都在构建自己的大数据处理&…

session的工作原理session缓存浏览器缓存

实际应用项目&#xff1a;http://github.crmeb.net/u/long Session 工作原理   1、创建Session   当用户访问到一个服务器&#xff0c;如果服务器启用Session&#xff0c;服务器就要为该用户创建一个SESSION&#xff0c;在创建这个SESSION的时候&#xff0c;服务器首先检查…

解析wamp的php.ini设置不生效的原因

你是否有过这样的经历&#xff0c;当你打开wamp的php.ini&#xff0c;并进行参数修改之后。再回到命令去运行你的php脚本&#xff0c;却发现你的设置居然不生效&#xff1f; 如果有这样的情况&#xff0c;那你得先了解php的两种运行运行环境&#xff0c;一个在命令终端上&#…

宝塔切换命令行PHP版本切换网站PHP版本

实际应用项目&#xff1a;CRMEB打通版: &#x1f525;&#x1f525;&#x1f525; CRMEB打通版v4免费开源商城系统&#xff0c;UINAPPthinkphp6框架商城&#xff0c;系统可商用&#xff1b;包含小程序商城、H5商城、公众号商城、PC商城&#xff0c;支持分销、拼团、砍价、秒杀、…