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

news2024/9/27 12:13:10

目录

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.coloradmin.cn/o/1364169.html

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

相关文章

共聘猫品牌创始人杨涛宾：从海关到人力资源行业的华丽转身

共聘猫品牌创始人杨涛宾：从海关到人力资源行业的华丽转身

专访山东共聘猫教育科技集团董事长杨涛宾 2024新年的第一次人物专访&#xff0c;我们来到山东济南。大力财经的采访对象是创业者杨涛宾&#xff0c;他是山东共聘猫教育科技集团董事长&#xff0c;也是共聘猫品牌创始人和主要打造者。 我们面前的杨涛宾外表朴实&#xff0c;举…
阅读更多...
图神经网络入门

图神经网络入门

图神经网络&#xff08;GNN&#xff09;是一组在图领域工作的深度学习方法。 这些网络最近已应用于多个领域&#xff0c;包括&#xff1a; 组合优化、推荐系统、计算机视觉—仅举几例。 这些网络还可用于对大型系统进行建模&#xff0c;例如社交网络、蛋白质-蛋白质相互作用网络…
阅读更多...
使用docker镜像快速构建TVM

使用docker镜像快速构建TVM

TVM docekr编译 文章目录 TVM docekr编译使用云镜像使用docker进行本地构建 使用云镜像 下载docker镜像 如果对docker指令不熟悉可以查阅&#xff1a; docker cli命令行 AP I TVM docker hub镜像 docker pull tlcpack/ci-cpu:20230604-060130-0af9ff90e运行container docker…
阅读更多...
Java面试——框架篇

Java面试——框架篇

1、Spring框架中的单例bean是线程安全的吗&#xff1f; 所谓单例就是所有的请求都用一个对象来处理&#xff0c;而多例则指每个请求用一个新的对象来处理。 结论&#xff1a;线程不安全。 Spring框架中有一个Scope注解&#xff0c;默认的值就是singleton&#xff0c;单例的。一…
阅读更多...
Java学习——设计模式——行为型模式2

Java学习——设计模式——行为型模式2

文章目录 行为型模式状态模式观察者模式中介者模式迭代器模式访问者模式备忘录模式解释器模式 行为型模式 行为型模式用于描述程序在运行时复杂的流程控制&#xff0c;即描述多个类或对象之间怎样相互协作共同完成单个对象无法单独完成的任务&#xff0c;涉及算法与对象间职责的…
阅读更多...
kubernetes（六）

kubernetes（六）

文章目录 1. k8s架构2. k8s安装2.1 颁发证书2.2 部署etcd集群2.3 master节点安装2.3.1 api-server服务安装2.3.2 controller-manager服务安装2.3.3 scheduler服务安装 2.4 node节点安装2.5 配置flannel网络 1. k8s架构 2. k8s安装 # 增加免密操作 [rootk8s-node3 ~]# ssh-keyge…
阅读更多...
搭建一个教育小程序的必要步骤

搭建一个教育小程序的必要步骤

随着科技的飞速发展&#xff0c;小程序已经深入到我们生活的方方面面。对于教育行业来说&#xff0c;小程序的出现不仅为教育机构提供了新的宣传和互动平台&#xff0c;更为学生和家长带来了更为便捷的学习体验。那么&#xff0c;如何开发一款适合教育机构的小程序呢&#xff1…
阅读更多...
react+AntDesign 之 pc端项目案例

react+AntDesign 之 pc端项目案例

1.环境搭建以及初始化目录 CRA是一个底层基于webpack快速创建React项目的脚手架工具 # 使用npx创建项目 npx create-react-app react-jike# 进入到项 cd react-jike# 启动项目 npm start2.安装SCSS SASS 是一种预编译的 CSS&#xff0c;支持一些比较高级的语法&#xff0c;…
阅读更多...
鸿蒙OS：不止手机，是物联网应用开发

鸿蒙OS：不止手机，是物联网应用开发

鸿蒙开发是华为自主研发的面向全场景的分布式操作系统&#xff0c;旨在将生活场景中各类终端进行整合&#xff0c;实现不同终端设备间的快速连接、资源共享、匹配合适设备、提供流畅的全场景体验。 鸿蒙开发具有以下特点&#xff1a; 面向全场景&#xff1a;鸿蒙系统能够覆盖…
阅读更多...
[足式机器人]Part2 Dr. CAN学习笔记-动态系统建模与分析 Ch02-3流体系统建模

[足式机器人]Part2 Dr. CAN学习笔记-动态系统建模与分析 Ch02-3流体系统建模

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;DR_CAN Dr. CAN学习笔记-动态系统建模与分析 Ch02-12课程介绍电路系统建模、基尔霍夫定律 流量 flow rate q q q m 3 / s m^3/s m3/s 体积 volume V V V m 3 m^3 m3 高度 heigh h h h m m m 压强 pressure p p p …
阅读更多...
竞赛练一练 第23期：NOC大赛每日一练，python题目刷题第8天，包含答案解析

