前端网页开发基础教程：HTML、CSS 与 JavaScript

表格标签

• 表格：<table>
• 行：<tr>
• 表头：<th>
• 单元格：<td>

快速建表提示：在编辑器中输入 table>tr*4>td*4 并按 Tab 键可生成 4 行 4 列的表格。

示例代码：

<table width="400">
  <tr>
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
    <th>英语</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>84</td>
    <td>87</td>
    <td>94</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>79</td>
    <td>88</td>
    <td>92</td>
  </tr>
  <tr>
    <td>小王</td>
    <td>79</td>
    <td>88</td>
    <td>92</td>
  </tr>
</table>

常用属性：

• border: 边框
• height/width: 高度/宽度
• align: 内容水平位置 (left, center, right)
• valign: 内容垂直位置 (top, middle, bottom)
• cellspacing: 单元格间距
• cellpadding: 单元格内边距
• bgcolor: 背景颜色
• colspan: 跨列合并
• rowspan: 跨行合并

注意：

• th 单元格内容默认居中加粗，td 无此效果。
• 表格内容必须放在单元格中。
• 绘制表格建议添加 border 属性以便显示。

表单标签

• 表单区域：<form>
• 输入框：<input> (type 属性决定样式)
  • text: 文本输入框
  • password: 密码框
  • radio: 单选框 (name 相同互斥)
  • checkbox: 多选框

示例代码：

<form>
  账号:<input type="text" placeholder="请输入账号" />
  <br />
  密码:<input type="password" />
  <br />
  性别:
  <input type="radio" name="gender" />男
  <input type="radio" name="gender" />女
  <br />
  课程:
  <input type="checkbox" name="course" />政治
  <input type="checkbox" name="course" />语文
  <input type="checkbox" name="course" />数学
  <input type="checkbox" name="course" />英语
</form>

• 下拉选择框：<select> + <option>
• 多行文本域：<textarea> (cols, rows 属性)
• 按钮：<input type="submit/reset/button" value="..."/>

CSS 教程

概述

CSS 是一种样式表语言，用于修饰 HTML 标签，使页面更美观。

基础语法

CSS 代码可写在 <style> 标签中或外部 .css 文件中。 注释：/* */

引入外部样式表：

<link rel="stylesheet" href=".css 文件位置" />

选择器

• 标签选择器：匹配所有指定标签
• id 选择器：匹配唯一 id 的标签
• 类选择器：匹配 class 相同的标签组
• 通配选择器：匹配所有标签

示例代码：

p { }
#shell { }
.content { }
* { }

修饰文本与背景

通过 CSS 属性控制字体、颜色、对齐方式及背景图像等。

透明度

使用 opacity 属性定义透明度，范围 0.0 ~ 1.0。

示例代码：

#photo {
  opacity: 0.5;
}

伪类

表示标签的特殊状态：

• :hover: 鼠标移入
• :active: 被点击
• :focus: 获得焦点

示例代码：

#photo:hover {
  opacity: 1.0;
}

盒子模型

每个标签视为一个盒子，包含内容区、内边距、边框、外边距。

• content: 内容区大小由 width/height 设置
• padding: 内边距影响盒子整体大小
• border: 边框三要素为宽度、颜色、样式
• margin: 外边距不影响盒子大小，但影响位置

水平居中技巧：将 margin 设置为 auto。

浮动

浮动属性让标签脱离文档流。浮动后需清除浮动以防止布局错乱。

定位

position 属性规定定位类型：

• static: 默认，不受 top/bottom/left/right 影响
• fixed: 相对于视口定位，滚动时固定
• relative: 相对于正常位置定位
• absolute: 相对于最近的定位祖先元素定位

JavaScript 教程

概述

JavaScript (JS) 是为网页添加动态功能的脚本语言。

基础语法

脚本写在 <script> 标签或外部 .js 文件中。

注释：

• 单行：//
• 多行：/* */

变量声明：

• 弱类型语言，用 var 声明
• 数据类型：number, string, boolean, undefined, object

示例代码：

var a = 10;
var b = "5";
var c = true;
var g; // undefined
alert(typeof(g));

运算符：

• 算术：+, -, *, /, % (加法也用于字符串连接)
• 比较：==, === (全等比较值和类型), !=, !==
• 逻辑：&&, ||, !
• 条件：? :

流程控制：if/else, for, while 等。

函数

使用 function 关键字声明。

示例代码：

function test() {
  alert("你好");
}
test();

全局函数：alert, typeof, eval, parseInt, parseFloat。

事件

监听交互动作或状态变化：

• onclick: 单击
• dblclick: 双击
• onblur/onfocus: 失去/获得焦点
• onmouseover/onmouseout: 鼠标移入/移出
• onkeydown: 按键
• onload: 加载完成
• onchange: 内容改变

计时

• setTimeout: 延迟执行一次
• setInterval: 定时重复执行
• clearTimeout/clearInterval: 关闭定时器

HTML DOM

DOM (Document Object Model) 允许 JS 操作网页标签。 获取标签对象：

var obj = document.getElementById("txt1");

操作属性：

obj.style.backgroundColor = "blue";

操作内容：

• innerText: 文本内容
• innerHTML: 包括子标签的内容

HTML、CSS、JS 三者之间的关系

• HTML: 网页骨架，负责结构和内容。
• CSS: 样式描述，负责颜色和布局。
• JS: 动态脚本，负责交互和响应式行为。

三者合称'前端三剑客'，是学习前端开发的必备基础技能。