【牛客】前端工程师-HTML专项练习知识点整理（一）
-
在 HTML 页面上，当按下键盘上的任意一个键时都会触发 javascript 的（）事件。
解析：
onfocus 获取焦点时，一般在、标签中使用
onBlur 元素失去焦点时，一般用于表单输入框
onSubmit 在提交时，一般用于标签
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的写法：
"stylesheet" href="index.css">
2）import的写法：
- 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里面的属性 ：
"center">
This is some text!
text-align则是Css的属性：
"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： -
B：
C：
D： 标签表示表格的表头，默认加粗文本
-
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）来表示缩写的元素。
例如：The PRC 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" ;）
"test">
因为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赋予焦点，适用于表单元素。
重要通知
"red">2点到5点半小区停电
其中 font 标签，存在反语义（ font 解释为文字，但 ”文字“ 意思太泛了，而是应根据使用环境选择其他标签。如标题 ~
- 根据以下代码，两个div元素垂直间距为(200px)。
"width:100px; height:100px; margin-bottom:100px;">
"width:100px; height:100px; margin-top:200px;">
外边距塌陷问题，当两个在标准流中相邻（兄弟或父子关系）的块级元素的外边距，组合在一起变成单个外边距，但只有上下外边距会发生塌陷。
计算方式：
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 元素中的文本值（非密码）