浅析HTML5 Landmark_html5教程技巧

来源:脚本之家  责任编辑:小易  

下面给出一个HTML5学习的2113路线图,按照5261这个路线图学习以后,一般的HTML5项目开发会4102没问题。仅作为参考。1. HTML5教程1653主要学习HTML标签、属性和事件参考:http://www.w3school.com.cn/html5/index.asp2. CSS教程主要学习使用CSS来控制网页的样式和布局。参考:http://www.w3school.com.cn/css/index.asp需加上一本讲解CSS3的书。3. JavaScript教程做HTML5开发,主要使用JS语言。所以要学习JS语言。必要时还要学习一些JS库,方便开发。JS教程:http://www.w3school.com.cn/js/index.aspJQuery教程:http://www.w3school.com.cn/jquery/index.asp4. HTML5其它的核心技术 以上只是基础,做HTML5开发,可能会用到下面的技术。1)WebWorker 可以在浏览器中运行多个JS脚本。可以用于需要后台执行某种耗时工作的场合。API可以参考:http://www.w3.org/TR/workers/ 2)WebSocket浏览器可以与服务器间双向通信。Socket方式能够大大提高浏览器与服务器间的通信效率。可以用于浏览器与服务器间通信频繁的场合,比如实时聊天。API可以参考:http://www.w3.org/TR/websockets/3)Canvas2D浏览器中画图。可以用于游戏开发等等场合。详细API可以参考:http://www.w3.org/TR/2dcontext/教程可以看:https://developer.mozilla.org/cn/Canvas_tutorial,你好学习Html有8个阶段:2113阶段1.前端核心基础HTML +_CSS核心5261、JavaScript基础语法4102、JavaScript面向对象1653、JavaScript DOM和BOM编程、jQuery框架阶段2.HTML5 + CSS3 + 移动端核心HTML5新特性、Canvas专列、CSS3新特性、CSS3进阶、CSS3实例演练阶段3.移动端移动端核心、移动端适配、移动端特效阶段4.服务器端服务器端开发、数据库操作、前后端交互核心、微信公众号开发阶段5.JavaScript高级JavaScript基础深入剖析、JavaScript面向对象深入讲解、JavaScript异步编程、JavaScript函数式编程JavaScript设计模式阶段6.前端必备性能优化、版本控制工具、模块化、项目构建工具阶段7.高级框架React框架基本使用、React框架进阶、Vue框架基本使用、Vue框架进阶、Vue源码分析阶段8.小程序原生小程序入门、原生小程序API使用、小程序框架Mpvue这8个阶段不管是自学还是参加培训都是可以的,此外学习html要做到“三多”多敲、多思考、多问,学习的本质就是不断的重复,熟能生巧,键盘敲烂薪资过万,还要多总结,遇到不懂的就要问,站在巨人的肩膀上你肯定看的更远,看到的更多,学习代码这东西,最好的2113方法就是多练习,5261自己多写,多看视频教4102程,不懂就问。那么问题来了1653,问谁?谁能义无反顾的去帮忙解答问题,目前培训班非常多,上培训班学习一下html5也不是坏事,这样学习比较快,更系统更全面,让老师带着走更路子更清晰,html5工程师是目前互联网行2113业当中招聘需求非常大的一类,5261近日随着html5行业的快速发展4102,国外的前端1653开发和后端开发人员占比为1:1,但国内占比仍然是1:3以下,html5开发职位目前的人才缺口达到近50万。如果想系统全面学习html5,一般是5个月,费用是2万左右。可以去【千锋】先试听两周。亲身去实地体验下,看你适不适合学html5,能不能学会。靠不靠谱,适不适合你,只有亲身体验过才清楚,  随着移动互联网的发展2113,web前端逐渐受到企5261业的重视,前端开发人员的薪资4102也水涨船高,越1653来越多的人看好前端行业的发展,想要转行加入。下面,给大家分享一份web前端学习路线图,希望对初学者有所帮助。Web前端行业的发展,让前端人员能完成比以前更多的职责范围,所以未来前端可以宽口径就业,前景非常好。对于零基础的人而言,要怎么学习web前端呢? 1、 前端页面重构。主要内容为PC端网站布局、Photoshop 工具及切图、H5移动端网页布局、HTML5+CSS3新特性与交互。学习目标是完成PC端网站布局,可实现响应式布局,一套代码适配 PC 端、移动端、平板设备等。2、 前后端网页交互。主要内容为JavaScript语法全面进阶、ES6 到 ES10 新语法实践、jQuery 应用及插件使用、设计模式及插件编写、封装JS工具库及Web APIS、AJAX+PHP+MySQL前后端交互、前端工程化与模块化应用以及PC 端全栈开发项目等。学习目标是可以掌握前端工程化工具,如 git、gulp、webpack 等,搭建项目及开发项目。3、 Node.js + 前端框架。主要内容为Node.js 全面进阶、Koa2+MongoDB搭建服务、Vue.js 框架、React.js 框架、小程序云开发与小程序框架、原生APP与混合APP、数据可视化与桌面应用等。学习目标是掌握桌面应用及可视化大数据,实现复杂数据展示类项目,能够独立完成前后台相关功能,胜任HTML5全栈开发工程师职位。很多学习web前端的朋友都希望在学成后能找到一份满意的工作,所以我们在学习过程中一定要注意实战经验的积累,如果你所学的东西对企业没有用,那你所做的一切都是无用功www.zgxue.com防采集请勿采集本网。

