![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端之HTML
文章平均质量分 88
码飞_CC
热爱生活与技术,偏于前端,潜心学习,乐于分享
展开
-
让ChatGPT回答:从浏览器输入url开始,到页面渲染出来,详细的过程
浏览器也会对CSS规则进行继承和层叠的处理,最终将CSS规则应用到对应的DOM节点上,形成渲染树。这个过程被称为布局或回流,浏览器会对页面上所有的海报进行遍历和计算,以便计算出每个元素的布局和位置信息。此时,用户可以在浏览器中看到完整的页面,可以进行交互和操作。在HTML解析的过程中,如果浏览器遇到HTML标签、文本和注释等内容,就会将其转换成对应的DOM节点。以上就是从输入URL到页面渲染完成的11个步骤的详细解释,希望能够帮助您更加深入地了解浏览器的工作原理和Web页面的渲染过程。原创 2023-04-23 10:59:11 · 1153 阅读 · 1 评论 -
危险的 target=“_blank” 与 “opener”
在学习安全研发规范的时候,发现一条规则“通过 A 标签跳转到其他页面且使用 target=_blank 时,必须添加 rel=noopener 属性”,这个以前还真没了解到,遂查询了一下,发现一片文章写得挺不错的,这里就不自己写,转载一下了(危险的 target="_blank" 与 “opener”)以下来自转载:在网页中使用链接时,如果想要让浏览器自动在新的标签页打开指定的地址,通常的做法就是在 a 标签上添加 target等于"_blank" 属性。然而,就是这个属性,为钓鱼攻击者带来了可乘之转载 2021-07-09 15:48:04 · 698 阅读 · 0 评论 -
微信小程序获取自定义元素的宽高、使用”事件穿透”来达到状态同步的效果
微信小程序获取元素宽高的方式:// 自定义组件需要用:this.createSelectorQuery()const query = wx.createSelectorQuery()query.select('.my-class').boundingClientRect(res => { this.setData({ itemHeight: res.height, itemW...原创 2020-03-28 20:04:54 · 3458 阅读 · 0 评论 -
React实现浏览器打印部分内容
React 浏览器打印原创 2019-05-14 20:05:34 · 4829 阅读 · 0 评论 -
避免移动端页面focus输入框时自动放大页面的解决方法
在网页适配移动端时遇到一个问题:本来页面打开是正常显示的,但是当你聚焦了textarea输入框的时候,页面自动放大了,破坏了原本正常的页面,这不是我们想要的,有什么方法解决呢?1. 设置meta标签网上很多人提到使用如下方法:<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-sca...原创 2019-03-30 17:28:13 · 7876 阅读 · 3 评论 -
添加网页头部小图标
一般来说,我们打开一个网站的时候,网页头部都会有一个小图标,一般是公司的logo,例如下面CSDN的例子:添加这个小图标的方法很简单,只需要在html的<head>中填加一个如下形式的<link>标签即可:<link type="image/x-icon" rel="shortcut icon" href="favicon.ico" >其中,图标的...原创 2019-03-30 16:39:41 · 2336 阅读 · 0 评论 -
前端页面对后端数据的换行显示
有时我们会遇到这种情况,后端传递了一大段包含了换行符的文本内容,在React中,我们直接将这部分内容展示的话,并不会出现换行的效果。如下例子:/* content为从后端获取的数据,例如: content=`hello world! hello world!hello world! hello world!hello world!hello world!`*/&amp;amp;lt;div&amp;amp;g...原创 2018-12-20 20:40:46 · 19725 阅读 · 2 评论 -
HTML meta标签总结,HTML5 head meta属性整理
移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析HTML代码,更好地将移动web前端页面表现出来。本文整理一些常用的meta标签。&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;!-- 使用 HTML5 doctype,不区分大小写 --&amp;gt;&amp;lt;html lang=&quot;zh-cmn-Hans&quot;&转载 2018-10-08 19:56:58 · 1170 阅读 · 0 评论 -
markdown空格缩进以及HTML空格实体
1.markdowm首行缩进方法 在中文书写时我们通常习惯段首缩进两个字,但是使用markdown编辑时我们手打空格缩进是不起效果的,因此我们需要通过使用HTML中的空格实体来帮助我们实现缩进效果。一个汉字占两个空格大小,所以使用四个空格就可以达到首行缩进两个汉字。一个空格大小的表示:&amp;amp;ensp;或&amp;amp;#8194;,此时只要在相应需要缩进的段落前加上 4个 如上的标记即可...原创 2018-05-12 14:58:21 · 1637 阅读 · 1 评论 -
常用的块级元素(block)、行内元素(inline)以及行内块元素(inline-block)的解析
一.块级元素:不废话,直接上图(div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre,HTML5新增的header、section、aside、footer等)从浏览器的显示结果可以看出,块级元素新开启一行(即使是设置了width属性也是独占一行)、尽可能撑满父级元素的宽度,可以设置width和hei...原创 2017-09-22 10:41:01 · 34879 阅读 · 1 评论 -
src 与 href 属性的区别以及 url 的概念
src 与 href 属性的区别以及 url 的概念转载 2016-12-28 21:44:20 · 1696 阅读 · 0 评论 -
提高网站打开速度的7大秘籍
提高网站打开速度的7大秘籍转载 2016-12-01 11:05:33 · 655 阅读 · 0 评论 -
Web前端工程师知识脉络图
Web前端工程师知识脉络图转载 2016-11-17 17:15:16 · 860 阅读 · 0 评论