web前端开发技术复习问答题

目录

1.简述常见单标签和双标签有哪些？

2.常见块级元素和行级元素有哪些？

3.简述常见的列表有哪些？他们有什么区别？

4.简述超链接的href属性值如何设置？有什么区别

5.CSS基本语法

6. css中常见的引入方式有几种，分别是哪些？

 7.css中常见的选择器类型有哪些？

 8.CSS继承与层叠（优先级）

 9.字体样式：常见属性有哪些？如何设置文本水平和垂直方向居中？

 10.文本装饰线属性是什么，可以设置哪些样式？（文本样式）

 11.div盒子模型由几部分组成，分别有哪些？

 12.CSS3边框

 13.transform属性可以设置哪些子属性？

 14.transition和animation的区别是什么？

 15.Array数组对象方法。

16.WebStorage缓存方式有多少种，有哪些操作？

附加： 

JavaScript邮箱验证判断编程题：

 localStorage对象的运用编程：

1.简述常见单标签和双标签有哪些？

双标记：<p></p>,<span></span>,<table></table>,<div></div>,<ul></ul>,<a></a>...

单标记:<hr>,<br>,<img>,<lable>,<link>,<input>...

2.常见块级元素和行级元素有哪些？

块级元素：<div></div>,<p></p>,<h1~h6></h1~h6>,<ul></ul>,<ol></ol>...

行级元素：<span></span>,<a></a>,<img>,<em></em>,<label>...

3.简述常见的列表有哪些？他们有什么区别？

有序列表<ol></ol>,无序列表<ul></ul>,定义列表<dl></dl>,菜单列表<menu></menu>。

有序列表有序号，可以使用数字、字母、罗马数字等对列表内容进行排序；

无序列表是没有序号的，可以使用实心圆、空心圆、实心方形对列表进行排序；

有序列表和无序列表列表项都是<li></li>；

菜单列表可以创建程序菜单、工具栏；

定义列表可以用于创建术语及其定义的列表，包含<dd></dd>,<dt></dt>。

4.简述超链接的href属性值如何设置？有什么区别

分为绝对路径和相对路径，根路径。

绝对路径一般是从盘符出发或者协议网页，包含协议、域名、完整路径；

相对路径是相对于当前文件或目录位置的路径，它依赖于文件的当前位置，因此在文件移动时，路径也随之改变。

根路径是始终相对于网站根目录的路径。它以斜杠(/)开始，指向从网站根目录开始的资源，不管当前文件在哪里。

5.CSS基本语法

CSS样式表也称为级联样式表，用来进行网页风格设计。通过定义标记或者属性的外在表现对页面结构风格进行控制，是一个包含一个或多个规则的文本文件。

主要由选择器和声明两部分组成。

6. css中常见的引入方式有几种，分别是哪些？

CSS常见引用方法有：内联样式表、内部样式表、外部样式表。

 7.css中常见的选择器类型有哪些？

 常见CSS选择器有标记选择器、类选择器、id选择器、伪类选择器。

 8.CSS继承与层叠（优先级）

行内样式>id样式>class样式>标记样式>通配符

①<p style=”font-weight:700;”>

②<div id=”aa”>——#aa{}

③<div class=”dd”>——.dd{}

④<p></p>——p{}

 9.字体样式：常见属性有哪些？如何设置文本水平和垂直方向居中？

字体常见属性有font-style(样式)、font-size(大小)、font-weight(粗细)…可以通过text-align:center;设置水平居中,通过vertical-align:middle;设置垂直居中。

 10.文本装饰线属性是什么，可以设置哪些样式？（文本样式）

 文本装饰线是text-decoration，可以添加上划线（overline）、下划线（underline）、删除线（line-through）。

 11.div盒子模型由几部分组成，分别有哪些？

盒模型由边界、边框、填充、内容组成。

 12.CSS3边框

 13.transform属性可以设置哪些子属性？

 

 14.transition和animation的区别是什么？

Transition是CSS3过渡属性，是一种元素逐渐转变为另外一种样式的效果，用于某个属性的某个状态发生改变时过渡属性值。

