文档章节

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

q
 qiugc
发布于 2015/04/19 11:35
字数 2635
阅读 726
收藏 43

文章简介:
      关于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标签表示一块不同于其它文字的文字,具有不同的语态或语气,用于:分类名称,技术术语,外语中的惯用词等等;


好了今天就说到这里吧,不知道对读到这篇文章的您有什么帮助没有?相信通过这几篇文章感觉您对HTML5文本标签这块了解了很多呢?

下篇文章我会讲一些HTML5 与图像相关的东西哦,相信一定会有你不知道的事情。 感谢您的阅读,期待下次与您见面;

身为一名IT技术人员磨练自己的技术是必不可少的,关注微信号coder_online,程序员互动联盟,可以与大牛在线随时讨论自己感兴趣的话题,让自己用最少的时间学到最多的东西,我在程序员互动联盟期待您的加入


© 著作权归作者所有

q
粉丝 5
博文 20
码字总数 19649
作品 0
海淀
私信 提问
加载中

评论(1)

苏生不惑
苏生不惑
学习复习
深入理解html5系列-文本标签

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

东辉在线
2015/04/20
170
0
从零开始学 Web 之 HTML5(一)HTML5概述,语义化标签

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

Daotin
2018/07/24
0
0
HTML5——对HTML5的认识

首先非常感谢李刚老师出的这本书《HTML5/CSS3/JavaScript讲义》,今天读了第一章节的内容,趁热打铁,总结一下。 HTML5的时代已经到来,它对所有的前端开发人员来说是一种福音。HTML5致力于解...

武小猪
2018/06/26
0
0
前端开发面试题总结之——HTML

本文转载于:猿2048网站➥前端开发面试题总结之——HTML 相关知识点 题目&答案 Doctype作用?严格模式与混杂模式如何区分?它们有何意义? 请描述一个网页从开始请求道最终显示的完整过程? HT...

前端老手
09/13
23
0
全新改进的 HTML5 表单创建

经历了12年之久,万维网的核心语言(HTML或超文本标记语言)终于迎来了HTML5主要修订版本。虽然万众期待的版本仍处于测试阶段并且没有宣布正式推出的日期,HTML5的网页设计师和程序员已经就有...

小卒过河
2011/07/23
4.2K
16

没有更多内容

加载失败,请刷新页面

加载更多

CQRS与AXON

CQRS 看了蛮多文章,只会CRUD,却不懂CQRS,CQRS是遵循DDD思想而产生的一种模式,Command and Query Responsibility Segregation 命令与查询隔离。查询就直接通过正常的模式service调dao层。...

无极之岚
18分钟前
2
0
OSChina 周三乱弹 —— 欢迎你来做产品经理

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :10多次劲歌金曲获奖,更多叱咤歌坛排名,黎明才应该是四大天王之首,只可惜拍的电影太少。单曲循环一个多月的歌,力荐 《无名份的...

小小编辑
33分钟前
53
3
500行代码,教你用python写个微信飞机大战

这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手。 帮助蹲厕族、YP族、饭圈女孩在无聊之余可以有一样东西让他们振作起来!...

上海小胖
今天
8
0
关于AsyncTask的onPostExcute方法是否会在Activity重建过程中调用的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/XG1057415595/article/details/86774575 假设下面一种情况...

shzwork
今天
7
0
object 类中有哪些方法?

getClass(): 获取运行时类的对象 equals():判断其他对象是否与此对象相等 hashcode():返回该对象的哈希码值 toString():返回该对象的字符串表示 clone(): 创建并返此对象的一个副本 wait...

happywe
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部