一个合格的初级前端工程师需要掌握的模块笔记

文章目录

• 一个合格的初级前端工程师需要掌握的模块笔记
• • 前言
  • • Web模块
    • • html基本结构
      • 标签属性
      • 事件属性
      • 文本标签
      • 多媒体标签
      • 列表
      • 表格
      • 表单标签
      • 其他语义化标签
      • 页结构
      • 模块划分
      • CSS代码语法
      • CSS 放置位置
      • CSS的继承
      • 选择器的种类
      • 选择器的优先级
      • 背景样式
      • 字体样式
      • 文本属性
      • 基本样式
      • 样式重置
      • 盒模型样式
      • 浮动float
      • 定位position
      • 浏览器默认样式
    • html5
    • • HTML5 的优势
      • HTML5 废弃元素
      • HTML5 新增元素
      • HTML5 表单相关元素和属性
    • css3
    • • CSS3 新增选择器
      • CSS3 新增属性
      • 新增变形动画属性
      • 3D 变形属性
      • CSS3 的过渡属性
      • CSS3 的动画属性
      • CSS3 新增多列属性
      • CSS3新增单位
      • 弹性盒模型
    • JavaScript
    • • JavaScript基础
      • JavaScript数据类型
      • 算术运算
      • 强制转换
      • 赋值运算
      • 关系运算
      • `“=”、“==”、“===”`有什么区别/li>
      • 逻辑运算
      • 三元运算
      • 分支循环
      • switch
      • while
      • do-while
      • for
      • break和continue
      • 数组
      • 数组方法
      • 二维数组
      • 字符串
    • 正则表达式
    • • 创建正则表达式
      • 元字符
      • 模式修饰符
      • 正则方法
      • 支持正则的 String方法
    • js对象
    • • 定义对象
      • 对象的数据访问
      • JSON
      • 内置对象
      • Math 方法
      • Date 方法
    • 面向对象是一种编程思想
    • • 定义对象
      • 原型和原型链
      • 原型链
      • 原型
    • 常用的JavaScript设计模式
    • • 单体模式
      • 工厂模式
      • 单例模式
    • 函数
    • • 函数的定义
      • 局部变量和全局变量
      • 返回值
      • 匿名函数
      • 自运行函数
      • 闭包
    • BOM
    • • BOM概述
      • window方法
      • `frames [ ]` 框架集
      • history 历史记录
      • location 定位
      • navigator 导航
      • screen 屏幕
      • document 文档
    • DOM
    • • DOM对象方法
      • 操作DOM间的关系
      • DOM节点属性
    • 事件
    • • 事件分类
      • 事件对象
      • 事件流
      • 事件流
      • 事件目标
      • 事件委派`(delegate)`
      • 事件监听
    • jQuery
    • • jQuery 选择器
      • 属性选择器
      • 位置选择器
      • 后代选择器
      • 子代选择器
      • 选择器对象
      • 子元素
      • DOM操作
      • JQuery 事件
      • 容器适应
      • 标签样式操作
      • 滑动
      • 自定义动画
    • AJAX
    • • 工作原理
      • XMLHttpRequest对象
      • XML和HTML的区别
      • get() 和post()
    • HTTP
    • • HTTP消息结构
      • url请求过程
    • 预加载
    • 懒加载
    • 性能优化
    • • JavaScript代码优化
      • 提升文件加载速度
    • webpack
    • • webpack的特点
      • webpack的缺点
      • 安装
      • webpack基本应用
      • 配置文件入门
    • entry 和 output
    • • module
      • plugins
      • resolve
      • webpack-dev-server
      • 运行
    • vue
    • • MVC模式
      • MVVM模式
      • 基础语法
      • 实例属性/方法
      • 生命周期
      • 计算属性
      • 数组的更新检查
      • 事件对象
      • Vue组件
      • 路由使用
      • 路由导航
      • 嵌套路由
      • 命名视图
  • 回看笔者往期高赞文章，也许能收获更多喔！
  • 点赞、收藏和评论
  • 我们下期见！

大家好，我是魔王哪吒，很高兴认识你~~

哪吒人生信条：如果你所学的东西 处于喜欢 才会有强大的动力支撑。

每天学习编程，让你离梦想更新一步，感谢不负每一份热爱编程的程序员，不论知识点多么奇葩，和我一起，让那一颗四处流荡的心定下来，一直走下去，加油，加油！ 加我，欢迎点赞、收藏和评论

不要害怕做梦，但是呢，也不要光做梦，要做一个实干家，而不是空谈家，求真力行。

前言

笔芯~

Web模块

html基本结构

1. 标签是由包围的关键词。
2. 标签通常成对出现，分为标签开头和标签结尾。
3. 有部分标签是没有结束标签的，为单标签，单标签必须使用结尾。
4. 页面所有的内容，都在标签中。
5. 标签分为三部分：标签名称，标签内容，标签属性。
6. 标签具有语义化，可通过标签名能够判断出该标签的内容，语义化的作用是 页结构层次更清晰，更容易被搜索引擎收录，更容易让屏幕阅读器读出 页内容。
7. 标签的内容是在一对标签内部的内容。
8. 标签的内容可以是其他标签。

标签属性

1. 属性：用于定义元素的类名
2. 属性：用于指定元素的唯一，该属性的值在整个文档中具有唯一性
3. 属性：用于指定元素的行内样式，使用该属性后将会覆盖任何全局的样式设定
4. 属性：用于指定元素的额外信息
5. 属性：用于指定激活元素的快捷键
6. 属性：用于指定元素在键下的次序
7. 属性：用于指定元素中内容的文本方向，属性只有或两种
8. 属性：用于指定元素内容的语言

