自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(21)
  • 收藏
  • 关注

转载 HTML结构的语义化

1. HTML语义化背景介绍讲到语义化,我们首先来聊聊html语义化的背景,HTML结构语义化,是最近几年才提出来的,以前的html结构,都是一堆没有语义的冷冰冰的标签。最泛滥的就是div+css,以前的页面,一打开就是一堆div+css,为了改变这种这种状况,开发者们和官方提出了让HTML结构语义化的概念,并且官方w3c,也在HTML5给出了几个新的语义化的标签。2. 知识剖析什么是语义化,语义化之后文档会有什么效果呢?1.首先,语义化,顾名思义,就是你写的HTML结构,是用相对应的有一定语义的英

2021-04-14 16:51:25 416

原创 JS知识点

JS知识点数字 加 undefined 输出 NaN console.log('今天收获' + i(i为变量) + '个知识点') 实参的个数小于形参的个数时,多的形参定义为undefined 结果为NaN

2021-03-19 20:46:47 161 2

原创 什么是 BFC、IFC、GFC 和 FFC 以及其布局规则和用处

什么是 BFC、IFC、GFC 和 FFC 以及其布局规则和用处Box 和 FC(即 formatting context)BFC布局规则IFC布局规则GFC布局规则FFC布局规则Box 和 FC(即 formatting context)Box一个页面是由很多个 Box 组成的,元素的类型和 display 属性决定了这个 Box 的类型。不同类型的 Box,会参与不同的 Formatting Context。Block level的box会参与形成BFC,比如display值为block,lis

2020-12-27 20:07:53 1090

原创 Element-ui配合Vue实现走马灯图片自适应效果

elementUI走马灯实现图片自适应(等比缩放,使得图片缩小不挤压,放大不拉伸变形)解决方法的原理:监听屏幕视口大小如果’resize’,发生改变了,就获取图片的高度height,然后渲染到页面ElementUI 地址: https://element.eleme.io/#/zh-CN/component/carousel方法解析:1.窗口第一次打开的时候加载执行 imgLoad()方法,第一次加载时获取图片在窗口中的高度,然后渲染到页面中去。2.接着通过addEventListenner()

2020-11-09 13:19:03 6963 1

原创 浮动

网页的布局方式1.什么是网页的布局方式?网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的1.标准流(文档流/普通流)排版方式1.1其实浏览器默认的排版方式就是标准流的排版方式1.2在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素1.3 在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版垂直排版, 如果元素是块级元素, 那么就会垂直排版水平排版...

2019-12-08 21:22:02 87

原创 清空默认边距

1.为什么要清空默认边距(外边距和内边距)在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等, 所以在企业开发中, 编写代码之前第一件事情就是清空默认的边距2.如何清空默认的边距格式 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquot...

2019-12-07 21:12:58 371

原创 CSS盒子模型

CSS盒子模型1.什么是CSS盒子模型?CSS盒子模型仅仅是一个形象的比喻, HTML中所有的标签都是盒子结论1.在HTML中所有的标签都可以设置宽度/高度 == 指定可以存放内容的区域内边距 == 填充物边框 == 手机盒子自己外边距 == 盒子和盒子之间的间隙...

2019-12-07 21:04:24 117

原创 CSS边框属性(以及内外边距)

边框属性1.什么边框?边框就是环绕在标签宽度和高度周围的线条2.边框属性的格式2.1连写(同时设置四条边的边框)border: 边框的宽度 边框的样式 边框的颜色;快捷键:bd+ border: 1px solid #000;注意点:1.连写格式中颜色属性可以省略, 省略之后默认就是黑色2.连写格式中样式不能省略, 省略之后就看不到边框了3.连写格式中宽度可以省略, 省略之后...

2019-12-07 20:31:50 770

原创 CSS背景属性

背景颜色1.如何设置标签的背景颜色?在CSS中有一个**background-color:**属性, 就是专门用来设置标签的背景颜色的取值:具体单词rgbrgba十六进制快捷键:bc background-color: #fff;<style> div{ width: 500px; height: 50...

2019-12-07 20:22:46 190

原创 CSS显示模式(行内或者块级)

div和span标签1.什么是div?作用: 一般用于配合css完成网页的基本布局2.什么是span?作用: 一般用于配合css修改网页中的一些局部信息3.div和span有什么区别?1.div会单独的占领一行,而span不会单独占领一行2.div是一个容器级的标签, 而span是一个文本级的标签4.容器级的标签和文本级的标签的区别?容器级的标签中可以嵌套其它所有的标签文本级的...

