HTML
阳光下的冷静
本人很菜,分享自己平时学习前端的小知识点,希望对大家有用。
展开
-
Echarts--柱状图封装使用
Echarts介绍Echarts是一个使用 JavaScript 实现的开源可视化库,可以很方便的以多彩的形式展示数据,使人一目了然。关于具体的使用,如有兴趣的可以参见官网说明 Echarts详细说明文档Echarts–柱状图封装使用这里我仅介绍Echarts中的柱状图的使用,包括渐变柱状图,堆叠柱状图的使用。其实不管是渐变柱状图还是堆叠柱状图都是柱状图,只是在图的数据optio...原创 2019-08-17 15:14:21 · 1558 阅读 · 1 评论 -
前端性能优化--HTML优化,CSS优化,JS优化
前端的性能优化主要分为三部分: HTML优化避免 HTML 中书写 CSS 代码,因为这样难以维护。使用Viewport加速页面的渲染。使用语义化标签,减少 CSS 代码,增加可读性和 SEO。减少标签的使用,DOM解析是一个大量遍历的过程,减少不必要的标签,能降低遍历的次数。避免 src、href等的值为空,因为即时它们为空,浏览器也会发起 HTTP 请求。...原创 2019-04-03 20:53:15 · 1025 阅读 · 0 评论 -
IE6的BUG的解决办法
双边距BUG float引起的 使用display 像素问题 使用float引起的 使用dislpay:inline -3px 超链接hover 点击后失效 使用正确的书写顺序 link visited hover active z-index问题 给父级添加position:relative Png 透明 使用js代码 Min-height 最小高度 !Important 解决’ s...原创 2019-03-13 17:00:08 · 228 阅读 · 0 评论 -
HTML和XHTML之间的差异
XHTML:可扩展超文本标记语言XHTML(eXtensible HyperText Markup Language)是将超文本标记语言HTML(HyperText Markup Language)作为XML应用而重新定义的标准。HTML文档规范:HTTP/1.1 200 OKContent-Type: text/html<!DOCTYPE html><html...原创 2019-03-13 16:49:36 · 1456 阅读 · 0 评论 -
CSS实现画各种圆
https://blog.csdn.net/github_34514750/article/details/51065282转载 2019-03-12 16:52:38 · 3941 阅读 · 0 评论 -
行内元素,块级元素,空元素
行内元素:a b span img input select strong br big small em sub sup i textarea块级元素:div ul ol li dl dt dd h1 ~h6 p form hr address table空元素:<br> <hr> <img&...原创 2019-03-12 16:09:37 · 498 阅读 · 0 评论 -
HTML5 CSS3新增标签,属性
HTML5新增的标签:article : 文章 caption :表头文字 video : 视频 header:头部 footer : 底部 section :区域 nav:导航 aside:侧边栏 progress:进度条 audio:音频 mark:页面突出部分 canvas:' 图形 command:命令按钮 time: 时间 content: 内容注:H5...原创 2019-03-12 15:58:18 · 479 阅读 · 0 评论 -
DOCTYPE值类型,每种类型的作用
https://blog.csdn.net/shuidinaozhongyan/article/details/78209334转载 2019-03-12 15:10:24 · 245 阅读 · 0 评论 -
三列布局自适应
https://blog.csdn.net/qq_40072782/article/details/82927573转载 2019-03-16 21:12:40 · 197 阅读 · 0 评论 -
前端--关于图片格式,类型的详解
关于图片格式,类型的详解转载 2019-04-03 21:36:51 · 353 阅读 · 0 评论 -
CSS3过渡transiton
Transition过渡:CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标点击,获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值。如何创建过渡transitionCSS3过渡与元素上的常规样式一起声明。只要目标属性改变,浏览器就会应用过渡,可以通过一些伪类来触发,如:hover,:focus,:active,:tar...原创 2019-03-23 14:08:31 · 363 阅读 · 0 评论 -
用pre标签解决换行、自动高度 (实用)
pre标签的妙用转载 2019-07-26 14:51:55 · 1588 阅读 · 0 评论 -
定位后的行内元素设置宽高
相对定位之后的行内元素是依然不可以设置宽高的,需要加display:block设置;但是绝对定位后的行内元素就可以直接设置了。(这里说的设置是指width生效,而不是单纯的写上了而已)注:html中有一类元素比较特殊,虽然他们属于行内元素,但是他们是可以设置宽高的,如img|input|select|textarea|button|label等,他们被称为可置换元素(Replacedelem...原创 2019-06-05 09:40:25 · 1414 阅读 · 0 评论 -
最新经典的前端面经
前端最全面经转载 2019-05-17 10:19:25 · 289 阅读 · 0 评论 -
相邻的两个inline-block节点为什么会出现间隔,该如何解决
相邻的两个inline-block节点之间的间隔问题解决方法转载 2019-05-09 15:09:25 · 2594 阅读 · 0 评论 -
前端经典问题总结---HTML, CSS,JavaScript
前端基础问题总结转载 2019-04-03 17:04:38 · 306 阅读 · 0 评论 -
CSS盒模型
在CSS中盒模型被分为两种,第一种是W3C的标准模型,另一种是IE的传统模型,它们相同之处都是对元素计算尺寸的模型,具体说就是对元素的width,height,padding,和border以及元素实际尺寸的计算关系,不同之处是两者的计算方式不一样。 W3C的标准盒模型外盒尺寸计算(元素空间尺寸)element 空间高度 = 内容高度 + 内距 + 边框 + 外距element 空间宽度...原创 2019-04-03 14:54:13 · 76 阅读 · 0 评论 -
head标签
<head>介绍<head>标签用于定义文档的头部,它是所有头部元素的容器。<head>描述了文档的各种属性和信息,包括文档的标题、在 <head> 中的位置以及和其他文档的关系等。<head>内部标签<base><base>是个很实用但是很多人会忽略的标签。它可以为页面上的所有链接规定默认地址或默认目标。通...原创 2019-04-03 14:28:35 · 444 阅读 · 0 评论 -
设置H5输入框只可读
https://blog.csdn.net/WinstonLau/article/details/88409967?tdsourcetag=s_pcqq_aiomsg转载 2019-03-11 21:32:45 · 509 阅读 · 0 评论 -
CSS中可以和不可以继承的属性
一,不能继承的属性display:规定元素应该生成的框的类型 文本属性 vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shadow:文本阴影效果 white-space:空白符的处理 unicode-bidi:设置文本的方向盒子模型的属性:width、height、margin 、...原创 2019-03-11 20:48:01 · 185 阅读 · 0 评论 -
CSS伪类与伪元素
为什么要引入伪类与伪元素?css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或是列表中的第一个元素,又或者是鼠标悬停在某个超链接上时要设置的样式。什么是伪类,伪元素?伪类:用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如说,当用户悬停在指定的元素时,我们可以...原创 2019-03-11 16:47:00 · 18453 阅读 · 4 评论 -
src与href的区别
src用于替换当前元素, href 用于在当前文档和引用资源之间确立联系。 src是 source 的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求 src 资源时会将其指向的资源下载并应用到文档内,例如 js 脚本, img 图片和 frame 等元素。 <script src ='js.js'></script>...原创 2018-12-25 15:02:57 · 210 阅读 · 0 评论 -
SVG的简单理解
SVG可缩放矢量图形( Scalable Vector Graphics )是基于可扩展标记语言( XML ),用于描述二维矢量图形的一种图形格式。 SVG 是W3C('World Wide Web ConSortium' 即 ' 国际互联网标准组织 ') 在 2000 年 8 月制定的一种新的二维矢量图形格式,也是规范中的网络矢量图形标准。 SVG 严格遵从 XML 语法,并用文本格式的描述性语...原创 2018-12-24 20:35:05 · 733 阅读 · 0 评论 -
link和@import的区别?
XML/HTML代码: <link rel='stylesheet' rev='stylesheet' href='CSS文件 ' type='text/css' media='all' />XML/HTML代码:<style type='text/css' media='screen'>@import url('CSS文件 ');</st...原创 2018-12-24 18:29:08 · 162 阅读 · 0 评论 -
border:none以及border:0的区别
border:none表示边框样式无border:0表示边框宽度为0当定义了border:none,表示无边框样式,浏览器并不会对边框进行渲染,也就没有实际的宽度当定义边框时,除了设置宽度外,还必须设置边框的样式才能显示出来 ...原创 2018-12-24 15:23:18 · 2388 阅读 · 0 评论 -
Doctype严格模式与混杂模式
<!DOCTYPE> 声明位于文档中的最前面,处于<html>标签之前。告知浏览器的解析器,用什么文档类型(HTML还是XHTML) 规范来解析这个文档,主要是影响CSS内容的呈现。在标准模式中,严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行;在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器(IE5)的行为以防止站点无法工作。DOCT...原创 2018-12-24 15:21:50 · 263 阅读 · 0 评论 -
HTML元素分类---行内,块级,空元素
HTML的行内元素:a - 锚点 abbr - 缩写 acronym - 首字 b - 粗体 ( 不推荐 ) bdo - bidi overridebig - 大字体 br - 换行 cit...原创 2018-12-24 15:07:16 · 345 阅读 · 0 评论 -
HTML5的新特性
Html5新增了 27 个元素,废弃了 16 个元素,根据现有的标准规范,把 HTML5 的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素 4 大类。结构性元素:主要负责web上下文结构的定义section:在 web 页面应用中,该元素也可以用于区域的章节描述。 header:页面主体上的头部, header 元素往往在一对 body 元素中。 footer:页...原创 2018-12-24 12:52:13 · 169 阅读 · 0 评论 -
边距折叠
边距折叠:外边距折叠: 相邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距(margin)相邻: 没有被非空内容、padding、border 或 clear 分隔开的margin特性. 非空内容就是说这元素之间要么是兄弟关系或者父子关系垂直方向外边距合并计算: 参加折叠的 margin 都是正值:取其中 margin 较大的值为最终 margin 值。 参...原创 2018-12-26 19:50:05 · 239 阅读 · 0 评论 -
表单的基本组成和提交方式区别
表单由三部分组成:表单标签、表单域、表单按钮: 表单标签:这里面包含了处理表单数据所用 CGI 程序的 URL, 以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等。 表单按钮:包括提交按钮,复位按钮和一般按钮;用于将数据传送到服务器上的 CGI 脚本或者取消输入,还可以用表单按钮来控制其他定义了处理...原创 2018-12-25 15:26:34 · 976 阅读 · 0 评论 -
CSS盒子模型
CSS盒子模型:不同部分的说明:Margin(外边距) - 清除边框外的区域,外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域,内边距是透明的。 Content(内容) - 盒子的内容,显示文本和图像。 解释一: 标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边距的宽度 网页设计中常...原创 2018-12-25 19:19:48 · 277 阅读 · 0 评论 -
Flex布局
Flex布局是什么?Flex是Flexible Box的缩写,意思是“弹性布局”,该布局是来为盒状模型提供最大的灵活性。使用Flex:任何一个容器都可以指定为Flex布局: display:flex 行内元素也可以使用Flex布局: display:inline-flex Webkit内核的浏览器,必须加上-webkit前缀: display: -webkit-flex...原创 2019-03-07 17:08:01 · 101 阅读 · 0 评论 -
meta viewport的原理
viewportde 原理:移动端浏览器通常都会在一个比移动端屏幕更宽的虚拟窗口中渲染页面,这个虚拟窗口就是viewport; 目的是正常展示没有做移动端适配的网页,让他们完整的展示给用户;meta viewport 标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户进行手动缩放...原创 2019-03-10 15:05:58 · 1069 阅读 · 0 评论 -
HTML语义化
语义化是指根据内容的类型,选择合适的标签(代码语义化),即用正确的标签做正确的事情;html语义化让页面的内容结构化,结构更清晰,有助于浏览器、搜索引擎解析对内容的抓取;语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构;搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO;...原创 2019-03-10 13:20:34 · 168 阅读 · 0 评论 -
页面导入样式的几种方法的区别
页面导入样式的几种方式:link标签引入,也是当下用的最多的一种方式,它属于XHTML标签,除了能加载css外,还能定义rel、type、media等属性;这种样式加载会并行的下载资源并且不会停止对当前文档的处理。 @import引入,@import是CSS提供的,只能用于加载CSS;而且该种方式引用的css会在页面加载完成后才会加载引用的css。 style嵌入方式引入,减少页面请求(...原创 2019-03-10 13:08:35 · 1128 阅读 · 0 评论 -
BFC
什么是BFC ?BFC(Block Fromatting Context),即块级格式化上下文,是一个独立的布局环境,其中的元素布局是不受外界的影响,并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。什么样的环境才是BFC ?只需要满足一个或者多个条件即可:float的值不是none。 position的值不是static或者re...原创 2019-03-08 20:18:27 · 142 阅读 · 0 评论 -
外边距重叠
外边距重叠对象:盒子模型什么是外边距重叠?Collapsing margins,即外边距重叠,指的是毗邻的两个或多个普通流(没有float和position的文档流)中的块元素垂直方向上的外边距会合并为一个外边距外边距重叠的几种情况:当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。这种情况下,折叠后margin计算,分为三种情况:在 m...原创 2019-03-08 16:14:54 · 284 阅读 · 0 评论 -
block,inline和inlinke-block细节对比
display:block block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。 block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。 block元素可以设置margin和padding属性。• display:inline inline元素不会独占一行,多个相邻的行...原创 2018-12-25 20:42:04 · 140 阅读 · 0 评论 -
CSS优先级和计算特殊性值
CSS优先级同类型,同级别的样式后者先于前者(后者会覆盖前者) ID > 类样式 > 标签 > * 内联>ID选择器>伪类>属性选择器>类选择器>标签选择器>通用选择器(*)>继承的样式 具体 > 泛化的,特殊性即css优先级 !important 权重最高,比 inline style 还要高 近的 > 远的 ...原创 2018-12-25 19:45:59 · 264 阅读 · 0 评论 -
页面布局的方式
页面布局的方式:双飞翼、多栏、弹性、流式、瀑布流、响应式布局 双飞翼布局 经典三列布局,也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念,在国内最早是由淘宝UED的工程师传播开来,在中国也有叫法是双飞翼布局,它的布局要求有几点:三列布局,中间宽度自适应,两边定宽; 中间栏要在浏览器中优先展示渲染; ...原创 2018-12-26 19:40:42 · 440 阅读 · 0 评论