HTML / CSS / JavaScript 基础复习

这是学框架之前的一次"基础回访"：结构（HTML）、样式（CSS）、行为（JS）三件套各挑常见的用法，全都在下面真跑一遍。
这一页不加载任何外部库 —— 它演示的正是"原生时代"的写法；把它和 1.1、1.3、1.4 放在一起看，就能明白后面那些库到底替你省了什么。

HTML 结构：页面上有什么（语义标签 · 文本列表 · 表格 · 表单）
1 文档结构与语义标签 header / nav / main / article / aside / footer 

        

          
下面这个"示意图"就是用语义标签搭出来的（只是加了框线便于观察）

          

            
<header> 页头：标题、logo

            
<nav> 导航：一组链接

            

              

                
<article> 一篇独立内容

                
<section> 其中的一个"小节"

              

              
<aside> 侧边

            

            
<footer> 页脚：版权、联系方式

          

          
这些标签默认不改外观，样式照样由 CSS 决定；它们的价值是"自带含义"，方便搜索引擎和屏幕阅读器理解页面。

        

      


      
      

        

          2
          标题、段落、列表与强调
          h1-h6 / p / ul / ol / dl / blockquote
        

        

        

          
一级标题 h1（一页通常只用一个）

          
二级标题 h2

          
三级标题 h3

          
段落 p，里面可以有 加粗强调 strong、斜体强调 em、行内代码 code。

          
    
            
  • 无序列表 ul：没有先后
    • 
            
  • 第二项
    • 
          

          
    
            
  1. 有序列表 ol：有先后
    2. 
            
  2. 第二步
    3. 
          

          

            
HTML

            
负责结构

            
CSS

            
负责样式

          

          
blockquote：引用一段别人的话。

          

          
hr 是分隔线；列表默认带缩进，是因为浏览器给了默认样式，仍然可以被 CSS 覆盖。

        

      


      
      

        

          3
          表格
          table / thead / tbody / th / td / colspan
        

        

        

          

            期末成绩（caption 是表格标题）
            
              
姓名平时期末

            
            
              
张三9288

              
李四8591

              
王五7769

            
            
              
平均 83.7（colspan="3" 让它横跨三列）

            
          

          
thead / tbody / tfoot 把表头、表体、表尾分开；th 是表头单元格，默认加粗居中。

        

      


      
      

        

          4
          表单元素与原生校验
          form / input / select / textarea / label / required
        

        

        

          

            

              
              
            

            

              
              
            

            

              
              
            

            

              
              
            

            

              你想学的方向
              

                
                
              

            

            

              
              
            

            
点"提交"时，如果姓名没填，浏览器会直接弹提示 —— 这是 HTML 自带的校验，一行 JS 都没写。

          

        

      

    

  


  
  

    

      CSS
      样式：长什么样（选择器 · 盒模型 · 布局 · 定位 · 动画）
    


    

      
      

        

          1
          选择器与优先级
          元素 / 类 / ID / 伪类 / 后代
        

        

        

          
同一段文字，被三条规则同时命中，最后是谁说了算？

          

            
我同时带着 ID、class，也在 p 标签里

          

          
实际生效的颜色：—

          
    
            
  • 第一行（奇数行有底色）
    • 
            
  • 第二行（鼠标移上来看看）
    • 
            
  • 第三行
    • 
            
  • 第四行
    • 
          

        

      


      
      

        

          2
          盒模型：width 到底算不算 padding 和 border
          box-sizing / padding / border / margin
        

        

        

          
两个盒子 width 都写 110px，padding、border 也完全一样

          

            
content-box

            
border-box

          

          
—

          
用 JS 读了一下它们的 offsetWidth：数值不一样，就是因为 box-sizing 不同。这也是为什么要全局设成 border-box。

        

      


      
      

        

          3
          Flex 弹性布局：一维排列
          display:flex / justify-content / align-items
        

        

        

          

            
            
            
            
          

          

            
            
            
          

          

            
