@artman328
2019-10-19T09:22:54.000000Z
字数 2690
阅读 1130
HTML+CSS: 网页展现的艺术
web html css 视频提纲
第一部分 基础知识
1. 课程介绍
2. WWW - What？ Why？ Where？
3. HTML 语言
3.1 标记语言
3.2 标记格式
3.3 标记属性
3.3.1 id
3.3.2 class
3.3.3 style
3.4 标记内容及标记嵌套
3.5 标记举例
4. 网页结构
4.1 整体结构
4.2 文档类型
4.3 头部
4.4 体部
5. 文档结构概述
5.1 文档结构划分局部功能
5.2 文档结构便于按意图展现文档
5.3 文档结构便于计算机程序处理文档信息
5.4 文档具有层次结构
第二部分 文档结构
6. 文档结构元素 - 标题、段落和列表（title, h1~h6, p, ul, ol）
7. 文档结构元素 - 表格 (table)
9. 文档结构元素 - 通用容器（div, span）
10. 文档结构元素 - 导航（nav）
11. 文档结构元素 - 文本修饰（em, del, i, ...）
12. 文档结构元素 - 页头、页脚、主区域与侧边区域
13. 文档结构元素 - 文章与节、节头与节脚
14. 文档结构元素 - 音频、视频与画布
15. 文档结构元素 - 通讯（address, tel, email）
16. 文档结构元素 - 表单与文本输入域
17. 文档结构元素 - 下拉列表、单选框、复选框、文件上传选择
19. 文档结构元素 - 页中页（iframe)
第三部分 样式定义
1. 样式定义概述
2. 选择器（1）
| 选择器 |
例子 |
描述 |
CSS版本 |
| * |
* |
选择所有元素 |
2 |
| id |
name |
选择 id="name" 的那个元素 |
1 |
| .class |
.col |
选择 class="col" 的所有元素 |
1 |
| element |
p |
选择所有 元素 |
1 |
3. 选择器（2）
| 选择器 |
例子 |
描述 |
CSS版本 |
| element, element, ... |
p, div, ul |
选择所有的, 和元素 |
1 |
| element element |
div p |
选择内部的所有元素（所有下级） |
1 |
| element>element |
div>p |
选择元素的直接子元素（仅儿子级） |
2 |
| element+element |
div+p |
选择紧邻的元素（同级） |
2 |
| element~element |
div~p |
选择同级父元素下位于div元素之后的所有p元素 |
3 |
4. 选择器（3）- 属性选择
| 选择器 |
例子 |
描述 |
CSS版本 |
| [attribute] |
[title] |
选择所有带有title属性的元素 |
2 |
| [attribute=value] |
[title="Click Here"] |
选择所有 title="Click Here"的元素 |
2 |
| [attribute=~value] |
[title~="Click"] |
选择所有title属性值包含"Click"文字的元素 |
2 |
| [attribute|=value] |
[lang|="en"] |
选择所有属性lang的值开始于en（en或en-）的所有元素 |
2 |
| [attribute^=value] |
[src^="img"] |
选择所有src属性值开始于img的元素 |
3 |
| [attribute$=value] |
[src$=".jpg"] |
选择所有src属性值结束于.jpg的元素 |
3 |
| [attribute*=value] |
[src*="person"] |
选择所有src属性值包含person的元素 |
3 |
5. 选择器（4）- 状态选择
| 选择器 |
例子 |
描述 |
CSS版本 |
| :link |
a:link（只用于链接元素 a） |
选择所有未被访问的链接 |
1 |
| :visited |
a:visited（只用于链接元素 a） |
选择所有已被访问的链接 |
1 |
| :active |
a:active（只用于链接元素 a） |
选择所有活动链接 |
1 |
| :hover |
a:hover （注：hover也可用于其它元素） |
选择鼠标位于其上的链接 |
1 |
| :focus |
input:focus （注：可用于所有接受用户输入的元素） |
选择获得焦点的input元素 |
2 |
6. 选择器（5）- 第一个与最后一个
| 选择器 |
例子 |
描述 |
CSS版本 |
| :first-letter |
p:first-letter |
选择p元素内容的首字母 |
1 |
| :first-line |
p:first-line |
选择p元素内容的首行 |
1 |
| :first-child |
p:first-child |
选择同一父元素下的第一个p元素（必须是父元素的第一个元素） |
2 |
| :first-of-type |
p:first-of-type |
选择同一父元素下的第一个p元素（不必是父元素的第一个元素） |
3 |
| :last-child |
p:last-child |
选择同一父元素下的最后一个p元素（必须是父元素的最后一个元素） |
3 |
| :last-of-type |
p:last-of-type |
选择同一父元素下的最后一个p元素（不必是父元素的最后一个元素） |
3 |
7. 选择器（6）- 唯一一个或第几个
| 选择器 |
例子 |
描述 |
CSS版本 |
| :only-child |
p:only-child |
选择属于其父元素的唯一子元素的每个 元素 |
3 |
| :only-of-type |
p:only-of-type |
选择属于其父元素唯一的 元素的每个 元素 |
3 |
| :nth-child(n) |
p:nth-child(2) |
选择属于其父元素的第二个子元素的每个 元素。 |
3 |
| :nth-last-child(n) |
p:nth-last-child(2) |
同上，从最后一个子元素开始倒数。 |
3 |
| :nth-of-type(n) |
p:nth-of-type(2) |
选择属于其父元素第二个 元素的每个 元素 |
|
| :nth-last-of-type(n) |
p:nth-last-of-type(2) |
同上，但是从最后一个子元素开始倒数。 |
|
8. 选择器（7） - 其它伪类
| 选择器 |
例子 |
描述 |
CSS版本 |
| :root |
|
选择文档根元素 |
3 |
| :empty |
p:empty |
选择没有子元素及文本内容的元素 |
3 |
| :target |
p:target |
选择活动链接目标元素 |
3 |
| :enabled |
input:enabled |
选择所有启用的元素 |
3 |
| :disabled |
nput:disabled |
选择所有被禁用的元素 |
3 |
| :checked |
input:checked |
选择所有被选中的input元素 |
3 |
| :not(selector) |
|
选择所有非 p 元素 |
3 |
| ::selection |
::selection |
选择用户选中的元素部分内容 |
3 |
9. CSS 的尺寸单位及颜色值
10. CSS 的 display 属性
11. 盒子模型与内容剪切
12. 边框
13. CSS 字体定义
14. CSS 文本属性
15. 列表属性
16. CSS 定位
17. CSS 布局 - 浮动
18. CSS 布局 - 表格
19. CSS 布局 - Flex
20. CSS 布局 - Grid
21. CSS 背景
22. CSS 图片效果
23. CSS 动画
24. CSS 过渡
25. CSS 媒体查询
第四部分 技能实践
一、一个博客文章页面（约6讲）
二、一个论坛主题列表页面（约5讲）
三、 一个公司首页（约6讲）
四、一个电商网站首页（约6讲）
