<think>嗯，用户想学习
HTML和CSS中
常用的
标签和
属性，需要做一个总结。首先，我得回忆一下
HTML和CSS的基础知识，然后
整理出最
常用的部分。用户可能刚开始学习，所以内容需要简明扼要，重点突出。
首先，
HTML常用标签。结构
标签肯定是必须的，比如`<!DOCTYPE
html>`、`<
html>`、`<head>`、`<body>`这些。然后是文本相关的
标签，比如标题`<h1>`到`<h6>`，段落`<p>`，加粗`<strong>`，斜体`
`，链接`<a>`。列表方面，无序列表`<ul>`和有序列表`<ol>`，每个列表项用`<li>`。表格<em>标签`<table>`、`<tr>`、`<td>`，表单相关的`<form>`、`<input>`、`<textarea>`、`<select>`和`<button>`。媒体
标签比如图片`<img>`，视频`<video>`，音频`<audio>`。还有语义化
标签，如`<header>`、`<nav>`、`<section>`、`<article>`、`<footer>`。这些
标签的
属性也要提到，比如`href`、`src`、`alt`、`class`、`id`、`style`等。
接下来是CSS部分。要涵盖选择器，比如元素选择器、类选择器、ID选择器、后代选择器、伪类。然后是
常用属性，字体相关的`font-family`、`font-size`、`font-weight`，颜色`color`和`background-color`，文本
属性`text-align`、`text-decoration`、`line-height`，盒子模型相关的`width`、`height`、`padding`、`margin`、`border`，布局
属性`display`、`position`、`float`、`flex`，还有响应式设计中的`@media`查询。
要注意用户可能对引用方式不太清楚，所以需要说明CSS的三种引入方式：内联样式、内部样式表、外部样式表。特别是外部样式表的`<link>`
标签，要给出例子。可能用户容易混淆这些方法，所以例子要明确，比如外部样式表的链接方式。
然后，用户提供的引用资料中有提到一些不
常用的
标签和
属性，但用户需要的是
常用内容，所以不需要深入那些不常见的部分。比如引用[2]中的例子，外部样式表的使用，需要展示正确的代码结构。引用[3]中的`white-space`和`display`
属性在布局中可能用到，可以提到如何处理元素不换行的情况。
需要确保所有
HTML标签和CSS
属性都用正确的格式，比如使用反引号包裹代码片段。数学表达式这里可能用不上，但用户的问题里没有涉及，所以可以忽略。注意不要使用Markdown格式，但用户允许使用代码块，所以Python示例中的代码块可以用，但这里应该用
HTML和CSS的代码示例。
可能用户需要实际例子来理解，所以在总结每个部分时，附上简短的代码示例会更好。比如在讲`<a>`
标签时，展示一个链接的例子；在讲CSS选择器时，展示如何应用样式。
最后，生成的相关问题要围绕用户可能进一步想了解的内容，比如
常用布局技巧、响应式设计、选择器优先级等。这些问题应该帮助用户深入下一步学习。</think>以下是对
HTML和CSS
常用标签及
属性的系统总结，按功能分类呈现：
### 一、
HTML常用标签与
属性
1. **基础结构
标签**
- `<!DOCTYPE
html>`：文档类型声明
- `<
html lang="zh-CN">`：根元素（lang
属性定义语言）
- `<head>`：元数据容器
- `<body>`：网页内容容器
2. **文本内容
标签**
- 标题：`<h1>`到`<h6>`
- 段落：`<p>`
- 强调文本：`<strong>`（加粗）、`<em>`（斜体）
- 超链接：`<a href="url" target="_blank">`（target
属性控制打开方式）[^4]
3. **列表与表格**
- 无序列表：`<ul>` + `<li>`
- 有序列表：`<ol>` + `<li>`
- 表格结构：
```
html
<table border="1">
<tr><th>表头</th></tr>
<tr><td>数据</td></tr>
</table>
```
4. **表单元素**
- `<form action="/submit" method="post">`
- 输入框：`<input type="text|password|email">`
- 多行文本：`<textarea rows="4">`
- 下拉选择：`<select>` + `<option>`
5. **媒体元素**
- 图片：`<img src="image.jpg" alt="描述">`（alt为必要
属性）[^4]
- 视频：`<video controls><source src="movie.mp4"></video>`
### 二、CSS核心
属性分类
1. **选择器类型**
- 元素选择器：`p { ... }`
- 类选择器：`.classname { ... }`
- ID选择器：`#idname { ... }`
- 后代选择器：`div p { ... }`
2. **布局
属性**
```css
.container {
display: flex; /* 弹性布局 */
position: relative; /* 定位基准 */
margin: 0 auto; /* 水平居中 */
padding: 20px; /* 内边距 */
}
```
3. **文本样式**
```css
h1 {
font-family: "Arial"; /* 字体 */
color: #333; /* 文字颜色 */
text-align: center; /* 对齐方式 */
line-height: 1.5; /* 行高 */
}
```
4. **响应式设计**
```css
@media (max-width: 768px) {
.menu { display: none; } /* 移动端隐藏菜单 */
}
```
### 三、CSS引用方式对比
| 方式 | 语法示例 | 适用场景 |
|--------------|-----------------------------------|------------------|
| 行内样式 | `<p style="color:red">` | 快速测试 |
| 内部样式表 | `<style>body{margin:0}</style>` | 单页面小项目 |
| 外部样式表 | `<link rel="stylesheet" href="style.css">` [^2] | 多页面项目 |
扫一扫
1655
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
