HTML5中缩略词标记的重要作用

       如果你非常精通html,看到这个标题,也许你会想起html4中的

        html5中新增的这个是一个非常有用的标记,但很明显没有被web文档撰写者重视,特别是没有被科技文章编写者重视。为什么这样说呢?不知道你有没有这样的经历,哦,我记起了一篇有趣的文章,《java程序员的堕落》,强烈推荐你去读一下,但我要说的是,里面列举的那几百个奇怪的缩略词,你认识几个:

Core Java, J2EE, JSP, JDBC, Servlets, AJAX, XML, HTML, XSLT, WebServices, CSS, JavaScript, SQL, Oracle 10g, MySQL 5.0., JMS,Eclipse,Adobe Flex Builder 3.x,UML, JDBC, SVN, JUnit, VSS, Jira, HTML, DHTML,CSS, AJAX, JavaScript, XML, MXML, Action Script, Servlet, JSP, JSTL,Hibernate 3.x, Spring 2.x, IBatis, SOAP, UDDI, WSDL, Apache Axis, Weblogic Server 8.x, Apache Tomcat 5.0, Struts Framework, MVC, ANT, Maven.复制代码

登录后复制

       我想,如果你能全部解释这些缩略词中每个字母代表的意思,我想你竖起大拇指。我在阅读一些博客时,特别是科技、编程文章时,经常会遇到一些不懂代表什么意思的缩略词,而作者也没有给出任何提示。对很多刚入门的程序员,或很多外行人,我们应该以一种合适的方式让他们知道每个缩略词的意思。

对,方法就是使用标记。

abbr缩略词标记用法

abbr标记的用法跟其它所有的HTML标记用法非常相似。下面是一个例子:

如今MVC模式越来越被人们诟病,而使用快速CRUD生成开发更是被一些著名程序员唾弃。

登录后复制

把你的缩略词用标记包起来,然后在标记的title属性上指明这个缩略词是从哪几个词缩略而来的,或说明这个简写词的含义。

abbr缩略词标记的效果

       这样写会有什么效果呢?能给读者带来哪些好处?下面我们可以来现场体验一下。

如今MVC越来越被更多的人诟病,而使用快速CRUD生成开发更是被一些著名程序员唾弃。

登录后复制

 你会看到,缩略词下面是有小点的,而且,将你的鼠标移动到缩略词上,会看到提示,提示信息就是标记上title属性里填写的缩略词解释。太方便了。不是吗。

abbr缩略词标记的美化

       如果你使用的是火狐浏览,这种下带小点的装饰是系统自带的。但如果你使用的是谷歌浏览器或IE,这看不到这些小点。你需要在CSS样式表里添加下面一小段样式规则:

abbr[title], acronym[title] {    border-bottom: 1px dotted;}复制代码

登录后复制

  当然,你也可以修改成更漂亮的样式,比如用红色的下划线。

       页面友好性是一个Web应用或web页面成功的重要指标,作为一个Web程序员,我们应该处处注意像缩略词这样的标记在网页中所起的作用,只有当用户感觉到方便时,我们开发出的东西才真正体现出它的价值。

立即学习“前端免费学习笔记(深入)”;

以上就是HTML5中缩略词标记的重要作用的内容,更多相关内容请关注PHP中文网(www.php.cn)!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3127321.html

(0)
上一篇 2025年3月29日 20:48:45
下一篇 2025年3月29日 20:48:52

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • HTML教程:如何设置Iframe自适应高度

        不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,…

    编程技术 2025年3月29日
    100
  • 简单的HTML5 Web Storage留言册

    简单的html5 web storage留言册   在这用一个简单的示例在讲解一下如何利用Web Storage来保存和读取数据。   示例HTML代码如下: nbsp;html PUBLIC “-//W3C//DTD XHTML 1.0 …

    编程技术 2025年3月29日
    100
  • 使用 HTML5 IndexedDB API

    HTML5 的一个重要特性是本地数据持久性,它使用户能够在线和离线访问 Web 应用程序。此外,本地数据持久性使移动应用程序更灵敏,使用的带宽更少,而且能够在低带宽场景中更高效地工作。HTML5 提供了一些本地数据持久性选项。第一个选项是 …

    编程技术 2025年3月29日
    100
  • JavaScript 游戏中的面向对象的设计

           简介       在本文中,您将了解 JavaScript 中的 OOP,来探索原型继承模型和经典继承模型。举例说明游戏中能够从 OOP 设计的结构和可维护性中获得极大利益的模式。我们的最终目标是让每一块代码都成为人类可读的代…

    编程技术 2025年3月29日
    100
  • HTML5架构(HTML5 Boilerplates )

    HTML5架构 html5架构,(html5 boilerplates ) html5文档的快速建立html5文档非常容易建立,你只需要改变文档头部的DOCTYPE声明。 复制内容到剪贴板 立即学习“前端免费学习笔记(深入)”; nbsp;…

    编程技术 2025年3月29日
    100
  • HTML5本地存储之Web Storage篇

    Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Storage官方建议为每个网站5MB。 立即…

    2025年3月29日 编程技术
    100
  • HTML5 postMessage 和 onmessage API 详细应用

           Web Workers       Web Workers 简介       至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能。它不但强化了 Web 系统或网页的表现性能…

    2025年3月29日 编程技术
    100
  • 在HTML5的CANVAS上绘制椭圆的几种方法

    HTML5中的Canvas并没有直接提供绘制椭圆的方法,下面是对几种绘制方法的总结。各种方法各有优缺,视情况选用。各方法的参数相同:   context为Canvas的2D绘图环境对象,  x为椭圆中心横坐标,  y为椭圆中心纵坐标,  a…

    编程技术 2025年3月29日
    100
  • 【HTML5】Canvas基础知识讲解

    html5规范引进了很多新特性,其中最令人期待的之一就是canvas元素。html5 canvas提供了通过javascript绘制图形的方法,此方法使用简单但功能强大。每一个canvas元素都有一个“上下文(context)” (想象成绘…

    编程技术 2025年3月29日
    100
  • 0基础接触html5之jquery(一)简介

    本人之前做as的,对html真的是0基础,都是这几天自己摸索的,所以肯定有很多考虑不到,或说的不对的地方。欢迎拍砖html5离不开js编程,而进行js编程就不得不说Jquery,那么什么是Jquery呢?为什么要用Jquery呢?下面简单介…

    编程技术 2025年3月29日
    100

发表回复

登录后才能评论