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.mzph.cn/news/605076.shtml

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

相关文章

程序员做私活赚外快的好地方，今天推荐几个

程序员做私活赚外快的好地方，今天推荐几个

你们当程序员不会都拿着几千、万把块钱的死工资吧&#xff0c;今天为大家分享一些可以接私单的平台&#xff0c;我反正已经赚麻了。 如果你的工作相对没那么费时间&#xff0c;可以空闲的时候去接点私活。或者是还没有找工作之前&#xff0c;可以通过一些平台接一些兼职&#…
阅读更多...
【STM32】PWR电源控制

【STM32】PWR电源控制

1 PWR简介 PWR&#xff08;Power Control&#xff09;电源控制 PWR负责管理STM32内部的电源供电部分&#xff0c;可以实现可编程电压监测器和低功耗模式的功能 可编程电压监测器&#xff08;PVD&#xff09;可以监控VDD电源电压&#xff0c;当VDD下降到PVD阀值以下或上升到P…
阅读更多...
回首2023，厉兵秣马，启航2024

回首2023，厉兵秣马，启航2024

目录 回首风波的20232023&#xff0c;感恩相遇暂停发文发文狂潮感恩有你备战2024学习之余跆拳道比赛做手工diy 学习心路年初学习伊始心路其后学习后来心路 必须看配图说明 未知的2024Flag 回首风波的2023 2023&#xff0c;感恩相遇 还记得&#xff0c;22年末&#xff0c;23年…
阅读更多...
基于gitlab 12.8.0版本的完整镜像过程

基于gitlab 12.8.0版本的完整镜像过程

目前已在一台服务器上安装了gitlab 12.8.0&#xff0c;并且稳定运行了有几年了&#xff0c;其上面也创建了大量的项目。目前要求对该gitlab及其上面的所有仓库做一个完整的镜像。具体操作过程如下&#xff1a; 1、确认现有的gitlab的版本号 2、到gitlab官网下载相同版本号的gi…
阅读更多...
GitLab添加SSH key

GitLab添加SSH key

SSH 为 Secure Shell 的缩写&#xff0c;SSH 为建立在应用层基础上的安全协议。 SSH 是目前较可靠&#xff0c;专为远程登录会话和其他网络服务提供安全性的协议。 利用 SSH 协议可以有效防止远程管理过程中的信息泄露问题。 ssh-keygen 从客户端来看&#xff0c;SSH提供两种级…
阅读更多...
【信息论与编码】习题-判断题-第三部分

【信息论与编码】习题-判断题-第三部分

目录 判断题48. 利用状态极限稳态分布概率和符号的状态一步转移概率来求m阶马尔可夫信源的极限熵。49. 连续信源或模拟信号的信源编码的理论基础是限失真信源编码定理 。50. 具有一一对应关系的无噪信道的信道容量CH(X)。51. 在游程编码过程中&#xff0c;“0”游程和“1”游程…
阅读更多...
使用pytorch构建图卷积网络预测化学分子性质

使用pytorch构建图卷积网络预测化学分子性质

在本文中&#xff0c;我们将通过化学的视角探索图卷积网络&#xff0c;我们将尝试将网络的特征与自然科学中的传统模型进行比较&#xff0c;并思考为什么它的工作效果要比传统的方法好。 图和图神经网络 化学或物理中的模型通常是一个连续函数&#xff0c;例如yf(x₁&#xff…
阅读更多...
定展中2024上海国际智慧工地展览会

定展中2024上海国际智慧工地展览会

2024第十五届上海国际智慧工地展览会 2024 Shanghai International Smart Site Equipment Expo 时间&#xff1a;2024年03月26日-28日 地点&#xff1a;上海跨国采购会展中心 政策指导: 中华人民共和国国家发展和改革委员会 中华人民共和国工业和信息化部 上海城市数字转型应用…
阅读更多...
企业级 npm 私有仓库部署方案

企业级 npm 私有仓库部署方案

本文作者系360奇舞团前端开发工程师 淘宝 NPM 镜像站切换新域名时&#xff0c;放了一张知乎博主天猪的图片&#xff0c;如下&#xff1a; _图片来源&#xff1a;https://zhuanlan.zhihu.com/p/432578145 看着逐年增长的访问量&#xff0c;不禁让人感慨&#xff0c;npm 的出现&a…
阅读更多...
python爬虫实现获取招聘信息

python爬虫实现获取招聘信息

使用的python版本&#xff1a; 3.12.1 selenium版本&#xff1a;4.8.0 urllib版本&#xff1a;1.26.18 from selenium import webdriver from selenium.webdriver import ActionChains import timeimport re import xlwt import urllib.parsedef get_html(url):chrome_drive…
阅读更多...
系列十三、查询数据库中某个库、表、索引等所占空间的大小

