• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5的革新——语义化标签

HTML5的革新——语义化标签

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含HTML5,语义化标签等相关知识,匿名希望在学习及工作中可以帮助到您

一、语义化标签的实战意义

我先收集到一些观点,大家姑且先听上一听,
有人说:
“没必要考虑语义化,只要我写的代码浏览器运行后没问题就行,反正领导根本不关心这些”
“语义化是w3c推广的,我是很想语义化我的代码,但总是用不明白”
“这个不好说,语义化再好有啥用,关键是有好的项目,客户才是金主!”
“除了专业人士,谁会去看我们的代码是不是语义化的”

不仅仅有页面重构人员的声音,也听一听工程师、设计师、还有项目管理人员,他们是怎么看“语义化”这件事的

Php工程师:“无所谓什么语义化,只要逻辑正确,不影响我循环数据”
项目管理人员:“我更看重在最短的时间,实现我的需求,至于语义化不是我们关心的,只要别耽误项目时间,你们怎么优化都行 ”
设计师:“什么是语义化?”
市场销售人员:“客户满意就行,客户满意我们才能赢利”

这些声音时常充斥在我们的耳边,虽有些片面,但似乎还是挺有道理的,可站在自己的立场上(一个页面重构人员),基于这些现实条件,我们要如何权衡,语义化和现实工作之间的关系?我们该怎么做呢?

先解释几个名词,我们再来讨论在实际工作中如何处理这些问题。

首先解释一下什么是语义化?

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

二、语义化存在的意义

  • 为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;

  • 用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;

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

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

  • 便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循

事实上SEO最有效的一种办法,就是对网页的HTML结构进行重构,实质上就是语义化。”

三 html5 语义化标签


在HTML 5出来之前,我们用p来表示页面章节,但是这些p都没有实际意义。(即使我们用css样式的id和class形容这块内容的意义)。这些标签只是我们提供给浏览器的指令,只是定义一个网页的某些部分。但现在,那些之前没“意义”的标签因为因为html5的出现消失了,这就是我们平时说的“语义”。

看下图没有用p标签来布局

HTML 5的革新——语义化标签(一)


html5的布局

嗯,如上图那个页面结构没有一个p,都是采用html5语义标签(用哪些标签,关键取决于你的设计目标)。

但是也不要因为html5新标签的出现,而随意用之,错误的使用肯定会事与愿违。所以有些地方还是要用p的,就是因为p没有任何意义的元素,他只是一个标签,仅仅是用来构建外观和结构。因此是最适合做容器的标签。

W3C定义了这些语义标签,不可能完全符合我们有时的设计目标,就像制定出来的法律不可能流传100年都不改变,更何况它才制定没多久,不可能这些语义标签对所以设计目标的适应。只是一定程度上的“通用”,我们的目标是让爬虫读懂重要的东西就够了。

结论:不能因为有了HTML 5标签就弃用了p,每个事物都有它的独有作用的。

节点元素标签因使用的地方不同,我将他们分为:节元素标签、文本元素标签、分组元素标签分开来讲解HTML5中新增加的语义化标签和使用总结。

header元素

header 元素代表“网页”或“section”的页眉。
通常包含

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03有哪些比较好用的h5工具呢?要免费的哈。。。
  • 2017-08-06HTML5中的autofocus(自动聚焦)属性介绍
  • 2018-12-03jquery中select组件的使用方法
  • 2018-12-03基于HTML5 的人脸识别技术
  • 2018-12-03有哪些较好的壁纸网站?
  • 2017-08-06HTML5 canvas基本绘图之绘制阴影效果
  • 2018-12-03HTML5游戏框架cnGameJS开发实录-外部输入模块篇
  • 2018-12-03Windows 8 将 Silverlight 和 .Net 打入冷宫了吗?
  • 2018-12-03HTML5仿微信聊天界面和朋友圈代码
  • 2018-12-03html5中新特性之语义化标签的实例分析

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • canvas API ,通俗的canvas基础知识(三)
    • 利用Jquery使用HTML5的FormData属性实现文件上传
    • HTML5里autofocus自动聚焦属性使用介绍
    • 编写html5时调试发现脚本php等网页js、css等失效
    • HTML5 canvas基本绘图之填充样式实现
    • 如何实现table表格中的斜线表头效果
    • HTML5微信播放全屏问题的解决方法
    • HTML5制作酷炫音频播放器插件图文教程_html5教程技巧
    • HTML5新增的8类INPUT输入类型介绍
    • 小强的HTML5移动开发之路(49)——HTML5开发神器HBuilder

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有