最近在进行无障碍相关文档翻译的时候遇到了 landmark 的概念,在网上搜了下发现没有相关的中文资料,因此写一篇博客简单介绍一下。

不用再依赖插件来观看视频 HTML5旨在称你为网络视频的新标准。你可以简单轻松的操作你的javascript和CSS的播放器来处理视频,创建一个更距凝聚力的布局。

什么是 Landmark

HTML5作为移动互联网的行业新贵,它的快速发展撼动着Android和iOS在应用层面的地位。 由于HTML5的富媒体化与富应用化,目前还没有一门前端的开发语言能取代

Landmark 是一种用来表示网页组织结构的方法。通常一个网页可以被切分成几个大块

《网站重构》这本进阶与提高的书值得一览

以一个视频网站为例,网页的最上方是一条banner,左侧是一个导航栏,右侧显示视频。网页可以通过这种切分方式来分割出不同的功能区。当然在一个功能区内也可以递归地进行切分,这里先不展开。

现在编写网页的软件有很多,推荐你用Dreamweaver、Notepad++,Sublime text2等等,你可以根据自身情况选择,我用的是Notepad++这款软件,很不错的,功能也很

对于一个视力障碍者,他无法像常人一样理解从视觉角度传达出的网页结构信息,那么就需要网页开发者预先将网页的结构规划好,并将结构信息写在HTML代码里,最终将网页的结构信息通过读屏软件表达出来。

网上有很多的视频教程,你挑选一些课程较多且专业老师录制的学习,关于HTML5的学习方法有三种学习方法供你选择:一种是自学,当然你要有些基础还要有不错的学习能力及自制力。一种是报班学习,这个是学的最快的但是需要教学费。还有一种是线上学

而landmark就是连接网页结构信息和读屏软件的桥梁。网页开发者通过landmark对网页区域进行标注,读屏软件读取landmark信息并传达给视力障碍者。

如何使用 Landmark

事实上,在HTML5 landmark出现之前,就已经有landmark的概念了。

landmark有以下几种main,navigation,complementary,banner,contentinfo,form,region,search。通过使用<div role="main">就定义了一个main landmark。

而在HTML5中定义了一些全新的标签,并赋予他们隐式的landmark语义。

HTML5 Landmark主要有以下几种

HTML Element Landmark Role
<main> main
<nav> navigation
<aside> complementary
<header> banner
<footer> contentinfo
<form> form
<section> region

这些标签本身就隐含着landmark的含义,也就是说<main><div role="main">是完全等价的。

对于search landmark没有定义专用的HTML标签,通常使用<form role="search">来实现。

也就是说,在上一节引用的网页中

    对于1号区域,应当把所有的内容放到一个<header></header>中,标识该部分是banner 对于2号区域,应当把所有的内容放到一个<nav></nav>中,标识该部分是导航栏 对于3号区域,应当把所有的内容放到一个<main></main>中,标识该部分是网页的主要内容

     

读屏软件会生成一系列的跳转链接来帮助视力障碍者确定网页的结构并迅速跳转至需要的部分。

在HTML5之前,只能通过role属性来定义landmark,HTML5推出的新标签能够在保持可访问性的情况下简化标记。但并不是每个用户使用的辅助工具都支持最新的标准,因此许多教程推荐使用<main role="main">的写法来同时兼容两种标准。W3C的标准不鼓励在已经含有隐式语义的情况下使用role属性,因为两者语义冲突的情况下可能导致无法预计的表现。

区分同类型的 Landmark

有时候页面中可能会有多个导航栏,分别有不同的作用。比如一个电商网站有一个主导航来跳转到购物车、收藏夹等不同的页面;还有一个产品导航来跳转到电子产品、婴儿产品。如何对两者进行区分呢,这里需要使用aria-label或者aria-labelledby属性。

<nav aria-label="主导航"> <ul> <li>主页</li> <li>购物车</li> <li>收藏夹</li> </ul></div> <nav aria-label="产品导航"> <ul> <li>婴儿产品</li> <li>电子产品</li> <li>体育产品</li> </ul></div>

这样读屏软件会分别生成以下两个链接 导航,主导航 导航,产品导航

 

这样就将不同的landmark区分开了。

使用读屏软件读取 Landmark

为了更好地理解landmark,我尝试使用读屏软件来测试网页上的landmark。这里我使用的是Windows系统自带的讲述人。

按下Caps Lock + F5来显示网页中所有的landmark。

