制作网站需要了解的HTML和CSS基础知识
时间 :
2025-03-13,10:37:01
编辑 ::超级管理员
制作网站需要掌握 HTML（超文本标记语言） 和 CSS（层叠样式表） 的基础知识，它们是构建网页的核心技术。以下是你需要了解的关键内容：
一、HTML 基础
HTML 主要用于定义网页的结构，如文本、图片、按钮、表单等。
1. HTML 结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是我的第一个网页，我正在学习 HTML 和 CSS。</p>
</body>
</html>
📌 核心标签解析：
<!DOCTYPE html>：声明 HTML5 文档类型<html>：HTML 页面根元素<head>：头部信息，包含meta信息和网页标题<body>：网页的主要内容
2. 常见 HTML 标签
| 标签 | 作用 |
|---|---|
<h1> - <h6> | 标题标签（h1 最大，h6 最小） |
<p> | 段落 |
<a href="URL"> | 超链接 |
<img src="图片地址"> | 图片 |
<ul> <li> | 无序列表 |
<ol> <li> | 有序列表 |
<table> | 表格 |
<form> | 表单 |
<input> | 输入框 |
<button> | 按钮 |
<div> | 容器，常用于布局 |
<span> | 行内元素，适用于小范围文本样式 |
3. 超链接（<a>）
<a href="https://example.com" target="_blank">访问示例网站</a>
📌 target="_blank" 表示在新窗口打开链接。
4. 图片（<img>）
<img src="image.jpg" alt="示例图片" width="300">
📌 alt 文字是图片的替代文本，SEO 友好。
5. 表单（<form>）
<form action="submit.php" method="POST">
<label for="name">姓名：</label>
<input type="text" id="name" name="name">
<button type="submit">提交</button>
</form>
📌 method="POST" 适用于提交数据到服务器。
二、CSS 基础
CSS 用于美化 HTML 页面，控制布局、颜色、字体等。
1. CSS 语法
选择器 {
属性: 值;
}
示例：
p {
color: blue;
font-size: 18px;
}
📌 让 <p> 段落的文字变成蓝色，字体大小 18px。
2. CSS 添加方式
✅ 方式 1：内联 CSS
<p style="color:red;">这是一段红色文本</p>
✅ 方式 2：内部 CSS
<style>
h1 { color: green; }
</style>
✅ 方式 3：外部 CSS（推荐）
<link rel="stylesheet" href="style.css">
在 style.css 文件：
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
3. 选择器
（1）元素选择器
h1 { color: red; }
✅ 选择所有 <h1> 标签，并使其变红。
（2）类选择器
.important {
font-weight: bold;
color: blue;
}
<p class="important">这是一个重要的段落。</p>
✅ 多个元素可使用相同的类。
（3）ID 选择器
#header {
background-color: black;
color: white;
}
<div id="header">这是头部</div>
❌ 一个 ID 只能用于一个元素。
4. 盒模型（Box Model）
所有 HTML 元素都可以看作是一个盒子，包含：
内容（Content）
内边距（Padding）
边框（Border）
外边距（Margin）
示例：
css复制编辑.box { width: 300px; padding: 20px; border: 2px solid black; margin: 10px;
}
📌 宽度 = 内容 + 内边距 + 边框 + 外边距
5. 布局方式
（1）Flexbox（弹性布局）
.box {
width: 300px;
padding: 20px;
border: 2px solid black;
margin: 10px;
}
📌 justify-content: space-between; 让元素 平均分布。
（2）Grid（网格布局）
.container {
display: grid;
grid-template-columns: 1fr 2fr;
}
📌 让 第一列占 1 份，第二列占 2 份。
6. 响应式设计
✅ 使用 @media 让网页适配不同设备
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
📌 当屏幕宽度小于 600px 时，背景变成浅蓝色。
三、HTML + CSS 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>我的网站</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>欢迎来到我的网站</h1>
</header>
<section>
<p>这是一个示例页面。</p>
<a href="https://example.com" target="_blank">访问更多内容</a>
</section>
</body>
</html>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
h1 {
color: darkblue;
}
.important {
font-weight: bold;
color: red;
}
总结
| 重点 | HTML | CSS |
|---|---|---|
| 结构 | <h1>, <p>, <a> 等 | 选择器 h1, .class, #id |
| 布局 | <div>, <span> | display: flex; grid |
| 样式 | style="" | color, font-size, padding |
| 响应式 | <meta name="viewport"> | @media (max-width: 600px) |
学习 HTML 和 CSS 后，你可以进一步学习：
JavaScript（交互）
Bootstrap / Tailwind CSS（框架）
Web 响应式设计
热门新闻