HTML+CSS基础知识
一、HTML 常见标签
1. 基本结构标签
-
<html>：定义 HTML 文档的根元素。 -
<head>：包含文档的元数据，如标题、CSS 链接等。 -
<body>：包含页面的可见内容。 -
<meta>：定义元信息，如字符编码。
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
</head>
<body>
<h1>欢迎</h1>
</body>
</html>解释： <!DOCTYPE html> 声明 HTML5 文档，<meta charset="UTF-8"> 确保中文正常显示，lang="zh-CN" 指定语言为中文。
2. 标题标签
-
<h1>到<h6>：表示不同级别的标题，<h1>最大，<h6>最小。
示例：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>解释： 用于结构化内容，SEO（搜索引擎优化）中 <h1> 通常是页面主标题，避免在同一页面使用多个 <h1>。
3. 段落与文本标签
-
<p>：定义段落。 -
<br>：换行。 -
<strong>：粗体（语义上表示重要性）。 -
<em>：斜体（语义上表示强调）。 -
<span>：行内容器，用于局部样式。
示例：
<p>这是一个段落。<br>这是新的一行。</p>
<p><strong>重要文本</strong> 和 <em>强调文本</em></p>
<p>普通文字 <span style="color: red;">红色文字</span></p>解释： <br> 无闭合标签，<span> 不换行，适合小范围样式调整。
4. 超链接与图片
-
<a>：超链接，常用属性href（目标地址）、target（打开方式）。 -
<img>：插入图片，常用属性src（路径）、alt（替代文本）。
示例：
<a href="https://www.example.com" target="_blank">点击访问</a>
<img src="image.jpg" alt="示例图片" width="200" height="100">解释： target="_blank" 表示新窗口打开，width 和 height 可控制图片尺寸。
5. 列表
-
<ul>：无序列表（带项目符号）。 -
<ol>：有序列表（带编号）。 -
<li>：列表项。 -
<dl>、<dt>、<dd>：定义描述列表。
示例：
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
<ol type="A">
<li>第一步</li>
<li>第二步</li>
</ol>
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
</dl>解释： <ol type="A"> 可设置编号样式（如 A、B），<dl> 用于术语和描述。
6. 表格
-
<table>：定义表格。 -
<tr>：表格行。 -
<th>：表头单元格。 -
<td>：普通单元格。 -
colspan和rowspan：合并单元格。
示例：
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td colspan="2">张三 - 25</td>
</tr>
</table>解释： colspan="2" 表示横向合并两列，rowspan 则纵向合并。
7. 表单
-
<form>：定义表单，常用属性action（提交地址）、method（提交方式）。 -
<input>：输入框，type属性（如text、password、checkbox）。 -
<button>：按钮。 -
<label>、<select>、<textarea>。
示例：
<form action="/submit" method="post">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" placeholder="请输入用户名">
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</select>
<textarea name="bio" rows="3" placeholder="自我介绍"></textarea>
<button type="submit">提交</button>
</form>解释： <label> 增强可访问性，<select> 是下拉菜单，<textarea> 允许多行输入。
二、CSS 常见样式
1. 引入 CSS
-
内联样式：直接写在标签的
style属性中。 -
内部样式：写在
<style>标签内。 -
外部样式：通过
<link>引入外部 CSS 文件。
示例：
<!-- 内联样式 -->
<p style="color: red;">红色文本</p>
<!-- 内部样式 -->
<style>
p { font-size: 16px; }
</style>
<!-- 外部样式 -->
<link rel="stylesheet" href="styles.css">解释： 外部样式便于多人协作和维护，优先级：内联 > 内部 > 外部（相同选择器时）。
2. 选择器
-
标签选择器：直接使用标签名。
-
类选择器：
.className。 -
ID 选择器：
#idName。 -
后代选择器（空格）、子选择器（
>）、伪类（:hover）。
示例：
<style>
p { color: blue; }
.highlight { background: yellow; }
#unique { font-size: 20px; }
div p { color: green; } /* 后代选择器 */
div > p { font-weight: bold; } /* 子选择器 */
a:hover { color: red; } /* 鼠标悬停 */
</style>解释： 后代选择器匹配所有后代，子选择器只匹配直接子元素。
3. 文本样式
-
color：文本颜色。 -
font-size：字体大小。 -
font-family：字体类型。 -
text-align：文本对齐。 -
line-height：行高。
示例：
p {
color: #333333;
font-size: 18px;
font-family: Arial, sans-serif;
text-align: center;
line-height: 1.5;
}解释： line-height: 1.5 表示行高为字体大小的 1.5 倍，提升可读性。
4. 盒模型
-
width/height：宽度和高度。 -
margin：外边距。 -
padding：内边距。 -
border：边框。 -
box-sizing：盒模型计算方式。
示例：
div {
width: 200px;
height: 100px;
margin: 10px auto; /* 居中 */
padding: 20px;
border: 1px solid black;
box-sizing: border-box; /* 包含边框和内边距 */
}解释： box-sizing: border-box 使 width 和 height 包含边框和内边距。
5. 背景样式
-
background-color：背景颜色。 -
background-image：背景图片。 -
background-size：背景尺寸。 -
background-repeat：背景重复。
示例：
div {
background-color: lightblue;
background-image: url('bg.jpg');
background-size: cover;
background-repeat: no-repeat;
}解释： no-repeat 防止背景图片重复平铺。
6. 定位
-
position：定位方式（static、relative、absolute、fixed）。 -
top/left：偏移量。 -
z-index：层叠顺序。
示例：
div {
position: absolute;
top: 50px;
left: 100px;
z-index: 10; /* 层级越高越靠前 */
}解释： z-index 仅对定位元素有效，用于控制重叠顺序。
7. Flex 布局
-
display: flex：启用弹性布局。 -
justify-content：主轴对齐。 -
align-items：交叉轴对齐。 -
flex-direction：主轴方向。
示例：
<style>
.container {
display: flex;
flex-direction: row; /* 或 column */
justify-content: space-between;
align-items: center;
}
</style>
<div class="container">
<div>项目1</div>
<div>项目2</div>
</div>解释： flex-direction: column 将主轴改为垂直方向。