【牛客刷题】前端面试必备——HTML

momo_via

已于 2024-01-08 15:18:24 修改

阅读量835

点赞数

分类专栏：前端面试文章标签：前端 html javascript

于 2022-11-25 16:49:21 首次发布

本文链接：https://blog.csdn.net/momohhhhh/article/details/128040479

版权

前端面试专栏收录该内容

3 篇文章 0 订阅

订阅专栏

img、a、strong、span、i、b等描述性标记都是行内元素。
h3，ul，form，table，p等结构性标记都是块级元素。
<audio>标签定义声音，比如音乐或其他音频流；<canvas>标签定义图形，比如图表和其他图像；<article>标签定义外部的内容；<menu>标签用于上下文菜单、工具栏以及用于列出表单控件和命令；<command>标签可以定义命令按钮，比如单选按钮、复选框或按钮。<abbr> 标签用来表示一个缩写词或者首字母缩略词
Canvas不能使用绘制对象的相关事件处理，因为我们没有他们的参考
inline-block可以设置高度，inline不可以设置高度；inline-block和inline都可以设置padding-left；block会独占一行，inline-block不会
css层叠样式权重值：STYLE：1000、#ID：100、.CLASS 10、ELEMENT 1
<address>标签定义文档或文章的作者/拥有者的联系信息。 <hr>标签在HTML 页面中创建一条水平线。<a>标签定义超链接，用于从一张页面链接到另一张页面。<cite>标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
<track>标签为媒体元素
在HTML中，样式表按照应用方式可以分为内嵌样式表、行内样式表、外部样式表文件三种类型
万维网通过URL标识分布因特网上的各种文档

·块级元素

1.总是从新的一行开始

2.高度、宽度都是可控的

3.宽度没有设置时，默认为100%

4.块级元素中可以包含块级元素和行内元素

·行内元素

1.和其他元素都在一行

2.高度、宽度以及内边距都是不可控的

3.宽高就是内容的高度，不可以改变

4.行内元素只能行内元素，不能包含块级元素

canvas中绘制的元素不可以通过浏览器提供的接口获取到。html中A标签 target属性的默认取值是_self，默认在当前窗口打开。Canvas 能够使用JavaScript绘制 2D 图形。
contenteditable 属性规定是否可编辑元素的内容
JavaScript可与HTML5视频和音频标记结合起来使用来增强其行为
param 元素可为 <object> 标签提供参数。
<textarea></textarea>表示一个文本区域
使用button元素时必须指明type属性值、如果一个<li>元素之后紧跟另一个<li>元素，或在父元素中没有其他更多内容，则结束标签可以省略
marquee 元素（<marquee>）用来插入一段滚动的文字。改元素已经过时（被废弃），不可以使用，不属于HTML5语义化标签。
在class中可以定义:hover伪类，在id中不能定义
enctype的默认值是application/x-www-form-urlencoded
document.getElementsByClassName()返回一个数组，当页面仅有一个class的元素，通过[0]选择到该元素；通过js选择css属性时，属性都为驼峰的形式

history.back( )、history.go(-1)访问上一页；history.foeward( )访问下一页；location.go(-1)回到上一页并且刷新页面
loop属性将循环播放嵌入到audio元素中的音频
文本类块级元素不能嵌套其他块级元素，比如P标签
假链接中我们通常在a标签的href中添加javascript:; 能使得页面不跳转
虽然HTML5加了新元素，但它也淘汰了一些旧元素，如 <big>、<center>、<font>、<tt>、<strike>等。<small>标签呈现小号字体效果没有被删除
label元素可以使用for属性关联表单控件，也可以将表单控件放置在它的内部;当使用for属性来关联label元素和表单控件时，label元素的for属性要和表单控件的ID一致
HTML5提供的数据存储有：localStorage(永久性存储)、WebStorage、WebSQLDatabase、sessionStorage等；sessionStorage 保存数据的方法：sessionStorage.setItem(“键名”,”键值”);
HTML5地理定位API允许与喜爱的web站点共享位置；多数浏览器和移动设备都支持地理定位API；利用javascript可以捕获纬度和经度，并可以发送到后端Web服务器，做一些奇特的位置感知的事情，比如找到本地企业或在地图上显示你的位置
HTML5中可以使用data-*自定义属性；新的HTML5全局属性，”contenteditable”用于：规定元素内容是否可编辑
在 W3C 标准盒模型中，默认情况下块元素的总宽度为:content

