web前端

　　文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。这里我们主要是讲用javascript操作DOM。 1. 查找元素 1.1 直接查找 document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合 1.2 间接查找 parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild //

目前web产品交互越来越复杂，用户使用体验和网站前端性能优化这些都得靠web前端工程师去做,web前端工程师是设计加开发的综合体，web前端工程师是在开发人员中最直接面向产品，面向用户的设计人员，一个开发团队的成果是要靠web前端工程师去展现，因为用户不会去关心后台的处理有多么强大;在设计人员中web前端工程师是直接面向开发人员的设计人员，向开发人员以一种计算机语言的方式传递其设计理念，web前端工程师在整个团队中是很关键的。 　　Web前端工程师要掌握的基础知识和技能包括： 　　1、网页的基本结构(HTML + CSS) 　　HTML是一种标记语言，而不是编程语言，最基本是标签是和，CSS是用来定义如何显示HTML元素的。对HTML+CSS很容易入门，但很多人不够深入，举几个例子： 　　签是作什么用的?margin-left与left有什么区别，应该在什么情况下使用?再出个DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度。如果这些问题你目前还不知道，对那个布局问题几分钟内不能解决，说明你对HTML+CSS还不够深入。 　　2、浏览器是怎么展现网页的 　　不同内核的浏览器对网页的渲染是不一样的，目前浏览器都有客户端调试工具，下图展现一个google首页在IE9下的加载细节： 　

我给你解释一下web前端工作是做啥的，Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序（也就是浏览器端）的开发，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。 个人背景： 首先我的前端是自学的，而那个时候并没有前端的称呼，那个时候叫网页制作，所以我们当时是学Java，所谓的web前端其实就是顺带学的，并没啥难度，我学编程是用了大概一年的时间，因为当时在学校时间还是比较多的，所以我建议大家不要想着速成，学任何一门手艺都需要一个过程，这是我个人的建议，而且根据我目前对于行业的了解，速成找工作还是比较困难的，就培训来说，很多人培训出来都找不到工作，并不是培训教的不好，实在时间太短，只有四个月时间。 几点建议： 1.作为一个初学者，你必须明确系统的学习方案，我建议一定有一个指导的人，全靠自己学，放弃的几率非常大，在你对于web前端还没有任何概念的时候，需要一个人领进门，之后就都靠自己专研，第一步就是确定web前端都需要哪些内容，并且在多少时间内学完，建议时间6个月保底。 2.视频为主，书为辅。很多初学者在学习前端的时候非常喜欢去买书，但是最后的结果是什么？看来看去什么都不会写，所以在这里小编给大家提醒

打开 Chrome （浏览器）开发者工具，如下图。 方法1：在右上角 Chrome（浏览器） 菜单 > 更多工具 > 开发者工具 方法2：F12 键 可以看到一共分为10个面板，其中主要有比较常用、基础的四个面板： Elements （元素面板）、 Console （控制台面板）、 Sources （源代码面板）、 Network （网络面板） 其他面板，如： Performance（性能面板）、 Memory（内存面板）、 Application（应用面板）、 Security（安全面板） 等。 为了更加 直观入门 Devtools工具 ，新建一个txt文件，写入如下代码，并修改文件后缀为 .html 打开html，并按下F12键（调试出开发者工具Devtools），菜单面板，调整下布局 .txt 文件转换为 .html 的结果 Elements （元素面板），如下图所示 （1）可以看到 Element面板 主要用来：检查和调试页面、样式；编辑 DOM。即针对当前页面的html和css。 （2） Console （控制台面板）主要输出 JavaScript 控制的信息；命令行交互。 （3） Sources （源代码面板）可以 设置断点来调试 JavaScript。 （4） Network （网络面板）可以看到请求和下载的资源文件；加载资源时间轴 等等 以上

