WEB实验笔记

总结

PPT1

段落位置在中间（已弃用，报红

bold加粗字 italic斜体字 计算机源代码code 小字体small

设置文字的大小和颜色（弃用

x > y (& gt great than

x < y (& lt less than

img src="绝对路径/相对路径" alt="火图像"为图像设置替换文本

PPT2

h1重要，一般给logo使用

链接标签使用了 href 属性，target self/blank。 href="#"为空链接

HTML常用标签

div标签

span标签

---

水平线hr/ horizon
强制换行br/
bold加粗字 strong强调加粗
italic斜体字 em-phasize斜体
s-trike删除线 del删除线
u-nderline下划线 ins下划线

HTML常用标签2

相对（当前html文件的）路径 ./表示当前路径 ../上一级文件夹 ../../上两级文件夹

绝对路径

无需列表ul
• 默认列表项disc
• 列表项li type="circle"
• 列表项type="square"

有序列表ol
1. 列表项li 默认1
2. 列表项type="a"
3. 列表项type="A"
4. 列表项type="I"

自定义列表dl

dt

dd

dt

dd-define discription

dd

表格标签table 此为标题caption

表头th table head	用th代替了td colspan="2"
第一个tr(tr内只能包含td)单元格内文字td 可以容纳所有元素	第一个tr内的第二个td	跨行合并rowspan="2"
跨列合并colspan="2"
& nbsp空格

border默认0无边框；width表格宽度；height表格高度；align水平对齐方式；bgcolor="#FDEFE9";

表单标签form
name="123"
type="password" name="password"
radio通过同一个name值定义同一个组
type="radio"单选 1 2
type="checkbox"多选 1 2 3

图像按钮input type="image" src="file:///D:/Ps/fire.jpg" width="50" height="50"
input type="file"
文本123123213123123213123域: 文本域标签 textarea name="文本域标签" id="" cols="30" rows="10"
下拉菜单 option选择1 选择2 被选择selected="select"

form action="url地址" method="提交方式get/post" name="表单名称">表单控件

CSS基础

引入：行内样式表；内联样式；外联样式

这是行内样式 p style="color: #340604;"

这是内联样式
h2{
background-color: aqua;
color: #340604;
}

这是外联样式

link rel="stylesheet" href="./testCss.css"

div class="link1"

.link1{
color: brown;
}

PPT3

1. 标签选择器
2. id选择器
3. 类选择器
4. 多类名选择器
5. id选择器和类选择器的区别
6. 通配符选择器
7. 伪类选择器

标签选择器

h2{
background-color: aqua;
color: #340604;
}

id选择器 id="id选择器"

#id选择器{
color: #bb6a1e;
}

类选择器 class="类选择器"

.类选择器{
color: #20d232;
}

多类名选择器

一元素同时继承多个类

class="font20 red fontWeight"

class="font20"

class="font14 fontWeight"

class="font14"

.font20{
font-size: 20px;
}
.font14{
font-size: 14px;
}
.red{
color: red;
}
.fontWeight{
font-weight: bold;
}

通配符选择器

全选所有元素
*{
margin: 0;
padding: 0;
}

伪类选择器

链接伪类选择器——对网址操作,作用于所有链接

bilibili

按照 lvha 的顺序，link;visited;hover;active

目标伪类选择器——选当前活动目标元素

目标伪类选择器

目标伪类选择器

结构伪类选择器——选择第几个元素改变样式

父元素第一个子元素

父元素第二个子元素

父元素第三个子元素

父元素第四个子元素

p:first-child{

color: #ff0000;

}

p:last-child{

color: #20d232;

}

p:nth-child(3){

color: rgb(26, 114, 190);

}

p:nth-last-child(3) 倒数第三个

否定伪类选择器

class="abc"

id="abc"

除了class="abc"，剩下所有都改成style里面的

p:not(.abc){
color: rgb(79, 62, 62);
}

CSS复合选择器

1. 交集选择器
2. 并集选择器
3. 后代选择器
4. 子元素选择器
5. 兄弟选择器
6. 属性选择器
7. 伪元素选择器

交集选择器

挨着写

class="red1"

id="pink"

class="red1" id="pink"

p.red1{ color: #ff0000; }
p#pink{ color: pink; }
.red1#pink{ color: blue; }

并集选择器

相当于类写到一起

id="green"

class="font20"

后代选择器

芝士红色儿子

这是孙子

div.父亲 p{ color: #ff0000; }

子元素选择器

芝士红色儿子

这是孙子

div.父亲>p{ color: #ff0000; }

兄弟选择器

div p 兄弟1 p div id="兄弟"

p 兄弟4

div p兄弟5

p 兄弟6

#兄弟+p{ background-color: #a5fa93; }

+改成~后,兄弟4,6都会变绿

属性选择器

可以被类替代

p[shu]{ background-color: #bb6a1e; }

p[shu=first]{ background-color: #1ebb5a; }

p[shu=second]{ background-color: #bb1eb8; }

伪元素选择器

第一个单词或字 p id="第一个字"

p#第一个字::first-letter{ font-size: 20px; color: red; }

p#第一个字::before{ content: "第一个+"; }

PPT4

块级元素：h1、p、div、ul、ol、li

行内元素：a、b、i、s、u、span

行内块元素：image、input

背景图片background-image

div#盒子{
width: 300px;
height: 200px;
border: 3px solid darkblue; dashed虚线 dotted圆点
margin: 0 auto;
}

border圆角和padding三属性都是右上/左下

清除内外边距
padding：0
margin:0

width>padding>margin

Float

上面的元素

浮动的元素上面的不会受影响，下面的将会围绕它

下面的元素1111111111111
11111111111111111111111111111

style="float: right;"

下面的元素style="clear: both;"清除两边浮动属性

彼此浮动的元素会相邻

定位

相对定位relative

定位属性 #定位{

left: 30px;
bottom: 10px;
position:relative;←要用top、bottom、left、right要加这个
border: #0a2b35 solid 3px;

}
div style="position: relative; left: 30px;"

1. static——默认值，自动定位。
2. relative——相对位置，相对于其原文档流的位置进行定位
3. absolute——绝对定位，相对于其上一个已经定位的父元素进行定位
4. fixed——固定定位，相对于浏览器窗口是固定位置

在静态定位状态下，无法通过偏移属性(top、bottom、left、right)来改变元素的位置。

绝对定位absolute

绝对于整个页面的位置
position: absolute; top: 7660px; background-color: #b2f5ac;"
子级是绝对定位，父级是相对定位

固定定位fixed

用于汉堡菜单

嵌入音频

audio src="Hello,world.flac" type="audio/flac" controls

video src="[UHA-WINGS][Eighty%20Six][23][x264%201080p][CHS].mp4" width="300" height="200" controls>

PPT5

芝士弹性盒子

PPT6

JS引入方式：行级；嵌入式；引入式

JS输出页面

input type="button" onclick="弹出按钮()" value="弹出按钮aa"

function 弹出按钮(){
alert("alert(“弹出的内容”)")
document.write("document.write(“输出到页面的内容”)");
confirm("confirm(“弹出选择框”)");
}

JS输出控制台

console.log("console.log(“打印日志”)");
console.error("console.error(“打印错误”)");
console.warn("console.warn(“打印警告”)");
console.table({ name:"名字", age:14 });

console.clear();

获取页面元素

id="被选择"
function 选择(){ document.querySelector("#被选择"); }

修改元素内容样式

被修改的值

function 修改(){

document.querySelector("#被修改").innerHTML="修改后的啊啊啊啊啊啊啊啊";

}
function 样式(){
document.querySelector("#被修改").style.color="red";
document.querySelector("#被修改").style.backgroundColor="#c4f8ba";←注意驼峰写法
}

字符串

连接用+

JS词法结构

严格区分大小写

所有数字均为浮点数

JS类
var person={
name:"123",
say:function(){
console.log("我要讲两句");
}
}

对象或数组赋值时是对引用的赋值 var b=a;

创建数组

var arr1=[1,2,3,4,5];
var arr2=new Array();
var arr3=new Array(10);
var arr4=new Array(1,2,3,4,5);
元素可以是不同类型

数组.join()——将元素换成字符串用，连接在一起

数组.toString()——将元素换成字符串用，连接在一起

数组.reverse()——元素反转

数组.concat("要连接的内容,可以是数组[1,2,3]")

数组.slice(0,2)——左闭右开,截取0到2(支持负数,从后往前数,最后是-1)

function 输出数字(){
arr1.forEach(function (value){
console.log(value);
});
}
function 修改数字(){
arr1.forEach(function (value,i,arr1){
arr1[i]+=1;
});
}

数组.map()有返回值,用法同forEach()

数组.filter()返回数组的子集

PPT8

canvas id="canvas" width="400" height="300"