1. HTML基础知识

1.1 HTML简介

HTML（HyperText Markup Language）即超文本标记语言，是用于创建网页的标准标记语言。它描述了一个网站的结构，而不涉及外观设计。HTML文档由一系列的元素组成，这些元素被用来定义网页的内容。

1.2 HTML基本结构

以下是一个简单的HTML文档结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <a href="http://www.example.com">这是一个链接</a>
</body>
</html>

1.3 常用HTML标签

  • <h1> 到 <h6>：标题标签，<h1> 是最大的标题，<h6> 是最小的标题。
  • <p>：段落标签。
  • <a>：超链接标签。
  • <img>：图片标签。
  • <div>：块级元素，用于对内容进行分组。
  • <span>：内联元素，用于对内容进行细粒度的控制。

2. CSS基础

2.1 CSS简介

CSS（Cascading Style Sheets）即层叠样式表，用于控制网页的样式和布局。CSS可以单独编写，也可以嵌入到HTML文档中。

2.2 CSS基本语法

以下是一个简单的CSS样式：

body {
    font-family: Arial, sans-serif;
    background-color: #f8f8f8;
}

h1 {
    color: #333;
}

p {
    color: #666;
}

2.3 常用CSS属性

  • color：设置文本颜色。
  • background-color：设置背景颜色。
  • font-family：设置字体。
  • margin：设置外边距。
  • padding：设置内边距。
  • width：设置宽度。
  • height：设置高度。

3. HTML与CSS结合

3.1 内联样式

在HTML标签中直接使用style属性定义样式，例如：

<p style="color: red;">这是一个红色的段落。</p>

3.2 内部样式

在HTML文档的<head>部分定义<style>标签，例如：

<head>
    <style>
        p {
            color: red;
        }
    </style>
</head>

3.3 外部样式

将CSS样式保存为单独的文件，并在HTML文档中通过<link>标签引入，例如：

<head>
    <link rel="stylesheet" href="style.css">
</head>

4. 常用HTML5特性

4.1 响应式设计

响应式设计可以让网页在不同设备上都能良好显示。可以使用CSS媒体查询来实现响应式设计。

@media screen and (max-width: 600px) {
    body {
        background-color: blue;
    }
}

4.2 本地存储

HTML5提供了本地存储功能，例如localStorage和sessionStorage，可以用于存储数据。

localStorage.setItem('key', 'value');
var value = localStorage.getItem('key');

4.3 新增标签

HTML5新增了许多标签，例如<article>、<section>、<nav>等，用于更好地组织网页内容。

5. 学习资源

  • MDN Web Docs：Mozilla 开发者网络提供的全面HTML和CSS教程。
  • W3Schools：提供丰富的HTML和CSS教程。
  • 菜鸟教程：提供中文的HTML和CSS教程。

通过以上内容，新手可以快速掌握HTML前端设计的基本知识。在实践过程中，不断学习和积累，相信你会成为一名优秀的前端开发者。