一、选择
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("example@example.com")); // true
console.log(validateEmail("example@.com")); // 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 判断每个数字是偶数还是奇数，然后输出相应的提示信息。