html5 | 易学教程

Web 前端自学，有哪些建议？

阅读更多关于 Web 前端自学，有哪些建议？

多年web前端从业者，说下这个问题首先，这个问题主要问：自学web前端技术，如果才能找到一份web前端的工作。按照现在的招聘标准来看，无论你去哪个公司面试，你只需要满足他们公司的需求就可以。目前企业招聘前端工程师的基本需求： 1.精通DIV+CSS网页框架布局的HTML代码编写，熟悉W3C标准； 2.使用HTML5/CSS3熟练地进行页面开发； 3.具备良好的前端架构分析能力与设计能力，与开发团队保持良好沟通； 4.精通各主流浏览器（IE6+、Firefox、Chrome、Safari）间的差异性，能快速定位和解决各种兼容难题； 5.熟悉JavaScript、Ajax、Flash、JQuery、ExtJS等各种Web前端开发技术，具备一定的跨浏览器开发经验； 6.熟悉Vue，react 那么对于想自学web前端的应该如何掌握上述相关技术？一：首先，有这样的一种情况很常见，对于想自学web前端的人来说，他们大多数都是非常盲目的，不知道自己改如何入手，很多人在网上找一些视频，然后疯狂的过视频，很快就把一块内容都学完，他们理解的学完了就是视频看完了，但是让他们动手去做东西却做不出来，而我的理解学完了就是自己能写出东西，所以对于初学者来说一定不能盲目，要有自己的规划，不然就是浪费时间白忙活。二：既然是学习专业技术，我个人的建议是，一定要有一个能指导你的人，不能都靠自己闭门造车

报表工具怎样适应移动端？

阅读更多关于报表工具怎样适应移动端？

报表在移动端展示会跟 PC 端有所不同，主要是因为终端分辨率的差异。我们在使用报表工具开发报表时如何才能适应移动端展示呢？是否要挑选一个专门适合移动端的报表工具呢？其实不必，因为当前几乎所有报表工具都天然支持移动端。为什么这么说呢？稍微解释下就清楚了。前面我们说过 PC 端和移动端的差异是分辨率不同，但两者要显示的报表其实都一样，本质都是 HTML。那么有没有一种 HTML 技术能够适配多种终端呢？当然有，那就是 HTML5。使用 H5 绘制的报表可以天然运行在不同种类的终端上。而现在绝大多数报表工具都支持 H5，自然也就都能适配移动端了。所以，我们说专门为移动端去选择报表工具是不必要的，所有报表工具都天然支持。当然，我们也知道，报表的特点是可能比较宽（列多），也可能比较高（行多），或者二者兼有，如果采用等比例缩放的话在不大的移动端屏幕上很可能看不清，至少是不太美观。这时把报表工具生成的适应 PC 浏览器的 HTML 呈现出来，效果并不太好。有必要重新为手机再设计合理的布局，这件事仍然可以用报表工具做出来，只是一个报表常常要做两遍（PC 端和移动端各做一遍），甚至更多遍（移动端的种类比较多，还有横屏竖屏）。为了避免重复开发，对于报表样式不是非常复杂的情况，很多报表工具都能提供一定的自适应机制。所谓自适应机制，顾名思义，就是让报表布局可以自动适应屏幕的大小，具体来讲

HTML学习笔记

阅读更多关于 HTML学习笔记

什么是HTML HTML Hyper Text Markup Landuage（超文本标记语言）超文本包括：文字、图片、音频、视频、动画等 HTML5的优势世界知名浏览器厂商对HTML5的支持微软 Google 苹果 Opera Mozilla 市场的需求跨平台 W3C标准 W3C World Wide Web Consortium（万维网联盟）成立于1994，Web技术领域最权威和具影响力的国际中立性技术标准机构 http://www.w3.org/ http://www.chinaw3c.org/ W3C标准包括结构化标准语言（HTML、XML）表现标准语言（CSS）行为标准（DOM、ECMAScript） HTML基本结构 <body>、</body>等成对的标签分别叫做开放标签和闭合标签单独呈现的标签（空元素），如<hr/> 意味用 / 来关闭空元素网页基本信息 DOCTYPE声明 title 标签 meta 标签  <!DOCTYPE html> <html lang="en">  <head>   <meta

2020大厂web前端面试常见问题总结

阅读更多关于 2020大厂web前端面试常见问题总结

