web复习

目录

前言

Web 标准：由W3C(万维⽹联盟) 牵头制定的⼀系列标准的集合包括：表现标准，结构标准，行为标准

HTML：

  1. html 是用于定义内容结构和内容
  2. table 用于创建表格
  3. input 的常用 type
    • text： 单行文本输入
    • password： 加密文本输入
    • radio： 单选按钮
    • checkbox： 复选按钮
    • submit： 提交按钮（提交表单）
    • file：提交文件 （配合accept指定文件类型）
    • select：下拉选择框（配合option）
  4. input 的基础属性
    • value：输入框默认值（text/password），选中值（radio/checkbox），提交值（submit）
    • name：服务器识别关键，必备，否则服务器无法接受此文件数据
    • placeholder：输入框站位文本（不是初始值！）
    • disabled：禁用输入框，提交时不发送数据(直接点不起)
    • readonly：只读，提交时可以发送数据（可以点，但是不可以编辑）
    • maxlength：输入最长长度(都按一个算)
    • vue中的应用：v-model双向绑定
  5. 创建互斥的radio：每个 radio 设置相同的 name
  6. type="file"的input标签可以通过required属性设置为必填项
  7. input事件实时触发（输入时立即响应），change事件在值改变且失焦的时候触发（js里）
  8. vue的双向绑定：
<template>
  <input v-model="username" type="text">
</template>
<script>
export default {
  data() {
    return {
      username: ''
    }
  }
}
</script>
<!-- 当输入框内容变化时，username数据会自动更新；修改username数据时，输入框内容也会同步更新。 -->
  1. for（label） 和 id（input） 一家人
  2. 编写一个登录表单，包含用户名（必填，限制 8-20 字符）、密码（必填，至少 6 位）和提交按钮，并添加客户端验证。
    <form>
      <label for="username">用户名：</label>
      <input
        type="text"
        name="username"
        id="username"
        required
        minlength="8"
        maxlength="20"
        placeholder="请输入用户名"
      />
    <br />
    <label for="password"> 密码： </label>
    <input
      type="text"
      name="password"
      id="password"
      required
      minlength="6"
      placeholder="请输入密码"
    />
    <hr>
    <button type="submit">
        login in
    </button>
</form>
  1. a元素
    - href：指示链接目标
    - title：额外说明
    - target：默认-self，-blank新窗口
    - download：强制下载链接资源（非打开）
  2. img
    - src：指定链接图像属性
    - alt：图像替代文本（无障碍必备）
  3. vue动态绑定a，img
<template>
  <!-- 动态链接 -->
  <a :href="productUrl" target="_blank">
    <img :src="imageUrl" :alt="productName">
  </a>
</template>

<script>
export default {
  data() {
    return {
      productUrl: '/products/123',
      imageUrl: 'https://example.com/prod.jpg',
      productName: '智能手表'
    }
  }
}
</script>
  1. 万国码：utf-8
  2. ASCII 编码仅支持英文字符
  3. form 用于创建表单
    • action：指定表单数据提交的URL地址
    • method：提交方式（get/post）
  4. 空元素 === 单标签 === 没有结束标签
  5. textarea 用于创建文本域
  6. label：定义字段（表单控件）名称
  7. ol 有序元素，
  8. select
<select >
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4" selected>4</option>
</select>
select在外面
  1. 列表：
    • 无序列表：ul，li li（li是列表项）
    • 有序列表： ol li li
    • 自定义列表：dl （dt：定义术语，dd：定义描述）
  2. 表格：
    • tr（table row）：表格的一行（包裹td/th）
    • td（table data）： 表格的数据单元格（colspan，rowspan）
    • th（table head）：表格表头单元格
    • 语义化，套个盒子：thead tbody tfoot（包裹tr）
  3. 表单：向服务器传数据
  4. video网页嵌入视频元素
  5. audio网页嵌入音频的元素
  6. 修改 value：修改提交按钮上显示的文字
  7. 常见语义化标签：header nav main footer section article p h1-6 blockquote ul li ol strong thead tbody tr th td table em mark small time del ins

