《十天学会web标准》第一天：XHTML与CSS基础知识

需积分: 17 123 浏览量更新于2024-09-11 收藏 41KB DOC 举报

览器，这个网页内容是用GB2312编码的，即简体中文。不同的编码方式会影响网页中文字的正常显示，例如GBK、UTF-8等。如果不正确地指定编码，可能会导致乱码问题。因此，确保每个网页的编码与实际内容的编码一致是非常重要的。 3）HTML标签 HTML标签是用来构建网页结构的基本元素，如`<html>`, `<head>`, `<body>`, `<div>`, `<p>`等。这些标签定义了网页的各个部分和内容的含义。例如，`<div>`是一个通用容器，用于组织页面内容；`<p>`则表示一个段落。遵循语义化原则使用HTML标签，有助于搜索引擎优化（SEO）和网页的无障碍访问。 4）CSS样式 CSS（层叠样式表）是用于控制网页外观和布局的样式语言。通过CSS，我们可以设置字体、颜色、布局等样式属性，实现网页的美化和响应式设计。CSS可以内联（在HTML元素中）、内部（在`<style>`标签中）或外部（在单独的`.css`文件中）引入。使用CSS，我们可以实现更精细的页面控制，提高代码的可维护性和复用性。 5）CSS优先级 CSS优先级决定了哪个样式规则将被应用到元素。一般来说，行内样式（内联）权重最高，ID选择器次之，类选择器、属性选择器和元素选择器权重较低，而通配符选择器和继承的样式权重最低。如果多个规则冲突，优先级高的规则会被应用。 6）CSS盒模型 CSS盒模型是网页布局的基础，包括内容(content)、内边距(padding)、边框(border)和外边距(margin)四部分。不同浏览器对盒模型的解析可能存在差异，主要是IE和非IE浏览器之间的差异。理解盒模型对于精确布局至关重要。在第一天的学习中，我们掌握了XHTML和CSS的基础，这是迈向Web标准布局的第一步。通过实例练习，你可以更好地理解和运用这些知识点，逐步从传统的表格布局过渡到更加灵活和规范的Div+CSS布局，实现更高效、更美观的网页设计。在后续的学习中，我们将深入探讨更多的CSS选择器、定位方法以及响应式设计等高级主题，帮助你成为一名熟练的Web开发者。

第一天　XHTML CSS 基础知识

欢迎大家学习《十天学会 web 标准》，也就是我们常说的 DIV+CSS。不过这里的

DIV+CSS 是一种错误的叫法，建议大家还是称之为 web 标准。

学习本系列教程需有一定 html 和 css 基础，也就是指您之前做过网页，会用表格布

局。如果您刚开始学习网页制作，不知道什么是表格布局及 html 和 css，建议您先去充电，

否则学习本教程会非常吃力或者根本就听不懂。

由于时间关系，本教程只讲解一些基础知识，让您从原来的表格布局跨入到 web 标准

（div+css）布局，会使用 web 标准制作出常见的页面，这也达到了本教程的目的。

本教程多以实例形式循序渐进讲解，实例涉及到哪些关键点或难点就讲解什么，较少讲解

概念。因为概念这些东西很难说明白，或者说明白你也不一定能听懂，听懂了也不一定能

理解。所以把概念留给大家以后再深入研究。

由于章节关系，没有把 css 和 css hack 单独分出，只是在用到的时候穿插入讲解了。

html 基础和 css 基础只在第一节中介绍了几点重要的。

下面我们开始第一天的学习

一、xhtml css 基础知识

首先说一下我们这节课的知识点

1. 文档类型

2. 语言编码

3. html 标签

4. css 样式

5. css 优先级

6. css 盒模型组成

1）文档类型

当我们用 dreamweaver 新建一下 html 格式文档时，查看源代码，会发现代码最上

部有如下这句话：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，

因为浏览器对 XHTML 的解析比较宽松，允许使用 HTML4.01 中的标签，但必须符合

XHTML 的语法。许多朋友在制作页面时，往往喜欢把这句删除掉，在这里建议大家一定

要保留这句话，删除它后可能引起某些样式表失效或其它意想不到的问题。

2）语言编码

接下来我们还会发现这样一句话：

它标示文档的语言编码。就像我们平时所说的汉语、英语一样。这里的 gb2312 告诉

浏览器，本文档采用简体中文编码；还有一种常用的编码是 UTF-8 编码，它是国际通用的

编码。不管我们采用哪种编码，有一点就是包含的 css 样式表和其它文件也必须和本文档

的编码一样，要不就会出现乱码。

3）html 标签

下载后可阅读完整内容，剩余3页未读，立即下载

xinxizu0012

粉丝: 0
资源: 2

《十天学会web标准》第一天：XHTML与CSS基础知识

DIV+CSS教程——第三天二列和三列布局借鉴.pdf

Dreamweaver8系列DIV+CSS教程XHTML_CSS基础知识.pdf

Dreamweaver8系列DIV+CSS教程XHTML_CSS基础知识.zip

通过Dreamweaver.CS3学习HTML+DIV+CSS教学PPT第22章__DIV+CSS

W3C网页标准、div+css教程、xhtml+css介绍

DIV+CSS网页布局教程DIV+CSS网页布局技巧如何实现DIV+CSS网页布局.pdf

div+css教程

DIV+CSS教程

div+css网页布局入门+XHTML与CSS基础

十天学会DIV+CSS教程完整版_完美整理+完整代码

最新资源