事件属性

1. 窗口事件，，在 页加载结束之后触发，，在用户从 页离开时发生（点击跳转，页面重载，关闭浏览器窗口等）
2. 表单事件，，当元素失去焦点时触发，，在元素的值被改变时触发，，当元素获得焦点时触发，，当表单中的重置按钮被点击时触发，，在元素中文本被选中后触发，，在提交表单时触发
3. 键盘事件，，在用户按下按键时触发，，在用户按下按键后，按着按键时触发。该属性不会对所有按键生效，不生效的有，
4. 鼠标事件，，当在元素上发生鼠标点击时触发，，当在元素上发生鼠标双击时触发，，当元素上按下鼠标按钮时触发，，当鼠标指针移动到元素上时触发，，当元素指针移出元素时触发，，当元素上释放鼠标按钮时触发。媒体事件，，当退出时触发，，当媒体已停止播放但打算继续播放时触发。

文本标签

1. 段落标签，段落标签用来描述一段文字
2. 标题标签，标题标签用来描述一个标题，标题标签总共有六个级别，标签在每个页面中通常只出现一次
3. 强调语句标签，，用于强调某些文字的重要性
4. 更加强调标签，和标签一样，用于强调文本，但它强调的程度更强一些
5. 无语义标签，标签是没有语义的
6. 短文本引用标签，简短文字的引用
7. 长文本引用标签，定义长的文本引用
8. 换行标签

多媒体标签

1. 链接标签，
2. 图片标签，
3. 视频标签，
4. 音频标签，

列表

1. 无序列表标签，，列表定义一个无序列表，代表无需列表中的每一个元素
2. 有序列表，
3. 定义列表，，定义列表通常和和标签一起使用

表格

1. 表格标签
2. 表格的一行
3. 表格的表头
4. 单元格
5. 表格合并，同一行内，合并几列，同一列内，合并几行

表单标签

1. 表单标签

表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

，浏览者输入的数据被传送到的地方

，数据传送的方式

2. 输入标签

：为文本框命名，用于提交表单，后台接收数据用。

：为文本输入框设置默认值。

：通过定义不同的类型，的功能有所不同。

按钮，下拉选择框

3. 文本域：，当用户想输入大量文字的时候，使用文本域。，多行输入域的列数，，多行输入域的行数。

其他语义化标签

1. 盒子
2. 页头部，新增语义化标签，定义 页的头部，主要用于布局，分割页面的结构
3. 底部信息，新增语义化标签，定义 页的底部，主要用于布局，分割页面的结构
4. 导航，新增语义化标签，定义一个导航，主要用于布局，分割页面的结构
5. 文章，新增语义化标签，定义一篇文章，主要用于布局，分割页面的结构
6. 侧边栏，语义化标签，定义主题内容外的信息，主要用于布局，分割页面的结构。
7. 时间标签，语义化标签，定义一个时间

页结构

1. 定义文档类型，告知浏览器用哪一种标准解释
2. 可告知浏览器其自身是一个 文档
3. 标签之间的内容是 页的主要内容
4. 标签用于定义文档的头部，它是所有头部元素的容器
5. 元素可定义文档的标题
6. 标签将样式文件链接到文件内
7. 定义文档的元数据

模块划分

1. 常见的企业 站，多由头部区，展示图片区域，主题区域，底部信息区域组成
2. 页拆分原则: – 由上到下 – 由内到外

CSS代码语法

1. 全称为层叠样式表，它主要是用于定义内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
2. 代码通常存放在标签内
3. 样式由选择符和声明组成，而声明又由属性和值组成
4. 选择符
5. 选择符：又称选择器，指明 页中要应用样式规则的元素

CSS 放置位置

1. 行内样式，不建议使用
2. 内联式样式表
3. 外联样式表

CSS的继承

1. 的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。
2. 不可继承样式：
3. 可以继承的样式：

选择器的种类

1. 标签选择器:通过标签的名字，修改样式
2. 通配符选择器:选择页面中所有的元素
3. 属性选择器
4. 后代选择器:选择某个父元素下面所有的元素
5. 一级子元素选则器:选择某个父元素的直接子元素，后代选择器是选择父元素的所有子孙元素，一级子元素原则器只选择第一级子元素，不会再向下查找元素
6. 选择器：通过查找页面中唯一的标签
7. 选择器:通过特定的（类）来查找页面中对应的标签，以 名称
8. 伪类选择器:鼠标移入某个元素;在某个元素的前面插入内容;在某个元素的后面插入内容
9. 群组选择器:可以对多个不同的选择器设置相同的样式

选择器的优先级

1. 当有不同的选择器对同一个对象进行样式指定时，并且两个选择器有相同的属性被赋予不同的值时。
2. 通过测算那个选择器的权重值最高，应用哪一个选择器的样式
3. 权重计算方式:

背景样式

1. 背景颜色
2. 背景图片

3. 背景图片位置

4. 背景图片重复

5. 背景图片定位

6. 缩写

字体样式

1. 字体族

2. 字体大小

页默认字体大小是

3. 字体粗细

4. 字体颜色

5. 字体斜体

文本属性

1. 行高

可以将父元素的高度撑起来

2. 文本水平对齐方式

3. 文本所在行高的垂直对齐方式

4. 文本缩进

通常用在段落开始位置的首行缩进

5. 字母之间的间距
6. 单词之间间距
7. 文本的大小写

8. 文本的装饰

9. 自动换行

基本样式

1. 宽度

2. 高度