HTML
文章平均质量分 94
@Demi
甘于平凡 不甘平庸
展开
-
canvas学习二
一、绘制文字【1】font字体属性canvas里的font属性和css的font属性是一样的,它可以设置文本的粗细、字号、字体等css设置字体:p{font:bold15px 微软雅黑;} canvas设置字体:ctx.font='bold15px微软雅黑'【2】textAlign水平对齐textAlign设置或返回文本内容的当前对齐方式start: 默认,文本在指定的位置开始 end: 文本在指定的位置结束 center: 文本的...原创 2021-04-07 16:55:37 · 2845 阅读 · 2 评论 -
canvas学习一
一、什么是canvas?canvas是 HTML5 的标签元素,使用 JavaScript 在canvas里绘制图像。canvas画布是一个矩形区域,你可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。二、为什么需要学canvas?我们可以使用canvas 绘制复杂图形,处理图像,开发游戏,做动画,处理视频…div+csscanvas三、创建 canvas 元素通过 width 和 height 设置 canvas 画布的宽高,默认.原创 2021-04-06 18:01:40 · 3537 阅读 · 0 评论 -
textarea高度自适应 && 元素属性contenteditable介绍
近期实现的一个笔录页面如上图所示,考虑到笔录内容肯定会超出一行,所以我选择了使用textareas文本输入框,问题在于textarea不支持自适应高度,就是定好高度或者是行数之后,超出部分就会显示滚动条,看起来不美观。下面分享2种实现textarea高度自适应的做法,一种是利用JS控制textarea的高度,另一种是用div元素来模拟textarea一、textarea高度自适应...原创 2019-12-18 11:19:16 · 1475 阅读 · 0 评论 -
重绘和重排(回流)
一、浏览器渲染HTML的步骤HTML被HTML解析器解析成DOM Tree, CSS则被CSS解析器解析成CSSOM Tree。 DOM Tree和CSSOM Tree解析完成后,被附加到一起,形成渲染树(Render Tree)。 节点信息计算(重排),这个过程被叫做Layout(Webkit)或者Reflow(Mozilla)。即根据渲染树计算每个节点的几何信息生成布局。 渲染绘...原创 2019-09-20 11:39:47 · 1981 阅读 · 0 评论 -
Data URI详细介绍
一、URI介绍URI(统一资源标识符) 是 uniform resource identifier的缩写,它定义了接受内容的协议以及附带的相关内容,如果附带的相关内容是一个地址,那么此时的 URI 也是一个 URL (uniform resource locator )。二、什么是 data URI scheme?Data URI scheme 简称 Data URI,经常会被错误地写...原创 2019-09-10 17:54:19 · 4840 阅读 · 0 评论 -
前端PDF书籍下载
求知若渴,虚心若愚一个人要有强大的求知欲,不断的学习才能使自己更优秀,同时要低调谦虚,不要骄傲自大才能使自己成熟稳重。书籍链接链接:https://pan.baidu.com/s/1adjY30u3K5P1mFjCGdRFkQ 提取码: c97w...原创 2020-03-03 09:57:40 · 890 阅读 · 4 评论 -
input元素所有type类型及相关作用
随着HTML5的出现,input表单元素新增了多种输入控件,用以接受各种类型 的用户输入。其中text、password、radio、checkbox、button、submit、reset、image、hidden、file这10个是传统的输入控件,HTML新增的输入控件包括url、tel、search、email、color、number、range、month、week、date、time、...原创 2018-11-16 15:56:59 · 32460 阅读 · 2 评论 -
html语义化标签
很多面试官会问:谈谈你对 HTML5语义化标签的理解。那么本篇博客专门解答一下这个问题。 什么是语义元素?语义是指对一个词或者句子含义的正确解释。很多html标签也具有语义的意义,也就是说元素本身传达了关于标签所包含内容类型的一些信息。例如,当浏览器解析到<h1></h1>标签时,它将该标签解释为包含这一块内容的最重要的标题。h1标签的语义就是用它来标识特定网页...原创 2018-06-26 17:49:13 · 39041 阅读 · 6 评论 -
深入理解DOCTYPE的作用
现在的代码编辑器越来越人性化,各种插件、快捷键都能够帮助我们快速生成代码。比如:使用vscode编辑器在html文档中输入!再按tab键就能快速生成一个完整的html结构。如图所示 今天我们要说的不是代码编辑器,我们将目光移到文档的顶部,会发现顶部有一个<!DOCTYPE html>声明,很多人不知道这个这个声明有何作用,甚至还想把它给删除。1...原创 2018-06-21 11:41:44 · 21740 阅读 · 4 评论