面试押题(1) -- HTML5-2021面试押题
1: 复习：
· DOCTYPE和lang以及字符串的作用
文档类型声明标签， 告诉浏览器这个页面采取html版本来显示
` 告诉浏览器或者搜索引擎，这是一个英文网站，本页面采取英文来显示
<meta charest="UTF-8">`必须写， 采取HTF-8 来保存文字， 如果不写就会乱码· 相对路径
同级路径 
下一级 < img src="images/baidu.gif" />
上一级< img src="../baidu/gif" />· 特殊标签
空格标签
< < 左箭头
> > 右箭头· 锚点标签
1：设置点击的a标签 第二集
2：设置对应接收的标签，点击就会跳转到该位置： <h2 id="#two">第二集 内容介绍</h2>· 绝对路径
1：设置点击的a标签 第二集
2：设置对应接收的标签，点击就会跳转到该位置： <h2 id="#two">第二集 内容介绍</h2>· 表格标签 table
align ： left right center 表格在浏览器中的位置
border: 默认没有边框
cellpadding 单元格和内容之间的空隙 默认1px
cellspacing 单元格与单元格之间的空隙 默认 2px
width 表格的宽度， height 表格的高度
rowspan = “跨行合并单元格的个数”
colspan = “跨列合并单元格的个数”· 表单域 form
action=“提交到url地址”
method=“提交方式”
name=“表单域名称” 一个页面中有多个表单· label 标注
注意 label的 sex 和 input 的 sex 需要保相同
2: 押题：
· 什么是 HTML5? (重点)
PS: HTML5是HTML（超文本标记语言）的最新版本。它是一种为万维网构建和显示内容的语言，万维网是互联网的核心技术。
现代的浏览器都支持 HTML5· HTML 代码约定
使用正确的文档类型
关闭空的 HTML 元素
属性值我们推荐使用引号:
空格和等号
避免一行代码过长
每行代码尽量少于 80 个字符· HTML5有哪些的新特性？(重点)
· canvas图形 video视频 audio音频
二维画图中的元素
媒体播放的 和元素
支持本地存储
新的内容特定元素，如
· 语义化标签 (重点)
· header nav section article aside footer
呈现出很好地内容结构、代码结构,
比
方便搜索引擎能识别页面结构，有利于SEO
遵守W3C标准,有利于合作
· Web 存储 (重点)
· localStorage 长久保存
· sessionStorage 临时保存
客户端存储数据的两个对象为：
localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
保存数据： sessionStorage.setItem(“key”, “value”);
读取数据：sessionStorage.getItem(key)· 常用元素
· 常用块级元素 block
不常用-----------
address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
fieldset - form控制组
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
pre - 格式化文本
·
常用--------------
div - 常用块级容易，也是css layout的主要标签
dl - 定义列表
table - 表格
ul - 非排序列表
form - 交互表单
h1 - 大标题
h2 - 副标题
h3 -h6 3级-6级标题
hr- 水平分隔线
ol- 排序表单
p- 段落· 常用行级元素 inline
不常用----------
abbr - 缩写
acronym - 首字
bdo - bidi override
big - 大字体
cite - 引用
code - 计算机代码(在引用源码的时候需要)
dfn - 定义字段
font - 字体设定(不推荐)
kbd - 定义键盘文本
q - 短引用
s - 中划线(不推荐)
samp - 定义范例计算机代码
select - 项目选择
small - 小字体文本
span - 常用内联容器，定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线
.
常用-----------
a - 锚点
hr - 分割线
b - 粗体(不推荐)
br - 换行
em - 强调
i- 斜体
img - 图片
input- 输入框
label- 表格标签· link 和 @import 的区别是？
1.link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
2.link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
3.link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
4.link支持使用Javascript控制DOM去改变样式；而@import不支持· 浏览器的内核分别是什么
Trident [踹等刺] (微软IE内核)，是微软开发的一种排版引擎。
Gecko[该狗] (火狐Firefox内核)，是一套开放源代码的、以C++编写的网页排版引擎。
Presto[破莱斯椭] (欧朋Opera前内核) (已废弃)。
Webkit(苹果Safari内核,谷歌Chrome内核原型,开源)。· 常见兼容性问题及解决方案
1.清除图片下方出现几像素的空白间隙
img{display:block;}
img{vertical-align:top;}
2.不同浏览器的标签默认的外边距和内边距不同
*｛margin:0;padding:0｝
或者仅自己可见功能？· src 和 href 的区别
src 是引入资源的地址
href 是跳转的url地址cookie session localStroage sessionStorage 的区别和优点 (重点)
1: session 存储在服务器端， 不是存储在客户端
2: cookie 用于和服务器端通信， 而其他不会
2.1: cookie 相对于其他2个它有大小限制， 单个不超过4kb，
3: localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
4: sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。url地址输入后，接下来会发生什么
首先从 DNS 解析域名， 获取ip地址，找到服务器， 服务器会根据请求地址返回相关数据， 浏览器获取到数据，再进行页面渲染什么是标签语义， 有什么作用
即使在没有css的情况下，页面代码也能很好的被阅读理解， 用正确的标签，能够对浏览器和搜索引擎的支持更好， 便于后期的维护。简述下你对html 语义化的理解 (重点)
1：去掉或者丢失css样式时， 页面也能呈现出清晰易读的结构
2：有利于 SEO 和 搜索引擎的建立良好的沟通
3：方便其他设备的解析
4：便于团队开发，和后期的维护， 语义化更具可读性网站如何进行性能优化
A： content 内容方面：
1： 减少HTTP请求， 合并文件， css精灵图， 小图使用base64
2：减少DNS 查询， DNS 查询之前浏览器不能从这个主机下载任何文件
3：多余的中间访问， 避免重定向
4：使用Ajax 可缓存
5：非必须组件延迟加载
6：未来所需组件预加载
7：将资源放到不同的域下， 浏览器同时从一个域下下载资源的目录有限。
8：减少iframe和table标签的数量，会影响页面渲染顺序
B：Server 服务器请求方面
1：有限使用CDN加载请求
2：对组件使用Gzip进行文件体积压缩
3：Ajax使用 GET 请求
4：避免 src 的img标签
C：Cookie 方面
1：减小cookie大小
2：引入资源的域名， 不要包含cookie
D：CSS样式方面
1：将css样式表放在页面顶部加载
2：不使用css表达式
E：JavaScript 方面
1：将js脚本放在页面顶部
2：将js脚本和css样式，从外部引入
3：减少DOM的操作和访问
4： 合理的设计时间监听器，减少无意义和没必要的事件监听
F：图片方面
1：小图标优先使用字体图标
2：页面背景小图，优先设置好精灵图，并使用精灵图提高网站渲染和加载速度XHTML 和 HTML有什么区别
1: HTML是一种基本的WEB 网页设计语言， XHTML是基于 XML的置标语言
2:XHTML 元素必须被正确的嵌套
3:XHTML元素 必须被正确的关闭
4:标签名必须用小写字母
5:XHTML 文档必须用于根元素常用块元素， 行内元素，空元素有哪些
1：块级元素：div, ul, li, dl, dt, dd, h1-h6
2：行内元素：a, b, sapn, input, strong, select, label, em, button, textarea
3：空元素：没有内容的标签： br, meta, hr, link, input, img2：不常问：
浏览器的渲染过程
1：将html 解析为 dom树
2：处理css， 构成层叠样式表 CSSOM
3：将dom树 与CSSOM 合并为渲染树
4：根据 CSSOM 将渲染树的节点布局计算
5：将渲染树节点样式绘制到页面上
注意在渲染的过程中是自上而下的渲染， js会阻塞页面的渲染， 优先等待js执行完成， 如果在渲染的过程中改变了样式，会造成回流渲染· 前端由哪三层构成， 分别是什么
前端3剑客： html dom结构， css样式渲染 js行为操作· svg 和canvas 区别
svg 输出的图形都有独立的dom， 是一个独立的矢量图像， 放大缩小也不会失真
canvas 输出的是一整块画布， 放大缩小会失真label 标签的作用是什么， 是怎么用的
label 标签定义表单控制间的关系， 当用户选择该标签时， 浏览器会自动将焦点转移到和标签相关的表单控件上请说出 XHTML 和 HTML 的区别
1： 文档顶部的 DOCTYPE 声明不同， XHTML 的 DOCTYPE 顶部声明中明确确定了 XHTML DTD的写法
2：HTML 元素 必须正确嵌套，不能乱
3：属性名必须是小写
4：属性值必须加引号
5：标签必须有结束， 单标签必须使用 "/"来结束很多网站不常用 table iframe 这2个元素， 为什么
因为浏览器页面渲染的时候，从上至下的， 而table和 iframe 这两个元素会改变这样的渲染规则， 他们是要等待自己元素内容加载完成才整体渲染， 用户体验不好。请用 HTML 知识，解决seo优化问题
标题 - 概述 - 关键词 被业界称为 seo
1：title 尽量简洁， 写好后就不要再去修改了
2：description 对网页的概述，内容要精简，3次最佳，阅读起来要自然顺畅。
3：kewords关键词，数量控制在3-6个内， 想方设法让主关键词出现在页面中。xhtml的局限性
1: 语法上更加严格， 放弃了一些语义化不好的标签
2：必须要有 head， body 标签必须闭合
3：一些老的浏览器并不兼容
