HTML(HyperText Markup Language)教程,结合CSS(Cascading Style Sheets)的学习,是网页开发的基础。以下是一个综合性的HTML与CSS教程概要,并附带实战演示,帮助初学者快速上手。
一、HTML基础
1. HTML简介
HTML是一种用于创建网页的标准标记语言。它不是编程语言,而是由一系列元素组成的标记语言,这些元素告诉浏览器如何显示页面上的内容。
2. HTML文档结构
每个HTML文档都遵循特定的结构,包括<!DOCTYPE html>
声明、<html>
根元素、<head>
头部和<body>
主体部分。
<!DOCTYPE html>
:文档类型声明,告诉浏览器这是一个HTML5文档。<html>
:根元素,包含整个HTML文档。<head>
:包含文档的元数据,如字符集定义、标题、链接到CSS文件等。<body>
:包含可见的页面内容,如文本、图片、链接等。
3. 基本标签
- 标题标签:
<h1>
到<h6>
,<h1>
是最高级别的标题。 - 段落标签:
<p>
用于定义文本段落。 - 换行标签:
<br>
用于在文本中插入换行。 - 链接标签:
<a href="URL">链接文本</a>
用于创建超链接。 - 图片标签:
<img src="图片地址" alt="替代文本">
用于在网页中嵌入图片。
二、CSS基础
1. CSS简介
CSS用于设置HTML元素的样式,包括布局、颜色、字体等。它允许开发者将内容与表现分离,使得网页的维护更加容易。
2. CSS选择器
- 元素选择器:直接选择HTML元素,如
p { color: red; }
。 - 类选择器:选择具有特定类的元素,如
.classname { background-color: yellow; }
。 - ID选择器:选择具有特定ID的元素,如
#idname { font-size: 20px; }
。
3. CSS样式规则
CSS样式规则由选择器和一组声明组成,声明用大括号{}
包围,声明之间用分号;
分隔。
三、实战演示
创建一个简单的网页
-
创建HTML文件:使用文本编辑器(如VS Code)创建一个名为
index.html
的文件。 -
编写HTML代码:
-
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的第一个网页</title> <style> body { font-family: Arial, sans-serif; text-align: center; } h1 { color: blue; } p { color: green; } </style> </head> <body> <h1>欢迎来到我的网页</h1> <p>这是一个段落。</p> <img src="image.jpg" alt="示例图片"> <a href="https://www.baidu.com">访问百度</a> </body> </html>