1

            
2 高一点

            
3

          

          
当前：justify-content: space-between；align-items: center

        

      


      
      

        

          4
          Grid 网格布局：二维排列
          display:grid / repeat / grid-column
        

        

        

          

            
            
            
            
          

          

            1
            2
            3
            4
            5
            6
          

          
当前：grid-template-columns: repeat(3, 1fr)

        

      


      
      

        

          5
          定位与层叠
          relative / absolute / fixed / sticky / z-index
        

        

        

          

            
A：absolute，z-index: 1

            
B：absolute，z-index: 2

            
舞台本身是 position: relative

          

          

            
          

          
z-index 数字大的盖在上面；它只对"已定位"的元素生效。

        

      


      
      

        

          6
          过渡、动画与 CSS 变量
          transition / @keyframes / var()
        

        

        

          
鼠标悬停：我会放大并变绿

          

            
            上面这个小方块是 @keyframes 动画，会一直转
          

          

            
            
            
          

          
按钮只改了一个 CSS 变量 --c6-accent，上面卡片的背景就整体跟着变了。

        

      

    

  


  
  

    

      JS
      行为：能做什么（数据 · 数组对象 · 函数 · DOM · 异步）
    


    

      
      

        

          1
          变量、类型与模板字符串
          let / const / typeof / `${}`
        

        

        

          

            
            
            
            
          

          
点上面的按钮看输出。

        

      


      
      

        

          2
          数组常用方法
          map / filter / reduce / find / includes
        

        

        

          
原始数组：[92, 58, 77, 45, 88]

          

            
            
            
            
            
          

          
点按钮看结果。

        

      


      
      

        

          3
          对象、解构与展开
          {} / 解构 / ... 展开 / Object.keys
        

        

        

          
原始对象：{ name: '张三', age: 20, city: '北京' }

          

            
            
            
          

          
点按钮看结果。

        

      


      
      

        

          4
          函数、箭头函数与闭包
          默认参数 / => / 闭包
        

        

        

          

            
            
            
          

          
点按钮看结果。

        

      


      
      

        

          5
          DOM 操作与事件（原生待办清单）
          querySelector / createElement / addEventListener
        

        

        

          

            
            
          

          
    
            
  • 买牛奶 
    • 
            
  • 写周报 
    • 
          

          
这一小块和 1.3 里 jQuery 那一栏做的是同一件事，对比一下代码量。

        

      


      
      

        

          6
          异步：setTimeout / Promise / async-await
          定时器 / Promise / await
        

        

        

          

            
            
            
          

          
点按钮看输出（注意"一秒后"那句是最后才出现的）。

        

      

    

  


  
  

    

      衔接
      同一件事，四种写法 —— 从这里走向后面的框架
    

    

      

        
          

            要做的事
            原生 HTML / CSS / JS（本页）
            jQuery（1.3）
            Vue 3（1.1）
            Bootstrap（1.4）
          

        
        
          
选中元素querySelector()$('#id')不用选，直接绑数据—

          
改文字el.textContent = x$el.text(x){{ x }}—

          
列表渲染createElement + append$('<li>').appendTo()v-for—

          
绑事件addEventListener.on('click')@clickdata-bs-toggle

          
表单取值input.value.val()v-modelform-control 类

          
页面布局flex / grid——.row / .col 栅格

          
组件复用复制粘贴 / 模板字符串自己封装函数单文件组件预置组件类

        
      

      

        一句话总结：原生写法把"每一步"都摊在你面前；jQuery 把它变短；Vue 让你只描述数据和样子；Bootstrap 直接给你一套现成的样式与组件。
        后面几讲要学的，就是这张表里一列一列的变化。
      

    

  


  

    SE3306 · Web 前端框架技术 · 原生 HTML / CSS / JavaScript 基础复习  |  本页不加载任何外部库