四：Day06（HTML，CSS，JS回顾）

新手小菜鸟上路

已于 2023-10-08 09:04:50 修改

阅读量31

点赞数

文章标签： html css javascript

于 2023-09-26 20:10:01 首次发布

本文链接：https://blog.csdn.net/qq_51318621/article/details/133130073

版权

一、HTML（超文本标记语言）

1.前端与后端
1.前端：为用户使用的，和用户进行交互
2.后端：为前端做支撑，数据提供，...

2.B/S,C/S
1.B/S：浏览器和服务端
2.C/S：软件和服务端

1、介绍

超文本标记语言
标签与属性：标签可以有0到多个属性
标签支持嵌套
注释：
简单的html文档结构

        <html>
            <head></head> <!-- 页面声明的信息，引入css，引入js，... -->
            <body></body> <!-- 页面中展示的内容 -->
        </html>

2、标签

2.1 分类

1.行级标签：可以和文本，行级标签一行展示，宽和高为内容的宽和高，没有内容没有宽和高
不可以设置宽和高。
2.块级标签：独占一行，宽度为父标签的宽度，高度内容的高度，没有内容，没有高度
可以设置宽和高。

2.2 各种标签

标题标签：h1~h6 数字越大字体越小
段落标签：<p></p>
换行：<br/>
水平线：<hr/>
图片标签：<img src="图片的路径" title="鼠标悬浮时提示的信息" alt="图片加载失败提示的信息"/>
超链接：<a href="跳转的路径" target="打开的方式"></a> target：1._self(默认)当前页打开; 2. _blank 新的标签页打开； 3. 自定义值。

2.3 列表（ <li>）

有序列表 <ol> <li></li> </ol>
无序列表 <ul> <li></li> </ul>

2.4 表格（<table>）

     <table>
            <!-- 表头，加粗和居中 -->
            <thead>
                <tr>
                    <th></th>
                </tr>
            </thead>
            <!-- 表体 -->
            <tbody>
                <tr>
                    <td></td>
                </tr>
            </tbody>
        </table>

属性：

<table>属性：
1.border：边框
2.height：表格的高度
3.width：表格的宽度
4.bgcolor：表格的背景颜色
5.align：表格的水平对齐方式（左中右）
6.cellpadding：内边距（内容和单元格边框的距离）
7.cellspacing：外边距（单元格边框和表格边框的距离）

tr属性：
1.height：行的高度
2.bgcolor：行的背景颜色
3.align：行中内容的水平对齐方式（左中右）
td|th属性：
1.width：列的宽度
2.bgcolor：列的背景颜色
3.align：列中内容的水平对齐方式（左中右）

2.5 实体

空格： 

2.6 表单（form）

标识着一个整体，提交时可以将表单元素中的值提交到后端。

2.6.1 form标签的属性

action：提交的后端路径
method：提交方式
get：地址栏拼接参数，有大小的限制，只能进行url编码，不安全
post：请求体中传递参数，没有大小的限制，可以使用其他方式编码，安全
enctype：参数格式的处理，只有post请求时才有效
1.application/x-www-form-urlencoded：普通的参数（post请求默认）
2.multipart/form-data：普通参数和文件（有文件上传时必须指定）

2.6.2 表单元素

1.文本框：<input type="text" name="xxx"/>
2.密码框：<input type="password" name="xxx"/>
3.日期框：<input type="date" name="xxx"/>
4.文件域：<input type="file" name="xxx"/>
5.单选按钮：
<input type="radio" name="sex" value="xxx"/>
<input type="radio" name="sex" value="xxx"/>
注意事项：
1.name属性值相同的为一组单选按钮
2.name属性值相同才能有单选效果
3.提交时将value中的属性值提交到后端
4.可以出现多组单选按钮
5.checked默认选中
6.复选框：
<input type="checkbox" name="hobby" value="xxx"/>
<input type="checkbox" name="hobby" value="xxx"/>
注意事项：
1.name属性值相同的为一组复选框
2.提交时将value中的属性值提交到后端
3.可以出现多组复选框
4.checked默认选中
7.下拉列表：
<select name="xxx">
<option value="xxx"></option>
</select>
注意事项：
1.提交时将选中的option中value属性值提交到后端
2.selected默认选中
8.文本域:
<textarea name="xxx"></textarea>
9.按钮：
1.提交按钮：具有提交功能
<input type="submit" value="按钮中提示的文字"/>
<button type="submit">按钮中提示的文字</buuton>

