HTML和CSS学习笔记
一、HTML基础
1. HTML简介
HTML（HyperText Markup Language）是用于创建网页的标准标记语言。它使用标签来描述网页的结构和内容。
2. 基本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>
<!-- 网页内容 -->
</body>
</html>
3. 常用HTML标签
文本标签
<h1>到<h6> <!-- 标题标签 -->
<p>段落标签</p>
<strong>粗体文本</strong>
<em>斜体文本</em>
<br> <!-- 换行 -->
<hr> <!-- 水平线 -->
链接和图片
<a href="https://example.com">链接文本</a>
<a href="mailto:example@example.com">发送邮件</a>
<img src="image.jpg" alt="图片描述" width="300">
列表
<!-- 无序列表 -->
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
表格
<table>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
</table>
表单
<form action="/submit" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<label for="email">邮箱:</label>
<input type="email" id="email" name="email">
<textarea name="message" rows="5" cols="30"></textarea>
<input type="submit" value="提交">
</form>
二、CSS基础
1. CSS简介
CSS（Cascading Style Sheets）用于控制网页的样式和布局，包括颜色、字体、间距、响应式设计等。
2. CSS引入方式
内联样式
<p style="color: blue; font-size: 16px;">段落文本</p>
内部样式表
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
</style>
</head>
外部样式表
<head>
<link rel="stylesheet" href="styles.css">
</head>
3. CSS选择器
基础选择器
/* 元素选择器 */
p {
color: red;
}
/* 类选择器 */
.highlight {
background-color: yellow;
}
/* ID选择器 */
#header {
height: 100px;
}
/* 通用选择器 */
* {
margin: 0;
padding: 0;
}
组合选择器
/* 后代选择器 */
div p {
color: blue;
}
/* 子元素选择器 */
div > p {
font-weight: bold;
}
/* 相邻兄弟选择器 */
h1 + p {
margin-top: 0;
}
/* 通用兄弟选择器 */
h1 ~ p {
color: gray;
}
4. 常用CSS属性
文本样式
.text-style {
color: #333; /* 文字颜色 */
font-size: 16px; /* 字体大小 */
font-family: Arial, sans-serif; /* 字体 */
font-weight: bold; /* 字体粗细 */
text-align: center; /* 文本对齐 */
line-height: 1.5; /* 行高 */
text-decoration: underline; /* 文本装饰 */
}
盒模型
.box-model {
width: 300px; /* 宽度 */
height: 200px; /* 高度 */
padding: 20px; /* 内边距 */
border: 2px solid #333; /* 边框 */
margin: 10px; /* 外边距 */
}
背景
.background {
background-color: #f0f0f0; /* 背景颜色 */
background-image: url('bg.jpg'); /* 背景图片 */
background-repeat: no-repeat; /* 背景重复 */
background-position: center; /* 背景位置 */
background-size: cover; /* 背景大小 */
}
布局
.layout {
display: block; /* 显示方式 */
position: relative; /* 定位方式 */
float: left; /* 浮动 */
clear: both; /* 清除浮动 */
}
三、学习资源推荐
MDN Web Docs - 最权威的Web技术文档
W3Schools - 适合初学者的教程网站
CSS-Tricks - 高质量的CSS技巧和教程
CodePen - 在线代码编辑和分享平台