本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题。通过对本篇知识的整理以及经验的总结，希望能帮到更多的前端面试者。 1.web前端项目的结构是怎样的？文件有哪些命名规范？项目结构规范页面文件：以项目名命名，例如：shop js文件：命名为js css文件：命名为css 图片文件：命名为images 数据文件：命名为data 文件存储规范：按项目模块分类存储，例如：用户信息管理页面文件存放： shop/userinfo/userlist.html js文件：js/userinfo/userlist.js css样式：css/userinfo/userlist.css 注意：图片的分类一般按照功能作用划分，比如：小图标、动画图片动画图片：images/gif/… 图标库：images/flags/… 项目文件命名规范页面/js/css文件规范：项目名称-模块名称-页面名称，例如：shop-user-index.html用户模块的首页。注意：js一般会包含公共js 习惯命名commo.js；css样式会包含公共css，习惯命名为 common.css。 2.谈谈浏览器的兼容性这个问题是非常抽象的，越是抽象的问题越能表现出我们的表达能力，而面试官就喜欢根据你的回答来追问，不断地打断你的思路，这个时候不要慌，一定要坚信自己。回答思路

直播间中的用户交互技术点

阅读更多关于直播间中的用户交互技术点

对于直播中的用户交互大致可以分为：送礼物发表评论或者弹幕对于送礼物，在 H5 端可以利用 DOM 和 CSS3 实现送礼物逻辑和一些特殊的礼物动画，实现技术难点不大。对于弹幕来说，要稍微复杂一些，可能需要关注以下几点：弹幕实时性，可以利用 webscoket 来实时发送和接收新的弹幕并渲染出来。对于不支持 webscoket 的浏览器来说，只能降级为长轮询或者前端定时器发送请求来获取实时弹幕。弹幕渲染时的动画和碰撞检测 ( 即弹幕不重叠 ) 等等 Html5 直播聊天室组件该组件主要适用于基于 Html5 的 web 大群互动直播场景。具备如下特点 : 1 ）支持匿名身份入群，粉丝与主播进行亲密互动 2 ）支持多人聊天，主播同一个帐号多标签页收发消息，粉丝再多也不用愁 3 ）支持多种聊天方式，文本，表情，红包，点赞，想怎么互动就怎么互动 4 ）支持不同优先级消息的频率控制，一键在手，权利尽在掌握中 5 ）对互动直播场景进行了专门的优化，参与人数多，消息量再大也能从容应对前端技术点秒开时延流畅清晰度图玩智能科技为企业提供专业的直播技术支持，提供直播平台的二次开发服务，搭建更完善更稳定的直播系统，欢迎咨询www.toivan.com 来源： oschina 链接： https://my.oschina.net/u/4203900/blog/4286870

single-spa踩坑记

阅读更多关于 single-spa踩坑记

其实本来应该写个介绍的，但是我看到其他的文章写得很完善了，所以就来写写我在其中遇到的一些问题就好了。安装 single-spa 请看沉末的这篇文章。背景简单介绍下背景吧～为什么要用 single-spa 呢，是因为公司的项目需要拆项目了，这个时候就需要知道微前端的概念了，那么什么是微前端呢。微前端服务微前端架构是一种类似于微服务的架构，由ThoughtWorks 2016年提出，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。由此带来的变化是，这些前端应用可以独立运行、独立开发、独立部署。在项目中是运用 single-spa 去搭建微前端框架的，在搭建框架之前，我们需要知道两个知识点，什么是 single-spa 和 importmap 。 single-spa 而 single-spa 是一个用于前端微服务化的 JavaScript 前端解决方案。特点： (兼容各种技术栈)在同一个页面中使用多种技术框架(React, Vue, AngularJS, Angular, Ember等任意技术框架),并且不需要刷新页面. (无需重构现有代码)使用新的技术框架编写代码,现有项目中的代码无需重构. (更优的性能)每个独立模块的代码可做到按需加载,不浪费额外资源. 每个独立模块可独立运行. importmap

HTML入门2

阅读更多关于 HTML入门2

