呆小徐

# Q1：什么是 HTML？

超文本标记语言（HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML 使文本更具交互性和动态性，是构建网站及WEB应用的基石，HTML允许嵌入图像、表格、链接，并且可以用于创建交互式表单，它被用来结构化信息。

# Q2：HTML元素和标签有什么区别？

元素代表某种结构或语义，通常由开始标签、内容和结束标签组成。

标签就是<head>、<body>、<table>等被尖括号 < 和 > 包起来的对象，绝大部分的标签都是成对出现的，如<div></div>、<h1></h1>。

元素 标签
HTML 网页或文档的单个组件，它代表结构或语义。例如，title 元素表示文档的标题 HTML 文档的根，用来标记 HTML 元素的。例如，head 标签用于包含 HTML 文件中的所有 head 元素

# Q3：块级元素和内联元素有什么区别？

块级元素：占据其父元素（容器）的整个空间，创建了一个“块”。通常浏览器会在块级元素前后另起一行，能容纳其他块元素或者内联元素。包括：<p>、 <div>、<blockquote>、<img>、<section>、<form>、<nav>、<h1>-<h6>、<ul> 和 <li>

内联元素：只占据它对应标签的边框所包含的空间，只能容纳文本或者其他内联元素的元素。包括：<span>、<em>、<q>、<label>、<strong>、<a>、<input>

块级元素 内联元素
块级元素被绘制为一个块，它可以伸展以填充它可用的整个宽度，即其容器的宽度，并且将始终从新行开始 内联元素被绘制在它们被定义的地方，并且只占用绝对需要的空间
每个块状元素都从新的一行开始，并且其后的元素也另起一行（独占一行）；元素的高度、宽度、行高以及顶和底边距都可设置；元素宽度在不设置的情况下，占它本身父容器的100%（和父元素宽度一致） 和其他元素在同一行上，不独占一行；元素的高度、宽度及顶部底部边距不可设置

# Q4：什么是语义 HTML？

语义 HTML 是一种编码风格，它是使用 HTML 标记来加强内容的语义或含义。在语义HTML中 <b> </b> 标签不用于粗体语句而是 <strong></strong> ，斜体语句不是用 <i> </i>，而是用 <em></em>。

# Q5：列出常用的列表标签

在页面制作中涉及列表，在 HTML 中有专门用于表示列表数据的标签，如下：

  • 有序列表：有序列表以编号格式显示元素，由<ol>标签表示
  • 无序列表：无序列表以项目符号格式显示元素，它由<ul>标签表示。
  • 定义列表：定义列表以定义形式显示元素，就像在字典中一样，如 <dl>、 <dt>和<dd>标签用于定义描述列表。

# Q6：解释HTML标签语义

HTML 是标记语义，文档内容是有其语义的，常见的如下：

  • <header>: 用于定义文档的标题。
  • <nav>: 定义了导航链接
  • <section>: 用于定义文档中的一个单元
  • <article>: 用于定义独立的、自包含的文章
  • <aside>: 用于定义内容之外的内容
  • <footer>: 用于定义文档的页脚

# Q7：什么是跑马灯？

跑马灯效果在以前是很经典的效果，几乎每个网站都有。marquee 用于网页上的滚动文本，它可以自动向上、向下、向左或向右滚动图像或文本，只要将要滚动的文本放在<marquee>……</marquee> 标签内。

# Q8：div 和 span 的区别？

span和div的区别在于span元素是内联的，通常用于一行内的一小块，例如段落内。而 div 是块级，相当于在其前后有一个换行符，用于对较大的代码块进行分组。

# Q9：<!DOCTYPE html> 标签是否为 HTML 标签？

不是，<!DOCTYPE html> 声明不是 HTML 标签。<!DOCTYPE>声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在 HTML 文档的第一行。

HTML 有多种文档类型，例如 HTML 4.01 Strict、HTML 4.01 Transitional、HTML 4.01 Frameset、XHTML 1.0 Strict、XHTML 1.0 Transitional、XHTML 1.0 Frameset、XHTML 1.1 等。因此，<!DOCTYPE html> 用于定义 HTML 文档类型。

对于HTML5文档，没有 DTD ，也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。

# Q10：HTML、XML 和 XHTML 有什么区别？

  • HTML：超文本标记语言（HyperText Markup Language）
  • XML：可扩展标记语言（Extensible Markup Language）
  • XHTML：可扩展超文本标记语言（Extensible Hypertext Markup Language）

XHTML是当前HTML版的继承者，是XML文档中的HTML。

HTML 和 XHTML 之间的区别是：

  • HTML是一种标准通用标记语言的应用，XML是一种可扩展标记语言的应用程序。
  • HTML标签不区分大小写XHTML所有标签都必须小写。
  • XHTML所有属性都必须使用双引号
  • HTML 是关于显示信息，而 XHTML 是关于描述信息。

# Q11：超链接和锚点的区别？

