HTML5
关注
分享
扫一扫
文章平均质量分 51
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
爱宇阳
遇见你，是我幸运的开始!
展开
-
JS树形结构数据，根据子节点数据获取所有父节点数据
省市区多维数组通过value=130628 获取到 ["河北省", "保定市", "高阳县"]函数调用这样就可以根据子节点数据获取所有父节点数据啦原创 2022-07-14 09:58:51 · 5809 阅读 · 4 评论 -
文档预览：在浏览器中预览查看 Office 文档
您的网站或博客上是否有希望读者查看的 Office 文档，即使他们没有安装 Office？您愿意在下载之前查看文档吗？要为您的观众提供更好的体验，请尝试使用 Office Web 查看器。什么是 Office Web 查看器？它是一种创建 Office Web 查看器链接的服务。Office Web 查看器链接可在浏览器中打开原本会下载的 Word、PowerPoint 或 Excel 文件。您可以轻松地将下载链接转换为 Office Web 查看器链接以在您的网站或博客中使用（例如，食谱、照片原创 2022-04-07 10:45:47 · 3188 阅读 · 2 评论 -
input输入框无法输入值的解决方案
IOS系统input输入框无法输入值页面上的input输入框设置-webkit-user-select:text !important;或者一并给input的父类加上此样式。（亲试有效）<input style='-webkit-user-select:text!important;'>或者input { -webkit-user-select:text !important;}...原创 2021-12-14 10:34:57 · 3808 阅读 · 0 评论 -
CSS定义如何计算一个元素的总宽度和总高度
box-sizingCSS中的box-sizing属性定义了user agent应该如何计算一个元素的总宽度和总高度。在CSS 盒子模型的默认定义里，你对一个元素所设置的width与height只会应用到这个元素的内容区。如果这个元素有任何的border或padding，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人。box-sizing 属...原创 2021-12-14 10:10:04 · 1335 阅读 · 0 评论 -
解决H5在移动端软键盘弹出时底部fixed定位被顶上去的问题
移动端页面的底部菜单栏，通常会使用fixed定位在底部。在安卓手机上经常会出现软键盘弹出时，底部定位被顶上去，下面提供vue和jQuery两种解决办法。Vue解决方法<!--html部分--><div class="footer" v-show="hideshow"></div>// js 部分data(){ return { docmHeight: document.documentElement.clientHeight, //默认屏幕高转载 2021-12-14 10:05:33 · 8456 阅读 · 3 评论 -
Vue上传文件错误或者失败，重置input type=file
html中写一个type为file的input框//html<input type="file" name="file" ref="clearFile" @change="uploadMaterial($event)">提交文件, 重置input框//上传材料uploadMaterial(event) { var that = this; var formData = new FormData(); formData.append('file', event.tar转载 2021-12-14 10:01:48 · 1607 阅读 · 0 评论 -
JS判断数组中是否存在某个值或者某个对象的值
JS判断数组中是否存在某个值或者某个对象的值一、判断是否存在某个值二、判断是否存在对象的某个值原创 2021-12-14 09:32:34 · 22571 阅读 · 0 评论 -
crypto-js 加密、解密使用方法
一、安装crypto-jsnpm install crypto-js二、引入crypto-js支持ES6导入、Modularimport CryptoJS from "crypto-js";或者const CryptoJS = require("crypto-js");三、设置密钥和密钥偏移量// 十六位十六进制数作为密钥const SECRET_KEY = CryptoJS.enc.Utf8.parse("1234123412341234");// 十六位十六进原创 2021-12-10 15:35:32 · 66748 阅读 · 8 评论 -
让内容两端对齐，兼容IE及主流浏览器的方法
如果不喜欢看分析过程，可以跳到最后看最终兼容方案史前方法：以前实现两端对齐是这样的：<p class="box1">密  码</p><p class="box1">用 户 名</p><p class="box1">身 份 证 号</p>效果是这样：然后再慢慢加&emsp 或者转载 2021-09-10 08:31:08 · 683 阅读 · 0 评论 -
vue-photo-preview 富文本图片点击预览支持缩放
vue-photo-preview基于photoswipe的vue图片预览组件vue-photo-preview 示例1、安装 vue-photo-previewnpm install vue-photo-preview --save2、在main.js引入插件import preview from 'vue-photo-preview';import 'vue-photo-preview/dist/skin.css';Vue.use(preview);3、处理接口返回的 HT.原创 2021-08-04 16:11:20 · 1172 阅读 · 0 评论 -
element-china-area-data 市辖区改为城市名称
最近在项目中遇到有一些客户不需要市辖区要求改成对应的城市名称，所以对element-china-area-data@5.0.2做了一下调整。安装npm install element-china-area-data -S修改数据 安装完成之后，找到的app.js和app.commonjs.jsnode_modules\element-china-area-data\dist\app.jsnode_modules\element-china-...原创 2021-07-28 15:20:50 · 2475 阅读 · 1 评论 -
input 常见 accept
<input type="file">使用type="file"的<input>元素使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上，或者通过 Javascript 的File API对文件进行操作。常见 MIME 类型列表译者注：英文原文标题为 Incomplete list of MIME types，意为不完整的/未完成的 MIME 类型列表。这是一份 MIME 类型列表，以及各个类型的文档类别，按照它们的常见扩展名排序。两种主要的 ...原创 2021-07-27 11:07:29 · 821 阅读 · 0 评论 -
Vue微信支付功能
微信网页开发/JS-SDK说明文档概述微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。JSSDK使用步骤可以详细查看说明文档微信支付发起一个微信支付请求wx.chooseWXPay({ timestamp: ...原创 2021-07-27 10:39:42 · 1754 阅读 · 0 评论 -
Vue H5微信分享功能实现
微信网页开发/JS-SDK说明文档概述微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。JSSDK使用步骤可以详细查看说明文档分享接口请注意，不要有诱导分享等违规行为，对于诱导分享行为将永久回收公众号接口...原创 2021-07-27 10:24:45 · 4951 阅读 · 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-UA-Compatible" content="ie=edge"> <title>对象数组去重<.转载 2021-07-26 17:24:11 · 1472 阅读 · 0 评论 -
微信内打开链接，跳转到公众号关注页面
制作一个链接，点击该链接跳转到公众号关注页面。1、登录微信公众平台2、F12 打开开发者工具 >>Elements3、ctrl+f 搜索 uin_base644、将下面链接的__biz值更换成uin_base64的值，然后用微信打开该链接即可。https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=64位uin加密值&scene=110#wechat_redirect微信内打开示例链接：ht.转载 2021-07-07 11:47:10 · 2644 阅读 · 0 评论 -
让Web应用更安全的13个小技巧
无论你是React、Angular、Vue.js，还是原生JavaScript开发者，你的代码都有可能成为黑客眼中的猎物。作为一个前端开发者，我们可能更加关注性能、SEO、UI/UX，往往会忽视安全问题。当你了解了大型框架是如何让你对xss攻击保持开放态度时，也许你会感觉到很意外。例如，React中的dangerouslySetInnerHTML或者Angular中的bypassSecurityTrust都是一些高危操作。我们需要记住，就安全而言，前端现在和后端、DevOps一样承担着相同的职责翻译 2021-06-03 11:31:32 · 260 阅读 · 0 评论 -
Vue 项目使用PDF.js预览pdf文件
<template> <div class="pdf" style="height:100vh"> <iframe width="100%" height="100%" scrolling="no" style="border:none" :src="src" ></iframe> </div></template><script>.原创 2021-06-03 09:10:13 · 900 阅读 · 6 评论 -
uni-app 选择和上传非图像、视频文件
首先小程序端不支持上传非图像视频文件。然后App和H5端，参考：https://uniapp.dcloud.io/api/media/fileH5端在2.9.9以前，可以使用如下方法： 使用web-view组件 使用web-view 组件，在 web-view 组件内可以使用 input 元素进行选择，使用表单或者 xhr 上传。 使用 js 创建 input 元素进行选择 使用 xhr 上传（或者转 base64、Object-URL 使用 uni.uploadFile 上..转载 2021-06-03 08:53:42 · 1745 阅读 · 0 评论 -
new FormData() 调试打印为空
// 创建一个formDataconst formData = new FormData()// 通过append向form对象添加数据formData.append("id", 1);formData.append("name", "测试");formData.append("age", 25);原创 2021-06-03 08:41:05 · 1216 阅读 · 2 评论 -
微信视频播放器隐藏播放控件
object-fit属性介绍object-fit是一个css3属性，可以让图片或者视频适应外部容器。目前这个属性除了IE浏览器以外，其他主流浏览器都支持。 属性如下：/* Keyword values */object-fit: fill; object-fit: contain;object-fit: cover;object-fit: none;object-fit: scale-down;/* Global values */object-fit: inherit;obje转载 2021-05-31 17:30:32 · 1076 阅读 · 0 评论 -
精确运算原生封装
加法运算函数/** * 加法函数 * @param summand {number|string} 被加数 * @param addend {number|string} 加数 * @returns {number} 计算结果 */export function accAdd(summand, addend) { let r1 let r2 try { r1 = summand.toString().split('.')[1].length } catch (e)原创 2021-05-12 16:16:55 · 121 阅读 · 0 评论 -
微信小程序 video 层级高问题
解决方案一：使用微信小程序提供的cover-view组件。解决方案二：设置video的z-index为1，然后设置弹窗z-index为99999，即可在视频上方弹出弹窗。原创 2021-01-21 09:21:26 · 1250 阅读 · 3 评论 -
CSS知识点总结
css导入方式 1.标签内联2.内部放置3.外部放置4.@import url（）css选择器 1.标签选择器2.id选择器3.class选择器4.组合选择器css优先级 就近原则 标签>id>class>*为了防止不支持css的浏览器将<stylr>...</style>标签间的css规则当成普通字符串,而显示在网页上，应将css的规则代...原创 2017-06-22 14:04:32 · 458 阅读 · 0 评论 -
target=_blank 在新标签页打开页面安全问题解决
一、原生JavaScript解决function openUrl(url) { const newTab = window.open(); newTab.opener = null; newTab.location = url;}二、a标签rel="noreferrer noopener" 属性解决<a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer"> 百度<.原创 2020-06-19 09:11:27 · 1401 阅读 · 2 评论 -
多尺寸图片左右切换功能前端实现
一、需求描述标题“多尺寸图片左右切换功能”，概括的不知道是否恰当，具体是需求如下。一次点击按钮，向左或向右移动一个图片。 切换到尽头时不显示按钮 页面有三个尺寸可以一睹为快，看一下最终效果。二、切图代码1）HTML代码<!DOCTYPE HTML><html><head> <meta charset="utf-...转载 2019-07-22 14:08:38 · 697 阅读 · 0 评论 -
HTML知识点总结
1、HTML（超文本标识语言）概念HTML是一种用来制作超文本文档的简单标识语言,简单的说就是描述网页长什么样子、有什么内容的一个文本.2、HTML和XHTML的联系和区别联系：（1）、都是标记语言，文档注释都一样。（2）、都可以通过dom编程方式来访问（DOM是浏览器对html文 档的一种解析）。（3）、都可以通过CSS来改变外观。区别：（1）、 HT...原创 2017-06-21 14:22:19 · 633 阅读 · 0 评论