目录
undefined：只有唯一的值undefined，表示未定义的值
前言
项目的制作，离不开前端页面的设计，本篇博客我们主要学习一些前端知识！
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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
