前端语言串讲day1

我写我写我写我写
109 阅读5分钟

前端语言的基本能力

html:页面的基石，完成文本到页面的转化过程->骨骼

css:给元素增加样式->皮囊

js:灵活，增加交互体验->肌肉

css

选择器：

  1. #Class Selector

类选择器

.intro{
    ...
}
  1. #*

全选择器 All element

*{

}
  1. 伪元素选择器

在页面中，有时候同一个元素在不同动作下有不同的样式。比如链接在没有点击的时候有个样式，在鼠标放上去(hover)有另外的样式，还有在点击完成以后又会又一个样式。这几种情况下这个链接的标签并没有变化，有变化的只是它的状态，这时候就可以里用伪类来实现这个需求。

在浏览器中，伪类的出现是为了向某些选择器添加特殊的效果或限制。

伪类是在正常的选择器后面加上伪类名称，中间用冒号(:)隔开。

a:{
	text-decoration: none;
}
a:hover{
	text-decoration:underline;
}//希望超链接在鼠标放上去之后有一个下划线

常见的标记元素的伪类：

：link 标识未被访问过的链接

:visited 标识被访问过链接

:hover 鼠标移入

:active 表示选中

:focus 选取获得焦点的元素

具有筛选功能的伪类：

:empty 选取没有子元素的伪类

:checked 选取勾选状态下的input元素，只对radio和checkbox生效

:disabled 选取禁用的的表单元素

:first-child 选取当前选择器下的第一个元素

:last-child 选取当前选择器下的最后一个元素

:nth-child(an+b)，选取指定位置的元素。:

这个伪类是有参数的，参数可以支持 an+b 的形式，这里 a 和 b 都是可变的，n 从0起。使用这个伪类可以做到选择第几个，或者选择序号符合 an+b 的所有元素。比如使用 li:nth-child(2n+1)，就可以选中 li 元素中序号是2的整数倍加1的所有元素，也就是第1、3、5、7、9、2n+1个 li 元素。

:nth-last-child(an+b)，这个伪类和 nth-child 相似，只不过在计数的时候，这个伪类是从后往前计数。

:only-child，选取唯一子元素。如果一个元素的父元素只有它一个子元素，这个伪类就会生效。如果一个元素还有兄弟元素，这个伪类就不会对它生效

:only-of-type，选取唯一的某个类型的元素。如果一个元素的父元素里只有它一个当前类型的元素，这个伪类就会生效。这个伪类允许父元素里有其他元素，只要不和自己一样就可以。

伪元素选择器：

::before 在某个元素之前插入一些内容

::after 在某个元素之后插入一些内容

::selection 对光标选中的元素添加样式

  1. 元素选择器

    p{
	...
}

  2. 属性选择器

    li[class] {
  color: red;
  background: yellow;
}//选择有 class 属性（值不限）的所有 li 元素，使其文本为 red，背景色为 yellow 。

    li[class="third done"] {
  color: red;
  background: yellow;
}
//[attr = val] 要求这种选择格式要求必须与“属性值”完全匹配，不多不少，不能有任何形式的简写。
// [attr ~= val] 用于“根据部分属性值”来选择元素 ,可以少 比如只有 third

    li[class^="se"] {
  color: red;
  background: yellow;
}//选择 class 整个属性值以 se 开头的所有 li 元素

    li[class$="ne"] {
  color: red;
  background: yellow;
}//选择 class 整个属性值以 ne 结尾的所有 li 元素

    li[class*="ir"] {
  color: red;
  background: yellow;
}//选择 class 属性值中包含字串 ir 的所有 li 元素
JavaScript
  1. 借鉴c语言的基本语法
  2. 借鉴java的数据类型和内存管理
  3. 将函数提到first class
  4. 早期使用原型

js基本类型：String，Number，Boolean，Null，Undefined,Symbol

Object(Array,Function)。

let const 块级作用域

function定义：

使用function做关键字进行定义

function fName (param1,param2){
    ...
    return 
}

前端语言的协调配合

浏览器一般包含两种引擎：js引擎和渲染引擎

http=>构建dom树=>计算css树=>排版=>渲染合成=>绘制页面

EVENT LOOP

Event Loop 是单线程的JavaScript 在处理异步事件进行的一种循环过程。

具体来讲，对于异步事件，会在事件队列中挂起，等主线程空闲了再执行事件队列中的事件。如此循环往复。

避免了阻塞，保证程序的响应性和流畅性。

imgimg

宏任务和微任务的执行顺序：总方针是先同步再异步，异步中先微任务，在宏任务

image-20230726121516929转存失败，建议直接上传图片文件

你不知道的H5

3.1 HTML DTD

html是一门标记语言

3.2 HTML 全部标签分类

不再是单纯的纯文本标记语言，cavans video audio 加入了许多语义化标签，使得网页层次更加清晰。

拓展了表单组件，表单增强 支持radio 下拉框 颜色时间选择器

image-20230726122144795转存失败，建议直接上传图片文件

3.3 HTML5存储

Cookie 4kb 过期时间设置

Local Storage 10mb 从不过期

Session Storage 关闭时过期

IndexedDb (50MB)

3.4 HTML5 二进制

Blob ArrayBuffer等

3.5 Web Worker

是一种全双工通信方式

拓展交流

web风靡的原因

  1. 对用户友好

    • 无需安装
    • 无需强大硬件
    • 升级方便
    • 容易传播

  2. 对开发者友好

    • 丰富的api
    • 心智模型成熟
    • 开发调试简单
    • 跨平台
交互范式

  1. MVC

    • View：处理界面
    • Model：维护数据层
    • Controller：处理用户逻辑

  2. MVP

    • 把所有操作内置到Presenter中

  3. MVVM

    • 由微软提出，由vue发扬光大
avatar
文章
阅读
粉丝