文档章节

你所不知道的html5与html中的那些事(三)

lonely1986
 lonely1986
发布于 2015/04/12 21:05
字数 3106
阅读 43
收藏 1
点赞 0
评论 0

文章简介:

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

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


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

1)html5中的<nav>、<article>、<sections>、<aside> 、<footer>这些标签的理解与用处?

2)html5通用的容器<div>、<span>在HTML5中的生存含义?

3)如何使用ARIA提升可访问性?


第一个问题:

html5中的<nav>、<article>、<sections>、<aside> 、<footer>这些标签的理解与用处?

小编在写这几个标签的时候真是想了又想,我想知道怎么写才能很简单明白的把html5中的这几个标签写明白;同时自己也读了一下上一篇中关于 <header>标签的讲解;

感觉如果对于一个没有接触过HTML5的人来说可能感觉有点乱,而对已经知道是HTML5的人来说有感觉没有什么新奇的地方,所以感觉像以前一样的写法有点鸡肋了;

所以今天打算换一个写法,用完全小白的写法来讲述问题中的这几个标签;

第一对这个几个标签的理解:

HTML5的设计者们可以说是用心良苦呀,他们认真分析HTML4.0中出来的问题,也就是当下对流行的写页面的方式就是<div>+css;我们也不难发现只要用到这个就可以把页面写即简单有漂亮

没有繁琐的标签在里面,需要什么功能就去加div标签就可以了;而div是什么呢?这个我们下一个问题详细说明;问题的关键在于div没有任何的语意,也就是说他要干的事是什么全凭开发者说了算;这就造成了严重的开发规范不统一,也就是说页面的导航栏是div,页面的边栏也是div,唯一区分它们的就是id,可能一些有心的开发者会吧,div的id写的语意明白些,比如:导航栏的id用“nav”,边栏的id用“aside”;这样的写法对其他的开发者看来还是很好的,因为看到id就可以知道这个div是干什么用的了;但是还是有一大部分的开发者会这么写如:导航栏的id用:“div1”,边栏的id用:"div2",这样的写法对用户来说的可能没有什么区别,因为开发者知道他们都代表什么,而对其他的开发者来说这真的是灭顶之灾,用英文来说就是“reading the fucking code”,而对开发者本身可能时间一长也不知道是什么意思了,但是下次开发的时候他们一定还有人是这么干的;

回到正题,经过上面的介绍大家也许已经知道为什么在HTML5引用上面的标签了吧,就是为了解决开发规范不统一的问题同时也为了增强语意,有人也许会问为什么HTML5为什么那么在意语意?用了上面的标签可以说带来什么好处呢?这个答案用一个非常简单的话来说的那就是:为了统一规范与新功能的出现;(如果不明白这句话的话请持续关注我的博客哦,慢慢就明白了,这个用一句话与两句话也讲不清楚);

他们这些标签功能就是代替div功能中的一部分,他们没有任何的默认样式,除了会让文本另起一行外;

第二这几个标签的语意与用法:

nav:标记导航(对应网页中重要的链接群就需要用这个标签)包含的他中间的通常是<ul>无序列表;当然如果是面包屑链接就需用到<ol>有序列表;只要记住这个语意自己灵活发挥就是可以了;写法与上一篇中的<header>标签的写法一样;

特别提示:1)HTML5规范不推荐对有辅助性的页脚链接用<nav>;2)THML5中不允许将<nav>嵌套在address标签中;

article:文章标记标签(表示的是一个文档、页面、应用或是网站中的一个独立的容器,原则上来讲就是聚合),当朋友们用到他的时候满足上面的用法就不会出错了,写法与上一篇中的<header>标签的写法一样;

特别提示:1)article这个标签可以嵌套使用,但是他们必须是部分与整体的关系;2)同样不能用在<address>标签中;3)他与<section>标签容易混淆所以需要注意;(后面我会说一下怎么在这个两个中间做出选择;)

section:区块定义标签(表示的是文档或是应用的一个一般的块),他一般是有一组相似的主题的内容;一般会包含一个标题;可以用这个标签来写:文章的章节,标签式对话框中的各种标签页等等类似的功能;这里你会发现他与article这个标签很像对不对?那么怎么的开发中正确的应用他们呢?

其实也很简单你就这样想:如果你的页面中需要一个单独的模块来实现一个单独的功能也就是高聚合的情况就用<article>其他的时候都用<section>;只要你这样想并且这样用就没有问题的;

