- 博客(45)
- 收藏
- 关注
RSS订阅原创 文本格式化标签
1.认识文本格式化标签标签名作用<u></u> <ins></ins>标签文本内容下面添加下划线<s></s> <del></del>标签文本内容添加删除线<i></i> <em></em>标签文本内容变斜体<b></b> <strong></strong>标签文本内容加
2021-05-25 13:43:01
213
原创 vertical-align使用方法
介绍:vetical-align主要用来处理图片和文字直接的位置关系首先我们需要了解中文文本的组成,文本有基线、底线、中线、顶线组成。可以把文字想象在一个文本框里面,文本四条线的高度,构成了文本框的高。演示:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device.
2020-12-06 22:14:21
6234
1
原创 移动端的特殊样式
前言:移动端浏览器给一些标签增加了默认的样式,有时候并不需要,这时候就需要去除默认样式。去除特殊样式1.去除点击链接高亮效果2.去除input:button默认样式1.去除点击链接高亮效果a { /*去除高亮效果,点击链接背景颜色变为透明色*/ -webkit-tap-highlight-color: transparent;}2.去除input:button默认样式input { /*去除自带的默认样式*/ -webkit-appearance: none;}...
2020-12-04 19:04:42
272
原创 webstorm关机智能代码提示
智能代码提示固然非常好用,但是不利于新手记住代码,也许当时记住了,很快也就会忘记代码,导致对代码记忆不全,很容易混乱，因此需要关闭智能代码提示功能。关闭和打开智能代码提示1.0 关闭代码提示2.0 打开智能代码提示1.0 关闭代码提示鼠标左键单击【File】选中里面的 power save mode选项，当 power save mode前面出现对号,即为关闭了代码智能提示。2.0 打开智能代码提示鼠标左键单击【File】选择里面的 power save mode选项,当 power sav.
2020-12-01 18:46:34
732
原创 Html5--audio标签使用教程
audio标签简介audio标签是网页中播放音频来使用的，audio是一个双标签audio标签使用教程1.0 新建audio标签2.0 audio标签各种属性使用方法3.0 audio解决各种浏览器对音频的兼容方式1.0 新建audio标签用法:<audio src="url"></audio>注意事项: 1. audio是一个双标签 2. 目前audio支持三种音频格式 2.1: mp3文件的音频支持 2.2: ogg Vorbis文件的音频支持 2.
2020-11-23 14:33:26
8484
原创 HTML表格标签(table)
table标签简介:tabale标签是表格标签，html中较为常用的标签之一，主要用来制作表格，完成一些对比和统计工作table具体使用:创建一个表格tr、td、th标签的作用:tr标签:td标签:th标签:创建一个表格<table class="container" id="xs"> <tr> <th>姓名</th> <th>年龄</th> .
2020-11-22 15:39:15
1966
1
原创 行内元素和块级元素添加浮动后变化
浮动,开发网站中最常用的技术,标签添加浮动后会产生不同效果,让我们一起来探索一下添加浮动后,对元素产生的变化。行内元素和块级元素添加浮动后变化行内元素添加浮动(float)后的变化行内元素添加浮动(float)后的变化想必大家都知道，在Css中，行内元素不能设置高度和宽度，但是我们可以通过一些技术,让行内元素脱离正常文档流,从而给行内元素添加高度和宽度,比如浮动.案例我在html文件中创建了一个a标签，a标签属于行内标签,不能直接指定大小,但是当我们给a标签添加浮动之后,a标签就相当于从行.
2020-11-16 21:45:40
3225
2
原创 子元素浮动,父元素高度发生塌陷
子盒子高度于父盒子高度的关系子盒子影响父盒子的高度浮动的盒子不会撑开父盒子的高度解决方案方法1:方法2:子盒子影响父盒子的高度在开发过程中,由于不方便给父元素高度,导致父元素没有高度,但是可以通过给子元素高度,从而子元素高度撑开父盒子的高度,也让父盒子有了高度,这样父盒子的高度就会自适应。案列案例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l
2020-11-16 15:22:50
544
原创 CSS3 border-radius 属性
border-radius介绍：border-radius可以给块级元素和行内块元素设置圆角,属性的值可以写像素、百分比、简写像素,要想border-radius属性生效,标签必须有大小。案例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia
2020-11-10 12:49:52
898
原创 Css外边距合并
Css外边距合并介绍为什么会有外边距合并产生:当有两个上下垂直外边距合并时,会产生外边距合并,外边距的大小取决于它们中最大的外边距。举例说明:有A和B两个上下垂直盒子，A盒子有一个下边距20px,B盒子有一个下边距10px的盒子,他们产生的外边距为20px。外边距合并解决方案:要想实现合并之前的效果,就需要给其中一个盒子指定大小，另外一个盒子不需要给大小。...
2020-11-08 12:34:38
116
原创 标签显示模式(display)
(1)块级元素(block)常见得块级元素有:<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>，块级元素得特点: 1. 自己独占一行 2. 可以设置宽度和高度，外边距以及内边距都可以控制 3. 宽度默认是容器(父级宽度)得100%(2)行内元素(inline)常见的行内元素有:<a>、<strong>、<b>、<em>、<i&
2020-11-04 10:43:27
243
原创 01.meta视口标签
meta语法格式:<meta name="viewport" content="width=device-width",user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0 >属性作用viewport视口标签width=device-width宽度设置为和设备一样宽user-scalable用户是否缩放,yes(1)或no(0)initial-scale初
2020-07-19 01:38:08
322
原创 flxe布局介绍
常见父项属性属性作用flex-direction设置主轴的方向justify-content设置子元素的排列方式flex-wrap设置子元素是否换行align-content设置侧轴上子元素的排列方式(多行)align-items设置侧轴上子元素的排列方式(单行)flex-flow复合属性,相当于同时设置了flex-direction和flex-wrapflex-dirction参数作用row默认值,just
2020-07-19 01:25:39
464
原创 06-CSS3透视
什么是透视我们写的css2D都是平面效果,无法做到立体的效果，如果想要做立体的效果，我们就需要z轴,直接添加z轴是没有效果的,需要在元素的父级元素上添加透视效果。一个简单的透视代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal
2020-06-21 21:30:58
336
原创 05---Css3的3D动画
一、Css3动画的基本使用先定义动画使用(调用动画) /*1.定义动画*/ @keyframes 动画名称 { /*开始状态*/ 0% { /*动画动作*/ transform: translateX(0); } /*结束状态*/ 100% { transform: translateX(1000px); } }/*2.使用动画*/div { width: 100px; height: 100px; background-
2020-06-20 09:08:15
85
原创 04---2D转换(移动、旋转、缩小)
2D转换之移动translate(1)、transform: translate(x,y)作用: 水平和垂直移动多少距离参数: x代表x轴 单位px ; y代表y轴 单位px注意:如果translate只给一个参数,那么移动得是X轴，y轴不变(2)、transform: translateX(x)作用: 水平移动x像素参数: x代表水平移动多少距离,单位x。(3)、transform: translateY(y)作用: 垂直移动y像素参数: y代表垂直移动多少距离,单位y。重点:
2020-06-19 20:40:52
198
原创 03---Css3伪元素选择器
伪元素选择器选择器作用::before在元素内部前面插入内容::after在元素内部后面插入内容注意:before和after必须有conttent属性before在内容得前面,after在内容得后面before和after创建一个元素,但是属于行内元素因为在dom中看不见创建得元素,所以称之为伪元素伪元素和标签选择器得权重 都为1一个简单得案例<!DOCTYPE html><html lang="en"><head
2020-06-17 22:58:22
119
原创 02---Css3结构伪类选择器
结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。结构伪类选择器选择器作用E:first-child匹配父元素中第一个子元素EE:last-child匹配父元素中最好一个子元素EE:nth-child(n)匹配父元素中第n个子元素EE:first-of-type指定类型E得第一个E:last-of-type指定类型E得最好一个E:nth-of-type()指定类型E得
2020-06-17 22:13:02
72
原创 01---Css3属性选择器
一个简单得案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> button {
2020-06-17 20:40:22
71
原创 CSS cursor属性
cursor属性可以改变鼠标移动标签上得形状常用cursor方法总结:属性作用pointer鼠标移动到标签上变成一只小手crosshair光标变成十字架move此光标指示某对象可被移动auto浏览器默认得光标...
2020-06-17 19:54:18
322
原创 02---HTML5新增input表单
HTML5新增了很多表单属性,非常重要一个简单得表单演示:<form action=""> 用户名: <input type="text"> <input type="submit" value="提交"></form>HTML5常见表单属性总结type表单属性作用email限制用户输入为Email类型url限制用户输入为url地址date限制用户输入为日期类型time限
2020-06-17 14:30:22
87
原创 01--HTML5新增语义化标签
1. <header><header>: 头部标签 2. <nav></nav>: 导航标签 3. <article></article>: 内容标签 4. <section></section>: 块级标签 5. <aside></aside>: 侧边栏标签 6. <footer></footer>： 底部标签...
2020-06-17 13:18:47
134
原创 jQuery下载和使用
01.什么是jQueryjQuery是一个快速，小型且功能丰富的JavaScript库。借助易于使用的API（可在多种浏览器中使用），使HTML文档的遍历和操作，事件处理，动画和Ajax等事情变得更加简单。兼具多功能性和可扩展性，jQuery改变了数百万人编写JavaScript的方式。02.jQuery下载jQuery官网:https://jquery.com/进去是下面得界面,点击黄色按钮下载得是最新版jQuery03.下载版本有两个经常使用得版本:一个为压缩版本(生产版),优点(体积小
2020-06-01 19:16:11
15917
5
原创 css实现圆角矩形
一个在日常开发中，前端人员经常会遇到圆角矩形，让我们一起来学习一下圆角矩形吧，下面直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=], initial-scale=1.0"> <title>Document</title> <
2020-05-27 20:05:35
4409
原创 offset client scroll 页面滚动总结
1.offset介绍offset概述属性和说明offset和style区别offset概述1. offset 概述offset属性，可以动态得到元素位置，元素大小等特性:属性和说明获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）注意：返回的数值都不带单位属性说明offsetParent返回作为该元素得带有定位得父级元素,没有定位,返回bodyoffsetTop返回相对于父级元素得上方距离offsetLeft返回相对于父级元素得左边距离
2020-05-23 22:21:01
88
原创 JacaScript事件执行机制
1.js是单线程JavaScript最大得特点就是单线程，也就是说，同一事件只能去做一件事情单线程就意味着任务需要排序，前一个任务结束，才会执行下一个任务，导致js执行时间过长，这样会造成页面渲染不连贯，导致页面渲染加载阻塞1.1.同步与异步为了解决单线程问题，利用cpu多核计算性能，HTML5提出了web Worker标准，允许JavaScript创建多个线程，于是，js中出现了同步和异步同步：前一个任务结束后，才去执行下一个任务,程序得执行顺序，与任务排序得顺序一致异步:前一个任务执行中，我
2020-05-23 09:05:35
132
原创 javascript中定时器
js里面有两种定时器window.setTimeout(调用函数,延迟时间)window.setInterval(调用函数，延迟时间)1.window.setTimeout(调用函数,延迟时间) 定时器得特点1.window可以省略2.延迟得单位时间为毫秒 ，可以省略3.调用函数可以用字符串,格式为: ‘函数么()’ ，不提倡这样写4.文档页面中可能存在多个定时器，我们可以给它起名称var dsq1=setTimeout(调用函数,3000);var dsq2=setTimeout(
2020-05-23 08:21:11
717
原创 键盘常用事件总结
什么是键盘事件:当我们按下键盘中得某个键时，所触发得事件常用键盘属性和说明:属性说明onkeyup某个键盘按下被弹起时触发onkeydown某个键盘按下时触发onkeypress某个键盘被按下时触发 不支持一些功能键 比如ctrl shift 等onkeyup 和onkeydown 不区分大小写，onkeypress区分大小写常用键盘事件对象属性和说明属性说明e.key记录触发键盘事件得键 有些浏览器不支持e.keyCode记
2020-05-23 07:33:12
435
原创 windown对象常见事件
**1.窗口加载事件:window.onload **特点:当文档内容全部加载完毕(图片,图像,css属性)，然后就调用的处理函数注意1.window.onload 可以写在页面元素的上方，因问文档内容全部加载完毕，才去执行window.onload2.传统注册事件onload，只能写一个，如果有很多个，以从上到下中的最后一个排序为准。3.如果使用addEventListener 则没有限制，可以执行很多次2.窗口加载事件语法:document.addEventListener(‘DOMCon
2020-05-22 16:31:33
271
原创 JS中ECMASCript DOM BOM理解
1.什么是DOM文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。简单理解**????*W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。1.1DOM数DOM树 又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。文档：一个网页就是一个文档，DOM中是使用document表示.节点：网页中的所有内容，在
2020-05-22 09:47:23
319
原创 事件委托
事件委托核心原理:给父级添加监听器，利用冒泡引想每一个子节点，不用给每个节点都添加监听事件<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li></ul>var ul = document.querySelector('ul');ul.addEventListener('click',
2020-05-21 21:38:36
71
原创 事件对象
在触发某个事件时，系统会给我们创建一个事件对象(event) 事件执行期间，event才会存在，当事件执行完毕，event会自动销毁 兼容问题:IE9版本一下不支持event,支持window.event 事件对象是事件一系列相关得集合<button>按钮</button> <script> var btn = document.querySelector('button'); btn.onclick = functi..
2020-05-21 19:10:36
79
原创 解除事件得方式
1.传统事件解除方式语法:事件源.事件类型 = null<button>按钮</button><script> var btn = document.querySelector('button'); btn.onclick = function() { alert('Hello World'); btn.οnclick=null }</script>2.方法监听注册方式:(1)：事件源.removeEventListen
2020-05-21 13:22:57
158
1
原创 js动态创建元素
动态创建元素有三种方法:document.write();element.innerHTMLdocument.createElement()document.write()方法特点：单词翻译：语法意思write写作用:document.write() 将一些文本直接写到页面中,页面文档运行完毕后，会导致它得重绘。通俗理解:创建一个新得文档界面演示代码://当代码执行时,document.write()方法，会在最后显示document.write('我是最后
2020-05-20 22:20:45
447
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人