-
音频 视频 的语法标签 以及相关的html属性
音频 语法: audio controls loop autoplay source src=音频文件路径 type=audio/mp3/ /audio 注:音频相关html属性 controls 添加音频控制条 src 引入音频文件路径 autoplay 设置自动播放 loop 设置循环播放 autobuffer 设置此属性后,即使没有自动播放,也会开始缓冲音频 preload 在页面加载的同时音频文件准备就绪 注:常见的音频格式: mp3、wav、ogg 视频 语法: video controls width=500 height=300 autop... -
meta标签中robots在SEO优化中的应用
meta robots 标签是页面 head 部分 meta 标签的一种,用于禁止搜索引擎索引本页内容。 最简单的 meta robots 标签格式为: 上面标签的意义是禁止所有搜索引擎索引本页面,禁止跟踪本页面上的链接。 谷歌、必应、雅虎都支持的 meta robots 标签如下。 noindex:告诉蜘蛛不要索引本页面。 nofollow:告诉蜘蛛不要跟踪本页面上的链接。 nosnippet:告诉搜索引擎不要在搜索结果中显示说明文字。 noarchive:告诉搜索引擎不要显示快照。 ... -
html利用font-family引用自定义的字体
气死了,哎!刚开始我引入的ttc字体格式,应该是不支持吧!我以为代码有问题,搞了半天,最后下载了一个ttf字体,就OK了! 附代码如下: style @font-face { /*自己起个名称,FontName是我起的,可修改*/ font-family: FontName; /*url引入字体路径*/ src: url('tp.ttf') format('truetype'); } h1{ /*给属性设置字体,将设置的名称写入*/ font-family: FontName; } /style... -
Html常见的移动端布局方案
1.百分比布局 特点:不管分辨率怎么改变,头部的高度和位置都不变,文字流式,控件弹性,图片等比例缩放 适用于内容较少,比较简单的移动端页面 2.等比例缩放布局(rem布局) 特点:使用rem为主要单位进行页面布局,很好的实现了在不同设备上页面等比例缩放 适用于页面内容比较复杂的移动端页面 3.混合式布局 特点:混合布局是指将多种布局方式融合在一起实现移动端的屏幕适配的方法 -
html5新增的结构性标签介绍
1.定义网页的头部 header /header 2.定义网页的导航 nav /nav 3.定义网页的某个区域或版块 section /section 4.定义网页的一篇文章 article /article 5.定义网页的底部 footer /footer 6.将网页中的标题进行组合 hgroup /hgroup 7.将网页中的一些元素进行组合 figure /figure 8.给组合的元素添加一个标题 figcaption &... -
css隐藏滚动条 兼容谷歌、火狐、IE等各个浏览器
项目中,页面效果需要展示一个页面的移动端效果,使用的是一个苹果手机样式背景图,咋也没用过苹果,咋也不敢形容。 如下图所示: 在谷歌浏览器如图一滚动条顺利隐藏,但是火狐就如图二了,有了滚动条丑的一批。 一句CSS代码,隐藏滚动条 div::-webkit-scrollbar { display:none } 但不兼容火狐,让人脑瓜疼的火狐啊,下面小方法解决火狐隐藏滚动条。 附代码如下 style .tp_box{ width: 500px; height: 400px; overflow: hidden; } .tp_box1{ width:... -
使用css修改input的文字提示语颜色
使用css修改input的文字提示语颜色 修改input的placeholder的颜色 style /* Safari,Chrome WebKit browsers */ input::-webkit-input-placeholder { color: #ccc; } /* 火狐 Mozilla Firefox 4 to 18 */ input:-moz-placeholder { color: #ccc; } /* 火狐 Mozilla Firefox 19+ */ input::-moz-placeholder { ... -
常见的CSS全局公共样式整理
常见的CSS全局公共样式整理 这个是按平时我自己常用整理的,为了方便自己复制整理下,需要用自行修改,自行多删少补。 PC端的话,请手动删除 font-size: 26.67vw; 这个是给移动端设计稿尺寸为750像素计算的,比如在ps中量某图片宽度为100px,那么使用rem则为0.5rem(原尺寸/200)。 style body,div,p,ul,ol,li,dl,dt,dd,table,tr,td,form,hr,h1,h2,h3,h4,h5,h6,fieldset,img,input { margin: 0; padding: 0; } body,html { ... -
css防止图片变形 object-fit: cover; 属性介绍
最近给公司开发一个简单的H5可视化编辑器,如上图所示,左侧点击添加基础组件,在中间区域预览展示,右侧区域对中间展示组件进行一对一编辑,最终生成H5页面。 提测给测试小姐姐,在右侧上传了图片,说中间图片被挤压了,那么安排下,如上图所示,添加了红色注释,已添加的属性和未添加的属性图片进行对比所示,图片都是嵌套到一个固定宽高的div中,并且图片width和height都为100%,未添加object-fit: cover;属性的会导致图片挤压,而添加了object-fit: cover;属性的图片不会挤压,居中显示多余的会被裁剪,美滋滋。 下面QQ资源吧大概记录下该属性 img{ width: 1... -
uniapp中text-indent不起作用,uniapp首行缩进不管用如何解决?
今天在uniapp中写消息详情,给内容加个首行缩进,于是就直接加了text-indent,发现没有任何作用,如果是input输入框之类可以使用padding,但是文本标签只能使用text-indent了。 解决方法 css加首行缩进的同时再加上 display: block; 属性,当然 inline-block 等也是可以解决的,根据具体需求去尝试下吧!