前端开发 HTML CSS:容器元素介绍
发布时间: 2024-02-27 06:08:12 阅读量: 13 订阅数: 12
# 1. HTML基础介绍
## 1.1 HTML是什么
HTML(Hyper Text Markup Language)是一种标记语言,用于描述网页的结构和内容。它由一系列的元素(tags)组成,这些元素告诉浏览器如何显示页面的内容。
HTML元素通常由开始标签、内容和结束标签组成,例如:
```html
<p>This is a paragraph.</p>
```
## 1.2 HTML文档结构
一个典型的HTML文档由以下部分组成:
- `<!DOCTYPE html>`:声明文档类型
- `<html>`:包含整个HTML页面的内容
- `<head>`:包含页面的元信息,如标题和引用的样式表
- `<title>`:定义页面的标题
- `<body>`:包含可见的页面内容
例如:
```html
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to my webpage!</h1>
<p>This is a paragraph.</p>
</body>
</html>
```
## 1.3 HTML常用标签回顾
- 标题标签:`<h1>`~`<h6>`,表示文档的标题
- 段落标签:`<p>`,表示段落
- 超链接标签:`<a>`,创建指向其他页面或资源的链接
- 图像标签:`<img>`,插入图片
- 列表标签:`<ul>`, `<ol>`, `<li>`,创建无序或有序列表
- 表格标签:`<table>`, `<tr>`, `<td>`,创建表格结构
以上是HTML基础介绍的部分内容,接下来我们将继续探讨CSS的基础概念。
# 2. CSS基础概念
CSS(Cascading Style Sheets)是一种用来为HTML和XML等文档添加样式的样式表语言。在本章中,我们将介绍CSS的基本概念,包括样式规则和选择器等内容。
### 2.1 CSS是什么
CSS是一种用来控制网页样式和布局的样式表语言。它可以控制网页的字体、颜色、间距、边框、背景等样式,实现页面的美化和布局的灵活性。
### 2.2 CSS样式规则
CSS样式规则由选择器和一条或多条声明组成。每条声明由一个属性和一个值组成,属性和值之间使用冒号分隔,声明之间使用分号分隔。
```css
selector {
property1: value1;
property2: value2;
...
}
```
其中,选择器用来选择要应用样式的HTML元素,属性用来指定要修改的样式属性,值用来指定属性的取值。
### 2.3 CSS选择器介绍
CSS选择器用于选择需要应用样式的HTML元素。常见的选择器包括:
- 元素选择器:按照元素名称选择元素,如`p`、`div`。
- ID选择器:按照元素的id属性选择元素,如`#header`。
- 类选择器:按照元素的class属性选择元素,如`.container`。
- 后代选择器:选择某个元素的后代元素,如`div p`。
- 伪类选择器:用于指定特殊状态的元素,如`a:hover`。
选择器的使用可以让我们更精准地定位需要应用样式的元素,从而实现页面样式的定制和美化。
# 3. HTML容器元素
在前端开发中,HTML提供了丰富的容器元素,用于组织和布局页面内容。本章将介绍HTML中常用的容器元素,以及它们的特点和用法。
#### 3.1 块级元素和内联元素区别
在HTML中,元素可以分为块级元素和内联元素两大类别。块级元素以独占一行的方式展现,可以设置宽度和高度,常用于构建页面的整体结构;而内联元素则可以并排显示,不可以设置宽度和高度,常用于包裹文本和其他内联元素。
#### 3.2 div元素的作用与用法
`<div>`元素是HTML中最常用的容器元素,它本
0
0