HTML5新增元素

全局属性就是所有的标签都可以使用的属性:id、style、class
HTML5不是交换格式；HTML5和xml没有多大的关系，HTML5可以向后兼容旧浏览器；<meter>用于显示已知范围内的标量测量
alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字
dp是虚拟像素，在不同的像素密度的设备上会自动适配
数据序列化技术：JSON、Property List、Protocol Buffe
DHTML是Dynamic HTML的简称，就是动态的HTML(标准通用标记语言下的一个应用)，是相对传统的静态的html而言的一种制作网页的概念。 DHTML只是HTML、CSS和客户端脚本的一种集成，即一个页面中包括html+css+javascript(或其它客户端脚本) html+css+javascript（或其他脚本）的优点：html确定页面框架，css和脚本决定页面样式、动态内容和动态定位。
表单元素和表单控件：button元素可以嵌套没有control属性的video元素；step属性不可以为负值或0；form元素的method属性和enctype属性不能任意赋值
HTML的Doctype和严格模式与混杂模式：<!DOCTYPE> 声明位于文档中的最前面，处于<html>标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档；在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示；浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法
getContext() 方法返回一个用于在画布上绘图的环境
空元素（void elements）：<area> 、<base> 、<br> 、<col> 、<colgroup> when the span is present 、<command> 、<embed> 、<hr> 、<img> 、<input> 、<keygen> 、<link> 、<meta> 、<param> 、<source> 、<track> 、<wbr>

表示大小

相对单位
em,ex,ch,rem,vw,vh,vmax,vmin
绝对单位
cm,mm,q,in,pt,pc,px

模型变更之后，只有控制器（Controller）才能驱动视图变更或重新渲染视图
e.stopPropagation()定义W3C标准阻止事件向父容器传递；stopImmediatePropagation() 取消事件冒泡同时阻止当前节点上的事件处理程序被调用。
当元素的 position 属性设置为 absolute 时，设置的 top、right、bottom、left 偏移值是相对于其上一级有定位的祖先元素；网页中，rem 作为元素尺寸单位时，是相对文档根节点的 font-size 进行计算的
domContentLoaded事件早于onload事件；IE6/7/8不支持事件捕获
使用 type="file" 的 <input> 元素使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上，或者通过 Javascript 的 File API 对文件进行操作。
innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
link 和 @import：①link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义 RSS，定义 rel 连接属性等作用；而 @import 是 CSS 提供的，只能用于加载 CSS。②加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。③@import 是 CSS2.1 提出的，只在 IE5 以上才能被识别，而 link 是 XHTML 标签，无兼容问题。④link 支持使用 JS 控制 DOM 去改变样式，而 @import 不支持
display: none该元素不渲染（不可见且不占位）、visibility: hidden该元素隐藏，保留位置、overflow: hidden该元素的子元素超出部分隐藏、opacity:0透明度100%，元素不可见但存在，保留空间，不影响结构，并且能触发点击事件
SVG：SVG指可伸缩矢量图形 (Scalable Vector Graphics)；SVG用来定义用于网络的基于矢量的图形；SVG使用XML格式定义图形；SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失；SVG是万维网联盟的标准；SVG与诸如DOM和XSL之类的W3C标准是一个整体(SVG是HTML下的一个分支)
manifest属性规定文档的缓存manifest的位置，manifest文件是一个简单的文本文件，列举出了浏览器用于离线访问而缓存的资源。

HTML 音频/视频方法