aside:定义侧栏标签(表示一部分内容与页面的主体并不是有很大的关系,但是可以独立存在),用他可以实现:升式引用、侧栏、相关文章的链接框、广告、友情链接等等;

特别提示:1)如果使用多个aside标签应该在主要内容的后面,这样有利于SEO的搜索与提升可访问性;2)如果是与文章的主要内容有关系的图像需要用<figure>(后面的文章会介绍)标签而不是用他;

footer:页脚标签(与header标签对应的标签)用他可以实现的功能有:附录、索引、版权页、许可协议等。写法与上一篇中的<header>标签的写法一样;

特别提示:1)页脚并不一定是要位于所在元素的末尾;不过通常是这样的,2)他不可以放在<header>标签中;也不可以相互嵌套,或是在<address>元素中;


第二个问题:

html5通用的容器<div>、<span>在HTML5中的生存含义?

div 这个标签在很久很久以前就已经出现在HTML中了,他的全拼是(division),而在HTML5中的很多的新标签都是他的功能的统一定义而已,因为div本身没有任何的语意;但是可以对他增加css样式;这样就可以很好的为页面做出一些我们理想中的效果;那么在HTML5为什么他还存在呢那就是因为;在某些时候你会发现你用HTML5中的任何一个标签都不合适你现在需要的语意 ,所以在这个时候就需要用到div这个标签了,说道div那么以要说说与他相对应的<span>这个标签, 他也是一个没有任何语意的标签起到的功能与作用是和div一样的只不过用法不一样:div是块级的无语意容器,span是短语的无语的容器;(后面 我会在详细的说一些span)标签;

div的用法相信朋友们用的一定比我熟悉所以这里关于他的用法就不多说了只是针对在HTML5中对div的使用我提几点建议:

1)如果你觉得用HTML5中的新的标签比用div合适就一定要用新的标签,因为div没有任何的语意,这个是HTML5所不倡导的;

2)如果效果需要的话可以在HTML5新标签的外面加一个div标签,这样对html中的语意不会产生太大的影响;

 

第三个问题:

如何使用ARIA提升可访问性?

不知道朋友们有没有发现我在写HTML5的第一个博客就一直在说语意语意的,语意真的有那么重要么?通过语意又怎么提高访问性与曾加SEO的搜索的呢?因为现在一些SEO与浏览器或是屏幕阅读器(一个给残障人士用的文章阅读器)都在根据HTML5的新标准做一些新的功能;他们会很具新的语意直接与自身的功能相对应;如果网页的开发者也是这么做的那么你的网站的应用性会大大的曾加;

上面又强调了一下语意的重要性;下面告诉大家一个更好的曾强语意的小窍门,一定要好好看哦因为这个小窍门朋友们不一定知道的:

概念介绍:WAI-ARIA(Web Accessibility Initiative's Accessible Rich Internet Applications)无障碍网页倡议之可访问的富互联网应用,简称ARIA,他就是一种技术规范;他在HTML提供的语意的基础上,他会使用属性在填补一些语意上的空白;

现在是用法书写

1)正确运用ARIA中的地标角色:

1)role ="banner"(横幅)

2)role="navigation"(导航)

3)role="main"(主体)

4)role="complementary"(补充性内容)

5)role="contentinfo"(内容信息)

小提示:地标角色只是ARIA规范中的一种如果你干兴趣可以去官网阅读一下(地址:www.w3.org/TR/wai-aria/ )

2)将屏幕阅读器测试列入你的日常开发中;(因为他是最能直接反映出你的网站语意写的好不好的东西)

3)正确的为标签制定id与类(语意性一定要明显);

4)正确使用class类以及他提供的微格式;

关于class的微格式,因为有很多人都知道或是认为class的属性是只能为一组元素应用CSS样式,其实并不是这样的;其实他还可以在不引用额外的标签下来曾强语意,这就是微格式,微格式是使用约定的class名称来标示一块HTML从而来曾强与应用程序、智能搜索与搜索机器人的交互;

关于微格式的使用可以看看这个网址:http://microformats.org



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

下篇文章我会讲一些与HTML5 与文本相关的东西哦,相信一定会有你不知道的事情,也许还会根据您的评论或提问在下一个文章中解答哦;

感谢您的阅读,期待下次与您见面;

 

如果对这篇讲的技术有任何疑问,第一时间获得文章更新,每天发布一篇技术大牛的原创文章,更多技术信息分享

