记得在读大学期间,去找实习,面试时被问到“什么是标签的语义化”,一头汗水,也忘记那时是怎么瞎扯了,后来回宿舍,上网查“标签语义化”,当时的网络对标签语义化的解释并不多,在找了很多网络资料和书籍后才对语义化有一定的了解。现在标签语义化这个专业名字,在前端开发的领域中已经不陌生了。

  什么是标签语义化?为什么要标签语义化?如何语义化标签?这是一名合格的前端开发工程师需要思考的。《HTML标签语义化对照表》解释了HTML标签的语义,有助于大家理解语义化,《(X)HTML嵌套规则》说明了标签的嵌套规则,也是语义化标签需要认识的。关于语义化的好处,就笔者的理解有两点:一是对搜索引擎友好,良好的结构和语义让你的网页内容自然容易被搜索引擎抓取;二是当用户禁用CSS样式,裸奔的页面具有优秀的可读性。

  了解语义化的好处,也要了比较常见的语义化模块,这里介绍项目中常见的模块以及如何语义标签的一点看法,希望可以给大家带来帮助。

常见的模块,你语义化没

附件为测试实例,下载

  对模块语义标签的思考,总结如下:

  • 语义化标签,保证页面去掉样式具有良好的结构和可读性,又符合web标准
  • 尽可能使用有语义的标签在合适的地方来替代无语义标签div、span
  • 考虑使用p代替div在内容有语义的地方,因为p默认样式具有上下边距
  • 考虑strong、em代替span在有语义的地方, strong默认样式是加粗,em默认样式是斜体

转载于:https://www.cnblogs.com/PeunZhang/archive/2012/03/15/2377230.html

【原】常见的模块,你语义化了没相关推荐

  1. npm包 semver模块【语义化版本号】

    npm包 semver模块 Semver 简介 (Semantic Versioning) Semver 实际案例 ---------------------------------------- 一 ...

  2. 前端面试—html语义化

    html最常见的问题:语义化的HTML结构怎么理解? 前天面试对于这个问题我是这么答的: html语义化就是让页面的内容结构化. 1.在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的. 2 ...

  3. 好程序员web前端分享常见html5语义化标签

    为什么80%的码农都做不了架构师?>>>    好程序员web前端分享常见html5语义化标签,我们知道,创建结构清晰的页面可以建立良好的语义化基础,也降低了使用css的难度,下面总 ...

  4. 第二天学习笔记:(MDN HTML学习、web安全策略与常见攻击、语义化)

    一:Web入门 1:web文件命名 在文件名中应使用连字符(-).搜索引擎把连字符当作一个词的分隔符, 但不会以这种方式处理下划线. 养成在文件夹和文件名中使用小写,并且使用短横线而不是空格来分隔的习 ...

  5. 对HTML 标签语义化的理解,常见的语义化标签有哪些?

    语义化就是我们通过标签本身就知道标签所在代码的内容具有什么意义,即用使用特定的功能属性的标签做特定的事.比如使用 h1 标签我们就知道这是一个标题,使用 header 就知道这是页眉,使用 foote ...

  6. 什么是语义化标签,常见的语义化标签介绍

    1.什么是语义化标签 语义化是指对某件事或某个东西的含义有正确直观的解释,那么在HTML中,语义化标签就是指这个标签本身直观表达出了它所包含的内容是什么. 2.语义化标签的好处 代码结构得到了优化,即 ...

  7. 什么是HTML语义化标签?常见HTML语义化标签大全,以及不同标签比较

    一.什么是HTML语义化标签 语义化的标签,旨在让标签有自己的含义. <p>一行文字</p> <span>一行文字</span> 如上代码,p 标签与 ...

  8. 什么是HTML语义化标签?常见HTML语义化标签大全

    一.什么是HTML语义化标签 语义化的标签,旨在让标签有自己的含义. <p>一行文字</p> <span>一行文字</span> 如上代码,p 标签与 ...

  9. html5常见语义化新元素_HTML 5中的新元素

    html5常见语义化新元素 HTML的开发于1999年停止使用HTML4.W3C致力于将HTML的底层语法从标准通用标记语言(SGML)更改为XML,以及全新的标记语言,例如可缩放矢量图形(SVG), ...

最新文章

  1. 面试官:不会看 Explain执行计划,简历敢写 SQL 优化?
  2. 2018年终总结之摄影作品展
  3. 如何跟踪session
  4. 【设计模式】访问者模式 ( 简介 | 适用场景 | 优缺点 | 代码示例 )
  5. 去除行块级标签之间的默认间距
  6. python闭包的原理_web前端:js 闭包原理
  7. SAP Spartacus b2b home页面的自动换行是怎么做到的
  8. linux清空redis命令,使用Linux管道批量删除Redis的key
  9. 6.6(java学习笔记)文件分割(IO综合例子)
  10. 计算机操作员理论知识试题,计算机操作员理论考试试题.doc
  11. 电梯、电梯调度与电梯问题
  12. http代码_ssssssss 0.0.1 发布,无需代码的 HTTP 接口快速开发框架
  13. 计算机组成原理唐朔飞第八章ppt,计算机组成原理唐朔飞PPT第8章CPU的结构和功能.ppt...
  14. 【华为HCIE安全考什么科目?华为HCIE安全考什么知识点?】
  15. 如何使用4G模块通过MQTT协议传输温湿度数据到onenet
  16. java打印设置_java如何设置系统默认打印机
  17. 《巴黎评论》启示录连载之一村上春树
  18. 京东2017实习生Java.md
  19. windows win7电脑搜索功能失效怎么修复
  20. 揭秘可变剪切研究的本质

热门文章

  1. JavaScript 中的string 方法
  2. 微信小程序 自定义顶部状态栏
  3. scala -abstract 类
  4. Atitit.vod 视频播放系统 影吧系统的架构图 架构体系 解决方案
  5. 第五章:几个重要技术总结
  6. Node.js -- 目录
  7. css3实现的一些灰色的导航条按钮
  8. WEB开发中合理选择图片格式
  9. linux shell变量作用域,Shell变量的作用域:Shell全局变量、环境变量和局部变量
  10. JSON 序列化 与 反序列化