2.重置按钮：具有重置功能
<input type="reset" value="按钮中提示的文字"/>
<button type="reset">按钮中提示的文字</buuton>

3.普通按钮：没有功能
<input type="button" value="按钮中提示的文字"/>
<button type="button">按钮中提示的文字</buuton>

2.6.3 表单元素的属性

placeholder：提示信息
autofocus：自动获得焦点
minlength | maxlength：最小|最大长度
readonly：只读
disabled：禁用

2.7 内联框架 ( <iframe>)

<iframe src="默认内联的路径" frameborder="边框" width="" height="" name="xxx"></iframe>

内联其他的资源
配合a标签使用，a标签跳转的资源在iframe中打开 \<a href="..." target="iframe标签的name属性值"></a>

2.8 常用布局标

div：块级元素（标签）
span：行级元素（标签）

二、CSS（层叠样式表）

1、CSS引入方式

1.1 行内式

在标签中添加style属性，通过style属性值设置样式。
<span style="xxx"></span>

1.2 内部式

head标签中的style标签中设置样式；

    <head>
       <style>
         选择器{
              xxx
            }
         </style>
    </head>

1.3 外部式

样式编写在单独的.css文件中，需要使用该样式的页面引入外部的.css文件

<head>
   <link rel="stylesheet" href=".css文件路径">
</head>

1.4 优先级

行内式 > 内部式|外部式

2、选择器

（获取标签）

id选择器	#id {属性值}
class选择器	.class{属性值}
标签选择器	标签名{属性值}
优先级：id选择器 > class选择器 > 标签选择器

并集选择器	选择器,选择器,...{属性值}
后代选择器	祖先元素后代元素属性值}
子选择器	父元素>子元素{属性值}
兄弟选择器	选择器+选择器：后边第一个兄弟选择器~选择器：后边所有的兄弟

3、浮动（float）

3.1 行级元素浮动

可以去除空格

3.2 块级元素浮动

可以在一行展示。
注意事项：浮动后让出空间

4、盒子模型

组成：

1.内容实际的宽和高
2.内边距（内容和边框的距离）padding
3.边框border
4.外边距（边框到其他标签的距离）margin

4.1 使用

4.1.1 内容实际的宽和高

宽：width
高：height

4.1.2 内边距

上内边距，右内边距，下内边距，左内边距
方向：top right bottom left
赋值方式：

1.padding-方向: 值px;
2.padding: 值px 值px 值px 值px; 上右下左
3.padding: 值px 值px; 上下左右
4.padding: 值px; 上右下左

4.1.3 边框

1.边框宽度 border-width
border-方向-width: 值px;
border-width: 值px 值px 值px 值px; 上右下左
border-width: 值px 值px; 上下左右
border-width: 值px; 上下左右
2.边框样式 border-style
样式：solid 实线；dashed 虚线； dotted 点线；double 双实线；none：没有；
border-方向-style: 样式; 单独设置样式。

3.边框颜色 border-color
颜色：英文名；RGB(0~255,0~255,0~255)红绿蓝；十六进制
border-方向-color: 颜色;
同宽度。
4.边框的简化
border: 宽度样式颜色;
5.圆角 border-radius
border-top-left-radius: 值px; 上左
border-top-right-radius: 值px; 上右
border-bottom-right-radius: 值px; 下右
border-bottom-left-radius: 值px; 下左
border-radius: 值px 值px 值px 值px; 上左下右
border-radius: 值px 值px; 上右下左
border-radius: 值px; 上左下右上右下左

4.1.4 外边距

上外边距，右外边距，下外边距，左外边距
方向：top right bottom left
margin-方向: 值px;
同内边距。
特殊用法：margin: 0 auto; 元素水平居中

5、display属性

none	将元素隐藏。
inline	可将块级元素变为内联元素，内联元素为特殊的行级元素，不可以设置高和宽。
block	将元素变为块级元素，变为块级元素后具备了块级元素的特点。
inline-block	将元素变为内联块元素，内联块元素可以设置高和宽，可以和其它行级元素或内容一行展示。

6、文字相关属性

color	文字颜色。
font-size	文字大小。
font-weight	文字加粗（100~900,400为正常，700及以上为加粗）。
font-style	字体（宋体，楷体，微软雅黑，...）。
line-height	行高（内容的垂直方向的展示位置）。特殊用法：行高和父元素高度相同实现内容垂直居中。

