H5C3的学习

前端学习

1、HTML、CSS基础、JavaScript语法基础。学完基础后，可以仿照电商网站（例如京东、小米）做首页的布局。

2、JavaScript语法进阶。包括：作用域和闭包、this和对象原型等。相信我，JS语法，永远是面试中最重要的部分。

3、jQuery、Ajax等。jQuery没有过时，它仍然是前端基础的一部分。 

4、ES6语法。这部分属于JS新增的语法，面试必问。其中，关于 promise、async 等内容要尤其关注。 

5、HTML5和CSS3。要熟悉其中的新特性。

6、移动Web开发、Bootstrap等。要注意移动开发中的适配和兼容性问题。

7、前端框架：Vue.js和React。这两个框架至少要会一个。入门时，建议先学Vue.js，上手相对容易。但无论如何，同时掌握 Vue 和 React 才是合格的前端同学。

推荐网站：https://www.w3school.com.cn/

UI设计：Sketch

由于markdown的特性，html不适合在md文件里书写。故截图

目的：精通网页布局，前端必备，为JavaScript做准备！

什么是网页？（切片）

多个网页集合成网站，网页是一页通常是html格式的文件，通过浏览器阅读。

网页的组成：元素组成。称之为HTML文件。

本质是一个标记语言，标记语言是一套标记标签！

网页的形成：前端人员开发代码，浏览器解析渲染，生成web界面

常用的浏览器：火狐，谷歌，safari，opera，IE，Edge

浏览器内核：渲染引擎，读取网页内容。

web标准：W3C组织制定的一系列标准的集合。

1.web标准确保各种浏览器展示一致

web标准：

HTML5基础标签：

多数标签成对出现，单标签少。

双标签：包含关系，并列关系

HTML页面==HTML文档

常用vscode插件

html版本声明

常用标签

html页面语言

定义字符集meta

标签语意：

h1标题标签

p段落标签

br换行标签（单标签）

文本格式化标签

b加粗

i倾斜

s删除线

u下划线

构造盒子标签: div span

图像标签img （单标签）

一般单填一个width，height会等比例刷新

路径问题

超连接a标签

可以进行标签嵌套，让图片也有链接。

HTML注释标签和特殊字符

特殊字符

表格标签

，,

