Dreamer寻1. HTML与CSS的本质区别
2003年我刚入行时，总把HTML和CSS混为一谈，直到亲手做了个"五彩斑斓黑"的网页才明白它们的本质差异。HTML（HyperText Markup Language）是网页的骨架，而CSS（Cascading Style Sheets）则是给骨架穿衣服的造型师。举个例子：当你在网页里看到"点击注册"按钮，按钮本身是HTML用<button>标签创建的，但按钮的蓝色背景、圆角边框、悬停变色效果，这些都是CSS的功劳。
HTML5标准中新增的语义化标签（如<article>、<section>）让结构更清晰，而CSS3带来的Flexbox和Grid布局则彻底改变了传统float定位的繁琐。我曾用纯HTML写过一个政府网站，结果领导看完说像1998年的页面——没有CSS的HTML就像毛坯房，虽然功能齐全但毫无美感。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. HTML的原子化构建
2.1 基础文档结构
每个HTML文件都该以<!DOCTYPE html>开头，这个声明不是标签而是告诉浏览器："请用最新标准渲染我"。去年我接手个老项目，发现缺少DOCTYPE导致IE浏览器触发怪异模式，页面布局全乱。完整的结构应该像这样：
html复制<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
</head>
<body>
<!-- 内容区 -->
</body>
</html>
2.2 常用标签实战
- 文本容器：
<p>适合段落，<span>用于行内样式控制 - 列表：无序列表
<ul>配合<li>比手动打•符号专业得多 - 表单：
<input type="email">会自动验证邮箱格式，比单纯用text类型更规范
有个容易忽略的细节：<img>标签必须包含alt属性，这是WCAG无障碍访问的基本要求。有次我忘记写alt，导致视障用户完全不知道图片内容。