系列十三、查询数据库中某个库、表、索引等所占空间的大小

一、information_schema数据库 1.1、概述 information_schema数据库是MySQL出厂默认带的一个数据库&#xff0c;不管我们是在Linux中安装MySQL还是在Windows中安装MySQL&#xff0c;安装好后都会有一个数据库information_schema&#xff0c;这个库中存放了其他库的所有信息。 …
阅读更多...
【数据结构】队列

【数据结构】队列

简单不先于复杂&#xff0c;而是在复杂之后。 文章目录 1. 队列1.1 队列的概念及结构1.2 队列的实现 2.栈和队列面试题3.概念选择题 1. 队列 1.1 队列的概念及结构 队列&#xff1a;只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作的特殊线性表&#xff0c…
阅读更多...
imgaug库指南（九）：从入门到精通的【图像增强】之旅

imgaug库指南（九）：从入门到精通的【图像增强】之旅

引言 在深度学习和计算机视觉的世界里&#xff0c;数据是模型训练的基石&#xff0c;其质量与数量直接影响着模型的性能。然而&#xff0c;获取大量高质量的标注数据往往需要耗费大量的时间和资源。正因如此&#xff0c;数据增强技术应运而生&#xff0c;成为了解决这一问题的…
阅读更多...
K8S Prometheus-rocketmq-exporter配置

K8S Prometheus-rocketmq-exporter配置

下载rocketmq-exporter 通过Docker仓库下载 docker pull sawyerlan/rocketmq-exporter:latest 然后打标签&#xff0c;推送到自己的仓库 也可通过代码自己build镜像 git clone GitHub - apache/rocketmq-exporter: Apache RocketMQ Prometheus Exporter 然后打标签&#x…
阅读更多...
爬虫实战 - 微博评论数据可视化

爬虫实战 - 微博评论数据可视化

简介&#xff1a; 我们都知道在数据比较少的情况下&#xff0c;我们是可以很轻易的获取到数据中的信息。但是当数据比较庞大的时候呢&#xff0c;我们就很难看出来了。尤其是面对现如今数以万计的数据&#xff0c;就更了。 不过好在我们可以通过计算机来帮我们进行分析&#…
阅读更多...
2.4 DEVICE GLOBAL MEMORY AND DATA TRANSFER

2.4 DEVICE GLOBAL MEMORY AND DATA TRANSFER

在当前的CUDA系统中&#xff0c;设备通常是带有自己的动态随机存取存储器&#xff08;DRAM&#xff09;的硬件卡。例如&#xff0c;NVIDIA GTX1080具有高达8 GB的DRAM&#xff0c;称为全局内存。我们将互换使用全局内存和设备内存这两个术语。为了在设备上执行内核&#xff0c;…
阅读更多...
西电期末1032.模式匹配

西电期末1032.模式匹配

一.题目 二.分析与思路 遍历判断 三.代码实现 #include<bits/stdc.h>//万能头 int main() {int n;scanf("%d",&n);int num[n];for(int i0;i<n;i){scanf("%d",&num[i]);}int ans0;//个数for(int i0;i<n-2;i){if(num[i]3&&nu…
阅读更多...
【Docker】数据卷容器

【Docker】数据卷容器

多个容器进行数据交换 这里引入一个数据卷容器的概念 以下介绍容器A与容器B进行数据交换的原理 假如容器A要与容器 B 进行数据交换&#xff0c; 首先创建一个容器C&#xff0c;将他挂载到数据卷&#xff0c;然后再将容器A与容器B挂载到容器C&#xff0c;这样做相当于容器A与…
阅读更多...
【EAI 006】ChatGPT for Robotics：将 ChatGPT 应用于机器人任务的提示词工程研究

【EAI 006】ChatGPT for Robotics：将 ChatGPT 应用于机器人任务的提示词工程研究

论文标题&#xff1a;ChatGPT for Robotics: Design Principles and Model Abilities 论文作者&#xff1a;Sai Vemprala, Rogerio Bonatti, Arthur Bucker, Ashish Kapoor 作者单位&#xff1a;Scaled Foundations, Microsoft Autonomous Systems and Robotics Research 论文原…
阅读更多...
YOLOv5改进 | 注意力篇 | ACmix注意力与卷积混合的模型（轻量化注意力机制）

YOLOv5改进 | 注意力篇 | ACmix注意力与卷积混合的模型（轻量化注意力机制）

一、本文介绍 本文给大家带来的改进机制是ACmix自注意力机制的改进版本，它的核心思想是，传统卷积操作和自注意力模块的大部分计算都可以通过1x1的卷积来实现。ACmix首先使用1x1卷积对输入特征图进行投影，生成一组中间特征，然后根据不同的范式，即自注意力和卷积方式，分别…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023