HTML 和 CSS 基础笔记
一、HTML 基础
HTML（超文本标记语言）是构建网页的基础，它定义了网页的结构和内容。HTML 使用标签（tags）来描述网页上的元素，标签通常成对出现，包含一个开始标签和一个结束标签。
1. 基本结构
一个简单的 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>Welcome to My Website</h1>
<p>This is a simple HTML page.</p>
</body>
</html>
<!DOCTYPE html>：声明文档类型，告诉浏览器这是一个 HTML5 文档。<html>：HTML 文档的根元素。<head>：包含文档元数据，如字符集、视口设置、标题、链接等。<body>：网页内容部分，包含实际显示在页面上的内容。
2. 常用标签
-
文本标签
<h1> - <h6>：标题标签，表示不同级别的标题。<p>：段落标签，用于显示文本段落。<a>：超链接标签，允许用户点击跳转到其他页面。<strong>：加粗文本，强调重要性。<em>：斜体文本，表示强调。<br>：换行标签。
<h1>Main Title</h1> <p>This is a paragraph with <strong>strong</strong> emphasis.</p> <a href="https://www.example.com">Visit Example</a> -
列表标签
<ul>：无序列表。<ol>：有序列表。<li>：列表项。
<ul> <li>Item 1</li> <li>Item 2</li> </ul> <ol> <li>First</li> <li>Second</li> </ol> -
图片和多媒体
<img>：图像标签，用于嵌入图片。<video>：视频标签，用于嵌入视频。<audio>：音频标签，用于嵌入音频文件。
<img src="image.jpg" alt="Description of image" /> <video controls> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
3. 表格和表单
-
表格
<table>：表格。<tr>：表格行。<th>：表头单元格。<td>：表格单元格。
<table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> </table> -
表单
<form>：表单标签，用于收集用户输入。<input>：输入框。<label>：为表单元素定义标签。<button>：按钮。
<form action="/submit" method="POST"> <label for="name">Name:</label> <input type="text" id="name" name="name"> <button type="submit">Submit</button> </form>
二、CSS 基础
CSS（层叠样式表）是用来控制 HTML 元素的外观和布局的语言。通过 CSS，你可以设置颜色、字体、间距、定位等样式。
1. 引入 CSS
CSS 可以通过三种方式引入到 HTML 中：
-
内联样式：在 HTML 标签的
style属性中直接写样式。<h1 style="color: blue; text-align: center;">Hello, CSS!</h1> -
内部样式表：在
<head>部分使用<style>标签嵌入 CSS。<style> h1 { color: red; text-align: center; } </style> -
外部样式表：通过
<link>标签引入外部 CSS 文件。<link rel="stylesheet" href="styles.css">
2. 选择器
CSS 使用选择器来选中 HTML 元素并应用样式。
-
元素选择器：选择指定标签的所有元素。
h1 { color: green; } -
类选择器：选择具有特定类名的元素，类名前加点（
.）。.highlight { background-color: yellow; } -
ID 选择器：选择具有特定 ID 的元素，ID 前加井号（
#）。#header { font-size: 24px; } -
组合选择器：选择多个元素的组合。
h1, h2 { color: darkblue; }
3. 常用属性
-
字体和文本样式
font-family：设置字体。font-size：设置字体大小。font-weight：设置字体粗细。text-align：设置文本对齐方式。line-height：设置行高。
h1 { font-family: Arial, sans-serif; font-size: 36px; text-align: center; } -
颜色和背景
color：设置文字颜色。background-color：设置背景颜色。background-image：设置背景图片。
p { color: darkgray; background-color: lightblue; } -
盒子模型
width和height：设置元素的宽度和高度。padding：设置元素内边距。margin：设置元素外边距。border：设置元素边框。
.box { width: 200px; height: 150px; padding: 20px; margin: 10px; border: 2px solid black; }
4. 布局和定位
-
浮动布局：使用
float属性将元素浮动到容器的一侧。.left { float: left; } -
Flexbox 布局：使用 Flexbox 实现灵活的布局。
.container { display: flex; justify-content: space-between; } -
Grid 布局：使用 CSS Grid 实现网格布局。
.grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; } -
定位：使用
position属性进行元素的定位。static：默认定位，不做定位。relative：相对定位。absolute：绝对定位。fixed：固定定位。
.box { position: absolute; top: 50px; left: 100px; }
5. 过渡和动画
-
过渡（Transition）：为元素的属性变化添加过渡效果。
.box { width: 100px; height: 100px; background-color: red; transition: all 0.3s ease; } .box:hover { width: 200px; background-color: blue; } -
动画（Animation）：使用
@keyframes定义动画。@keyframes move { 0% { left: 0; } 100% { left: 100px; } } .box { position: relative; animation: move 2s infinite; }
三、HTML 与 CSS 的结合
通过合理的 HTML 结构和 CSS 样式，你可以创建美观、功能强大的网页。通常，HTML 负责定义结构，CSS 负责定义外观。通过这两者的结合，可以实现一个响应式、用户友好的网页。
例如，创建一个带有样式的表单：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="
width=device-width, initial-scale=1.0">
<title>Form Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
}
form {
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 300px;
margin: 0 auto;
}
label {
font-weight: bold;
margin-bottom: 5px;
display: block;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #5cb85c;
color: white;
border: none;
border-radius: 4px;
}
</style>
</head>
<body>
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Submit</button>
</form>
</body>
</html>
四、总结
HTML 和 CSS 是网页开发的基础，掌握它们的基本语法和常用标签/属性，是前端开发的第一步。HTML 负责结构和内容，而 CSS 负责样式和布局。通过它们的结合，可以构建出功能丰富、外观美观的网页。
