前端
关注
分享
扫一扫
文章平均质量分 70
IT之一小佬
敲响键盘之乐，跳起程序之舞，抵达智慧之巅!
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
前端localStorage用法（JSON.stringify()、join() ）
前端localStorage用法（JSON.stringify()、join() ）原创 2023-06-25 08:50:11 · 429 阅读 · 0 评论 -
Vue项目设置局域网可以访问
Vue项目设置局域网可以访问原创 2023-06-23 23:52:48 · 4475 阅读 · 0 评论 -
Centos系统中搭建Vue3运行环境
Centos系统中搭建Vue3运行环境原创 2023-06-23 12:39:07 · 1186 阅读 · 0 评论 -
Linux系统中安装nodejs(node、npm)
Linux系统中安装nodejs(node、npm)原创 2023-06-23 11:51:39 · 3577 阅读 · 0 评论 -
前端常见的正则表达式验证
前端常见的正则表达式验证原创 2023-06-19 08:26:28 · 2502 阅读 · 0 评论 -
Vue框架学习（后台管理系统）
Vue框架学习（后台管理系统）原创 2023-06-18 23:25:05 · 6213 阅读 · 1 评论 -
添加HTML网站图标Favicon
添加HTML网站图标Favicon原创 2022-08-27 11:28:37 · 1100 阅读 · 0 评论 -
前端实现复制功能
常用的API：Document.createRange()：返回一个Renge对象，通过Range对象可以选中文本。// 选中id为test的元素的内容const range = document.createRange();range.selectNode(document.getElementById('test'));const selection = window.getSelection();if (selection.rangeCount > 0) selection.r原创 2022-04-24 23:26:22 · 3852 阅读 · 2 评论 -
学成在线页面制作
这个学成在线是我在b站看了 "黑马程序员pink老师" 做出来的作品1. 前期准备工作 创建 study 目录文件夹 (用于存放我们这个页面的相关内容) study目录内新建images 文件夹 用于保存图片。 新建index.html 首页html 文件 新建style.css 样式文件。 采用外链样式表。 将样式引入到我们HTML页面文件中。 样式表写入 清除内外边距样式，来检测样式表是否引入成功。 2. CSS属性书写顺序建议遵循.原创 2022-01-14 15:57:28 · 479 阅读 · 0 评论 -
CSS中浮动布局float（小米布局案例、导航栏案例、overflow）
1. CSS 布局的三种机制网页布局的核心——就是用 CSS 来摆放盒子。CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：普通流（标准流） 块级元素会独占一行，从上向下顺序排列； 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行； 常用元素：span、a、i、em等 示例代码：<...原创 2022-01-12 14:58:52 · 2952 阅读 · 2 评论 -
CSS三大特性（CSS层叠性、CSS继承性、CSS优先级）
1. CSS层叠性层叠性是指多种CSS样式的叠加。原则： 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。 样式不冲突，不会层叠 示例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...原创 2022-01-11 20:52:48 · 1060 阅读 · 0 评论 -
CSS 背景(background)（背景颜色color、背景图片image、背景平铺repeat、背景位置position、背景附着、背景简写、背景透明、链接导航栏综合案例）
1. 背景颜色(color)background-color:颜色值; 默认的值是 transparent 透明的示例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit原创 2022-01-11 19:52:05 · 5035 阅读 · 0 评论 -
CSS复合选择器（后代选择器、子元素选择器、并集选择器、伪类选择器、:focus伪类选择器）
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。1. 后代选择器后代选择器又称为包含选择器作用：用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子。父级 子级{属性:属性值;属性:属性值;}语法：.class h3{color:red;font-size:16px;}当标签发生嵌套时，内层标签就成为外层标签的后代。示例代码：<!DOCTYPE html><ht原创 2022-01-11 14:25:53 · 2608 阅读 · 0 评论 -
Emmet语法（快速生成HTML结构语法、快速生成CSS样式语法）
1. 快速生成HTML结构语法生成标签直接输入标签名按tab键即可 比如div然后tab键，就可以生成<div></div> 如果想要生成多个相同标签加上*就可以了 比如div*3就可以快速生成3个div3． 如果有父子级关系的标签，可以用> 比如ul > li就可以了 如果有兄弟关系的标签，可以用＋ 比如div+p 如果生成带有类名或者id名字的，直接写.demo或者#two tab键就可以了 如果生成的div类名是有顺序的...原创 2022-01-11 13:24:31 · 1098 阅读 · 2 评论 -
CSS文字文本样式（font字体、css外观属性）
1. font字体1.1. font-size:大小作用：font-size属性用于设置字号。p { font-size:20px; }单位： 可以使用相对长度单位，也可以使用绝对长度单位。 相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。 注意： 文字大小基本就用px了，其他单位很少使用 谷歌浏览器默认的文字大小为16px 但是不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。...原创 2022-01-10 21:23:43 · 7599 阅读 · 0 评论 -
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
盒子模型1. 盒子模型的介绍所谓的盒子模型就是把HTML页面的元素看作一个矩形盒子，矩形盒子是由内容(content)、内边距(padding)、边框(border)、外边距(margin)四部分组成。盒子模型示意图如下：2. 盒子模型相关样式属性盒子的内容宽度(width)，注意：不是盒子的宽度 盒子的内容高度(height)，注意：不是盒子的高度 盒子的边框(border) 盒子内的内容和边框之间的间距(padding) 盒子与盒子之间的间距(margin)设置宽高：原创 2021-04-20 21:56:47 · 507 阅读 · 1 评论 -
css标签显示特性（块级元素、行内元素、行内块元素、标签显示模式转换display、简单文字居中、简单导航栏案例）
css 显示特性1. display 属性的使用display 属性是用来设置元素的类型及隐藏的，常用的属性有：none 元素隐藏且不占位置 inline 元素以行内元素显示 block 元素以块元素显示2. 示例代码<style> .box{ /* 将块元素转化为行内元素 */ display:inline; } .link01{ /* 将行内元素转化为块元素 */ displa原创 2021-04-20 21:55:30 · 404 阅读 · 0 评论 -
css 元素溢出
css 元素溢出1. 什么是 css 元素溢出当子元素(标签)的尺寸超过父元素(标签)的尺寸时，此时需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来完成。 【在父标签上进行设置】overflow的设置项：visible 默认值, 显示子标签溢出部分。 hidden 隐藏子标签溢出部分。 auto 如果子标签溢出，则可以滚动查看其余的内容。2. 示例代码<style> .box1{ width: 100px; ..原创 2021-04-20 21:55:08 · 614 阅读 · 0 评论 -
css 属性
css 属性1. 布局常用样式属性width 设置元素(标签)的宽度，如：width:100px; height 设置元素(标签)的高度，如：height:200px; background 设置元素背景色或者背景图片，如：background:gold; 设置元素的背景色, background: url(images/logo.png); 设置元素的背景图片。 border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线 以上原创 2021-04-20 21:54:45 · 167 阅读 · 0 评论 -
css 选择器（标签选择器、类选择器、层级选择器、id选择器、组选择器、伪类选择器、通配符选择器）
css 选择器1. css 选择器的定义css 选择器是用来选择标签的，选出来以后给标签加样式。2. css 选择器的种类标签选择器 类选择器 层级选择器(后代选择器) id选择器 组选择器 伪类选择器3. 标签选择器根据标签来选择标签，以标签开头，此种选择器影响范围大，一般用来做一些通用设置。示例代码<style type="text/css"> p{ color: red; }</style><原创 2021-04-18 22:09:57 · 6115 阅读 · 0 评论 -
引入CSS样式表
css 的引入方式css的三种引入方式行内式 内嵌式（内部样式） 外链式1. 行内式直接在标签的 style 属性中添加 css 样式示例代码:<div style="width:100px; height:100px; background:red ">hello</div>优点：方便、直观。缺点：缺乏可重用性。2. 内嵌式（内部样式）在<head>标签内加入<style>标签，在<style>标签中原创 2021-04-18 22:09:32 · 506 阅读 · 0 评论 -
css 的介绍（定义、作用、基本语法、css注释）
css 的介绍1. css 的定义css(Cascading Style Sheet)层叠样式表，它是用来美化页面的一种语言。没有使用css的效果图使用css的效果图2. css 的作用美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式。 控制页面布局, 比如: 设置浮动、定位等样式。3. css 的基本语法选择器{样式规则}样式规则：属性名1：属性值1;属性名2：属性值2;属性名3：属性值3;...选择器:是用来选择标签的，选原创 2021-04-18 22:09:08 · 14373 阅读 · 0 评论 -
表单提交、页面注册案例
表单提交1. 表单属性设置<form>标签 表示表单标签，定义整体的表单区域action属性 设置表单数据提交地址 method属性 设置表单提交的方式，一般有“GET”方式和“POST”方式, 不区分大小写 【‘get’和‘post’是HTTP协议】【get方式提交数据到web服务器以地址栏的方式提交给服务器不安全，能够看到提交的数据，严谨的说是以查询参数的方式提交给web服务器；post方式提交数据表单数据会放到请求体里面】2. 表单元素属性设置name属性 设..原创 2021-04-18 22:08:49 · 506 阅读 · 0 评论 -
表单标签form、label、input、textarea、select
表单标签1. 表单的介绍表单用于搜集不同类型的用户输入(用户输入的数据)，然后可以把用户数据提交到web服务器 。2. 表单相关标签的使用 <form>标签 表示表单标签，定义整体的表单区域 <label>标签 表示表单元素的文字标注标签，定义文字标注 <input>标签 表示表单元素的用户输入标签，定义不同类型的用户输入数据方式 type属性 type="text" 定义单行文本输入框 type="password"原创 2021-04-18 20:45:46 · 4450 阅读 · 0 评论 -
表格标签table
表格标签1. 表格的结构表格是由行和列组成，好比一个excel文件2. 表格标签 <table>标签：表示一个表格 <tr>标签：表示表格中的一行 <td>标签：表示表格中的列 <th>标签：表示表格中的表头 示例代码:<table> <tr> <th>姓名</th> <th>年龄</th>原创 2021-04-18 20:45:13 · 2054 阅读 · 0 评论 -
列表标签ul、ol、dl、li
列表标签1. 列表标签的种类无序列表标签(ul标签) 有序列表标签(ol标签)2. 无序列表<!-- ul标签定义无序列表 --><ul> <!-- li标签定义列表项目 --> <li>列表标题一</li> <li>列表标题二</li> <li>列表标题三</li></ul>3. 有序列表<!-- ol标签定义有序列原创 2021-04-17 23:01:30 · 1460 阅读 · 0 评论 -
文件资源路径（相对路径和绝对路径）
资源路径当我们使用img标签显示图片的时候，需要指定图片的资源路径，比如:<img src="images/logo.png">这里的src属性就是设置图片的资源路径的，资源路径可以分为相对路径和绝对路径。1. 相对路径从当前操作 html 的文档所在目录算起的路径叫做相对路径示例代码:<!-- 相对路径方式1 --><img src="./images/logo.png"><!-- 相对路径方式2 --><i原创 2021-04-17 23:00:56 · 2353 阅读 · 0 评论 -
html 标签、图像、链接、注释、锚点定位、特殊字符
初始常用的 html 标签1. 常用的 html 标签<!-- 1、成对出现的标签：--><h1>h1标题</h1><div>这是一个div标签</div><p>这个一个段落标签</p><!-- 2、单个出现的标签： --><br><img src="images/pic.jpg" alt="图片"><hr><!-- 3、带属性的标签，如原创 2021-04-17 23:00:04 · 552 阅读 · 0 评论 -
vscode 的基本使用
vscode 的基本使用1. vscode 的基本介绍全拼是 Visual Studio Code (简称 VS Code) 是由微软研发的一款免费、开源的跨平台代码编辑器，目前是前端(网页)开发使用最多的一款软件开发工具。2. vscode 的安装下载网址:https://code.visualstudio.com/Download 选择对应的安装包进行下载:根据下载的安装包双击进行安装即可，当然为了更好的使用 vscode 还可以安装对应的插件。3. vscode 的插件安装.原创 2021-04-17 22:59:41 · 2410 阅读 · 1 评论 -
html 的基本结构、标签（分类、关系）、文档类型、页面语言、字符集、语义化
html 的基本结构1. 结构代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>网页标题</title> </head> <body> 网页显示内容 </body></html>第一行<原创 2021-04-17 22:59:04 · 728 阅读 · 0 评论 -
html 的介绍
html 的介绍1. 网页效果图 -- 淘宝首页2. html的定义HTML 的全称为：HyperText Mark-up Language, 指的是超文本标记语言。 标记：就是标签,<标签名称> </标签名称>, 比如:<html></html>、<h1></h1>等，标签大多数都是成对出现的。所谓超文本，有两层含义:因为网页中还可以图片、视频、音频等内容(超越文本限制) 它还可以在网页中跳转到另一个网...原创 2021-04-17 14:12:05 · 350 阅读 · 0 评论