html5

表单简介 　　Form表单主要用于用户与Web应用程序进行数据的交互，它允许用户将数据发给web应用程序，网页也可以拦截数据的发送以便自己使用。form通常由一到多个表单元素组成，这些表单元素是单行/多行文本框，下拉菜单，按钮，复选框，单选按钮，时间表单元素时 一般要配合label标签，用于描述其目的。其可用属性如下。 　　　　 action　　 用于处理表单信息的应用程序的地址。 　　　　 method 　　　浏览器用来提交表单的HTTP方法。 　　　　　　get 对应于Http协议的GET方法，表单数据被附加在uri上，使用"?"分隔 　　　　　　post 对应于Http协议的POST方法，表单数据包含在HTTP协议的请求报文的体部。 　　　　name 　　设定表单的名称 　　　　target 　　表示浏览器接收到form的提交信息后在哪里显示回应。 　　　　　　 _self，_blank，_parent，_top这些值和超链接的相同 表单数据的内容类型 　　通过enctype属性设定表单数据的内容类型 　　　　1. application/x-www-form-urlencoded 　　　　　　在发送前编码所有字符（默认）使用到的编码方式： 　　　　　　1）控件的名称和值都被转义，空白字符使用【+】替换，保留的字符一般都是用来实现特定的目的，例如（: / ? ; @ = &

什么都不说，先上总结的图~ Selectors API(选择符API) querySelector()方法 接收一个css选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null． //取得 body 元素 var body = document.querySelector( "body"); //取得 ID 为"myDiv"的元素 var myDiv = document.querySelector( "#myDiv"); //取得类为"selected"的第一个元素 var selected = document.querySelector( ".selected"); //取得类为"button"的第一个图像元素 var img = document.body.querySelector( "img.button"); 通过Document类型调用querySelector()时，会在文档元素的范围内查找匹配的元素 通过Element类型调用querySelector()时，只会在该元素后代元素的范围内查找匹配的元素． 如果传入不被支持的css选择符，querySelector()会抛出错误． querySelectorAll()方法 querySelectorAll()参数也是一个CSS选择符，返回的是所匹配的元素而不是仅仅一个元素

阅读目录 一、head内常用标签 二、 HTML语义化 三、 字符实体 四、 h系列标签 五、 p标签 六、 img标签 七、 a标签 八、 列表标签 九、 table标签 十、 form标签 一、 head内常用标签 1、meta相关 #1、指定字符集 <meta charset="gbk"> #2、页面描述 <meta name="Description" content="具体描述。。。"> #3、关键字：有助于搜索引擎SEC优化，再怎么优化也抵不过竞价排名 <meta name="Keywords" content="网易，邮箱，游戏，新闻"> #4、3秒后跳转 <meta http-equiv="refresh" content="3,http://www.baidu.com"> #5、三秒刷新 <meta http-equiv="refresh" content="3"> 2、非meta标签 #1、标题 <title>百度一下，你就知道</title> #2、网站的图标 <link rel="icon" href="https://www.baidu.com/favicon.ico"> #3、定义内部样式 <style></style> #4、引入外部样式文件 <link rel="stylesheet" href="mystyle.css"> #5

内容目录 使用canvas绘制弧线 使用canvas绘制圆形 在html5中， CanvasRenderingContext2D 对象也提供了专门用于绘制圆形或弧线的方法，请参考以下属性和方法介绍： arc(x, y, radius, startRad, endRad, anticlockwise) 在canvas画布上绘制以坐标点 (x,y) 为圆心、半径为 radius 的圆上的一段弧线。这段弧线的起始弧度是 startRad ，结束弧度是 endRad 。这里的弧度是以x轴正方向(时钟三点钟)为基准、进行顺时针旋转的角度来计算的。 anticlockwise 表示是以逆时针方向还是顺时针方向开始绘制，如果为 true 则表示逆时针，如果为 false 则表示顺时针。 anticlockwise 参数是可选的，默认为 false ，即顺时针。 arcTo(x1, y1, x2, y2, radius) 这个方法将利用当前端点、端点1 (x1,y1) 和端点2 (x2,y2) 这三个点所形成的夹角，然后绘制一段与夹角的两边相切并且半径为 radius 的圆上的弧线。一般情况下，绘制弧线的开始位置是当前端点，结束位置是端点2，并且弧线绘制的方向就是连接这两个端点的最短圆弧的方向。此外，如果当前端点不在所指定的圆上，本方法还将绘制一条从当前端点到弧线起点的直线。 由于详细介绍

