web前端面试题

最新推荐文章于 2024-03-04 22:31:00 发布

无言kl

最新推荐文章于 2024-03-04 22:31:00 发布

阅读量785

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/w1285695868/article/details/126815858

版权

一、HTML

1.请分别列举一些块级元素和内联元素。

（1）块级元素

块级元素是指那些在浏览器显示中占据一行，并且排斥与其他元素统一行的元素。块级元素中可以设置 width、height、padding、margin 等属性。

常见的块级元素：div、h1-h6、form、p、li、ol、li、dl、dt、dd、address、caption、table、tbody、td、tfoot、th、thead、tr

（2）内联元素

和相邻的内联元素在同一行;宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，

常见的内联元素：a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s ,samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

2.请分别说明head中base,meta这两个标签的作用。

（1）base

作用：标签用于为页面上所有的链接设置默认URL地址或目标target。当HTML5文档使用了相对路径时，浏览器会用base标签指定的URL进行补全

<base href="../">
<!-- ./1.css 会被理解为 ../1.css -->
<link rel="stylesheet" href="./1.css">

<!-- 2.mp4 会被理解为 ../2.mp4 -->
<video src="2.mp4"></video>

<!-- ../3.mp3 会被理解为 ../../3.mp3 -->
<audio src="../3.mp3"></audio>

<!-- 像下面这2种绝对路径就不会受影响 -->
<a href="/aaa"></a>
<script src="D:///desk/test/node_modules/vue/dist/vue.js"></script>

（2）meta

作用：

声明当前页面的字符集：charset属性，防止出现错误
用于定义网页的一些元信息：

name 属性

1、＜meta name="Generator" contect=""＞用以说明生成工具（如Microsoft FrontPage 4.0）等；

2、＜meta name="KEYWords" contect=""＞向搜索引擎说明你的网页的关键词；

3、＜meta name="DEscription" contect=""＞告诉搜索引擎你的站点的主要内容；

4、＜meta name="Author" contect="你的姓名"＞告诉搜索引擎你的站点的制作的作者；

5、＜meta name="Robots" contect="all|none|index|noindex|follow|nofollow"＞

3.请写出空格、小于号、大于号、和号（&）的字符实体名称。

描述	实体名称
空格	&nbsp；
小于号	&lt；
大于号	&rt；
和号	&amp；

4.请列举一些input标签的type属性值

（1）单行输入框< input type=“text”/>

单行文本输入框常用来输入简短的信息，如用户名、账号等，常用的属性有name、value、 maxlength。

（2）密码输入框< input type=" password"/>

密码输入框用来输入密码，其内容将以圆点的形式显示。

（3）单选按钮< input type=" radio"/>

单选按钮用于单项选择，如选择性别、是否操作等。需要注意的是，在定义单选按钮时，必须为同一组中的选项指定相同的name值，这样“单选”才会生效。此外，可以对单选按钮应用 checked属性，指定默认选中项。

（4）复选框< input type=" checkbox"/>

复选框常用于多项选择，如选择兴趣、爱好等，可对其应用 checked属性，指定默认选中项。

（5）提交按钮< nput type=" 'submit"/>

提交按钮是表单中的核心控件，用户完成信息的输入后一般都需要单击提交按钮才能完成表单数据的提交。可以对其应用 value属性，改变提交按钮上的默认文本。

（6）重置按钮< input type=" reset"/>

当用户输入的信息有误时，可单击重置按钮取消已输入的所有表单信息。可以对其应用 value属性，改变重置按钮上的默认文本。

（7）图像形式的提交按钮< input type=" image"/>

图像形式的提交按钮与普通的提交按钮在功能上基本相同，只是它用图像替代了默认的按钮，外观上更加美观。需要注意的是，必须为其定义src属性指定图像的url地址。

（8）隐藏域< input type=" hidden"/>

定义隐藏的输入字段，用于在表单中添加对用户不可见，但需要提交的额外数据。注意，disabled特性无法与type特性值为hidden的input标签配合使用。

<!--点击提交按钮后，隐藏域的内容test=12会包含在URL中-->
<form name="form" action="#">
    <input type="hidden" name="test" value="12">
    <input type="submit">
</form>

（9）普通按钮< input type=" button"/>

定义按钮，没有任何默认行为，常用于用户点击时触发JS脚本。

新增输入控件有13种
color    定义调色板
tel      定义包含电话号码的输入域
email    定义包含email地址的输入域
url      定义包含URL地址的输入域
search   定义搜索域
number   定义包含数值的输入域
range    定义包含一定范围内数字值的输入域
date     定义选取日、月、年的输入域 
month    定义选取月、年的输入域
week     定义选取周、年的输入域
time     定义选取月、年的输入域
datetime 定义选取时间、日 月、年的输入域(UTC时间)
datetime-local 定义选取时间、日 月、年的输入域(本地时间)

5.请说明如何获取屏幕和视口的宽高。

视口

window.innerHeight - 浏览器窗口的内部高度 
window.innerWidth - 浏览器窗口的内部宽度
//or
document.documentElement.clientHeight
document.documentElement.clientWidth
//or
document.body.clientHeight
document.body.clientWidth

屏幕

//包含windows任务栏的整个屏幕宽
window.screen.width
window.screen.height

//整个浏览器的宽度
window.outerWidth
window.outerHeight

6.请说明如何用canvas绘制一个红色的矩形。

function draw(id) {
     
    var canvas = document.getElementById(id); //取得canvas的对象
    if (canvas == null)  
        return false;  
    var context = canvas.getContext('2d');