一、选择
1.html结构样式:行内、块常见元素,按常见元素,滚动文字
行内元素:a、span、img、input、label、select、textarea、button、abbr、acronym、cite、code、dfn、em、kbd、q、samp、strong、sub、sup、time、var等 ;
块状元素:div、p、h1~h6、ul、ol、li、dl、dt、dd、blockquote、hr、pre、address、fieldset、form等。
2.样式:选择器6个
标签选择器、id选择器、类选择器、伪类选择器、后代选择器、属性选择器
3.盒子模型(结构图) 外边距,内边距内容等,外边距四个属性值顺序(顺/逆)
HTML 盒子模型(结构图)包括四个部分:
- Content(内容区):指 HTML 元素的具体内容,如文本、图片等。
- Padding(内边距):指 Content 与 Border 之间的距离,可以用来设置元素内部空间。
- Border(边框):指围绕 Content 和 Padding 的边框线,可以用来设置元素边框样式、宽度、颜色等。
- Margin(外边距):指 Border 与相邻元素之间的距离,可以用来设置元素与其他元素之间的间距。
下面是 HTML 盒子模型的结构图:
+----------------------------------------+
| Margin |
| |
| +---------------------------+ |
| | Border | |
| | | |
| | +--------------------+ | |
| | | Padding | | |
| | | | | |
| | | Content | | |
| | | | | |
| | +--------------------+ | |
| | | |
| +---------------------------+ |
| |
+----------------------------------------+
外边距顺序:上、右、下、左;上下、左右;上下左右;
4.CSS3新的属性:拉伸,旋转,动画
CSS3引入了许多新的属性,其中包括了拉伸、旋转和动画等。
-
拉伸(scale):通过scale()函数可以实现对元素进行缩放,可以缩小或放大元素。例如:transform: scale(0.5, 0.5); 可以让元素的大小缩小到原来的一半。
-
旋转(rotate):通过rotate()函数可以实现对元素进行旋转,可以顺时针或逆时针旋转。例如:transform: rotate(45deg); 可以让元素按照顺时针方向旋转45度。
-
动画(animation):通过animation属性可以实现对元素进行动画效果的控制。可以设置动画的持续时间、延迟时间、重复次数、动画类型等。例如:
.box { animation: myanimation 2s ease-in-out infinite; } @keyframes myanimation { 0% { background-color: red; } 50% { background-color: green; } 100% { background-color: blue; } }
这段代码可以让一个名为“box”的元素,按照myanimation动画效果进行无限循环播放。其中@keyframes定义了动画的关键帧,从开始到50%时背景色渐变为绿色,从50%到结束时背景色渐变为蓝色。
5.js:表达式,运算符
表达式:
- 算数表达式:
2 + 3
:加法运算符,返回 5。
5 - 2
:减法运算符,返回 3。
7 * 4
:乘法运算符,返回 28。
10 / 2
:除法运算符,返回 5。
9 % 2
:取模运算符,返回 1。
- 字符串表达式:
"Hello" + " " + "World"
:加法运算符,返回 "Hello World"。
"My name is " + name
:变量 name 存储了一个字符串,加法运算符,返回 "My name is John"。
- 布尔表达式:
5 > 3
:大于运算符,返回 true。
10 <= 5
:小于等于运算符,返回 false。
true && false
:逻辑与运算符,返回 false。
!(x > y)
:逻辑非运算符,如果 x 大于 y 返回 false,否则返回 true。
- 条件表达式:
age >= 18 ? "成年人" : "未成年人"
:如果 age 大于等于 18,返回 "成年人",否则返回 "未成年人"。
- 赋值表达式:
x = 5
:将 5 赋值给变量 x。
y += 2
:将 y 的值加上 2,并将结果赋值给 y。
- 函数调用表达式:
Math.max(2, 5, 8)
:调用 Math.max 函数,返回最大值 8。
运算符:
- 算数运算符:加号、减号、乘号、除号、取模(%)等。
- 比较运算符:大于号、小于号、等于号、不等于号、大于等于号、小于等于号等。
- 逻辑运算符:与(&&)、或(||)、非(!)等。
- 位运算符:按位与(&)、按位或(|)、按位非(~)、按位异或(^)等。
- 赋值运算符:等号、加等于(+=)、减等于(-=)、乘等于(*=)、除等于(/=)等。
- 条件运算符:问号(?)和冒号(:),用于条件判断。例:2>3?true:flase;
- 其他运算符:typeof(返回变量类型)、instanceof(判断对象是否属于某个类)等。
6.消息框:警告框,提示框,确认框
JavaScript 提供了三种常见的消息框:警告框、提示框和确认框。
- 警告框
警告框用于向用户显示一条警告消息。它只有一个“确定”按钮,点击后警告框就会消失。警告框的语法如下:
alert("消息内容");
其中,消息内容是要向用户显示的消息字符串。例如:
alert("请注意,这是一条警告消息!");
- 提示框
提示框用于向用户显示一条消息,并接受用户输入数据。
prompt("消息内容", "默认值");
其中,消息内容是要向用户显示的消息字符串,而默认值则是一个可选的参数,用于指定用户输入框的默认值。例如:
var name = prompt("请输入您的姓名:", "");
alert("您好," + name + "!");
- 确认框
confirm("消息内容");
其中,消息内容是要向用户显示的消息字符串。例如:
if (confirm("您确定要删除这个文件吗?")) {
// 用户点击了“确定”按钮
deleteFile();
} else {
// 用户点击了“取消”按钮
return;
}
7.document对象属性方法
属性:
document.getElementById(id)
:根据元素的id
属性获取元素对象。document.getElementsByClassName()
:根据元素的class
属性获取元素对象。document.getElementsByTagName(tagname)
:根据元素的标签名获取元素对象。document.body
:获取body
元素对象。document.head
:获取head
元素对象。document.title
:获取或设置文档的标题。document.URL
:获取文档的URL。
方法:
document.createElement(tagName)
:创建一个 HTML 元素。document.createTextNode(data)
:创建一个包含指定文本内容的文本节点。document.querySelector(selector)
:根据 CSS 选择器获取第一个匹配的元素。document.querySelectorAll(selector)
:根据 CSS 选择器获取所有匹配的元素。document.write(content)
:向文档写入 HTML 内容(会覆盖整个文档)。document.writeln(content)
:向文档写入 HTML 内容并换行(会覆盖整个文档)。
二、填空:
1.标记的概念
HTML 中的标记是用来描述文档结构和内容的符号,也称为标签(tag)。标记由一对尖括号(<>)包围,包括起始标记和结束标记,例如:
<p>这是一个段落。</p>
其中,<p>
是起始标记,用于表示一个段落的开始,</p>
是结束标记,用于表示该段落的结束。标记中间的文本是该标记所描述的内容。
HTML 标记可以分为两类:块级标记和内联标记。
块级标记
块级标记用于组织文档的结构,通常表示文档中的一个大块内容,如段落、标题、列表、表格等。块级标记会在页面中单独占据一行,可以设置宽度、高度、边距、内边距等样式。常用的块级标记包括:
<h1>
到<h6>
:表示六级标题。<p>
:表示段落。<div>
:表示文档中的一个分割区域,可用于布局、包裹块级元素等。<ul>
和<ol>
:表示无序列表和有序列表。<li>
:表示列表项。<table>
:表示表格。<tr>
:表示表格中的行。<td>
:表示表格中的单元格。
内联标记
内联标记用于标记文本中的一部分内容,通常表示文本中的一个小段落或一个词语,如加粗、斜体、链接等。内联标记不会独占一行,不能设置宽度、高度等样式。常用的内联标记包括:
<b>
和<strong>
:表示加粗。<i>
和<em>
:表示斜体。<u>
和<ins>
:表示下划线。<a>
:表示链接。<span>
:表示文档中的一个小的分割区域,可用于包裹内联元素等。
除了这些常用的标记外,还有其他许多标记,可以根据需要灵活使用。
2.列表的概念。常见列表,有序,无序
列表是一种在网页中展示内容的方式,常见的列表类型包括有序列表和无序列表。
无序列表
无序列表是一种用于展示信息的列表类型,其列表项通常以特定符号(如圆点、方块等)开头。在 HTML 中,无序列表使用 <ul>
标签来定义,每个列表项使用 <li>
标签来表示。例如:
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
上面的例子中,<ul>
标签定义了一个无序列表,其中包含三个列表项,分别是苹果、香蕉和橙子。
有序列表
有序列表是一种用于展示有序信息的列表类型,其列表项通常以数字或字母开头。在 HTML 中,有序列表使用 <ol>
标签来定义,每个列表项使用 <li>
标签来表示。例如:
<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
上面的例子中,<ol>
标签定义了一个有序列表,其中包含三个列表项,分别是第一步、第二步和第三步。
需要注意的是,有序列表的列表项默认以数字开头,可以通过 type
属性来指定列表项的开头类型。例如:
<ol type="A">
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
上面的例子中,type="A"
表示列表项以大写字母(A、B、C...)开头。
除了 type
属性外,还可以使用 start
属性来指定列表项的起始值,以及 reversed
属性来倒序显示列表项。例如:
<ol start="4" reversed>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
上面的例子中,start="4"
表示列表项从 4 开始,reversed
表示列表项倒序显示。
3.js的引入方式,内部和外部
内部引入是指 JavaScript 代码写在 HTML 文件中,可以通过 script
标签来实现。例如:
<!DOCTYPE html>
<html>
<head>
<title>内部引入示例</title>
</head>
<body>
<h1>这是一个内部引入示例</h1>
<script>
// JavaScript 代码写在这里
alert("Hello, World!");
</script>
</body>
</html>
外部引入是指 JavaScript 代码写在一个单独的 .js 文件中,通过 script
标签的 src
属性来引入。例如:
<!DOCTYPE html>
<html>
<head>
<title>外部引入示例</title>
<!-- 在 head 标签中引入外部 js 文件 -->
<script src="main.js"></script>
</head>
<body>
<h1>这是一个外部引入示例</h1>
</body>
</html>
在 main.js
文件中输出 "Hello, World!":
document.write("Hello, World!");
4.表格:元素,属性,跨行跨列,表头,标题
表格是网页中常用的展示数据的一种方式,可以使用 HTML 标签:
<table>、<thead>、<tbody>、<tfoot>、<tr>、<th>、<td>
元素
<table>
:定义一个表格。<thead>
:定义表格的表头。<tbody>
:定义表格的主体部分。<tfoot>
:定义表格的页脚部分。<tr>
:定义表格中的一行。<th>
:定义表格中的表头单元格。<td>
:定义表格中的数据单元格。
属性
border
:定义表格边框的宽度。cellspacing
:定义单元格之间的空白距离。cellpadding
:定义单元格内容与单元格边框之间的空白距离。colspan
:定义单元格要跨越的列数。rowspan
:定义单元格要跨越的行数。
跨行跨列
使用 colspan
和 rowspan
属性可以让单元格跨越多行或多列。例如:
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th colspan="2">联系方式</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
<td>电话</td>
<td>邮箱</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>21</td>
<td>电话</td>
<td>邮箱</td>
</tr>
<tr>
<td>地址</td>
<td>邮编</td>
</tr>
</table>
上面的例子中,第一行的第三、四个单元格使用了 colspan="2"
,表示要跨越两个列;第三行的第一列使用了 rowspan="2"
,表示要跨越两个行。
表头和标题
使用 <thead>
可以定义表格的表头,使用 <caption>
可以定义表格的标题。例如:
<table border="1">
<caption>学生信息表</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>21</td>
<td>女</td>
</tr>
</tbody>
</table>
三、简答
1.js的标识符,什么是标识符,定义时需要注意什么问题
JavaScript 中标识符是指:用于命名变量、函数或属性的字符序列。标识符可以包含字母、数字、下划线和美元符号,但不能以数字开头。JavaScript 中的标识符是区分大小写的。
例如,以下是合法的标识符:
var myVariable = 123;
function myFunction() { ... }
var $myVar = "abc";
var _myVar = "xyz";
定义标识符时需要注意以下几个问题:
- 标识符不能以数字开头,只能以字母、下划线或美元符号开头。
- 标识符不能包含空格和标点符号,只能包含字母、数字、下划线和美元符号。
- 标识符应该使用有意义的名称,以便于代码的可读性和维护性。
- 标识符应该采用一致的命名规范,如驼峰命名法等。
总之,在 JavaScript 中定义标识符时需要注意遵守语法规范和命名规范,以便于编写出易于维护和阅读的代码。
2.dom,bom的区别,优点缺点。
区别:
- DOM描述了网页内容(如HTML、XML等),并定义了一种访问和操作这些内容的方法和接口。DOM的核心是一棵树形结构,由节点和对象组成,它表示了网页中所有的元素和标签以及它们之间的关系。
- BOM则提供了与浏览器窗口交互的对象和方法,例如window对象、location对象、history对象、navigator对象、screen对象等。BOM使得JavaScript能够控制浏览器的行为,例如打开新窗口、改变URL、导航历史记录等。
优缺点:
DOM优:
- 构建标准统一,不同浏览器的 DOM API 基本一致,开发者可以很方便地编写跨浏览器兼容的代码。
- 可扩展性好,开发者可以通过自定义 DOM 元素和事件来扩展 HTML 的功能。
- 操作简单、灵活,开发者可以通过 DOM API 快速地访问和修改 HTML 元素和文本内容。
DOM缺:
- 操作 DOM 元素可能会导致浏览器重新渲染整个页面,性能较低。
- 在大型和复杂的页面中,DOM 的树形结构可能会变得非常庞大,导致内存占用过高。
BOM优:
- 提供了对浏览器窗口和页面的完整访问和操作,使得开发者可以更好地管理浏览器状态和行为。
- 可以实现浏览器级别的功能,例如打开新窗口、弹出对话框、控制浏览器历史记录等。
BOM缺:
- 不同浏览器之间的 BOM API 实现可能不同,开发者需要进行兼容性处理。
- BOM 带来了一些安全隐患,例如可能会被用于实现恶意弹窗等行为。
3.div的用法
- 页面布局:通过 div 可以将页面划分为多个区块,每个区块可以对应不同的页面部分,例如头部、导航、侧边栏、主体内容、页脚等。
- 包裹内容:使用 div 可以将一组相关元素包裹起来,便于在样式表中对其进行统一的样式设置,或者使用 JavaScript 对其进行统一的操作。
- 容器元素:通过 div 可以创建一个空白的容器元素,用于在其中动态添加其他元素。
- 响应式布局:在响应式设计中,使用 div 可以对不同的屏幕大小进行布局调整,使得页面在不同的设备上都可以得到良好的展示效果。
4.Web的工作原理
- 客户端浏览器向服务器发送 HTTP 请求,请求包括所需资源的 URL 和其他相关信息。
- 服务器接收到请求后,根据 URL 找到对应的资源并生成 HTTP 响应,响应包括状态码、消息头和消息体。
- 响应被传输回客户端浏览器,浏览器解析响应并渲染页面。如果响应是 HTML 页面,则浏览器会解析 HTML 标记,并使用 CSS 样式和 JavaScript 脚本来渲染和交互。
- 在页面渲染期间,浏览器可能会发起其他 HTTP 请求获取页面中引用的其他资源,如图片、样式表、JavaScript 文件等。
- 服务器再次响应这些请求,浏览器将这些资源嵌入到页面中或者执行对应的代码。
5.html、js\css在web中的各自的作用
-
HTML(超文本标记语言):负责页面的内容展示和结构,包括文字、图片、链接、表单等元素的定义和布局。
-
CSS(层叠样式表):负责页面的样式设计,包括字体、颜色、大小、布局、动画等多个方面,使页面呈现出美观的视觉效果。
-
JS(JavaScript):负责页面的交互和动态效果,包括用户输入与响应、数据处理、动态操作 DOM、AJAX 等功能。
四、课后题、bs和cs的区别,优缺点
区别:
-
应用场景不同
BS 架构模式主要应用于 Web 应用程序的开发,客户端通过浏览器访问服务器的 Web 应用,而 CS 架构模式主要应用于桌面应用程序和移动应用程序的开发,客户端通过本地安装的软件连接服务器进行交互。
-
数据处理方式不同
BS 架构模式的数据处理主要在服务器端进行,客户端只负责展示和传输数据,而 CS 架构模式的数据处理则主要在客户端进行,服务器只负责存储和提供数据。
-
安全性不同
BS 架构模式相对于 CS 架构模式来说更加安全,因为所有的数据都存储在服务器端,客户端只是通过浏览器访问数据,不会直接接触到数据。而 CS 架构模式需要在客户端本地存储数据,容易受到恶意攻击。
-
维护成本和易用性不同
BS 架构模式相对于 CS 架构模式来说维护成本更低,因为只需要维护服务器端的应用程序,而客户端的浏览器可以自动升级。而 CS 架构模式需要在客户端安装软件,对于用户来说不太友好,还需要不断升级维护。
B/S优缺点
-
优点:安全性高、维护成本低、易于升级和扩展
-
缺点:客户端的交互体验和响应速度较慢
C/S优缺点
- 优点:交互体验好、响应速度快
- 缺点:安全性低、维护成本高、易受攻击。
五、程序
1.html,css有序列表无序列表嵌套,通过css列表样式前面项目类型的符号修改上级实验
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 1200px;
height: 40px;
margin: 0 auto;
background-color: #ffaaff;
border: 4px solid palegreen;
}
.abc .myol{
width: 200px;
height: 32px;
text-align: center;
list-style: none;
float: left;
/* padding: 0 auto; */
border: 1px solid red;
}
ol{
display: none;
margin-top: 12px;
}
ol li{
width: 160px;
height: 20px;
text-align: center;
color: orange;
/* list-style-type: disc; */
border: 1px dashed black;
padding: 20px;
}
.abc li:hover ol{
display: block;
}
</style>
</head>
<body>
<div>
<marquee width="1400px" height="40px" direction="right" scrollamount="25" scrolldelay="1" >
<span>欢迎来到实力至上主义的教室</span>
</marquee>
<div class="box">
<ul class="abc">
<li class="myol">Java</li>
<li class="myol">Web</li>
<li class="myol">Spring</li>
<li class="myol">SpringMvc
<ol>
<li type="none">前端控制器</li>
<li type="circle">controller</li>
<li type="disc">dispatchServlet</li>
</ol>
</li>
<li class="myol">myBatis
<ol start="5">
<li type="A">持久层</li>
<li>动态sql</li>
<li>连接简单</li>
</ol>
</li>
</ul>
</div>
</div>
</body>
</html>
2.注册的页面,里面js加上校验,长度的校验(实验10)
长度校验
function checkReg(){
let myname=f.yhm.value;
let mypwd=f.pwd.value;
console.log(myname.length);
if(myname=="" || myname.length<6||myname.length>10){
alert("用户名长度应是6-10个字符");
f.yhm.focus();
return false;
}
if(mypwd=="" || mypwd.length<6||mypwd.length>10){
alert("密码长度应是6-10个字符");
f.pwd.focus();
return false;
}
return true;
}
正则表达式校验操作,例如校验邮箱、手机号、身份证号码等。
下面是几个常见的校验示例:
- 校验邮箱地址
function validateEmail(email) {
var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+\.([a-zA-Z])+$/;
return reg.test(email);
}
console.log(validateEmail("[email protected]")); // true
console.log(validateEmail("[email protected]")); // false
- 校验手机号码
function validatePhone(phone) {
var reg = /^1[3456789]\d{9}$/;
return reg.test(phone);
}
console.log(validatePhone("13812345678")); // true
console.log(validatePhone("12345678901")); // false
- 校验身份证号码
function validateIdCard(idCard) {
var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
return reg.test(idCard);
}
console.log(validateIdCard("510722199012123456")); // true
console.log(validateIdCard("51072219901212345X")); // true
console.log(validateIdCard("51072219901212345")); // false
3.函数,嵌套,自定义函数,递归调用。
函数
JavaScript 内置的常用函数有很多,以下列举一些常用的函数:
- 字符串相关函数
charAt()
:返回指定位置的字符。substr()
:返回指定长度的子字符串。slice()
:返回指定位置的子字符串。concat()
:将两个或多个字符串拼接起来。toLowerCase()
:将字符串转换为小写。toUpperCase()
:将字符串转换为大写。indexOf()
:返回字符串中指定字符或子字符串的位置。lastIndexOf()
:返回字符串中最后一个指定字符或子字符串的位置。replace()
:替换指定字符或子字符串。split()
:将字符串按照指定字符分割成数组。
- 数组相关函数
push()
:在数组末尾添加一个或多个元素。pop()
:删除数组末尾的元素并返回该元素。shift()
:删除数组第一个元素并返回该元素。unshift()
:在数组开头添加一个或多个元素。concat()
:将两个或多个数组合并成一个新数组。slice()
:返回指定位置的子数组。splice()
:删除或插入数组元素。reverse()
:颠倒数组元素顺序。sort()
:按照指定顺序排序数组元素。join()
:将数组元素转换为字符串并连接起来。
- 数字相关函数
parseInt()
:将字符串转换为整数。parseFloat()
:将字符串转换为浮点数。toFixed()
:将数字保留指定小数位数并返回字符串。toExponential()
:将数字转换为指数形式并返回字符串。toString()
:将数字转换为字符串并返回。
- 其他常用函数
setTimeout()
:延迟指定时间后执行函数。setInterval()
:按照指定时间间隔重复执行函数。clearTimeout()
:取消setTimeout()
函数的执行。clearInterval()
:取消setInterval()
函数的执行。encodeURI()
:将字符串编码为 URI 字符串。decodeURI()
:将 URI 字符串解码为普通字符串。encodeURIComponent()
:将字符串编码为 URI 组件字符串。decodeURIComponent()
:将 URI 组件字符串解码为普通字符串。
以上仅是一部分 JavaScript 内置常用函数,JavaScript 还有很多其他的内置函数,需要根据具体需求进行选择使用。
自定义函数、递归调用
function fibonacci(n) {
if (n <= 2) {
return 1;
} else {
return fibonacci(n - 1) + fibonacci(n - 2);
}
}
console.log(fibonacci(10)); // 输出第10项的值
document.getElementById("myspan").innerHTML=fibonacci(10);
4.循环语句,条件嵌套
JavaScript 中常用的循环语句有 for
循环和 while
循环。
for
循环
for
循环用于重复执行一段代码,通常使用在已知循环次数的情况下。
语法:
for (初始化表达式; 条件表达式; 更新表达式) {
// 循环体代码
}
初始化表达式
:定义循环变量并赋初值,只在循环开始时执行一次。条件表达式
:定义循环条件,只要条件为真,循环就会继续执行。更新表达式
:更新循环变量的值,通常是加 1,只在循环体执行完毕后执行一次。循环体代码
:需要被重复执行的代码块。
示例:
for (var i = 0; i < 5; i++) {
console.log(i);
}
// 输出:0 1 2 3 4
while
循环
while
循环用于重复执行一段代码,通常使用在不知道循环次数的情况下,只要条件为真,循环就会一直执行下去。
语法:
while (条件表达式) {
// 循环体代码
}
条件表达式
:定义循环条件,只要条件为真,循环就会继续执行。循环体代码
:需要被重复执行的代码块。
示例:
var i = 0;
while (i < 5) {
console.log(i);
i++;
}
// 输出:0 1 2 3 4
- 条件嵌套
在循环语句中可以嵌套条件语句,以根据不同的情况执行不同的代码块。
示例:
for (var i = 0; i < 10; i++) {
if (i % 2 === 0) {
console.log(i + " 是偶数");
} else {
console.log(i + " 是奇数");
}
}
以上代码中,使用 for
循环遍历数字 0 到 9,通过 if...else
判断每个数字是偶数还是奇数,然后输出相应的提示信息。