HTML+CSS+JS笔记

柠筱.

已于 2024-06-04 18:51:02 修改

阅读量1.2k

点赞数 32

文章标签：笔记 javascript

于 2024-01-18 19:00:14 首次发布

本文链接：https://blog.csdn.net/2301_79880794/article/details/135609495

版权

一 HTML 笔记

1.什么是HTML?

HTML 指的是超文本标记语言
HTML 不是一种编程语言，而是一种标记语言
HTML文档也叫做 web 页面

2.HTML标签

HTML 标签是由尖括号 包围的关键词，比如 <html>.
HTML 标签通常是成对出现 的，比如 <b> 和 </b>.
标签对中的第一个标签是开始标签，第二个标签是结束标签.
开始和结束标签也被称为开放标签 和 闭合标签.
HTML标签分为双标签和单标签

2.1 html —— 根标签

整个网页从<html>开始，到</html>结束

2.2 head —— 头部标签

head 是一个网页的 “头”，定义一些特殊的内容，这些内容往往都是“不可见内容".

2.2.1 head内部标签
标签	描述
<head>	定义了文档的信息
<title>	定义了文档的标题
<link>	定义了一个文档和外部资源之间的关系
<base>	定义了页面链接标签的默认链接地址
<meta>	定义了HTML文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

2.3 body标签

body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”

3.段落标签

3.1 段落与文字标

3.1 段落与文字标
标签	描述
<h1>~<h6>	标题级别
<p>	段落
<br>	换行
<hr>	水平线
*<div>*	分割(块元素)
<span>	区域(行内元素)

3.2 文本格式化标签

3.2 文本格式化标签
标签	描述
<strong>/ <b>	加粗
<i>	斜体
<u>	下划线
<s>	*删除线*

4.图片标签

img标签有两个重要属性：alt和title。
alt属性用于图片描述，这个描述文字是给捜索引擎看的。并且当图片无法显示时，页面会显示alt中的文字。
title属性也用于图片描述，不过这个描述文字是给用户看的。并且当鼠标指针移到图片上时，会显示title中的内容。

4.1 语法:

4.2 img标签常用属性
属性	说明
src	图像的文件地址
alt	图片显示不出来时的提示文字
title	鼠标移到图片上的提示文字

5.超链接标签

超链接使用a标签，

语法如下：<a href="链接地址" target="目标窗口的打开方式">

5.1 <a>标签target属性

5.1 <a>标签target属性
target属性	说明
_self	默认方式，即在当前窗口打开链接
_blank	在一个全新的空白窗口中打开链接
_top	在顶层框架中打开链接
_parent	在当前框架的上一层里打开链接

6.块状元素和行内元素

6.1块状元素特点

独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
块元素内部可以容纳其他块元素或行元素；
常见块元素有：h1~h6、p、hr、div等

6.2 行内元素特点

可以与其他行内元素位于同一行；
行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；
常见行内元素有：strong、em、span等。

7.列表

列表有2种：有序列表、无序列表。
有序列表和无序列表都比较常用，在实际应用中，最常用的是无序列表。

7.1 2 种列表

7.1 2种列表
标签	说明
ol	有序列表
ul	无序列表

7.2 有序列表

7.3 无序列表

8.表格

8.1 表格基本标签

8.1.1 表格基本标签
标签	说明
table	表
tr	行
td	列

8.2 表格基本结构

8.2.1 语法：

8.2.2 在浏览器预览效果如下：

8.3 说明

<table>和</table>标记着表格的开始和结束.
<tr>和</tr>标记着行的开始和结束，在表格中包含几组<tr></tr>就表示该表格为几行。
<td>和</td>标记着单元格的开始和结束。

8.4 合并行和合并列

合并行使用td标签的
rowspan属性，而合并列则用到td标签的colspan属性
。

8.4.1 合并行

语法：<td rowspan="跨度的行数">
8.4.1.1举例：

8.4.1.2在浏览器预览效果如下：

8.4.2 合并列

语法：<td colspan="跨度的列数">
8.4.2.1举例：

8.4.2.2在浏览器预览效果如下：

9.表单

表单标签共有4个：<input>、<textarea>、<select>和<option>。
<select>和<option>是配合使用的。

