文章简介:
关于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即可关注,在线帮您解决技术难点,给大牛直接出难题。
相关推荐
HTML5是Web开发领域的一次重大革新,它在...随着浏览器对HTML5标准的支持不断完善,我们可以预见,HTML5将在未来的Web世界中发挥更加重要的作用。学习和掌握HTML5,对于任何想要涉足Web开发的人员来说都是必不可少的。
它可以让你知道哪些特性在用户浏览器中可用,从而帮助你优雅地降级或提供替代方案。在IE6中,Modernizr可以帮助识别哪些HTML5特性需要额外的polyfill或脚本来实现。 3. **CSS Hack**: 由于IE6的CSS解析机制与标准...
HTML5是一种强大的网页开发技术,它允许开发者在不依赖外部插件的情况下创建丰富的交互式内容。其中,HTML5的多媒体支持是其一大亮点,而M3U8(HLS,HTTP Live Streaming)则是苹果公司提出的一种流媒体传输协议,...
HTML5视频播放器是现代网页设计中的一个重要组成部分,它允许用户在浏览器中直接观看视频,无需依赖第三方插件。"超炫的html5视频播放器代码"是一个项目,旨在提供一个具有吸引力和功能丰富的视频播放体验。这个...
在本压缩包中,包含的资源将帮助我们理解如何利用HTML5来实现在手机移动端进行通话和短信交互。 1. **调用电话功能**: HTML5引入了`<a>`标签的`tel:`属性,允许用户直接从浏览器拨打指定的电话号码。例如: ```...
尽管JavaScript是现代Web开发中不可或缺的一部分,但许多人错误地将HTML5与JavaScript混为一谈。实际上,HTML5主要关注的是结构和语义,而JavaScript则负责处理逻辑和交互。HTML5中新增了许多元素(如`<article>`、`...
以下是你必须知道的28个HTML5特征、窍门和技术的详细解释: 1. **新的Doctype**:HTML5引入了一个简洁的doctype声明,`<!DOCTYPE html>`,它使得文档向所有现代浏览器声明为HTML5标准,不再需要复杂的XHTML声明。 ...
### JavaScript与HTML5结合实现半透明遮罩层弹框效果详解 #### 一、引言 在现代网页设计中,半透明遮罩层弹框效果是一种非常常见的交互方式,它不仅可以提升用户体验,还能让页面更加美观。通过JavaScript与HTML5的...
本html5视频播放器是我在网上搜索了很多资料和案例,然后整合出来的,已实现的功能有:1、网络视频在线链接播放;2、网络视频下载链接播放;3、本地视频播放。只要你知道视频流的地址,你就可以直接在页面输入,然后...
在“基于html5的多图上传”这个主题中,我们将深入探讨HTML5如何实现多图上传功能,以及它在多媒体和游戏开发中的应用。 一、HTML5的File API HTML5的File API允许网页直接访问用户电脑上的文件系统,这为实现多图...
在去年的一篇文章“你必须知道的28个HTML5特征、窍门和技术”中已经简要提到了HTML5表单的一些新特性,但由于当时是以视频形式展示,并且需要特定条件才能观看,因此很多人未能详细了解这一部分的内容。本文将填补这...
在HTML5中,Input元素扮演着至关重要的角色,它用于创建各种类型的表单控件,如文本输入框、密码框、按钮等。本篇主要讲解Input元素的一些重要属性及其用途。 1. autofocus属性: autofocus属性允许页面加载后自动...
在IT领域,尤其是在网页开发中,"自动定位位置+三级联动地址选择html"是一个常见的功能需求,主要用于提高用户在填写地址信息时的便捷性。这个功能结合了地理定位技术和前端的下拉联动效果,通常应用于电子商务、...
在开发H5应用时,有时候我们需要提供对PDF和DOCX文档的预览功能,以便用户可以在浏览器中查看这些文件而无需下载。`uniapp`是一个跨端开发框架,支持开发H5、iOS、Android等平台的应用。在这个场景下,我们将讨论...
5. 在`Working directory`字段中,设置工作目录,通常为项目根目录。 6. 确保`Output paths to refresh`字段正确设置,以便WebStorm知道何时刷新压缩后的文件。可以设置为`$FileNameWithoutExtension$.min.html`,...
HTML5 ProgressBar 是一种利用现代浏览器支持的HTML5特性来实现的进度条组件,它在ASP.NET框架下可以方便地用于显示各种操作的进度,比如文件上传、数据处理等。这个组件充分利用了HTML5的新特性,如`<progress>`...
前言:看到了很多技术大牛和相关博客,很少关于HTML5的地理定位的描述,不知道他们是不愿意提及还是使用的少的原因,我个人按一点点经验总结了两方面原因:第一、服务商方面的原因,因为HTML5的定位是由google提供的...
HTML5手机触控插件是为了解决移动设备上的交互问题而设计的,尤其是在没有鼠标而是依赖触摸屏的环境中。这个插件的核心在于利用`touchstart`、`touchmove`和`touchend`这三个触控事件,来实现对用户触摸操作的监听和...