第1章 课程介绍【说说面试的那些事儿】 本章会出几个面试题，分析每道题目设计的知识点，然后总结出一个完整的知识体系。让我们开始 “题目->知识点->解题” 的快乐之旅吧。 第2章 JS基础-变量类型和计算【不会变量，别说你会JS】 本章介绍变量的类型和计算的知识点和题目，包括值类型和引用类型区别，类型判断，深拷贝等。变量和类型是一个任何一门语言的基础，不了解的话，会被认为是 JS 语法不过关。 第3章 JS基础-原型和原型链【三座大山之一，必考！！！】 本章介绍原型、原型链和 class 相关的知识点和题目。包括 class ，继承，原型，原型链，instanceof。原型是“JS 三座大山”之一，原型和原型链也是必考知识点。 第4章 JS基础-作用域和闭包【三座大山之二，不会闭包，基本不会通过】 本章介绍作用域和闭包的知识点和题目。包括作用域，自由变量，闭包，this 等部分。作用域是“JS 三座大山”之二，不知道闭包的话，面试通过概率不大。 第5章 JS基础-异步【三座大山之三，必考！！！】 本章介绍异步的知识点和题目。包括异步和同步的区别，异步应用场景，以及 Promise 。异步是“JS 三座大山”之三，所有公司的 JS 面试，100% 会考察异步和 Promise 。 第6章 JS-Web-API-DOM【学会DOM，才能具备网页开发的基础】 本章介绍 DOM

一、初始化项目 1、下载模板 进入github中 https://github.com/tastejs/todomvc-app-template ，并且在命令行将其clone下来 git clone https://github.com/tastejs/todomvc-app-template.git 2、安装依赖 进入项目目录中安装依赖 npm install 3、引入vue.js文件 首先在命令行中安装vue npm install vue 然后再index.html中引入 然后再app.js文件中写入相应的逻辑代码 二、实现功能 1、数据列表渲染功能 1.1 功能分析 有数据 每一个数据对象： { id: 1 , content: '' , complated: '' # 表示是否已经完成的任务true（false） } 并且每一个数据对象有三个状态： 　　　　　　　　　　　　未完成（没有样式） 　　　　　　　　　　　　已完成（.completed ） 　　　　　　　　　　　　编辑中( .editing ) 无数据 输入框下面的部分应该隐藏起来 1.2 实现 创建一个数据源 items:[ {id: 1,content:'dddd',completed: false }, {id: 2,content:'aaaa',completed: false }, {id: 3