,	用来展示数据。表格标签属性一般不用,用CSS做合并单元格 ★列表标签，用来布局。ul,li 无序列表ul只能放li 有序列表标签ol只能放li ★表单form 实现用户的搜集和传递 input标签 label标签 select下拉菜单 textarea文本域 H5新增标签推荐网站：https://www.w3school.com.cn/ 1、结构标签（1）section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节、页眉、页脚或页眉的其他部分；（2）article：特殊独立区块，表示这篇页眉中的核心内容；（3）aside：标签内容之外与标签内容相关的辅助信息；（4）header：某个区块的头部信息/标题；（5）hgroup：头部信息/标题的补充内容；（6）footer：底部信息；（7）nav：导航条部分信息（8）figure：独立的单元，例如某个有图片与内容的新闻块。 `2、表单标签（1）email：必须输入邮件；（2）url：必须输入url地址；（3）number：必须输入数值；（4）range：必须输入一定范围内的数值；（5）Date Pickers：日期选择器（6）search：搜索常规的文本域；（7）color：颜色；` `3、媒体标签（1）video：视频（2）audio：音频（3）embed：嵌入内容（包括各种媒体），Midi、Wav、AU、MP3、Flash、AIFF等。` H5新增属性（1）对于js进行添加的属性 <script defer src=".....js" onload="alert('a')"></script> <script async src=".....js" onload="alert('b')"></script> 异步加载先出现b再出现a。（2）网页中标签中加入小图标的样式代码有序列表ol:新增start（列表起始值），reversed（是否倒置）menu菜单type属性（3个菜单类型）内嵌css样式：在标签内部来定义一个样式区块（scoped）,只对样式标签内部才有效内嵌框架：iframe元素，新增了seamless无边距无边框，srcdoc定义了内嵌框架的内容。总结新增属性：（1）manifest属性：定义页面需要用到的离线应用文件，一般放在<html>标签里（2）charset属性：meta属性之一,定义页面的字符集（3）sizes属性： `<link>`新增属性，当link的rel="icon"时，用以设置图标大小（4）base属性: `<base href="http://localhost/" target="_blank">`表示当在新窗口打开一个页面时，会将href中的内容作为前缀添加到地址前（5）defer属性：script标签属性，表示脚本加载完毕后，只有当页面也加载完毕才执行（推迟执行）（6）async属性：script标签属性，脚本加载完毕后马上执行（运行过程中浏览器会解析下面的内容），即使页面还没有加载完毕（异步执行）（7）media属性： `<a>`元素属性：表示对何种设备进行优化（8）hreflang属性： `<a>`的属性，表示超链接指向的网址使用的语言（9）ref属性：`<a>`的属性,定义超链接是否是外部链接（10）reversed属性:`<ol>`的属性，定义序号是否倒叙（11）start属性：`<ol>`的属性，定义序号的起始值（12）scoped属性：内嵌CSS样式的属性，定义该样式只局限于拥有该内嵌样式的元素，适用于单页开发 CSS3基础：作用： 1.美化装饰网页。 2.html结构和CSS样式相分离。 CSS语法规范代码风格: 展开，小写，加空格 CSS选择器： 1.基础选择器单个选择器组成。标签选择器类选择器（最常用） id选择器 id属性只能被使用一次，对于每个html来说不能重复使用，应当作为唯一属性经常作为javascript的首选锚点通配符选择器(清除内外边距) 设置字体样式：建议使用常见字体设置文本样式：十六进制颜色可以两两缩写 #FF00FF <===> #F0F 图片等其他的文件标签，需要用其父标签去设置位置一般通过行间距，来调整文本内容垂直方式 CSS四种引入方式： 1.嵌入式（学习用） 2.行内式（非主流,一般用于对文字的修改） 3.链接式（主流用法，单.css保存）最新方法(不推荐该方法，影响客户端性能): <style> @import url(style.css) </style> 复用css模板 Chrome调试工具调试样式： Emmet语法 vscode编辑器（本就内置） https://code.visualstudio.com/docs/editor/emmet 快捷写法(快速构造框架) css的复合选择器后代选择器子选择器并集选择器伪类选择器 css的元素显示模式什么是元素显示模式？网页标签非常多，不同的地方会用到不同类型的标签，了解他们的特点可以更好布局我们的网页。 html元素一般分为，块元素和行内元素。块元素行内元素转换成块元素：常用转换成行内块元素：常用 css的背景背景图片的导入和渲染方式背景图片位置做视差滚动效果推荐使用复合型的写法 css三大特性相同的属性值会覆盖，不同的则保留子类会继承父类的部分属性行高的继承性默认选择器权重继承的权重是0 复合选择器盒子模型页面布局三大核心：盒子模型，浮动，定位。边框属性边框简写合理的运用层叠性。表格调整一般来说，表格需要细细调整边框粗细影响盒子大小内边距，边框和内容的关系外边距（会影响边框大小）常用外边距写法： margin: 0 auto;水平居中解决外边距塌陷直接清除所有元素的内外边距分析布局 1.布局为啥用不同的盒子？标签有语义，用的多了，就输了。 2.类名or多类名选取盒子方便，后期维护方便。 3.margin和padding怎么用？ margin不会撑大盒子，padding则会。 4.布局学习主要是由UI设计先做，然后按照比列去做。圆角边框网页布局三种方式标准流浮动 ★改变标签默认排列方式浮动标签会脱离标准准备标准流父盒子。然后放浮动盒子先用标准流的构建大致。两个注意点：父盒子：不应该给高度。但是子盒子浮动会导致父盒子失去高度。所以需要清除浮动。清除浮动，方法一清除浮动，方法二清除浮动，方法三 `.clearfix:after { content: ""; display: block; height: 0px; clear: both; visibility: hidden; } .clearfix { /* IE6/7专有 / zoom: 1; }` `.clearfix:after, .clearfix::before { /* 伪元素 / content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { / IE6/7专有 / zoom: 1; }` 常用工具和布局思路 1.学习下PS 2.图层切图 3.切片切图 4.PS插件cutterman（推荐）静态页面笔记： 1.实际开发中，导航栏我们不会用a标签，而是用列表标签包含a标签的做法，链接定位为什么要用定位浮动可以让多个块级盒子一行没有缝隙排列现实，经常用于横向排列行字。定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且压住某个盒子. 定位：定位模式+边偏移定位的四种分类四种定位的特点静态定位：相对定位: 绝对定位：相对定位一般是用来给绝对定位当参考的。常用子绝父相布局常用来做轮播图固定定位常用来做贴边导航常用的一种版心贴靠固定盒子的方法。粘性定位定位叠放顺序定位拓展施加了定位的对象，则默认浮动使用定位时要注意先left后right，先top后bottom 定位小总结标准流：盒子竖直排列。浮动：让盒子横向排列。（做展示）定位：让盒子可以放在任意位置。（JS可以做下拉菜单）元素的显示与隐藏可关闭的插图广告。 ★display显示隐藏 display：none; 隐藏对象，清除占位。 display：block; 转换块级元素，并且显示元素。应用广泛，搭配JS可以做很多特效。 visibility显示隐藏 visibility: visible; 元素可视 visibility: hidden; 元素隐藏，但不清除占位。 overflow溢出显示隐藏 overflow: visible; 显示溢出 overflow: hidden; 隐藏溢出 overflow: scroll; 让内容滚动 overflow: auto; 自动选择滚不滚动 CSS高级技巧精灵图 web页面以左上角为坐标原点 CSS精灵技术：将网页中的一些小背景图，整合到一张大图中，客户端根据需要进行分割显示。（减少服务器压力，只要定位精确，很方便）如何用PS切片字体图标下载方式：使用方式：字体格式该方式不推荐根据每次下载的文件夹的不同，可以不断添加自己想要的图标。 CSS三角利用边框去做三角形，本质上也是一个盒子. 常见CSS用户界面样式缺陷文字溢出，显示省略号具体布局，请看day6的代码。初始化布局一般用来初次导入css，避免出现兼容性问题！ H5C3进阶：混合app需要H5C3的新特性和新知识，建议掌握完全。 H5新特性列举一些常用的新标签新增多媒体标签：新增表单验证 C3新特性 n从0开始到最后一个子类序数。小学数学图片模糊宽度计算过度动画运动曲线决定效果。实战项目：品优购模块化，代码复用 TDK搜索引擎优化(一般是SEO人员设置) 选项卡（需要js）

