随笔分类 - HTML
摘要：作为css的预处理less,拥有着比css更快捷方便，扩展了css的变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 如何你已经回使用css，那么less就很容易上手了。如果不使用less.min.js的情况， 介绍如何将less文件转换成css文件。 less编译成css方法一： 使用k
阅读全文
posted @ 2020-06-12 23:22
前端一点红
摘要：css中，min-width是用来限制元素的最小宽度，max-width用来限制元素的最大宽度，也就是说当元素的width大于max-width,或者小于min-width。就被它们的值所代替，尤其适用于网站的自适应。下面将具体介绍下关于min-,max-的区别和联系： 1、min-width,ma
阅读全文
posted @ 2020-06-12 23:14
前端一点红
摘要：1、概述 html实现用时间点来展示事件发生点来代替用table展示一条条数据，能够给人清晰、一目了然能够看清事情发生的过程，UI页面也显示的那么清晰。如何用css+html做出时间轴展示事件点的？先来看看下面的效果： 做出这样效果的时间轴展示事件点，需要了解一下知识： 1、css位置：positi
阅读全文
posted @ 2020-06-12 23:07
前端一点红
摘要：在了解什么是重构和回流之前，我们应该先看看浏览器是怎么渲染的？ 浏览器的渲染过程： 1.处理HTML脚本，生成DOM树（DOM树里包含所有的HTML标签，包括display:none和js动态添加的元素等）2.处理CSS脚本，生成CSSOM树（DOM和CSSOM是独立的数据结构）3.将DOM树和CS
阅读全文
posted @ 2020-06-12 23:03
前端一点红
摘要：由于http是无状态的协议，这种特性严重阻碍了客户端与服务器进行动态交互，例如购物车程序，客户在购物车中添加了商品，服务器如何知道购物车已有的物品呢？为了支持客户端与服务器之间的交互,为了弥补http的不足，目前实现会话跟踪的常用技术方法：cookie、session、url重写、隐藏input。
阅读全文
posted @ 2020-06-12 22:57
前端一点红
摘要：web语义化是什么？ Web语义化，使用语义恰当的标签，可以让页面具有良好的结构，页面元素具有良好的含义，从而让人和机器都能快速理解。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容，然后将收集汇总的信息进行分析，结果为人类所用；另一方面它可以让开
阅读全文
posted @ 2020-06-12 22:53
前端一点红
摘要：在浏览器地址栏输入URL 浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤 如果资源未缓存，发起新请求 如果已缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，否则与服务器进行验证。 检验新鲜通常有两个HTTP头进行控制Expires和Cache-Control： HTTP1.0提供Ex
阅读全文
posted @ 2020-06-12 22:31
前端一点红
摘要：H5使用input标签调用系统默许相机，摄像，录音功能。使用input：file标签, 去调用系统默认相机，摄像，录音功能，其实是有个capture属性，直接说明需要调用什么功能： <input type="file" accept="image/*" capture="camera"> <inpu
阅读全文
posted @ 2020-06-12 22:17
前端一点红
摘要：任何元素都可以设置border 设置宽高可能无效 行内元素设置padding，margin上下是无效的，左右是有效的 外边距合并：指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 外边距合并（叠加）是一个相当简单的概念。但是，在实
阅读全文
posted @ 2020-06-12 22:07
前端一点红
摘要：印象中，渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3，但是 CSS3 特效太优秀不忍放弃，所以在高级浏览器中使用CSS3，而在低级浏览器只保证最基本的功能。二者的目的都是关注不同浏览器下的不同体验，但是它们侧重点不同，所以导致了工作流程上的不同。 名词
阅读全文
posted @ 2020-06-11 15:19
前端一点红
摘要：原理：利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式。常见的hack有1）属性hack。2）选择器hack。3）IE条件注释 IE条件注释：适用于[IE5, IE9]常见格式如下 <!--[if IE 6]> Special instructions for IE 6 here
阅读全文
posted @ 2020-06-11 15:12
前端一点红
摘要：我们都知道在html中引入外部的CSS 有2种方式，link标签和@import，他们又什么区别呢？ 1.从属关系区别@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。 2.加载顺序区别加
阅读全文
posted @ 2020-06-11 15:10
前端一点红
摘要：普通的HTML注释形式是 <!-- 注释 --> 而IE5~IE9这5个版本的IE浏览器还另外支持一种特殊的if条件注释（感觉有点类似模板渲染时的语法结构） <!--[if IE]> html语句 <![endif]--> 这样在处理IE浏览器兼容性问题的时候就可以把hack代码集中在一块了，或者其
阅读全文
posted @ 2020-06-11 15:08
前端一点红
摘要：1、IE6不支持min-height，解决办法使用css hack： .target { min-height: 100px; height: auto !important; height: 100px; // IE6下内容高度超过会自动扩展高度 } 2、ol内li的序号全为1，不递增。解决方法：
阅读全文
posted @ 2020-06-11 15:05
前端一点红
摘要：把已有的图片转换为WebP格式 要使用WebP格式，需要将你网站用到的图片都制作一份WebP格式的版本，如果你使用CDN服务商，它们一般都会提供转码到WebP格式的选项。如又拍云： 增加这样的配置后，我们可以通过给图片URL加上相应的后缀，来使用WebP格式的版本资源。 你也可以使用webpack、
阅读全文
posted @ 2020-06-11 15:00
前端一点红
摘要：在开发中，css样式有一些属性往往需要重复使用，为了避免代码冗余，降低维护成本。我们需要使用CSS预编译工具【Sass/Less/Stylus】，随着这些工具的流行，CSS变量也开始规范制定，目前很多浏览器都已经支持了，css变量的兼容性： 变量的定义： CSS中原生的变量定义语法是：--*，变量使
阅读全文
posted @ 2020-06-11 14:47
前端一点红
摘要：在css中我们想实现透明颜色，首先就会想到rgba()和hsla()这2个属性。这篇文章就简单介绍下使用这2种方式来实现半透明边框。 1、使用rgba方式： 1 border: 10px solid rgba(255,255,255,.5); 51220网站目录 https://www.51220.
阅读全文
posted @ 2020-06-11 14:43
前端一点红
摘要：htm中doctype标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。 dotype 的特点： <!doctype>声明必须处于HTML文档的头部，在<html>标签之前，HTML5中不区分大小写 <!doctyp
阅读全文
posted @ 2020-06-11 11:45
前端一点红
摘要：页面的命名规则 统一用翻译的英文命名（推荐） 统一用拼音命名（拼音的简化也可） 如果文件名过长，企业要提前约定一份缩写的规范，如pro—product 例如： 首页—index 产品列表—prolist产品详细页面—prodetail 新闻列表—newslist新闻详细页面—newsdetail 发
阅读全文
posted @ 2020-06-11 00:53
前端一点红
摘要：微信webview内置了调整字体大小的功能，用户可以根据实际情况进行调节。但是这也会导致字体大小改变以后，出现页面布局错乱的情况。 1、iOS的解决方案是覆盖掉微信的样式： body { /* IOS禁止微信调整字体大小 */ -webkit-text-size-adjust: 100% !impo
阅读全文
posted @ 2020-06-11 00:49
前端一点红
浙公网安备 33010602011771号