9.1 input标签表单

语法：<input type="表单类型"/>
说明：下表表单都是使用input标签，所不同的就是type属性值不同。

9.1.1 input表单type属性

9.1.1 input表单type属性
属性值	说明	示例
text	单行文本框
password	密码文本框
button	按钮
reset	重置按钮
image	图像形式的提交按钮
radio	单选按钮
checkbox	复选框
hidden	隐藏字段	无
file	文件上传
date	限制输入必须是日期类型
time	限制输入必须是时间类型
month	限制输入必须是月类型
week	限制输入必须是周类型
number	限制输入必须是数字类型	无
tel	手机号码	无
search	搜索框
color	颜色选择器
email	限制输入必须是email类型	无

9.2 textarea标签表单

语法：<textarea rows="行数" cols="列数">多行文本框内容</textarea>
9.2.1 举例：

9.3 select和option

下拉列表由<select>标签和<option>标签配合使用。

9.3.1 语法

9.3.2 示例如下:

10. 多媒体

10.1.1 插入音频、视频和flash

语法：<embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度</embed>
说明：多媒体文件地址可以是相对地址，也可以是绝对地址，width和height使用px作为单位。

11. 浮动框架iframe

浮动框架是一种较为特殊的框架。
是在浏览器窗口中嵌套的子窗口，整个页面并不一定是框架页面，但要包含一个框架窗口。
<iframe>框架可以完全由设计者定义宽度和高度，并且可以放置在一个网页的任何位置。
语法：<iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架</iframe>。
说明：src属性是iframe的必须属性，它定义浮动框架页面的源文件地址。

二 CSS 笔记

1.选择器

用于选中页面中元素(标签)的工具

1.1 ID选择器

给某个标签添加id属性，对其命名
通过**#id**获取，通常用于获取某一个元素，id名称不能相同

1.2 类选择器

给某些标签添加class属性，对其命名。
通过**.class**获取，通常用于获取一组元素。

1.3 标签选择器

直接通过标签名获取元素，获取所有对应标签。

1.4 后代选择器

*：表示所有元素
空格：得到所有元素
> :：得到第一层子元素

举例

1.5 群组选择器

使用逗号将多个选择器同时选中

1.6 CSS写在哪里

写在某个标签的style属性中

写在head标签下的style标签中

写在一个独立的css文件中

1.新建一个.css文件，在其中编写css样式

2.在页面中通过link标签导入

1.7 选择器的优先级

内嵌在style标签 >> id选择器 >> class选择器 >> 标签选择器

2.常用样式

2.1 尺寸

只有块级元素才能设置尺寸。

注意：如果要对某个行内元素设置尺寸，需要先将其转换为块级元素。

相关样式名	值	举例
widht	px/%/vw	width:100px/50%/30vw;
hright	px/%/vh	height:100px/50%/30vh;

2.2 背景background

样式名	作用	值
background-color	背景色	颜色的单词、十进制RGB、十六进制RGB
background-image	背景图	url(图片路径)
background-size	背景图片尺寸	cover覆盖、百分比。 cover会完全将区域覆盖。100%会完整显示图片。
background-position	背景图片位置	10px表示同时向下和向右移动10px
*background-repeat*	背景图片是否重复	默认重复 no-repeat不重复 repeat-x表示x轴重复 repeat-y表示y轴重复
background-attachment	背景图片固定	fixed表示将背景图片固定，不随滚动条滚动
background	背景样式简写	可以同时设置以上多个参数，如 background:#f00 url(图片地址) no-repeat center 表示图片能加载则显示图片，不能加载显示背景色，背景图不重复，居中显示

2.2.1 背景渐变

渐变色css代码自动生成https://uigradients.com

2.3 边框border

边框会"套"在元素外层，元素原本大小不变，最终所占页面区域大小为元素大小+边框宽度

