整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
面渲染的全过程
输入url后，先拿到html文件，html下载完以后会开始对它进行解析
html在解析的过程中，如果文本里有外部资源链接，比如css、js和img时，会立即启用其他线程下载这些静态资源。
特殊的是当遇到js文件的时候，html解析会停下来，等js文件下载结束并且执行完，再进行html执行。
在html解析的同时，解析器会把解析完的html转化成DOM对象，构建成DOM树。
当css下载完，css解析器开始对css解析，把css解析成css对象，把css组装起来，构建CSSOM树。
DOM和CSSOM树构建完毕，浏览器根据两棵树建一颗渲染树。
HTML
Hyper Text Markup Language 超文本标记语言
html5为什么只需要写<! DOCTYPE HTML>
答:这是w3c制定的规则,是文档类型声明,语义化说是告诉浏览器和其他开发者,这个文档使用的是html5标准。
2.html5新特性有哪些
答:header、footer、aside、nav、video、audio、canvas、localStorage、sessionStorage、cookie、output、datalist、keygen、data、time、email、url、search···
< img > 的 title 和 alt 有什么区别？
答： alt 是图片加载失败时，显示在网页上的替代文字；
title 是鼠标放上面时显示的文字。
这些都是表面上的区别，alt是img必要的属性，而title不是。
XHTML和HTML有什么区别
答:XHTML:
1)所有的标记都必须有一个相应的结束标记;
2)所有标签的元素和属性的名字都必须使用小写;
3)所有的XHTML标记都必须合理嵌套;
4)所有的属性都必须用引号""括起来;
5)XHTML文档必须拥有根元素。
如何在 html 页面上展示 < div> < /div> 这几个字符
答：使用忽略HTML标记< xmp>，
如：<p><xmp><div></div></xmp></p>
什么是渐进式渲染
答:指打开页面先加载首页显示内容;,之后再随着时间或者滚动页面进行后面的加载。
前端页面有哪三层构成,分别是什么?作用是什么?
结构标准:制作网页按照html标准结构写网页;
表现标准:用来美化网页CSS;
行为标准:用来实现网页中用户的动作处理JavaScript。
浏览器的内核有哪些
答:
Trident(IE内核):IE、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等;
Gecko(firefox):火狐浏览器
webkit(Safari):Apple
Blink:谷歌浏览器
我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。
什么是语义化的HTML
答:就是写出的HTML代码符合内容的结构,选择合适的标签,能够便于开发者阅读和写出更优雅的代码,比如页面结构写顶部用header标签,导航有nav标签等,同时也让浏览器的爬虫和机器更好的解析。
实体字符
CSS
Cascading Style Sheets 层叠样式表
特性
层叠性、继承性、优先级
块级元素
特点:块级独占一行;可以设置宽高;如果没设置宽度,那么其宽度等于父元素的宽度。
比如:div,p,ul,ol,dl,li,dd,h1-h6
转换:display:block;
行内元素
特点:都在一行显示,不能设置宽度和高度。
比如:a b em font i img input br label span small select textarea
转换:display:inline
行内块元素
特点:都在一行上显示,可以设置宽度和高度。
比如:
转换:display:inline-block;
选择器优先级
!important>行内样式>id选择器(#)>类选择器(class)>标签选择器>通配符选择器
CSS3新特性有哪些
答:颜色--RGBA、文字阴影--text-shadow、边框圆角--border-radius、边框阴影--box-shadow、盒子模型--box-sizing、设置背景图片的尺寸--background-size、渐变--linear-gradient、过渡动画--transition、媒体查询多栏布局、伸缩布局、transform:translate···
清除浮动的几种方式
1)父级div设置height;
2)结尾处加空div标签clear:both;
3)父级div定义伪类:after和zoom;
4)父级div定义overflow:hidden或者auto;
link和@import有什么区别
@import引用的css会等到页面被加载完毕后再加载，link在页面加载时会同时被加载。
link是html标签，无兼容问题。link方式的样式权重高于@import
transition和animation的区别
他们都是随时间改变元素的属性值，主要区别是transition需要触发一个事件才能改变属性，而animation不需触发任何事件就会随时间改变属性值。
meta viewport标签相关
<!DOCTYPE html> H5标准声明，使用 HTML5 doctype，不区分大小写 <head lang=”en”> 标准的 lang 属性写法 <meta charset=’utf-8′> 声明文档使用的字符编码,防乱码 <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> 优先使用 IE 最新版本和 Chrome <meta name=”description” content=”不超过150个字符”/> 页面描述 <meta name=”keywords” content=””/> 页面关键词 <meta name=”author” content=”name, email@gmail.com”/> 网页作者 <meta name=”robots” content=”index,follow”/> 搜索引擎抓取 <meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 为移动设备添加 viewport <meta name=”apple-mobile-web-app-title” content=”标题”> iOS 设备 begin <meta name=”apple-mobile-web-app-capable” content=”yes”/> 添加到主屏后的标题（iOS 6 新增） 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 <meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”> 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） <meta name=”apple-mobile-web-app-status-bar-style” content=”black”/> <meta name=”format-detection” content=”telphone=no, email=no”/> 设置苹果工具栏颜色 <meta name=”renderer” content=”webkit”> 启用360浏览器的极速模式(webkit) <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> 避免IE使用兼容模式 <meta http-equiv=”Cache-Control” content=”no-siteapp” /> 不让百度转码 <meta name=”HandheldFriendly” content=”true”> 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 <meta name=”MobileOptimized” content=”320″> 微软的老式浏览器 <meta name=”screen-orientation” content=”portrait”> uc强制竖屏 <meta name=”x5-orientation” content=”portrait”> QQ强制竖屏 <meta name=”full-screen” content=”yes”> UC强制全屏 <meta name=”x5-fullscreen” content=”true”> QQ强制全屏 <meta name=”browsermode” content=”application”> UC应用模式 <meta name=”x5-page-mode” content=”app”> QQ应用模式 <meta name=”msapplication-tap-highlight” content=”no”> windows phone 点击无高光 设置页面不缓存 <meta http-equiv=”pragma” content=”no-cache”> <meta http-equiv=”cache-control” content=”no-cache”> <meta http-equiv=”expires” content=”0″>
< meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
详细的描述一下position
1)position:absolute--绝对定位的元素,相对于其父元素进行定位。
2)position:relative--生成相对定位的元素,相对于其正常位置进行定位。
3)position:fixed--固定定位,相对于浏览器窗口进行定位。
4)position:static--默认值,没有定位,元素在正常的文档流
JavaScript
JavaScript的组成
1)ECMAScript:是JS的核心,描述了语言的基本语法和数据类型,是JS的语法规范
2)BOM:浏览器对象模型,通过BOM可以操作浏览器窗口,如:弹出框
3)DOM:文档对象模型,一套操作页面元素的API
JavaScript的输入、输出方式
输出:
1)alert() --弹出一个提示框(提示/警告文字)
2)document.write() --会将输入的内容放置到body标签内部,作为html内容
3)console.log() --代码后台
输入:
prompt('提示文字', 默认值);
对象的创建方式
1)对象字面量
var o={
name: 'jay',
age: 18,
sex: true,
sayHi: function () {
console.log(this.name);
}
};2)new Object()创建对象
var person=new Object();
person.name='Jolin';
person.age=16;
person.job='actor';
person.sayHi=function() {
console.log('Hello,everyBody');
}3)工厂函数创建对象
function createPerson(name, age, job) {
var person=new Object();
person.name=name;
person.age=age;
person.job=job;
person.sayHi=function(){
console.log('Hello,everybody');
}
return person;
}
var p1=createPerson('Jay', 18, 'actor');4)自定义构造函数
function Person(name, age, job){
this.name=name; //this是关键字，这里代表“自己”，“当前对象”
this.age=age;
this.job=job;
this.sayHi=function(){
console.log('Hello,everybody');
}
}
var p1=new Person('Jay', 18, 'actor');new关键字运行机制
1)new会在内存中创建一个新的空对象
2)new会让this指向这个新的对象
3)执行构造函数 目的是给这个新对象加属性和方法
4)new会返回这个新对象
this的使用场景
1)普通函数调用时,指向全局window
2)构造函数调用时,指向实例对象
3)对象方法调用时,指向该方法的对象
4)事件绑定时,指向绑定事件的对象
5)箭头函数中this指向外部函数作用域的this
==和===有什么区别
=是赋值
==（相等）返回一个布尔值，相等返回true，不相等返回false，允许不同数据类型的转换。
===（全等）只要数据类型不一样，就会返回false。
JavaScript内置对象之Math(求绝对值,取整,随机数)
Math.random() 生成一个0-1之间的随机小数
Math.floor()/Math.ceil() 向下取整/向上取整
Math.round() 取整,四舍五入
Math.abs() 绝对值
Math.max()/Math.min() 求最大值/最小值
Math.sin()/Math.cos() 正弦/余弦
Math.pow/Math.sqrt() 求指数次幂/求平方根
JavaScript内置对象之Date(处理时间和日期,基于1970年1月1日)
getTime() 返回毫秒数和valueOf()结果一样
getMilliseconds()
getSeconds() 返回0-59
getMinutes() 返回0-59
getHours() 返回0-23
getDay() 返回星期几 0代表是周日 6代表是周六
getDate() 返回当前月的第几天
getMonth() 返回月份,从0开始
getFullYear() 返回4位的年份 如 2016
JavaScript内置对象之Array
push()/pop() 加入数组的末端/删除数组的最后一项
unshift()/shift() 在数组最前面插入项/删除数组中前面项
reverse() 翻转数组
sort() 根据字符,从小到大排序
slice() 从当前数组中截取一个新的数组，不影响原来的数组，参数start从0开始,end从1开始
splice() 删除或替换当前数组的某些项目，参数start, deleteCount, options(要替换的项目)
indexOf() 索引位置
forEach() 遍历数组不返回值,返回参数
join() 把数组中的所有元素放入一个字符串
JavaScript内置对象之String
concat() 拼接字符串,等效于'+','+'更常用
slice(start,end) 从start位置开始,截取到end位置,end取不到
substring() 方法同slice
substr(start,length) 从start位置开始,截取到length个字符,如果没有length参数,则截取到最后
toUpperCase() 转换为大写
toLowerCase() 转换为小写
search() 查找,返回找到的位置
replace() 替换,注意:一次只能替换一个
split() 将字符串以指定的字符分割为数组
JavaScript中动态操作DOM的方法
createElement 创建一个元素节点
creatTextNode 创建一个文本节点
appendChild 向元素的末尾追加一个节点
inserBefore(a,b) 意思是a节点会插入b节点的前面
removeChild 删除一个子节点
cloneChild 复制节点,接收布尔值参数,true表示深复制(复制节点及其所有子节点),false表示浅复制(复制节点本身,不复制子节点)
replaceChild 替换节点
document.getElementsByTagName() 通过标签名称查找节点
document.getElementsByName() 通过元素的Name属性的值查找节点
document.getElementById() 通过元素ID查找节点
事件的三个阶段,如何阻止事件冒泡
答:目标、捕获、冒泡
event.stopPropagation
call,apply,bind有什么区别
三者都是用来改变函数的this对象指向，调用其方法改变函数执行的上下文，从而改变this指向。
call()和apply()的第一个参数相同,是指定的对象,这个对象是该函数的执行上下文
call()可以接受多个参数，在第一个参数之后的后续所有参数就是传入该函数的值
apply()只有两个参数,第一个是对象,第二个是数组
bind()不会立即执行该函数,他的参数和call()相同
闭包函数
1.什么是闭包?
当函数执行时,首先会形成一个私有作用域,这个私有作用域保护私有变量不收外界的干扰,我们把这个体制称为闭包。闭包是指有权访问另一个函数作用域中变量的函数。
2.闭包优点:
1)保护函数内的变量安全,加强了封装性;
2)在内存中维持一个变量,方便调用上下文的局部变量;
3.闭包缺点:
1)内存消耗;
2)滥用闭包函数会造成内存泄露,不能被垃圾回收机制所回收。
递归函数
1.什么是递归函数
答:递归函数即自调用函数,在函数体内直接或者调用自己本身函数
2.递归函数的优点
答:代码更加简洁清晰,可读性更好
3.递归函数的缺点
答:大量使用递归函数,会消耗空间,造成系统卡顿,非必要时建议不要使用递归函数。
面向对象和面向过程
答:面向对象:开发过程中分析大体步骤,找到辅助的开发工具
面向过程:开发过程中专注于每个功能的具体实现方式
面向对象的三个特征
封装性:多个相同操作的功能封装到一个对象中
继承性:让功能复用
多态性:增强功能使用性灵活性
正则表达式
答:对字符串进行操作的一组工具,作用:匹配,替换,提取功能
/^$/ 这个是个通用的格式。
^ 匹配输入字符串的开始位置；$匹配输入字符串的结束位置
*匹配前面的子表达式零次或多次；
+匹配前面的子表达式一次或多次；
?匹配前面的子表达式零次或一次；
\d 匹配一个数字字符，等价于[0-9]
校验11位手机号案例:
function checkPhone(){
var phone=document.getElementById('phone').value;
if(!(/^1[35678]\d{9}$/.test(phone))){
alert("手机号码有误，请重新填写");
return false;
}
}校验邮箱案例:
function isEmail(str){
var reg=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
return reg.test(str);
}原型三者关系
实例对象：实例对象都具有__proto__,就是原型对象
原型对象：原型对象都具有constructor属性，就是构造函数
构造函数：构造函数都具有prototype属性，就是原型对象
如何在JS中清空数组
如：var list=[1,2,3,4]
list=[]; //设置一个新的空数组，如果从另一个变量引用到这个数组，那么原始的引用数组将保持不变。
list.length=0; //这种方式会更新指向原始数组的所有引用变量。
list.splice（0,list.length）; //也将更新对原始数组的所有引用。
while(list.length){
list.pop();
};
//不建议经常使用该方式。JS中的转义字符是什么
能够在不破坏应用程序的情况下编写特殊字符，转义字符（\）用于处理特殊字符，如单引号、双引号、撇号和&号，在字符前放置。
如：console.log(" I am a \"beautiful\"girl")原文链接：https://juejin.im/post/5cf725d6f265da1b8608754a
作者：HoneyCC鱼瑜于
lt;hr>水平线
<hr size="9" /> 水平线(设定大小,单位:像素)
<hr width="80%" /> 水平线(设定宽度,单位:像素或百分比)
<hr color="#ff0000" /> 水平线对齐方式
<hr align="left" /> 水平线水平位置
<hr noshade /> 去掉水平线的阴影
align属性值:center(默认值) left right
<hr width="30%" color="blue" size="9" align="left"/>
<center></center>水平居中.
<br/> 换行
<p></p> 标签定义段落
<p align=""></p>将段落按左、中、右对齐;
align属性值:left(默认值) right center justify
注意：
<h1>...<h6>标题标记与<p>段落标记都只有一个属性align
<pre></pre> 定义预格式化的文本
<blockquote></blockquote> 设置段落缩进(可以缩进5个字符)
手册上没有的标记
<xmp></xmp> 忽略HTML标记
<nobr>…</nobr> 禁止换行
<wbr> 指定软换行（或单词换行），用在nobr标记中，即使用 <nobr> 禁止了换行，使用 <wbr> 仍然可以换行
<nobr>中华人民共和国上海市<wbr>黄浦区</wbr></nobr>
信所有已经步入Web前端开发领域的同学们，对于HTML超文本标记语言都不会感觉陌生。即便是正准备开始系统学习Web前端开发的同学，也多多少少了解这门语言。HTML语言由W3C互联网联盟制定其使用规范并对外发布。严格来说，HTML并不属于编程语言，更多的是一种带有“标记”性质的代码集合。HTML语言所书写的HTML文档也都是由标记或标记对组成的。这种语言没有逻辑流程，也就是说只要书写正确，浏览器就可以直接将最终的效果呈现在页面中。
W3C 互联网联盟
这里，小海老师想带领大家重温HTML语言，对前端开发中常用的HTML标记或标记对进行总结，对于标记或标记对中用到的属性进行阐述。对于已经在前端开发领域摸爬滚动数年的老手们，这些内容一定是已经烂熟于心了，因此这篇文章更适合哪些刚刚接触这个行业的新人们。
首先我要说明，本文章只收录了HTML 4版本中包括的常用标记对和属性，对于HTML 5新增的标记对和属性，小海老师会在后续的文章中专门进行讲解。
1、HTML文档的基本结构：
HTML（Hyper Text Markup Language，超文本标记语言）在书写时应该满足它最基本的结构。HTML文档就好像人体的结构似的，被分为“文件头”和“文件体”两部分。文件头利用<head></head>标记对来实现，文件体利用<body></body>标记对来实现。
HTML语言的基本结构
2、HTML对标记和标记对的规定：
HTML语言中大部分的标记都是成对出现的，被人们称为“标记对”，书写时利用尖括号（也就是小于号和大于号）来进行包裹。格式为：
<标记对></标记对>
为了和早期的HTML版本兼容，W3C（World Wide Web Consortium，互联网联盟）在制定HTML标准的同时还保留了一小部分不成对的标记。因为不成对，所以被人们称为“标记”，书写时在标记的结束位置应该添加一个反斜杠。格式为：
<标记 />
3、HTML对属性的规定：
属性是为了拓展标记的功能书写在起始标记中的，属性分为“属性名”和“属性值”两部分。属性之间利用空格隔开，属性值应该用双引号引住，属性名和属性值之间利用等号连接。带有属性的标记对格式为：
<标记 属性名1=“属性值1” 属性名2=“属性值2”> </标记>
说到这里，我们应该继续介绍HTML中包括的常用标记对与其对应的属性。这里，首先我们将HTML标记对划分为以下几类：
HTML结构标记
文本段落标记
列表标记
超级链接标记
图像标记
表格标记
表单标记
块标记
一、HTML结构标记
支撑起HTML文档结构的标记对包括以下几个：
<html></html>：所有的HTML代码必须书写在该标记对内部。
<head></head>：文件头标记对。
<body></body>：文件体标记对。
<title></title>：文档标题标记对。
<meta />：元信息标记。
<link />：用于加载外部CSS文件的标记。
<style></style>：用于书写内部CSS代码的标记对。
<script></script>：用于书写或加载脚本代码的标记对。
HTML 结构标记
下面罗列了一些常用的结构用法：
1、加载字符集：<meta charset=“utf-8”/>
2、加载地址栏图标：<link rel=“shortcut icon” href=“ico_URL” />
3、加载外部CSS文件：<link rel=“stylesheet” type=“text/css” href=“*.css” />
4、加载js文件：<script type=“text/javascript” src=“*.js”></script>
二、文本段落标记
用于在页面中输入文本和段落的标记对包括以下几个：
<h1></h1>：标题标记对。共有六个，<h1>到<h6>。
<p></p>：段落标记对。
<font></font>：字体标记对。
<pre></pre>：预格式化文本标记对。
<center></center>：居中标记对。
<xmp></xmp>：忽略HTML标签标记对。
<!--注释内容-->：注释标记。
文本段落标记
除了上述标记对之外，HTML还提供了一部分代码用于在页面中输入特殊字符。这里我列举了一部分常用的特殊字符，可以从下图中看到。
特殊符号的表示
同时，HTML还提供了一组有关文本修饰的标记对，可以从下图中看到。
文本修饰标记对
三、列表标记
用于在页面中显示列表的标记对包括以下几个：
<ul></ul>：用于实现无序列表的标记对。
<ol></ol>：用于实现有序列表的标记对。
<li></li>：用于实现无序列表和有序列表列表项的标记对。
<dl></dl>：用于实现定义列表的标记对。
<dt></dt>：用于在定义列表列表项中实现定义名词的标记对。
<dd></dd>：用于在定义列表列表项中对定义名词进行解释的标记对。
列表标记对
四、超级链接
用于在页面中实现超级链接的标记对只有一个：
<a></a>：实现超级链接的标记对。
超级链接标记对有以下常用的属性：
href：用于指定超级链接的目标地址。
title：用于指定当鼠标经过超级链接时给出的提示语。
target：用于指定打开链接地址页面的方式。
name：用于指定锚的名称。
超级链接标记对的属性
五、图像
用于在页面中实现图像的标记只有一个：
<img />：实现图像的标记。
图像标记有以下常用的属性：
src：用于指定图片所在的路径和文件名。
width：用于指定图片的宽度，单位为像素。
height：用于指定图片的高度，单位为像素。
border：用于指定图片的边框粗细，单位为像素。
alt：用于指定图片的替代文本。
align：用于指定图片相对于周围元素的对齐方式。
vspace：用于指定图片与环绕在其一侧的周围元素之间的垂直距离。
hspace：用于指定图片与环绕在其一侧的周围元素之间的水平距离。
图像标记
由于篇幅问题，以上只是HTML常用标记对和属性的第一部分，接下来我还会继续发布第二部分，供广大前端爱好者学习与参考。
由于考虑到大部分人对HTML语言的基本使用还是比较熟练的，所以本文仅仅是单纯的列出了标记对的名称和属性名称，并没有详细的讲解这些标记对和属性的使用方法。如果您大部分内容都是已经掌握了的，甚至是已经达到熟练使用的程度，可以略读本文甚至忽略本文。如果您刚刚涉足HTML语言，对本文这种带有列举性质的具体使用方法并不清除，可以私信我，我可以为您免费发一份我自己编写的关于HTML语言较为详尽的PDF教材。欢迎广大学习者索取。
【未完待续】
*请认真填写需求信息，我们会在24小时内与您取得联系。
