HTML/HTML5
HTML/HTML5
tianmeng1999
这个作者很懒,什么都没留下…
展开
-
div实现textarea
可编辑 contenteditable=true可改变大小 resize:auto;overflow:auto;placeholder 添加placeholder属性,通过css选择器获取属性的值,添加到伪类中监听文本内容是否为空 是否显示placeholder实现过程<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv.原创 2021-05-31 11:40:55 · 603 阅读 · 0 评论 -
手写 功能引导实现
文章目录功能实现实现效果一实现效果二实现过程功能实现实现效果一效果配置// 首屏引导function loadHomeLead(){ // 是否已经加载过了 const is = localStorage.getItem('loadHomeLead') if(is) return const step1pos = document.querySelectorAll('.info')[1].getBoundingClientRect() const原创 2021-05-14 13:59:19 · 192 阅读 · 0 评论 -
一个加载小动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-04-06 15:26:03 · 84 阅读 · 0 评论 -
h5 canvas 合成海报
文章目录效果实现效果实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> bo原创 2021-01-12 09:45:26 · 657 阅读 · 0 评论 -
canvas鼠标滑过效果
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas鼠标滑过效果</title> <style> :root,原创 2020-12-02 15:11:40 · 466 阅读 · 0 评论 -
canvas 雪花
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> :root, bo原创 2020-12-01 19:53:42 · 167 阅读 · 0 评论 -
Web前端应该从哪些方面来优化网站性能
Web前端应该从哪些方面来优化网站性能减少页面体积,提升网络加载静态资源压缩合并 (js/css代码压缩合并,精灵图)静态资源缓存使用cdn加载资源更快优化页面渲染css放在前面 js放在后面懒加载减少dom操作...原创 2020-09-28 20:23:47 · 350 阅读 · 0 评论 -
HTML5 语义化标签
语义化标签 文档常用的语义化标签header: 通常用于表示页头,也可用于表示文章的头部footer: 通常用于表示页脚,也可用于表示文章的头脚article: 通常用于表示整篇文章section: 表示文章的章节aside: 通常用于表达一下附加信息 侧边栏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport原创 2020-08-24 22:42:52 · 264 阅读 · 0 评论 -
html 标签属性(attribute/property) 布尔/非布尔属性 attribute/property 同步
attribute/propertyhtml 标签的预定义和自定义属性统一称为 attributeattribute 标签属性 type <input type="checkbox" name="input-name"/>property js原始对象的直接属性const obj = { name:"property 属性"}布尔值/非布尔值属性标签对象的 property 是布尔值 该属性就是布尔值属性标签对象的 property 不是布尔值 该属性就是非布尔值属原创 2020-08-14 18:05:34 · 1397 阅读 · 0 评论 -
前端术语
文章目录webw3cxmlhtmlMDNcss浏览器XHTMLweb互联网w3c万维网联盟,w3.org为互联网提供标准xml可扩展的标记语言:extension markup language用于定义文档结构htmlHTML是w3c组织定义的语言标准:HTML是用于描述页面结构的语言。HTML: Hyper Text Markup Languaage 超文本标记语言。MDN文档库Mozilla Development Network,Mozilla 开发者社区csscs原创 2020-08-13 20:52:05 · 474 阅读 · 0 评论 -
html a标签(超链接/锚点/打电话/发短信/发邮件/协议限定符)
超链接<a href="https://www.baidu.com">www.baidu.com</a>锚点<div id="div"></div>//...<a href="#div">跳转到id="div"标签的位置</a>打电话(在手机上)<a href="tel:137****1602">137****1602</a>发短信<a href="sms:137****1602"&原创 2020-08-02 21:28:33 · 1716 阅读 · 1 评论 -
html ol有序列表 ul无序列表
ol有序列表<ol> <li>无序列表1</li> <li>无序列表2</li> <li>无序列表3</li></ol>type = "" 1 A a I i 默认1序号开头分别为 数组 大写/小写字母 大写/小写罗马字符 <ol type="A"> <li>无序列表1</li> <li>无序列表2<原创 2020-07-29 22:30:09 · 818 阅读 · 0 评论 -
html lang=“en“ h1-h6 常用标签 html编码( ;..)
告诉搜索引擎爬虫,网站是关于什么内容的<html lang="en"></html>// lang="en" enlish 英文// lang="zh" 中文// lang="en,zh" h1-h6 加粗 独成一段 更改字体的大小h${标题}*6常用标签<strong>加粗</strong><em>斜体</em><del>字体中划线</del><address>地址:杭州原创 2020-07-29 22:05:12 · 215 阅读 · 0 评论 -
html 空格/回车 解析 英文不换行
英文字母到标签边界不换行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .con{原创 2020-07-29 21:52:31 · 264 阅读 · 0 评论 -
h5 定位
服务器地址要 https 才行 要在服务器访问 且协议是httpsvar x = document.getElementById("demo");x.addEventListener('click',function(){ getLocation()})function getLocation(){ if (navigator.geolocation){ navigator.geolocation.getCurrentPosition(showPosition,sho原创 2020-06-05 14:38:42 · 167 阅读 · 0 评论 -
html 导入 百度地图
获取秘钥百度地图 秘钥申请(AK)使用步骤js导入<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的秘钥"></script>html标签导入 <div id="map"></div>创建地图// 导入地图var map...原创 2020-04-27 09:24:14 · 774 阅读 · 0 评论 -
html+css 环形进度条 示例 封装
html + css 实现关键思路也可以用 设置旋转中心点来实现 不一定要用裁剪此处为了更加明显 加了一个偏差 10px然后裁剪 子级div 左边 50%position: absolute;clip: rect(auto,410px,auto,210px);background-color: greenyellow;旋转 子级div 父级overflow:hide 去除偏差...原创 2020-04-24 15:28:28 · 807 阅读 · 1 评论 -
瀑布流-布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-11-20 15:19:15 · 95 阅读 · 0 评论 -
videojs rtmp 播放视频
video文档可用的rtmp地址<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...原创 2019-08-28 10:56:52 · 1270 阅读 · 1 评论 -
原生js div拖动
原生js div拖动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...原创 2019-08-29 11:16:51 · 133 阅读 · 0 评论 -
原生js 视频放大镜 (等同于图片放大镜)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-08-30 09:17:13 · 901 阅读 · 0 评论 -
客户端 浏览器使用art-template(模版引擎)
浏览器使用art-template安装在需要的文件模块中引用 art-template查看文档 api完整代码 + 效果安装npm install art-template --save 在需要的文件模块中引用 art-template<script src="./node_modules/art-template/lib/template-web.js"></scr...原创 2019-08-31 16:29:05 · 583 阅读 · 0 评论 -
videojs 播放 hls 流视频 自动播放(autoplay + muted)
1.它没有 之前 rtmp转流视频不能隐藏标签 和离开页面 会报错 这个不会2.自动播放 无效解决 autoplay+autoplay代码<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>demo<...原创 2019-09-02 18:37:09 · 17859 阅读 · 7 评论 -
视频 充满 video标签 object-fit:fill
object-fit: fill<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...原创 2019-09-04 13:02:16 · 6074 阅读 · 0 评论 -
img 标签事件 onerror 图片加载错误
img标签中的src图片加载失败 会出现一个碎片图标借用img标签的onerror事件,img标签支持onerror 事件,在装载文档或图像的过程中如果发生了错误,就会触发onerror事件。解决方法:可以使用一张提示错误的图片代替显示不了的图片。代码如下:<h5>图片路径不正确 备用图片路径正确</h5><img src="../../img/75.jpg...原创 2019-09-12 11:01:21 · 3166 阅读 · 0 评论 -
css 滚动条样式设置
文档: CSS滚动条选择器文档CSS滚动条选择器仅仅在支持WebKit的浏览器::-webkit-scrollbar 滚动条.::-webkit-scrollbar-button 滚动条上下的区域.::-webkit-scrollbar-thumb 滚动滑块::-webkit-scrollbar-track 滚动条轨道...原创 2019-08-26 14:56:20 · 192 阅读 · 0 评论