2019-12-07 19:59:37 766

原创 CSS三大特性

CSS三大特性之继承性1.什么是继承性?作用: 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性注意点:1.并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承2.在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承3.继承性中的特殊性3.1a标签的文字颜色和下划线是不能继承的3.2h标签的文字大小是不能继...

2019-12-07 19:49:16 83

原创 css属性之标签选择器

标签选择器1.什么是标签选择器?作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性格式:标签名称{属性:值;}注意点:1.标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签2.标签选择器无论标签藏得多深都能选中3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input…)id选择器1.什么是id选...

2019-12-02 21:59:07 1300

原创 css属性

文字属性1.规定文字样式的属性格式:font-style: italic;取值:normal : 正常的, 默认就是正常的italic : 倾斜的快捷键:fs font-style: italic;fsn font-style: normal;2.规定文字粗细的属性格式: font-weight: bold;单词取值:bold 加粗bolder 比加粗还要粗ligh...

2019-12-02 21:25:51 116

原创 css格式

css背景1.通过标签来修改样式的缺点:1.需要记忆哪些标签有哪些属性, 如果该标签没有这个属性, 那么设置了也没有效果2.当需求变更时我们需要修改大量的代码才能满足现有的需求3.HTML只有一个作用就是用来添加语义所以在企业开发中修改样式都是交给CSS来做2.通过CSS来修改样式有什么好处?1.不用记忆哪些属性属于哪个标签2.当需求变更时我们不需要修改大量的代码就可以满足需求3...

2019-12-02 21:09:38 140

原创 多媒体标签

video标签1.什么是video标签?作用: 播放视频格式:<video src=""></video>video标签的属性src: 用于告诉video标签需要播放的视频地址autoplay: 用于告诉video标签是否需要自动播放视频controls: 用于告诉video标签是否需要显示控制条poster: 用于告诉video标签视频没有播放之前显...

2019-12-02 21:02:51 200

原创 表单标签

表单标签1.什么是表单?表单就是专门用来收集用户信息的2.什么是表单元素?2.1什么是元素?在HTML中 标签/标记/元素都是指HTML中的标签例如: a标签/a标记/a元素表单元素其实还是HTML中的一些标签, 只不过这些标签比较特殊, 在浏览器中所有的表单标签都有特殊的外观和默认的功能3.表单的格式:<form> <表单元素></fo...

2019-12-02 20:36:33 255

原创 表格标签

表格标签其实在过去表格标签用的非常非常的多, 绝大多数的网站都是使用表格标签来制作的, 也就是说表格标签是一个时代的代表1.什么是表格标签?表格标签作用: 用来给一堆数据添加表格语义其实表格是一种数据的展现形式, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式2.表格标签格式:<table> <tr> <td...

2019-12-01 22:17:33 562

原创 列表标签

无须列表1.什么是列表标签?列表标签的作用: 给一堆数据添加列表语义, 也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体2.HTML中列表标签的分类2.1无序列表(最多)(unordered list)2.2有序列表(最少)(ordered list)2.3定义列表(其次)(definition list)3.无序列表作用:给一堆数据添加列表语义, 并且这一堆数据中所有的数据都没有...

2019-12-01 21:22:24 762

原创 a标签,base标签及假链接,锚点

a标签什么是a标签?a标签的作用: 就是用于控制页面与页面之间跳转的a标签的格式: 需要展现给用户查看的内容a标签中有一个叫做target属性, 这个属性的作用就是专门用于控制如何跳转_self: 用于在当前选项卡中跳转, 也就是不新建界面跳转. 默认就是_self_blank: 用于在新的选项卡中跳转, 也就是新建界面跳转a标签中还有一个属性, 叫做title. a标签中的titl...

2019-12-01 21:00:26 563

原创 img,br标签以及img标签的路径问题

img标签1.img标签中的img其实是英文image的缩写所以img标签的作用, 就是告诉浏览器我们需要显示一张图片2.img标签格式: 其实img标签中的src是英文source的缩写所以img标签中的src就是用来告诉img标签, 需要显示的图片名称3.注意点和H系列标签/p标签还有Hr标签不一样, img标签不会独占一行如果我们手动指定了img标签显示的图片的宽度和高度,...

2019-12-01 20:35:53 1650

原创 前端基本框架(DTD文档声明)

前端基本框架(DTD文档声明)<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>百度一下,你就知道</title> </head> <body> 你好呀! </body></html>...

2019-12-01 20:24:52 267

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除