![](https://img-blog.csdnimg.cn/20201209234156319.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端开发(js,css,html)
以Web前端技术为主,涉及前端开发的多个方面,Html网页、CSS涉及、JavaScript编程等,从介绍各个标签到构建网页框架,从基础知识梳理到案例分析,再到分享并讨论案例效果,在前端学习之路上越走越远。
鸿蒙Next
执行是检验程序的唯一标准,代码还得自己敲才能深刻。HarmonyOS NEXT,万物皆组件,未来很无限。
展开
-
HTML的标签、属性大整理
文章目录一、结构编码类1、外层2、头部信息二、内容元素类1、块级与内联元素特点2、块级元素3、内联元素4、表单元素5、HTML全局属性本篇全是经过整理的HTML中常用的标签和属性大全,纯整理干货。在HTML中有太多太多的标签,我们可能无法完全记住,这时候我们就需要一个索引来帮助我们在需要的时候快速找到该标签的作用。一、结构编码类1、外层<!DOCTYPE html> 一种渲染标识<html></html> 整个网页所有内容<body>原创 2020-06-24 15:27:58 · 346 阅读 · 0 评论 -
JavaScript之jQuery够用即可(事件委托、动画效果、扩展插件)
文章目录一、事件委托二、JS的动画效果三、扩展插件一、事件委托1、事件委托其实就是给对象绑定一个事件,但是委托给它所属的每一个子对象了,因此每一个子对象都具有添加进的功能书写格式如下:$("ul").on("click","li",function () { alert(23333); })2、页面载入意思就是等整个页面都加载完了以后再去启动script的内容格式如下:$(function(){ $("ul li").html(12345);原创 2020-05-18 21:48:03 · 268 阅读 · 0 评论 -
JavaScript之jQuery够用即可(each循环、位置偏移量和大小、克隆外层标签、嵌套返回顶部、集体绑定事件)
文章目录一、each循环二、位置偏移量和大小1、offset就是标签距离视口的偏移量2、position相对于已经定位的父标签的偏移量3、访问尺寸4、测试代码三、克隆外层标签四、jQuery实现的模态对话框五、嵌套返回顶部六、集体绑定事件一、each循环<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery循环</title&原创 2020-05-17 22:03:28 · 286 阅读 · 0 评论 -
JavaScript之jQuery够用即可(查找筛选器、属性操作、jQuery文档处理)
文章目录一、筛选器补充二、jQuery属性操作三、jQuery文档处理一、筛选器补充1、过滤筛选器就是查看某个标签中是否存在另外一个标签// console.log($("div").hasClass("div1")); //判断div中是否存在class为div1的标签,返回布尔值2、查找筛选器请区分文章:JavaScript之jQuery够用即可(jQuery的引入、查找选择器、左侧菜单栏)中的选择器,这里介绍的是筛选器。它们主要功能是差不多的,但是用法上有一定区别,不过它们和JS中的原创 2020-05-17 21:41:45 · 378 阅读 · 0 评论 -
JavaScript之jQuery够用即可(jQuery的引入、查找选择器、左侧菜单栏)
文章目录一、写在前面二、jQuery的引入二、各种查找筛选器四、实例之左侧菜单栏一、写在前面JQuery世界上使用最广泛的一个库,它是一个轻量级的库,文件大小只有几十k,但是功能却相当强大。并且它可以兼容CSS的多个版本和各种浏览器,这也是它用途极为广泛的原因。接下来几篇将要介绍jQuery的相关用法。二、jQuery的引入1、jQuery的下载它在很多网站都可以下载到,这里推荐一个jquery下载所有版本(实时更新)。下载完了后是一个压缩包,解压之后是一个js文件,我们把它复制到我们的项目文件原创 2020-05-15 16:57:12 · 295 阅读 · 0 评论 -
JavaScript之实例练习(正反选、二级联动)
文章目录正反选案例二级联动案例正反选案例1、使用的原理全选操作,就是遍历整个表格中的每一项,将checked设置为True取消则是将checked全变为false就行反选则是非原来的状态(原来选中,非就是不选中)2、练习代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>正反选</title></head原创 2020-05-13 13:28:57 · 278 阅读 · 0 评论 -
JavaScript之实例练习(模态对话框详解)
文章目录一、Class的属性二、模态对话框一、Class的属性1、class的常用操作获取对象所有class: elementNode.className给对象添加class:elementNode.classList.add给对象去除class:elementNode.classList.remove2、练习代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-05-13 13:18:43 · 638 阅读 · 0 评论 -
JavaScript之元素对象的“增删改查”
文章目录一、增加元素二、删除元素三、更改元素四、元素查找五、练习代码一、增加元素先创建一个空标签对象:var ele=document.createElement("p"); //创建一个空的p标签对象再添加上内容,并且修改样式:ele.innerHTML="<h2>P标签</h2>";ele.style.color="red";ele.style.fontSize="20px";最后就可以加到你需要的位置了,这里就加到这里就放到一个div1盒子里面: var原创 2020-05-11 15:55:39 · 391 阅读 · 0 评论 -
JavaScript之DOM对象(Event事件)
文章目录一、Event事件汇总二、用法案例1、serche搜索框2、onload加载3、事件绑定——标签内4、事件绑定——JS接函数5、onsubmit表单提交6、事件传播HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript。一、Event事件汇总onclick 当用户点击某个对象时调用的事件句柄。ondblclick 当用户双击某个对象时调用的事件句柄。onfocu原创 2020-05-11 15:26:11 · 607 阅读 · 0 评论 -
JavaScript之DOM对象(Node结点属性、导航属性、页面查找)
文章目录DOM与Node节点自身属性导航属性页面查找DOM与Node节点1、DOM的概念DOM 是 W3C(万维网联盟)的标准,DOM 定义了访问 HTML 和 XML 文档的标准。W3C 文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。2、DOM的分类核心 DOM : 针对任何结构化文档的标准模型XML DOM : 针对 XML 文档的标准模型,定义了所有 XML 元素的对象和属性,以及访问它们的方法。HTML DOM :针对 HT原创 2020-05-09 19:53:19 · 384 阅读 · 0 评论 -
JavaScript之BOM对象(JS函数作用域、window、history、location对象)
文章目录一、JS作用域二、window窗口三、history对象四、location对象本篇文章来简单介绍一下JS作用域,以及BOM对象中的三个基础对象,分别是window对象、history对象和location对象。一、JS作用域1、函数嵌套作用域 //函数作用域 var place="Beijing"; //外部定义的变量 function outer() { var place="Chengdu"; //outer函数下的重新定义原创 2020-05-08 18:27:56 · 312 阅读 · 0 评论 -
一篇文章带你快速入门JavaScript(自学者福利)
文章目录一、开始之前二、数据类型1、变量2、数字类型(number)3、字符串类型(string)布尔型、Null和Undefined4、数据类型转换三、运算符控制语句一、开始之前1、JavaScript的简史1)1992年Nombas开发出C-minus-minus,也叫C–,没错,就是C++的另一个兄弟。它是嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase,是...原创 2020-05-07 00:29:04 · 725 阅读 · 0 评论 -
Html之实例练习(轮播图片、放大镜效果、面板拖动)
文章目录一、轮播图片二、放大镜效果三、面板拖动本篇将简单演示一下HTML里的轮播图片、放大镜效果和面板拖动的实例,代码已经打包好,需要参考的请自行下载一、轮播图片1、效果图2、JS核心部分<script> //用一个全局变量,来保存当前轮播到图片(圆点)的索引 var i=0;//通过jquery自动创建按钮标签 var img_num=$(".img li").length; //获取图片数量 //循环将每一个小圆圈加到ul里面 f原创 2020-05-19 21:49:14 · 1033 阅读 · 0 评论 -
html之CSS设计(float定位和position定位详细分析)
文章目录一、float浮动二、position定位今天来谈谈网页设计中的float定位和position定位,这两个在网页排版中是必不可少的操作,当然float其实用得更多。一、float浮动1、文档流指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。脱离文档流也就是不遵循普通的布局排版,采用自己设定的规则来排版。能够脱离文档流的两个方法是使用float和position中...原创 2020-05-01 19:17:07 · 1101 阅读 · 0 评论 -
html之CSS设计(文本、边框、列表标签、display设置、内外边距)
文章目录一、文本属性二、边框属性三、列表标签四、display设置五、内外边距本篇文章主要介绍CSS设计中的文本属性、边框边距、列表标签、display的几种用法,还有一个最容易被忽视的点,就是内外边距的设定,在网页设计中,边距的控制是极为重要的。(在“二、边框边距”中有各种边框样式总结)一、文本属性1、属性文本大小:font-size: 10px;对齐方式:text-align: c...原创 2020-04-28 18:36:44 · 2652 阅读 · 0 评论 -
html之CSS设计(CSS伪类、优先级、字体属性、背景属性)
文章目录一、CSS伪类二、CSS优先级三、CSS属性1、CSS颜色设置2、颜色属性3、背景属性本篇文本主要介绍html编程中的CSS伪类、优先级、字体属性、背景属性,前两种是CSS选择器方面,后两类是编辑方面,本篇文章之后的内容也主要是CSS设计的编辑方面一、CSS伪类1、属性用法点击过后:a:link {color: #FF0000}初始状态:a:visited {color: #0...原创 2020-04-27 17:34:37 · 387 阅读 · 0 评论 -
html之CSS设计(四种引入方式、各种选择器)
文章目录一、CSS简介二、四种引入方式三、CSS选择器四、练习代码本文主要介绍一下CSS的基本操作,四中引入方式和选择器、属性选择器的使用一、CSS简介1、介绍:也叫层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离。简单来说就是控制网页样式的。2、CSS的学习方向怎么找标签(选择器)如何操作标签对象(element)二、四种引入方式1、style属性<...原创 2020-04-26 19:56:19 · 532 阅读 · 0 评论 -
Html前端基础(select下拉选标签、table表格标签)
文章目录一、select 下拉选标签二、table表格标签三、练习代码继续前两篇的Html前端基础的内容,本文主要关于 <select>下拉选标签和 <table>表格标签一、select 下拉选标签1、form表单补充checked 会默认选择一个disabled 使用户在选框上无法进行操作<textarea></textarea> ...原创 2020-04-24 21:05:10 · 4163 阅读 · 0 评论 -
Html前端基础(form表单、img标签、a href标签、id的作用)
文章目录一、img标签二、a标签(带href)三、form表单本篇主要分析Html前端开发中的img图片标签、a href超链接标签、form表单标签,其中form是重点一、img标签1、标签嵌套的规则:不能在内联标签内嵌套块标签2、img下的属性:img标签:src: 要显示图片的路径.alt: 图片没有加载成功时的提示.title: 鼠标悬浮时的提示信息.width: 图片...原创 2020-04-23 18:31:23 · 2977 阅读 · 0 评论 -
Html前端基础(这些基础标签你必须知道!)
文章目录HTML基本常识一些基础标签练习代码本文主要介绍Html的基础知识,和一些必须知道的Html标签及它们的用法功能HTML基本常识1、浏览器: 就是一个解释器,用来解释Html文档的。每个页面展示的内容,就是server端返回给客户的一推字符串代码,用浏览器渲染一下就变成了各种页面上绚丽的效果2、CS模式: C->client; S->serverBS模式: B-&...原创 2020-04-23 15:23:12 · 458 阅读 · 0 评论