前端部分基础习题
⼀.HTML
1.DOCTYPE 的作⽤是什么？标准模式与兼容模式各有什么区别? 你知道多少种Doctype⽂档类型
声明⽂档的解析类型(documentpatMode)，避免浏览器的怪异模式。
!DOCTYPE是⼀种标准通⽤标记语⾔的⽂档类型声明，它的⽬的是要告诉浏览器它应该使⽤什么样的⽂档类型定义（DTD）来解析⽂档。
标准模式，浏览器按照W3C的标准解析渲染页⾯，这样⼀来，你的页⾯在所有的浏览器⾥显⽰的就都是⼀个样⼦了。标准模式的排版 和 JS 运作模式都是以该浏览器⽀持的最⾼标准运⾏。在兼容模式中，页⾯以宽松的向后兼容的⽅式显⽰，模拟⽼式浏览器的⾏为以防⽌站点⽆法⼯作！
具体区别
1.盒模型
在严格模式中 ：width是内容宽度 ，元素真正的宽度 = width;
在兼容模式中 ：width则是=width+padding+border
2.兼容模式下可设置百分⽐的⾼度和⾏内元素的⾼宽
在Standards模式下，给span等⾏内元素设置wdith和height都不会⽣效，⽽在兼容模式下，则会⽣效。
在standards模式下，⼀个元素的⾼度是由其包含的内容来决定的，如果⽗元素没有设置⾼度，⼦元素设置⼀个百分⽐的⾼度是⽆效的。3.⽤margin:0 auto设置⽔平居中在IE下会失效
使⽤margin:0 auto在standards模式下可以使元素⽔平居中，但在兼容模式下却会失效（⽤text-align属性解决）
4.兼容模式下Table中的字体属性不能继承上层的设置，white-space:pre会失效，设置图⽚的padding会失效
标签可声明三种 DTD 类型，分别表⽰严格版本、过渡版本以及基于框架的 HTML ⽂档。
HTML 4.01 规定了三种⽂档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML ⽂档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）⽤于呈现遵循最新标准的⽹页，⽽ Quirks（包容）模式（也就是松散呈现模式或者兼容模式）⽤于呈现为传统浏览器⽽设计的⽹页。
2.⾏内元素有哪些？块级元素有哪些？⾏内块元素有那些？
常见的内联元素有：
<div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<table>,
<address>,<blockquote>,<form>
块级元素：<a>,<span>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>,
<img>,<input>,<select>,<textarea>,<button>
⾏内块元素：img|input|select|textarea|button等，也被称为可置换元素（Replaced element）。
3.请说出五种html5的特性
1. 语义化标签：header,footer,nav etc.
2. canvas 画布
（3）audio, video
（4）drag 拖拽
（5）本地存储 localStorage, sessionStorage
（6）webSocket 长连接
（7）定位
（8）增强型表单 input number, datalist, keygen, output, progress
（9）svg ⽮量绘图
（10）webWorker 实现js多进程。
4.请写出⾄少5个HTML块元素标签。
<div>,<p>,<li>,<ol>,<ul><h1>~<h6>
5.a标签在新窗⼝打开链接怎么加属性？
如果是想让a链接在新窗⼝打开，只需要将target的属性设置为blank
6.请列举⼏个html新增的标签？
video    表⽰⼀段视频并提供播放的⽤户界⾯，audio    表⽰⾳频，time    ⽇期和时间值，source    为video和audio提供数据源，nav  导航，aside  在⼀边，article    ⽂章，footer    页尾，header    页眉，main  主要的，menu    菜单
canvas    表⽰位图区域，track    为video和audio指定字母，svg    定义⽮量图code    代码段，figure    和⽂档有关的图
例，figcaption    图例的说明，mark    ⾼亮的引⽤⽂字，Datalist    提供给其他控件的预定义选项，keygen    秘钥对⽣成器控
件，output    计算值，progress    进度条，embed    嵌⼊的外部资源，menuitem    ⽤户可点击的菜单项，template    模板，section 部分
7如何定义⼀个单选按钮？
input[type='radio']radio定义单选按钮
8.简述src与href的区别？
href 是指向⽹络资源所在位置，建bai⽴和当前元素（锚点）或当前⽂档（链接）之间的链接，⽤于超链接。
src是指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应⽤到⽂档内，例如js脚本，img图⽚和frame等元素。
9. <img>标签上的title属性与alt属性的区别是什么？
alt是在图⽚不能正常加载时候显⽰的提⽰语
title属性是⿏标划上去显⽰的内容
10.如何处理html5新标签的浏览器兼容问题？
1. 使⽤静态资源的html5shiv包（2）载⼊后，初始化新标签的css
11. 分别写出以下⼏个HTML标签：⽂字加粗、下标、居中、斜体
加粗：、，下标：，居中：，字体：<i>
12. 对WEB标准以及W3C的理解与认识
标签闭合、标签⼩写、不乱嵌套、提⾼搜索机器⼈搜索⼏率、
使⽤外 链css和js脚本、
结构⾏为表现的分离、⽂件下载与页⾯速度更快、
内容能被更多的⽤户所访问、
内容能被更⼴泛的设备所访问、
更少的代码和组件，容易维护、改版⽅便，不需要变动页⾯内容、
提供打印版本⽽不需要复制内容、
提⾼⽹站易⽤性。
13.前端页⾯有哪三层构成，分别是什么，作⽤是什么？
最准确的⽹页设计思路是把⽹页分成三个层次，即：结构层、样式层、⾏为层。
HTML：结构层：
⽹页的结构或内容层是该页⾯的基础HTML代码。
CSS：样式层：
该层指⽰结构化HTML⽂档如何看待⽹站的访问者，并由CSS（层叠样式表）定义。
JavaScript：⾏为层
⾏为层使⽹站具有交互性，允许页⾯响应⽤户操作或基于⼀组条件进⾏更改
14.img的常⽤属性
Src  图像的源⽂件
Alt  提⽰⽂字
width,height  ⾼度，宽度
Border  边框
Vspac  垂直间距
Hspace  ⽔平间距
15.字体加粗的⽅法
1. ⽤CSS中font-weight:bold样式给字体加粗
（2）⽤html中的<strong>加粗标签
（3）⽤html中的<b>加粗标签
16.请讲述下iframe框架的优缺点
优：　iframe能够原封不动地把嵌⼊的⽹页展现出来。如果遇到加载缓慢的第三⽅内容，如图标和⼴告等，可以⽤iframe来解决缺：　会产⽣很多页⾯，不容易管理。很多的移动设备（PDA⼿机）⽆法完全显⽰框架，设备兼容性差
现在基本上都是⽤Ajax来代替iframe，iframe已渐渐退出了前端开发。
1. input不可编辑，和必填项属性分别是什么。
disabled不可被编辑； required必填项；
1. 请写出input常⽤的13种type类型，并写出每种类型的应⽤场景
text 这是默认的输⼊类型。
password 输⼊字符会经过掩码处理，表现为⼀连串的点。
file 定义⽂件上传控件。
radio 定义单选按钮
checkbox 定义复选框
hidden 定义隐藏的输⼊字段，⽤于在表单中添加对⽤户不可见，
button 定义按钮
image 定义图像形式的提交按钮
reset 定义重置按钮，重置按钮会清除表单中的所有数据
submit 定义提交按钮，提交按钮会把表单数据发送到服务器
color 定义调⾊板
tel 定义包含电话号码的输⼊域
email 定义包含email地址的输⼊域
url 定义包含URL地址的输⼊域
search 定义搜索域
number 定义包含数值的输⼊域
range 定义包含⼀定范围内数字值的输⼊域
date 定义选取⽇、⽉、年的输⼊域
month 定义选取⽉、年的输⼊域
week 定义选取周、年的输⼊域
time 定义选取⽉、年的输⼊域
datetime 定义选取时间、⽇ ⽉、年的输⼊域(UTC时间)
datetime-local 定义选取时间、⽇ ⽉、年的输⼊域(本地时间)
1. 请简述⼀下你对语义化标签的理解
⒈⽤正确的标签做正确的事情
⒉HTML语义化让页⾯的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析；
⒊及时在没有样式CSS情况下也以⼀种⽂档格式显⽰，并且时任意阅读的；
⒋搜索引擎的爬⾍也依赖于HTML标记来确定上下⽂和各个关键字的权重，利于SEO；
⒌时阅读源代码的⼈对⽹站更容易将⽹站分块，便于阅读维护理解
20. 如何区分html和html5
1、在⽂档声明上，html有很长的⼀段代码，并且很难记住这段代码，都只是靠⼯具直接⽣成，⽽html5却不同，只有简简单单的声明，也⽅便⼈们的记忆，更加精简。
2、在结构语义上；html4.0没有体现结构语义化的标签。html5在语义上却有很⼤的优势，提供了⼀些新的html5标签。
⼆.CSS
1.css性能优化的⽅法
1.异步加载CSS
2.js，css⽂件压缩、
3.有选择地使⽤选择器
4.优化重排与重绘
1. 不要使⽤@import
2. 减少闭包的使⽤
3. 减少dom操作
4. 使⽤精灵图和雪碧图
2.Css选择器有⼏种？选择器的优先级是怎样的。
元素选择器，id选择器，calss 选择器，后代选择器，⼦代选
择器，伪类选择器，通配符
内联样式> id>class>元素>通配符>继承样式
1. 浮动的原理
将排成⼀列的元素变成⼀⾏，脱离⽂档流。
主要是为了让⼀些标签并排显⽰
4.定位有⼏种，他们的特点分别是什么？
STATIC(静态）
HTML元素的默认值，不受top、bottom、left、right属性影响，元素出现在正常的⽂档流中
RELATIVE(相对）前端websocket怎么用
相对定位, 特点：不脱离⽂档流的布局，受top、bottom、left、right属性影响，只改变⾃⾝的位置，在⽂档流原先的位置遗留空⽩区域。
ABSOLUTE(绝对)
绝对定位 特点：脱离⽂档流的布局，遗留下来的空间由后⾯的元素填充。定位的起始位置为最近的⽗元素(position不为static)，否则为html ⽂档本⾝。
FIXED(固定)
固定定位, 特点：类似于absolute，但不随着滚动条的移动⽽改变位置。元素的位置相对于浏览器窗⼝是固定位置
粘性定位
粘性定位的语法格式如下：
选择器 { position: sticky; top: 10px; }
1、粘性定位可以认为是相对定位和固定定位的混合；
2、粘性定位的元素是以浏览器的可视窗⼝为参照点移动元素；
3、粘性定位继续占有原先的位置；
4、必须添加top、bottom、left、right其中⼀个才有效；
5、⼀般都是跟页⾯滚动搭配使⽤；
5. position的值relative和absolute的定位原点是什么？

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。