web前端怎么开发epg 初学者如何迅速学习web前端开发？

小编今天整理了一些web前端怎么开发epg 初学者如何迅速学习web前端开发？相关内容，希望能够帮到大家。

电视EPG（WEB）页面上的焦点导航方案

使用HTML、JS等相关Web前端技术基于Android机顶盒开发电视EPG页面。由于电视端使用遥控器进行焦点控制，我们需要对焦点导航进行处理，使用户进行便捷 的交互。

在Android开发中有一个默认的导航规则，开发者设置好相关属性之后可以通过遥控器导航。在操作遥控器后，它会使当前元素的目标方向上的最近元素获取焦点。web没有这样的规则，我们需要建立一个类似的规则。对当前获得焦点元素在使用遥控器操作（上、下、左、右键）时，使当前元素在上、下、左、右方向对应的元素获得焦点。

tabIndex属性可以设置键盘中的TAB键在页面元素中的移动顺序,即焦点的顺序。默认情况下，普通元素无法获取焦点，只有链接、表单等元素可以获取焦点。所以普通元素需要设置tabindex属性，再使用foucs()方法即可。当tabindex的值 >= 0时，可以通过Tab键获取焦点，而tabindex = -1时Tab键不能获取焦点，只能通过JS获取。当tabindex的值不为-1的时候，使用遥控器操作时焦点获取位置不符合预期。

注：给元素添加样式 outline: none; 用于去除默认样式。

给需要获取焦点的元素都添加一个相同的类名，如 class="item"，将需要获取焦点的元素都筛选出来。

完成上诉步骤后，通过调用focus()方法给目标元素设置焦点。如：

通过 document.activeElement 可以得到当前界面正获得焦点的元素，十分重要，在建立导航规则后，我们需要通过该元素得到它在各个方向上对应的元素。

我们需要建立这样一个规则：当用户按左键时，由当前焦点元素的左边（合适）元素获取焦点。同理，按上、右、下键时，都有对应方向上合适的元素获得焦点。
原理：首先获取当前焦点元素的位置，在与页面中所有元素的位置进行比较，获取各个方向上最合适的元素。

可通过下面方法设置或修改，需和html中的class保持一致

以左方向为例

添加自定义属性：
nextLeftFocusId 当前元素 左 方向上指定的下一个焦点元素的id
nextUpFocusId 当前元素 上 方向上指定的下一个焦点元素的id
nextRightFocusId 当前元素 右 方向上指定的下一个焦点元素的id
nextDownFocusId 当前元素 下 方向上指定的下一个焦点元素的id

在HTML中这样设置：

当该元素获取焦点时，按上键由id为 "nav_item1" 的元素获取焦点，按右键由id为 "img4" 的元素获取焦点。具体实现如下：

在遍历计算之前提前返回。

当元素获取焦点时，我们需要改变它的显示样式，来表示它获取了焦点。

onfocus ：获得焦点
onblur：失去焦点
如：

再实现search_focus和search_blur两个方法，可以分别处理获得焦点和失去焦点的两种样式。

设置未获取焦点的正常状态样式：

设置获得焦点后的样式：

见：

什么是web前端开发？

Web前端开发就是创建Web页面、或者APP等前端界面呈现给用户的过程，通过HTML、CSS及JavaS等衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

前端开发需要学习的技术有：
1、掌握基本web前端开发技术：HTML、CSS、JavaScript、DOM、BOM、AJAX等，而且要了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug 。
2、必须掌握网站性能优化、SEO和服务器端开发技术的基础知识 。
3、必须学会运用各种web前端开发与测试工具进行辅助开发。
4、除了掌握技术层面的知识，还要掌握理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等 。
5、未来web前端开发工程师还要研究HTML5、web视觉设计、网站配色、网站交互设计模式等相关技术。

想要了解更多有关web前端的相关信息， 推荐咨询千锋教育 。千锋教育成立教研学科中心，推出贴近企业需求的线下技能培训课程。采用全程面授高品质、高体验培养模式，学科大纲紧跟企业需求，拥有国内一体化教学管理及学员服务，在职业教育发展道路上不断探索前行。

初学者如何迅速学习web前端开发？

学习web前端不怕没哟基础，就怕没有方向，推荐给你web前端学习的路线图：

阶段1.前端核心基础

HTML +_CSS核心、JavaScript基础语法、JavaScript面向对象、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 我爱编程网

web前端学习方向

这个学习的路线路你按照从上到下这个顺序学习就可以的，不管是报培训班还是自学，都是可以的，现在web前端还是有不错的视频，你可以根据自己的实际情况看看这些视频，希望对你有所帮助。

以上就是我爱编程网小编为大家带来的内容了，想要了解更多相关信息，请关注我爱编程网。