前端面试理论题

简介: 前端面试理论题
  1. 什么是HTML?

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

2、DOCTYPE 的作用是什么?标准与兼容模式(混杂模式)各有什么区别?

DOCTYPE 的作用是告知浏览器的解析器用什么文档标准解析这个文档。

标准模式:用于呈现最新浏览器。

兼容模式:用于呈现老式的浏览器。

简单的说,就是尽可能的显示能显示的东西给用户看。

3、html5为什么只需要写<!doctype html>? 你知道多少种Doctype文档类型?

html5不基于SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为。

有3种文档类型定义分别是:过渡的(Transitional)、严格的(Strict)和框架(Frameset)。

4、编码集的作用是什么?说出几个常见的编码集?为什么常用utf-8?

编码集在数据传输的作用 UNICODE 相当于规定了字符对应的码值,这个码值必须编码成字节的形式去传输和存储。

最常见的编码方式是: UTF-8,另外还有 UTF-16,UTF-32 等。

UTF-8 是 UNICODE 的一种变长字符编码,即 RFC 3629。简单的说大字符集可以解决多种语言文本显示问题,从而实现应用国际化和本地化。

对系统来讲,UTF-8 编码可以通过屏蔽位和移位操作快速读写,排序更加容易。UTF-8 是字节顺序无关的,它的字节顺序在所有系统中都是一样的。因此 UTF-8 具有更高的性能。

5、mate viewport是什么?原理是什么?

Viewprot是用户网页的可视区域。

该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。

6、行内元素有哪些?块级元素有哪些? 行内块元素有那些?

行内元素有: a、 b、span、br、 i、 s。

块级元素有:div、 ul、ol、li、h1...h6、p、td、th、form。

行内块元素有:img、input、textarea。

7、简述a标签target属性的取值和作用?

target可能的值:

blank:在新窗口/选项卡中打开。

self:在同一框架中打开。

parent:在父框架中打开。

top:在整个窗口中打开。

 

8、<img>标签上的title属性与alt属性的区别是什么?

title;对链接起注释作用,图片正常显示使鼠标划上去会显示他的值。

alt;对图片起注释作用,图片无法加载的时候会显示它的值。

9、对WEB标准以及W3C的理解与认识

web标准,就是将页面的结构、表现和行为这三部分独立分开,使其更具有模块化。

W3C对web标准提出了规范化的要求,也就是在实际编程中的一些代码规范。

10、前端页面有哪三层构成,分别是什么,作用是什么?

结构层:HTML   搭建文档的结构

样式层:CSS   设置文档的呈现效果

行为层:JS     实现文档的动态行为

11、什么是iframe?请讲述一下iframe框架的优缺点?

1.iframe是html元素,用于在网页中内嵌另一个网页。

2.iframe默认有一个宽高,存在边界

3.iframe是一个行内快级元素,可以通过display修改

优点:

  1. iframe 能够原封不动的把嵌入的网页展现出来。
  2. 如果有多个网页引用 iframe,只需要修改 iframe 的内容,就可以实现调用的每一个页面内容的更改。

缺点:

  1. 框架结构中出现各种滚动条
  2. iframe 会阻塞主页面的 Onload 事件

12、form 的作用?

标签用于为用户输入创建 HTML 表单。  表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

表单用于向服务器传输数据。

13、HTML中有哪些属于表单元素?那些属于表格元素?请分别列举5个并说明用途?

HTML中常用的表单元素包括:文本区域(TEXTAREA),列表框(SELECT),文本输入框(INPUT  type=text),密码输入框(INPUT type=password),单选输入框(INPUT  type=radio),复选输入框(INPUT type=checkbox),重置按钮、提交按钮、隐藏域、等等。

       基本的表格

 有三个元素是每个表格都必须要有的: table、tr和td。元素table,是HTML用以支持表格式内容的核心元素,它表示HTML文档中的表格。

14、如何定义一个单选按钮?

<input type="radio" />

15、input只读,禁用,必填,提示词(占位符)属性分别是什么?

readonly  属性规定输入字段为只读(不能修改)

disabled  属性规定输入字段是禁用的

required  属性规定必需在提交之前填写输入字段。

Placeholder(占位符) 是 HTML5 新增的一个 HTML 属性,用来对可输入字段的期望值提供提示信息,

16、请写出input常用的13种type类型,并写出每种类型的应用场景

