介绍
HTML和CSS是前端开发中最基础的两种技术，它们是构建网页和美化页面的核心。如果你是一名前端小白，不用担心，本篇文章将为你提供HTML和CSS的基础知识，让你轻松入门前端开发。
第一部分：HTML 基础
1. 什么是HTML？ HTML，全称为超文本标记语言（HyperText Markup Language），是一种用于描述网页结构的标记语言。它使用标签来定义网页的各个部分。
2. HTML 文档结构
一个简单的HTML文档由以下几个基本标签组成：
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
<!-- 在此处添加页面内容 -->
</body>
</html>
- <!DOCTYPE html>：声明文档类型，表示使用HTML5进行编写。
- <html>：整个HTML文档的根元素。
- <head>：包含与文档相关的信息，如标题、字符集等。
- <title>：定义网页标题，显示在浏览器的标签页上。
- <body>：包含网页的主要内容。
3. 常用的 HTML 标签
<h1>至<h6>：标题标签，用于定义不同级别的标题。
<p>：段落标签，用于定义段落文本。
<ul>和<ol>：无序列表和有序列表标签，用于创建项目列表。
<li>：列表项标签，在<ul>或<ol>内使用，定义每个列表项。
4. HTML 属性
HTML标签可以使用属性来提供更多信息。例如，<img>标签用于插入图片：
<img src="图片地址" alt="图片描述">
src属性：指定图片的URL地址。alt属性：在图片无法显示时，显示替代文本。
5. 超链接和图片
- 创建超链接：
<a href="链接地址">链接文本</a>
- 插入图片：
<img src="图片地址" alt="图片描述">
第二部分：CSS 基础
1. 什么是CSS？
CSS，全称为层叠样式表（Cascading Style Sheets），是一种用于控制网页样式和布局的样式表语言。它可以让我们对网页进行美化，使其更加吸引人。
2. CSS 样式的应用
- 在HTML文档中引入CSS样式表：
<head>
<link rel="stylesheet" href="styles.css">
</head>
- 在styles.css文件中编写CSS样式。
3. CSS 选择器
- 标签选择器：
p {
/* 在此处添加样式 */
}
- 类选择器：
.classname {
/* 在此处添加样式 */
}
- ID选择器：
#idname {
/* 在此处添加样式 */
}
4. 文本样式
- 设置字体、大小和颜色：
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
}
- 文本对齐：
h1 {
text-align: center;
}
5. 盒模型和布局
- 盒模型包括内容区、内边距、边框和外边距：
div {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid #ccc;
margin: 20px;
}
- 浮动元素：
.float-left {
float: left;
}
.float-right {
float: right;
}
结语
HTML和CSS是前端开发的基础，本文介绍了HTML文档的基本结构、常用标签和属性，以及CSS样式的应用和常用选择器。希望这篇入门指南能够帮助你快速上手前端开发，并为你的学习之旅打下坚实基础。
附录
进一步学习HTML和CSS的优质资源：
- MDN Web 文档
- W3Schools 在线教程
- CodePen 在线编辑器
祝你前端学习愉快，不断进步！