7、伪类

元素获取的伪类，改变元素的样式，失去伪类，恢复为原有样式
1.鼠标悬浮伪类：选择器:hover{}
2.获得焦点伪类：选择器:focus{}

8、定位 position

属性： left ，right ，bottom，top ，z-index(优先级)

静态定位（默认）	没有定位。 position: static;
绝对定位	以祖先元素进行定位，如果没有祖先元素或祖先元素没有定位（或默认定位），以body进行定位。 position:absolute;
相对定位	以该元素本身进行定位。 position:relative;
固定定位	不会随滚动条滚动而发生位置的改变。 position:fixed;

注意：
1.绝对定位：让出定位之前所占的空间
2.相对定位：不会让出定位之前所占的空间

9、背景属性

1.background-color：颜色; 背景颜色
2.background-image：url("图片路径"); 背景图片
3.background-repeat：是否平铺
repeat （默认）背景图像将向垂直和水平方向重复。默认值。
repeat-x 只有水平位置会重复背景图像。
rpeat-y 只有垂直位置会重复背景图像。
no-repeat 背景图像不会重复。
4.background-size：值px 值px;
5.background-attachment：是否固定或者随页面滚动。
scroll（默认）背景图片随着页面的滚动而滚动，这是默认的。
fixed 背景图片不会随着页面的滚动而滚动。

三、JavaScript

客户端脚本语言，可以使页面和用户产生交互的行为。

1、js的组成

ECMAScript（ES）：提供了js的核心语法。比如，变量、数据类型、条件判断、循环、函数、数组等等。
BOM：浏览器对象模型
DOM：文档对象模型

2、js的输出

输出到浏览器控制台	console.log(xxx);
输出到页面中	document.write(xxx);
弹框输出	alert(xxx);

3、引入方式

内部式：将js脚本写在script标签中

<script> </script>

外部式：将js脚本写在单独的.js文件中，需要使用js脚本的页面引入外部.js文件。

  <script src="外部.js文件的路径"></script>

4、注释

单行：//

多行： /* */

5、标识符

java中标识符：包名，类名，方法名，变量名，...
js中标识符：类名，方法名，变量名，...
语法规则：数字，字母，_，$ 组成，其中数字不能开头，不能为关键字和保留字。
语法要求：

类名：大驼峰命名法
方法名：小驼峰命名法
变量名：小驼峰命名法

6、数据类型

数值类型（整数和浮点数）	number
字符串类型	string
布尔类型	boolean
空值	null
空串	" "
特殊类型	not a number 非数值类型 undefined 变量尚未赋值
对象类型
var可以存储所有类型的数据

7、变量和常量

7.1 变量

1.先声明，后赋值：

   var i;
   i = 1;
   var a,b,c;
   a = 1;
   b = "a";
   c = true;

2.声明同时完成赋值：

 var a = 1;

7.2 常量

const用来声明常量。

const PI = 3.14;

8、 js中的运算符

8.1 算数运算符

运算符	描述
+	加法
-	减法
*	乘法
/	除法
%	取模（余数）
++	递加
--	递减

8.2 赋值运算符

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

8.3 比较运算符

运算符	描述
==	等于（两侧数据类型不一致，转换为数字类型进行比较）
===	等值等型（数据类型不一致直接返回false，两侧数据类型相等才进行比较）
!=	不相等
!==	不等值或不等型
>	大于
<	小于
>=	大于或等于
<=	小于或等于
?	三元运算符

8.4 逻辑运算符

运算符	描述
&&	逻辑与
\|\|	逻辑或
!	逻辑非

8.5 类型运算符

运算符	描述
typeof	返回变量的类型。
instanceof	是否为对象

8.6 三元运算符

条件 ? 值1 : 值2;

9、流程控制

9.1 顺序执行结构

按照顺序依次执行

9.2 分支结构

if系列：if ; if else ; f else if else;
switch case break;

9.3 循环结构

for循环
while循环
do while循环(至少会执行一次)

循环控制语句：

break：终止循环。

continue：终止本次循环，进入下次循环。

注意：

for使用continue，终止本次循环，执行迭代因子。

while 和do while使用continue，终止本次循环，执行boolean表达式（容易造成死循环）

10、函数