css：

  1. 负责网页布局和样式
  2. 垂直外边距折叠：取最大值
    e.g.两个div盒子上下排列，上盒子设置margin为20px,下盒子设置margin为10px，则两者间距为：20px
  3. 行内元素不可以直接设高宽
  4. css 全称为：层叠样式表
  5. position：
    1. 静态定位（static）：元素正常参与文档流（默认，偏移top，bottom，left，right属性无效）
    2. 相对定位（relative）：元素保留文档流位置，偏移后原位置留空，便宜参考对象：自己原位置(元素微调)
    3. 绝对定位（absolute）： 元素脱离文档流，偏移参考对象：最近的非static的祖先元素（弹窗，悬浮按钮，图片剪裁区）
    4. 固定定位（fixed）： 元素脱离文档流，偏移参考对象浏览器视口（导航栏 ，返回顶部，广告）
    5. 占性定位（sticky）： 脱离文档流，滚动时在特定位置之前相对定位，之后固定定位（侧边导航，滑动时固定的表头）
  6. z-index：越大越上
  7. 多重样式优先级：⾏内样式> 内部样式表 > 外部样式表 > 浏览器默认样式
  8. 优先级计算：
    • 内联样式（1000） > ID 选择器（100） > 类 / 属性 / 伪类选择器（10） > 元素 / 伪元素选择器（1） > 通配符（0）
    • 相同权重：后出现的选择器生效
    • !important：强制最高优先级（慎用，破坏样式层级）
  9. div:hover !== div :hover
  10. 行高 === 字体高度 + 上下边距
  11. 上右下左（顺时针）
  12. 块元素
    • 默认宽度 === 父元素宽度
    • 内外边距有效
    • 独占一行
    • 可设宽高
    • div p h1-h6 ul form
  13. 行内元素（与块元素反，只记住块就好）
    • 内容撑开宽度
    • span a strong em
  14. 行内块元素(inline-block)
    • img input button textare td
    • 不换行，可设宽高
    • 内外边距有效
    • 元素间有空白，可以设font-size:0
  15. 字体：
    • 首行缩进：text-indent:2em
    • 大小：px绝对大小，em（父元素字体大小）rem（相对于根html元素字体大小，默认16px）相对大小
    • 粗细：100-900（默认normal 400，bold 700）
  16. 增加同一段落中两行文字间间距，应该设置：line-height
  17. 单位和数字之间不可以有空格
  18. text-decoration：下划线，删除线
  19. 浮动用于水平排列盒子
  20. 浮动元素会尽可能地向顶端对齐、向左或向右对齐
  21. 盒子相关属性width, height,margin,padding,border,display不可以继承
  22. 浏览器只忽略无法解析的部分，不报错，并继续应用有效的 CSS 规则
  23. 伪元素选择器用于选择元素指定部分，例如：::first-letter
  24. 选择器复习
  25. 绝对定位不再占有原有的位置的性质叫做脱标
  26. font-style
    • normal:默认
    • italic：文字倾斜，显示为斜体，强调内容
    • oblique：文字倾斜，强制倾斜，侧重单纯的倾斜视觉效果
  27. CSS 过渡（如 transition: background-color 0.3s）增强交互体验

js

  1. 负责网页交互和动态功能
  2. 默认导出和命名导出（导出位置灵活）
    • 默认导出：Default Export 最多1个导出，自定义导出名，导入不要花括号
    • 命名导出： 可以有多个导出，导入名和导出一样,导入要花括号
// 命名导出示例（工具函数库）
export function add(a, b) { return a + b; }
export function minus(a, b) { return a - b; }
//导⼊命名导出的变量
import {PI} from './js-export.js';

