前端学习-HTML/CSS/JS

1 基础知识

1.1 BS架构和CS架构

CS架构是客户端/服务器，需要安装客户端，例如手机app，PC应用
BS架构是浏览器/服务器，适合功能简单的开发

1.2 浏览器内核

浏览器内核渲染前端页面（将前端代码展示出来）

1.3 推荐网站

https://developer.mozilla.org/zh-CN/

2 HTML标签

2.1 分类

（1）按照结构分
围堵标签：需要有开始标签和结束标签，比如段落标签p
自闭合标签:不需要有结束标签，比如横线标签hr
（2）按照效果分
行内标签：标签不会导致换行
块级标签：标签独享一行，添加到前面或后面的内容会换行

2.2 规则

（1）块级标签可以嵌套块级【都会产生换行效果】


（2）块级可以嵌套行内
（3）行内可以嵌套行内
（4）行内不能嵌套块级，嵌套块级后，块级会产生换行效果，因此行内标签失效

2.3 属性

标签的属性，例如超链接标签的herf属性包括url地址

2.4 特殊字符

包括空格也需要用实体字符代替

2.5 语义化标签和标签效果

语义化标签代表了一些特殊含义，可以提高代码可读性、同时被浏览器捕获。语义化标签可以同时实现一些例如加粗的标签效果。在使用标签时，应注意是否需要语义表达。
例如 em标签和i标签都有斜体效果，但是em可表达强调，i仅仅是实现效果。

3 HTML结构

头标签：标题、字符集
字符集：存储二进制和字符的关系，例如ascii、gbk、utf-8，utf-8存储了世界上绝大部分字符，使用比较广泛

4 CSS

4.1 语义化标签和标签效果

批量为标签添加样式
行内样式：通过对行内添加style属性添加，缺点是多个行内标签添加起来比较麻烦
内部样式：通过head标签中加style属性，通过选择器批量对当前html添加标签
外部样式：将样式保存为文件，通过引入文件的方式为多个不同Html页面添加样式，相当于模板
选择器：通过选择器筛选符合条件的标签，为符合条件的标签添加样式

4.2 层叠和优先级

当多个选择器对某一标签产生作用时，根据优先级来确定谁生效

4.3 盒子模型

每一层标签可以被认为是一层盒子，标签的嵌套可以理解为盒子的嵌套。盒子之间的边距可以设置

4.4 浮动

浮动元素浮于普通的文档流上，并将其它元素推开。（例如，word的图片文字环绕，相当于图片浮于图层之上，但是将文字给推开使其环绕周围）

5 JS

5.1 介绍

类似于java语法，实现前端的动态效果，例如定时效果、事件触发等

5.2 语法

类似于JAVA，有类似于面向对象、继承等概念

5.3 DOM和BOM

DOM：将文档及其中间的元素、属性对象化，可以通过获取对象的方法操作整个文档
例如：获取某个标签，通过控制对象的方法改变它的属性
个
BOM：将浏览器对象化，可以通过获取对象的方法操作浏览器元素，例如窗口、url地址、浏览器历史等。

6 VUE