基本前端知识：
var div1 = document.getElementById(‘div1’).value; //获取值
var user = document.getElementById(‘div1’).value=‘abcdefg’; //赋值
//添加属性
function addElementDiv(obj) {
var parent = document.getElementById(obj);
//添加div
var div = document.createElement('div');
//设置div属性，如id
div.setAttribute("id","newDiv");
div.innerHTML="js动态添加div";
parent.appendChild(div);
}
//添加内容
function addElementImg(obj) {
var ul = document.getElementById(obj);
//添加li
var li = document.getElmentById("li");
//添加img
var img = document.getElmentById("img");
//设置img属性，如id
img.setAttribute("id","newImg");
//设置img图片地址
img.src = "/images/prod.img";
li.appendChild(img);
ul.appendChild(li);
}
//修改属性值
var box = document.getElementById("div1");
box.style.border="1px red solid";
box.style["border"]="1px red solid";
//修改内容
var content = document.getElementById("div1");
content.innerHTML="<h1>标题</h1>"
//innerHTML和innerText可以都修改/获取（HTML内容和文本内容）
//获取元素等
//通过id获取元素：document.getElementById("");
//通过class名获取元素：document.getElementsByClassName("");
//通过标签名获取元素：document.getElementsByTagName("");
//通过name属性获取元素，一般用于input：document.getElementsByName("");
//通过CSS选择器获取一个：document.querySelector("");
//通过CSS选择器获取所有：document.querySelectorAll("");
</script>
<style type="text/css">
a{font-size:16px} /*设置字体大小*/
a:link{color:blue;text-decoration:none;} /*链接未访问：蓝色，无下划线
a:active{color:red;} /*链接激活：红色
a:visited{color:purple;text-decoration:none;} /*链接已访问：紫色，无下划线
a:hover{color:red;text-decoration:underline;} /*链接鼠标覆盖时：红色 下划线
</style>
<style>
getElementById() /*显然是用来获取ID来获取标签
getElementTagName() /*通过标签类型来获取节点
getElementByClassName /*类名获取
querySelector() //内部放的是可以跟css选择器一样的格式但选取的是静态的
//但选取的那一刻之后更改了源头这个还是不会变
</style>
<!--前端快速开发的插件有heyui\Layui\jeecg\element等等-->
<!--
1.Bootstrap中文网
2.Layui
3.ElementUI
4.Mint UI
5.vue.js
-->
html文本标签：
to
标题标签，越来越小
段落标签
换行
水平线 字体加粗 斜体 字体标签 属性： color： width： size： align: 对其方式 center：居中 left: 左对齐 right：右对齐 face：字体  图片标签：
列表标签：
有序列表：
ol: 有序
li: 代表列表的每一个项
无序列表：
ul: 无序
li： 代表列表的每一个项
链接标签：
标签名
标签名
属性：href:指定资源路径
target:
1._self:在当前页面打开资源（默认值）
2._blank:在空白页面打开资源
块标签：
李
祥 //李祥两个字在一行显示
span:没有任何样式：文本信息在一行展示，行内标签
表格标签：
table:定义表格
tr: 定义行
td: 定义单元格
th: 定义表头单元格
语义化标签：html5为了提高可读性，提供的标签
1.
2.
idea操作: ctrl + F
上面一个框填写原始信息，下面一个框填写修改后的信息，点击replace All 即可修改全部内容
表单标签：
:用于定义表单的，可以定义一个范围，代表用户数据采集的一个范围
属性：
action：指定提交数据的URL，
method：指定提交方式，一共有7种，常用的两种，get和post
表单中的数据要想被提交，表单项必须指定其Name属性
通过type属性，改变元素展示的样式，有以下属性：
text：文本输入框
password：密码输入框
radio：单选框
注意：1.要想单选框，多个选项的name属性必须一致，
2.要想单选框数据被提交，必须指定其value值
3.checkbox属性：可以指定默认值
复选框：checkbox
1.要想单选框，多个选项的name属性必须一致，
2.要想单选框数据被提交，必须指定其value值
3.checkbox属性：可以指定默认值
label:指定输入项的文字描述信息
注意：属性for属性一般会和input的id属性值对应
file：文件选择
hidden：隐藏域用于提交一些信息
按钮：
submit：表单提交按钮，可以提交表单
button: 普通按钮
image：图片提交按钮
src：属性指定图片路径
color：取色器
date: 日期选择
datetime-local:日期的选择，精确到分钟
email：自动校验是否是邮箱格式
属性：placeholder=“请输入用户名” 填充输入框
<form action="#" method="post">
<table border="1">
<tr>
<td><label for="username">用户名</label></td>
<td><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td><label for="password">密码</label></td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td><label for="name">姓名</label></td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<td><label for="phone">手机号</label></td>
<td><input type="text" name="phone" id="phone"></td>
</tr>
<tr>
<td><label>性别</label></td>
<td><input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
</td>
</tr>
<tr>
<td><label>出生日期</label></td>
<td><input type="date" name="birthday"></td>
</tr>
<tr>
<td><label>验证码</label></td>
<td><input type="text" name="auth"><img src="img/verify_code.jpg"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="注册">
</td>
</tr>
</table>
</form>
select:下拉列表
<select name="province" id="province">
<option value="">--请选择--</option>
<option value="1">北京</option>
<option value="2">湖北</option>
<option value="3">武汉</option>
</select>
textarea：文本域
<td><label for="des">自我描述</label></td>
<td>
<textarea cols="20" rows="5" name="des" id="des"></textarea>
</td>
CSS的使用：
1.内联样式：
<div id="div1" style="color: blue">hello css</div>
2.内部样式：
<div id="div2">hello css</div>
<style>
#div2{
color: yellow;
}
</style>
3.外部样式：
<div id="div2">hello css</div>
<link rel="stylesheet" href="../css/a.css">
这种方式也可以引入：
<style>
@import "../css/a.css";
</style>
css选择器：
基础选择器：
1.id选择器
#id属性值{}
注意：id选择器>类选择器>元素选择器
2.元素选择器
标签名称{}
3.类选择器:选择具有相同class属性值的元素
.class属性值{}
2. 扩展选择器：
1. 选择所有元素：
* 语法： *{}
2. 并集选择器：
* 选择器1,选择器2{}
3. 子选择器：筛选选择器1元素下的选择器2元素
* 语法： 选择器1 选择器2{}
4. 父选择器：筛选选择器2的父元素选择器1
* 语法： 选择器1 > 选择器2{}
5. 属性选择器：选择元素名称，属性名=属性值的元素
* 语法： 元素名称[属性名="属性值"]{}
6. 伪类选择器：选择一些元素具有的状态
* 语法： 元素:状态{}
* 如： <a>
* 状态：
* link：初始化的状态
* visited：被访问过的状态
* active：正在访问状态
* hover：鼠标悬浮状态
6. 属性
1. 字体、文本
* font-size：字体大小
* color：文本颜色
* text-align：对其方式
* line-height：行高
2. 背景
* background：
3. 边框
* border：设置边框，符合属性
4. 尺寸
* width：宽度
* height：高度
5. 盒子模型：控制布局
* margin：外边距
* padding：内边距
* 默认情况下内边距会影响整个盒子的大小
* box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小
* float：浮动
* left
* right
