Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/sgalcheung/web.html-and-css-visual-quickstart-guide

主要用来学习记录《HTML5与CSS3基础教程》这本书的demo
https://github.com/sgalcheung/web.html-and-css-visual-quickstart-guide

css css3 html html5 html5css3guide web

Last synced: 2 months ago
JSON representation

主要用来学习记录《HTML5与CSS3基础教程》这本书的demo

Awesome Lists containing this project

README 

          
# 《HTML5与CSS3基础教程》

### 主要用来学习记录这本书的demo，监督自己学习，同时作为学习笔记，方便查阅

## [第 1 章 网页的构造块](chapter-01)

* HTML思想

* 基本的HTML页面

* 标签：元素、属性、值及其他

* 网页的文本内容

* 链接、图像和其他非文本内容

* 文件名和文件夹名

* URL

* HTML：有含义的标记

* 浏览器对网页的默认显示效果

* 要点回顾

## 第 2 章 处理网页文件

* 规划网站

* 创建新的网页

* 保存网页

* 指定默认页面或主页

* 编辑网页

* 对文件进行组织

* 在浏览器中查看网页

* 借鉴他人灵感

## [第 3 章 基本HTML结构](chapter-03)

* 开始编写网页

* 创建页面标题

* 创建分级标题

* 普通页面构成

* 创建页眉

* 标记导航

* 标记网页主要区域

* 创建文章

* 定义区块

* 指定附注栏

* 创建页脚

* 创建通用容器

* 使用ARIA改进可访问性

* 为元素指定类或ID

* 为元素添加title属性

* 添加注释

## [第 4 章 文本](chapter-04)

* 添加段落

* 指定细则

  * (small表示细则一类的旁注，通常包括免责声明、注意事项、法律限制、版权信息等)

* 标记重要或强调的文本

* 创建图

* 指明引用或参考

* 引述文本

* 指定时间

* 解释缩写词

* 定义术语

* 创建上标和下标

* 添加作者联系信息

* 标注编辑和不准确的文本

* 标记代码

* 使用预格式化的文本

  * (pre保持文本固有的换行和空格)

* 突出显示文本

  * (mark想象成荧光笔的语义化对照物)

* 创建换行

* 创建sapn

* 其他元素

## [第 5 章 图像](chapter-05)

* 关于Web图像