用来展示数据。

表格标签属性一般不用,用CSS做

合并单元格

★列表标签，用来布局。ul,li

无序列表ul只能放li

有序列表标签ol只能放li

★表单form

实现用户的搜集和传递

input标签

label标签

select下拉菜单

textarea文本域

H5新增标签

推荐网站：https://www.w3school.com.cn/

1、结构标签
（1）section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节、页眉、页脚或页眉的其他部分；
（2）article：特殊独立区块，表示这篇页眉中的核心内容；
（3）aside：标签内容之外与标签内容相关的辅助信息；
（4）header：某个区块的头部信息/标题；
（5）hgroup：头部信息/标题的补充内容；
（6）footer：底部信息；
（7）nav：导航条部分信息
（8）figure：独立的单元，例如某个有图片与内容的新闻块。

2、表单标签
（1）email：必须输入邮件；
（2）url：必须输入url地址；
（3）number：必须输入数值；
（4）range：必须输入一定范围内的数值；
（5）Date Pickers：日期选择器
（6）search：搜索常规的文本域；
（7）color：颜色；

3、媒体标签
（1）video：视频
（2）audio：音频
（3）embed：嵌入内容（包括各种媒体），Midi、Wav、AU、MP3、Flash、AIFF等。

H5新增属性
 （1）对于js进行添加的属性
<script defer src=".....js" onload="alert('a')"></script> 
<script async src=".....js" onload="alert('b')"></script> 
异步加载先出现b再出现a。

 （2）网页中标签中加入小图标的样式代码
 有序列表ol:新增start（列表起始值），reversed（是否倒置）menu菜单type属性（3个菜单类型）
 内嵌css样式：在标签内部来定义一个样式区块（scoped）,只对样式标签内部才有效
 内嵌框架：iframe元素，新增了seamless无边距无边框，srcdoc定义了内嵌框架的内容。

