HTML5
鸭绒
追求起点是大厂。
展开
-
Vue中读取本地图片实现预览和上传
先看效果图:上面展示了两张从本地添加的准备上传服务器的预览图片,效果还不错吧,哈哈哈。下面是该页面中紫色框的布局与实现代码,我想有些人也不喜欢HTML中默认的上传文件样式,实在辣眼睛:<template> <div class="uploadFile"> <!-- ul、li标签用于展示从本地添加的预览图片 --> <ul v-show="uploadImg.length!=0"> <原创 2020-12-03 21:34:10 · 14194 阅读 · 2 评论 -
原生前端与NodeJS服务端使用socket.io实现单聊的关键思想
先来展示我简单实现的单聊功能:这是我在浏览器打开的两个聊天页面,实现的单聊功能,由于只是一个实验,所以就没太注意样式。官方对socket.io的介绍:使用LAMP (PHP)等流行的web应用程序堆栈编写聊天应用程序通常非常困难。它涉及到轮询服务器以查看更改、跟踪时间戳,而且它比应该的速度要慢得多。套接字在传统上是大多数实时聊天系统架构的解决方案,它提供客户机和服务器之间的双向通信通道。这意味着服务器可以向客户端推送消息。每当您编写一个聊天消息时,其思想是服务器将获得它并将其推给所有其他连接的客原创 2020-11-20 12:21:11 · 581 阅读 · 0 评论 -
HTML5之Web Workers多线程的使用与不足
什么是Web Worker ?当HTML页面中执行JS时,页面的状态是不可响应的,直到脚本已完成。Web Worker是运行在后台的JavaScript,独立于其它脚本,不会影响页面的性能。您可以继续继续做任何想做的事情:点击、选取内容等,而此时web worker在后台运行。在学习Web Worker前,我们先举个例子看看执行复杂的JS时,是不是会影响页面性能。封装一个函数实现斐波那契数列:数学公式:F(n)=F(n-1)+F(n-1);即当前值等于前两个值之和。代码示例:<!DOC原创 2020-11-12 17:36:25 · 689 阅读 · 0 评论 -
HTML5重点知识总结
文章目录1.HTML5有哪些新特性?2.HTML5引入什么新的表单属性3.为什么HTML5只需写4.Doctype作⽤? 严格模式与混杂模式如何区分?它们有何意义?5.Canvas 绘制的图形保存时候加上二维码7.HTML5支持哪些新媒体元素?1.HTML5有哪些新特性?HTML5主要是关于图像、位置、存储、多任务等功能的增加。绘画canvas用于媒体播放的video、audio元素存储localStorage、sessionStorage语义化更好的内容标签:article、footer、h原创 2020-10-09 13:04:27 · 407 阅读 · 0 评论 -
HTML中属性问题以及通信问题总结
文章目录一、属性问题1.“data-xxx ”属性的作用是什么?2.href 和 src的区别3. 锚点的作用是什么?如何设置锚点4.页面导入样式时,使用link和@import有什么区别?5. script标签的defer和async属性的区别6. 网页中 meta标签中viewport的具体参数使用7. 怎样处理移动端1px被渲染成2px的问题二、通信问题1.如何实现浏览器内多个标签页之间的通信?2.websocket如何兼容低版本浏览器三、其它1.网页制作会用到哪些图片格式2.如何写出高性能的HTML原创 2020-10-08 23:05:53 · 232 阅读 · 0 评论 -
HTML常见的标签问题
文章目录1.table和 div 区别2.说说你对HTML语义化的理解3.iframe有哪些缺点?4.label的作用是什么?怎么使用?5. title与h1的区别、b与strong的区别?i与em的区别?6. 行内元素、块级元素、空元素有哪些?7.如何在页面上实现一个圆形的可点击区域?8.聊聊meta9.svg是什么?10.canvas和svg图形的区别是什么?1.table和 div 区别核心:速度和加载方式方面的区别。div:加载方式是即读即加载,遇到< div > 没有遇到&l原创 2020-10-08 00:57:21 · 420 阅读 · 0 评论 -
HTML5关于缓存和离线存储知识总结
文章目录1 Cookie有哪些优缺点?2. JS操作获取和设置cookie3. cookies ,sessionStorage,localStorage的区别?4. 浏览器的本地存储(Web Storage)5. HTML5应用缓存(Application Cache)和浏览器缓存有何区别?6. HTML5的应用缓存(离线存储)的工作原理7. 浏览器是怎么对HTML5的离线存储资源进行管理和加载的8.如何使cookie隔离(即请求资源时不要让它带上cookie)?1 Cookie有哪些优缺点?优点:原创 2020-10-07 16:55:13 · 791 阅读 · 0 评论 -
是否觉得自己写HTML代码特别慢,赶紧学emmet语法,300字学会快速生成HTML结构语法
我们怎样才能快速写html代码呢?根据下面语法即可。生成标签 直接输入标签名 按tab键即可 比如 div 然后tab键,就可以生成< div> < /div>如果想要生成多个相同的标签 加上* 就可以了 比如 div * 3,按tab键即可,就可以快速生成3个div如果有父子级关系的标签,可以用> ,比如 ul>li,按tab键即可,就可以生成< ul >< li> < /li > < /ul>了如果有兄弟关系的原创 2020-07-06 21:39:08 · 178 阅读 · 0 评论 -
前端三大技术栈之HTML5 常用标签用法以及注意点总结 精髓部分
文章目录1.标题标签2.段落标签3.换行标签4.文本格式化标签5. 盒子标签6.图像标签7.图像的路径(重点)8.超链接标签(重点)9.注释10.特殊字符11.表格标签11.1合并单元格12.列表标签12.1无序列表(重点)12.2 有序列表(理解)12.3 自定义列表(重点)13.表单标签13.1< input >表单元素13.2 < label >标签13.3 < select>表单元素13.4 < textarea >1.标题标签标题标签<h1原创 2020-07-06 16:44:35 · 749 阅读 · 0 评论 -
JS、HTML5实现贪吃蛇小游戏
贪吃蛇小游戏完整代码import { Component, OnInit } from '@angular/core';import { EventManager } from'@angular/platform-browser' @Component({ selector: 'app-little-game', templateUrl: './little-game.component...原创 2020-04-14 13:58:23 · 780 阅读 · 0 评论 -
offsetTop、clientTop、scrollTop、offsetHeight、clientHeight、scrollHeight概念结合图片理解
首先说一下学习这几个属性的感受,WHAT?这些概念怎么都差不多啊,这怎么区分?我也晕了好久,今天我偏重实际效果图来理解这几个玩意。这里分document.body和div来讲解。一、div部分先上我们用来理解属性的代码<div class="container" id="container"> <article> 一、没遇见你之前,我,随遇而安,遇见你之后,我,以你为安。 二、你是我今生渡不过的劫,多看一眼就心软,拥抱一下就沦陷!原创 2020-05-19 18:02:17 · 453 阅读 · 0 评论 -
聊天室小项目中的聊天框是如何做到接收信息|发送信息在界面上左右分离的
思路:采用display:flex布局,我们默认消息是靠左显示的,当满足某条件时(判断是你发送的消息还是接收的消息,若是自己发送的消息,则靠右显示),此时设置flex-direction: row-reverse即可;先上效果图效果图还满意的话接着看代码吧ts:先看这个好理解下面html模板中绑定的内容class userMessages{ sender:string;//发送方,用s...原创 2020-05-07 00:10:21 · 1345 阅读 · 0 评论 -
在angualr利用HTML5实现拖放与定位
Drag&&Drop一、概述拖放的目的可以将某个对象放置到你想要放的位置拖放是一种常见的特性,比如在微信聊天室可以直接将文件或图片拖入输入框来发送信息。二、拖放实例 export class DrogDragComponent implements OnInit { allowDrop(event:any){ event.preventDefault(...原创 2020-04-28 20:41:49 · 328 阅读 · 0 评论