HTML CSS零基础入学宝典:大学篇
发布时间: 2024-02-26 12:32:20 阅读量: 36 订阅数: 28
# 1. HTML与CSS简介
## 1.1 HTML是什么
HTML(HyperText Markup Language)是一种用于创建网页结构的标记语言。通过使用HTML标签,可以定义网页的内容、布局和结构。
```html
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个段落文本。</p>
</body>
</html>
```
- HTML使用标签来定义网页的不同部分,如标题(`<h1>`)、段落(`<p>`)等。
- HTML是网页的基础,所有网页都由HTML构建。
## 1.2 CSS是什么
CSS(Cascading Style Sheets)是一种样式表语言,用于描述网页的展示样式,包括布局、设计、颜色等。
```html
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>我的网页标题</h1>
<p>这是一个带有样式的段落。</p>
</body>
</html>
```
- CSS通过选择器和属性来设置不同元素的样式。
- CSS与HTML分离,使得样式和内容分离,提高了网页的可维护性和灵活性。
## 1.3 HTML与CSS的关系
HTML负责网页的结构和内容,而CSS则负责网页的样式和布局。两者结合使用,可以创建出美观、功能完善的网页。
## 1.4 学习HTML与CSS的重要性
- 学习HTML与CSS是成为前端开发者的第一步。
- 掌握HTML与CSS可以更好地理解网页的构建原理。
- HTML与CSS是构建网页的基础,是学习其他前端技术的基础。
# 2. HTML基础入门
### 2.1 HTML的基本结构
HTML(HyperText Markup Language)是用来描述网页结构的标记语言。一个基本的HTML结构如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
```
在上面的代码中,`<!DOCTYPE html>` 声明了文档类型,`<html>` 标签表示HTML文档的开始,`<head>` 标签包含了文档的元数据,`<title>` 标签设置了网页的标题,`<body>` 标签包含了可见的页面内容,`<h1>` 标签定义了一个一级标题,`<p>` 标签定义了一个段落。
### 2.2 标题与段落
在HTML中,我们可以使用 `<h1>` 到 `<h6>` 标签来定义标题,例如:
```html
<h1>一级标题</h1>
<h2>二级标题</h2>
<h6>六级标题</h6>
```
段落则可以使用 `<p>` 标签:
```html
<p>这是一个段落。</p>
```
### 2.3 图像与超链接
要在页面中显示图片,可以使用 `<img>` 标签并设置 `src` 属性:
```html
<img src="image.jpg" alt="图片描述">
```
超链接使用 `<a>` 标签,`href` 属性指定链接的目标地址:
```html
<a href="https://www.example.com">点击这里访问示例网站</a>
```
### 2.4 列表与表格
列表可以使用 `<ul>`(无序列表)和 `<ol>`(有序列表)标签来创建,每个列表项使用 `<li>` 标签:
```html
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
</ul>
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
```
表格使用 `<table>` 标签,行使用 `<tr>` 标签,列使用 `<td>` 标签:
```html
<table>
<tr>
<td>第一列</td>
<td>第二列</td>
</tr>
</table>
```
### 2.5 表单与输入
表单通过 `<form>` 标签创建,输入框可以使用 `<input>` 标签,并设置 `
0
0