HTML CSS零基础入学宝典:简短而重要的环节
发布时间: 2024-02-26 12:25:26 阅读量: 33 订阅数: 28
# 1. HTML基础知识导论
## 1.1 什么是HTML
HTML(超文本标记语言)是用来定义和组织网页内容的标记语言。它使用标记来描述网页的结构,包括标题、段落、链接等等。
## 1.2 HTML的基本结构
一个基本的HTML文档包含`<!DOCTYPE html>`声明、`<html>`元素、`<head>`元素和`<body>`元素。示例代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML页面</title>
</head>
<body>
<h1>欢迎来到我的网站!</h1>
<p>这是一个段落。</p>
</body>
</html>
```
代码解释:`<!DOCTYPE html>`声明文档类型为HTML5;`<html>`元素包裹整个HTML文档;`<head>`元素包含页面的元数据和引用的外部资源;`<body>`元素包含可见的页面内容。
## 1.3 HTML常用标签介绍
- `<h1>` - `<h6>`:定义标题的级别
- `<p>`:定义段落
- `<a>`:创建超链接
- `<img>`:插入图像
- `<ul>` 和 `<ol>`:创建无序列表和有序列表
- `<div>`:定义文档中的块级元素
HTML标签用于定义和包围内容,使其以特定方式显示或工作。
以上便是HTML基础知识的导论,接下来我们将深入了解CSS的入门指南。
# 2. CSS入门指南
CSS(Cascading Style Sheets)是一种样式表语言,用来描述HTML文档的呈现方式。在这一章节中,我们将深入了解CSS的基本语法、选择器以及一些简单的样式定义。
#### 2.1 什么是CSS
CSS是一种用来控制网页样式和布局的样式表语言,它与HTML结合使用,用来美化网页,比如设置文字颜色、背景图片和页面布局等。
#### 2.2 CSS的基本语法
CSS的基本语法由选择器和声明块组成。选择器用来选中HTML元素,声明块包含一个或多个属性-值对,用来设置样式。
```css
/* 选择器 */
h1 {
/* 声明块 */
color: blue;
font-size: 24px;
}
```
#### 2.3 CSS选择器简介
CSS选择器用于选择要设置样式的HTML元素。常见的选择器包括元素选择器(如h1、p)、类选择器(.classname)和ID选择器(#idname)等。
在本章节中,我们将学习如何使用这些选择器来应用样式到HTML元素上,从而实现网页的样式化效果。
在下一节,我们将继续学习如何构建你的第一个HTML网页。
# 3. 构建你的第一个HTML网页
在这一章中,我们将学习如何搭建你的第一个HTML网页。我们将介绍如何构建HTML框架,添加文本和图片,并初步了解CSS样式。
#### 3.1 搭建HTML框架
首先,我们需要了解HTML的基本结构。一个简单的HTML文档通常由`<!DOCTYPE html>`声明、`<html>`标签、`<head>`标签和`<body>`标签组成。下面是一个基本的HTML框架示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个段落文字。</p>
</body>
</html>
```
#### 3.2 添加文本和图片
在HTML中,我们可以使用各种标签来添加文本和图片。比如,使用`<h1>`到`<h6>`标签添加标题,使用`<p>`标签添加段落文字,使用`<img>`标签添加图片。以下是一个包含文本和图片的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个段落文字。</p>
<img src="image.jpg" alt="图片描述">
</body>
</html>
```
#### 3.3 初步了解CSS样式
要为网页添加样式,我们可以使用CSS。CSS可以通过内联样式、内部样式和外部样式表来实现。我们可以在HTML元素内部使用`style`属性来添加内联样式,也可以在`<head>`标签内部使用`<style>`标签来添加内部样式。以下是一个简单的CSS样式示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: lightgrey;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个段落文字。</p>
<img src="image.jpg" alt="图片描述">
</body>
</html>
```
通过这些简单的步骤,你已经学会了如何构建你的第一个HTML网页并初步了解了C
0
0