HTML中的<a> 是 anchor（锚）的缩写，现在把带有 href 属性的称作超链接，把没有 href 属性只有 name 属性的称作锚点连接或者命名锚点。超链接和锚点只是标签 <a> 的两种呈现方式。命名锚点同城用于页面定位，超链接用于页面间的跳转。

# Q12：简述HTML5离线储存

现在日常使用的APP，有部分内容是使用内嵌webview的方式，浏览页面内容，这种方案的优势是WEB和APP共用一个网站，像掘金的APP就是使用这种方式。为了避免重复加载页面或者在无网络的情况下正常展现内容，可以采用离线存储，其中一种方案就是使用 manifest 。

在线情况下，浏览器发现HTML头部有manifest属性，它会请求manifest文件，第一次访问，那么浏览器就会根据manifest文件的内容下载相应的资源，进行离线存储。

在页面头部加入manifest属性，如下：

<html manifest="cache.manifest">

然后在cache.manifest文件中编写离线存储的资源规则，代码如下：

CACHE MANIFEST
# 2021-06-26 14:01 V0.1.2.42634241855282310056  hash 以便做版本控制
# 默认部分，显式缓存这些文件

CACHE:
#需要缓存的列表，如字体、图片、脚本、css
./assets/images/favicons/32x32.png
./assets/fonts/VideoJS.eot
./assets/fonts/VideoJS.svg
./assets/fonts/VideoJS.ttf
./assets/fonts/VideoJS.woff

# 启动页资源
./index.html

NETWORK:
#不需要缓存的
*

FALLBACK:
#访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件 *.html /offline.html

注意事项：

1、 浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。

2、 如果 manifest 文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。

3、 引用 manifest 的 html 必须与 manifest 文件同源，在同一个域下。

4、 FALLBACK 中的资源必须和 manifest 文件同源。

5、 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。

6、 站点中的其他页面即使没有设置 manifest 属性，请求的资源如果在缓存中也从缓存中访问。

7、 当 manifest 文件发生改变时，资源请求本身也会触发更新。

# Q13：什么是iframe

iframe是嵌入式框架, 是html标签, 是一个内联元素, iframe 元素会创建包含另外一个文档的内联框架（即行内框架) 。通常可以使用iframe内嵌网页，跨域ajax通讯的实现，微前端，广告嵌入等。

<iframe src="home.html"></iframe>

# Q14：title 和 h1 的区别？

h1 不等于 title。h1 为大标题，一般用作文章的标题，作用如同一张报纸的大标题，使用读者在没看内容之前就大概了解本文的旨意，它是直接给用户看的。title 为页面标题，可以包含 h1 的标题，一般面对的是搜索引擎和浏览器标签。

# Q15: 请描述一下 cookies，sessionStorage 和 localStorage 的区别？

SessionStorage， LocalStorage， Cookie 这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。区别在于前两者属于 HTML5 WebStorage，创建它们的目的便于客户端存储数据。而 cookie 是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密）。cookie 数据始终在同源（协议、主机、端口相同）的 http 请求中携带（即使不需要），会在浏览器和服务器间来回传递。

存储大小：

  1. cookie 数据大小不能超过4 k 。
  2. sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。

有期时间：

  1. localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。
  2. sessionStorage 数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话。
  3. cookie 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭。

作用域：

  1. sessionStorage 只在同源的同窗口（或标签页）中共享数据，也就是只在当前会话中共享。
  2. localStorage 在所有同源窗口中都是共享的。
  3. cookie 在所有同源窗口中都是共享的。

浏览器端常用的存储技术是 cookie 、localStorage 和 sessionStorage。

cookie 其实最开始是服务器端用于记录用户状态的一种方式，由服务器设置，在客户端存储，然后每次发起同源请求时，发送给服务器端。cookie 最多能存储 4 k 数据，它的生存时间由 expires 属性指定，并且 cookie 只能被同源的页面访问共享。

sessionStorage 是 html5 提供的一种浏览器本地存储的方法，它借鉴了服务器端 session 的概念，代表的是一次会话中所保存的数据。它一般能够存储 5M 或者更大的数据，它在当前窗口关闭后就失效了，并且 sessionStorage 只能被同一个窗口的同源页面所访问共享。

localStorage 也是 html5 提供的一种浏览器本地存储的方法，它一般也能够存储 5M 或者更大的数据。它和 sessionStorage 不同的是，除非手动删除它，否则它不会失效，并且 localStorage 也只能被同源页面所访问共享。

上面几种方式都是存储少量数据的时候的存储方式，当我们需要在本地存储大量数据的时候，我们可以使用浏览器的 indexDB 这是浏览器提供的一种本地的数据库存储机制。它不是关系型数据库，它内部采用对象仓库的形式存储数据，它更接近 NoSQL 数据库。

本文转载自：https://www.php.cn/div-tutorial-480055.html (opens new window)

← Jquery 面试题 →