使用标签承载内容

结构

• head
  • title
  • meta
• body

文本

• 标题和段落
• 粗体和斜体
• 上标和下标
• 空白（白色空间折叠）
• 折行和水平标尺
• 语义化标记
  • 加粗和强调
  • 引用
  • 缩写词和首字母缩写词
  • 引文
  • 所有者联系信息
  • 内容的修改

列表（list）

• 有序列表（ordered list）
• 无序列表（unordered list）
• 定义列表（definition list）

链接（anchor）

• 页面链接
• 锚链接
• 功能链接

图像（image）

• 图像存储位置
• 图像及其宽高
• 选择正确的图像格式
  • JPEG
  • GIF
  • PNG
• 矢量图
• figure标签

表格（table）

• 基本的表格结构
• 表格的标题
• 跨行和跨列
• 长表格

表单（form）

• 如何收集信息
• 表单控件（input）
  • 文本框 / 密码框 / 文本域
  • 单选按钮 / 复选按钮 / 下拉列表
  • 提交按钮 / 图像按钮 / 文件上传
• 组合表单元素
  • fieldset / legend
• HTML5的表单控件
  • 日期
  • 电子邮件 / URL
  • 搜索

音视频（audio / video）

• 视频格式和播放器
• 视频托管服务
• 添加视频的准备工作
• video标签和属性
• audio标签和属性

其他

• 文档类型
• 注释
• 属性
  • id
  • class
• 块级元素 / 行级元素
• 内联框架（internal frame）
• 页面信息（meta）
• 转义字符（实体替换符）

使用CSS渲染页面

简介

• CSS的作用
• CSS的工作原理
• 规则、属性和值

颜色（color）

• 如何指定颜色
• 颜色术语和颜色对比
• 背景色

文本（text / font）

• 文本的大小和字型(font-size / font-family)
• 斜体、粗体、大写和下划线(font-weight / font-style / text-decoration)
• 行间距(line-height)、字母间距(letter-spacing)和单词间距(word-spacing)
• 对齐(text-align)方式和缩进(text-ident)
• 链接样式（:link / :visited / :active / :hover）
• CSS3新属性
  • 投影
  • 首字母和首行文本(p:first-letter / p:first-line)
  • 响应用户

盒子（box model）

• 盒子大小的控制（width / height）
• 盒子的边框、外边距和内边距（border / margin / padding）
• 盒子的显示和隐藏（display / visibility）
• CSS3新属性
  • 边框图像（border-image）
  • 投影（border-shadow）
  • 圆角（border-radius）

列表、表格和表单

• 列表的项目符号（list-style）
• 表格的边框和背景（border-collapse）
• 表单控件的外观
• 表单控件的对齐
• 浏览器的开发者工具

图像

• 控制图像的大小（display: inline-block）
• 对齐图像
• 背景图像（background / background-image / background-repeat / background-position）

布局

• 控制元素的位置（position / z-index）
  • 普通流
  • 相对定位
  • 绝对定位
  • 固定定位
  • 浮动元素（float / clear）
• 网站布局
  • HTML5布局
• 适配屏幕尺寸
  • 固定宽度布局
  • 流体布局
  • 布局网格