前端面试 - HTML相关知识点
2021-01-26 19:41:29 0 举报AI智能生成
登录查看完整内容
整理了前端面试中 html 和 html5 相关的知识点，供参考，会不断更新
作者其他创作
大纲/内容
HTML
Html5
浏览器支持
新的语义元素：通过设置display: block;让旧版本浏览器正确显示
使用document.createElement("newEle")定义新的元素，并设置对应的样式
判断低于IE9版本的浏览器，添加脚本进行兼容（必须放在head标签中）：<!--[if lt IE 9]> <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]-->
兼容方式
渐进增强
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的 用户体验
优雅降级
一开始就根据高版本浏览器构建完整的功能，然后再针对低版本浏览器进行兼容
新元素
画布
<canvas>
内联SVG
<svg>
与canvas的区别
1.SVG 是一种使用 XML 描述 2D 图形的语言；Canvas 通过 JavaScript 来绘制 2D 图形；2.canvas依赖分辨率，svg则不；3.canvas不支持事件处理器（因为是对象而不是元素），svg支持；4.canvas的文本渲染能力较弱，svg适合带有大型渲染区域的应用程序；5.canvas可以保存成png/jpg格式图片，适合图像密集型游戏；svg复杂度高不适合游戏应用；
多媒体元素
<audio>
定义MP3、Wav、Ogg三种音频文件，需要用<source>标签定义；放置文本内容可在不支持该标签情况下展示；
<video>
定义MP4、WebM、Ogg三种视频文件，需要用<source>标签定义；放置文本内容可在不支持该标签情况下展示；
<source>
<embed>
在文档中嵌入外部应用或者互动程序，支持所有MIME_type
<track>
表单元素
<datalist>
定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值
<keygen>
规定用于表单的密钥对生成器字段
<output>
定义不同类型的输出，比如脚本的输出，与input标签搭配使用
语义元素
<time>
<wbr>
<rt>
<ruby>
<progress>
<mark>
<summary>
<dialog>
存储
sessionStorage
用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据
window.sessionStorage
localStorage
用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除
window.localStorage
.getItem(key)
.removeItem(key)
.clear()
.key(index)：得到某个索引的key
cookie
工作方式
当网页要发http请求时，浏览器会先检查是否有相应的cookie，有则自动添加在request header中的cookie字段中
特征
同源页面可共用cookie，不同域名下的cookie是独立的
一个域名下的cookie个数有限制，一般不超过20个
每个cookie存放的内容大小一般不超过4KB
cookie可以设置过期时间，默认会话结束时间到期自动销毁
操作
设置
document.cookie=name + "=" + escape(value) + ";expires=" + date.toUTCString();
可以设置的字段有expires/domain/path/secure等，secure只有在https协议下才能够设置
服务端设置
Set-Cookie: username=cfangxu;path=/;domain=qq.com
获取
删除
document.cookie=name+"=";
设置对应cookie的expires为过去的时间
修改
Web SQL
核心方法
openDatabase
使用现有的数据库或者新建的数据库创建一个数据库对象
transaction
控制一个事务，以及基于这种情况执行提交或者回滚，配合executeSql方法使用
executeSql
用于执行实际的 SQL 查询
应用程序缓存
<html manifest="cachedemo.appcache"></html>
cachedemo.appcache
manifest文件扩展名为appcache
manifest文件
CACHE MANIFEST/theme.css/logo.gif/main.jsNETWORK*FALLBACK/html/ /offline.html
构成
CACHE MANIFEST
在此标题下列出的文件将在首次下载后进行缓存
NETWORK
在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK
在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
缓存如何失效
用户清空浏览器缓存
manifest文件被修改
由程序来更新应用缓存
Web Worker
是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能
使用注意点
同源限制：分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。
DOM限制：Worker所在线程的全局对象和主线程不一样，无法使用主线程上的document/window/parent这些对象，但是可以使用 navigator和location对象
通信联系：Worker和主线程必须通过消息进行通讯，消息是传值而不是引用
脚本限制：Worker没有window 对象，不能执行alert、confirm方法，但可以使用 XMLHttpRequest 对象发 ajax 请求
文件限制：Worker无法读取本地文件，其脚本必须来自网络
使用方法
主线程
创建 workerw = new Worker("demo_workers.js");关闭 workerw.terminate();w = undefined;发送信息w.postMessage('')接收信息w.onMessage(event)错误处理w.onError(function(event){})
worker
标签
头部/head元素
title
文档的标题
base
页面链接标签的默认链接地址，所有链接的URL，搭配href=“#tips"使用
meta
HTML文档中的元数据
属性
name
content
http-equiv
name值
keywords
description
author
http-equiv值
refresh: 每30s刷新当前页面
link
一个文档和外部资源之间的关系
通常用于链接到样式表
script
客户端的脚本文件
style
HTML文档的样式文件
文本
标题
h1/2/3/4/5/6
水平线
hr
段落
<p></p>
折行
<br>
格式化
格式化标签
加粗文本
b
斜体文本
i
着重文字
em
下标
sub
上标
sup
文本字体放大
big
文本字体缩小
small
加重语气
strong
删除字
del
插入字
ins
计算机输出标签
计算机代码
code
键盘输入
kbd
计算机代码样本
samp
计算机变量
var
预格式文本
pre
打字机文本
tt
引文，引用，标签定义
定义缩写
abbr
<abbr title="World Health Organization">WHO</abbr>
定义地址
address
长的引用
blockquote
短的引用语
q
定义引用，引证，作品的标题
cite
引用的文体，以斜体表示
改变文字方向
bdo
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>
定义项目
dfn
链接
a
<a href="https://www.runoob.com/">访问菜鸟教程</a>
href
网址
<a href="url">链接文本</a>
href=“”几种用法
Js的几种调用方法
href="#"
href=“URL"
href="mailto:xxx"
target：被链接文档在显示位置
_blank
在新打开、未命名的窗口中载入目标文档
_self
默认值
_parent
这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效
_top
这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口
列表
有序列表
ol
li
定义列表项
start="数字"
规定有序列表的开始点
type
无序列表
ul
style=“list-style-type：”
disc
圆点
circle
圆圈
square
正方形
定义列表
dl
dt
自定义列表项目
dd
定义自定列表项的描述
嵌套列表
图像
<map>
定义图像地图，需有img元素
<area>
图像中可点击区域标签，需有img标签
coords
规定区域坐标
shape
指点区域的形态
default
规定全部区域
rect
定义矩形区域
circ/circle
定义圆形
poly
定义多边形区域
map name
图像映射的名称。
表示文件图片
media
nohref
rel
target
<img>
属性: 不需要单位
src
URL 指存储图像的位置
<img src="url" alt="some_text">
border
边框
height
高度
width
宽度
alt
图片名称
如果无法显示图像，浏览器将显示替代文本，就像这样，显示图片名称
图片标签
区块（块级、内联容器）
块级元素
div、form、h1/2/3/4/5、ul、li、table、p等
内联元素
除块级元素
表格
单元格
跨行
<th colspan="2">行的名称</th>
跨列
<th rowspan="2">列的名称</th>
<table>
cellpadding
有单元格边距
cellspacing
单元格间距
frame
规定外侧边框的哪个部分是可见的：void、above、below、hsides、lhs、rhs、vsides、box、border
rules
规定内侧边框的哪个部分是可见的：none、groups、rows、cols、all
<tr>
每个表格均有若干行
align
内容对其方式
valign
垂直对齐方式
<caption>
定义表格标题
<colgroup>
表格列的组
<col>
定义用于表格列的属性
<thead>
表格的页眉
<tbody>
表格的主体
<tfoot>
表格的页脚
<th>
表格的表头/居中的文本（粗体）
<td>
每行被分割为若干单元格
表单
<form>
<input>
button
checkbox
file
hidden
image
password
radio
reset
submit
text
value
autofocus
disabled
form
<select>
下拉选择
<option>
<textarea>
文本域
rows
cols
框架
iframe
缺点
iframe 加载会占用主线程资源，会阻塞主页面的 onload 事件
JS动态设置iframe的src属性可解决（也仅限 chrome 和 safari）
搜索引擎的检索程序无法解读这种页面，不利于网页的 SEO
iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
浏览器的后退按钮失效
小型的移动设备无法完全显示框架
多媒体
video
定义视频，比如电影片段或其他视频流
audio
定义声音，比如音乐或其他音频流
header
标签定义文档的页眉（介绍信息）
footer
定义文档或节的页脚
元素应当含有其包含元素的信息
nav
定义导航链接的部分
aside
定义其所处内容之外的内容，可用作文章的侧栏
section
文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分
article
独立的内容
figure
独立的流内容（图像、图表、照片、代码等等）
figcaption
定义 <figure> 元素的标题
注释
<!-- 这是一个注释 -->
其他标签
embed
标签定义嵌入的内容，比如插件
<embed src="helloworld.swf" />
id
id，只能一个，多个无效
class
属性样式的名称class=“”
引号里面可以填多个class属性
规定元素的行内 CSS 样式
draggable
规定元素是否可拖动。
dropzone
\t规定当被拖动的项目/数据被拖放到元素中时会发生什么。
traslate
dir
data-*
role
描述一个非标准的tag的实际作用，给辅助工具使用
aria
用作辅助工具使用，该前缀后可以添加任何有语义的属性命名
lang
设置语言
DTD
是一组机器可读的规则，声明于文档的第一行；它们定义 XML 或 HTML 的特定版本中所有允许元素及它们的属性和层次关系的定义。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施
<!DOCTYPE root-element [element-declarations]>
SEO
前端如何优化SEO
head中的内容要完善
不同页面的title要有所不同
高度概括页面内容，不同页面的description要有所不同
使用HTML5中的语义化元素
重要内容的HTML代码前置（搜索引擎抓取顺序为由上到下，且有长度限制）
重要内容不要使用js输出
尽量少用iframe
图片资源尽量添加alt属性
提高网站页面的渲染速度
前端安全
XSS
跨站脚本攻击：用户写一些恶意的js代码（a/img标签插入代码），来执行一些可以的行为，盗取Cookie信息、会话攻击
防御办法
输入过滤：在js中对用户输入的数据进行过滤
输出转义：将输出的字符串中的反斜杠进行转义
用innerText代替innerHTML
CSRF
跨站请求伪造：在伪造的网站进行表单提交等操作的时候会对你之前访问的网站发送请求，截获cookie中的用户信息
Referer验证，页面来源的判断
验证码验证
token、ticket校验机制
iframe安全隐患
有些网站会被嵌入黑客脚本
在iframe添加一个叫sandbox的属性，浏览器会对iframe内容进行严格的控制
本地存储数据安全隐患
尽量加密
第三方依赖安全隐患
利用一些自动化的工具进行扫描过后再用，比如NSP(Node Security Platform)，Snyk等等
使用HTTPS
0 条评论
回复 删除
下一页