* 获取图像

  * [https://www.flickr.com/](https://www.flickr.com/)

* 选择图像编辑器

* 保存图像

* 在页面中插入图像

* 提供替代文本

* 指定图像尺寸

* 在浏览器中改变图像的尺寸

* 在图像编辑器中改变图像的尺寸

* 为网站添加图标

## [第 6 章 链接](chapter-06)

* 创建指向另一个网页的链接

* 创建锚并链接到特定的锚

* 创建其他类型的链接

## [第 7 章 CSS构造块](chapter-07)

* 构造样式规则

* 为样式规则添加注释

* 理解继承

* 层叠：当样式发生冲突时

* 属性的值

## [第 8 章 操作样式表](chapter-08)

* 创建外部样式表

* 链接到外部样式表

* 创建嵌入式样式表

* 应用内联样式

* 样式表的层叠和顺序

* 使用与媒体相关的样式表

* 借鉴其他人的灵感：CSS

## [第 9 章 定义选择器](chapter-09)

* 构造选择器

* 按名称选择元素

* 按类或ID选择元素

* 按上下文选择元素

* 选择第一个或者最后一个子元素

* 选择元素的第一个字母或者第一行

* 按状态选择链接元素

* 按属性选择元素

* 指定元素组

* 组合使用选择器

## [第 10 章 为文本添加样式](chapter-10)

* 文章之前与文章之后

* 选择字体系列

* 指定替代字体

* 创建斜体

* 应用粗体格式

* 设置字体大小

* 设置行高

* 同时设置所有字体值

* 设置颜色

* 设置背景

* 控制间距

* 增加缩进

* 对齐文本

* 修改文本的大小写

* 使用小型大写字母

* 装饰文本

* 设置空白属性

## [第 11 章 用CSS进行布局](chapter-11)

* 开始布局的注意事项

* 建立页面结构

* 在旧版浏览器上为HTML5元素添加样式

* 对默认样式进行重置或标准化

* 盒模型

* 控制显示类型和元素的可见性

* 设置元素的高度和宽度

* 添加元素周围的内边距

* 设置元素的边框

* 设置元素周围的外边距

* 使元素浮动

* 控制元素浮动的位置

* 对元素进行相对定位

* 对元素进行绝对定位

* 在栈中定位元素

* 处理溢出

* 垂直对齐元素

* 修改鼠标指针

## [第 12 章 构建响应式网站](chapter-12)

* 响应式Web设计：概述

* 创建可伸缩图像

* 创建弹性布局网格

* 理解和实现媒体查询

* 汇总

* 兼容旧版IE

## [第 13 章 使用Web字体](chapter-13)

* 为什么是Web字体

* 在哪里能找到Web字体

  * 自托管[https://www.fontsquirrel.com/](https://www.fontsquirrel.com/)

  * Web字体服务[https://fonts.google.com/](https://fonts.google.com/)

* 下载第一个Web字体

* 理解@font-face规则

* 为Web字体添加样式

* 为Web字体应用斜体和粗体

* 使用Google Fonts的Web字体

## [第 14 章 使用CSS3进行增强](chapter-14)

* 浏览器兼容性、渐进增强和polyfill

* 理解厂商前缀

* 为元素创建圆角

* 为文本添加阴影

* 为其他元素添加阴影

* 应用多重背景

* 使用渐变背景

* 为元素设置不透明度

* 生成内容的效果

* 使用sprite拼合图像

## [第 15 章 列表](chapter-15)

* 创建有序列表和无序列表

* 选择标记

* 使用定制的标记

* 选择列表的起始编号

* 控制标记的位置

* 同时设置所有的列表样式属性

* 设置嵌套列表的样式

* 创建描述列表

## [第 16 章 表单](chapter-16)

* HTML5对表单的改进

* 创建表单

* 处理表单

* 对表单元素进行组织

* 创建文本框

* 为表单组件添加标签

* 创建密码框

* 创建电子邮件框、搜索框、电话框和URL框

* 创建单选按钮

* 创建复选框

* 创建文本区域

* 创建选择框

* 让访问者上传文件

* 创建隐藏字段

* 创建提交按钮

* 禁用表单元素

* 根据状态为表单设置样式

## [第 17 章 视频、音频和其他多媒体](chapter-17)

* 第三方插件与步入原生

* 视频文件格式

* 在网页中添加单个视频

* 为视频添加控件和自动播放

* 为视频指定循环播放和海报图像

* 阻止预加载视频

* 使用多种来源的视频和备用文件

* 提供可访问性

* 音频文件格式

* 为网页添加带控件的音频文件

* 自动播放、循环和预加载音频

* 提供带有备用设置的多种音频来源

* 添加具有备用Flash的视频和音频

* 高级多媒体

* 更多资源

## [第 18 章 表格](chapter-18)

* 结构化表格

* 让单元格跨越多列或多行

## [第 19 章 添加JavaScript](chapter-19)

* 加载外部脚本

* 添加嵌入脚本

* JavaScript事件

## [第 20 章 测试和调试网页](chapter-20)

* 验证代码

  * [https://html5.validator.nu/](https://html5.validator.nu/)

  * [https://validator.w3.org/](https://validator.w3.org/)

  * [http://jigsaw.w3.org/css-validator/](http://jigsaw.w3.org/css-validator/)

* 测试页面

* 尝试一些调试技巧

* 检查常见错误：一般问题

* 检查常见错误：HTML

* 检查常见错误：CSS

* 如果图像不显示

## 第 21 章 发布网站

* 获得域名

* 为网站寻找主机

* 将文件传送至服务器