样式名	作用	值
border-style	边框线条样式	solid、double、dashed、dotted
border-width	边框宽度	px
border-color	边框颜色	颜色的三种写法
border	同时设置所有边框线条、宽度和颜色	border:1px solid red
border-方向-样式	某方向的style或width或color，方向为left、right、top、bottom	border-left-color:red
border-方向	同时设置某边框线条、宽度和颜色	border-top:1px dotted blue;
border-上下方向-左右方向-radius	设置某个方向的边框为圆角。
border-radius	同时设置四个角为圆角。如果正方形，值为边长的一半，则为圆形
outline	轮廓。input文本框默认获得焦点时，会显示一个轮廓，通常设置为none去掉轮廓
border-collapse	合并相邻边框。通常用于合并表格中的td的边框。	表格{border-collapse:collapse}

2.4 字体

样式名	作用	值
*font-size*	字体大小	像素。默认16px，最小12px
font-weight	字体粗细	lighter细，bolder粗
font-family	字体字型	默认微软雅黑

2.5 文本

样式名	作用	值
color	文本颜色	颜色的三种写法
text-decoration	文本修饰	underline下划线 line-through删除线 overline上划线通常给页面中的所有a标签设置text-decoration:none去掉a标签默认的下划线
text-align	文本对齐方式	默认left左对齐，right右对齐，center居中
line-height	行高	设置为与文字相同大小时，行间距为0。"垂直居中"时，将行高设置为容器高度
text-indent	首行缩进	根据文字大小设置缩进的像素。如默认文字16px，首行缩进2个字符，则设置为32px;
text-shadow	文本阴影	颜色水平位置垂直位置模糊程度。如#000 4px 5px 3px表示水平向右4px，垂直向下5px，模糊3px
letter-spacing	字符间距	像素
word-break	英文换行方式	默认break-word以单词为单位换行，不会拆分单词。 break-all以字母为单位换行，会拆分单词。

2.6 伪类

表示某个元素的某种状态
用于对某些元素在不同的状态下呈现不同的效果
如a标签有访问前、悬停时、按下时、访问后四种状态对应四个伪类

a标签的伪类	作用
a:link	未访问时
a:hover	鼠标悬停
a:active	鼠标按下
a:visited	访问后

:hover可以适用于很多标签，如#xx:hover，表示鼠标悬停在id为xx的元素上时

2.7 显示方式display

控制元素的类型或是否显示。

值	作用
block	将元素设置为块级元素，这样元素就能独占一行，能设置尺寸
inline	将元素设置为行内元素，这样元素占一行中的一部分，不能设置尺寸
inline-block	将元素设置为行内块，这样元素占一行中的一部分，能设置尺寸
none	将元素不显示，不保留元素位置

2.8 浮动float

让某个元素脱离原本的位置，朝某个方向对齐

值	作用
left	向左浮动
right	向右浮动
none	清除浮动

2.8.1 float:left和display:inline-block的区别

相同点：都能让多个块级元素成为行内块。

2.8.2.1 display:inline-block

多个元素最终位于同一行内，可以设置尺寸。
元素以下线对齐，保留该行位置。
保留元素间的缝隙，后续元素为新的一行。

2.8.2.2 float:left

多个元素最终位于同一行内，可以设置尺寸。
元素以上线对齐，不保留该行位置。
不保留元素间的缝隙，后续元素会紧邻。

2.9 盒子模型

页面中的所有块级元素，都是一个"盒子"，每个"盒子"由元素自身、内边距padding、边框border、外边距marjin组成。

边框border：元素外的一圈
内边距padding：边框与元素自身之间的距离
外边距marjing：元素A的边框与元素B的边框之间的距离

盒子模型相关样式	作用
padding	内边距个参数表示同时设置4个方向。 2个参数表示上下左右。 3个参数表示上左右下。 4个参数表示上右下左顺时针。
margin	外边距 1个参数表示同时设置4个方向。 2个参数表示上下左右。 3个参数表示上左右下。 4个参数表示上右下左顺时针。如果值设置为auto，表示自动将所在的容器剩余距离除以2。
padding-方向	某个方向的内边距。方向可以是left、right、top、bottom
margin-方向	*某个方向的外边距。*

一个元素的所占位置是外边距+边框+内边距+元素自身大小。
如果让某个块级元素居中，使用margin:上下距离 auto;

2.9.1 盒子模型阴影

2.10 溢出overflow

处理子元素超出父元素的部分

值	作用
visible	默认，溢出部分显示
hidden	溢出部分隐藏
scroll	溢出部分使用滚动条控制

2.11 定位position

将元素以像素为单位调整位置

