HTML简介与基础结构

HTML（超文本标记语言）是构建网页内容的标准标记语言。它使用标签来描述网页的结构和内容。

知识点

HTML不是编程语言，而是一种标记语言，用于定义网页内容的含义和结构。

HTML文档基本结构

每个HTML文档都遵循相同的基本结构，包含DOCTYPE声明、html、head和body元素。

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>
    <h1>欢迎来到我的网站</h1>
    <p>这是我的第一个HTML页面。</p>
</body>
</html>
实际效果

欢迎来到我的网站

这是我的第一个HTML页面。

常用HTML标签

HTML提供了多种标签来定义不同类型的内容，以下是一些最常用的HTML标签：

常用HTML标签示例 
<!-- 标题标签 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

<!-- 段落和文本格式 -->
<p>这是一个段落。</p>
<p>这是<strong>加粗</strong>和<em>斜体</em>的文本。</p>

<!-- 链接和图像 -->
<a href="https://www.example.com">访问示例网站</a>
<img src="image.jpg" alt="图片描述">

<!-- 列表 -->
<ul>
    <li>无序列表项1</li>
    <li>无序列表项2</li>
</ul>

<ol>
    <li>有序列表项1</li>
    <li>有序列表项2</li>
</ol>

<!-- 容器标签 -->
<div>这是一个块级容器</div>
<span>这是一个行内容器</span>
标签效果演示

一级标题

二级标题

三级标题

这是一个段落。

这是加粗和斜体的文本。

访问示例网站

无序列表：

  • 无序列表项1
  • 无序列表项2

有序列表：

  1. 有序列表项1
  2. 有序列表项2

CSS简介与引入方式

CSS（层叠样式表）用于描述HTML元素在屏幕上的显示方式，可以控制布局、颜色、字体等外观样式。

知识点

CSS的主要优点是将内容（HTML）与表现（CSS）分离，使网站更易于维护和更新。

CSS的三种引入方式

CSS可以通过内联样式、内部样式表和外部样式表三种方式引入到HTML文档中。

CSS引入方式示例 
<!-- 1. 内联样式（不推荐大量使用） -->
<h1 style="color: blue; font-size: 24px;">标题</h1>

<!-- 2. 内部样式表 -->
<style>
    h1 {
        color: blue;
        font-size: 24px;
    }
    p {
        color: #333;
        line-height: 1.6;
    }
</style>

<!-- 3. 外部样式表（推荐方式） -->
<!-- 在HTML头部引入 -->
<link rel="stylesheet" href="styles.css">

CSS基本语法

CSS规则由选择器和声明块组成，声明块包含一个或多个属性-值对。

CSS语法结构 
选择器 {
    属性1: 值1;
    属性2: 值2;
    /* 更多属性 */
}

/* 示例 */
h1 {
    color: #2c3e50;
    font-size: 32px;
    text-align: center;
}

CSS选择器

CSS选择器用于选择要样式化的HTML元素。了解不同的选择器是掌握CSS的关键。

CSS选择器示例 
/* 1. 元素选择器 */
p {
    color: #333;
}

/* 2. 类选择器 */
.highlight {
    background-color: yellow;
}

/* 3. ID选择器 */
#header {
    background-color: #4a6fa5;
}

/* 4. 后代选择器 */
div p {
    font-size: 16px;
}

/* 5. 子元素选择器 */
ul > li {
    list-style-type: square;
}

/* 6. 伪类选择器 */
a:hover {
    color: red;
    text-decoration: underline;
}

/* 7. 属性选择器 */
input[type="text"] {
    border: 1px solid #ccc;
}

/* 8. 通用选择器 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

选择器优先级

当多个选择器应用于同一元素时，CSS遵循特定的优先级规则：内联样式 > ID选择器 > 类选择器 > 元素选择器。了解这一点对于解决样式冲突非常重要。

盒模型与布局

CSS盒模型是网页布局的基础概念。每个HTML元素都被视为一个矩形盒子，包含内容、内边距、边框和外边距。

盒模型示意图
外边距 (margin)
边框 (border)
内边距 (padding)
内容 (content)
盒模型CSS示例 
.box {
    width: 200px;
    height: 150px;
    padding: 20px; /* 内边距 */
    border: 5px solid #4a6fa5; /* 边框 */
    margin: 30px; /* 外边距 */
    background-color: #f1f8ff;
    box-sizing: border-box; /* 重要：包含边框和内边距在宽度内 */
}

重要提示

默认情况下，元素的宽度和高度只包括内容区域。使用box-sizing: border-box可以让宽度和高度包含内边距和边框，这通常更符合直觉，也是现代CSS布局的推荐做法。

返回首页 下一章：Flexbox布局