计算机二级 Web 程序设计 知识点 考点大全 目录
-
表格结构
1.1 表格基本结构
1.2<thead>、<tbody>和<tfoot>
1.3 表格行和单元格
1.4<caption>元素 -
表单结构
2.1 表单基本元素
2.2 常用输入类型
2.3 表单验证
2.4<fieldset>和<legend>元素 -
列表
3.1 有序列表和无序列表 -
美化与样式
4.1 基础 CSS 设计
4.2 响应式设计
4.3 无障碍设计 -
JS 相关
5.1 JS 时间对象new Date()
5.2 JSWindow浏览器对象navigator -
CSS 布局属性
6.1display属性行块盒子布局属性 -
<a>标签中的target属性 -
JS 中修改界面样式
8.1 改变<head>的样式和内容
8.2 改变<body>的样式和内容 -
JS 修改界面样式的方法与属性
9.1 常用方法与属性列表
9.2 常用 CSS 属性 -
JS 中获取父元素的方法
如有其他需要修改或补充的地方，请随时告诉我！
1. <caption> 元素
1.1 定义与用途
<caption> 元素用于为 <table> 提供一个简短的标题，以用户理解表格内容。
1.2 语法
<table><caption>表格标题</caption><!-- 其他表格内容 -->
</table>
1.3 使用注意事项
<caption>必须放置在<table>的第一个子元素位置。- 每个表格只能有一个
<caption>元素。
2. 表格结构
2.1 表格基本结构
一个标准的表格包含 <table>、<tr>（表行）、<th>（表头单元格）和 <td>（表数据单元格）。
2.2 <thead>、<tbody> 和 <tfoot>
<thead>: 表头，定义列标题。<tbody>: 表体，定义表格的主要数据。<tfoot>: 表尾，定义表格底部的信息，例如合计。
示例
<table><thead><tr><th>姓名</th><th>电子邮箱</th><th>年龄</th></tr></thead><tbody><tr><td>张三</td><td>zhangsan@example.com</td><td>25</td></tr></tbody>
</table>
2.3 表格行和单元格
- 表行
<tr>包含th或td元素。 - 表头单元格
<th>通常是加粗，代表列标题。 - 表数据单元格
<td>包含实际数据。
3. 表单结构
3.1 表单基本元素
表单标签 <form> 是所有输入元素的容器。
3.2 常用输入类型
text: 单行文本输入。email: 电子邮件输入。number: 数值输入。password: 密码输入。
示例
<form action="/submit" method="POST"><input type="text" name="username" required><input type="email" name="email" required><input type="number" name="age" min="1" max="120"><button type="submit">提交</button>
</form>
3.3 表单验证
- 使用 HTML5 的
required、min、max等属性进行常见验证。 - 验证用户输入有效性以提升用户体验。
4. 美化与样式
4.1 基础 CSS 设计
使用 CSS 为表格和表单提供基本的样式。
示例 CSS
table {width: 100%;border-collapse: collapse;
}th, td {border: 1px solid #ddd;padding: 8px;
}
常考的css 属性
| 类别 | 属性 | 描述 |
|---|---|---|
| 盒模型 | width | 设置元素的宽度 |
height | 设置元素的高度 | |
padding | 设置元素内边距（内容与边框之间的空间） | |
margin | 设置元素外边距（元素与元素之间的空间） | |
border | 设置元素边框 | |
| 背景 | background-color | 设置元素的背景颜色 |
background-image | 设置元素的背景图像 | |
background-repeat | 设置背景图像是否平铺 | |
background-position | 设置背景图像的位置 | |
| 文本 | color | 设置文本颜色 |
font-size | 设置字体大小 | |
font-family | 设置字体系列 | |
font-weight | 设置字体粗细 | |
text-align | 设置文本对齐方式（左、右、居中等） | |
line-height | 设置行高 | |
text-decoration | 设置文本装饰（如下划线、上划线等） | |
| 布局 | display | 设置元素的显示类型（如块级、行内、flex等） |
position | 设置元素的定位方式（静态、相对、绝对、固定、粘性） | |
top, right, bottom, left | 设置定位元素的偏移量 | |
float | 设置元素的浮动 | |
clear | 设置元素的浮动清除 | |
overflow | 设置内容溢出时的处理方式 | |
| 列表 | list-style-type | 设置列表项的标记类型（如圆点、数字等） |
list-style-position | 设置列表项标记的位置（在外面或里面） | |
| 表格 | border-collapse | 设置表格的边框合并方式（合并或分开） |
border-spacing | 设置分开的表格单元格之间的距离 | |
| 过渡与动画 | transition | 设置过渡效果 |
animation | 设置动画效果 | |
transform | 对元素进行转换（如旋转、缩放等） |
4.2 响应式设计
使用 CSS 媒体查询确保表格在不同设备上可用。
4.3 无障碍设计
确保表格及其标签能够被辅助技术（如屏幕阅读器）识别。
5. 列表
5.1 有序列表和无序列表
- 无序列表 ：ul li
可在css 中设置标签样式 比如 list-style-type: circle;, list-style-image:url(“图片路径”) - 有序列表：ol li
可在 ol里面设置 type属性设置
<ol type="A"> <!--有好几个选项 如 start = "5" 表示从5开始 --><li></li><li></li><li></li></ol>结果是
A
B
C
6. js 时间对象 new Date()
let date = new Date()
console.log("获取年份",date.getFullYear()); //年份四位数 getFullYear
console.log("获取月份",date.getMonth() + 1);// 月份 0-11 所以 要 + 1 getMonth
console.log("获取日份",date.getDate()); // 获取日份 getDate
console.log("获取小时",date.getHours()); // 获取小时 getHours
console.log("获取分钟",date.getMinutes()); // 获取小时 getMinutes getMinutes getMinutes getMinutes
console.log("获取秒钟",date.getSeconds()); // 获取小时 getSeconds getSeconds getSeconds getSeconds getSeconds7. js Windows浏览器对象 navigator
console.log("获取浏览器的内部名称(开发代号)"+navigator.appCodeName)
console.log("获取浏览器的官方名称"+navigator.appName)
console.log("获取浏览器的平台和版本信息"+navigator.appVersion)
console.log("获取浏览器是否使用cookie，启用返回true 禁用返回false"+navigator.cookieEnabled)
console.log("获取浏览器是否联网，启用则返回true，断网则返回false"+navigator.onLine)
console.log("获取浏览器运行和操作系统平台"+navigator.platform)
console.log("获取浏览器的厂商和版本信息，即浏览器运行的操作系统、浏览器版本、名称"+navigator.userAgent)
8. css display属性 行块盒子 布局属性
| 方法 | 描述 | 示例代码 |
|---|---|---|
| 1. 直接设置为块级 | 将元素的 display 设置为 block。 | css .block { display: block; } |
| 2. 行内元素变为块级 | 将行内元素（如 <span>）设置为块级元素。 | css .inline-to-block { display: block; } |
3. 使用 inline-block | 既允许元素在同一行显示，也可以设置宽高。 | css .inline-block { display: inline-block; } |
| 4. 应用于类选择器 | 通过类选择器将多个元素设置为块级。 | css .block { display: block; } |
| 5. 媒体查询中的设置 | 根据屏幕大小调整 display 属性。 | css @media (max-width: 600px) { .item { display: block; } } |
| 6. JavaScript 动态设置 | 通过 JavaScript 动态改变元素的 display 属性。 | javascript document.getElementById("myDiv").style.display = "block"; |
| 7. Flexbox 布局 | 使用 display: flex; 创建灵活布局。 | css .container { display: flex; } |
| 8. Grid 布局 | 使用 display: grid; 进行网格布局。 | css .container { display: grid; grid-template-columns: repeat(3, 1fr); } |
7. a 标签中 target
| Target 值 | 说明 | 效果 |
|---|---|---|
_self | 默认值，在当前窗口/标签页中打开 | 点击链接后，页面内容在当前窗口替换。 |
_blank | 在新窗口或新标签页中打开 | 点击链接后，页面在新的标签页或窗口中打开。 |
_parent | 在父框架中打开 | 如果当前页面在框架中，链接将在父框架中打开。 |
_top | 在整个窗口中打开 | 链接在整个浏览器窗口中打开，覆盖所有框架内容。 |
frame_name | 在指定框架中打开 | 如果有命名的框架，点击链接将在指定的框架中打开。 |
示例代码
以下是包含不同 target 值的 HTML 示例：
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Links Example</title>
</head>
<body><h1>超链接示例</h1><p><a href="https://example.com" target="_self">在当前页面打开（默认）</a></p><p><a href="https://example.com" target="_blank" rel="noopener noreferrer">在新标签页打开</a></p><p><a href="https://example.com" target="_parent">在父框架打开</a></p><p><a href="https://example.com" target="_top">在最顶层窗口打开</a></p><p><a href="https://example.com" target="myframe">在名为 myframe 的框架中打开</a></p>
</body>
</html>
8 js中修改界面样式
当然可以！以下是一些常用的 JavaScript 方法和属性，用于改变 <head> 和 <body> 部分的内容和样式：
改变 <head> 部分
| 方法/属性 | 描述 |
|---|---|
document.title | 获取或设置文档的标题（<title>） |
document.head | 获取文档的 <head> 元素 |
document.head.appendChild(element) | 向 <head> 中添加一个新的元素 |
document.head.removeChild(element) | 从 <head> 中移除一个现有的元素 |
document.createElement(tagName) | 创建指定类型的元素（如 <style>、<script>） |
document.getElementsByTagName("link") | 获取所有链接元素，如 CSS 文件引用 |
document.getElementsByTagName("script") | 获取所有脚本元素 |
document.head.innerHTML | 获取或设置 <head> 中的 HTML 内容 |
改变 <body> 部分
| 方法/属性 | 描述 |
|---|---|
document.body | 获取文档的 <body> 元素 |
document.body.style | 获取或设置 <body> 的 CSS 样式 |
document.body.innerHTML | 获取或设置 <body> 中的 HTML 内容 |
document.body.textContent | 获取或设置 <body> 中的文本内容 |
document.body.appendChild(element) | 向 <body> 中添加一个新的元素 |
document.body.removeChild(element) | 从 <body> 中移除一个现有的元素 |
document.body.classList | 获取 <body> 的类名列表，可以添加/移除类 |
document.body.setAttribute(attr, value) | 设置 <body> 的属性 |
document.body.fgColor | 设置 <body> 的文字颜色 |
document.body.bgColor | 设置 <body> 的背景颜色颜色 |
例子
-
修改
<title>：document.title = "新的文档标题"; -
向
<head>添加一种新的 CSS 样式：const style = document.createElement('style'); style.textContent = 'body { background-color: blue; }'; document.head.appendChild(style); -
修改
<body>的背景颜色：document.body.style.backgroundColor = "#f0f0f0"; -
添加新内容到
<body>：const newElement = document.createElement('p'); newElement.textContent = "这是新添加的段落。"; document.body.appendChild(newElement);
这些是常用的操作，可以通过 JavaScript 来改变 <head> 和 <body> 的内容和样式。
在 JavaScript 中，可以通过 DOM 操作来修改 HTML 元素的 CSS 样式。以下是一些常用方法和属性，用于修改样式的表格：
方法与属性列表
| 方法/属性 | 描述 |
|---|---|
element.style | 获取或设置元素的内联样式。 |
element.style.propertyName | 设置指定 CSS 属性的值（通过样式属性名访问）。 |
element.classList | 获取元素的类名列表，可以添加、移除或切换类。 |
element.className | 获取或设置元素的类名（相当于 class 属性）。 |
element.setAttribute("style", "css-declaration") | 设置整个样式字符串。 |
常用 CSS 属性
以下是一些常用的 CSS 属性，可以通过 element.style.propertyName 的方式设置：
| CSS 属性 | 描述 |
|---|---|
backgroundColor | 设置背景颜色。 |
color | 设置文本颜色。 |
fontSize | 设置字体大小。 |
fontFamily | 设置字体系列。 |
margin | 设置外边距。 |
padding | 设置内边距。 |
border | 设置边框。 |
width | 设置元素宽度。 |
height | 设置元素高度。 |
display | 设置元素的显示方式（如 block, none）。 |
visibility | 设置元素的可见性（如 visible, hidden）。 |
opacity | 设置元素的不透明度。 |
textAlign | 设置文本对齐方式。 |
position | 设置元素的定位方式（如 absolute, relative）。 |
top, right, bottom, left | 设置元素距离定位父元素的距离。 |
示例代码
以下是一些使用 JavaScript 修改样式的示例代码：
-
修改背景色：
document.getElementById("myElement").style.backgroundColor = "blue"; -
修改文本颜色：
document.getElementById("myElement").style.color = "red"; -
修改字体大小：
document.getElementById("myElement").style.fontSize = "20px"; -
添加或移除类名：
const element = document.getElementById("myElement"); element.classList.add("new-class"); // 添加类 element.classList.remove("old-class"); // 移除类 -
设置多个样式：
const element = document.getElementById("myElement"); element.style.cssText = "background-color: yellow; color: blue; padding: 10px;"; -
使用
setAttribute方法设置样式：document.getElementById("myElement").setAttribute("style", "border: 1px solid black; opacity: 0.5;");
这些方法和属性可以有效地通过 JavaScript 修改元素的样式。
9 html中label
label 属性
-
- 可以联合 checkbox 和 radio 中使用
-
- 在 label 中 for 属性 绑定 input 中 checkbox 和 radio 中的id 来绑定 此时 点击 label 中 的文字即可 选择 或取消 表单 选择属性
10 js 中 获取 父元素的方法
<tr><td><input type="button" name = "" value="删除" onclick = "delRow(this)"></td></tr><script>function delRow(obj){const father = obj.parentNode.parentNode //中 parentNode 是获取当前元素 的父元素 两个是 获取父元素的父元素}</script>- 注 ： js 中 循环遍历 window 对象 可以输出 所有关于window 对象中 的 方法都会被遍历出来
注意
此文章为原创 禁止搬运
如有侵权发邮件 带着截图
如有错误请告知
