专栏首页程序员互动联盟你所不知道的html5与html中的那些事(四)——文本标签

你所不知道的html5与html中的那些事(四)——文本标签

文章简介:

关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后,所有的工作都可以达到真正的云方式呢?这一系列的问题你是否已经想明白了呢?

本系列文章将为您一一解答你所不知道的关于html5与html中的那些事;具体会包括如:html5新的理念与想法,html5的新标签的用意与具体开发中场景应用,html5与css3的感情经历(用法搭配),包括html5的父亲html的一些小隐私(您在开发中可能不知道的事);

大家好,又与大家见面了,今天我会为大家讲到的您可能不知道的事有什么呢?下面我们就来看看

1)元素title属性对语意的重要性是什么?

2)html5中的新标签对于写文本启到一些重要影响的标签有哪些?

3)html5中<address>、<figure>、<time>标签的正确用法与注意事项有哪些是你不知道的?

4)关于<em><strong>与<b><i> 的前世今生?

第一个问题

元素title属性对语意的重要性是什么?

title属性这个刚一看会不会想到title标签?但是不要弄到一起算呀,他们是完全不同的东西;感觉平时在我们开发的时候很少会用到这个属性,首先说一下它是干什么的吧,其实他就是一个具有提示作用的属性;对于屏幕阅读器来说可以为用户朗读文本;所以正确的使用可以提升页面的访问性哦;

如下图在浏览器中的效果与代码;

码实现

效果展示

各位朋友有没有发现这个有似曾相识的感觉,对的就是以前用<img>标签的时候,alt属性的感觉,这个就是需要朋友们注意了,在IE7以前img标签中是用alt来显示文本的,但是在IE7以后的版本,如果alt与title这两个属性同时出现会显示title属性中的文字而不是alt属性中的;

如果下图的运行结果:

第二个问题

html5中的新标签对于写文本启到一些重要影响的标签有哪些?

小编想在写这个问题的答案之前说几句这些标签的理解与用法(至少小编是这么理解的而且自我感觉效果还可以);

1,明确html5的核心思想就是语意,所以不管是什么标签就看表达的意思,而不是看展现的效果;

2,关于文本的相关标签可以适当的想象成是语文中的标点符号这样可以方便记意与运用(或着你也可以通过其它的方式)

好了明白上面的两点我们在来说这些新的标签的语意与用法吧;

<address>、<figure>、<time>这三个标签下一个问题中详细说这里就先不说了;

<strong><em>这个两个标签在HTML4.0中就已经有了,但是在这里还是要说一下因为在以前可能很少用到它们因为很少有人去注意语意;

<strong>表示的是重要的文本(默认为粗体显示)——重点是语意上的表达而不是展现的效果这个需要记住哦;

<em>表示的是强调的文本(默认为斜体)

<mark>标签HTML5中的新元素用来突出显示文本,它的效果就像是用荧光笔给重点的语句做标记一样;

<span>标签这个也是在HTML中就已经有的了,以前的文章也大概的提过一下但是没有详细的说明,下面就详细的说明一下:

1.span没有任何的语意,所以正确的使用方式是需要在没有其它合适有标签的时候才可以用它;

2.它是短语级别的标签所以不会新出现一行,

3.同div一样在一定的情况下可以添加span标签利用微格式来增加语意;

4.一般的情况下需要用css来控制它的显示样式因为它没有样式的展现样式;

<wbr>一个与<br>很像的新标签;区别在于它不会强制换行;

<ruby><rp><rt>这几个标签就像是语文中的音标一样;

<meter>可以用它做一些测量结果的显示与投票结果的显示(现在的问题是浏览器对它的支持不好)

<progress>同样的一个进度条的显示,可以用做一些很好的与用户交互的效果;问题是浏览器的兼容现在也不好;

第三个问题

html5中<address>、<figure>、<time>标签的正确用法与注意事项有哪些是你不知道的?

<address>这个标签是新的所以用他的人很少至于正确的用法当然也很少有人去研究它;小编就简单的总结一下:

1.address是用来定义与HTML页面或页面一部分有关的作者、相关人员或组织的联系信息,通常位于页面底部或相关部分内;

2.大多数时候,联系信息是作者的电子邮件或是指向联系信息页的链接;这个是正确的,不能标记“联系我们”中的办公地点这是错误的用法;

3.提供的信息要准确,不是说电子邮件的地址的正确性,而是说需要对应上提供信息的人,如果一个页面中有好多相关的人,那么提供信息的时候一定要确定信息准确性,不要张冠李戴;

4.address标签中不能有h1~h6\article\address\aside\footer\header\hgroup\nav\section等标签;

<figure>这个元素是用来引入图表、图形、照片等,对应的场景就是像是杂志中的图片一样,在html5之前是没有一个专门的标签来做这个事的,之前如果实现这个功能就是用没有语意的div标签;

