Java Web 前端基础速查手册：HTML、CSS、JavaScript、DOM 与 BOM 核心知识点

HTML 核心标签速查

列表

• 无序：<ul><li>...</li></ul>，type：disc/circle/square。
• 有序：<ol><li>...</li></ol>，type：1/a/i。
• 自定义：<dl><dt>术语</dt><dd>描述</dd></dl>。

图片与路径

<img src="path" width="100" height="100" alt="提示文本" />

• 相对路径：同级 img.jpg、子目录 dir/img.jpg、父目录 ../img.jpg。
• 绝对路径：https://host/path 或 /path（服务器根）。

超链接

<a href="url" target="_blank">链接文本</a>  // 新窗口
<a href="#anchor">跳转到锚点</a>
<a name="anchor">锚点位置</a>

表格

<table border="1" cellspacing="0" cellpadding="5">
  <caption>标题</caption>
  <tr><th>表头</th><th>表头</th></tr>
  <tr><td>数据</td><td>数据</td></tr>
  <tr><td rowspan="2">跨行</td><td>数据</td></tr>
  <tr><td colspan="2">跨列</td></tr>
</table>

表单

<form action="/submit" method="post" enctype="multipart/form-data">
  <input type="text" name="username" />
  <input type="password" name="pwd" />
  <input type="radio" name="sex" value="male" checked="checked" />男
  <input type="checkbox" name="hobby" value="read" />阅读
  <select name="city"><option value="bj" selected>北京</option></select>
  <textarea name="desc" rows="5" cols="30"></textarea>
  <input type="hidden" name="token" value="abc" />
  <input type="submit" value="提交" />
  <input type="reset" value="重置" />
  <input type="button" value="普通按钮" onclick="jsFunc()" />
</form>

get 参数拼 URL，post 放请求体，更安全、无长度限制。文件上传需 enctype="multipart/form-data"。

框架（已废弃，了解即可）

<frameset rows="80,*">
  <frame name="top" src="top.html" />
  <frameset cols="120,*">
    <frame name="left" src="menu.html" />
    <frame name="right" src="main.html" />
  </frameset>
</frameset>

子页面链接 target="right" 可在右侧框架打开。

CSS 核心

引入方式（优先级由低到高）

1. 外部链接：<link rel="stylesheet" href="style.css" />（推荐）。
2. 内部样式：<style>...</style>。
3. 内联样式：<div style="color:red">。
4. @import url(...)（不推荐，阻塞加载）。

选择器

• 标签选择器：div { color:red; }
• 类选择器：.cls { ... } / div.cls { ... }
• ID 选择器：#id { ... }
• 后代选择器：div p { ... }
• 群组选择器：div, p { ... }
• 伪类：a:link/:hover/:active/:visited

优先级：内联 > ID > 类/伪类 > 标签 > 通配符 > 继承 > 浏览器默认。

盒模型

div { width:200px; height:100px; border:2px solid blue; padding:20px; margin:10px; }

• border 边框，可分边设置。
• padding 内边距（内容到边框）。
• margin 外边距（盒子到外部）。

浮动与定位

• float: left/right：脱离文档流，左右排列。
• position: static/relative/absolute/fixed：relative 相对自身偏移不脱离流，absolute 相对最近定位祖先脱离流。

JavaScript 核心语法

基本类型与变量

• var 声明（函数作用域），ES6 推荐 let/const（块作用域）。
• 类型：string、number（无整/浮点区分）、boolean、null、undefined。
• typeof x 检测类型。

流程控制

if/else、switch、for/while/do-while 语法同 Java，== 类型转换比较，=== 严格相等。

数组

var arr = [1, "two", true];           // 字面量
var arr2 = new Array(5);              // 长度 5
var arr3 = new Array(1,2,3);          // 元素 1,2,3
arr.push(4); arr.pop(); arr.reverse(); // 常用方法

函数

function add(a,b) { return a+b; }           // 声明式
var add2 = function(a,b) { return a+b; };   // 匿名函数表达式
var add3 = new Function("a,b", "return a+b;"); // 构造函数（少用）
// 模拟重载
function add() {
    var sum = 0;
    for (var i=0; i

div.innerHTML = "<h1>标题</h1>"; // 解析 HTML
var html = div.innerHTML;            // 获取 HTML 字符串

<div id="clock"></div>
<script>
setInterval(function() {
    document.getElementById("clock").innerHTML = new Date().toLocaleString();
}, 1000);
</script>

function toggleAll() {
    var all = document.getElementById("chkAll");
    var items = document.getElementsByName("item");
    for (var i=0; i

var data = {
    "中国": ["北京","上海","广州"],
    "美国": ["纽约","洛杉矶"]
};
function loadCities(val) {
    var citySel = document.getElementById("city");
    citySel.options.length = 0; // 清空
    if (data[val]) {
        data[val].forEach(function(c) {
            citySel.add(new Option(c, c));
        });
    }
}
// HTML: <select id="country" onchange="loadCities(this.value)">...