HTML与CSS初级教程:网页开发入门
发布时间: 2024-04-02 18:29:06 阅读量: 17 订阅数: 15
# 1. 认识HTML
HTML是一种标记语言,用来描述网页的结构和内容。在网页开发中,HTML起着承上启下的作用,承载了网页的基本结构,同时也为网页的美化和交互提供了基础。
## 1.1 什么是HTML
HTML,全称为超文本标记语言(HyperText Markup Language),是一种用来描述网页结构的标记语言。通过使用HTML标签,开发人员可以将文本、图像、链接等内容组织起来,呈现给用户。
HTML标签一般由尖括号包围,包含起始标签和结束标签。例如,“<p>”为段落标签的起始标签,“</p>”为段落标签的结束标签。
## 1.2 HTML基本结构
HTML文档以<!DOCTYPE html>声明开头,然后包含<html>、<head>和<body>标签,分别用于描述文档的结构、头部信息和主体内容。
```html
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
```
代码总结:HTML通过标签描述网页结构,包括文档声明、html、head和body等基本标签。
## 1.3 HTML常用标签介绍
- `<h1>` - `<h6>`:用于定义标题,数字表示标题级别,从大到小依次减小。
- `<p>`:用于定义段落。
- `<a>`:用于定义超链接,href属性指定链接地址。
- `<img>`:用于插入图片,src属性指定图片路径。
- `<ul>`和`<ol>`:用于创建无/有序列表。
- `<table>`:用于创建表格,包含`<tr>`、`<td>`和`<th>`等子标签。
以上是HTML的基本概念和常用标签介绍,下一章将深入探讨HTML5的新特性。
# 2. 深入了解HTML
在第二章中,我们将深入了解HTML的一些特性,包括HTML5的新特性、HTML表单和HTML语义化。让我们一起来看看吧!
# 3. 入门CSS
CSS(Cascading Style Sheets)是层叠样式表的缩写,是一种用来设置网页样式的技术,它可以控制网页的排版、布局和样式,使网页呈现出更加美观、统一的视觉效果。
在这一章节中,我们将深入了解CSS,包括什么是CSS、CSS的基本语法以及CSS样式的引入方式。让我们一起来学习吧!
#### 3.1 什么是CSS
CSS是一种样式表语言,用来描述HTML文档的呈现方式。通过CSS,我们可以为网页添加颜色、字体、间距、边框等样式,从而实现网页的美化和布局控制。
#### 3.2 CSS基本语法
CSS的语法规则由选择器(Selector)和声明块(Declaration Block)组成。选择器用于选择要应用样式的HTML元素,声明块包含一条或多条属性-值对,用于设置样式。
示例代码:
```css
/* 选择器 */
h1 {
color: blue;
font-size: 24px;
}
/* 声明块 */
p {
color: #333333;
font-size: 16px;
line-height: 1.5;
}
```
- 代码总结:上述代码中,选择器选择了`h1`和`p`元素,分别设置了它们的颜色、字体大小和行高等样式。
- 结果说明:`h1`元素的文字颜色为蓝色,字体大小为24px;`p`元素的文字颜色为#333333,字体大小为16px,行高为1.5。
#### 3.3 CSS样式的引入方式
在网页中使用CSS样式有三种方式:内联样式(Inline Style)、内部样式表(Internal Style Sheet)和外部样式表(External Style Sheet)。
1. 内联样式:直接在HTML元素中使用`style`属性来设置样式,例如:
```html
<p style="color: red; font-size: 20px;">这是一段红色的文字</p>
```
2. 内部样式表:在HTML
0
0