竞赛练一练 第23期：NOC大赛每日一练，python题目刷题第8天，包含答案解析

题目来自：NOC 大赛创客智慧编程赛项Python 复赛模拟题(二) NOC大赛创客智慧编程赛项Python 复赛模拟题（二） 第一题： 编写一个成绩评价系统，当输入语文、数学和英语三门课程成绩时，输出三门课程总成绩及其等级。 (1)程序提示用户输入三个数字，数字分别表示语文、数学、…
阅读更多...
Vue3使用Pinia

Vue3使用Pinia

1.安装 npm i pinia 2.搭建架子文件 2.1main.js import { createApp } from vue // 引入pinia import { createPinia } from piniaimport App from ./App.vue import router from ./router // 创建pinia const app createApp(App) //安装pinia app.use(createPinia())app.use(…
阅读更多...
线程安全、共享变量的可见性

线程安全、共享变量的可见性

Java中的线程安全问题 谈到线程安全问题&#xff0c;我们先说说什么是共享资源。所谓共享资源&#xff0c;就是说该资源被多个线程所持有或者说多个线程都可以去访问该资源。 线程安全问题是指当多个线程同时读写一个共享资源并且没有任何同步措施时&#xff0c;导致出现脏数…
阅读更多...
适合前后端开发的可视化编辑器（拖拽控件）

适合前后端开发的可视化编辑器（拖拽控件）

分享一个面向研发人群使用的前后端分离的低代码软件——JNPF。 JNPF与市面上其他的低代码&#xff08;轻流、宜搭、微搭、简道云、轻流、活字格等等&#xff09;&#xff0c;后者更倾向于非编程人员使用&#xff0c;让业务线人员自行构建应用程序。而 JNPF 这款低代码产品是面向…
阅读更多...
【STM32学习】硬件CRC与传统CRC-32计算的不同点

【STM32学习】硬件CRC与传统CRC-32计算的不同点

硬件CRC与传统CRC-32计算的不同点 1、stm32的硬件CRC32与传统CRC-32有何不同&#xff1f;2、解决办法 1、stm32的硬件CRC32与传统CRC-32有何不同&#xff1f; ①STM32F103的硬件CRC校验是对整个32位字进行CRC计算&#xff0c;传统的CRC-32是逐字节的计算。 ②STM32的硬件CRC32的…
阅读更多...
美食管理与推荐系统Python+Django网站系统+协同过滤推荐算法【计算机课设】

美食管理与推荐系统Python+Django网站系统+协同过滤推荐算法【计算机课设】

一、介绍 美食管理与推荐系统。本系统使用Python作为主要开发语言开发的一个美食管理推荐网站平台。 网站前端界面采用HTML、CSS、BootStrap等技术搭建界面。后端采用Django框架处理用户的逻辑请求&#xff0c;并将用户的相关行为数据保存在数据库中。通过Ajax技术实现前后端的…
阅读更多...
【ThreeJS入门——】WEB 3D可视化技术——threejs

【ThreeJS入门——】WEB 3D可视化技术——threejs

简介 网页上已经可以做出很多复杂的动画&#xff0c;精美的效果。下图就是通过WebGL在网页中绘制高性能的3D图形。 threejs是一个让用户通过javascript入手进入搭建webgl项目的类库。 1、搭建第一个场景和物体 三维的物体要渲染在二维的屏幕上。首先要创建一个场景来放置物体…
阅读更多...
ASP.NET可视化流程设计器源码

ASP.NET可视化流程设计器源码

源码介绍: ASP.NET可视化流程设计器源码已应用于众多大型企事业单位。拥有全浏览器兼容的可视化流程设计器、表单设计器、基于角色的权限管理等系统开发必须功能&#xff0c;大大为您节省开发时间&#xff0c;是您开发OA.CRM、HR等企事业各种应用管理系统和工作流系统的最佳基…
阅读更多...
技术旅程分享：收获与成长的探索

技术旅程分享：收获与成长的探索

2023年对我而言是充满挑战和机遇的一年&#xff0c;我在这段时间里积累了丰富的技术经验和个人成长。通过不懈努力和持续学习&#xff0c;我在技术领域迈出了一系列坚实的步伐。在这篇文章中&#xff0c;我将分享我在这段时间中的收获和技术成长经历&#xff0c;与CSDN的朋友们…
阅读更多...
Vue实现加减法验证码

Vue实现加减法验证码

引入Vue.js 在HTML文件的<head>标签中引入Vue.js的CDN链接&#xff1a; <script src"https://cdn.jsdelivr.net/npm/vue2.6.11/dist/vue.min.js"></script>创建Vue实例 接下来&#xff0c;我们要创建一个Vue实例&#xff0c;并将其挂载到HTML文…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023