基础篇｜HTML

奔四老少女
78 阅读7分钟

html相关知识及面试问题整理，欢迎补充。

<img>的title和alt有什么区别

  • title通常当鼠标滑动到元素上的时候显示；
  • alt是<img>的特有属性，是图片内容的等价描述，用于图片无法加载时显示和用于读屏软件阅读图片。可提高图片可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

语义化的理解

  • 用正确的标签做正确的事情
  • HTML语义化就是让页面的内容结构化，便于被浏览器、搜索引擎解析；
  • 在没有样式CSS情况下也可以以一种文档格式显示，并且是容易阅读的；
  • 搜索引擎的爬虫依赖标记来确定上下文和各个关键字的权重，利于SEO；
  • 让源码更容易阅读和维护；

HTML有哪些新特性？移除了哪些元素？

  • HTML5现在已经不是SGML的子集，主要是位置、存储、多任务等功能的增加
    • 新增选择器document.querySelector和document.querySelectorAll
    • 拖拽释放(Drag and drop)API
    • 媒体播放的video和audio
    • 本地存储localStorage和sessionStorage
    • 离线应用manifest
    • 桌面通知Notfications
    • 语义化标签article、footer、header、nav、section
    • 增强表单控件 calender、date、time、email、url、search
    • 地理位置Geolocation
    • 多任务webworker
    • 全双工通信协议websocket
    • 历史管理history
    • 跨域资源共享（CORS）Access-Control-Allow-Origin
    • 页面可见性改变事件visibilitychange
    • 跨窗口通信PostMessage
    • Form Data对象
    • 画布canvas
  • 移除的元素
    • 纯表现的元素：basefont、big、center、font、s、strike、tt、u
    • 对可用性产生负面影响的元素：frame、frameset、noframes
  • 支持HTML5新标签
    • IE6/7/8支持通过document.createElement方法产生的标签
    • 可以利用这一特性让这些浏览器支持HTML5新标签
    • 浏览器支持新标签后，还需要添加标签默认的样式
  • 也可以直接使用成熟的框架，比如html5shim

如何区分HTML和HTML5

  • DOCTYPE声明、新增的结构元素、功能元素

HTML5的离线储存怎么使用？工作原理能不能解释一下？

  • 在用户没有连接网络时，可以正常访问站点和应用，在用户与网络连接时，更新用户机器上的缓存文件；
  • 原理：HTML5的离线缓存是基于一个新建的.appcache文件的缓存机制（不是缓存技术），通过这个文件上的解析清单离线缓存资源，这些资源就会像cookie一样被存储下来，之后处于离线状态时，浏览器会通过被离线存储的数据进行页面展示；
  • 如何使用：
    • 页面头部加入一个manifest的属性;
    <!DOCTYPE html>
<html manifest="demo.appcache"> 
<!-- 关联缓存清单 -->

<meta charset="UTF-8">
<title>HTML5 离线缓存 Demo</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
    • 在cache.manifest文件中列举需要离线存储的资源
    CACHE MANIFEST
# 版本号：20240610 （修改此注释会触发缓存更新）

CACHE:
# 需要缓存的资源（离线时可访问）
index.html
style.css
logo.png
script.js

NETWORK:
# 必须在线访问的资源（不缓存）
*.php
https://api.example.com/

FALLBACK:
# 离线时的替代资源（路径匹配规则）
/ offline.html
    • 在离线状态时，操作window.applicationCache进行需求实现
    // 监听缓存状态变化
window.applicationCache.addEventListener('updateready', function(e) {
    if (window.applicationCache.status === window.applicationCache.UPDATEREADY) {
        window.applicationCache.swapCache(); // 替换为新缓存
        alert('缓存已更新，请刷新页面！');
    }
}, false);

// 显示当前缓存状态
const statusText = [
    '未缓存',       // 0: UNCACHED
    '空闲',         // 1: IDLE
    '检查中',       // 2: CHECKING
    '下载中',       // 3: DOWNLOADING
    '更新完成',     // 4: UPDATEREADY
    '缓存过时'      // 5: OBSOLETE
];
document.getElementById('status').textContent = 
    `当前缓存状态：${statusText[window.applicationCache.status]}`;

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

  • 在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，浏览器会根据manifest文件的内容下载相应的资源并进行离线存储。
  • 如果已经访问过app并进行了资源存储，那么离线时浏览器就会使用离线的资源加载页面，再次连接网络在线后，浏览器会对比新的manifest文件与旧的manifest文件，没有变化不做任何操作，变化了就会重新下载缓存文件中的资源。
  • 离线情况下，浏览器直接使用离线存储的资源。

请描述一下cookie``localStorage``sessionStorage

  • cookie是网站为了标示用户身份而储存在用户本地终端上的数据，通常经过加密
  • cookie数据始终在同源的http请求中携带，即会在浏览器和服务器之间来回传递
  • sessionStorage和localStorage不会自动把数据发给服务器，仅在本地存储
  • 存储大小
    • cookie数据大小不能超过4k
    • sessionStorage和localStorage虽然也有大小限制，但比cookie大得多，可以达到5M或更大
  • 有效时间：
    • localStorage存储持久数据，除非手动清除，不然浏览器关闭与否不受影响
    • sessionStorage数据在当前浏览器关闭之后自动删除
    • cookie在设置的过期时间之前一直有效，不受浏览器关闭影响

iframe有哪些缺点？

  • 会阻塞主页面的onloade事件
  • 搜索引擎的检索程序无法解读这种页面，不利于SEO
  • iframe和主页面共享连接池，而浏览器对相同域的连接有限制，会影响页面的并行加载
  • 如必须要使用iframe则可以通过javascript动态的给iframe添加src，即可绕过以上两个问题；

WEB标准以及W3C标准是什么？

  • 标签闭合
  • 标签小写
  • 不乱嵌套
  • 使用外链css和js
  • 结构行为表现分离

xhtml和html有什么区别？

  • 功能上的区别：
    • xhtml可兼容各大浏览器、手机以及pad，并且浏览器能快速准确的编译网页
  • 书写习惯：
    • xhtml元素必须正确嵌套、闭合，区分大小写、文档必须拥有根元素

link和@import的区别是什么？

  • 页面被加载时，link会同步被加载出来，而@import引用的CSS会等到页面加载完之后再加载
  • import只在IE5以上才能识别，而link是XHTML标签，无兼容问题
  • link方式的样式的权重高于@import的权重

HTML5为什么只需要写<!DOCTYPE HTML>

  • HTML5不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为
  • 而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型

Doctype作用是什么？严格模式与混杂模式如何区分？它们有何意义？

  • <!DOCTYPE>声明位于文档中的最前面，处于<html>之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档；
  • 严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行；
  • 在混杂模式中，页面也宽容的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现；

行内元素有哪些？块级元素有哪些？空（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>
  • 行内元素不可以设置宽高，不独占一行
  • 块级元素可以设置宽高，独占一行

HTML全局属性（global attribute）有哪些？

  • class：为元素设置类标识
  • data-*：为元素增加自定义属性
  • draggable：设置元素是否可拖拽
  • id：元素id，文档内唯一标识
  • lang：元素内容的语言
  • style：行内css样式
  • title：元素相关的建议信息
avatar
文章
阅读
粉丝