现在，几乎整个互联网行业都缺前端工程师，不仅在刚起步的创业公司，对上市公司乃至巨头这个问题也一样存在。 据统计，国外的前端开发人员和后端开发人员比例约1:1，但是在国内比例却在1:3以下，Web前端开发职位人才缺口巨大。前端工程师的发展之路十分有“钱”景。 每天，HR 群都有人在吐槽招不到前端工程师。实话说对这些需求，高级招聘人员也无能为力，因为在供不应求的前端招聘市场上，优秀的前端工程师才是有话语权的那一方。 但是，市场上优秀的前端工程师却相对较少，全世界范围看都是个难题。那造成优秀Web前端工程师稀少的原因有哪些呢？ 大量糟糕Web前端工程师的存在，扰乱了市场。由于Web前端工程师的入门门槛非常低，JS、CSS、HTML并不是很难入门掌握的语言，似乎只要花一点时间，谁都可以通过网上教程和书本学会它，Web前端工程师市场就是被这些浅尝辄止的家伙搞坏的。 糟糕的Web前端工程师是这样做事的： 1、滥用JS库，因为他们实际上并不了JS的内部(e.g.一切都用jQuery)； 2、滥用JS插件，抄别人的代码哪怕自己根本读不懂(e.g.jQuery.doParallaxPls.js)； 3、给Web应用程序添加CSS框架，却只用到CSS/JS的5%，没有看到任何的需求、设计或者比较和评价； 4、认为只要添加了CSS框架，网站就可以“有求必应”； 5、一边在说着“响应式Web设计”

1.canvas中绘制的图形，坐标都是相对于canvas元素的左上角坐标，canvas左上角为（0，0）坐标点。如下图中，中绘制了个矩形，该矩形左上角相对于 canvas 的左边距为 W2 ,上边距为 H2，则该矩形左上角顶点坐标为（W2,H2）。 2.使用 rotate 旋转坐标时，默认以 canvas 的 左上角为中心点。例如要使绘制的矩形绕矩形中心点旋转，如果直接使用 var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.rotate（30） 表示以canvas左上角为原点旋转30度，在此坐标轴上绘制出的矩形如图所示。 canvas原始坐标轴 直接旋转的坐标轴 如果要转换中心点，需要先使用 translate（W2+R/2,H2+R/2） 转换中心点，然后在该中心点使用 rotate 旋转坐标，最后在旋转后的坐标系上，绘制图形。 canvas转移坐标轴 旋转坐标轴 来源： CSDN 作者： 软件硬化工程师 链接： https://blog.csdn.net/mrbbcool/article/details/104778496

Web缓存是指一个Web资源（如HTML页面、图片、JS、数据等）存在于Web服务器和客户端（浏览器）之间的副本。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。但如何理解浏览器缓存呢？接下来的我就给大家简单介绍一下。 Web缓存有什么作用？ 1、减少网络带宽消耗。无论对于网站运营者或者用户，带宽都代表着金钱，过多的带宽消耗，只会便宜了网络运营商。当Web缓存副本被使用时，只会产生极小的网络流量，可以有效的降低运营成本。 2、降低服务器压力。给网络资源设定有效期之后，用户可以重复使用本地的缓存，减少对源服务器的请求，间接降低服务器的压力。同时，搜索引擎的爬虫机器人也能根据过期机制降低爬取的频率，也能有效降低服务器的压力。 3、减少网络延迟，加快页面打开速度。带宽对于个人网站运营者来说是十分重要，而对于大型的互联网公司来说，可能有时因为钱多而真的不在乎。那Web缓存还有作用吗？答案是肯定的，对于最终用户，缓存的使用能够明显加快页面打开速度，达到更好的体验。 浏览器端的缓存规则 对于浏览器端的缓存来讲，这些规则是在HTTP协议头和HTML页面的Meta标签中定义的。他们分别从新鲜度和校验值两个维度来规定浏览器是直接使用缓存中的副本，还是需要去源服务器获取更新的版本。 1）新鲜度（过期机制）：也就是缓存副本有效期

