读书笔记 | H5+C3 从入门到精通

鲸鱼circus
199 阅读4分钟

🖊 人不光是靠他生来就拥有一切，而是靠他从学习中所得到的一切来造就自己。 —— 歌德

第1章：H5基础

文档结构 & 基本语法

  • 基本结构

      1. HTML 文档 = 头部 + 主体

        1.   </html/> = </head/> + </body/>

      2. 静态网页：可以直接在浏览器中预览 .html / .htm

        1.   动态网页：需要服务器解析后，浏览器才可以预览 .asp / .aspx / .php / .jsp

      3. DTD 表示文档类型定义，里面包含了文档的规则，网页浏览器会根据预定义的 DTD 来解析页面元素

      4. HTML5 的 DOCTYPE 会触发浏览器以标准模式显示页面

  • 基本语法

      1. 属性 = "属性值"

基本元素 & 属性

  • 基本元素

      1. 结构元素： div / ol / ul / li / h1~h6 / p
      2. 内容元素： span / a
      3. 修饰元素： i / br

  • 基本属性

      1. 核心属性： class / id / style
      2. 语言属性： lang / dir
      3. 键盘属性： accesskey / tabindex
      4. 内容属性： alt / title / cite / datetime
      5. 其他属性： rel / rev

新增元素 & 属性

  • 新增元素

      1. 结构元素： header / footer / section / article / aside / nav / main / figure

        1.   *明确的语义化更适合搜索引擎检索和抓取

      2. 功能元素： video / audio / time / canvas

      3. 表单元素： tel / search / url / email / datetime / date / month / week / time / number / range / color / datetime-local

  • 新增属性

      1. 表单属性： Autofocus / Placeholder / Form / Required
      2. 链接属性： media / rel / size / target
      3. 其他属性： scoped / async

  • 全局属性

    • data- 属性* 自定义用户数据

      Hidden 属性 让元素不可见，但是仍存在于文档树中

第2章：C3基础

概述

  • Webkit 内核

    • Safari / Chrome

      私有属性：-webkit-

  • Gecko 内核

    • Firefox

      私有属性：-moz-

  • Opera 浏览器

    • 私有属性： -o-

  • IE 浏览器

    • 私有属性：-ms-

基本用法

  1. 基本结构

    1. 选择器 {声明; 声明; ...} ---> 声明 = 属性:属性值

  2. 应用

    1. 行内样式

      内嵌式：

      链接式：

      导入样式：@import

    2.   链接式 vs 导入式：
    3. Link 属于 HTML 标签，无兼容问题；@import 由 CSS 提供，只能在 IE5 以上才能识别
    4. 页面被加载时，link 会同时被加载；@import引用的 CSS 会等到页面被加载完后再加载
    5. Link 方式样式的权重高于 @import 的权重

  3. 注释：/**/

特性

  1. 层叠性

    1. 优先级：

      • !important 关键字声明有最高优先级
      • 行内样式 > 内嵌样式表
      • 内部样式表 > 外部样式表

      优先级加权值：

      • 1：标签选择器、伪元素选择器、伪对象选择器
      • 10：类选择器、属性选择器
      • 0：其他选择器（如通配选择器等）

  2. 继承性

    1. 继承关系树

第3章：C3选择器

基本选择器

  1. 标签选择器
  2. 类选择器（class）：.
  3. ID 选择器（id）：#
  4. 通配选择器：*

组合选择器

  1. 包含选择器：[空格]
  2. 子选择器：>
  3. 相邻选择器：+
  4. 兄弟选择器：~
  5. 分组选择器：,

属性选择器

  1. E[attr]：属性直接匹配
  2. E[attr="value"]：属性值完全匹配
  3. E[attr~="value"]：属性值部分匹配
  4. E[attr^="value"]：属性值开头匹配
  5. E[attr$="value"]：属性值结尾匹配
  6. E[attr*="value"]：属性值部分匹配
  7. E[attr|="value"]：属性值全部匹配

伪类选择器

  1. 动态伪类

    1. :link：链接未被访问时

      :visited：访问后

      :hover：悬浮时

      :active：点击激活时

      :focus：成为焦点时

  2. 结构伪类

    1. :first-child

      :last-child

      :nth-child()

      :first-of-type

      :last-of-type

      :nth-of-type()

    2.   *n=0 表示不选择

  3. 否定伪类

    1. :not：过滤

  4. 状态伪类

    1. :enabled / :disabled：针对 type="text"

      :checked / :unchecked：针对 type="radio" / type="checkbox"

  5. 目标伪类

第4章：设计网页文本-HTML

文本标签

4-1.png

新增文本标签

4-2.png

第5章：设计网页文本-CSS

字体样式

5-1.png

文本样式

5-2.png

新增文本样式

5-3.png

一套科学的网页字体大小方案：

  • 网站标题-16px
  • 栏目标题-14px
  • 导航栏菜单-13px
  • 正文-12px
  • 版权、注释信息-11px

颜色设定：

  • RGBA 色彩模式：

红+绿+蓝

语法：rgba（r, g, b, ）

  • HSL 色彩模式：

色调+饱和度+亮度

语法：hsl（, , ）

第6章：使用CSS美化图像

插入图像

6-1.png

图像样式

6-2.png

背景图像

6-3.png

渐变背景

看不懂一点

第7章：使用CSS美化超链接

定义超链接

7-1.png

设置超链接样式

7-2.png

实战样例

7-3.png

第8章：使用CSS美化列表

列表的基本结构和创建

8-1.png

设计CSS样式

8-2.png

实战案例

8-3.png

第9章：使用CSS美化表格

表格的基本结构和创建

9-1.png

表格属性

9-2.png

CSS样式

9-3.png

实战案例

9-4.png

第10章：使用CSS美化表单

表单的基本结构

10-1.png

创建表单控件

10-2.png

HTML5新增输入类型

10-3.png

HTML5新增输入属性

10-4.png

HTML5新增控件和表单属性

10-5.png

实战案例

10-6.png

第11章 CSS3布局基础

CSS盒模型基础

11-1.png

CSS3完善盒模型

11-2.png

实战案例

11-3.png

第12章 CSS3+HTML5网页排版

使用结构标签

12-1.png

设计HTML5结构

12-2.png

浮动显示

12-3.png

定位显示

12-4.png

第13章 使用CSS3新布局

多列布局

13-1.png

弹性盒布局

13-2.png

第14章 使用CSS3动画

设计2D变换

14-1.png

设计3D变换

14-2.png

设计过渡动画

14-3.png

设计帧动画

14-4.png

实战案例

14-5.png

avatar
文章
阅读
粉丝