Day-01 前端 Web

Day-01 前端 Web - HTMLCSS

news2025/4/15 16:57:06

一、HTML 基础

1. HTML 简介

2. HTML 基本结构

3. 常用 HTML 标签

二、CSS 基础

1. CSS 简介

2. CSS 引入方式

3. 常用 CSS 选择器

4. 常用 CSS 属性

一、HTML 基础

1. HTML 简介

HTML（HyperText Markup Language）即超文本标记语言，是用于创建网页的标准标记语言。它通过各种标签来描述网页的结构和内容，浏览器会根据这些标签来渲染网页。

2. HTML 基本结构

一个基本的 HTML 文档结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 这里放置网页的可见内容 -->
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>

<!DOCTYPE html>：声明文档类型为 HTML5。
<html>：根标签，包含整个 HTML 文档。
<head>：包含文档的元数据，如字符编码、页面标题等。
<meta charset="UTF-8">：设置字符编码为 UTF - 8。
<title>：定义页面的标题，显示在浏览器的标签栏上。
<body>：包含网页的可见内容，如文本、图像、链接等。

3. 常用 HTML 标签

标题标签：<h1> - <h6>，用于定义不同级别的标题，<h1> 级别最高，字体最大。
段落标签：<p>，用于定义段落。
链接标签：<a>，用于创建超链接，例如 <a href="https://www.example.com">这是一个链接</a>。
图像标签：<img>，用于插入图像，例如 <img src="image.jpg" alt="图片描述">。

二、CSS 基础

1. CSS 简介

CSS（Cascading Style Sheets）即层叠样式表，用于控制 HTML 文档的外观和布局。它可以将内容与样式分离，使网页的设计更加灵活和易于维护。

2. CSS 引入方式

内联样式：直接在 HTML 标签中使用 style 属性，例如 <p style="color: red;">这是一个红色段落</p>。
内部样式表：在 HTML 文件的 <head> 标签中使用 <style> 标签定义样式，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部样式表示例</title>
    <style>
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <p>这是一个蓝色段落</p>
</body>
</html>

外部样式表：将 CSS 代码放在一个独立的 .css 文件中，然后在 HTML 文件的 <head> 标签中使用 <link> 标签引入，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式表示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>这是一个应用了外部样式的段落</p>
</body>
</html>

在 styles.css 文件中可以这样定义样式：

p {
    color: green;
}

3. 常用 CSS 选择器

元素选择器：通过元素名称选择元素，例如 p 选择所有的 <p> 标签。
类选择器：通过元素的 class 属性选择元素，类名前面加 .，例如 .my - class 选择所有 class 属性为 my - class 的元素。
ID 选择器：通过元素的 id 属性选择元素，ID 名前面加 #，例如 #my - id 选择 id 属性为 my - id 的元素。