前端三件套
一、HTML
1）初识html
ctrl + / html 快捷注释
换行 <br/>
粗体 <strong>i love you <strong>
斜体 <em>i love you<em>
空格
大于> >
小于< <
<!-- 特殊符号的样式
& ;
-->
关于图片，视频和音频
<!--img学习
src : 图片地址（必填）
相对地址（推荐）../ 上一级的目录
alt : 图片的名字（必填）
-->
<img src = "../resources/imge/1.jpg" alt = "chen" title = "悬停文字" width = "100" height = "100">
视频和音频
<video src = "../resources/video/chen.mp4" >
<video src = "../resources/video/chen.mp4" controls> <!--加上进度条-->
<video src = "../resources/video/chen.mp4" controls autoplay> <!--自动播放-->
超链接
<!--a标签
href : 必填，表示要跳转到的那个页面
target ：表示窗口在哪里打开
_blank : 在新标签打开
_self: 在此窗口打开
-->
<a href = "www.bilibili.com" target = "_blank">点我</a>
锚链接
<!--锚链接
1. 需要一个锚标记
2. 跳转到标记
#
-->
<a href = "top" >回到顶部</a>
功能性链接
<a href="mailto:chenning_william@163.com">点击联系我</a>
<hr/> 此为分割线
qq链接（搜索qq推广）
列表
<!--有序列表-->
<ol>
<li> java</li>
<li> python</li>
<li> c/c++</li>
<li> 运维</li>
</ol>
<!--无序列表-->
<ul>
<li> java</li>
<li> python</li>
<li> c/c++</li>
<li> 运维</li>
</ul>
<!--自定义列表-->
<dl>
<dt> 学科</dt>
<dd> c/c++</dd>
<dd> java</dd>
<dt> 位置</dt>
<dd> 成都</dd>
<dd> 西安</dd>
</dl>
效果展示
<table>
<tr>
<td>1-1</td>
<td>1-2<td>
<td>1-3<td>
<td>1-4<td>
</tr>
<tr>
<td>2-1</td>
<td>2-2<td>
<td>2-3<td>
<td>2-4<td>
</tr>
<tr>
<td>3-1</td>
<td>3-2<td>
<td>3-3<td>
<td>3-4<td>
</tr>
<table>
效果展示
跨列
colspan 跨列
<table border = "1px"> <!--添加边线-->
<tr>
<td colspan = "4"> 1-1 </td> <!--跨四列-->
</tr>
<tr>
<td>2-1</td>
<td>2-2<td>
<td>2-3<td>
<td>2-4<td>
</tr>
<tr>
<td>3-1</td>
<td>3-2<td>
<td>3-3<td>
<td>3-4<td>
</tr>
<table>
rowspan 跨行
<table border = "1px"> <!--添加边线-->
<tr>
<td colspan = "4"> 1-1 </td> <!--跨四列-->
</tr>
<tr>
<!--rowspan 跨行-->
<td rowspan = "2"> 2-1 </td> <!--跨两行-->
<td>2-2<td>
<td>2-3<td>
<td>2-4<td>
</tr>
<tr>
<td>3-1</td>
<td>3-2<td>
<td>3-3<td>
</tr>
<table>
2）页面结构分析
3）内联框架
<!--iframe内联框架
src : 地址
w-h : 宽度 高度
-->
<iframe src = "" name "hello" frameborder ="0" width = "1000px" height = "800px" ><iframe>
<a href = "https://chenkong.com" target = "hello">点击跳转</a>
<!--这里是将a标签嵌入在了这个内连里面,a标签可以往内联框架里面加东西-->
4）表单
<!--表单from
action : 表单提交的位置，可以是网站，也可以是一个请求处理额地址
method : post ,get的提交方式
post: 速度较慢，但url上不会显示提交的数据，相对较安全
get: 速度较快，但url上会显示提交的数据，不太安全
-->
<form action = "chenkong.html" method = "get">
<!--文本输入框 : input type = "text"-->
<p>名字：<input type = "text" name = "username"></p>
<!--密码输入框 : input type = "password"-->
<p> 密码：<input type = "password" name = "pwd" ></p>
<p>
<input type = "submit">
<input type = "reset">
</p>
</form>
1.表单元素的格式
radio 单选器
<!--文本输入框:input type = "text"
value = "陈William牛逼" 默认初始值
maxlength = "8" 最长能写几个字符
size = "30" 文本框的长度
-->
<form action = "chenkong.html" method = "get">
<p>名字：<input type = "text" name = "username"></p>
<p> 密码：<input type = "password" name = "pwd" ></p>
<!--radio 单选器
input type = "radio"
value 单选框的值
name 表示组
-->
<p>
<input type = "radio" value = "boy" name = "sex">
<input type = "radio" value = "girl" name = "sex">
<!--这里的name属性必须要一样，表示他们是一个组的，这样就只能选一个了-->
</p>
<p>
<input type = "submit">
<input type = "reset">
</p>
</form>
展示
多选框
<input type = "checkbox" value = "sleep" name = hobby>睡觉
<input type = "checkbox" value = "code" name = hobby>敲代码
<input type = "checkbox" value = "chat" name = hobby>聊天
<input type = "checkbox" value = "game" name = hobby>游戏
<!--这也是在from表单里的-->
关于按钮
<!--
input type = "buttion" 普通的按钮
input type = "image" 图像按钮
input type = "submit" 提交按钮
input type = "reset" 重置按钮
-->
<p>
<input type = "image" src = "../resources/1.jpg">
<!--图像按钮-->
</p>
注意：上图中在后面加上check后就是默认选中，图片的是可以提交的
下拉框
<select name = "列表名称">
<option value = "选项的值">中国</option>
<option value = "选项的值">美国</option>
<option value = "选项的值" selected>瑞士</option> <!--加上selected就是下拉框的默认选项值-->
<option value = "选项的值">印度</option>
</select>
（看url）选择后就可以通过form表单传递数据
文本域
cols 列
rows 行
文件域（input必须要有name属性，不然上传不了）
简单的邮件地址和url验证验证
数字验证
滑块
<input type = "range" name = "vocie" min = "0" MAX = "100" step = "2">
搜索框
<input type = "search" name = "search">
只读标签
禁用标签
加上 checked disabled
隐藏域
设置默认值
在隐藏域中设置默认值
增强鼠标
点一下你点我试试，就可以到文本框中，增强鼠标的可用性
2.表单的初级验证
placeholder
加上后会在框中有提示信息
<input type = "text" name = "username" placeholder = "请输入用户名">
例如：
非空判断
使用户不能提交空，加上required
<input type = "text" name = "username" placeholder = "请输入用户名" required>
正则表达式的简单应用
在pattern中放入正则表达式
二、CSS
层叠样式表
1） 内联样式：
*在标签内使用style属性指定css代码*
<div style = "color :red ;">hello css</div>
2）内部样式：
在head标签内，定义style标签
<style>
div{
color:blue;
}
</style>
<div>hello css</div>
3）外部样式
-
.定义css资源文件
-
.在head标签内，定义link标签，引入外部资源文件
a.css文件:
div{
color : green;
}
<link rel = "stylesheet" href = "css/a.css">
<div>hello css</div>
或者
<style>
@import "css/a.css"; 来引入
</style>
4）css的语法
格式
选择器{
属性名：属性值；
属性名：属性值；
}
最后一个属性可以不加 ；
5）选择器
基础选择器
- id选择器：
<style>
#div{
color:blue;
}
</style>
<div id = "div1" >hello css</div>
- 元素选择器
<style>
div{
color:blue;
}
</style>
- 类选择器
.cls1{
color:blue
}
<p class = "cls1">陈宁牛逼</p>
-
扩展选择器
*选择所有元素 {}
- 并集选择器
div,p{
color:blue;
}
- 子选择器
div p{
color:blue;
}
选择div下的p标签
- 父选择器
div > p {
color:blue;
}
选择p上的div标签
- 属性选择器
input[type = "text"]{
}
- 伪类选择器
元素：状态
link:初始化状态
visited:被访问过的状态
active:正在访问的状态
hover:鼠标悬浮的状态
6）属性
字体：
font-size:字体大小
color:文本颜色
text-align:对其方式
line-height:行高
边框：
border:设置边框，复合属性
border:1px solid red;
背景：
background:url("....") no-repeat center;
尺寸：
width: ..px;
height: ..px;
边距
margin :外边距
padding:内边距
float：浮动
三、JavaScript
1)快速入门
<script src = "js1.js">
<!--可以直接在这里面写-->
</script>
<script src = "js1.js">
<!--也可以新建一个js文件然后导入-->
</script>
所有的变量直接使用var声明就行 如 var a = 1;
输出是console.log();
2)数据类型
这里就是多了NaN (not a number类型和Infinity 无限大的类型
再说一下比较运算符有点不一样
这里多了=== 表示类型一样且值也一样
须知
- NaN===NaN 这个于所有的之都不相等，包括自己
- 只能通过isNaN(NaN)来判断是不是NaN
- 还有就是老生长谈的精度问题,不要直接比较浮点数
3)数组
基本和Java类似,不详谈,不一样的就是什么类型都可以装,有点像集合
var arr = [1,2,3,"hello",null,true];
//或者
new array(1,2,3,"hello",null,true);
数组越界会undefined
同时数组还有一些方法如sort(),reverse(),concat();都是 数组名.方法名(); 来调用,就是多了一个join连接符
4)对象
声明一个对象
var person{
name:"niubi",
age:3,
tags:['js','is','niubi']
}
- 这里注意,对象是大括号,数组是中括号.而且对象的前几个属性使用逗号隔 ( , ) 开,最后一个不用符号
- 调用的话直接person.age 就行了
严格检查模式
在< script > 标签里第一句写上 'use strict’就行
这样局部变量就只能使用let声明 (局部变量推荐使用let声明)
字符串
和Java类似,不同的多了一个多行字符串的编写
var msg = `chen
shuai
niu
bi`
这个符号声明的符号就是tab键上面的那个键
字符串是不可以变的,就像是Java里的String一样
5)流程控制
for-in循环
例如
var age = [1,2,3,4,5,6,7];
for(var num in age){
console.log(num);
}
6)map和set集合
和Java没啥区别
map集合
set集合
同时遍历的方法多了个for-of循环…就是把in改成了of然后没有啥区别
7)函数来一点点
定义函数
//第一种方式
function abs(x){
if(){
...
}else{
...
}
}
//第二种方式
var abs = function(x){
if(){
...
}else{
...
}
}
//两种定义的方式是等价的
调用
abs(-10)
abs(10)
rest
类似于Java中的可变参数
ES6新特性中可以使用const定义常量
8)方法
定义一个方法
var chenshuai = {
name:chen,
age:19,
run:function(){
....//一些方法体
}
//方法要写在对象里面
}
chenshuai.name//直接点就可以进行调用
9)date对象的使用
var now = new Date();//获取date对象
now.getFullyear();//年
now.getMonth();//月
now.getDate();//日期
now.getDay();//星期几
now.getHours();//小时
now.getMinutes();//分钟
now.getSeconds();//秒
now.getTime();//时间戳
console.log(new Date(1595555665))时间戳转换为时间
10)初识Json
这里只是简单的了解一下json，后面我会出专门的json篇
简单的三点
- 对象都使用{}
- 数组都使用[]
- 所有的键值对都是用key:value
来一点代码理解
var user = {
name:"chenshuai",
age:3,
sex:'男'
}
//对象转换为json对象{"name":"chenhsuai","age":3,"sex":"男"}
var jsonUser = JSON.stringify(user);
var obj = JSON.parse('{"name":"chenhsuai","age":3,"sex":"男"}')
//注意这里如果里面是双引号,外面就要用单引号.反之亦然
关于js和Json的区别
var obj = {a:'hello',b:'hellob'};//js
var obj = {"a":"hello","b":"hellob"};//json
11)原型
相当于Java中的继承
var student = {
name:"chenhsuai",
age:19,
run:function(){
console.log("student");
}
}
var xiaoming = {
name:"xiaoming",
age:19,
}
xiaoming._proto_ = student;
//将xiaoming的原型设置为student，相当于继承，这个时候小明就可以调用student中的run方法
小明的原型是student 然后就可以使用student的方法了.在这里student也是一个对象
原型链：不深入了解
12)操作bom对象 浏览器的对象模型
window对象
代表浏览器窗口
Navigator对象
封装了浏览器的信息（大多数时候不会使用这个对象，因为会被认为的修改
所以不建议使用这些属性来判断和编写代码
）
screen对象
screen.width 获取屏幕的宽度
screen.height 获取长度
location
代表当前页面的URL信息
document
代表当前的页面
获取cookie 例如： document.cookie
history
操作
history.back() //后退
history.forward() //前进
13)操作DOM对象节点
//你先要在html中设置那个标签的id是'h1'，以下相同
var h1 = document.getElementByTagName('h1');
var p1 =
更新节点
先获取一个节点
<div id = "id1">
</div>
<script>
var di1 = document.getElementById("id1");
</script>
id1.innerText = ‘456’ 修改文本的值
id1.innerHTML = ‘< strong>123< strong>’ 向标签中添加HTML语句
操作css
id1.style.color = 'yellow';
id1.style.fronSize = '20px';
id1.style.padding = '2px';
删除节点
需要通过父节点来删除子节点
<div id = "father">
<h1> 标题</h1>
<p id = "p1">p1</p>
<p class = "p2">p2</p>
<div>
<script>
//第一种
var self = document.getElementById('p1');//获得p1这个节点
var father = p1.getElementById;//获得p1的父亲节点
father.removechild(p1);//通过父亲节点来删除儿子节点
//第二种
father.removeChild(father.child[0]);通过数组的形式来删除
father.removeChild(father.child[1]);
//需要注意的是这种方式是动态的，删除了0号，1号就变成了0号；
</script>
插入节点
- 追加
可以通过append方法来追加
实现后的效果
2. 通过js创建一个新的节点
主要的擦欧总就是
var newp = document.creatElement('p')//创建一个p标签
newp.id = 'newp';
newp.innerText = 'hello chengshuai'
更多的操作见下面的代码
插入到前面
var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
list.insert(js,ee);//将list插入到js,ee到中间
提交表单
这里主要是要记住可以在标签里加入 onclik 事件，然后在里面放函数，就会执行函数的内容
14)jquery
导入在线的 或者本地的
//在线引用
<script src = "某某在线引用网址"></script>
//本地引用
<script src = "文件的目录"></script>
//仔细一想这不是智障吗，我为什么还要拎出来写
这里最主要的就是记住一个公式 $(selector).action()
下面主要就是这个公式的具体应用
选择
前面加 ‘ # ’
使用选择器
2220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