html5的跨文档消息传输：可以实现同域内的web页面之间可以互相通信；可以相互传递字符串和对象；使用这个功能，需要获取到网页所在窗口对象的实例
<optgroup>元素在 <select>元素中创建一组选项，此元素不应嵌套。它包括全局属性，比如disabled,label等
clear:both属性定义了元素的哪边的上方不允许出现浮动元素
给父元素添加 overflow: hidden;在浮动元素下方添加空 div，并添加样式 clear: both;设置父元素 :after{content: “”;clear: both; display:block;overflow: hidden;}可以解决父类高度塌陷问题。
Ctx.arc(x,y,r,0,Math.PI,true);是画半圆；Ctx.arc(x,y,r,0,2Math.PI,true);画整个圆
图片标签是单标签，其中的标题属性为title,代替文本属性为alt
自定义列表的结构为dl包裹dt包裹dd dl是自定义列表的整体，用于包裹dt和dd dt是表示自定义列表的主题 dd是表示针对自定义列表主题的每一项内容
a元素的target属性可以指向一个具名的窗口或iframe；当a元素的rel属性具有多个值时，使用空格“ ”分隔；a元素可以没有href属性，此时为超链接的一个占位符；路径可以是绝对路径、相对路径、锚。
IndexdDB是HTML5的本地存储，把一些数据存储到浏览器（客户端）中，当与网络断开时，可以从浏览器中读取数据，用来做一些离线应用。Cookie通过在客户端 (浏览器) 记录信息确定用户身份，最大为4 kb。url 参数用的是get方法，从服务器上获取数据，大小不能大于2 kb。Session是服务器端使用的一种记录客户端状态的机制。post是向服务器传送数据，数据量较大。local Storage也是HTML5的本地存储，将数据保存在客户端中（一般是永久的）。
Reflow（回流）和 Repaint（重绘）：为HTML标签使用fixed或absolute的position，那么修改他们的CSS是不会reflow的；Reflow比Repaint更加花费时间影响性能；改变颜色只会导致 repaint 不会 Reflow

可以被继承的属性

input种类

·  text password radio checkbox submit reset file image search button

·  email url number range color

·  关于时间 (date, month, week, time, datetime, datetime-local)

公众号未授权进行定位时，H5页面的定位将要手动选择。
页面加载时，由于 html 的层次结构已经是树状结构，因此可以实现边加载边生成 DOM 树；页面所有资源加载完毕后，会触发 onload 事件
<hgroup> 标签用于对网页或区段（section）的标题进行组合。
P元素不能包含div、li元素的祖先元素可能是li，但父元素不可能是li、a元素可以包含img
fieldset元素可将表单内的相关元素分组。<fieldset>标签将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到 <fieldset>标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果，或者甚至可创建一个子表单来处理这些元素。<fieldset>标签没有必需的或唯一的属性。<legend>标签为fieldset元素定义标题。
disabled指当 input 元素加载时禁用此元素。input内容不会随着表单提交；readonly规定输入字段为只读。input内容会随着表单提交。无论设置readonly还是disabled，通过js脚本都能更改input的value
$(selector).fadeTo()可以设置渐变为给定的不透明度
如果在HTML文档的开始部分没有使用doctype，怪异模式，浏览器使用自己的怪异模式解析渲染页面
在html中，帧元素（frameset）的优先级最高，表单元素比非表单元素的优先级要高。表单元素包括：文本输入框，密码输入框，单选框，复选框，文本输入域，列表框等等；非表单元素包括：连接（a），div,table,span等。所有的html元素又可以根据其显示分成两类：有窗口元素以及无窗口元素。有窗口元素总是显示在无窗口元素的前面。有窗口元素包括：select元素，object元素，以及frames元素等等。无窗口元素：大部分html元素都是无窗口元素。
在HTML音频/视频DOM中，preload设置是否在页面加载后载入视频，如果使用autoplay属性preload将被忽略

div::after表示在div元素后插入内容。在元素上，content 的初始值为‘normal’在:before和:after上，如果指定了content 的初始值为‘normal’，则计算为‘none’。content的值设置为‘none’不会生成伪元素。所以:before和:after才需要指定一个看似无意义的content: ""; 来初始化content的值。
跨域的描述：CSS 文件的加载不受跨域限制；window.onerror 方法默认情况下无法获取跨域脚本的报错详情；canvas 中使用 drawImage 贴图会受跨域限制
">"与"+"的规则如下：div > p：选择父元素是<div>的所有<p>元素；div + p：选择紧跟<div>元素的首个<p>元素。:first-child选择器匹配其父元素中的第一个子元素。
iframe的使用场景：与第三方域名下的页面共享cookie，上传图片，避免当前页刷新，左边固定右边自适应的布局，资源加载。
html Doctype：它的责任就是告诉浏览器文档使用哪种html或者xhtml规范；不同文档模式主要影响CSS内容的呈现，尤其是浏览器对盒模型的解析；不同浏览器在混杂模式下的行为差异非常大，如果不使用某些hack技术，跨浏览器的行为根本就没有一致性可言。
在Blink和WebKit的浏览器中，某个元素具有3D或透视变换（perspective transform）的CSS属性，会让浏览器创建单独的图层。
我们平常会使用left和top属性来修改元素的位置，但left和top会触发重布局，取而代之的更好方法是使用translate，这个不会触发重布局。
解决浏览器渲染的性能问题时，首要目标就是要避免层的重绘和重排。