目录
一. B/S框架
二. 前端三剑客
三 . html
HTML是什么
HTML的运行方式
四. CSS
1.css注意事项
2. css使用的三种方式
3. CSS元素选择器
五. JavaScript
一. B/S框架
B/S框架，意思是前端(Browser 浏览器)和服务器端(Server)组成的系统的框架结构。
B/S架构也可理解为web架构，包含前端、后端、数据库三大组成部分。
·前端
前端开发技术工具包括三要素: HTML、CSs和JavaScript，还有很多高级的前端框架，如bootstrap.jquery, vUE等。
后端
后端开发技术工具主要有:NetJAVA、PHP,Go等
数据库
主流的三种关系型数据库:Mysql、sQLserver、Oracle，还有Nosql非关系型数据库:Redis、Mogodb等。
前端和后端的区别就是看文件由那个端解析
二. 前端三剑客
三 . html
供后端工程师学习与查看的前端知识点的网站:HTML 教程 (w3school.com.cn)
HTML是什么
HTML (HyperText Mark-up Language）即超文本标签语言(可以展示的内容类型很多)
HTML文本是由HTML标签组成的文本，可以包括文字、图形、动画、声音、表格、链接等
HTML的结构包括头部（Head)、主体(Body）两大部分，其中头部描述浏览器所需的信息, 而主体则包含所要说明的具体内容.
HTML的运行方式
本地运行
远程访问
注意事项和细节
1. HTML 文件不需要编译，直接由浏览器进行解析执行
2. 可以选择的浏览器，是你电脑安装有的浏览器 , 如果没有安装这个浏览器，会报错
HTML基本机构
标签/元素说明
1. HTML 标签用两个尖括号 ”<>” 括起来
2. HTML 标签一般是双标签，如 <b> 和 </b> 前一个标签是起始标签 , 后一个标签为结束标签
3. 两个标签之间的文本是 html 元素的内容
4. 某些标签称为 " 单标签 ", 因为它只需单独使用就能完整地表达意思 , 如 <br/> <hr/>
5. HTML 元素指的是从开始标签到结束标签的所有代码。
标签使用细节:
1.标签不能交叉嵌套
⒉标签必须正确关闭
3.注释不能嵌套
4. html语法不严谨。有时候标签不闭合，属性值不带""也不报错
四. CSS
查询文档:CSS 教程 (w3school.com.cn)
1.css注意事项
CSS 语法可以分为两部分：
(1) 选择器
(2)声明
声明由属性和值组成，多个声明之间用分号分隔
最后一条声明可以不加分号(建议加上)
一般每行只描述一个属性
CSS 注释： /* 注释内容 */, 类似 java
1. 在 head 标签内，出现了 <style type="text/css"></style>
2. 表示要写 css 内容
3. div{} 表示对 div 元素进行样式的指定 , div 就是一个选择器 ( 元素 / 标签选择
器 )
4. width: 300px( 属性 ); 表示对 div 样式的具体指定 , 可以有多个
5. 如果有多个，使用 ; 分开即可 , 最后属性可以没有 ; 但是建议写上
6. 当运行页面时， div 就会被 div{} 渲染，修饰
7. 小经验：在调试 css 时，可以通过修改颜色，或者大小来看
8. css 的注释是 /* */ , 快捷键 ctrl+/
2. css使用的三种方式
方式一
在标签的 style 属性上设置 CSS 样式
问题分析
标签多了。样式多了，代码量庞大
可读性差
CSS 代码没有复用性
方式二
在 head 标签中，使用 style 标签来定义需要的 CSS 样式
问题分析
只能在同一页面内复用代码维护不方便，
实际项目中会有很多页面，需要到对应页面去修改。工作量大
方式二
把 CSS 样式写成单独的 CSS 文件，再通过 link 标签引入
第三种方式是我们推荐使用的 .
3. CSS元素选择器
CSS 元素选择器
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
CSS 元素/标签选择器通常是某个 HTML 元素， 比如 p、h1、a div 等
ID 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
class 选择器（类选择器）
class 类选择器，可以通过 class 属性选择去使用这个样式
组合选择器
组合选择器可以让多个选择器共用同一个 css 样式代码
⚠ : 优先级说明
行内样式 > ID 选择器 > class 选择器 > 元素选择器
五. JavaScript
供后端工程师学习与查看的前端知识点的网站:JavaScript 教程 (w3school.com.cn)
JavaScript 能改变 HTML 内容，能改变 HTML 属性，能改变 HTML 样式 (CSS) ，能完成
页面的数据验证
能改变 HTML 内容:
<!DOCTYPE html> <html> <body> <h2>JavaScript 能做什么</h2> <p id="demo">JavaScript 能够改变 HTML 内容。</p> <button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>点击我！</button> </body> </html>
能改变 HTML 属性:
<!DOCTYPE html> <html> <body> <h2>JavaScript 能做什么？</h2> <p>JavaScript 能够改变 HTML 属性值。</p> <p>在本例中，JavaScript 改变了图像的 src 属性值。</p> <button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">开灯</button> <img id="myImage" border="0" src="/i/eg_bulboff.gif" style="text-align:center;"> <button onclick="document.getElementById('myImage').src='/i/eg_bulboff.gif'">关灯</button> </body> </html>
能改变 HTML 样式 (CSS):
<!DOCTYPE html> <html> <body> <h2>JavaScript 能够做什么</h2> <p id="demo">JavaScript 能够改变 HTML 元素的样式。</p> <button type="button" onclick="document.getElementById('demo').style.fontSize='35px'"> 点击我！ </button> </body> </html>
⚠ : JS 需要运行浏览器来解析执行 JavaScript 代码, 和Java没有关系
JavaScript特点:
1.JavaScript 是一种解释型的脚本语言， C 、 C++ 等语言先编译后执行，而 JavaScript 是在程序 的运行过程中逐行进行解释。
2.JavaScript 是一种基于对象的脚本语言，可以创建对象，也能使用现有的对象 ( 有对象 ) 。
3.JavaScript 是 弱类型 的，对变量的数据类型不做严格的要求，变量的数据类型在运行过程
可以变化。【创建 js 弱类型 .html 】
4. 跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关）。
外部脚本
脚本可放置与外部文件中：
外部文件：myScript.js
function myFunction() { document.getElementById("demo").innerHTML = "段落被更改。"; }
外部脚本很实用，如果相同的脚本被用于许多不同的网页。
JavaScript 文件的文件扩展名是 .js。
如需使用外部脚本，请在 <script> 标签的 src (source) 属性中设置脚本的名称：
实例
<script src="myScript.js"></script>
外部 JavaScript 的优势
在外部文件中放置脚本有如下优势：
分离了 HTML 和代码
使 HTML 和 JavaScript 更易于阅读和维护
已缓存的 JavaScript 文件可加速页面加载
