前端零基础入门 前端开发

HTML 与 CSS 入门:从第一个网页开始

HTML 与 CSS 入门

把网页想象成一栋房子:HTML 是骨架,CSS 是装修,JavaScript 是水电。这一篇先把前两件事做对。

一、HTML 骨架

每个页面都以文档声明开头,根节点是 <html>,头部放元信息,主体放可见内容:

<!DOCTYPE html>
<html lang="zh-CN">
  <head><meta charset="UTF-8"><title>我的第一页</title></head>
  <body>
    <h1>你好,世界</h1>
  </body>
</html>

二、高频标签

标题、段落、链接、图片与列表是出现频率最高的五个:

<h1>主标题</h1>
<p>一段正文,可以 <strong>加粗</strong>、<em>斜体</em>。</p>
<a href="https://example.com">去逛逛</a>
<img src="cover.jpg" alt="封面说明" />
<ul><li>第一项</li><li>第二项</li></ul>

三、CSS 美化样式

class 挂样式,尽量少用内联样式,方便复用:

h1 { color: #2456e6; }
.card { border: 1px solid #eee; border-radius: 12px; padding: 16px; }

四、实战建议

先在浏览器里用“检查元素”观察任意网页的骨架,再照葫芦画瓢临摹一遍;遇到布局问题多试试 Flexbox。HTML 与 CSS 的核心不是背诵标签,而是保持“结构—样式”分离的思维。