面试题集锦：HTML

锦岁
191 阅读7分钟

视频/音频标签的使用

视频 

<video src=""></video>

  • 视频标签属性∶

    • src 需要播放的视频地址
    • width/height 设置播放视频的宽高，和img标签的宽高属性一样
    • autoplay 是否自动播放
    • controls 是否显示控制条
    • poster 没有播放之前显示的展位图片
    • loop 是否循环播放
    • perload 预加载视频（缓存） 。与autoplay相冲突，设置了autoplay属性，perload 属性会失效。
    • muted 静音模式

  • 支持格式：mp4、webm、ogg

音频 

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

  • <audio> 元素允许使用多个 <source> 元素。 <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。 

  • 音频属性和视频属性差不多，不过宽高和 poster 属性不能用。

  • 支持格式：mp3、wav、ogg

HTML5 哪些新增语义化标签

语义化标签优点：

  • 提升可访问性  
  • seo  
  • 结构清晰，利于维护

www.runoob.com/html/html5-…

  • header 页面头部
  • main 页面主要内容
  • footer 页面底部
  • nav 导航栏
  • aside 侧边栏
  • mark高亮显示
  • dialog 加载对话框标签（必须配合open 属性）
  • embed 加载插件的标签

meta 标签有哪些参数，分别表示什么？

meta标签是html语言中，head区的一个辅助性标签。

meta 标签共有两个属性，它们分别是 http-equiv 属性和 name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

  • name 属性 主要用于描述网页，比如网页的关键词，叙述等。

    <meta name="参数" content="具体的参数值">

    主要有以下几种参数：

    • keywords(关键字)
    <meta name="keywords" content="Lxxyx,博客，文科生，前端">
    • description(网站内容的描述)
    <meta name="description" content="文科生，热爱前端与编程，这是我的前端博客">
    • viewport(移动端的窗口) 常用于设计移动端网页。
      • device-width 是指这个设备最理想的 viewport 宽度
      • initial-scale=1.0 是指初始化的时候缩放大小是1，也就是不缩放。
      • user-scalable=0 是指禁止用户进行缩放。
      • maximum-scale=1.0 是指用户最大缩放大小是1
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    • robots(定义搜索引擎爬虫的索引方式) robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。
      • all : 搜索引擎将索引此网页与继续通过此网页的链接索引（默认），等价于index，follow。
      • none : 搜索引擎将忽略此网页，等价于noindex，nofollow。
      • noindex : 搜索引擎不索引此网页。
      • nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
      • index : 搜索引擎索引此网页。
      • follow : 搜索引擎继续通过此网页的链接索引搜索其它的网页。
    <meta name="robots" content="none">
    • author(作者)
    <meta name="author" content="Lxxyx,841380530@qq.com">
    • generator(网页制作软件)
    <meta name="generator" content="Sublime Text3">
    • copyright(版权)
    <meta name="copyright" content="Lxxyx">
    • revisit-after(搜索引擎爬虫重访时间) 如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。如果重访时间过短，爬虫将按它们定义的默认时间来访问。
    <meta name="revisit-after" content="7 days" >
    • renderer(双核浏览器渲染方式) 用于指定双核浏览器默认以何种方式渲染页面。
    <meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式

  • http-equiv 属性 相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容。

    <meta http-equiv="参数" content="具体的描述">

    其中http-equiv属性主要有以下几种参数：

    • content-Type(设定网页字符集) 用于设定网页字符集，便于浏览器解析与渲染页面
    <meta http-equiv="content-Type" content="text/html;charset=utf-8">  //旧的HTML，不推荐
<meta charset="utf-8"> //HTML5设定网页字符集的方式，推荐使用UTF-8
    • X-UA-Compatible(浏览器采取何种版本渲染当前页面) （一般都设置为最新模式，在各大框架中这个设置也很常见。）
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面

    • cache-control(指定请求和响应遵循的缓存机制)

      • 用法1 指定请求和响应遵循的缓存机制
        • no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
        • no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）
        • public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果
        • private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）
        • maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。
      <meta http-equiv="cache-control" content="no-cache">
      • 用法2 禁止当前页面在移动端浏览时，被百度自动转码。虽然百度的本意是好的，但是转码效果很多时候却不尽人意。所以可以在head中加入例子中的那句话，就可以避免百度自动转码了。
      <meta http-equiv="Cache-Control" content="no-siteapp" />

    • expires(网页到期时间) 用于设定网页的到期时间，过期后网页必须到服务器上重新传输。

    <meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />
    • refresh(自动刷新并指向某页面) 网页将在设定的时间内，自动刷新并调向设定的网址。
    <meta http-equiv="refresh" content="2；URL=http://www.lxxyx.win/"> //意思是2秒后跳转向我的博客
    • Set-Cookie(cookie设定) 如果网页过期。那么这个网页存在本地的cookies也会被自动删除。
    <meta http-equiv="Set-Cookie" content="name, date"> //格式
<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> //具体范例

说说DOM的渲染流程。

  • 渲染引擎——webkit和Gecko
    • Firefox使用Geoko——Mozilla自主研发的渲染引擎
    • Safari和Chrome都使用webkit，Webkit是一款开源渲染引擎

DOM渲染流程

  • 浏览器解析html源码，然后创建一个DOM树。

在DOM树中，每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点)。DOM树的根节点就是documentElement，对应的是html标签。

  • 浏览器解析CSS代码，计算出最终的样式数据。

对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置，用户设置，外联样式，内联样式，html中的style(嵌在标签中的行间样式)。

  • 创建完DOM树并得到最终的样式数据之后，构建一个渲染树。

渲染树和DOM树有点像，但是有区别。DOM树完全和html标签一一对应，而渲染树会忽略不需要渲染的元素(head、display:none的元素)。渲染树中每一个节点都存储着对应的CSS属性。

  • 当渲染树创建完成之后，浏览器就可以根据渲染树直接把页面绘制到屏幕上。

渲染树和Dom树的关系

　　渲染对象和Dom元素相对应，但这种对应关系不是一对一的，不可见的Dom元素不会被插入渲染树，例如head元素。另外，display属性为none的元素也不会在渲染树中出现（visibility属性为hidden的元素将出现在渲染树中）。

　　还有一些Dom元素对应几个可见对象，它们一般是一些具有复杂结构的元素，无法用一个矩形来描述。例如，select元素有三个渲染对象——一个显示区域、一个下拉列表及一个按钮。同样，当文本因为宽度不够而折行时，新行将作为额外的渲染元素被添加。另一个多个渲染对象的例子是不规范的html，根据css规范，一个行内元素只能仅包含行内元素或仅包含块状元素，在存在混合内容时，将会创建匿名的块状渲染对象包裹住行内元素。

　　一些渲染对象和所对应的Dom节点不在树上相同的位置，例如，浮动和绝对定位的元素在文本流之外，在两棵树上的位置不同，渲染树上标识出真实的结构，并用一个占位结构标识出它们原来的位置。

avatar
文章
阅读
粉丝