前端html、css基础的基础

任子行2025-04-17 10:27

HTML与CSS基础入门指南

一、HTML基础

HTML（超文本标记语言）是网页的骨架，通过标签定义内容结构。每个HTML文档以<!DOCTYPE html>开头，包含<html>根标签，内部分为<head>（存放元信息）和<body>（显示内容）两部分。

常用标签示例：

html

复制

xml 复制代码

<h1>主标题</h1>    <!-- 标题标签 -->
<p>这是一个段落</p> <!-- 段落标签 -->
<ul>               <!-- 无序列表 -->
  <li>项目1</li>
  <li>项目2</li>
</ul>
<img src="image.jpg" alt="图片描述"> <!-- 图片标签 -->
<a href="https://example.com">链接</a> <!-- 超链接 -->

运行 HTML

二、CSS基础

CSS（层叠样式表）用于美化网页，通过选择器定位元素并设置样式。常用三种引入方式：内联样式、内部样式表（推荐）和外部.css文件。

基本语法：

css

复制

css 复制代码

选择器 {
  属性: 值;
}

常用选择器：

css

复制

css 复制代码

h1 { color: blue; }          /* 标签选择器 */
.content { font-size: 16px; } /* 类选择器 */
#header { background: #eee; } /* ID选择器 */

常见样式属性：

文字：color, font-size, font-family
布局：margin, padding, width
背景：background-color, background-image

三、实践示例

html

复制

xml 复制代码

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial;
      margin: 20px;
    }
    .article {
      border: 1px solid #ddd;
      padding: 15px;
    }
    .highlight {
      color: red;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="article">
    <h1>网页设计入门</h1>
    <p class="highlight">关键知识点：</p>
    <ul>
      <li>HTML构建结构</li>
      <li>CSS添加样式</li>
    </ul>
  </div>
</body>
</html>

运行 HTML

四、学习建议

使用浏览器开发者工具（F12）实时调试
通过MDN文档查询标签/属性用法
从简单布局开始实践，逐步增加复杂度

掌握HTML和CSS基础后，可继续学习响应式设计、Flexbox布局等进阶内容。网页开发需要持续练习，建议每周完成1-2个小项目巩固知识。