总结新增属性：
 （1）manifest属性：定义页面需要用到的离线应用文件，一般放在<html>标签里
 （2）charset属性：meta属性之一,定义页面的字符集
 （3）sizes属性： `<link>`新增属性，当link的rel="icon"时，用以设置图标大小
 （4）base属性: `<base href="http://localhost/" target="_blank">`表示当在新窗口打开一个页面时，会将href中的内容作为前缀添加到地址前
 （5）defer属性：script标签属性，表示脚本加载完毕后，只有当页面也加载完毕才执行（推迟执行）
 （6）async属性：script标签属性，脚本加载完毕后马上执行（运行过程中浏览器会解析下面的内容），即使页面还没有加载完毕（异步执行）
 （7）media属性： `<a>`元素属性：表示对何种设备进行优化
 （8）hreflang属性： `<a>`的属性，表示超链接指向的网址使用的语言
 （9）ref属性：`<a>`的属性,定义超链接是否是外部链接
 （10）reversed属性:`<ol>`的属性，定义序号是否倒叙
 （11）start属性：`<ol>`的属性，定义序号的起始值
 （12）scoped属性：内嵌CSS样式的属性，定义该样式只局限于拥有该内嵌样式的元素，适用于单页开发

CSS3基础：

作用：

1.美化装饰网页。

2.html结构和CSS样式相分离。

CSS语法规范

代码风格: 展开，小写，加空格

CSS选择器：

1.基础选择器

单个选择器组成。

标签选择器

类选择器（最常用）

id选择器

id属性只能被使用一次，对于每个html来说不能重复使用，应当作为唯一属性

经常作为javascript的首选锚点

通配符选择器(清除内外边距)

设置字体样式：

建议使用常见字体

设置文本样式：

十六进制颜色可以两两缩写

#FF00FF <===> #F0F

图片等其他的文件标签，需要用其父标签去设置位置

一般通过行间距，来调整文本内容垂直方式

CSS四种引入方式：

1.嵌入式（学习用）

2.行内式（非主流,一般用于对文字的修改）

3.链接式（主流用法，单.css保存）

最新方法(不推荐该方法，影响客户端性能):

复用css模板

Chrome调试工具调试样式：

Emmet语法

vscode编辑器（本就内置）

https://code.visualstudio.com/docs/editor/emmet

快捷写法(快速构造框架)

css的复合选择器

后代选择器

子选择器

并集选择器

伪类选择器

css的元素显示模式

什么是元素显示模式？

网页标签非常多，不同的地方会用到不同类型的标签，了解他们的特点可以更好布局我们的网页。

html元素一般分为，块元素和行内元素。

块元素

行内元素

转换成块元素：常用

转换成行内块元素：常用

css的背景

背景图片的导入和渲染方式

背景图片位置

做视差滚动效果

推荐使用复合型的写法

css三大特性

相同的属性值会覆盖，不同的则保留

子类会继承父类的部分属性

行高的继承性

默认选择器权重

继承的权重是0

复合选择器

盒子模型

页面布局三大核心：盒子模型，浮动，定位。

边框属性

边框简写

合理的运用层叠性。

表格调整

一般来说，表格需要细细调整

边框粗细影响盒子大小

内边距，边框和内容的关系

外边距（会影响边框大小）

常用外边距写法：

margin: 0 auto;水平居中

解决外边距塌陷

直接清除所有元素的内外边距

分析布局

1.布局为啥用不同的盒子？

标签有语义，用的多了，就输了。

2.类名or多类名

选取盒子方便，后期维护方便。

3.margin和padding怎么用？

margin不会撑大盒子，padding则会。

4.布局学习主要是由UI设计先做，然后按照比列去做。

圆角边框

网页布局三种方式

标准流

浮动

★改变标签默认排列方式

浮动标签会脱离标准

准备标准流父盒子。然后放浮动盒子

先用标准流的构建大致。

两个注意点：

父盒子：不应该给高度。但是子盒子浮动会导致父盒子失去高度。所以需要清除浮动。

清除浮动，方法一

清除浮动，方法二

清除浮动，方法三

.clearfix:after {
            content: "";
            display: block;
            height: 0px;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6/7专有 */
            *zoom: 1;
        }

.clearfix:after,
        .clearfix::before {
            /* 伪元素 */
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            /* IE6/7专有 */
            *zoom: 1;
        }