export const PI = 3.14;
// 默认导出示例（React组件）
export default function UserComponent() {
  return <div>用户组件</div>;
}
export default{
    name:'bob',
    age:30
//可以匿名
}
 // 导⼊默认导出，导出名可任意
import jsExport from './js-export.js';
  1. 箭头函数
    • 与普通函数相比的优势：
      1. 更简洁，可以省略括号，花括号和return
      2. 没有自己的this，arguments，继承上下文
    • 何时用？
      1. 简单回调函数（map，filter方法）
      2. 保留上下文this
    • 可省略符号表
      1. 只有一条return语句，可以省略大括号和return
      2. 只有一个参数，可以省略括号
      3. 没有参数，必须使用空括号
  2. const声明必须立即初始化，如果是数组或者对象，里面的元素可以改变
  3. 数据类型：
    • 原生数据类型（不可改变，值的复制）：String Number（证书，浮点数，NaN） Boolean Null(有意为空) Undefined（已定义未赋值，无意） Symbol Bigint(ES2020+)
    • 引用数据类型（对象类型，引用传递）：Object Array Function Date（new Date()） RegExp(正则表达式)
  4. 声明函数三种方式：函数声明，函数表达式，箭头函数
  5. 对象：由键值对组成的数据结构，无序，由属性（变量）和方法构成（函数）
  6. 对象的增删查改
    alt text
    1. 只有 person['first-name']能正确访问含特殊字符（如 - ）的属性，因方括号语法支持任意字符串作为属性名,不可以随意改成小驼峰然后用.属性
      只有 person['first-name']能正确访问含特殊字符（如 - ）的属性，因方括号语法支持任意字符串作为属性名,不可以随意改成小驼峰然后用.属性
    2. object.key = value是为对象添加属性的正确语法
  7. ！important：普通变量(值类型)直接在栈上储存，复制是值的copy，各自存各自的，彼此赋值不影响什么，但是创建对象（引用数据类型，还有数组）是在堆上，复制是指针copy，后续改变一个，第二个也改变
let age = 18
let b = age
b = 28
console.log(age)//18

let obj_1 = {
age: 18
}
let obj_2 = obj_1
obj_2.age = 28
console.log(obj_1.age)//28
  1. js数组可以同时储存不同类型的元素
  2. web APIs：DOM+BOM
  3. js数组常见方法
    1. 改变元素组
      • pop() 删除数组最后一个元素
      • push(4) 末尾加元素4
      • unshift() 开头加元素
      • shift() 开头删除元素
      • splice(起始索引，删除数量，插入元素) 灵活删改元素
      • sort((a,b) => a-b) 升序
      • sort((a,b) => b-a) 降序
      • reverse():反转数组元素
    2. 不改变数组元素
      • join()
      • slice()
      • concat
      • indexof()
      • includes()
      • find()
      • filter()
      • map()
  4. js里不可变数据类型：原始数据类型
  5. typeof 识别数据类型
    • 基本数据类型：除了null都可以准确识别，null返回object，判断用
let val = null;//有意为空
console.log(val === null); // true，精准识别 null
console.log(null === ''); // false
console.log(null === 0); // false

- 引用数据类型：除了fuction准确返回function，其余返回object
  1. 字符串的比较不是按数值大小,而是按字典序(即字符的 Unicode 编码顺序)逐字符比较
  2. let与const易错点
  3. defer:在 <head> 中通过 <script> 元素的 src 属性外部导入 JavaScript 文件时，还需要同时使用什么属性以确保脚本在 HTML 解析完成后再执行
  4. JavaScript只能修改已经被浏览器加载的HTML元素
  5. classList.add() 方法接受的是纯类名（如 "nav"），不需要选择器符号（如 . 或 #）

Vue

  1. Vue是什么：用于构建用户界面的渐近式JavaScript框架
  2. 用npm 或者 pnpm创建vue项目：
    alt text
    文件结构：
