十日速成课程：掌握DIV+CSS布局与样式

RAR文件

下载需积分: 4 | 202KB | 更新于2025-06-27 | 19 浏览量 | 举报收藏

立即下载

### 知识点总结 #### 选择DOCTYPE 在HTML或XHTML文档的第一行通常会出现DOCTYPE声明，它用于告诉浏览器当前页面所遵循的HTML或XHTML的版本标准。对于XHTML来说，一个常见的DOCTYPE声明是这样的： ```html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ``` 这个声明确保浏览器以标准模式（而非怪异模式）来解析和显示页面。 #### 什么是名字空间名字空间（Namespace）在XML和XHTML文档中是一个重要的概念，用于避免元素名之间的冲突，特别是在结合多种技术时。通常在HTML中很少直接使用名字空间，但在XHTML中比较常见，比如： ```html <html xmlns="http://www.w3.org/1999/xhtml"> ``` 在这个例子中，`xmlns`属性定义了默认的名字空间。 #### 定义语言编码定义文档编码是为了确保网页正确地显示各种语言的字符。常见的字符编码是UTF-8，它可以包含世界上几乎所有的字符。在HTML中定义字符编码通常在`<head>`标签内，如： ```html <meta charset="UTF-8"> ``` #### 如何调用样式表调用外部样式表是通过`<link>`标签来完成的。这通常放在`<head>`区域中，如下所示： ```html <link rel="stylesheet" type="text/css" href="styles.css"> ``` 这里，`rel`属性定义了当前文档与被链接文档之间的关系（这里是样式表），`type`定义了被链接文档的MIME类型，而`href`属性指明了被链接文档的位置。 #### head区的其他设置 `<head>`区域通常包含了页面的元数据，如标题、字符编码声明、外部链接到样式表和脚本等。一个典型的`<head>`区域可能包含以下标签： ```html <head> <meta charset="UTF-8"> <title>页面标题</title> <link rel="stylesheet" href="styles.css"> <script src="script.js"></script> </head> ``` #### XHTML代码的规范 XHTML（Extensible Hypertext Markup Language）是一种可扩展的超文本标记语言，是HTML向XML过渡的一种应用。XHTML的代码规范要求： - 使用小写字母编写标签； - 所有的标签必须正确关闭； - 属性值必须使用引号包围； - 确保文档有一个根元素（即包裹整个文档的标签，如`<html>`）。遵循这些规范能够使XHTML文档结构更清晰、更易于维护。 #### CSS简单入门 CSS（Cascading Style Sheets）层叠样式表，用于定义如何显示HTML元素。基本的CSS规则由选择器和声明块组成： ```css p { color: red; font-size: 14px; } ``` 这里，`p`是选择器，它指向所有的段落元素。声明块中的样式规则定义了文本颜色和字体大小。 #### CSS布局入门 CSS布局允许开发者使用诸如float、position、display等属性来控制元素的位置和布局。例如，使用`float`属性可以将元素向左或向右浮动： ```css .left-column { float: left; width: 50%; } ``` 这里，`.left-column`类选择器表示将应用到任何具有`left-column`类的元素上，使其浮动并占据宽度的一半。 #### 第一个CSS布局实例在本例中，你可能学习了如何创建一个简单的两栏布局，其中一栏固定宽度而另一栏流动宽度。这通常涉及到为某些容器元素指定宽度，而另一些则不指定宽度以适应剩余空间。 #### 如何自适应高度在CSS中实现元素自适应高度是一个常见的需求，可以通过多种方式来达成，例如使用Flexbox或Grid布局。例如，在Flexbox布局中： ```css .container { display: flex; flex-direction: column; } .content { flex: 1; } ``` 这里`.container`是一个flex容器，而`.content`则会填充所有剩余空间。 ### 总结以上知识点从DOCTYPE的声明开始，涵盖了XHTML、CSS的基础概念和布局技术。经过十天的学习，你能够掌握如何编写规范的HTML结构，定义样式表，并实现基本的页面布局，最终能处理更复杂的布局问题，如元素的高度自适应等。这些技能是网页开发的基础，对于构建结构良好的网页至关重要。

资源目录

收起资源包目录