![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端大集合
就html、css、JavaScript等零散的东西。本人已转行,因而以前无聊摘录的笔记作统一处理。
加菲猫惹
黄家有女初长成
展开
-
表单扩展?
表单自带样式。美化表单控件: 1. label+ : checked; 2. position+opacity;新的input控件:email:电子邮件地址输入框url:网址输入框number:数值输入框range:滑动条 (有min max value等)date/month/week:日期控件search:搜索框color:颜色控件tel:电话号码输...原创 2020-01-06 00:11:07 · 162 阅读 · 0 评论 -
表格扩展?
添加单线: border-collapse:collapse;隐藏空单元:empty-cells:hide;斜线分类:border / rotate列分组:colgroup / col ( 配合使用)原创 2020-01-06 00:07:28 · 125 阅读 · 0 评论 -
HTML5新语义化标签?
(div的替代品,尽量用来替换div标签,提升网站的搜索排名)header:页眉 footer: 页脚 main:主体hgroup:标题组合 nav:导航其实这些都可以用div来实现,只是div无法人性化的将网站进行划分,语义化标签的目的是让网页更加有层次结构,即什么样的注意: header、main、foote...原创 2020-01-06 00:03:43 · 97 阅读 · 0 评论 -
meta扩展学习?
meta添加辅助信息,<meta name=”description”content=”Eileen真是一个其貌双全,斗志昂扬,聪明绝顶的姑娘鸭!”> description为描述,content内容由计算机识别,用户不可见<meta name=”keywords”content=”聪明,美丽,温柔体贴,大方直率可爱”>方便搜索引擎去便利用户搜索<m...原创 2020-01-06 00:02:09 · 161 阅读 · 0 评论 -
link扩展学习?
添加网址标题栏前的小图标:<link rel=”icon”type=”image/x”href=”http://www.mobiletrain.org/favicon.ico”>引入外部文件CSS<link rel=”stylesheet”type=”text/css”href=”theme.css”>DNS预解析<link rel=”dn...原创 2020-01-06 00:01:09 · 108 阅读 · 0 评论 -
文字注解?
ruby、和rt组合。rt标签内的内容为注音,ruby嵌套rt。文字方向?bdo标签,dir属性值为rtl时表从右到左显示。原创 2020-01-06 00:00:10 · 206 阅读 · 0 评论 -
audio与video?
引入音频和视频的标签,属于H5的功能。默认控件是不显示的,可通过controls属性来显示控制条等。video下的source标签是用来兼容各浏览器的,添加多个video格式以作浏览器备选。...原创 2020-01-05 23:59:07 · 174 阅读 · 0 评论 -
embed与object?
给flash和一些插件进行渲染操作的标签。原创 2020-01-05 23:58:24 · 137 阅读 · 0 评论 -
map与area?
各一张图里的某个图形添加链接,area能添加的热区形状为:矩形(对角坐标)、圆形(圆心坐标和半径)、多边形(各首尾相连的坐标)。map标签嵌套area标签。...原创 2020-01-05 23:57:33 · 212 阅读 · 0 评论 -
pre与code?
针对网页中的程序代码的显示效果。通常是pre标签嵌套code标签。原创 2020-01-05 23:56:25 · 167 阅读 · 0 评论 -
br与wbr?
br就是换行(也可以理解为硬换行)、wbr就是软换行(Word Break Opportunity)。即:如果单词过长,或者担心浏览器会在错误的位置换行,那么可以使用wbr元素来添加。如working-<wbr>hard...原创 2020-01-05 23:55:44 · 850 阅读 · 0 评论 -
iframe标签?
可以引入其他的html到当前html中显示。主要是利用iframe的属性进行样式的调节常用属性有:frameborder:是否显示框架周围的边框,属性值为1或0width:定义iframe宽度height:定义iframe高度scrolling:规定是否在iframe中显示滚动条src:规定在iframe中引入URLsrcdoc:规定在iframe中显示的页面内容...原创 2020-01-05 23:54:58 · 94 阅读 · 0 评论 -
引用标签?
blockquote : 引用大段的段落解释q :引用小段的短语解释abbr : 缩写或首字母缩略词(如WHO、W3C缩略词,但是要把缩略词的全称 写在abbr标签的title属性里)address : 引用文档地址信息cite : 引用著作的标题引用语义化标签的好处是:方便浏览器根据标签执行,虽然也可以用span和div解决,但还是建议什么样的语境用什么样的标签...原创 2020-01-05 23:53:38 · 188 阅读 · 0 评论 -
strong与b、em与i?
表现形态都是文本加粗和文本斜体,但em和i是可以用css来替换的。而且省略了用多个span标签,也就是说抛开了class选择器的繁杂;一般嵌套方式是i嵌套em和span,所以在css中,可直接对i标签下的em操作,解除多个class的烦恼。具体区别是:strong与b标签具备语义化,em与i标签不具备语义化...原创 2020-01-05 23:52:31 · 202 阅读 · 0 评论 -
HTML与XHTML区别?
XHTML更严格规范一些。体现在:DOCTYPE文档及编码 元素大小写 属性布尔值(如checked=”checked”,checked属性值只有一个,且是相等的,在HTML中可省略属性值,但在XHTML中不可省略) 属性引号 图片的alt值 单标签写法 双标签闭合...原创 2020-01-05 23:50:29 · 115 阅读 · 0 评论 -
HTML的前期了解
<!DOCTYPE html>: 这句声明,是告诉浏览器,请使用HTML5标准来执行这个网页。<!-- --> 注释意义:1.把暂时不用的代码注释起来,方便以后使用。2.对开发人员进行提示。光标悬停在开头按住ctrl + /<hr /> 水平线<br /> 换行标记  空格图...原创 2019-12-31 13:08:09 · 98 阅读 · 0 评论 -
CSS解说(二)
目录浮动(float)普通流(normal flow)浮动(float)什么是浮动?浮动详细内幕特性总结:浮动(浮漏特)版心和布局流程布局流程一列固定宽度且居中两列左窄右宽型通栏平均分布型浮动(float)普通流(normal flow)也称标准流或文档流。我们说的网页布局的核心,就是用CSS来摆放盒子位置,那么如何把盒子摆放到合适的位置?...原创 2019-12-29 23:18:00 · 332 阅读 · 0 评论 -
CSS解说(一)
目录初识CSSCSS样式规则font字体样式属性font-size:字号大小font-family:字体Unicode字体font-weight:字体粗细font-style:字体风格font综合设置字体样式:CSS注释调试工具chrome使用选择器标签选择器(元素选择器)类选择器多类选择器id选择器id选择器和类选择器的区别...原创 2019-12-29 23:17:26 · 816 阅读 · 0 评论 -
HTML基本介绍(一)
目录浏览器内核HTML标签认识属性图像标签相对路径与绝对路径链接标签锚点定位base标签特殊字符标签注释标签列表标签无序列表有序列表自定义列表表格标签表格标题标签:表格属性合并单元格表单标签input控件(单标签)label标签textarea控件(文本域)下拉菜单form表单域HTML5新增标签...原创 2019-12-29 23:16:43 · 217 阅读 · 0 评论 -
VS code
快捷键:多光标: alt + 鼠标左键 多光标操作,即可统一添加字母修改单词删除属性等创建标签的快捷键: 单词 + tab键创建初始代码快捷键: ! + 回车注释快捷键: ctrl + / 整行注释的话可以选择光标定位在开头按住ctrl + /(此方法可整行注释也可整行删除注释)...原创 2019-12-31 13:08:25 · 177 阅读 · 0 评论 -
PostCSS?PostCSS常用插件?
PostCSS?指将css文件通过post方式转换为另一个css文件。PostCSS本身是一个功能比较单一的工具,它提供了一种方式用JavaScript代码来处理CSS。利用postCSS可以实现一些工程化的操作,如:自动添加浏览器前缀,代码合并,代码压缩等。(这里我们在进行一个工程化的处理叫做postCSS,webpack也是用于进行工程化的处理打包等)官方网址:https://po...原创 2020-01-16 01:15:43 · 372 阅读 · 0 评论 -
Sass和Less?及语法?
Sass和Less?Sass和Less都属于CSS预处理器,Css预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,如:变量、语句、函数、继承等概念。将CSS作为目标生成文件,然后开发者就只要使用这种语言进行CSS的编码工作。官方地址:http://lesscss.org/VSCode插件:Easy LESS官方地址:http://sas...原创 2020-01-16 01:12:29 · 344 阅读 · 0 评论 -
Bootstrap?
Bootstrap?Bootstrap是最受欢迎的HTML、CSS和JS框架,用于开发响应式布局、移动设备优先的WEB项目。如果不想写样式也可以用bootstrap来进行快速的开发。提供大量的class样式,我们要了解这些class样式的使用核心技巧,以便来开发项目。特色:响应式布局 基于flex的格栅系统 提供丰富的组件和工具方法 常见交互使用官网:https://get...原创 2020-01-13 22:33:27 · 609 阅读 · 0 评论 -
offset、client 、scroll
三组和大小、位置相关的属性offset、client、scrolloffset系列属性:offset为偏移量。用于获取如div的坐标(box.offsetLeft; box.offsetTop;),而获取div的大小用(box.offsetWidth; box.offsetHeight这两属性包括盒子的边框和内边距padding)。还存在offsetParent属性:指获取距离当前元素最...原创 2019-12-29 23:25:34 · 92 阅读 · 0 评论 -
BOM
目录BOM的概念BOM的顶级对象window页面加载事件定时炸弹和闹钟案例弹出框显示删除成功且3s后隐藏弹出框案例之倒计时location对象案例点击按钮让div盒子缓缓向右移动URL组成history和userAgentBOM的概念BOM(Browser Object Mode)是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口...原创 2019-12-29 23:25:14 · 155 阅读 · 0 评论 -
事件详解
目录事件详解及应用注册事件的另两种方式处理注册事件的兼容性问题移除事件处理移除事件的兼容性问题事件的三个阶段事件冒泡的作用事件对象案例之跟着鼠标走的图片获取页面滚动的距离获取页面滚动距离的浏览器兼容性问题解决获取鼠标在页面上的位置的浏览器兼容性解决获取鼠标在盒子上的坐标取消默认行为的执行案例之文本框只能输入数字事件详解及应用注册...原创 2019-12-29 23:24:45 · 121 阅读 · 0 评论 -
DOM、BOM(一)
目录Web APIAPI概念JavaScript的组成DOMDOM概念获取页面中的元素根据id获取元素根据标签名获取元素根据标签的name属性获取元素根据标签的class属性获取元素根据选择器来获取元素注册事件及应用注册事件步骤:案例之点击按钮切换图片属性操作非表单元素的属性案例二点击按钮显示和隐藏div同时按钮文字改变案例...原创 2019-12-29 23:24:20 · 315 阅读 · 0 评论 -
JavaScript基础语法(六)
目录数据在内存中存储内置对象MDN如何学习一个方法?需要关注什么?内置对象的Math对象案例一随机生成颜色RGB案例二模拟实现Math里面的max()/min()内置对象的Date对象1.空构造函数 获取的是当前的时间对象2.构造函数中传入毫秒值3.可以传入日期形式的字符串4.可以传入数字如何获取日期对象的毫秒值日期格式化方法获取日期指...原创 2019-12-29 23:23:52 · 487 阅读 · 0 评论 -
JS基础语法(五)对象
对象什么是对象现实生活中:万物皆对象,对象是一个具体的事物,一个具体的事物就会有行为和特征例如:一部车、一个手机车是一类事物,门口停的那辆车才是对象。那么车的特征有:红色、四个轮子;行为有:驾驶、刹车JavaScript中的对象JavaScript中的对象其实就是生活中对象的一个抽象 JavaScript中的对象在属性方面是无序的集合,其属性可以包含基本值、对象或...原创 2019-12-29 23:23:22 · 159 阅读 · 0 评论 -
JS基础语法(三)数组
目录数组为什么要学习数组数组的概念和定义通过数组字面量创建数组如何获取数组中的数据获取数组中最后一项的值获取数组的长度数组的长度和元素都可以动态的改变获取数组中的每一项并打印(遍历数组)遍历数组,从最后一项开始反过来打印清空数组数组案例求一组数中的最大值和最小值,以及其所在位置将数组中不为0的元素组成一个新的数组翻转数组冒泡排序从小到...原创 2019-12-29 23:22:12 · 169 阅读 · 0 评论 -
JS基础语法(二)表达式、流程控制
目录表达式和语句布尔类型的隐式转换流程控制顺序结构分支结构(选择结构)if语句三元运算符switch语句循环结构while循环do...while循环for循环循环案例打印10*10的符号正方形打印三角形九九乘法表求数列1,1,2,3,5,8,13....数列的第12个数的值break和continue调试表...原创 2019-12-29 23:21:32 · 180 阅读 · 0 评论 -
JS基础语法(四)函数
目录函数为什么要有函数什么是函数函数的定义带参数的函数形参和实参函数使用案例求n个数的最大值判断一个数是否是素数函数的返回值返回值案例阶乘案例判断一个年份是否是闰年输入某年某月某日,判断这一天是这一年的第几天?arguments的使用函数其他匿名函数自调用函数函数是一种数据类型代码规范变量和作用域作用域链...原创 2019-12-29 23:22:47 · 284 阅读 · 0 评论 -
Javascript基础(一)简单介绍、数据类型、操作符
目录JS基础网页、网站和应用程序JS的强大应用举例Javascript介绍Javascript是什么Javascript最初目的Javascript现在的意义(应用场景)JS和HTML、CSS的区别Javascript的组成ECMScript-----Javascript的核心BOM---浏览器对象模型DOM---文档对象模型Javascript...原创 2019-12-29 23:20:06 · 338 阅读 · 0 评论 -
PS基本掌握
快捷键把某个图片或部位切出来,使用切片工具 保存新切出来的图片快捷键是 ctrl + alt + shift + s 放大快捷键是 alt+鼠标滚轮 显示隐藏的标尺:ctrl + r 。 可以直接在标尺上拖拽参考线,可以通过移动工具拖拽回去,也可以在视图菜单中选择清除所有的参考线切图流程:方法一:透过矩形选框工具,选择指定的区域。微调:alt 减少区域...原创 2019-12-31 13:09:23 · 127 阅读 · 0 评论 -
前端涉及的PS简单介绍
PS前言PS一般是用来设计海报做电商和UI的,而在前端设计中,我们通常需要熟悉以下几点简单的抠图 简单的修改PSD效果图 熟练的切图PS(photoshop)基本使用PS界面组成上面两层为:菜单栏、具体工具选项栏; 左边为工具栏、工作区(或者操作面板)基本操作新建文档:ctrl+N 单位可选:像素、厘米、毫米 屏幕显示:单位 像素...原创 2019-12-29 23:19:23 · 707 阅读 · 0 评论 -
字体图标的应用?
字体图标的应用?@font-face是CSS3中的一个模块,他主要是把自己定义的web字体嵌入到你的网页中,随着@font-face模块的出现,我们在web的开发中使用字体就不只是限于web的安全字体。即常见的首页小图标,我的小图标,购物车小图标都是以文字式引入到页面中的,这样我们就可以使用font-size来改变图标的大小等。图标库网址有:阿里巴巴矢量图标库。通过将矢量图标下载,然后...原创 2020-01-19 23:32:21 · 119 阅读 · 0 评论 -
元素在盒子里垂直水平居中?
元素在盒子里垂直水平居中?方案一:定位这里则就需要父容器设置为position:relative;子容器设置为positive:absolute;设置了定位的元素就支持了上下左右(top、bottom、left、right)四个坐标。关于定位下的三种方法设置子元素居中:(假如父盒子400*400,子盒子200*200)在清除子盒子高度下设置居中: top:50%; left:50%...原创 2020-01-16 01:25:29 · 1058 阅读 · 0 评论 -
常见的几种清除浮动(高度塌陷)的方法?
常见的几种清除浮动(高度塌陷)的方法?我们经常把解决高度塌陷问题叫做清除浮动。高度塌陷问题------指父元素高度自适应(即父元素不设置高度或高度为auto,这时的父元素就靠子元素来撑开),子元素浮动float后,造成父元素高度为0的问题。高度塌陷解决方法一:给父元素设置高度。缺点就是父元素无法高度自适应,因为子元素的高度不确定,若把父元素的高度定死,则一旦浮动的子元素高度大于父元...原创 2020-01-16 01:25:54 · 1811 阅读 · 0 评论 -
网站性能优化之图片整合?
网站性能优化之图片整合?1.图片整合技术概念:CSS Sprites(雪碧图或css精灵或滑动门技术),是网页图片处理的一种方式,它允许你 将一个页面涉及到的所有零星图都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅的慢慢显示出来了。2.原理:将许多的小图片整合到一张大图中,利用css中的背景图background-image属性,backgrou...原创 2020-01-16 01:26:01 · 419 阅读 · 0 评论 -
网站性能优化之图片整合?
网站性能优化之图片整合?1.图片整合技术概念:CSS Sprites(雪碧图或css精灵或滑动门技术),是网页图片处理的一种方式,它允许你 将一个页面涉及到的所有零星图都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅的慢慢显示出来了。2.原理:将许多的小图片整合到一张大图中,利用css中的背景图background-image属性,backgrou...原创 2020-01-19 23:32:12 · 159 阅读 · 0 评论