text  默认的输入类型。

password 密码,表现为一连串的点。

file  文件上传控件。

radio  单选按钮

checkbox  复选框

hidden  隐藏的输入字段,用于在表单中添加对用户不可见

button 按钮

image  图像形式的提交按钮

reset  重置按钮,清除表单中所有数据

submit  提交按钮,提交按钮会把表单数据发送到服务器

color  调色板

tel  包含电话号码的输入域

search  搜索域

number 包含数值的输入域

range 包含一定范围内数字值的输入域

date  选取日、月、年的输入域

month 选取月、年的输入域

week  选取周、年的输入域

time 选取月、年的输入域

datetime 选取时间、日 月、年的输入域(UTC时间)

datetime-local 选取时间、日 月、年的输入域(本地时间)

17、input的disabled 属性和 readonly 属性的区别?

readonly 属性规定输入字段为只读。

只读字段是不能修改的。不过,用户仍然可以使用 tab 键切换到该字段,还可以选中或拷贝其文本。

readonly 属性可以防止用户对值进行修改,直到满足某些条件为止(比如选中了一个复选框)。然后,需要使用 JavaScript 消除 readonly 值,将输入字段切换到可编辑状态。

readonly 属性可与<input type="text"> 或 <input type="password"> 配合使用。

disabled 属性规定应该禁用 input 元素。

被禁用的 input 元素既不可用,也不可点击。可以设置 disabled 属性,直到满足某些其他的条件为止(比如选择了一个复选框等等)。然后,就需要通过 JavaScript 来删除 disabled 值,将 input 元素的值切换为可用。

18、label的作用是什么?是怎么用的?

label标签是用来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。

主要有以下两种用法用法:


<label for="name">Number:</label>

<input type="text" id="name">


<label>Date:<input type ="text" /></label>

19、datalist 是什么?有什么用?

datalist是html5中出现的新标签,它需要配合input输入框来使用,它的作用就是定义了input可能要输入的值(可以被快捷选择),

定义一个datalist的标签需要给他一个id,input就是根据id来与其绑定的,datalist中的option就是和列表一样,里面的每个数据都是可被用户所选择的

20、input 的 name 属性的作用?

1.name 属性规定 input 元素的名称

2.name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据

3.只有设置了 name 属性的表单元素才能在提交表单时传递它们的值,因为服务端获取表单提交的数据是通过表单元素的 name 属性的值而得到的,没有 name 属性就无法得到表单元素提交给服务端的值

21、相对、绝对路径的区别是什么?

相对路径:从一个目录为起点到另外一个的目录的路径。

绝对路径:从根目录为起点到某一个目录的路径。

目录
相关文章
|
2天前
|
存储 缓存 前端开发
100道 IT名企前端面试真题,Web前端阿里等大厂面试题汇总
100道 IT名企前端面试真题,Web前端阿里等大厂面试题汇总
|
2天前
|
移动开发 前端开发 JavaScript
【前端面试】前端面试题300道~~熬夜吐血整理,2024年最新大厂面试经验分享稿
【前端面试】前端面试题300道~~熬夜吐血整理,2024年最新大厂面试经验分享稿
|
2天前
|
前端开发 JavaScript 中间件
Vue3整合VxeTable,2024大厂前端面试
Vue3整合VxeTable,2024大厂前端面试
|
2天前
|
前端开发 JavaScript
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
|
2天前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
|
2天前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效(1),头条前端面试节奏
10款精美的web前端源码的特效(1),头条前端面试节奏
|
2天前
|
JavaScript 前端开发 算法
JQuery 基本使用,2024BAT大厂Web前端社招面试题
JQuery 基本使用,2024BAT大厂Web前端社招面试题
JQuery 基本使用,2024BAT大厂Web前端社招面试题
|
2天前
|
移动开发 前端开发 JavaScript
Java和web前端,IT新人该如何选择?,2024年最新Web前端内存优化面试
Java和web前端,IT新人该如何选择?,2024年最新Web前端内存优化面试
|
2天前
|
前端开发 JavaScript
JavaScript:this-关键字,2024中级前端开发面试解答
JavaScript:this-关键字,2024中级前端开发面试解答
|
2天前
|
前端开发 JavaScript
Web前端开发之面试题全解析 一,2024年最新面经牛客
Web前端开发之面试题全解析 一,2024年最新面经牛客