HTML
meta标签:描述网站的一些信息
- 行内元素:左右都是行内元素的可以在同一行
- 块元素:独占一行
页面结构:
- header:
- footer:
- section:
- article:
- aside:
- nav:
html页面可以进行嵌套:
- iframe标签:里面放html文件
标签还能隐藏,进一步就可以进行传递默认值的操作了
能设置只读,能设置禁用
CSS
CSS引入的三种方式:
-
行内样式
<h1 style="color: red"> 我是标题 </h1>
-
内部样式
<style>
h1{
color:green;
}
</style>
- 外部样式:
<link rel = "stylesheet" href = "css/style.css">
优先级是,谁里对应的标签越近谁的优先级就越高
三种基本的选择器
选择页面中的某一类元素
- 标签选择器:对应所有的标签都会
h1{
color:green;
}
- 类选择器:标签的class属性表明对应的标签是什么类
<style>
.fatw{
color:red;
}
</style>
<p class = "fatw">
</p>
- id选择器
<style>
/*id选择器只能用在一个标签上,class可以复用,id不行*/
#fatw{
color:red;
}
</style>
<p id = "fatw">
</p>
优先级:id选择器 > 类选择器 > 标签选择器
层次选择器
html标签是一颗树的结构
- 后代选择器
body p{
color: red;
}
/*后代的意思就是,body下的所有的p标签都按这个样式*/
- 子选择器
body>p{
color:red;
}
/*body下的'一级'按这个样式*/
- 相邻兄弟选择器
<!--比如例子中就是选择的是.fatw同层级相邻的 下方 的那一个,p2,p5会变成红色-->
<style>
.fatw + p{
color: red;
}
</style>
<p class = 'fatw'>
p1
</p>
<p>p2</p>
<p>p3</p>
<p class="fatw">p4</p>
<p>p5</p>
- 通用选择器
/*选择选中选择器的相邻的下面的所有对应的标签*/
.fatw~p{
color: red;
}
伪类选择器
伪类就是不需要自己去用class定义,css内部给你提供的“伪类”
主要有以下几个分类:
比如:
a:visited{color:red;}
/*鼠标点击链接,但是不松手的时候*/
a:active {color: black;}
/*这里还涉及到了属性选择器*/
input[type="text"]:disabled {
border:1px solid #999;
background-color: #fefefe;
}
“nth”,表示的就是序数词的概念
E:fisrt-child :作为父元素的第一个子元素的元素E。与E:nth-child(1)等同
/*比如说p标签是body标签下的第一个元素,那么这个就表示选中p元素的父级它对应的第一个子元素,且该元素是p如果不是则没有选中*/
E:nth-of-type(n) :选择父元素内具有指定类型的第n个E元素
E:last-child :作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同
E:root:选择匹配元素E所在文档的根元素。在HTML文档中,根元素始终是html,此时该选择器与html类型选择器匹配的内容相同
E F:nth-child(n):选择父元素E的第n个子元素F。其中n可以是整数(1,2,3)、关键字(even,odd)、可以是公式(2n+1),而且n值起始值为1,而不是0.
E F:nth-last-child(n):选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反,但使用方法都是一样的,其中:nth-last-child(1)始终匹配最后一个元素,与last-child等同
E:nth-last-of-type(n):选择父元素内具有指定类型的倒数第n个E元素
E:only-child :选择父元素只包含一个子元素,且该子元素匹配E元素
E:only-of-type:选择父元素只包含一个同类型子元素,且该子元素匹配E元素
E:empty: 选择没有子元素的元素,而且该元素也不包含任何文本节点
逻辑差不多,看看就能懂
属性选择器:
a[class="link"]{
color:red;
}
/*a标签中class属性值为link的标签*/
a[class*="link"]{
color:red;
}
/*a标签中class属性值 含有 link的标签*/
a[class^="link"]{
color:red;
}
/*a标签中class属性值 以link开头 的标签*/
a[class$="link"]{
color:red;
}
/*a标签中class属性值 以link结尾 的标签*/
还可以使用更高级的正则表达式
美化网页
去逛B站
目前好像有一种CSS预处理器,可以通过编程的方式来生成CSS文件
比如LESS,改大量的CSS比较方便
JS
这个语言开发的时间很短,所以就。。。
定义变量
var与let之间的区别,以及作用域:
- js中的变量的声明会自动提前
function func(){
var x = '1';
alert(x + y);
var y = '12';
// 输出的是1undefine。因为y的声明会被提前
}
- js中的全局变量会自动与window进行绑定
var x = 1;
function func(){
console.log(x);
alert(window.x);
window.alert(x);
// 这两个的输出值是一样的
}
// 为了减少不同文件可能使用同一个全局变量名而引起冲突,可以在每一个文件中定义一个独特的空间名字(类似window这样的)
var Fatw = {};
Fatw.name = 'fatw';
// 像这样来定义全局变量
- const
const PI = '3.14'; // const是ES6才引入的关键字用来定义常量,之前常量的定义主要靠约定,但是没有从根本上保证常量不可更改
-
var与let之间的区别
- 全局作用域
- var定义的全局变量会绑定到window上
- let不会
- 函数作用域
- 两者没什么区别
- 块作用域
- let只能在for循环内有效
- var在包含该块中的函数中有效
- 重复声明
let a = 0; let a = 1; // 重复声明会报错 var b = 0; var b = 1; // 没啥影响
let和const声明变量与java,c语言中的变量声明相似
- 全局作用域
严格检查模式
情景:
i = 0;
// 这种情况如果前面没有定义i变量,在这里使用这种语句的话,会将i定义为一个全局变量。
严格检查模式就是用来检测这种定义方式的
'use strict'
//这东西必须要放在js代码的 第一行
运算符与数据类型
== 与 ===的区别
==是当值一样是就判断为一样
===不仅值要相同,类型也要相同
不过
判断一个数是否为NaN时只能通过isNaN来进行判断,NaN===NaN 也是false
null与undefined的区别
null表示该变量定义了但是没有赋值
undefined表示该变量未定义
定义多行字符串的符号
var station = `
fatw_PC
fatw_computer
`
通过改变数组长度改变数组大小
var array = [1,2,3,4,5]
array.length = 10
// 这样之后array就变成了[1,2,3,4,5,5 * empty]后面时5个空位
// 如果赋值比原来小,那么会被截断
js定义对象
var person {
name: "fatw",
age: 18
time: function(){
console.log(new Data().getFullYear)
}
}
// 这里直接定义的是对象,不是类
// js中的this表示调用它的对象,如果是在对象中,this就是当前对象。在外面就是window
js中的apply方法,改变方法中的this指向的对象
var person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person1 = {
firstName: "Bill",
lastName: "Gates",
}
person.fullName.apply(person1); // 将返回 "Bill Gates"
js定义类:
// 在ES6之前,没有提供class关键字,继承是这样实现的
var Student{
name:"fatw";
age:16;
run:function(){
alert('running...');
}
}
// 继承
var fatw{
name:"ltr";
}
fatw.__proto__ = Student;// proto是原型的含义,也就是表示fatw的父类是Student
// ES6之后,有了class关键字,是这样表示继承的
class Student{
constructor(name){
this.name = name;
}
run(){
alert('running...');
}
}
class Fatw extends Student{
constructor(name, grade){
super(name);
this.grade = grade;
}
hello(){
alert('hahahahha');
}
}
// 通过class来创建对象
var fatw = new Fatw('ltr', 100);
fatw.hello();
fatw.run();
// 在本质上使用这种方式来表示继承,也是通过修改__proto__值来进行的
// 值得注意的一点是,在js中存在一个叫原型链的东西,就是所有的类最后都会指向object,然后object也指向object,就转圈了
js中的函数
定义函数
var abs = function(x){
if(x>=0){
return x;
}else{
return -x;
}
}
//这里的abs是一个函数,而不是后面接着的函数体的返回值
// 最好使用这种方式定义函数
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
函数的参数
js中的函数参数数量不管是否等于函数定义中参数的个数,都不会报错。但是可以手动进行判断然后抛出异常。
为了能够较好的辨别传递的参数是否达到要求,可以使用js免费赠送的关键字arguments
arguments
代表传入的所有的参数值,是一个数组
不过arguments获取的是所有的参数
function func(x){
return -x;
}
// 使用arguments是包含所有参数的数组
function func1(a, b, ...rest){
return -a;
}
// 使用...rest定义,获得的是除了a,b之外的所有参数
BOM对象
BOM:Browser Object Model , 浏览器对象模型
- window 代表浏览器窗口,也是一个全局对象
window.alert();
window.innerwidth;// 获取浏览器的内部高度,(就是有时候会打开F12页面占用一部分)
- navigator 封装了浏览器信息,不建议使用,因为有些值可以被人为的修改
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:94.0) Gecko/20100101 Firefox/94.0"
// 比如这个Windows就可以改,然后如果用这个属性来进行判断的话,就会比较容易绕过
-
screen 这个获取的是电脑的属性
-
location 代表当前的URL信息
location.assign('https://xxx.com')
// 设置一个新的地址
- document 代表当前页面,document.cookie可以获取当前的cookie
- history 代表浏览器的历史记录
DOM 文档对象模型
html页面就是一个树
比如:
var body = document.getElementByTagName('body');
var children = body.children;
jQuery
就是一个封装了很多js代码的库
简单使用
<srcipt src="https://cdn.bootcss.com.jquery/3.4.1/core.js"></script>
<body>
<a herf="" id="test-jquery">click me</a>
<script>
$('#test-jquery').click(function(){
alert('hello world');
})
</script>
</body>
<!--jQuery使用通用结构:$(css选择器).action() -->
<!-- 选中一个标签,然后-->
事件
就是鼠标键盘这些事件
比如:
$(function(){
$('#divMove').mousemove(function(e){
// 获取鼠标移动的事件
$('#mouseMoveValue').text('x: '+ e.pageX)
})
});
操作DOM
上面的例子中有操作DOM结点的代码
操作css
$('#him').css("color", "red")
元素的消失与隐藏
$('#him').show()
$('#him').hide()
前端小结:
- 巩固js:看游戏代码
- 巩固html,css:扒网站