值	含义	作用
fixed	固定定位	让元素固定在页面的某个位置，不会页面的滚动而改变位置
absulote	绝对定位
relative	相对定位

2.11.1 配合定位使用样式

样式	作用	值
left	元素距离页面左边界的左右距离	正值向右，负值向左
top	元素距离页面上边界的上下距离	正值向下，负值向上
right	元素距离页面右边界的左右距离	正值向左，负值向右
bottom	元素距离页面右边界的左右距离	正值向上，负值向下

2.11.2 文档流

页面中每个元素默认都有自己的位置，这个位置称为文档流。
如果某个元素脱离文档流，就会失去它原本所占的位置，后续元素就会顶替其位置。
可以通过浮动float、固定定位positon:fixed、绝对定位positon:absolute让元素脱离文档流。
脱离文档流后，通过改变left、right、top和bottom移动其位置。

2.11.3 固定定位fixed

让某个元素脱离文档流，默认根据页面的四个边界进行定位。

2.11.4 绝对定位absolute

让某个元素脱离文档流，根据已定位的父元素进行定位。如果没有已定位的父元素，会根据body定位。

2.11.5 相对定位relative

元素不会脱离文档流，根据它原本的位置进行定位，定位原点是元素本身的位置。

2.12 不透明度opacity

设置某个元素的不透明度，0~1之间的小说表示不透明度。1完全不透明，0完全透明。
如果只是定义背景透明时，使用rgba(red,green,blue,alpha)，alpha使用

2.12.1 示例

2.13 转换transform

属性	说明
rotate(30deg)	顺时针2D旋转30度
rotateX/Y/Z(30deg)	沿X/Y/Z轴3D旋转30度
rotateX/Y/Z(30deg)	朝X或Y轴平移50像素
translate(10px,30px)	朝右移动像素px,下移动30像素
scale(1.5)	缩放1.5倍

以上所有效果可以通过transform:效果1 效果2 … 同时设置

2.14 过渡transition

设置某个转换效果完成所需的时间等参数

样式	说明
transition-duration:3s	转换所需时间
transition-delay: 2s	延时生效
transition-timing-function:linear	时间函数，linear表示匀速
transition:4s 1s linear	在1s后，匀速在4s内完成过渡

2.15 滤镜filter

三 JS笔记

1.什么是JS？

全称：JavaScript
简介：是一种嵌入到HTML页面中的脚本语言，由浏览器一边解释一边执行
作用：把静态的页面转换成支持用户交互并响应相应事件的动态页面

2.JS的特点有那些？

2.1 动态改变页面内容

HTML页面是静态的，一旦编写，内容是无法改变的。
JavaScript可以弥补这个不足，可以将内容动态地显示在网页中。

2.2 动态改变网页的外观

JavaScript通过修改网页元素的CSS样式，达到动态地改变网页的外观。

2.3 验证表单数据

我们常见的在各大网站中的注册中的验证功能，就是JavaScript实现的。

2.4 响应事件

JavaScript是基于事件的语言

3 JavaScript在HTML的引用方式

页头引入（head标签内）
页中引入（body标签内）
元素事件中引入（标签属性中引入）
引入外部JS文件

4.输出语句

5.数据结构

JavaScript的数据结构包括：标识符、关键字、常量、变量

6.基本数据类型

6.1 javaScript中两大数据类型

基本数据类型：Number String Boolean Undefined 和 Null
复杂数据类型：Object Array Function RegExp Date Set Sumbol

7.Typeof运算符

8.数字类型

所有数字不分大小不分整浮不分正负都是数字类型

较大数或较小数（绝对值较小）可以写成科学计数法

9.一个特殊的数字行值NaN

NaN是英语“not a number” 的意思，既不是一个数字，但它是一个数字类型的值

10.字符串类型

字符串要用引号包裹，双引号或单引号或反引号

11.字符串的拼接

加号可以拼接多个字符串

12.字符串和变量的拼接

13.字符串的length属性

length是字符串的长度

14.字符串常用的方法

14.1 charAt()方法

作用：得到指定位置的字符

14.2 substring()方法

14.3 slice()方法

14.4 三者对比

15 toUpperCase和toLowerCase

16.indexOf()方法

