### WEB标准设计知识点详解
#### 一、XHTML：浏览器上的新大陆
##### 1.1 一切从语义开始
XHTML强调语义的重要性，这是因为网页不仅仅是供人类阅读的，同时也是供机器（如搜索引擎、屏幕阅读器等）理解和解析的。通过使用带有特定含义的HTML标签，可以为网页增加更多的意义，从而使网页更加易于被理解和处理。
**举例说明：**
- **标题标签**（`<h1>`至`<h6>`）：用来表示文档的不同级别的标题。
- **段落标签**（`<p>`）：表示一个逻辑段落。
- **强调标签**（`<em>`和`<strong>`）：分别用于表示强调和重要性。
- **插入和删除标签**（`<ins>`和`<del>`）：用于标记文本的修改历史。
- **代码标签**（`<code>`）：用于表示计算机代码或样例。
- **引用标签**（`<cite>`、`<q>`和`<blockquote>`）：用于引用其他来源的内容。
- **表格标签**（`<table>`）：用于组织数据。
**案例分析：**
假设使用以下HTML代码：
```html
<p>传说中的<s>借</s><u>错</u>别字。</p>
```
虽然在浏览器中看起来是一样的，但在Word中拷贝粘贴后，Word能够识别`<s>`和`<u>`标签的含义，并给出相应的提示（图2.4），这表明语义化的标签能让其他应用程序更好地理解和处理内容。
**目的与价值：**
- **搜索引擎优化**：语义化的标签有助于提高网页在搜索引擎中的排名。
- **增强可访问性**：有助于屏幕阅读器等辅助技术更好地为视障用户提供服务。
- **提升内容复用性**：使得网页内容更易于被其他应用和服务复用，例如RSS订阅。
##### 1.2 网页的构成
网页是由一系列的HTML元素构成的，这些元素包括：
- **头部信息**（`<head>`）：包含了文档标题、样式表链接、脚本文件链接等元信息。
- **主体内容**（`<body>`）：包含了网页的主要内容，如文本、图像、链接等。
- **结构元素**：如`<header>`、`<footer>`、`<nav>`、`<article>`等，用于组织网页的结构。
#### 二、XHTML与HTML的差异
##### 2.1 XHTML的特点
XHTML是对HTML的一种扩展，旨在提高文档的清晰度和一致性。XHTML强调严格语法和文档的正确性，具体特点包括：
- **严格语法**：所有标签必须闭合，如`<br/>`代替`<br>`。
- **区分大小写**：标签和属性名必须全部小写。
- **属性值必须使用引号包围**：如`<img src="image.jpg" alt="An image">`。
- **文档类型声明**：每个XHTML文档都必须包含文档类型声明，如`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">`。
**坚持Strict Markup的原因：**
- **兼容性和跨平台性**：严格的语法要求有助于确保文档能在多种设备和浏览器上正确显示。
- **减少错误**：严格的规范有助于开发者编写无误的代码，降低出现错误的可能性。
#### 三、CSS：控制网页样式
##### 3.1 文字的表现
CSS提供了丰富的样式选项，可以用来改变文本的外观，包括：
- **字体**：通过`font-family`属性指定字体。
- **字号**：通过`font-size`属性设置字号。
- **颜色**：通过`color`属性设定文字颜色。
- **背景**：使用`background-color`、`background-image`等属性来定义背景样式。
**案例分析：**
```css
body {
font-family: 'Arial', sans-serif;
color: #333;
background-color: #f0f0f0;
}
```
##### 3.2 最简单的布局
CSS提供了强大的布局能力，常用的布局技巧包括：
- **Margin与Padding**：分别用来控制元素之间的间距和元素内部填充空间。
- **单列固定宽度居中**：使用`margin: 0 auto;`使元素居中。
- **单列自适应宽度**：使用百分比或视窗单位（如vw）作为宽度单位，实现响应式设计。
- **高度问题**：需要通过CSS来精确控制元素的高度。
- **边框定义**：使用`border`属性来定义边框的样式、宽度和颜色。
**案例分析：**
```css
.container {
margin: 0 auto;
width: 960px;
padding: 20px;
border: 1px solid #ccc;
}
```
#### 四、盒模型
CSS盒模型是指网页元素在页面中的布局方式，包括内容、内边距（padding）、边框（border）和外边距（margin）。了解盒模型对于实现精确布局至关重要。
**案例分析：**
```css
.box {
width: 200px;
padding: 20px;
border: 1px solid #000;
margin: 20px;
}
```
#### 五、亲和力：增强可访问性
##### 5.1 Web内容可访问性指南
可访问性是指确保网站能够被所有人访问和使用，包括那些身体上有障碍的人。W3C发布了一套指导原则——Web内容可访问性指南（WCAG），以帮助开发者创建无障碍网站。
**关键要素：**
- **非视觉内容**：确保网站内容对依赖屏幕阅读器的用户可读。
- **功能性有效性**：确保网站的功能对于不同类型的用户都能有效使用。
- **可见性**：确保文本和其他重要内容对于视力不佳的用户来说足够明显。
- **键盘导航**：支持键盘导航，以便于无法使用鼠标的用户也能使用网站。
- **标题与内容**：清晰的标题和结构有助于用户理解内容的大致框架。
- **语言与编码**：明确指定文档的语言和字符编码，以便辅助技术和国际用户正确解读内容。
**案例分析：**
为了提高网站的可访问性，可以采取以下措施：
- 使用语义化的HTML结构，如`<header>`、`<nav>`、`<main>`、`<footer>`等。
- 为图像添加`alt`属性，描述图像内容。
- 使用ARIA（Accessible Rich Internet Applications）角色和属性来增强交互性元素的可访问性。
- 确保网站内容能够适应不同屏幕尺寸和设备。
- 提供键盘快捷键，方便用户导航。
以上知识点详细介绍了从XHTML的基本概念到高级布局技巧，再到提高网页的可访问性的各个方面，为学习者提供了一个全面的学习路径。
gaojiehigh2012-10-24只有2、4、13章
