-
在 HTML 页面上，当按下键盘上的任意一个键时都会触发 javascript 的（）事件。
解析：
onfocus 获取焦点时，一般在<input>、<select>、<a>标签中使用
onBlur 元素失去焦点时，一般用于表单输入框
onSubmit 在提交时，一般用于<form>标签
onKeyDown 键盘按键时触发 -
大前端方向包括了web前端，App页面，小程序页面等。html5平常方面都可以应用，但是大量应用于移动应用程序和游戏，因为用HTML5的优点主要在于，这个技术可以进行跨平台的使用。
-
link和@import的区别：
1）link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持（IE5以上才能被识别）。
2）link除了加载CSS，Javascript外，还能用于定义RSS，定义rel连接属性等作用；@import是CSS提供的，只能用于加载CSS。
3）link加载的内容是与页面同时加载；@import需要页面网页完全载入以后加载。
用法区别： 1）link的写法：
<link rel="stylesheet" href="index.css">
2）import的写法：
<style type=”text/css”>
@import url（“index.css”）；
</style>
- HTML DOM的event事件
| 事件 | 描述 |
|---|---|
| onabort | 图像的加载被中断。 |
| onblur | 元素失去焦点时触发。 |
| onchange | 域的内容被改变。 |
| onclick | 当用户点击某个对象时调用的事件句柄。 |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 |
| onerror | 在加载文档或图像时发生错误。 |
| onfocus | 元素获得焦点。 |
| onkeydown | 某个键盘按键被按下。 |
| onkeypress | 某个键盘按键被按下。 |
| onkeyup | 某个键盘按键被松开。 |
| onload | 一张页面或一幅图像完成加载。 |
| onmousedown | 鼠标按钮被按下。 |
| onmousemove | 鼠标被移动。 |
| onmouseout | 鼠标从某元素移开。 |
| onmouseover | 鼠标移到某元素之上。 |
| onmouseup | 鼠标按键被松开。 |
| onreset | 重置按钮被点击。 |
| onresize | 窗口或框架被重新调整大小。 |
| onselect | 文本被选中。 |
| onsubmit | 确认按钮被点击。 |
查询地址：https://www.w3school.com.cn/
- 把鼠标移到按钮并点击时，会产生一串什么样的事件？
CSS伪类用于向某些选择器添加特殊的效果：
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
触发顺序为link–>visited—>hover（悬停）—>focus（聚焦）—>active（响应）即记为love and hate ，然后单独记住focus在hover和active之间即可。 - em 自动适应用户所使用的字体。元素像素就是指px，dp 虚拟像素，在不同的像素密度的设备上会自动适配。
align ：规定 div 元素中的内容的水平对齐方式。
text-align：规定“元素中”的文本的水平对齐方式。
两个属性使用的地方不一样，但是作用一样！
align直接写在是div里面的属性 ：
<div align="center">
This is some text!
</div>
text-align则是Css的属性：
<div style="text-align:center">
-
a.历史：
canvas是html5提供的新元素。而svg（可缩放矢量图形）存在的历史要比canvas久远，已经有十几年了。svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。
b.功能：
canvas可以看做是一个画布，其绘制出来的图形为标量图。可以在canvas中引入jpg或png这类格式的图片。在实际开发中，大型的网络游戏都是用canvas画布做出来的，并且canvas的技术现在已经相当的成熟。另外，我们喜欢用canvas来做一些统计用的图表，如柱状图曲线图或饼状图等。而svg，所绘制的图形为矢量图，不能引入普通的图片，因为矢量图的不会失真的特点，在项目中我们会用来做一些动态的小图标。这个特点也很适合被用来做地图，百度地图就是用svg技术做出来的。
c.技术：
canvas里面绘制的图形不能被引擎抓取（canvas中绘制的元素不可以通过浏览器提供的接口获取到），canvas中我们绘制图形通常是通过javascript来实现。 而svg里面的图形可以被引擎抓取，支持事件的绑定（SVG中绘制的元素可以通过浏览器提供的接口获取到），svg更多的是通过标签来实现。我再来介绍一个svg的js库：TWO.JS。其中包含two.js和three.js，前者用于绘制二维图形，后者用于绘制三维图形。TWO.JS可以支持三种格式，svg（默认）、canvas、和WEBGL。当然也可以在普通div中引入。 /以上源自知乎/
判断：为了优化网页的SEO效果，常用javascript动态生成网页的title、description、keyword。（×）
解析：使用JS动态生成可能会导致搜索引擎爬取不到，想要有利于SEO最好将关键词写在静态的HTML里。（后台提供，前台渲染，利于SEO优化）
拓展：Canvas 与 SVG 的比较
Canvas：依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘 Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
SVG：不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用 -
a、p元素不能包含任何块级元素(包括自身)
b 、a元素可以包含任何其他元素(除了自身)
c、document是文档(整个DOM树)的根节点
d、li元素的祖先元素可能是li（li里面可以包含一个新的有序或者无序列表），但父元素不可能是li。 -
下列哪些元素在浏览器默认样式下会加粗文本？
A：<h1> - <h6>标签表示 HTML 标题，默认加粗
B：<caption>标签表示表格标题，标题一般被居中表格之上，但不加粗文本
C：<em>标签表示强调内容，显示为斜体，但不加粗文本
D：<th>标签表示表格的表头，默认加粗文本 -
JSON 和 XML 优缺点的比较
（1）【XML】的优缺点
优点： （1）格式统一，符合标准；
（2）容易与其他系统进行远程交互，数据传输比较方便。
缺点： （1）XML文件庞大，文件格式复杂，传输占带宽；
（2）服务器端和客户端都需要花费大量代码来解析XML，导致服务器端和客户端代码变得异常复杂且不易维护；
（3）客户端不同浏览器之间解析XML的方式不一致，需要重复编写很多代码；
（4）服务器端和客户端解析XML花费较多的资源和时间。
（2）【JSON】的优缺点
优点：（1）数据格式比较简单，易于读写，格式都是压缩的，占用带宽小；
（2）易于解析，客户端JavaScript可以简单的通过eval_r()进行JSON数据的读取；
（3）支持多种语言，包括ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, PHP, Python, Ruby等服务器端语言，便于服务器端的解析；
（4）在PHP世界，已经有PHP-JSON和JSON-PHP出现了，偏于PHP序列化后的程序直接调用，PHP服务器端的对象、数组等能直接生成JSON格式，便于客户端的访问提取；
（5）因为JSON格式能直接为服务器端代码使用，大大简化了服务器端和客户端的代码开发量，且完成任务不变，并且易于维护。
缺点：（1） 没有XML格式这么推广的深入人心和喜用广泛，没有XML那么通用性；
（2）JSON格式目前在Web Service中推广还属于初级阶段。
总结：XML对数据的描述性比JSON好，JSON的数据体积更小，传递的速度更快些，与JavaScript的交互更加方便，更容易解析处理，更好的数据交互，JSON的速度一般要快于XML。 -
浏览器在一次HTTP请求中，需要传输一个4097字节的文本数据给服务端，可以采用哪种方式？
使用POST。
IndexdDB是 HTML5 的本地存储，把一些数据存储到浏览器（客户端）中，当与网络断开时，可以从浏览器中读取数据，用来做一些离线应用。
Cookie通过在客户端 ( 浏览器 ) 记录信息确定用户身份，最大为 4 kb 。
local Storage也是 HTML5 的本地存储，将数据保存在客户端中（一般是永久的）。
URL参数用的是 get 方法，从服务器上获取数据，大小不能大于 2 kb 。
Session是服务器端使用的一种记录客户端状态的机制 。
post是向服务器传送数据，数据量较大。 -
通常我们需要获取某个信息时，都会通过几个缩写的关键字进行检索，那么，在开发中，应该使用（abbr）来表示缩写的元素。
<abbr>标签用来表示一个缩写词或者首字母缩略词，如"WWW"或者"NATO"。通过对缩写词语进行标记，您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。 在某些浏览器中，当您把鼠标移至带有<abbr>标签的缩写词/首字母缩略词上时，<abbr>标签的 title 属性可被用来展示缩写词/首字母缩略词的完整版本。
例如：The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
结果：The PRC was founded in 1949. 鼠标在结果的PRC上时会显示People’s Republic of China。 -
以下代码中,给class为test的div对象设置红色背景的正确js代码为(
document.getElementsByClassName("test")[0].style.backgroundColor="red" ;）
<div class="test"></div>
因为getElementsByClassName获取的是节点列表，如果是获取单个节点，可以使用queryselector通过类名获取节点返回的才是单一节点。
在js里面添加的属性名使用驼峰法（以单词组合命名，第一个单词小写，后面的单词首字母大写，如myFirstName，backgroundColor.）
，在css里面使用连接线 除了id选择器的唯一性和query返回单个节点其他返回的都是节点列表。
document.getElementById('button1').style.backgroundColor="red";
-
下列属性均不可以被继承：
margin、position、float（可以被继承的属性主要有文本(font-)，颜色(背景颜色不可以！)，列表(list-style-type)，元素可见性visibility
） -
focus（）、bgColor（）均不属于document对象的方法。
bgColor：是属性，不是方法。可以通过document.bgColor来设置document的背景颜色 focus：是方法，但是不是document的，用于为checkbox赋予焦点，适用于表单元素。
<b>重要通知</b>
<font color="red">2点到5点半</font>小区停电
其中 font 标签，存在反语义（ font 解释为文字，但 ”文字“ 意思太泛了，而是应根据使用环境选择其他标签。如标题 <h1> ~ <h6> <p>等标签） 在 HTML 4.01 中，不被赞成使用； 在 HTML 5 中，不支持该元素，建议使用 CSS 向元素添加样式。
- 根据以下代码，两个div元素垂直间距为(200px)。
<div style="width:100px; height:100px; margin-bottom:100px;"></div>
<div style="width:100px; height:100px; margin-top:200px;"></div>
外边距塌陷问题，当两个在标准流中相邻（兄弟或父子关系）的块级元素的外边距，组合在一起变成单个外边距，但只有上下外边距会发生塌陷。
计算方式：
1.两个块margin都为正，取其较大的一个。
2.两个块magin都为负，取其绝对值较大的一个。
3.一个块为负，一个块为正，取两个块margin之和。
css盒模型，块之间共享垂直外边距margin，margin取其大。
-
关于HTML5中的地理定位api的描述：
a.HTML5地理定位API允许您与您喜爱的web站点共享您的位置。
b.利用JavaScript可以捕获你的经度和纬度，并可以发送到后端Web服务器，做一些奇特的位置感知的事情，比如找到本地企业或在地图上显示你的位置。
c.大多数浏览器和移动设备都支持地理定位API。 -
在 HTML5 中，contextmenu 和 spellcheck 是HTML全局属性。oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。
注意：所有浏览器都支持 oncontextmenu 事件， contextmenu 元素只有 Firefox 浏览器支持。
spellcheck属性规定是否对元素进行拼写和语法检查。可以对以下内容进行拼写检查： input 元素中的文本值（非密码）<textarea>元素中的文本 可编辑元素中的文本 -
<track>标签为诸如 video 元素之类的媒介规定外部文本轨道。 用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。 标签是 HTML 5 中的新标签。目前所有主流浏览器都不支持 标签。 -
CSS 选择器优先级： 内联样式 > ID 选择器 > 伪类 > 属性选择器 > 类选择器 > 元素（类型）选择器 > 通用选择器
-
html5的跨文档消息传输说法描述：
跨文档已经是跨域的一种，可以实现跨域通信，h5提供了网页文档之间发送信息和互相接收的功能。使用这个功能，只要获得网页所在窗口对象的实例，即可以实现同域内的（端口号+域）web页面之间可以相互通信，跨域也可以相互通信，可以相互传递字符串和对象。 -
Input 类型 - range
range类型用于应该包含一定范围内数字值的输入域。 range类型显示为滑动条。
还能够设定对所接受的数字的限定：
实例 ：<input type="range" name="points" min="1" max="10" /> -
浏览器渲染流程正确的顺序：
1.解析HTML并构建DOM树
2.构建render树
3.布局render树
4.绘制render树 -
这里考察html标签的使用：
<audio>标签定义声音，比如音乐或其他音频流。
注：<audio>与</audio>之间插入的内容不是用来解释控件，而是在浏览器不支持audio时显示的文字。
<canvas>只是图形容器，您必须使用脚本来绘制图形。
<article>标签定义外部内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自blog的文本，或者是来自论坛的文本。或者是来自其他外部源内容。
<menu>标签定义命令的列表或菜单，用于上下文菜单、工具栏以及用于列出表单控件和命令，所有主流浏览器都不支持。
<command>元素表示用户能够调用的命令，可以定义命令按钮，比如单选按钮、复选框或按钮。
<video>标签中controls属性决定是否向用户显示控件。
<datalist>标签可以和input标签配合进行使用，来显示列表。
<progress>标签不填写max和value或者只设置max时进度条会自动滑动，只设置value时进度条自满。
<embed>标签定义了一个容器，用来嵌入外部应用或互动程序（插件）。
<meter>元素用来显示已知范围的标量值或者分数值，也被称为gauge（尺度），类似于进度条，按百分比显示。 -
一、无继承性的属性
1、display：规定元素应该生成的框的类型
2、文本属性：
vertical-align：垂直文本对齐
text-decoration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白符的处理
unicode-bidi：设置文本的方向
3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left 4、背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
5、定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
6、生成内容属性：content、counter-reset、counter-increment
7、轮廓样式属性：outline-style、outline-width、outline-color、outline
8、页面样式属性：size、page-break-before、page-break-after
9、声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
二、有继承性的属性
1、字体系列属性
font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。
2、文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白（即字间隔）
letter-spacing：增加或减少字符间的空白（字符间距）
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
3、元素可见性：visibility
4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
5、列表布局属性：list-style-type、list-style-image、list-style-position、list-style
6、生成内容属性：quotes
7、光标属性：cursor
8、页面样式属性：page、page-break-inside、windows、orphans
9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation
三、所有元素可以继承的属性
1、元素可见性：visibility
2、光标属性：cursor
四、内联元素可以继承的属性
1、字体系列属性
2、除text-indent、text-align之外的文本系列属性
五、块级元素可以继承的属性：text-indent、text-align -
iframe可用在以下几个场景中：
1：典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe。 （左边固定右边自适应的布局）
2：ajax上传文件。
3：加载别的网站内容，例如google广告，网站流量分析。
4：在上传图片时，避免当前页刷新，不用flash实现无刷新。
5： 跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源。
6：与第三方域名下的页面共享cookie。 -
在做一份调查报告时，要求将问题文类，同一表单内的数据在一组显示，并表明此类型的名称，如何将相同类型的表单进行分组
（<fieldset><legend>类型名</legend>内容显示</fieldset>）
【解析】
legend：为 fieldset 元素定义标题（caption）。
fieldset ：将表单内的相关元素分组。 -
一个完整的网页加载流程：
(1)解析HTML结构
(2)加载外部脚本script和样式表文件link //页面中的多个脚本文件采用同步的方式加载会产生“线程等待”
(3)解析并执行脚本代码
(4)构建HTML DOM模型
(5)加载图片等外部资源文件 //图片等文件以异步线程的方式加载不会产生等待
(6)页面所有资源加载完毕（之后会触发onload事件）
注： css加载不会阻塞DOM树的解析（由于html的层次结构已经是树状结构，因此可以实现边加载边生成DOM树。）
css加载会阻塞DOM树的渲染 。
css加载会阻塞后面js语句的执行。 -
display:none; opacity:0; visibility:hidden;三种方法均可隐藏元素。不同在于以下几点:
一、空间占据
display:none 的元素不会占据，但是设置display:none 会引发回流和重绘
opacity:0和visibility:hidden 的元素会占据位置，但是改变这属性时只会触发重绘
二、子元素继承
display:none 不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了。
visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出。
opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显示 。
三、事件绑定
display:none 的元素都已经不在页面存在了，因此肯定也无法触发它上面绑定的事件；
visibility:hidden 元素上绑定的事件也无法触发；
opacity: 0 元素上面绑定的事件是可以触发的。
四、过渡动画
transition对于display肯定是无效的；
transition对于visibility也是无效的；
transition对于opacity是有效. -
list-style-type
list-style-type 用于设置不同列表列表项的样式。
无序列表常使用：
ul {
list-style-type:circle; /* 每一项前都是圆圈 */
}
ul {
list-style-type:square; /* 每一项前都是正方形 */
}
有序列表也可以用 list-style-type 来设置列表项
ol {
list-style-type:upper-roman; /* 每一项前面都是大写罗马数字 */
}
ol {
list-style-type:lower-alpha; /* 每一项前都是小写字母 */
}
有序列表的小写字母如果大于26项再次从 'aa’开始
-
DHTML是Dynamic HTML的简称。DHTML 是一种使 HTML 页面具有动态特性的艺术。DHTML 意味着 HTML 4.0、文档对象模型（DOM）、层叠样式表（CSS）以及 JavaScript 的结合物。
-
如果添加标准盒属性
box-sizing:content-box;(默认)
css2模型：盒子宽度=width+padding+border；
如果是ie盒模型，添加属性box-sizing: border-box;
css3模型：盒子宽度=width(padding和border都包含在里面,不会撑开盒子)。 -
能使字体变粗的css样式为font-weight:bold，其中font-weight的值有bolder（特粗体）、bold（加粗）、normal（正常）、lighter（细体），当然font-weight的值还可以用数值（100~900，必须为整百）进行表示 。
text-transform用来设置文本的大小写，值为：none（默认值，不设置）、capitalize（使文本中的每个单词的首字母大写）、uppercase（将文本中的内容转换成大写）、 lowercase（ 将文本中的内容转换成小写）。
相对定位(relative)，不脱离文档流，根据自身的位置进行偏移。
绝对定位(absolute)，脱离文档流，如果父元素没有进行position，相对于浏览器左上角进行定位，否则相对于父元素定位 。
固定定位(fixed)，脱离文档流，相对于浏览器左上角定位
网页中，rem作为元素尺寸单位时，是相对文档根节点的font-size进行计算的。
目前最新的Microsoft Internet Explorer中，盒模型默认使用的是content-box标准盒模型，现在的浏览器都是这种。border-box为怪异盒模型，IE8以下低版本的是这种模型。
745
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