Animation是CSS3动画属性，是元素逐渐变化为另一种样式的效果，相较于transition含有更复杂的关键帧动画，可以定义多个序列。

 15.Array数组对象方法。

  • join(分隔符):将数组所有元素放在一个字符串中，用分隔符隔开。
  • pop():删除并返回最后一个元素。
  • push(新元素):将新元素加在数组的最后，返回新的长度。
  • shift():删除并返回数组的第一个元素。
  • unshift(新元素):添加元素在数组的第一个位置，并返回新长度。
  • sort():对数组进行排序。
  • reverse():对数组顺序进行颠倒
  • splice(index,n,item1,item2,…):删除数组中index位置连续的n个元素，并添加新的元素item1，item2…前两个属性必须写，后面添加的元素可以不写。
  • slice(start,end):返回一个从start到end-1的范围的新数组。
  • toString():把数组转为字符串，并返回结果
  • toLocaleString():把数组转为本地元素并返回结果
  • concat():连接两个或更多数组，并返回结果

16.WebStorage缓存方式有多少种，有哪些操作？

两种缓存方法：localStorage持久化数据存储，sessionStorage会话式数据存储。

localStorage方法:

  • localStorage.setItem(key,value):保存数据
  • localStorage.getItem(key):获取数据
  • localStorage.removeItem(key):删除单个数据
  • localStorage.clear():删除所有数据
  • localStorage.key(index):得到某个索引的key

sessionStorage方法:

  • sessionStorage.setItem(key,value):保存数据
  • sessionStorage.getItem(key):获取数据
  • sessionStorage.removeItem(key):删除单个数据
  • sessionStorage.clear():删除所有数据
  • sessionStorage.key(index):得到某个索引的key

附加： 

