目录
前言
HTML
注释标签
标题标签
段落标签
换行标签
加粗
倾斜
删除线
下划线
图片标签
超链接
表格标签
列表标签
表单标签
from标签：进行前后端交互，功能是构造一个HTTP请求
input标签
多行编辑框
块级元素
行内元素
案例
CSS
css的引入方式
内部样式
内联样式
外部样式
css选择器
标签选择器
类选择器
id选择器
通配符选择器
复合选择器
后代选择器
子选择器
伪类选择器
常见属性
字体
文本颜色
对齐
文本装饰
文本缩进
行高
背景
圆角矩形
元素的显示模式
盒子模型
弹性布局
JS
输入输出
变量的使用
基本数据类型
number：数字，不区分整数和小数
boolean：true真，false假
string：字符串类型
undefined：只有唯一的值undefined，表示未定义的值
null：只有唯一的值null，表示空值
数组
数组的使用
数组新增/删除元素
函数（方法）
创建函数/函数声明/函数定义
函数的调用
函数表达式
js对象
WebApi-DOM
获取元素
事件
操作元素
案例
前言
项目的制作，离不开前端页面的设计，本篇博客我们主要学习一些前端知识！
HTML
描述页面的结构
html的最顶层标签，就是html，需要有一个head和body，head放一些属性信息，body放页面显示的内容
1、html是由一些标签构成的
2、每个标签都有开始标签和结束标签，也有部分标签，只有开始标签，没有结束标签
3、标签之间可以嵌套
注释标签
<!-- 这是注释 -->
标题标签
h1 h2 h3 h4 h5 h6 数字越小，字体越大越粗
段落标签
<p></p> 段落标签之间会有换行，并且有明显的段落间距
换行标签
<br>是一个单标签
加粗<strong></strong> <b></b>
倾斜<em></em> <i></i>
删除线<del></del> <s></s>
下划线<ins></ins> <u></u>
图片标签
img 单标签
img必须要带有一个src属性，通过这个属性来指定你要显示的图片的路径，这个路径可以写绝对路径，也可以是相对路径（基准目录就是当前html所在的目录）
超链接
<a href=" "></a> 通过链接可以找到另外一个资源
表格标签
table：表示整个表格
tr：表示表格的一行
td：表示一个单元格
th：表示表头单元格，会居中加粗
thead：表格的头部区域（注意要和th区分，范围是比th要大）
tbody：表格的主体区域
列表标签
有序列表 ol
无序列表 ul
列表项 li
表单标签
from标签：进行前后端交互，功能是构造一个HTTP请求
input标签
文本框
<input type="text">
密码框
<input type="password">
单选框
<input type="radio" name="gender" id="male"> <label for="male">男</label>
<input type="radio" name="gender" id="famale"> <label for="famale">女</label>
单选框之间必须具备相同的name属性，才能实现多选一效果
复选框
<input type="checkbox" name="action">吃饭
<input type="checkbox" name="action" checked="checked">睡觉
<input type="checkbox" name="action">打游戏 -->
普通按钮
<input type="button" value="EXO" οnclick="alert('hello,baekhyun wife')">
提交按钮
<input type="submit" value="提交按钮">
文件选择框
<input type="file">
select下拉菜单
<select>
<option selected="selected">边伯贤</option>
<option>都暻秀</option>
<option>朴灿烈</option>
<option>吴世勋</option>
</select>
多行编辑框
<textarea cols="30" rows="10"></textarea>
自己实现滚动条
块级元素
<div> 默认是独占一行的块级元素
行内元素
<span> 默认是不独占一行的行内元素
案例
展示简历信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>我的简历</h1>
<h2>基本信息</h2>
<img src="./logo.png" alt="" width="400px" height="250px">
<p>姓名:抽抽</p>
<p>求职意向:测试开发工程师</p>
<p>电话:15114813882</p>
<p>邮箱:1975688561@qq.com</p>
<p><a href="">我的博客</a></p>
<p><a href="">我的github</a></p>
<h2>教育背景</h2>
<ol>
<li>xxx 小学</li>
<li>xxx 初中</li>
<li>xxx 高中</li>
<li>xxx 大学</li>
</ol>
<h2>专业技能</h2>
<ul>
<li>熟练掌握Java的基础语法,熟悉面向对象程序设计的基本思想</li></li>
<li>熟悉常见数据结构，比如顺序表，链表，二叉树，栈，队列，哈希表</li>
<li>熟悉 MysQL数据库,能够使用SQL完成基本的增删改查</li>
<li>熟悉多线程编程，理解线程安全的含义，并且能够写出多线程安全的代码</li>
<li>熟悉网络编程和网络原理,理解Socket api 的使用，熟悉 UDP,TCP,IP等常见协议的原理</li>
</ul>
<h2>我的项目</h2>
<ol>
<li>
<h4>留言墙</h4>
<p>开发时间:xxx</p>
<div>功能介绍</div>
<ul>
<li>支持留言发布</li>
<li>支持匿名留言</li>
</ul>
</li>
<li>
<h4>学习小助手</h4>
<p>开发时间:xxx</p>
<div>功能介绍</div>
<ul>
<li>支持错题本功能</li>
<li>支持知识回顾功能</li>
</ul>
</li>
</ol>
<h2>个人评价</h2>
<div>
学习成绩优异,多次获得奖学金
</div>
</body>
</html>CSS
描述页面的样式
css可以嵌入到html页面中编写，就需要有一个style <style></style>
css具体设置的属性键值对，若干个属性都在一个{ }里，属性之间用；来分割，键和值之间使用：来分割
css的引入方式
内部样式
<style>
div{
color: brown;
text-indent: 2em;
background-color: aqua;
}
</style>内联样式
使用style属性（每个标签都可以用style属性，里边可以直接写css）
外部样式
把css写到一个单独的.css文件中，通过link标签引入到html里面
<link rel="stylesheet" href="">
css选择器
描述了你要选中页面中的哪个/哪些元素，{ }的样式就是针对这些元素生效的
标签选择器
写个标签名字，标签名就表示针对当前页面中所有的指定标签，都要被选中
类选择器
可以让样式差异化效果
在html中使用class属性，引用对应的css类名，从而使对应的样式针对指定元素生效
<style>
.one{
color:red;
font-size:100px;
}
</style>
<ul class="one">
<li>
<div>咬人猫</div>
</li>
<li>咬人猫</li>
<li>咬人猫</li>
</ul>id选择器
每个元素都有一个id属性，值在页面是唯一的，使用id选择器来选中到对应的元素
#开头表示是id选择器
#the-id{
color: aqua;
font-size: 20px;
}通配符选择器
*{
}
选中页面中的所有元素，通常用于干掉浏览器的默认样式
复合选择器
后代选择器
元素1 元素2{ }
子选择器
和后代选择器类似，只是选择了子标签
ul>li{
color: aqua;
font-size: 20px;
}并集选择器
div，p{
color: aqua;
font-size: 20px;
}伪类选择器
选择元素的不同状态
：hover 鼠标放上去
：active 鼠标按下去
常见属性
字体
font-family设置字体
font-weight设置字体的粗细，值是100-900整数，数字越大字体越粗
文本颜色
1、直接写单词
2、写成rgb/rgba形式
3、写成#十六进制数字
对齐
text-align
文本装饰
text-decoration给文字加上下划线（underline），上划线（overline），删除线（line-through）
文本缩进
text-indent 能够控制一段话的首行，自由缩进（2em就是两个字）
行高
line-height=文字大小+行间距
行高=顶线到顶线的距离=底线到底线的距离=中线到中线的距离=基线到基线的距离
背景
背景颜色background-col
背景图片background-image，默认是平铺的
background-repeat 控制背景图的平铺
background-position 设置背景图的位置
background-size 设置背景图片的大小
圆角矩形
border-radius
元素的显示模式
使用display属性针对行内/块级元素相互转换
盒子模型
内边距-padding
边框-border
外边距-margin
弹性布局
用来描述元素之间的关系（相对位置关系）
display：flex
justify-content 设置水平方向的排列方式
align-items 设置垂直方向的排列方式
JS
描述页面的动态交互
js有多种方式与html结合执行：
1、内嵌式，把js代码写到script标签中
2、内联式，把js代码放到标签的特殊属性中
3、外部式，把js代码写到单独的.js文件中，在html中引入这个js文件，使用script标签引入
输入输出
输入：prompt 弹出一个输入框
输出：alert 弹出一个警示对话框，输出结果
输出：console.log 在控制台打印一个日志
变量的使用
创建变量（变量定义/变量声明/变量初始化）
let a=10;
基本数据类型
number：数字，不区分整数和小数
boolean：true真，false假
string：字符串类型
1、求字符串长度
console.log（name.length）
2、字符串的拼接
使用+来进行拼接
3、字符串比较
比较两个字符串内容是否相同，直接使用==
undefined：只有唯一的值undefined，表示未定义的值
访问某个变量。没有被定义
null：只有唯一的值null，表示空值
访问的变量值是存在的，只不过变量的值，是空值
数组
js的数组长度是可以动态变化的，而且允许里边存在不同类型的元素
数组的使用
访问数组元素时，通过取下标的方式来进行操作，下表从0开始进行计数
数组新增/删除元素
使用push方法进行尾插，使用pop方法进行尾删
splice既可以进行中间位置的插入，也可以进行中间位置的删除，还可以进行元素的替换
函数（方法）
创建函数/函数声明/函数定义
创建函数/函数声明/函数定义
function 函数名（形参列表）{
函数体
return 返回值；
}
函数的调用
函数名（实参列表） //不考虑返回值
返回值=函数名（实参列表） //考虑返回值
同一个函数允许传不同的类型
函数表达式
let add=function(){
let ret=0;
for(let i=0;i<arguments.length;i++){
ret+=arguments[i];
}
return ret;
}先定义一个变量，给变量赋值，赋的值是一个function，add的类型也就是函数
js对象
js中的对象，是使用{ }来表示的，对象里可以有属性，也可以有方法
let idol={
name:'边伯贤',
age:30,
gender:'male',
sing: function(){
console.log('candy');
},
dance: function(){
console.log('帅气逼人');
}
}
console.log(idol.name)
idol.sing();
idol.dance();js中没有类的概念，所以针对多个对象问题，需要创建一个构造函数来解决
function Student(name,age,gender,singMsg,danceMsg){
this.name=name;
this.age=age;
this.gender=gender;
this.sing=function(){
console.log(singMsg);
};
this.dance=function(){
console.log(danceMsg);
};
}
let student1=new Student('边伯贤',30,'male','candy','啵啵虎');
let student2=new Student('都暻秀',29,'male','呐喊','抽抽嘟');
console.log(student1);
console.log(student2);WebApi-DOM
就是把html页面上的每个标签，都对应成js中的一个对象，通过这个对象就能获取/修改标签的内容和属性
获取元素
let div=document.querySelector('div');
获取多个元素
let div=document.querySelectorAll('div');
事件
三个核心要素：
1、事件源：事件是从哪个元素发出来的
2、事件类型：点击，移动，按下键盘，调整窗口
3、事件处理程序：通过哪个函数/代码来进行操作
操作元素
获取/修改元素的内容
innerHTML
修改元素时，不仅能够赋值文本，还可以赋值一个html片段
获取/修改元素的属性
修改的就是开始标签里面的键值对
针对表单元素，通过input.value来获取到输入框里面的值
获取/ 修改样式属性
行内样式：通过style属性，嵌入到html里面的样式，通过css class指定的样式
新增节点
1、先创建出一个元素；2、把新元素加入到dom树上
childDiv=document.createElement('div');
childDiv.innerHTML='44';
div.appendChild(childDiv);删除节点
removeChild
案例
显示密码，通过修改type属性
let input=document.querySelector('input');
let button=document.querySelector('button');
button.onclick=function(){
if(input.type=='password'){
input.type='text';
button.innerHTML='隐藏密码';
}else if(input.type=='text'){
input.type='password';
button.innerHTML='显示密码';
}else{
alert('type错误');
}
}点击计数
let input=document.querySelector('input');
let addBtn=document.querySelector('#add');
let minusBtn=document.querySelector('#minus');
addBtn.onclick=function(){
let oldValue=parseInt(input.value);
oldValue+=1;
input.value=oldValue;
}
minusBtn.onclick=function(){
let oldValue=input.value;
oldValue-=1;
input.value=oldValue;
}猜数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猜数字</title>
</head>
<body>
<h3>请输入要猜的数字:</h3>
<input type="text">
<div>
已经猜的次数: <span id="guessCount">0</span>
</div>
<div>
结果: <span id="result"></span>
</div>
<button>猜</button>
<script>
//0.获取到需要的元素
let input=document.querySelector('input');
let button=document.querySelector('button');
let guessCount=document.querySelector('#guessCount');
let result=document.querySelector('#result');
//1.在页面加载的时候,要生成1-100之间随机的整数
let toGuess=parseInt(Math.random()*100)+1;
console.log(toGuess)
//2.给猜这个按钮加个点击事件
button.onclick=function(){
//获取到输入框里的值
let value=parseInt(input.value);
//和当前生成的数字进行对比
if(toGuess>value){
result.innerHTML='低了';
}else if(toGuess==value){
result.innerHTML='猜对了';
}else{
result.innerHTML='高了';
}
//没点一次提交,猜的次数+1
let guessCountValue=parseInt(guessCount.innerHTML);
guessCount.innerHTML=guessCountValue+1;
}
</script>
</body>
</html>