17.Underfiend

一个没有被赋值的变量的默认值，而undefined的类型也是underfiend，即underfiend又是值，又是一种类型，这种类型只有自己一个值

17.1 变量提升的情况

在变量声明提升时，变量的值也是underfiend

18.算术运算符

18.1 加法的两种作用

18.2 取余运算

取余运算也叫求模运算，用百分号来表示
a%b表示a厨艺b的余数，它不关心整数部分，只关心余数

18.3 隐式类型转换

如果参与运算的某操作数不是数字型，那么javaScript会自动将此操作符转换为数字

隐式转换的本质就是内部调用Number()函数

解决方法：在进行小数运算的时候，要调用数字的toFixed()方法保留指定的小数位

19.向上取整和向下取整

20.关系表达式

21.判断是否相等

22.相等和全等

23.NaN不相等

23.1 如何判断某变量的值是否位NaN

isNaN()函数可以用来判断变量的值是否为NaN
但isNan()也不好用，它的机理是：只要该变量传入Number()的执行结果是Nan,则isNaN()函数都会得到true

24.非运算

置反运算的结果一定是布尔值

25.与运算

26.或运算

27.短路运算

28.赋值运算符

29.快捷运算符

快捷运算符表示在原数组基础上进一步进行计算

30.自增和自减运算符

31.综合表达式

31 函数的定义和调用

32.函数的调用

33.函数语句执行顺序

34.函数的参数

35.函数返回值

调用一个有返回值的函数，可以被当作一个普通值，从而可以出现在任何可以书写的地方

36.流程控制语句

37.switch语句

38.三元运算符

39.for循环语句

40.while循环语句

41.随机数函数

40.DOM简介

DoM（Document Object Model , 文档对象模型）是javaScript操作HTML文档的接口，使文档操作变得非常优雅，简便
DoM最大的特点就是将文档表示为节点树

41.访问元素节点

所谓的访问元素节点就是指得到页面上的元素节点
对节点进行任何操作，就是要得到节点，访问节点主要依靠document

41.1 认识document对象

42 访问元素节点常用方法

方法	功能
document.getElementById()	通过id得到元素
document.getElementByTagName()	通过标签名得到元素
document.getElementByClassName()	通过类名得到元素
document.querySelector()	通过选择器得到元素
document.querySelectorAll()	通过选择器得到元素数组

42.1 document.getElementById()

如果页面上有相同的id元素，则只能得到第一个
不管元素藏得位置有多深，都能通过id找到它

延迟运行

42.2 document.getElementByTagName()

42.3 document.getElementByClassName()

42.4 document.querySelector()

42.5 document.querySelectorAll()

43.节点的关系

关系	考虑所有节点
子节点	childNodes
父节点	parentNode
第一个子节点	firstChild
最后一个子节点	lastChild
前一个兄弟节点	previousSibling
后一个兄弟节点	nextSibling

文本节点也属于节点

关系	考虑所有节点	只考虑元素节点
子节点	childNodes	children
父节点	parentNode	同
第一个子节点	firstChild	firstElementChild
最后一个子节点	lastChild	lastElementChild
前一个兄弟节点	previousSibling	previousElementSibling
后一个兄弟节点	nextSibling	nextElementSibling

代码示例

44.节点的操作

改变元素节点中的内容可以使用两个相关的属性

innerHTML属性能够以HTML语法设置节点中的内容
innerText属性只能以纯文本的形式设置节点中的内容

45.如何改变元素节点的CSS样式

46.如何改变元素节点的HTML属性

46.事件监听

46.1 常见的鼠标事件监听

事件名	事件描述
onclick	鼠标单击
onblclick	鼠标双击
onmousedown	鼠标按下
onmouseup	鼠标松开
onmouseenter	鼠标进入
onmouseleave	鼠标离开

46.2 常见的键盘事件监听

事件名	事件描述
onkeypress	键盘按下（系统按钮无法识别）
onkeydown	键盘按下（系统按钮可以识别）
onkeyup	键盘松开

46.3 常见的表单事件监听

事件名	事件描述
onchange	当用户改变域的内容
onfocus	当某元素获得焦点
onblur	当某元素失去焦点
onsubmit	当表单被提交
onreset	当表单被重置