2020年还能转行学web前端开发吗？这是很多人在网络上搜索的问题。及其原因，还是因为目前网络上充斥着前端饱和的说法，这让不少人怀疑还能不能转行web前端，目前程序员行业前景很好，而web前端的前景也不差。 不否认初级前端程序员供给泛滥，待遇恶化，发展遇冷。但是当你坚持到中高级web前端工程师时，就会越来越吃香了。这是因为前端技术栈的不断更新，效率提高，同样的前端人数，能完成比以前更多的职责范围。在不少企业，1个优秀的前端工程师就能搞定Web和移动端的开发，甚至负责一部分后端。因此只要你能忍受住寂寞，努力磨砺你的技术，那么在步入中高端web前端开发工程师后，就业薪资肯定是可以达到你的预期的。 接下来，小编来跟大家分享一下2020年Web前端的发展趋势如何?熟悉web的小伙伴们都了解，在2018年是前端技术的发展相对稳定的一年，就前端主流技术框架的发展而言，前几年里发展极快，在填补原有技术框架空白和不足的同时也渐渐趋于成熟。 未来前端在已经趋向成熟的技术方向上面将会慢慢稳定下来，并进入迭代优化阶段，例如语言标准、前端框架等。 那么2020年Web前端的发展趋势如何?让我们一起来看一看 1.新规范的更新与稳定 前端新标准和草案在不断更新，HTML、CSS、Javascript标准也在渐渐完善，尽管这些新的规范最终会淘汰旧的规范，新的项目也会以最新的标准作为开发依据，但要完全废弃旧规范

HTML与CSS 初级 《Head First HTML与CSS(第2版)》豆瓣评分：9.3 入门经典，初始获得信息的好途径。帮助读者逐步构件小的知识点，再结合一本整体的类别逻辑型的书，就可以把所有基础知识学清楚了。 中级 《CSS权威指南(第三版)》 豆瓣评分 8.5 本书适合自学过 CSS 的人但希望全面了解 CSS 的人阅读。由浅入深，全面易懂，不愧为权威指南。虽然内容有点儿老，但依然能够满足学习的需求。希望出版社能引进更新的版本。 《css禅意花园》豆瓣评分 8.4 这本书的作者是世界著名的网站设计师，书中的范例来自网站设计领域最著名的网站——CSS Zen Garden（CSS禅意花园）。 书籍较老，但理念却很经典。 高级 《CSS揭秘》豆瓣评分 9.4 多年难得一见的重磅 CSS 书籍，看得很过瘾，CSS 进阶必读。 JavaScript 初级 《javascript语言精粹》豆瓣评分9.1 本书通过对JavaScript语言的分析，甄别出好的和坏的特性，从而提取出相对这门语言的整体而言具有更好的可靠性、可读性和可维护性的JavaScript的子集，以便你能用它创建真正可扩展的和高效的代码。 雅虎资深JavaScript架构师Douglas Crockford倾力之作。 向读者介绍如何运用JavaScript创建真正可扩展的和高效的代码。 《JavaScript

第1章 HTML 1.1 网页结构 1.2 网页编辑与显示 1.3 注释 第2章 HTML文本与图像 2.1 头部元素 2.2 文本 2.3 样式 2.4 <div>标签与<span>标签 2.5 超链接 2.6 图像 2.7 制作图文混排新闻界面 2.8 制作购物页面上的商品展示框 第3章 HTML列表 3.1 无序列表与有序列表 3.2 通过CSS设置列表顶项目符号及制作导航栏 3.3 列表嵌套 3.4 自定义列表 第4章 HTML表格 4.1 创建 4.2 完善 第5章 HTML表单 5.1 创建 5.2 实例 第6章 HTML5 6.1 结构化标签 6.2 多媒体 6.3 表单input类型 第7章 CSS基础 7.1 HTML引用CSS的方式 7.2 CSS选择器 7.3 伪类 第8章 CSS盒子模型 8.1 概念 8.2 边框border 8.3 内边距padding 8.4 外边距margin 8.5 元素宽度与高度设置 8.6 利用开发者工具查看元素盒子模型 第9章 CSS字体与文本 9.1 字体 9.2 文本 9.3 背景 第10章 CSS列表与表格 10.1 列表 10.2 表格 10.3 display（显示）与visibility（可见性） 第11章 CSS定位 11.1 position定位 11.2 浮动 第12章 JavaScript基础 12.1