前端畑鹿惊-CSDN博客

原创 2021-08-07 函数

1.函数函数: 一个重复执行的代码块。可以用来简化要重复被使用的代码，提高程序执行的效率。2.函数的三种声明方式使用 function 关键字声明函数语法:function 函数名(){函数体} // 声明函数 function fn1(){ console.log("第一种声明方式, 使用function关键字声明的函数"); }

2021-08-07 15:14:38 84

原创 2021-08-07 数组

1. 数组的定义数组的概念: 数组就是一组有序的数据的集合数组 array, 以[]表示// "韩信", "李白", "刘备", "关羽", "张飞" var arr1 = []; console.log(arr1); var arr2 = ["韩信", "李白", "刘备", "关羽", "张飞"]; console.log(arr2);数组中可以存放任何数据类型的值

2021-08-07 14:16:20 89

原创 2021-08-04 分支循环

一、switch判断语句swicth 判断语句, 用来匹配特定的值switch(变量或字面量){ case 值1: 要执行的语句; case 值2: 要执行的语句; case 值3: 要执行的语句; }case 理解成一个标记, case并不是完全执行的, 只会执行匹配到的case 后面的代码case 的匹配是严格相等的, 需要值相

2021-08-04 19:45:42 78

原创 2021-08-03 运算符

一、连接和算术运算符连接运算符: + 遇到字符串会做字符串拼接, 运算顺序是从左往右 var i = 1 + 3 + "a"; console.log(i); // 4a i = "a" + 12 + 34; console.log(i); // a1234通过拼接空字符串, 可以把任意数据类型转 string类型 i = NaN + ""; cons

2021-08-03 12:59:34 85

原创 2021-08-02 JavaScript阶段开始

*## 终于结束了三周静态页面的学习，要开始JS的学习了，要想学好后面的框架，JS必须得学好，就开始吧*~一、JS的三种引入方式行内式 <div onclick="alert('第一种引入方式: 行内式');">点击我试一下</div>嵌入式<script> alert("第二种引入方式: 嵌入式");</script>

2021-08-02 19:53:25 83

1.font-family 字体系列/* font-family: 指定字体的字体系列; *//* 是一个降级的关系，前面的字体没有则用后面的字体 */font-family: "宋体", "华文彩云", "微软雅黑", "黑体";font-family: Verdana, Geneva, Tahoma, sans-serif;font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;2.font-style

2021-07-24 17:01:21 238

原创 2021-07-24 文本相关属性

1.text-align ( 单文本对齐方式与多行文本对齐方式 )一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。单文本<h3 class="title">text-align ( 文本对齐方式 )</h3><h3 class="title"><img src="images/素材.png" alt=""></h3><h3 clas

2021-07-24 16:53:14 96

原创 2021-07-20 背景样式基础（二）

1.背景颜色 background-color这个没啥好说的…背景颜色属性是：background-color:可以使用的颜色单位如下所示????????????/* 预定义颜色 */background-color: teal;background-color: transparent;（透明）/* 十六进制 */background-color: #ff0;/* rgb 和 rgba */background-color: rgb(0,0,0);background-color

2021-07-21 20:06:17 115

原创 2021-07-19 浮动和样式基础（一）