按下Caps Lock + N,可以看到讲述人光标移动到了网页的主要内容部分。

使用D或Shift + D可以在landmark间切换,同时会朗读出每个landmark的信息。

这里可以看到有一个search landmark,它在banner landmark的内部,这就是landmark嵌套的情况。对于landmark嵌套有一系列的规则,感兴趣的读者可以自己了解。

总结

和单词的原意一样,landmark就像是一个网页的许多个“入口”或“地标”。通过landmark标注网页结构的信息,可以帮助视力障碍者通过读屏软件了解网页的结构,并迅速到达需要的部分。

然而正如并非所有的读屏软件都支持HTML5 Landmark一样,并非所有视力障碍者都了解landmark的概念并知道如何使用landmark。因此提供传统的跳转链接来跳过导航直接跳转到内容仍然是有必要的。

以上就是浅析HTML5 Landmark的详细内容,更多关于HTML5 Landmark的资料请关注真格学网其它相关文章!

认真努力的时间总是过的很2113快,来千锋武汉5261HTML5培训学习的时间已经一月有余了,4102一阶段的HTML、CSS顺利学完。紧1653张、忙碌的第二阶段正在进行,在千锋的日子里,每一天都是忙碌的,学习着无边无际的代码,从早上到半夜,都是我们忙碌的身影。你也许会问,是真的兴趣所在而乐在其中吗,不完全是因为兴趣,因为只有你走出校门步入社会,你才会发现,理想只是一种信念的支撑,在赤裸裸的社会面前,理想是多么的不堪一击。在这一个月中,让我了解了HTML中最基础,也是最重要的三大知识点,居中、定位、以及浮动的使用。居中虽然是很基础的知识点,但一点都不简单,居中的方法很多,正因为如此,很多时候不知道什么时候用哪中居中,并受很多因素的影响,使得居中无效。1、在左右居中时,然而未知宽度,可以把元素转化成inline-block元素,再使用text-align实现左右居中。text-align不能让浮动元素居中,可以让行内元素和行内块元素居中。2、用margin居中时,需要知道宽度,而且还是块级元素。3、要想一个浮动元素居中,需要知道宽度,可以在父元素加一个盒子,再使用定位居中。4、在上下居中,已知高度的情况时,可以使用vertical-align让一个行内元素居中,5、line-hight只适用于情况比较简单的单行文本居中,将line-height设置与元素高度同高。6、在使用定位居中时,上下左右都为0,宽度和高度必须写,没写就会铺满相对父元素。第一阶段刚考完试,一阶段需要背的东西多,在熟记的基础上还是要多写写页面,学会其实不难的。但是我觉得千锋武汉HTML5培训一阶段的知识点比较繁杂,要学会归纳整理,分类记忆,如果长时间不用的话很容易忘记,隔一段时间应该回过头来翻翻笔记,回顾回顾,不要让你的记忆曲线一直下降,学新忘旧不可取,不能小猴子掰玉米内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 浅析html5 landmark
  • 详解html5中css外观属性
  • 详解如何在登录过期后跳出ifram框架
  • html5中input输入框默认提示文字向左向右移动的示例代码
  • html5输入框下拉菜单功能的示例代码
  • boostrap modal 闪现问题的解决方法
  • html5 seo优化的一些建议
  • amaze ui 文件选择域的示例代码
  • h5封装下拉刷新
  • amazeui页面分析之登录页面的示例代码
  • 浅谈参加html5培训后的几点心得体验
  • 如何深入学习Html5?
  • 如何探索独特的HTML5渲染方法从而优化层
  • 学习HTML5的难点是什么?
  • 浅析HTML5在哪几个方面如何打败FLASH
  • 谈谈你对html5的看法。以及html5未来的发展前景
  • 学习HTML5和css3 有什么好的教程
  • html5网页用什么编写最好呢?还有html5教程也要
  • 请教一下怎样下载html5视频,我想通过html视频教程...
  • 关于html5入门学习的一些问题
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html5html5boostrap modal 闪现问题的解决方法amazeui页面分析之登录页面的示例代码html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧css 如何让背景图片拉伸填充避免重复显示html5 input placeholder 颜色修改示例基于第一个phonegap(cordova)的应用详解 html5配合css3实现带提示文字的输入框(摆脱js)html5定位获取当前位置并在百度地图上显示将html5 canvas的内容保存为图片借助todataurl实现html5中如何显示视频呢 html5视频播放demo让ie支持html5的方法微信浏览器取消缓存的方法html5的存储方式sessionstorage和localstorage详解浅析html5 landmark详解html5中css外观属性详解如何在登录过期后跳出ifram框架html5中input输入框默认提示文字向左向右移动的示例代html5输入框下拉菜单功能的示例代码boostrap modal 闪现问题的解决方法html5 seo优化的一些建议amaze ui 文件选择域的示例代码h5封装下拉刷新amazeui页面分析之登录页面的示例代码
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved