XHTML与HTML有何不同?BFC是什么?数组去重常用方法?

简介: XHTML 指可扩展超文本标签语言(EXtensible HyperText Markup Language)。

一省:HTML

7. XHTML与HTML有何不同?

XHTML是什么?

  • XHTML 指可扩展超文本标签语言(EXtensible HyperText Markup Language)。
  • XHTML 的目标是取代 HTML。
  • XHTML 与 HTML 4.01 几乎是相同的。
  • XHTML 是更严格更纯净的 HTML 版本。
  • XHTML 是作为一种 XML 应用被重新定义的 HTML。
  • XHTML 是一个 W3C 标准。

最主要的不同:

  • XHTML 元素必须被正确地嵌套。
  • XHTML 元素必须被关闭。
  • 标签名必须用小写字母。
  • XHTML 文档必须拥有根元素。

二省: CSS

7. BFC是什么?怎么触发BFC?

BFC(Block Formatting Context, 块级格式化上下文)是指浏览器中创建了一个独立的渲染区域,该区域内所有元素的布局不会影响到区域外元素的布局,这个渲染区域只对块级元素起作用。

以下方式会创建BFC

  • 根元素(\
)
  • 浮动元素(float值不为 none)
  • 定位元素(position值为absolute或fixed)
  • display值为inline-block、inline-flex、flex、flow-root、table-caption、table-cell
  • overflow值不为visible、clip
  • 三省:JavaScript

    7. 数组去重常用方法?

    1. new Set()

      var newArr = new Set(arr)
      

      Set中不允许有重复元素。

    2. filter() + indexOf()

      var newArr = arr.filter((item, index) => {
           
      return arr.indexOf(item) === index
      })
      
    3. 双重for循环
      for(var i=0; i<arr.length; i++){
           
       for(var j=i+1; j<arr.length; j++){
           
           if(arr[i]==arr[j]){
           
               arr.splice(j,1);
               j--;
           }
       }
      }
      
    4. sort()

      arr = arr.sort()
      var newArr = [arr[0]]
      for(let i=1; i<arr.length; i++){
           
      if(arr[i] !== arr[i-1]){
           
       newArr.push(arr[i])
      }
      }
      

      先排序,再比较下一个元素跟当前元素是否一样。

    5. includes()

      arr.forEach((item) => {
           
      if(!newArr.includes(item)){
           
       newArr.push(item)
      }
      })
      

      includes 检测数组是否有某个值

    相关文章
    |
    2月前
    |
    移动开发 前端开发 HTML5
    Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
    本文介绍了Twaver HTML5中数据的批量加载方法,通过使用`box.startBatch()`可以在大量数据加载时提高性能。文章通过示例代码展示了如何在React组件中使用批量加载功能,以减少界面重绘次数并提升效率。
    58 2
    Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
    |
    4月前
    |
    Web App开发 数据采集 移动开发
    提升Selenium在Chrome上的HTML5视频捕获效果的五个方法
    在Selenium中优化Chrome的HTML5视频捕获涉及更新Chrome和ChromeDriver、配置浏览器选项、使用代理IP、调整加载策略及确保安装了正确编解码器。例如,更新驱动程序,添加如`--autoplay-policy`和`--proxy-server`的命令行参数,使用代理以防止被封,设置页面加载策略为&#39;eager&#39;,并安装必要的编解码器来确保视频播放。代码示例展示了如何集成这些优化措施。
    168 2
    提升Selenium在Chrome上的HTML5视频捕获效果的五个方法
    |
    6天前
    |
    前端开发 容器
    Html布局 BFC的概念和作用讲解
    BFC(Block Formatting Context)是Web页面的CSS渲染机制之一,它如同一个独立的容器,确保内部元素的变化不会影响外部布局。本文介绍了BFC的基本概念、作用及实现方法,包括通过设置`float`、`position`、`overflow`属性或使用伪元素等方式使元素成为BFC,有效解决布局中的边距塌陷等问题,优化网页布局效果。
    |
    1月前
    |
    XML JavaScript 数据格式
    jquery中html()方法的使用
    jquery中html()方法的使用
    19 1
    |
    2月前
    |
    存储 编解码 前端开发
    HTML颜色的性能优化方法
    在网页开发中,虽然颜色选择并非主要性能瓶颈,但合理的颜色优化仍可提升渲染效率与用户体验。本文介绍十种实用技巧,如使用CSS渐变代替图片、运用CSS变量存储颜色、合理选择颜色格式、减少页面颜色种类、按需加载样式表等,帮助改善网页性能。尽管单独来看颜色优化的影响有限,但综合应用这些技巧能够有效提升网页加载速度及整体体验。
    |
    2月前
    |
    XML 前端开发 JavaScript
    jQuery HTML / CSS 方法
    jQuery HTML / CSS 方法
    17 2
    |
    2月前
    |
    XML 数据格式 Python
    Python技巧:将HTML实体代码转换为文本的方法
    在选择方法时,考虑到实际的应用场景和需求是很重要的。通常,使用标准库的 `html`模块就足以满足大多数基本需求。对于复杂的HTML文档处理,则可能需要 `BeautifulSoup`。而在特殊场合,或者为了最大限度的控制和定制化,可以考虑正则表达式。
    68 12
    |
    2月前
    |
    JavaScript 前端开发
    HTML 表单和输入与按钮的联动方法汇总
    在HTML中,通过JavaScript可以轻松实现表单与输入、按钮的互动。本文介绍了基本表单结构,并展示了如何用JS处理按钮点击、表单提交、动态禁用按钮、表单验证以及使用AJAX和jQuery简化代码等技巧,帮助你更好地控制和优化表单功能。
    |
    1月前
    |
    JavaScript 前端开发
    DOM的概念?获取html元素的方法有哪些?
    DOM的概念?获取html元素的方法有哪些?
    33 0
    |
    2月前
    |
    XML 前端开发 JavaScript
    jQuery HTML / CSS 方法
    jQuery HTML / CSS 方法
    30 0