Skip to main content

6 posts tagged with "html"

View All Tags

a 标签默认时间禁用后做了什么才能实现跳转

简单来说,找到该控件,添加点击 click 监听事件,使用 location.href 进行跳转。

let domArr = document.getElementsByTagName("a")
[...domArr].forEach(item=>{
item.addEventListener('click',function(){
location.href=this.href
})
})

Html 标签 b 和 strong 的区别

两者在网页中显示效果大致一样,实际目的不同。

<b> 标签对应为 bold,文本加粗,仅仅为了加粗文本,是一种样式需求。

<strong> 标签意思是加强,表示该文本比较重要,提醒读者注意,然后浏览器将其加粗注意显示。

最重要的区别就是样式标签和语义化标签的区别。

Html5 有哪些新特性?如何处理新标签的浏览器兼容问题?如何区分 Html 和 Html5?

Html5 新特性

  • 拖拽释放APIDrag and drop
  • 更好的语义化内容标签(headernavfooterasidearticlesection
  • 音频、视频 APIaudiovideo
  • 画布(CanvasAPI
  • 地理(GeolocationAPI
  • 本地存储 localstorage、会话存储 sessionstorage
  • 表单控件,calendardatetimeemailurlsearch
  • 新技术 webworkerwebsocket

如何处理新标签浏览器兼容性

  • 做好错误处理,如果显示不了且一定需要该功能,是否可以用其他内容填充。
  • 引入已经支持这些标签的封装好的库(html5shiv.js

如何区别 Html 和 Html5

  • 查看文档头部doctype。旧版本会声明为xhtml1-transitional.dtd
  • 结构语义化,旧版本一般使用<div id="header"></div>,使用 classname 来命名,新版本使用结构化语言标签。

meta 元素都有什么

meta 元素定义的元数据的类型包括以下几种:

  • 如果设置了 name 属性,meta 元素提供的是文档级别(document-level)的元数据,应用于整个页面。
  • 如果设置了 http-equiv 属性,meta 元素则是编译指令,提供的信息与类似命名的 HTTP 头部相同。
  • 如果设置了 charset 属性,meta 元素是一个字符集声明,告诉文档使用哪种字符编码。
  • 如果设置了 itemprop 属性,meta 元素提供用户定义的元数据。

说一下减少 Dom 数量的办法?一次加载大量 Dom 怎么优化

减少 DOM 数量的方法

  • 使用伪元素,阴影实现的内容尽量不使用 DOM 实现,如清除浮动、样式实现。
  • 按需加载,减少不必要渲染
  • 使用合理的结构,语义化标签

一次性加载大量 DOM 优化

这个问题可以借鉴各个框架是怎么干的:

  • 虚拟 DOM ,直接操作 JS 对象开销更少且高效
  • 缓存 DOM 对象,将一些不需要循环遍历的 DOM 节点先缓存,在循环中直接引用
  • 如果 DOM 只是换了个位置,不需要删除后在另一个位置重建,可以直接将整个 DOM 换个位置即可(这个地方需要算法遍历优化)

请说明 Html 布局元素的分类有哪些?描述每种布局元素的应用场景

  • 内联元素:display:inline

    span、a、b、strong、i、em、br、input、textarea

    和其他内容从左到右在一行显示,不能只能控制宽高,宽高有内容本身大小决定(文字、图片)

  • 块状元素:display:block

    div、h1-h6、hr、menu、ui、li、dl、table、p、from

    独占一行,每一个块级元素都会从新的一行重新开始,从上到下布局,可以直接控制 css 属性(宽高、padding、margin)不设置宽高的情况下,高度为本身内容的高度,宽度为父级内容的宽度。

  • 内联块状元素:display:inline-block

    上面两种的结合,不能自动换行,但是能够识别 widthheightline-heightpaddingmargin

应用场景:

  • 内联元素:用于不指定宽高,宽高由内容指定
  • 块级元素:用于指定宽高,标签独占一行
  • 内联块级元素:用于指定元素宽高,不占满一行