1. ├── node_modules     # Vue项目的依赖包目录，存放项目所需的所有npm包
2. ├── public           # 静态资源目录（如网页图标）
3. ├── src              # 源代码目录，存放项目的Vue组件、JavaScript代码等
4. ├── eslint.config.js # ESLint配置文件，定义代码规范和检查规则
5. ├── index.html       # 主HTML文件，应用的入口页面
6. ├── jsconfig.json    # JavaScript配置文件，用于设置编辑器和语言功能
7. ├── package.json     # 项目配置文件，管理依赖、脚本和元数据
8. ├── pnpm-lock.yaml   # pnpm包管理器的锁定文件，确保依赖版本一致性
9. ├── README.md        # 项目说明文档
10. └── vite.config.js  # Vite构建工具配置文件，定义打包和开发服务器设置
  1. 单页面运用（SPA）
    ⼀个Vue项⽬的内容都是通过单⼀⻚⾯(index.html )形成(文件入口)
<div id="app"></div>
<!-- html容器：Vue 会将整个应⽤的内容渲染到这个以app为根的元素内部 -->
<script type = "module" scr = "/scr/main.js" ></script>
<!-- 从这里引入一个vue实例 -->
  1. vue核心（创建项目自己就有了）
    通过main.js创建一个vue实例,即：js对象
  import { createApp } from 'vue'//使用vue自带函数createApp，这个函数表示在该应⽤实例中构建各种数据和⽅法
  import App from './App.vue'//导入单文件组件

  createApp(App).mount('#app')
// 将数据和⽅法运用到index.html的#app容器
将
  1. SFC单文件组件：每一个后缀.vue 文件
    • 包括组件逻辑（js）<script>
    • 包括组件模板（html）<template>
    • 包括组件样式（css）<style>
  2. 响应式对象：能够通过 Vue 响应式系统追踪其变化，确保组件在数据变化时⾃动更新视图
  3. ref：将⼀个普通的JavaScript 值（数值、对象等）变为响应式对象
  4. vue组件构成
<script setup>
// export default{
// setup(){
// 语法糖忽略
    import { ref } from 'vue'
    //导入 Composition API：按需导入 ref、reactive 等函数
    const count = ref(0)//响应式数据：使用 ref() 创建响应式变量count，通过 .value 访问值。
    const isLoading = ref(false) // 创建布尔响应式变量可以动态修改后面的样式
//}
    function add() {count.value++}
    // return{count, isLoading, add}//语法糖忽略
// }
</script>
<!-- setup 语法糖：直接在 <script setup> 中编写逻辑，无需显式定义 setup() 函数。 -->

<template>
 <button @click="count++">Count is: {{ count }}</button>
</template>

 <style scoped>
 button {
  font-weight: bold;
 }
 </style>
<!-- scoped 样式：通过 <style scoped> 确保样式仅作用于当前组件 -->
  1. 插值表达式:在html里绑定显示vue实例中的变量或者方法(不可以是变量，函数声明)
    alt text

<template>
 <p>{{message}}</p>
 </template>

 <script setup>
 import { ref } from 'vue';
 const message = ref('Hello World');
 </script>

  1. 常见v-指令，见链接

  2. ES6 引⼊了⼀种“⽤于把⽅法名直接赋给函数”的简写语法:忽略属性的冒号和function

  3. 选项式API:Vue2， 组合式API：vue3

  4. 组合式API语法糖(setup)：
    alt text

  5. 使⽤const定义ref 响应式对象，通过value 更改对象值

运用题

  1. 分别用内联样式和全局样式让如下代码的love变为非斜体字。（6分）
    <p>I<em>love</em>you, just kidding!</p>
    解答：font-style设置为normal
    直接在 标签中添加 style 属性覆盖斜体
    在
posted @ 2025-06-25 00:11  GJ504b  阅读(27)  评论(0)    收藏  举报