JavaScript邮箱验证判断编程题：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>判断邮箱地址的合法性</title><script type="text/javascript">function emailCheck(){var emailString=document.form1.email.value;var emailLength=emailString.length;var index1=emailString.indexOf("@");var index2=emailString.lastIndexOf(".");var msg="验证邮箱地址实例:\n\n";msg+="邮箱地址:"+emailString+"\n";msg+="验证信息:";var emailFlag=false;if(index1!=-1&&index2!=-1&&index2-index1>0){if(index1>0&&index2<emailLength-1){emailFlag=(index2>=index1+3)?true:false;}else{emailFlag=false;}}if(!emailFlag){msg+="邮箱地址不合法!\n\n"msg+="不能同时满足如下条件:\n";msg+="1.邮件地址中同时包含'@'和'.'字符;\n";msg+="2.'@'后必须有'.'，且中间至少间隔两个字符;\n"msg+="3.'@'不为第一个字符，'.'不为最后一个字符。\n"}else{msg+="邮箱地址合法!\n\n"msg+="能同时满足如下条件:\n";msg+="1.邮件地址中同时包含'@'和'.'字符;\n";msg+="2.'@'后必须有'.'，且中间至少间隔两个字符;\n"msg+="3.'@'不为第一个字符，'.'不为最后一个字符。\n"}alert(msg);}</script>
</head>
<body><form name="form1">邮箱地址：<input type="text" name="email" value="@"><input type="button" value="验证邮箱地址" onclick="emailCheck()"></form>
</body>
</html>

 localStorage对象的运用编程：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>localStorage对象的运用</title><style>div{text-align: center;padding: 20px;margin:0 auto;border:10px right #005A9C;width:350px;height: 250px;}</style>
</head>
<body><div><h3>评选</h3><img src="01.jpg" width="80" height="80" ><br><p id="result"></p><p>刷新页面票数会增加</p><p>关闭浏览器后重试仍会增加</p></div><script type="text/javascript">if(localStorage.tickets){localStorage.tickets=parseInt(localStorage.tickets)+1;}else{localStorage.tickets=1;}document.getElementById("result").innerHTML="已投:"+localStorage.tickets+"票";</script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/329681.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

前端性能优化之图像优化

前端性能优化之图像优化

图像优化问题主要可以分为两方面&#xff1a;图像的选取和使用&#xff0c;图像的加载和显示。 图像基础 HTTP Archive上的数据显示&#xff0c;网站传输的数据中&#xff0c;60%的资源都是由各种图像文件组成的&#xff0c;当然这些是将各类型网站平均的结果&#xff0c;单独…
阅读更多...
【Docker】docker部署conda并激活环境

【Docker】docker部署conda并激活环境

原文作者&#xff1a;我辈李想 版权声明&#xff1a;文章原创&#xff0c;转载时请务必加上原文超链接、作者信息和本声明。 文章目录 前言一、新建dockerfile文件二、使用build创建镜像1.报错&#xff1a;Your shell has not been properly configured to use conda activate.…
阅读更多...
C练习——鸡兔同笼

C练习——鸡兔同笼

题目&#xff1a; 有若干只鸡和兔子在同一个笼子里&#xff0c;从上面数&#xff0c;有98个头&#xff1b;从下面数&#xff0c;有386只脚。问笼中各有几只鸡和兔&#xff1f; 解析&#xff1a; 数学上列二元一次方程组求解&#xff0c;所以采用穷举法&#xff0c;但可以缩小…
阅读更多...
阿里云服务器ECS入门与基础运维

阿里云服务器ECS入门与基础运维

一、云服务器简介 1、服务器&#xff1a; (1) 概念&#xff1a; 服务器本身就是一种电脑&#xff0c;同样具备CPU、内存、硬盘、网卡、电源等硬件。 互联网对外提供网站、游戏、在线会议、网盘等服务&#xff0c;都需要将这些互联网服务部署到服务器中。 (2) 特点&#xf…
阅读更多...
Java二叉树的遍历以及最大深度问题

Java二叉树的遍历以及最大深度问题

Java学习面试指南&#xff1a;https://javaxiaobear.cn 1、树的相关概念 1、树的基本定义 树是我们计算机中非常重要的一种数据结构&#xff0c;同时使用树这种数据结构&#xff0c;可以描述现实生活中的很多事物&#xff0c;例如家谱、单位的组织架构、等等。 树是由n&#…
阅读更多...
支付宝扫码(Easy版)支付实现

支付宝扫码(Easy版)支付实现

文章目录 一 技术准备1.1 二维码技术&#xff08;java&#xff09;1.2 支付宝沙箱环境准备1.3 内网穿透 二 支付宝支付相关知识2.1 各种支付方式2.2 扫码付接入流程2.3 系统交互流程(时序图)2.4 加密逻辑 三 扫码支付实现3.1 添加maven依赖&#xff08;Easy版&#xff09;3.2 完…
阅读更多...
图神经网络｜9.3 邻接矩阵的变换

图神经网络｜9.3 邻接矩阵的变换

由于邻接矩阵中一般不会&#xff08;i,i&#xff09;等于1&#xff0c;除非第i个点上有自环。 而如果用邻接矩阵去乘上特征矩阵&#xff0c;那么将丢失自身向自身的贡献。 此时可以再邻接矩阵的基础上&#xff0c;再加上一个单位阵&#xff0c;从而使得最终的结果包含自身对整体…
阅读更多...
VS2017 CMake编译Opencv

VS2017 CMake编译Opencv

先下载opencv4.2.0源码以及opencv_contrib-4.2.0 地址链接&#xff1a;https://pan.baidu.com/s/1AgFsiH4uMqTRJftNXAqmTw?pwd3663 提取码&#xff1a;3663 先建立一个opencv_debug和opencv_release文件夹这两个都是为了后续存放编译好的debug版本和release版本opencv的&#…
阅读更多...
mnn-llm: 大语言模型端侧CPU推理优化

mnn-llm: 大语言模型端侧CPU推理优化

在大语言模型(LLM)端侧部署上&#xff0c;基于 MNN 实现的 mnn-llm 项目已经展现出业界领先的性能&#xff0c;特别是在 ARM 架构的 CPU 上。目前利用 mnn-llm 的推理能力&#xff0c;qwen-1.8b在mnn-llm的驱动下能够在移动端达到端侧实时会话的能力&#xff0c;能够在较低内存…
阅读更多...
解决 Postman 报错问题：一份综合指南

解决 Postman 报错问题：一份综合指南

Postman 是一个流行的 API 测试工具&#xff0c;它可以帮助开发者和测试人员快速地创建和发送各种 HTTP 请求&#xff0c;并查看响应结果。但是&#xff0c;在使用 Postman 的过程中&#xff0c;有时候会遇到一些报错或异常情况&#xff0c;影响了正常的测试流程。本文将介绍一…
阅读更多...
PHP代码审计之实战审代码篇2

PHP代码审计之实战审代码篇2

4. 仔细观察如下代码&#xff0c;思考代码有什么缺陷&#xff0c;可能由此引发什么样的问题&#xff1f; <?php require_once("/home/rconfig/classes/usersession.class.php"); require_once("/home/rconfig/classes/ADLog.class.php"); require_onc…
阅读更多...
Python怎么修改进程名称

Python怎么修改进程名称

目录 一、进程名称的概念 二、Python修改进程名称的方法 三、代码示例与使用说明 四、注意事项 五、适用场景 六、总结 Python是一种强大的编程语言&#xff0c;广泛应用于各种应用程序的开发。在Python中&#xff0c;修改进程名称可以通过多种方式实现。下面我们将深入探…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023