![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html
江-月*夜
喜欢分享项目用到的知识。也方便我日后用到直接复制修改
展开
-
前端移动端头部代码设置
<meta name="viewport" content="width=device-width,initial-scale,minimum-scale=1.0, maximum-scale=1.0 user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="bl原创 2022-03-04 14:03:24 · 291 阅读 · 0 评论 -
第25天 HTML全局属性有哪些
class :为元素设置类标识data-* : 为元素增加⾃定义属性draggable : 设置元素是否可拖拽id : 元素 id ,⽂档内唯⼀lang : 元素内容的的语⾔style : ⾏内 css 样式title : 元素相关的建议信息原创 2022-01-12 10:12:43 · 59 阅读 · 0 评论 -
第25天 ⾏内元素有哪些?块级元素有哪些? 空(void)元素有那些?⾏内元素和块级元素有什么区别?
⾏内元素有: a b span img input select strong块级元素有: div ul ol li dl dt dd h1 h2 h3 h4… p空元素: < br> < hr> < img> < input> < link> < meta>⾏内元素不可以设置宽⾼,不独占⼀⾏块级元素可以设置宽⾼,独占⼀⾏...原创 2022-01-12 10:01:32 · 166 阅读 · 0 评论 -
第24天 前端重绘和回流(重排)是什么,如何避免?
DOM的变化影响到了元素的⼏何属性(宽⾼),浏览器重新计算元素的⼏何属性,其他元素 的⼏何属性和位置也会受到影响,浏览器需要重新构造渲染树,这个过程称为重排,浏览器将受 到影响的部分重新绘制到屏幕上的过程称为重绘。引起重排的原因有1)添加或者删除可⻅的DOM元素,2)元素位置、尺⼨、内容改变,3)浏览器⻚⾯初始化,4)浏览器窗⼝尺⼨改变,重排⼀定重绘,重绘不⼀定重排,减少重绘和重排的⽅法:不在布局信息改变时做 DOM 查询使⽤ cssText 或者 className ⼀次性改变属性.原创 2022-01-08 09:19:26 · 217 阅读 · 0 评论 -
第23天 link 与 @import 的区别
link 是 HTML ⽅式, @import 是CSS⽅式link 最⼤限度⽀持并⾏下载, @import 过多嵌套导致串⾏下载,出现 FOUC (⽂档样式 短暂失效)link 可以通过 rel=“alternate stylesheet” 指定候选样式浏览器对 link ⽀持早于 @import ,可以使⽤ @import 对⽼浏览器隐藏样式@import 必须在样式规则之前,可以在css⽂件中引⽤其他⽂件总体来说: link 优于 @import什么是FOUC?如何避免Flash O.原创 2022-01-07 11:34:48 · 64 阅读 · 0 评论 -
第23天 简述⼀下src与href的区别
src ⽤于替换当前元素,href⽤于在当前⽂档和引⽤资源之间确⽴联系。src 是 source 的缩写,指向外部资源的位置,指向的内容将会嵌⼊到⽂档中当前标签所 在位置;在请求 src 资源时会将其指向的资源下载并应⽤到⽂档内,例如 js 脚本,img 图⽚和 frame 等元素href 是 Hypertext Reference 的缩写,指向⽹络资源所在位置,建⽴和当前元素(锚 点)或当前⽂档(链接)之间的链接,如果我们在⽂档中添加 那么浏览器会识别该⽂档为 css ⽂ 件,就会并⾏下载资源.原创 2022-01-07 10:48:07 · 178 阅读 · 0 评论 -
第23天 html viewport
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimu // width 设置viewport宽度,为⼀个正整数,或字符串‘device-width’ // device-width 设备宽度 // height 设置viewport⾼度,⼀般设置了宽度,会⾃动解析出⾼度,可以不⽤设置 // initial-scale 默认缩放⽐例(初始缩放⽐例),为⼀个数字,可以带⼩数 // minimum-sc原创 2022-01-07 10:25:10 · 184 阅读 · 0 评论 -
第22天 html5有哪些新特性、移除了那些元素?
HTML5 现在已经不是 SGML 的⼦集,主要是关于图像,位置,存储,多任务等功能的增 加’绘画 canvas⽤于媒介回放的 video 和 audio 元素 本地离线存储 localStorage⻓期存储数据,浏览器关闭后数据不丢失 sessionStorage 的数据在浏览器关闭后⾃动删除语意化更好的内容元素,⽐如 article 、 footer 、 header 、 nav 、 section 表单控件,calendar 、 date 、 time 、 ema原创 2022-01-06 14:28:30 · 815 阅读 · 0 评论 -
第17天 H5如何禁止动画闪屏?
网上搜索了下答案,不知道有没有效果.style { -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; }原创 2021-12-25 10:55:25 · 299 阅读 · 0 评论 -
第16天 页面的重绘和回流是什么?
由于节点的几何属性发生改变或者由于样式发生改变而不会影响布局的,称为重绘。回流是布局或者几何属性需要改变就称为回流。回流必定会发生重绘,重绘不一定会引发回流。原创 2021-12-23 09:59:17 · 65 阅读 · 0 评论 -
第15天 HTML5的Server-Sent和WebSocket有什么区别?
websocket是双向通信,server-sent只能服务端发送消息原创 2021-12-22 10:32:56 · 1096 阅读 · 0 评论 -
第10天 一个api接口从请求数据到请求结束共与服务器进行了几次交互?
API是一些预先定义的函数,或指软件系统不同组成部分衔接的约定。如果已经建立了连接,那么单次请求数据到请求结束应该是一次交互;如果没有建立连接,根据协议不同可能会不同吧, 像ajax轮询和websocket与服务器建立连接后的数据流向就存在区别...原创 2021-12-14 09:05:23 · 285 阅读 · 0 评论 -
第10天 你有使用过template标签吗?说说它的用途有哪些?
HTML内容模板()元素是一种用于保存客户端内容机制,该内容在加载页面时不会呈现,但随后可以(原文为 maybe)在运行时使用JavaScript实例化。将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理元素的内容,但这样做只是为了确保这些内容有效;但元素内容不会被渲染...原创 2021-12-30 08:39:15 · 154 阅读 · 0 评论 -
第6天 说出至少十条你理解的html规范
标签名和属性推荐用小写标签都需闭合,不管是单标签还是双标签双标签不宜使用单标签闭合方式属性值需双引号img 标签需加上 altimg 标签推荐加上固定宽高html 和 body 标签最好闭合部分字符推荐转义,比如 <link 写在 head 内,script 写在 body 内最末 、不推荐使用已废弃的标签和属性名,比如 marquee center 等...原创 2021-12-06 10:43:19 · 58 阅读 · 0 评论 -
第4天 怎么实现移动端的边框0.5px?
一种是通过transform中的scaleborder: 1px solid red;transform: scaleY(.5);一种是通过meta viewport中设置init-scale为0.5<meta name="viewport" content="width=device-width, initial-scale=0.5">一种是设置hrborder: 0px;border-bottom: 1px solid red;一种是基于背景渐变实现height: 2原创 2021-12-01 10:07:59 · 221 阅读 · 0 评论 -
第3天 HTML5标准提供了哪些新的API?
两个选择器APIdocument.querySelector()document.querySelectAll()地理定位APIgetCurrrentPosition()多媒体API<video></video><audio></audio>拖放<div ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div dra.原创 2021-11-30 15:48:19 · 200 阅读 · 0 评论 -
第2天 什么是FOUC?你是如何避免FOUC的?
FOUC:加载时样式突然变化原因:由于在渲染HTML时,遇到CSS样式表会重新渲染HTML样式表没有放到head里面使用了@import导入样式解决:尽量把样式表放到body标签上面原创 2021-11-29 17:39:06 · 110 阅读 · 0 评论 -
第2天 返回到顶部的方法有哪些?
window.scrollTo(0,0); //ie不支持,但好用document.documentElement.scrollTop = 0;location.href += ‘#’;原创 2021-11-29 17:22:03 · 55 阅读 · 0 评论 -
第2天 对比下px、em、rem有什么不同?
px 是固定的值em 是相对父级变换大小rem 是相对html,body大小变换的原创 2021-11-29 16:26:07 · 109 阅读 · 0 评论 -
第1天 html的元素有哪些(包含H5)
**行内元素:** a b span strong i em button input label br textarea select**块元素** div p h1-h6 ol ul li table tbody td tr thead dl dt dd**H5新增元素** section article audio video hearder footer small原创 2021-11-27 16:45:19 · 70 阅读 · 0 评论 -
第1天 html 页面导入样式时,使用link和@import有什么区别?
区别:1.link是HTML标签,@import是css提供的。2.link引入的样式页面加载时同时加载,@import引入的样式需等页面加载完成后再加载。3.link没有兼容性问题,@import不兼容ie5以下。4.link可以通过js操作DOM动态引入样式表改变样式,而@import不可以。...原创 2021-11-27 16:34:27 · 299 阅读 · 0 评论