1.box-sizing一个盒子的样式是这样的????????????.box{ width: 200px; height: 200px; background-color: orange; padding: 20px; border: 10px solid yellow; /* content-box(默认值)：元素的width和height决定了元素的内容框，内容框之外还有padding和border会撑大元素尺寸，内边距和边框撑大盒子大小

2021-07-19 22:59:11 61

原创 2021-07-17 元素的分类~块元素、行内元素、行内块元素

1.元素的分类①块元素: 可以设置宽高, 独自占一整行②行内元素: 不可以设置宽高, 不会独自占一整行③行内块元素: 可以设置宽高, 不会独自占一整行下面通过实例分辨????????????<hr> <h3>块元素: 可以设置宽高, 独自占一整行</h3> <div class="block"></div> <h1 class="block"></h1> <p class="

2021-07-17 15:27:08 152

原创 2021-07-17 盒子模型~内容、外边距、内边距、边框

当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。每个盒子由四个部分：边距（margin），边框（border），填充（padding），和实际内容（content）我们可以通过浏览器的开发者工具观察页面的元素，会发现每个元素都是一个盒子：1.内容content概念：由内容边界限制，容纳着元素的

2021-07-17 14:49:31 645

原创 2021-07-16 CSS样式优先级、单位基础、颜色

1.CSS样式优先级/* 类名选择器（属性选择器、伪类选择器选择器权重一样） */[name]{ color:red;}/* 伪类没有 id高 */:hover{ color: blue;}/* 类名低于 id */.item{ color:red;}/* 元素选择器低于类名选择器 */p{ color: green;}/* 通配符低于元素选择器 */*{ color: brown; font-weig

2021-07-16 13:14:16 265

原创 2021-07-15 其他伪类选择器及伪元素选择器

1.其他伪类选择器也有很多例如：:first-of-type 选中第一个指定元素:last-of-type 选中最后一个指定的元素:nth-child(n) 选中第n个元素:nth-of-type(n) 选中第n个指定的元素:only-child 选中唯一一个的子元素:only-of-type 选中唯一的指定元素:empty 选中没有任何子元素(元素里面不能有任何的内容)的空元素:checked 选中页面中被选中的单选框或复选框:enabled 选中页面中, 处于可用(没有被禁用)的元

2021-07-15 22:32:38 97

原创 2021-07-15 a标签的四种状态与a标签的四种伪类选择器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc

2021-07-15 20:24:38 297

原创 2021-07-15 元素选择器、关系选择器、属性选择器

1.元素选择器有以下6个元素选择器:1. 通配符选择器 * { }2. 标签名选择器元素名 { }3. id选择器 #id { }4. 类名选择器 .class { }5. 分组选择器选择器1, 选择器2,…,选择器n { }6. 交集选择器选择器1选择器2 { }/* * 通配符选择器: 选中页面中的所有的元素（会影响浏览器的性能） */ *{ letter-spacing: 5px; }/* div 标

2021-07-15 20:06:17 661

原创 2021-07-15 CSS的导入方式与语法

1.CSS的四种导入方式<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!--

2021-07-15 19:29:55 187

原创 2021-07-15 a标签如何在移动设备唤醒应用

1.首先要使手机可以打开html页面电脑连接手机热点电脑按 win+r , 输入cmd 运行小黑窗小黑窗输入 ipconfig 在里面找到 ipv4 (电脑的ip地址) 用vscode 安装 live server 插件打开一个html文档, 按 alt+l+o 运行把127.0.0.1 换成 ipv4的电脑地址在连接电脑热点的手机上用浏览器打开改完的地址（比如: 192.168.

2021-07-15 12:51:38 298

原创 2021-07-14 表格单元格的属性与结构化

1.直接上代码<body>   &

2021-07-14 22:45:59 181

原创 2021-07-14 列表与列表的嵌套（重点）

1.有序列表 <ol type="a"> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li type="1">列表项4&l

2021-07-14 22:27:21 3480

原创 2021-07-14 下拉菜单

1.下拉菜单选项 <label for="box">选择位置</label>   <select name="location" id="box" autofocus > <!-- disabled 可以禁用

2021-07-14 22:13:44 182

原创 2021-07-14 textarea文本域标签与button标签

1.文本域标签textarea文本域标签又可以理解为多行文本标签，对比起input类型的输入框标签：<input type="text" value="这是输入框的值" placeholder="占位符"><textarea name="" id="" style="width:200px; hei

2021-07-14 20:10:42 1228

原创 2021-07-14 input标签

input标签、label标签、form标签这是今天早上我主要学习的内容      <!-- autof

2021-07-14 13:01:04 217

原创 2021-07-13 HTML基础（二）

5.img标签1.<img src=“图片路径” 绝对路径相对路径网络路径 base64位>2. 绝对路径: 从盘符开始的路径，就是绝对路径 (不要用绝对路径)<img src="D:/图片素材/无标题2.png" alt="">3.相对路径: 相对于当前文件而言, 找到另一个文件的路径当前目录: ./ 表示当前文件夹 ./可以忽略不写上层目录: …/ 表示返回上一级文件夹<img src="./图片素材/2.png" alt="">

2021-07-13 23:01:58 687

原创 2021-07-13 HTML基础（一）

1.HTML文档标签<!DOCTYPE html> <html lang="zh_CN">   <head&gt

2021-07-13 22:32:22 374

原创 2021-07-13 前端学习第一天

1.什么是Web开发Web开发其实就是Web应用开发。在 PC（Personal Computer，个人计算机）刚兴起的年代，软件主要使用 C/S 架构（Client/Server，客户端/服务器）即应用运行在桌面上，而数据库这样的软件运行在服务器端。随着互联网的兴起，B/S 架构模式（Browser/Server，浏览器/服务器）开始流行，这种架构模式就是Web应用开发。因为Web应用程序的更新和升级相较于传统的 C/S 架构更加的迅速，（C/S 架构需要每个客户端升级应用软件。 B/S 架构

2021-07-13 20:00:01 111 2

前端卡卡西的博客