#前端基础 #JAVA原理

HTML

HTML 与 CSS 基础

HTML 描述内容结构,CSS 决定视觉呈现。浏览器解析 HTML 后生成 DOM 树,再依据 CSS 计算布局与绘制结果。

HTML 文档树与 CSS 盒模型

HTML 文档骨架

代码块HTML · 14 行收起展开
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>页面标题</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>页面主标题</h1>
  <p>正文内容</p>
  <script src="app.js"></script>
</body>
</html>

HTML 标签不区分大小写,但工程中统一使用小写;属性值统一加引号。HTML 容错较强不代表可以随意省略结构,规范结构更利于可访问性、SEO 和维护。

文本、链接与媒体

需求标签关键点
标题h1 至 h6表达层级,不按字号选标签
段落/换行p / br段落优先,少用连续 br 排版
强调strong / em同时表达语义
水平分隔hr表示主题切换
图片img必须提供有意义的 alt
音视频audio / video通常配合 controls
链接atarget="_blank" 时补 rel="noopener"

相对路径从当前 HTML 文件出发:./ 表示当前目录,../ 表示上一级。生产项目尽量避免写死磁盘绝对路径。

代码块HTML · 2 行收起展开
<a href="https://example.com" target="_blank" rel="noopener">外部链接</a>
<img src="./images/logo.png" alt="产品标志" width="160">

CSS 引入与选择器

CSS 有三种引入方式:

  1. 行内样式:只适合极少数动态值。
  2. 内嵌样式:适合单页演示。
  3. 外部样式表:实际项目首选,可缓存、可复用。
<link rel="stylesheet" href="style.css">
/* 元素选择器 */
p { color: #334155; }

/* 类选择器 */
.summary { font-size: 1rem; }

/* ID 选择器 */
#app { max-width: 960px; }

同等条件下,ID 选择器优先级高于类选择器,类选择器高于元素选择器。不要靠不断叠加高优先级解决样式冲突,应控制选择器层级并让组件边界清晰。

颜色可使用关键字、rgb()、十六进制或现代的 hsl()。字号、行高、缩进和对齐常用 font-size、line-height、text-indent、text-align。

盒模型

一个元素从内到外由以下部分组成:

  1. content:实际内容。
  2. padding:内容与边框之间的内边距。
  3. border:边框。
  4. margin:元素与外界之间的外边距。
代码块CSS · 8 行收起展开
* { box-sizing: border-box; }

.card {
  width: 320px;
  padding: 16px;
  border: 1px solid #cbd5e1;
  margin: 24px auto;
}

使用 border-box 后,声明的宽高包含 padding 和 border,更符合组件布局直觉。单独设置方向时使用 padding-top、margin-left 等属性。

表格

代码块HTML · 8 行收起展开
<table>
  <thead>
    <tr><th>姓名</th><th>方向</th></tr>
  </thead>
  <tbody>
    <tr><td>张三</td><td>Java</td></tr>
  </tbody>
</table>

table 表示表格,tr 表示行,th 表示表头单元格,td 表示普通单元格。表格用于二维数据,不应用于页面布局。

表单

代码块HTML · 15 行收起展开
<form action="/users" method="post">
  <label>
    用户名
    <input name="username" type="text" required>
  </label>
  <label>
    角色
    <select name="role">
      <option value="student">学生</option>
      <option value="teacher">教师</option>
    </select>
  </label>
  <textarea name="bio"></textarea>
  <button type="submit">提交</button>
</form>

表单项必须有 name 才会参与传统表单提交。GET 参数进入 URL 查询串,适合查询;POST 数据通常进入请求体,适合创建或复杂提交。POST 不等于安全,真正的机密性依赖 HTTPS,服务端仍须鉴权和校验。

常见 input 类型包括 text、password、radio、checkbox、file、date、number、hidden 和 submit。

容易混淆的边界

  • span 是行内容器,默认没有业务语义;需要区块布局时通常使用 div 或语义化区块标签。
  • HTML 中连续普通空格会折叠;不要用大量 &nbsp; 做布局。
  • width 与 height 决定尺寸,不等于图片本身的真实像素。
  • 样式负责表现,HTML 负责结构;避免把所有 CSS 都写在标签的 style 属性中。

延伸阅读