页面跳转反显（点击项，点击table滚动的位置，搜索条件，分页回显） 点击table tr项后，页面跳转到下级页面，返回回显搜索条件、当前页码、并将点击项select选中、滚动条也被记录回显跳转时滚动的位置 思路： 1.页面临时缓存我选择使用sessionStorage，点击tr行将搜索条件和页码，点击行的id进行存储； setSessionStore (name, content) { if (!name) return if (typeof content !== 'string') { content = JSON.stringify(content) } window.sessionStorage.setItem(name, content) }, getSessionStore (name) { if (!name) return; var content = window.sessionStorage.getItem(name); if (typeof content == 'string') { content = JSON.parse(content) } return content; }, removeSessionStore (name) { if (!name) return return window.sessionStorage.removeItem

browserHistory是使用React Router的应用推荐的history，它使用浏览器重的History API用于处理URl 可以通过设置webpack.config.js 中的devServer，设置如下 devServer: { historyApiFallback: { index: 'src/index.html' }, } 实际开发用browserHistory而不用hashHostory（可以直接用，不用在服务器配置）： browserHistory 其实使用的是 HTML5 的 History API ，浏览器提供相应的接口来修改浏览器的历史记录；而 hashHistory 是通过改变地址后面的 hash 来改变浏览器的历史记录； History API 提供了 pushState() 和 replaceState() 方法来增加或替换历史记录。而 hash 没有相应的方法，所以并没有替换历史记录的功能。但 react-router 通过 polyfill 实现了此功能，具体实现没有看，好像是使用 sessionStorage。 另一个原因是 hash 部分并不会被浏览器发送到服务端，也就是说不管是请求 http://domain.com/index.html#foo 还是 http://domain.com/index.html#bar

2019/7/16 字节跳动文娱 凉面 一面： （1）Vue和Angular 有什么区别？ 他们的双向绑定原理 观察者模式有哪些应用？我说的是事件监听 Vue组件之间的传值，我说的同级之间用Vuex状态管理，还有一个是EventBus？ （2）PC端的浏览器，让一个块元素水平垂直居中于浏览器窗口。 fixed position定位有哪些？这里新增了一个定位是： sticky （3）为什么块级元素在不同的浏览器之间显示会不同？（盒模型） （2）判断数据类型有哪几种方式？基本数据类型与复杂数据类型的区别 （3）隐式类型转换 （4）数组去重的方法 注意set结构怎么写 set与数组的区别 （5）js写快速排序以及时间复杂度怎么算的 （6）TCP与UDP的区别，有哪些应用 （7）计算机网络中的五层和七层，都有哪些应用。 一面完了之后直接过了几分钟二面 自我介绍以及项目经历； （1）了解rem吗？rem的根元素设置的font-size是多大 ？？？？？ （2）跨域知道吗？为什么会出现跨域？jsonp用callback参数包裹数据会出现什么问题？代理的方式是怎么实现的？ （3）继承怎么实现？ （4）深拷贝 （5）有序数组m与有序数组n，要求将两个数组concat成一个有序数组，时间复杂度为O（m+n） （6）实现一个DateParser，要求var timestamp = 2019-07-14

答案： 1、Vue 应用运行时性能优化措施 （1）引入生产环境的 Vue 文件 （2）使用单文件组件预编译模板 （3）提取组件的 CSS 到单独到文件 （4）利用Object.freeze()提升性能 （5）扁平化 Store 数据结构 （6）合理使用持久化 Store 数据 （7）组件懒加载 2、Vue 应用加载性能优化措施 （1）服务端渲染 / 预渲染 （2）组件懒加载 得益于 Vue 的 响应式系统 和 虚拟 DOM 系统 ，Vue 在渲染组件的过程中能自动追踪数据的依赖，并精确知晓数据更新的时候哪个组件需要重新渲染，渲染之后也会经过虚拟 DOM diff 之后才会真正更新到 DOM 上，Vue 应用的开发者 一般不需要 做额外的优化工作。 但在实践中仍然有可能遇到性能问题，下面会介绍一些定位分析 Vue 应用性能问题的方式及一些优化的建议。 整体内容由三部分组成： 1、如何定位 Vue 应用性能问题 2、Vue 应用运行时性能优化建议 3、Vue 应用加载性能优化建议 1. 如何定位 Vue 应用性能问题 Vue 应用的性能问题可以分为两个部分，第一部分是运行时性能问题，第二部分是加载性能问题。 和其他 web 应用一样，定位 Vue 应用性能问题最好的工具是 Chrome Devtool，通过 Performance 工具可以用来录制一段时间的 CPU 占用、内存占用