欢迎关注个人微信公众平台:程序员互动联盟,扫一扫下方二维码或搜索微信号coder_online即可关注,在线帮您解决技术难点,给大牛直接出难题。

 


© 著作权归作者所有

共有 人打赏支持
lonely1986
粉丝 109
博文 34
码字总数 8686
作品 0
海淀
前端新人关注的Web前端饱和性分析?前端面试必知必会的十点!

现在前端市场是不是已经饱和了?巴巴巴巴巴...... 还有:XXX行业是否已经饱和? angular1.5是不是已经被淘汰? 前端还有前途吗? bootstrap为什么被称为垃圾框架?等等等 不是博主不友好,只...

web前端05 ⋅ 06/15 ⋅ 0

WEB前端开发学习HTML5到底有多厉害?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/23 ⋅ 0

HTML5在客户端存储数据的新方法——localStorage

HTML5在客户端存储数据的新方法——localStorage localStorage作为HTML5本地存储web storage特性的API之一,主要作用是将数据保存在客户端中,而客户端一般是指上海网站设计用户的计算机。 ...

祈澈姑娘 ⋅ 2017/12/19 ⋅ 0

Html5 学习系列(六)Html5本地存储和本地数据库

//Demo:获取或者创建一个数据库,如果数据库不存在那么创建之var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { });...

aicoder ⋅ 2014/08/30 ⋅ 0

HTMl5的sessionStorage和localStorage

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结...

lg2045 ⋅ 2014/10/09 ⋅ 0

cookie、localStorage和sessionStorage 三者之间的区别以及存储、获取、删除等使用方式

写在前面: 前端开发的时候,在网页刷新的时候,所有数据都会被清空,这时候就要用到本地存储的技术,前端本地存储的方式有三种,分别是cookie,localstorage和sessionStorage ,这是大家都知...

OB丶Koro1 ⋅ 2017/11/27 ⋅ 0

html5 sessionStorage 与 localStorage使用详解

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结...

Adam-Lee ⋅ 2012/08/22 ⋅ 1

html5-web本地存储

在html5中为我们提供了一种本地缓存机制,它将取代我们的cookie,并且它是不会随浏览器发会我们的服务器端的。我们可以采用js在客户端自由的操作本地缓存。html5中缓存主要有localStorage,和...

zting科技 ⋅ 2017/01/10 ⋅ 0

Web前端最全面试宝典- Html篇

HTML 1.对WEB标准以及W3C的理解与认识 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访...

颜卿今天Coding了吗 ⋅ 2017/03/04 ⋅ 0

H5本地存储一

localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用。sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同意可...

刘梓航 ⋅ 2014/10/27 ⋅ 2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 53分钟前 ⋅ 0

sbt网络问题解决方案

转自:http://dblab.xmu.edu.cn/blog/maven-network-problem/ cd ~/.sbt/launchers/0.13.9unzip -q ./sbt-launch.jar 修改 vi sbt/sbt.boot.properties 增加一个oschina库地址: [reposit......

狐狸老侠 ⋅ 今天 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 今天 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 今天 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

深入Java多线程——Java内存模型深入(2)

5. final域的内存语义 5.1 final域的重排序规则 1.对于final域,编译器和处理器要遵守两个重排序规则: (1)在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用...

江左煤郎 ⋅ 今天 ⋅ 0

面试-正向代理和反向代理

面试-正向代理和反向代理 Nginx 是一个高性能的反向代理服务器,但同时也支持正向代理方式的配置。

秋日芒草 ⋅ 今天 ⋅ 0

Spring 依赖注入(DI)

1、Setter方法注入: 通过设置方法注入依赖。这种方法既简单又常用。 类中定义set()方法: public class HelloWorldOutput{ HelloWorld helloWorld; public void setHelloWorld...

霍淇滨 ⋅ 昨天 ⋅ 0

马氏距离与欧氏距离

马氏距离 马氏距离也可以定义为两个服从同一分布并且其协方差矩阵为Σ的随机变量之间的差异程度。 如果协方差矩阵为单位矩阵,那么马氏距离就简化为欧氏距离,如果协方差矩阵为对角阵,则其也...

漫步当下 ⋅ 昨天 ⋅ 0

聊聊spring cloud的RequestRateLimiterGatewayFilter

序 本文主要研究一下spring cloud的RequestRateLimiterGatewayFilter GatewayAutoConfiguration @Configuration@ConditionalOnProperty(name = "spring.cloud.gateway.enabled", matchIfMi......

go4it ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部