10.1 自定义函数

          1.无参数，无返回值
            function 函数名(){}
            var 函数名 = function(){}

        2.有参数，无返回值
            function 函数名(参数, ...){}
            var 函数名 = function(参数, ...){}

        3.无参数，有返回值
            function 函数名(){
                return 值;
            }
            var 函数名 = function (){
                return 值;
            }

        4.有参数，有返回值
            function 函数名(参数, ...){
                return 值;
            }
            var 函数名 = function (参数, ...){
                return 值;
            }

10.2 内置函数

（JS对象中提供的函数）

Array对象中的函数
Date 对象中的函数
Global 全局对象中的函数（直接使用）	eval()：将字符串中的内容变为可执行的js脚本 isNaN()：是否不是一个数字 parseFloat()：转换为浮点类型 parseInt()：转换为整数类型 Number()：转换为数字类型
Math 对象中的函数
Number对象中的函数
String 对象中的函数

11、数组

11.1 创建

var arr = [元素,元素,...];
var arr = new Array(数组长度);

11.2 操作数组

添加或修改元素：数组名[索引]=值；
获取元素：var 变量名=数组名[索引]；

11. 3 数组的遍历

1.普通for循环
for(var i = 0; i < 数组名.length; i++){
数组名[i] -> 数组中每一个元素
}
2.增强for循环
for(var i in 数组名){

// i 是元素下标值
数组名[i] -> 数组中每一个元素
}

12、事件（重点）

元素绑定事件，监听到元素触发了事件，驱动函数执行。

12.1 常用事件

onclick	单击事件
onmouseover	鼠标移入事件
onmouseout	鼠标移出事件
onmousemove	鼠标移动事件
onsubmit	form表单提交事件
onfocus	获取焦点事件
onblur	失去焦点事件
onchange	改变事件（通常用在下拉列表中）
onload	页面加载完成时间

12.2 事件使用

将元素绑定事件，同时将事件绑定函数。

1.方式一：
<button οnclick="函数名()">xxx</button>

2.方式二：
<button id="btn">xxx</button>
<script>
document.getElementById("btn").onclick = function () {}
</script>

13、BOM与DOM（重点）

13.1 BOM

浏览器对象模型，window使用时可以省略。
使用js操作浏览器。

13.1.1 BOM的属性

histoy	history.back()：回到上一个历史 history.forward()：回到下一个历史 history.go(数字)：负数：回退指定个数的历史。正数：前进指定个数的历史。
location	location.reload() ：刷新页面 location.href ：获取地址栏的url location.href = "url" ：访问指定的url，当前标签页中打开

13.1.2 BOM的属性

弹框	alter(xxx)：警告框（只有确认按钮） confirm(xxx): 提示框（确认按钮和取消按钮）, 会返回true或false。 prompt(xxx)：对话框（输入内容，确认按钮，取消按钮），有返回值。
访问指定的资源	open(url) 打开指定的url，新的标签页中打开 setInterval() 周期执行，循环执行 setTimeout() 延时执行，只执行1次

13. 2 DOM（文档对象模型，document对象）

1.获取元素节点：
1.根据id属性值获取，返回唯一元素节点对象
document.getElementById("id属性值");
2.根据class属性值获取，返回元素节点对象的数组
document.getElementsByClassName("class属性值");

3.根据标签名获取，返回元素节点对象的数组
document.getElementsByTagName("标签名");

4.根据name属性值获取，返回元素节点对象的数组
document.getElementsByName("name属性值");

2.操作文本节点：
1.操作纯文本
获取元素节点中的文本内容
var val = 元素节点对象.innerText;
将新的内容添加到元素节点中，覆盖元素节点中之前的内容
元素节点对象.innerText = "内容";
2.操作文本或html
获取元素节点中的html和文本内容
var val = 元素节点对象.innerText;
将新的内容添加到元素节点中，覆盖元素节点中之前的内容
元素节点对象.innerText = "html + 内容";

3.操作属性节点：
1.获取元素节点的属性节点值
var val = 元素节点对象.属性名;
var val = 元素节点对象.getAttribute("属性名");

2.修改元素节点的属性节点值
元素节点对象.属性名 = "值";
元素节点对象.setAttribute("属性名", "值");

4.操作css样式：
1.方式一：修改style属性值
var val = 元素节点对象.style.样式名; 获取样式值
元素节点对象.style.样式名 = "值"; 修改样式值

2.方式二：修改class属性值
var val = 元素节点对象.className; 获取class属性值
元素节点对象.className = "值" 修改class属性值