用法提示:

1.figure元素可以包含多个内容块;但是只能有一个figcaption(可以理解成给图表加标题)标签

2.可以用H1~H6来给figure增加标题;

3.figcaption不能单独出现,需要有配套的内容一起出现 ;

<time>可以通过这个标签标记一个具体的时间或日期;应用场景通常就是一篇文章的发表时间;写法如下图:

需要注意的是:

1.datetime中的时间最好与time标签中的文本元素日期一样,写法可以不一样;

2.如果这个时间是代表整个文章或是页面的时间需要添加pubdate属性;

3.不要在time标签中使用不确切的时间如:“今天中午”、“上周末”

4.如果 使用pubdate属性需要注意的是要在同一个父标签下面不要出现张冠李戴的问题;

5.times标签不能在嵌套另一个time标签;

6.datatime中的时间格式需要是标准的机器可能的时间 如:YYYY-MM-DDThh:mm:ss

其实做为一个新的标签它的用法还有很多,小编这里只是说了一些最基础的东西,不过我认为用会上面所以说的东西这个time元素用的就可以说是入门了

第四个问题

关于<em><strong>与<b><i> 的前世今生?

各位开发过HTML的朋友都知道<em>与<i>、<strong>与<b>它们的展现形式一样的,一个是斜体一个是粗体,那么它们在html5中是怎么平相处的呢?下面我们来重点讲一下<b><i>的前世今生:

在很早以前,互联网那时还没有一个叫作CSS的东西出现的时候,为了区分文本中的重点与特殊的含意的文字<b><i>这对兄弟出现了;

在它们的帮助下,页面的文字与用户之间的交互得到了提升。

然而好景不长,在互联网飞速发展的情况下,很快出现一个叫css的东西,它的责任就是用来控制页面的表现形式的,当然也包括<b><i>所表现的形式,所以在html4.0与xhtml1中就有开发人员建议废弃<b><i>,取面代之的就是<strong><em>+css,因为他们有语意性可以更好的与用户交互;可是问题并没有就此结束,因为在开发的时候在一些情况下发现用<strong><em>总是不能很的好的表示语义;

为此,在html5中<b><i>有以修改后的面貌展现给我们了,所以在html5中又重新启用了<b><i>这对兄弟;

那么具体在HTML5中什么时候用它的呢?

b标签表示出于实用的目的提醒读者注意的一块文字,不传达任何额外的重要性,也不表示其它的语意和语气,用于:关键词,产品名,操作指令等等;

i标签表示一块不同于其它文字的文字,具有不同的语态或语气,用于:分类名称,技术术语,外语中的惯用词等等;

本文分享自微信公众号 - 程序员互动联盟(coder_online),作者:gavin

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-04-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何具备真正的编程能力?

    疑惑一 各种类型程序员都干啥? 天天都在加班到很晚才回家的程序员,有三种在公司混表现的,这种一般是刚毕业参加工作的各种学习,一种是做给领导看的,还有一种是负责人...

    程序员互动联盟
  • 你所不知道的html5与html中的那些事(三)

    文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么...

    程序员互动联盟
  • 为什么很多人都在说360是流氓公司?

    360的风光事件几乎都是发生在PC互联网时代,现在的360已经在安全领域稳稳的做到了第一的位置,而且从业务方向上已经比较明确了,在移动互联网时代手机端的杀毒已经...

    程序员互动联盟
  • Java ---自定义标签

         本篇文章介绍自定义标签,可能在工作中很少涉及到自己来定义一个标签库,因为我们基本上都是使用的大神写的标签库,基本上直接使用即可,但是从自身的发展来看,...

    Single
  • 闲聊用户画像的存储

    现在的用户画像,动不动就是几千几万个标签,标签一多就出现了一些需要克服的难题,比如下面两个:

    木东居士
  • 【JavaWeb】83:js不能算是一门编程语言?

    因为才刚开始学js,所以很多话不敢说的太绝对,就加上了“基本,大概,可能”这样的形容词。

    刘小爱
  • 互联网进入标签时代

    最近有三个产品的改版引起了我的注意:一个是网易跟帖上线了标签功能,用户可以给其他跟帖用户打上特定标签,看上去是为了提升互动性和实现用户自运营;第二是百度图片搜索...

    罗超频道
  • HTML知识清单(附学习网站)

    上面知识点知识本人总结的,想要深入学习的话请跳转至http://www.w3school.com.cn/专业的前段技术学习网站,免费开源!!!

    时间静止不是简史
  • 【融职培训】Web前端学习 第2章 网页重构2 常用的html标签

    上一节我们已经了解了html和css的基本概念,本节通过上一节的一个例子来说说HTML的语法.

    学习猿地
  • 前端基础-HTML

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    cwl_java

扫码关注云+社区

领取腾讯云代金券