提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 前言
- 一、HTML
- 1. 什么是HTML？
- 一个完整的页面：
- <!DOCTYPE> 声明
- 中文编码
- 2.HTML基础
- ①标签
- 头部元素
- 标题
- 段落
- 注释
- 水平线
- 文本格式化
- ②属性
- 3.HTML_CSS
- 内联样式
- 内部样式表
- 外部引用
- 4.HTML应用
- 布局
- 表单
- 框架
- 脚本
- 5.资源总结
- 颜色
- HTML速查列表
- 标签简写及全称
- 二、CSS：层叠样式表 (Cascading Style Sheets)
- 1.语法
- CSS 规则
- CSS 注释
- 2.class用法
- 3.其他属性值可以用到的时候再百度~
- 三、JS
- 1.简介
- 2.用法
- 3.输出
- 4.语法
- 数据类型
- 数组（Array）
- 对象（Object）
- 函数（Function）
- 变量（一个名称
- 语句
- 5.HTML中的window对象和document对象（存疑）
- 6.事件
前言
导师布置了任务，原话是“多学习一下界面开发设计，也算掌握一门技能”；我觉得老师说的对！所以，搞一下~
之前开会的时候说到过vue框架开发前端很好用，所以就先从这里入手啦~
大二的时候自己学过html＋css＋js，但是很遗憾两年没用了，现在都又还回去了QAQ 所以还是先复习一下，再学习Ajax和vue~
一、HTML
1. 什么是HTML？
- HTML 是用来描述网页的一种语言，目前最新常用的版本为HTML5(2012年发布）
- HTML文档也叫做 web 页面
- HTML 不是一种编程语言，而是一种标记语言
- HTML标签通常是成对出现的，比如 和 ；开始：开放标签、结束：闭合标签
- 一个 HTML 元素包含了开始标签与结束标签，如这是一个HTML元素：
<p>这是一个段落。</p>
- Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）可以读取HTML文件，并将根据其标签，将HTML页面展现给用户。
一个完整的页面：
<!DOCTYPE> 声明
doctype 声明是不区分大小写的，用来告知 Web 浏览器页面使用了哪种 HTML 版本，这个一定要写！（为了防止页面渲染出错。
html5的声明为：
<!DOCTYPE html>
中文编码
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候需要在头部将字符声明为 UTF-8。 <meta charset="utf-8">
有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。
2.HTML基础
- HTML元素的内容写在开始标签与结束标签之间
- 大多数 HTML 元素可拥有属性（写在开始标签内部，以名称/值对的形式出现，值加引号，比如：name=“value”。）
- 虽然html标签和属性值都对大小写不敏感，但建议使用小写标签和属性（值）
- 虽然
（换行标签，没有内容的空元素）目前有效，但使用
闭合一下是更长远的保障
①标签
HTML标签参考手册：https://www.runoob.com/tags/html-reference.html
常用的标签：
头部元素
标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
<base href="http://www.baidu.com/images/" target="_blank">
标签定义了文档与外部资源之间的关系，常用于链接到样式表:
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style type="text/css">
body {
background-color:yellow;
}
p {
color:blue
}
</style>
标题
通过
-
标签来定义的，1最大，6最小；浏览器会自动地在标题的前后添加空行，搜索引擎使用标题为网页的结构和内容编制索引。
段落
<p>这是一个段落</p>
注释
<!-- 这是一个注释 -->
水平线
标签在 HTML 页面中创建水平线。 #### 超链接 ```html 百度 ``` 使用 target 属性可以定义被链接的文档在何处显示（例如：target="_blank"，在新窗口打开）。 #### 图像 标签也是空标签 ```html
``` alt 属性用来为图像定义一串预备的可替换的文本，在浏览器无法载入图像时，替换文本属性告诉读者失去的信息。。 
文本格式化
详情参考：https://www.runoob.com/html/html-formatting.html
②属性
HTML标准属性参考手册：https://www.runoob.com/tags/ref-standardattributes.html
一些常用的属性如下：
3.HTML_CSS
CSS 可以通过以下方式添加到HTML中:
内联样式
- 在HTML元素中使用"style" 属性
<p style="color:blue;margin-left:20px;">这是一个段落。</p>
style属性中可以用的键有很多，例如：background-color:yellow（背景颜色）；font-family（字体）；color（颜色）；和font-size（字体大小）； text-align（文字对齐）
内部样式表
- 在HTML文档头部 区域使用
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
外部引用
- 当同一个样式需要被应用到很多页面时，可以在头部引用外部css文件（样式表）。这样就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
4.HTML应用
布局
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。例如: <h1>, <p>, <ul>, <table>
HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器，如果与 CSS 一同使用，可以用于对大的内容块设置样式属性。
内联元素在显示时通常不会以新行开始。例如： <b>, <td>, <a>, <img>
HTML <span> 元素是内联元素，可用作文本的容器，当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
表单
可以自行选定文本域、单选框、复选框、提交按钮等等
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
框架
在一个页面中展示另一个页面
<iframe src="URL"></iframe>
脚本
<script> 标签用于定义客户端脚本，比如 JavaScript。其中既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
最常用于图片操作、表单验证以及内容动态更新。
5.资源总结
颜色
html颜色：https://www.runoob.com/html/html-colors.html
颜色名：https://www.runoob.com/html/html-colornames.html
颜色值：https://www.runoob.com/html/html-colorvalues.html
HTML速查列表
https://www.runoob.com/html/html-quicklist.html
标签简写及全称
https://www.runoob.com/html/html-tag-name.html
二、CSS：层叠样式表 (Cascading Style Sheets)
1.语法
CSS 规则
构成：HTML元素，以及针对此元素的一条或多条声明：
- 声明由一个属性和一个值组成，属性和值被冒号“：”分开
- 每条声明由分号“；”结束
- 声明总体以大括号 {} 括起来:
为了增强可读性，可以每行只描述一个属性:
p
{
color:red;
text-align:center;
}
CSS 注释
/*这是一条注释*/
2.class用法
3.其他属性值可以用到的时候再百度~
三、JS
1.简介
JS是一种轻量级的脚本语言，脚本语言又被称为动态语言，是一种编程语言，通常以文本（如ASCII）保存，只在被调用时进行解释或编译。JS可以对事件进行反应，写入HTML输出流，甚至改变HTML的内容。
知识点：JavaScript 是脚本语言，浏览器逐行地读取执行脚本代码。而传统编程语言（c、python、java）会在执行前对所有代码进行编译。
2.用法
script标签可以放在或中，不限数量，不限位置，也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部脚本不能包含
3.输出
JavaScript 没有任何打印或者输出的函数，但可以通过不同的方式来输出数据：
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。（使用 document.getElementById(id) 方法从 JavaScript 访问某个 HTML 元素）
- 使用 console.log() 写入到浏览器的控制台。
4.语法
数据类型
在 JavaScript 中有 6 种不同的数据类型：
- string：字符串，可以使用单引号或双引号
- number：数字，可以是整数（10）或者是小数（3.14），或者是科学计数(123e5)。
- boolean
- object
- function
- symbol
3 种对象类型：
- Object
- Date
- Array
2 个不包含任何值的数据类型：
- null
- undefined
数组（Array）
定义数组的三种方法：
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
或
var cars=new Array("Saab","Volvo","BMW");
或
var cars=["Saab","Volvo","BMW"];
对象（Object）
{firstName:“John”, lastName:“Doe”, age:50,eyeColor:“blue”}
对象由花括号分隔。在括号内部，对象的属性用（名称：值）来定义，属性由逗号分隔。该定义方法类似python中的字典：
var person={firstname:"John", lastname:"Doe", id:5566};
上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。
注：空格和折行无关紧要。声明可横跨多行：
var person={
firstname : "John",
lastname : "Doe",
id : 5566
};
对象属性有两种寻址方式：
name=person.lastname;
name=person["lastname"];
对象的方法定义了一个函数，并作为对象的属性存储，可以使用以下语法创建对象方法：
methodName : function() {
// 代码
}
函数（Function）
定义一个函数：
function myFunction(a, b) {
return a * b;
}
变量（一个名称
使用关键字 var 来定义变量，变量名称对大小写敏感：
var x, length;
x = 5;
length = 6;
可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：
var lastname="Doe", age=30, job="carpenter";
声明也可横跨多行：
var lastname="Doe",
age=30,
job="carpenter";
一条语句中声明的多个变量不可以同时赋同一个值:
var x,y,z=1;
x,y 为 undefined（变量不含值，仅声明）， z 为 1。
使用关键词 “new” 可以声明一个变量的类型：
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
语句
- 语句用“；”分隔
- 注释为"//"
- JavaScript 会忽略多余的空格,可以向脚本添加空格，来提高其可读性
- 可以在文本字符串中使用反斜杠对代码行进行换行
5.HTML中的window对象和document对象（存疑）
Window — 代表浏览器中一个打开的窗口，在 HTML 中, 全局变量是 window 对象，所以window 对象可以调用函数内的局部变量
document对象 — 代表整个HTML 文档,可用来访问页面中的所有元素
注：由于 document.all 方法存在支持程度问题，获取元素还是推荐用 W3C DOM 规范中提供的 document.getElementById、document.getElementsByTagName 等标准方法。
6.事件
HTML 事件是发生在 HTML 元素上的事情，当这些事情发生，就可以触发提前设置好的JavaScript语句。
常见的HTML事件有：
任何一个HTML元素可以通过其id来获取，形成在JS中的一个对象，语句本身是对象“this”。比如：
在以下实例中，按钮元素中添加了 onclick 属性，当点击按钮时，会触发双引号内的JS语句，获取id为‘demo’的html元素，向其中写入当前时间（由data函数获取）；
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
如果想要更改自身，无需获取元素，this即可代指：
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
