html5
关注
分享
扫一扫
hzxOnlineOk
重新寻找定位价值，补充ai盲区
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
html 中js 如何给字符串加换行符
let msg= `网络错误\n请联系管理员13959901011`;现象这种写法在html中会被识别为"网络错误\n请联系管理员13959901011"，并非我们要的效果。解决办法在对应元素类名的样式中加入white-space: pre样式原创 2021-12-22 11:10:53 · 2654 阅读 · 0 评论 -
两个div分上下堆叠，上部分高度不固定，下面部分自动填满剩余高度
<div class="wrapper" id="wrapper" style="height: 100%;"> <div class="searchForm" id="searchForm"></div> <div class="tableContent" id="tableContent"></div></div>方法一：var wrapper= document.getElementById('wrappe原创 2021-11-16 19:19:57 · 1243 阅读 · 0 评论 -
html5 获得窗口焦点和失去窗口焦点
当前窗口获得焦点js事件，html5发布之前我们使用window.onfocus和window.onblur来获得窗口焦点和失去窗口焦点，监听 onfocus() 和window.onblur()事件实现//当前窗口得到焦点window.onfocus=function(){//播放动画或视频};//当前窗口失去焦点window.onblur=function(){//暂停动画或视频};这个方法可以实现切换标签暂停动画视频，但是会带来一...转载 2021-08-17 17:49:51 · 4831 阅读 · 0 评论 -
html 中 包含img标签的父容器元素p、div、a等类型的高度多出一块 且css查询不到margin和padding的原因及解决
问题 当p、div、a这些作为父元素容器且包含img子元素标签时，父元素的总体高度会比img图片的高度多出一些px<div class="content"><img src="https://www.baidu.com/images/asfwqdr1fgh44.png"><div>F12排查了父元素是否存在margin或者padding，但是没有找到对应的间距设置，又排查了html文本，看看是否是空格或者换行符导致的。仍不行，排除html空格的问题原创 2021-01-15 10:54:32 · 745 阅读 · 1 评论 -
记录 生成二维码canvas 并且截取指定html元素转换为截图
错误案例 （元素没有弄成固定fixed定位，当屏幕过小时，超过1屏有滚动，可能导致只能截图到部分。并且注意指定的html容器元素在被转换时，是否已经挂载完毕） componentDidMount() { html2canvas(document.getElementById("#capture"), { useCORS: true, width: window.screen.availWidth, height: 532, windowWidt原创 2020-09-15 17:34:24 · 248 阅读 · 0 评论 -
使用原生JS将html表格代码保存为excel
<!DOCTYPE html><html><head> <title>example.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv=".原创 2020-09-09 13:59:49 · 493 阅读 · 0 评论 -
html 中的div或者span或者p标签文本超出宽度不会自动换行 span设置不了margin的原因
html 中的div或者span或者p标签文本超出宽度不会自动换行的原因.am-list-item .am-list-line .am-list-extra { flex-basis: 60%; white-space: no-wrap; // 就是这行导致的}span设置不了margin（非块元素需要设置display: 'inline-block',）<span style={{ display: 'inline-block', color: 'red',..原创 2020-09-01 16:15:30 · 1498 阅读 · 0 评论 -
调试移动端h5的新闻详情页 对于空格pc谷歌浏览器调试的渲染效果与手机终端的渲染效果不同
我接到了一个需求，实现新闻列表以及对应的新闻详情这是一个react-native项目，但是要求用移动端h5开发详情页，打包成dist后，作为一个链接以供rn列表项点击跳转问题来了，详情页的内容会在后台系统填写一些空格格式，pc谷歌浏览器调试移动端h5对于空格的渲染和手机终端的app的webview上看到的空格渲染宽度不同，这直接导致了文案无法同步对齐有鉴于此，决定采用iframe去做展示...原创 2020-07-01 10:09:21 · 663 阅读 · 2 评论 -
react 写移动端H5页面 引用本地图片 且路径正确，但是图片无法正确展示（会展示成默认图片）
错误的图片如下：Card.js（这边直接在img标签写的相对路径，但是无法正确显示）import React from 'react'import styles from './card.less'export default class extends React.Component { constructor(props) { super(props) this.state = { // isShow: false, } ..原创 2020-05-23 21:52:14 · 869 阅读 · 0 评论 -
JavaScript 判断iPhone X Series机型的方法
写在前面如果有更优雅的方式，一定要告诉我！现状iPhone X 底部是需要预留 34px 的安全距离，需要在代码中进行兼容。现状对于 iPhone X 的判断基本是这样的： 1 2 // h5 export const isIphonex = () => /iphone/gi.test(navigator.userAgent) ...转载 2020-03-31 22:27:25 · 425 阅读 · 0 评论 -
实现react移动端渐变骨架屏简单案例
首先是封装各部分骨架的Skeleton.jsimport React from 'react';import moment from 'moment';import styles from './skeleton.css';import Title from './Title';import Paragraph from './Paragraph';import ImageCont...原创 2020-03-30 11:16:50 · 1784 阅读 · 0 评论 -
HTML5的十大新特性
为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者，等(1)语义标签 语义化标签使得页面的内容结构化，见名知义标签 描述 <hrader></header> 定义了文档的头部区域 &...转载 2020-01-09 16:38:23 · 199 阅读 · 0 评论