HTML与CSS基础教程：从文档声明到页面布局

需积分: 3 93 浏览量更新于2024-07-23 收藏 212KB DOC 举报

"这是一个关于HTML和CSS的基础教学笔记，主要涵盖了HTML的基本结构、元信息的使用以及HTML标签的介绍，特别是div和CSS在页面布局中的应用。" 在HTML中，`<!DOCTYPE html>`文档声明用于告知浏览器文档所使用的HTML版本，这对于浏览器正确解析和渲染页面至关重要。它位于HTML文档的最顶部，但不属于HTML结构的一部分，不需要关闭标签。HTML文档通常由三部分组成：文档声明、头部（head）和主体（body）。 <head>部分包含文档的元信息，如网页标题（<title>）、字符编码设置（<meta charset="utf-8">）以及描述和关键词（<meta name="description" content="">和<meta name="keywords" content="">）。这些元信息对用户虽然不可见，但对搜索引擎优化（SEO）和浏览器解析至关重要。例如，字符编码指定文本的编码方式，确保不同语言的字符能正确显示；描述和关键词则有助于搜索引擎理解网页内容。 <body>部分是网页的实际内容所在，所有显示在页面上的元素都需要放在<body>标签内。HTML标签是用来构建网页结构和样式的，分为单标签（如 ）和双标签（如和）。标签需要正确闭合，单标签也需要自闭合。标签可以嵌套，但不能非法嵌套，比如和标签不能交叉嵌套。 CSS（Cascading Style Sheets）是用于定义HTML或XML（包括如SVG、MathML等各种XML方言）元素样式的样式表语言。在HTML中，我们可以使用<style>标签在<head>中内联定义CSS，或者通过<link>标签引用外部CSS文件。CSS允许我们控制页面布局，包括元素的位置、大小、颜色、字体等。例如，使用div元素结合CSS，我们可以创建复杂的布局结构，如网格系统、居中对齐、浮动元素等。在网页布局中，div元素通常用作容器，它可以包裹其他HTML元素，通过CSS属性如display、position、width、height、margin和padding等来控制其布局。例如，使用display:flex或grid可以实现响应式设计，适应不同设备的屏幕尺寸。这个教学笔记涵盖了HTML的基础语法和CSS在布局中的应用，是初学者学习网页制作的良好起点。通过学习这些基本概念，可以逐步构建动态、美观的网页。