快速建结构方式： v ！ +tab html5的标签结构 v Meta 一、 Meta标签 1. 规范电脑编码格式（charset） <meta charset=”UTF-8 ” > 编码 Ascll 早期编码识别英文 Ansi 英文编码 Unicode 日文编码 Gbk 包含全部中文繁体 Gb2313 简单中文 Big5 繁体中文 Utf-8 通用字符集（现流行） 2. 关键字（ name） <meta name=”keywords ” content= ” 春，薄款，宽松，嘻哈 ” > 向搜索引擎说明你的网页的关键词 3. 网页描述（ name） <meta name= ” description ” content= ” 新东方英语公司，是一家 ...... ” > 4. 网页重定向（ http-equiv） <meta http-equiv= ” refresh ”content=”5;url=http://ww.mi.com”> 五秒后自动跳转到指定地址（小米官网）。二、 Link标签 1. 链接外部样式文件 <link rel =”stylesheet” href=”1.css“> 2. icon图标 <link rel =”icon” href=”jd.ico” 三、表格 1、展示数据，是对网页重构 (css+div）的一个有益补充 2、<table> <tr>

前端复习笔记(一)——HTML

阅读更多关于前端复习笔记(一)——HTML

前端复习(一)——HTML 起因:转专业的泪，期末复习，写这个只是方便复习的时候可以看看，没什么太大作用~ 基础 HTML不区分大小写每个标签都有 id 定义元素的唯一id style 规定元素的行内样式 title 描述元素的额外信息 class 为html定义一个或多个类名结构 <!DOCTYPE html> < html lang = " en " > < head > < meta charset = " utf-8 " > < title > 标题 </ title > ... </ head > < body > 主体 </ body > </ html > 头部声明 <!DOCTYPE> 声明必须在HTML 第一行,在 <html> 之前,作用是指示web浏览器关于页面使用哪个HTML版本进行编写，html5只有一种声明方式 <!DOCTYPE html> <meta charset="utf-8"> 对于中文网页需要使用，声明编码，否则会出现乱码 <meta name="keywords" content="xx,xx,"> 为搜索引擎大量定义关键词 <meta name="description" content="xxxx"> 为网站定义描述内容 <meta name="author" content="作者名" 定义网页作者 <meta http

SpringBoot中实现文件上传下载的三种解决方案(推荐)

阅读更多关于 SpringBoot中实现文件上传下载的三种解决方案(推荐)

之前仿造 uploadify 写了一个HTML5版的文件上传插件，没看过的朋友可以点此先看一下~得到了不少朋友的好评，我自己也用在了项目中，不论是用户头像上传，还是各种媒体文件的上传，以及各种个性的业务需求，都能得到满足。小小开心了一把。但无论插件再怎么灵活，也难以应付所有的需求，比如，你要上传一个2G的文件。以现在我们的网速，恐怕再快也得传半小时。要命的是，如果你在上传到90%的时候不小心关掉了浏览器，或者是手一抖摁了F5，完了，一切还得从头再来。这种用户体验简直太糟糕了。所以，断点续传就十分有必要了。什么是续传我就不解释了，用QQ传文件这么多年，大家都见过了。这里要说的是断点续传都有哪些技术要点。使用传统的表单提交文件或是HTML5的FormData都是将文件“整块”提交，服务端取到该文件后再进行转移、重命名等操作，因此，无法实时保存文件的已上传部分。而且在http协议下，我们无法保持浏览器与服务端的长连接，不能以文件流的形式来提交。所以要解决的问题具体来讲有以下几点：对上传的文件进行分割，每次只上传一小片。服务端接收到文件后追加到原来部分，最后合并成完整的文件。每次上传文件片前先获取已上传的文件大小，确定本次应切割的位置每次上传完成后更新已上传文件大小的记录标识客户端和服务端的文件，保证不会把A文件的内容追加到B文件上在参考了张鑫旭大哥的这篇文章后

jquery.validate.js实例演示

阅读更多关于 jquery.validate.js实例演示

validate是前端重要的交互手段，提升性能的同时更能提升用户操作体验，validate的实现大概有三种方式：HTML5部分支持，validate验证框架，手动写js或ajax调用接口。使用validate框架是非常方便的。这里提供一个validate的实例演示， http://cms.xlongwei.com/open/validate.html 。实例代码（演示页面也可以查看源代码）： <form action="/open/validate.html" method="post"> <label>用户名 identifier：</label><input name="identifier" value="$!params.get('identifier')" class="{required:true,remote:{url:'http://cms.xlongwei.com/open/validate.json',type:'post',data:{type:'identifier',value:function(){ return $('input[name=\'identifier\']').val(); }}}}"><br/> <label>银行卡号 bankCardNumber：</label><input name="bankCardNumber" value

订阅 html5