HTML面试题
1-10
1.HTML中src和href的区别
src（source）属性用于指定外部资源（通常是媒体文件、脚本或框架）的位置。它被用于<script>、<img>、<audio>、<video>等元素中。src表示资源的实际地址，浏览器会根据src属性加载指定的资源并执行。例如：<img src="image.jpg">表示图片文件"image.jpg"位于当前网页相对路径中。
href（hypertext reference）属性用于指定链接的目标，通常是一个URL地址。它被用于<a>（超链接）、<link>（样式表链接）、<base>（基准URL）等元素中。href定义了跳转的目标，点击链接后浏览器将加载href中指定的URL。例如：<a href="https://example.com">点击此处</a>表示点击文本时会跳转至"https://example.com"网址。
2.对HTML语义化的理解
语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。
语义化的优点如下：
对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；
对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。
3.DOCTYPE(文档类型) 的作用
DOCTYPE（文档类型）是一种用于告知浏览器页面所用HTML版本的声明。它位于HTML文档的开头，通常以
<!DOCTYPE>标签的形式出现。DOCTYPE的作用如下：
规范浏览器的解析行为：DOCTYPE声明可以告诉浏览器使用哪个HTML版本来解析页面。不同的HTML版本可能有不同的语法规则和标签解析方式，通过指定正确的DOCTYPE，可以确保页面在不同浏览器中以一致的方式显示。
避免浏览器的怪异模式：怪异模式（Quirks Mode）是指浏览器为了兼容旧版网页而采用的一种宽松的渲染模式。如果在HTML文档中没有明确指定DOCTYPE，或者指定了错误的DOCTYPE，浏览器可能会切换到怪异模式，导致页面在布局和渲染上出现不可预测的问题。通过正确指定DOCTYPE，可以避免出现怪异模式。
提供验证工具支持：指定正确的DOCTYPE可以使得HTML文档符合对应HTML版本的规范，方便验证工具对文档进行检查和验证。例如，W3C（World Wide Web Consortium）提供的HTML验证工具可以根据DOCTYPE和HTML规范检查页面的结构和语法是否正确。
总结起来，DOCTYPE的作用是确保浏览器以正确的HTML版本解析页面，避免怪异模式，并提供更好的验证和兼容性支持。在编写HTML文档时，应根据所使用的HTML版本选择相应的DOCTYPE来声明。常见的DOCTYPE声明包括HTML5的
<!DOCTYPE html>和XHTML的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">等。
4.script标签中defer和async的区别
在HTML中，
<script>标签用于引入并执行JavaScript代码。defer和async是两个常用的<script>标签属性，用于控制脚本的加载和执行方式。defer 和 async属性都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析，其区别如下：
执行顺序：
多个带defer属性的标签，按照加载顺序执行；
多个带async属性的标签，不能保证加载的顺序；
脚本是否并行执行：
defer属性，加载后续文档的过程和js脚本的加载是并行进行的，js脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded事件触发执行之前。
async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的，即异步执行；
下图可以直观的看出三者之间的区别:
其中蓝色代表js脚本网络加载时间，红色代表js脚本执行时间，绿色代表html解析。
5.常用的meta标签有哪些
meta标签由name和content属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。
<meta charset="字符集">：指定页面使用的字符编码，常见的字符集有UTF-8、GBK等。
<meta name="viewport" content="参数">：用于控制页面在移动设备上的视口（可见区域）大小和缩放行为，常用参数包括width、initial-scale、minimum-scale、maximum-scale等。
<meta name="keywords" content="关键词">：指定页面的关键词，用于搜索引擎优化（SEO）。
<meta name="description" content="描述内容">：指定页面的描述信息，用于搜索引擎显示页面摘要和描述。
<meta http-equiv="refresh" content="秒数;URL=重定向URL">：用于设置页面的自动刷新或重定向，可以指定刷新时间和重定向的URL。
<meta name="author" content="作者名">：指定页面的作者信息。
<meta name="robots" content="指令">：用于控制搜索引擎爬虫对页面的抓取和索引行为，常用指令有"index"（索引页面）和"nofollow"（不跟踪页面链接）等。
<meta http-equiv="X-UA-Compatible" content="IE=edge">：用于指定页面在IE浏览器中的渲染模式，"IE=edge"表示使用最新的渲染引擎。这些是常见的<meta>标签，可以根据具体需求选择合适的标签来设置页面的元数据信息。需要注意的是，<meta>标签通常放置在HTML文档的<head>标签内部。
6.img的srcset属性的作用
响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到了 img 标签的srcset属性。srcset属性用于设置不同屏幕密度下，img 会自动加载不同的图片。用法如下：
<img src="image-128.png" srcset="image-256.png 2x" />HTML
Copy
使用上面的代码，就能实现在屏幕密度为1x的情况下加载image-128.png, 屏幕密度为2x时加载image-256.png。
按照上面的实现，不同的屏幕密度都要设置图片地址，目前的屏幕密度有1x,2x,3x,4x四种，如果每一个图片都设置4张图片，加载就会很慢。所以就有了新的srcset标准。代码如下：
<img src="image-128.png" srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w" sizes="(max-width: 360px) 340px, 128px" />HTML
Copy
其中srcset指定图片的地址和对应的图片质量。sizes用来设置图片的尺寸零界点。对于 srcset 中的 w 单位，可以理解成图片质量。如果可视区域小于这个质量的值，就可以使用。浏览器会自动选择一个最小的可用图片。
sies语法如下：
sizes="[media query] [length], [media query] [length] ... "HTML
Copy
sizes就是指默认显示128px, 如果视区宽度大于360px, 则显示340px。
7.行内元素有哪些 块级元素有哪些 空(void)元素有哪些
HTML中的元素可以根据其默认的显示方式进行分类，常见的分类包括行内元素、块级元素和空(void)元素。
行内元素（Inline Elements）:
<span>：用于对文档中的一部分进行样式设置或标记。
<a>：创建超链接。
<img>：插入图像。
<strong>：表示强调的文本。
<em>：表示强调的文本（斜体）。
<br>：换行。块级元素（Block-level Elements）:
<div>：用于分隔文档的不同区域或组合其他元素。
<p>：定义段落。
<h1>~<h6>：定义标题，按重要性递减。
<ul>：定义无序列表。
<ol>：定义有序列表。
<li>：定义列表项。
<table>：定义表格。
<form>：定义表单。空(void)元素：
<img>：插入图像。
<input>：定义输入字段。
<br>：换行。
<hr>：水平分隔线。
<meta>：定义文档的元数据。需要注意的是，行内元素通常不会独占一行，而是在一行中根据上下文流动排列。块级元素独占一行，会自动从新行开始，并且可以设置宽度、高度等样式属性。空(void)元素没有闭合标签，而是只有一个开始标签，并且不能包含其他内容。
同时需要注意的是，通过CSS的display属性和HTML5的新特性，我们可以通过设置元素的display值来改变元素的显示方式，例如将行内元素改为块级元素或反之。
8.说一下 web worker
Web Worker 是一项用于在 JavaScript 中创建多线程的 Web API。它可以在浏览器中运行后台任务，以避免主线程阻塞或响应性降低。
Web Worker 的特点和用法如下：
多线程：Web Worker 允许在后台创建一个独立的线程，与主线程并行工作，互不干扰。这意味着可以同时执行耗时的任务，而不会影响用户界面的响应性。
脚本分离：Web Worker 通过把工作脚本放在单独的文件中来创建。这样可以使主线程保持简洁，只需通过创建 Worker 对象来加载和启动脚本文件。
通信机制：Web Worker 使用消息传递机制实现与主线程之间的通信。主线程和 Worker 线程之间可以相互发送消息，通过监听事件和使用 postMessage() 方法来实现。
安全性：由于 Worker 运行在独立的线程中，不能直接访问 DOM，也无法操作页面上的元素。这种限制增加了安全性，避免了 Worker 可能对页面造成的潜在风险。
Web Worker 主要用于处理一些耗时的计算、数据处理、文件解析等任务，以提高 JavaScript 在浏览器中的性能和响应速度。常见的应用场景包括图像处理、数据分析、音视频处理等。
需要注意的是，Web Worker 在创建时是独立于主线程的，并且具有自己的全局作用域和运行环境。因此，它无法直接访问或操作主线程中的变量、函数和 DOM 元素。但可以通过消息传递机制来进行通信，使得主线程和 Worker 线程能够共同完成任务。
9.浏览器是如何对 HTML5 的离线储存资源进行管理和加载
在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问页面 ，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过页面并且资源已经进行离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器会直接使用离线存储的资源。
10.iframe 有那些优点和缺点
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
优点：
用来加载速度较慢的内容（如广告）
可以使脚本可以并行下载
可以实现跨子域通信
缺点：
iframe 会阻塞主页面的 onload 事件
无法被一些搜索引擎索识别
会产生很多页面，不容易管理
11-20
11.浏览器乱码的原因是什么 如何解决
产生乱码的原因：
网页源代码是
gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码，反之也会出现乱码；
html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码；浏览器不能自动检测网页编码，造成网页乱码。
解决办法：
使用软件编辑HTML网页内容；
如果网页设置编码是
gbk，而数据库储存数据编码格式是UTF-8，此时需要程序查询数据库数据显示数据前进程序转码；如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单进行转换。
GBK（GuoBiaoKu）和 UTF-8（Unicode Transformation Format 8-bit）是两种常见的字符编码方式，它们之间有以下区别：
字符范围：GBK 是中文编码标准，支持汉字、中文标点符号以及部分繁体字等中文字符。UTF-8 是一种全球通用的编码方式，可以表示世界上几乎所有的字符，包括各种语言的文字、符号、表情符号、特殊字符等。
编码长度：GBK 中的每个字符占用 2 个字节，而 UTF-8 中的字符长度可变，通常是 1 字节到 4 字节不等，根据所表示的字符来动态分配字节长度。这使得 UTF-8 在表示英文字母和常见符号时更加节省空间。
兼容性：UTF-8 具有向下兼容性，因为它可以正确解码 ASCII 字符，而这些字符只需要一个字节的存储空间。而 GBK 则无法正确解码非中文字符，因为它只能识别中文字符集范围内的字符。
跨平台支持：由于 UTF-8 的普及程度较高，它在跨平台数据交换、互联网传输和国际化应用中更为广泛使用。而 GBK 主要用于早期的中文操作系统和传统的中文应用程序。
总而言之，GBK 是一种中文字符编码方式，适合在中文环境下使用；而 UTF-8 则是一种全球通用的字符编码方式，适用于多语言环境和国际化应用。UTF-8 具有更广泛的兼容性和跨平台支持，而 GBK 可能更适用于特定的中文环境。
12.HTML5有哪些新特性，移除了哪些元素 如何处理HTML5新标签的浏览器兼容问题 如何区分HTML和HTML5
HTML5引入了许多新的特性和元素，同时也移除了一些过时的元素。以下是HTML5中的一些新特性和已被移除的元素的示例：
HTML5的新特性：
新的语义化元素，如
<header>、<nav>、<section>、<article>等，用于更好地描述文档结构和内容。音频和视频元素
<audio>和<video>，用于在网页上播放音频和视频内容。表单控件的增强，包括日期选择器、邮箱验证、数字输入等。
本地存储（LocalStorage和SessionStorage）和离线应用程序缓存，允许网页在客户端存储数据和提供离线访问功能。
Canvas绘图API，用于通过JavaScript在网页上绘制图形和动画。
Geolocation API，用于获取用户设备的地理位置信息。
Web Workers，允许在后台执行脚本，提高网页的性能和响应能力。
移除的元素：
纯表现性的元素，如
<font>、<center>等，被认为是样式和布局的责任，应使用CSS来处理。过时或冲突的元素和属性，如
<frameset>、<acronym>、<applet>等。处理HTML5新标签的浏览器兼容问题可以通过以下方法：
使用HTML5 Shiv或Modernizr等库来提供对新标签的支持，这些库会在旧版本的浏览器中创建相应的元素。
使用Polyfill（垫片）来为不支持新特性的浏览器提供类似功能的替代方案。例如，通过添加脚本或库，为不支持HTML5表单验证的浏览器提供自定义验证。
使用CSS选择器和类名进行样式设置，而不是依赖特定的HTML5标签。
区分HTML和HTML5可以通过以下指示进行：
DOCTYPE声明：HTML5使用
<!DOCTYPE html>作为文档类型声明，而传统的HTML使用不同的版本声明（如HTML 4.01）。新的语义化元素：HTML5引入了许多新的语义化元素，如
<header>、<nav>等，用于更好地描述文档结构。如果一个网页使用了这些新元素，那么可以认为它是基于HTML5的。新的特性和API：HTML5引入了很多新的特性和API，如
<video>、<audio>、Canvas绘图API等。如果一个网页使用了这些新特性，那么可以确定它是基于HTML5的。需要注意的是，并非所有的新特性和元素都是HTML5独有的，有些新特性在早期版本的HTML中已经存在，而HTML5将其标准化并进行了扩展。因此，只依靠特定的元素或特性可能无法完全区分HTML和HTML5，综合考虑以上几个方面可以更准确地判断。
13.实现布局中间自适应宽度，左右两栏固定宽度
要实现布局中间自适应宽度，左右两栏固定宽度的效果，你可以使用CSS的flexbox布局或者grid布局。以下是两种方法的示例代码：
使用flexbox布局：
<div class="container"> <div class="sidebar">左侧栏</div> <div class="content">中间内容</div> <div class="sidebar">右侧栏</div> </div>.container { display: flex; } .sidebar { width: 200px; /* 固定宽度 */ } .content { flex-grow: 1; /* 自适应宽度 */ }使用grid布局：
<div class="container"> <div class="sidebar">左侧栏</div> <div class="content">中间内容</div> <div class="sidebar">右侧栏</div> </div>.container { display: grid; grid-template-columns: 200px auto 200px; /* 左中右三栏宽度 */ } .sidebar { width: 200px; /* 固定宽度 */ }上述代码中，我们将布局容器
.container设置为flexbox或grid布局，并通过设置子元素的宽度来实现左右两栏的固定宽度。对于中间内容，可以使用flex-grow: 1或auto来让其自适应填充剩余空间。你可以根据实际需要调整容器和子元素的样式，以达到你想要的效果。
14.meta viewport 是做什么用的，怎么写
Step 1：使用目的
是为了在移动端不让用户缩放页面使用的
Step 2：怎么写
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale-1, minimum-scale=1">Step 3：解释每个单词的含义
with=device-width 将布局视窗（layout viewport）的宽度设置为设备屏幕分辨率的宽度
initial-scale=1 页面初始缩放比例为屏幕分辨率的宽度
maximum-scale=1 指定用户能够放大的最大比例
minimum-scale=1 指定用户能够缩小的最大比例
15.script标签为什么要放在body标签的底部
因为浏览器在渲染html的时候，从上到下依次执行，遇到js文件就会停止当前页面的渲染，转而去下载js文件，如果将script标签放在头部，如果文件又很大的情况下，首屏时间就会延长，影响用户体验。
解决方法：
将script标签放到body的底部
通过defer\async属性将js文件转为异步下载
16.HTML5元素分类
1.结构性元素
section：在web页面应用中，该元素也可以用于区域章节表述；
header：页面主题上的头部，注意区别于head元素；
footer：页面的底部（页脚）；
nav：是专门用于菜单导航、链接导航的元素，是navigator的缩写；
article：用于表示一篇文章的主题部分，一般为文字集中显示的区域；
2.级块性元素
aside：用以表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容；
figure：是对多个元素进行组合并展示的元素，通常与figcaption联合使用；
code：表示一段代码块；
dialog：用于表达人与人之间的对话，该元素还包括dt和dd这两个组合元素，他们常常同时使用。dt用于表示说话者，而dd用来表示说话者的内容。
3.行内语义性元素
meter：表示特定范围内的数值，可用于工资、数量、百分比等；
time：表示时间值；
progress：用来表示进度条，可通过对其max、min、step等属性进行控制，完成对进度的表示和监视；
video：视频元素，用于支持和实现视频（含视频流）文件的直接播放，支持缓冲预载和多种视频媒体格式；
audio：音频元素，用于支持和实现音频（音频流）文件的直接播放，支持缓冲预载和多种音频媒体格式；
4.交互性元素
details：用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如单击）与legend交互才会显示出来；
datagrid：用来控制客户端数据与显示，可以由动态脚本及时更新；
menu：主要用于交互菜单；
command：用来处理命令按钮。
17.标准模式和混杂模式的区别
标准模式和混杂模式是浏览器在渲染HTML页面时的两种不同模式。
标准模式（standards mode）是指浏览器按照W3C标准进行页面渲染的模式，也称为严格模式（strict mode）。在标准模式下，浏览器尽量遵循W3C的规范，支持最新的CSS和JavaScript特性。如果HTML文档声明了DTD（文档类型定义），则浏览器将自动启用标准模式。
混杂模式（quirks mode）是指浏览器在不遵循W3C标准的情况下进行页面渲染的模式。在混杂模式下，浏览器通常会模拟旧版浏览器的行为，以保证向后兼容性。在HTML文档中没有声明DTD或者声明了过时的DTD时，浏览器将启用混杂模式。
标准模式和混杂模式的主要区别包括以下几个方面：
盒子模型：标准模式使用W3C盒子模型，即元素的宽度和高度不包括内边距和边框，而混杂模式使用传统的IE盒子模型，即元素的宽度和高度包括内边距和边框。这会导致在两种模式下相同的CSS样式计算出不同的元素尺寸。
默认样式：标准模式下，浏览器通常使用更为严格的CSS默认样式，而混杂模式下则可能会使用更为宽松的默认样式。这会导致在两种模式下相同的HTML文档呈现出不同的样式。
CSS解析：标准模式按照W3C标准解析CSS，而混杂模式下则可能存在非标准的解析方式。这会导致在两种模式下相同的CSS样式会被不同地解析和呈现。
JavaScript行为：由于浏览器在不同的模式下可能会存在差异，因此使用JavaScript脚本时需要注意代码在不同模式下的兼容性。
总之，在开发网页时，建议尽可能使用标准模式，并避免过时的HTML和CSS语法，以确保页面在不同浏览器和设备上呈现出一致的效果。
18.标准模式和严格模式的区别
严格模式主要有以下限制：
变量必须声明后再使用
函数的参数不能有同名属性，否则报错
不能使用with语句
不能对只读属性赋值，否则报错
不能使用前缀0表示八进制数，否则报错
不能删除不可删除的属性，否则报错
不能删除变量delete prop，会报错，只能删除属性delete global[prop]
eval不会在它的外层作用域引入变量
eval和arguments不能被重新赋值
arguments不会自动反映函数参数的变化
不能使用arguments.callee
不能使用arguments.caller
禁止this指向全局对象
不能使用fn.caller和fn.arguments获取函数调用的堆栈
19.一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验
图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
20.清除浮动的几种方法
浮动元素是在布局中的常见问题，因为它们可以永久地漂浮在其他元素周围，导致页面的布局出现异常。解决这个问题的常用方法是清除浮动。以下是几种清除浮动的方法：
使用父元素的
overflow属性：将需要清除浮动的元素的父元素的overflow属性设置为auto或hidden，会让父元素形成一个新的BFC（块级格式化上下文），从而防止子元素浮动造成的影响。<div style="overflow: auto;"> <div style="float: left;">左侧浮动元素</div> <div style="float: right;">右侧浮动元素</div> </div>
在浮动元素末尾添加空元素：使用一个空的
<div>元素来清除浮动，将其插入到浮动元素的末尾，并设置clear:both;样式，即可清除浮动。<div> <div style="float: left;">左侧浮动元素</div> <div style="float: right;">右侧浮动元素</div> <div style="clear: both;"></div> </div>
使用伪元素
:after：使用CSS伪元素:after来为需要清除浮动的元素添加一个额外的元素，并将其设置为clear:both;，从而清除浮动。<div class="clearfix"> <div style="float: left;">左侧浮动元素</div> <div style="float: right;">右侧浮动元素</div> </div>.clearfix::after { content: ""; display: table; clear: both; }
使用CSS框架：很多CSS框架（如Bootstrap）中都提供了自带的清除浮动类
.clearfix。将该类添加到需要清除浮动的元素上即可。<div class="clearfix"> <div style="float: left;">左侧浮动元素</div> <div style="float: right;">右侧浮动元素</div> </div>以上是几种常见的清除浮动的方法，每种方法都有其优缺点，需要根据实际情况选择最适合的方法。
21-30
21.写HTML代码时应注意什么
尽可能少的使用无语义的标签div和span；
在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u等，改用css设置。
在编写HTML代码时，有一些注意事项可以帮助你保持代码的可读性、易维护性和兼容性。以下是一些常见的注意事项：
使用语义化标签：使用语义化标签能够增强代码的可读性和可维护性，同时也对搜索引擎优化(SEO)和辅助技术（如屏幕阅读器）友好。例如，使用
<header>、<nav>、<main>、<section>等标签来明确页面结构。遵循标准结构：按照HTML文档的标准结构编写代码，即正确使用
<!DOCTYPE>声明、<html>元素、<head>和<body>等标签。确保每个打开的标签都有相应的关闭标签，并且嵌套关系正确。使用缩进和空格：良好的缩进和空格可以提高代码的可读性。通过正确缩进HTML代码，使其层次清晰且易于理解。
使用合适的属性引号：在HTML中，属性引号可以使用单引号或双引号，但需要保持一致性。建议使用双引号作为属性值的引号，并在可能的情况下省略属性值周围的引号（如属性值不含空格）。
给重要内容添加注释：在HTML代码中，为重要的部分或复杂的结构添加注释，以便他人可以更轻松地理解和维护代码。
注意元素的嵌套规则：在编写HTML代码时，要确保元素的嵌套关系正确。不要将块级元素嵌套在内联元素内，也不要相互交错嵌套。
使用CSS进行样式定义：尽量避免在HTML标签中使用内联样式（使用
style属性），而是将样式定义放在外部CSS文件中，使HTML代码更加简洁和易于维护。考虑跨浏览器兼容性：在编写HTML代码时，需要考虑不同浏览器的兼容性。避免使用过时的或特定于某个浏览器的特性，确保代码在不同浏览器上都能正确显示和工作。
以上是一些编写HTML代码时的常见注意事项。遵循这些最佳实践可以提高代码质量并帮助你开发出更加健壮和可维护的网页。
22.HTML5的form如何关闭自动完成功能？
HTML的输入框可以拥有自动完成的功能，当你往输入框输入内容的时候，浏览器会从你以前的同名输入框的历史记录中查找出类似的内容并列在输入框下面，这样就不用全部输入进去了，直接选择列表中的项目就可以了。但有时候我们希望关闭输入框的自动完成功能，例如当用户输入内容的时候，我们希望使用AJAX技术从数据库搜索并列举而不是在用户的历史记录中搜索。
关闭输入框的自动完成功能有3种方法：
1、在IE的Internet选项菜单里的内容–自动完成里面设置
2、设置form的autocomplete为”on”或者”off”来开启或者关闭自动完成功能
3、设置输入框的autocomplete为”on”或者”off”来开启或者关闭该输入框的自动完成功能
23.如何实现浏览器内多个标签页之间的通信
调用cookie+setInterval()
将要传递的信息存储在cookie中，每隔一定时间读取getCookie获取信息，即可随时获取要传递的信息。
24.XML和JSON的区别
(1).数据体积方面。
JSON相对于XML来讲，数据的体积小，传递的速度更快些。
(2).数据交互方面。
JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。
(3).数据描述方面。
JSON对数据的描述性比XML较差。
(4).传输速度方面。
JSON的速度要远远快于XML。
25.如何进行网站性能优化
1、减少
HTTP请求：合并文件、CSS精灵、inline Image2、将样式表放到页面顶部
3、将脚本放到页面底部
4、将
javascript和css从外部引入5、压缩
javascript和css
26.HTML和XHTML的区别是什么
主要的不同：
XHTML可以理解为html+xml，就是用xml的语法来规范html。
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
27.如果网页内容需要支持多语言，你会怎么做
考虑:
应用字符集的选择 utf-8
具体做法：
静态：就是为每种语言分别准备一套页面文件，要么通过文件后缀名来区分不同语言，要么通过子目录来区分不同语言。
动态：站点内所有页面文件都是动态页面文件（PHP，ASP等）而不是静态页面文件，在需要输出语言文字的地方统一采用语言变量来表示，这些语言变量可以根据用户选择不同的语言赋予不同的值，从而能够实现在不同的语言环境下输出不同的文字
28.对于 WEB 标准以及 W3C 的理解与认识问题
WEB标准包括HTML、XML、CSS等技术，其目标是使Web开发人员能够创建一致性的.W3C的标准被广泛应用于Web浏览器、搜索引擎和其他Web工具中。
W3C 对 web 标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点
1.对于结构要求：
1）标签字母要小写
2）标签要闭合
3）标签不允许随意嵌套
2.对于 css 和 js 来说:
1）尽量使用外链 css 样式表和 js 脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
2）样式尽量少用行间样式表，使结构与表现分离，标签的 id 和 class 等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版
3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。
29.前端页面有哪三层构成，分别是什么 作用是什么
分成：结构层、表示层、行为层。
结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”
表示层（presentation layer）由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。
行为层（behaviorlayer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。
30.div+css 的布局较 table 布局有什么优点
1.改版的时候更方便 只要改 css 文件。
2.页面加载速度更快、结构化清晰、页面显示简洁。
3.表现与结构相分离。
4.易于优化（seo）搜索引擎更友好，排名更容易靠前。
31-40
31.meta viewport 原理是什么
meta viewport 标签的作用是让当前 viewport 的宽度等于设备的宽度，同时不允许用户进行手动缩放
viewport的原理：移动端浏览器通常都会在一个比移动端屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是 viewport; 目的是正常展示没有做移动端适配的网页，让他们完整的展示给用户；
Viewport ：字面意思为视图窗口，在移动 web 开发中使用。表示将设备浏览器宽度虚拟成一个特定的值（或计算得出），这样利于移动 web 站点跨设备显示效果基本一致。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。
32.面导入样式时，使用link和@import有什么区别
相同的地方，都是外部引用CSS方式，区别：
link是xhtml标签，除了加载css外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS
link引用CSS时候，页面载入时同时加载；@import需要在页面完全加载以后加载，而且@import被引用的CSS会等到引用它的CSS文件被加载完才加载
link是xhtml标签，无兼容问题；@import是在css2.1提出来的，低版本的浏览器不支持
link支持使用javascript控制去改变样式，而@import不支持
link方式的样式的权重高于@import的权重
import在html使用时候需要“标签
33.label的作用是什么 是怎么用的
<label>标签用于为表单元素创建关联，起到标识和描述表单元素的作用。它可以通过两种方式使用：
关联表单元素：将
<label>标签与表单元素进行关联，使得点击<label>标签时，对应的表单元素获得焦点。这种方式可以提升用户体验，特别是在移动设备上触摸屏幕操作时更加友好。关联方式有两种：
使用
for属性：设置<label>的for属性值为目标表单元素的id属性值，例如：<label for="username">用户名：</label> <input type="text" id="username" name="username">包含表单元素：直接将表单元素放在
<label>标签内部，例如：<label>用户名：<input type="text" name="username"></label>描述表单元素：
<label>标签还可以用于描述表单元素，提供一些相关信息或提示。这样做有助于提高表单的可访问性和可用性。<label for="username">用户名（6-16个字符）：</label> <input type="text" id="username" name="username">通过使用
<label>标签，可以改善用户与表单元素的交互体验，并提供更好的可访问性。此外，还可以利用CSS样式对<label>进行美化，以匹配网页的视觉风格。
34.js放在html的不同位置有什么区别吗
如果使用window.函数，将js代码放在其中，则放在哪里都是一样的，因为都是在body加载完再执行的，如果不使用window.函数,放在head中的话，代码不会被执行，这是因为html执行顺序，确切的说是js的执行顺序，HTML从上运行到 的时候进入test.js文件。前面的不会运行，也就是被function包起来的不会被运行，这个时候就执行最后一句。去页面中取元素。但是这个时候，HTML页面并没有加载完。所以找不到元素，就会报错。
35.移动html5开发流行的框架有哪些
1、jQueryMobile，jQueryMobile是jQuery在手机上和平板设备上的版本。jQueryMobile不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQueryMobile开发团队说：能开发这个项目，非常兴奋。移动web太需要一个跨浏览器的框架，让开发人员开发出真正的移动web网站。
2、jQTouch，jQTouch是一个jQuery的插件，主要用于手机上的Webkit浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的Java库。支持包括iPhone、Android等手机。
36.HTML5 中如何嵌入视频
和音频类似，HTML5 支持 MP4、WebM 和 Ogg 式的视频，下面是简单示例：
<video width=”450″ height=”340″ controls> <source src=”jamshed.mp4″ type=”video/mp4″> Your browser does’nt support video embedding feature. </video>
37.Typeof的作用
typeof是JavaScript的一个运算符，用于返回给定值的数据类型。它的作用包括以下几点：
获取数据类型：使用
typeof可以判断一个值的数据类型，常见的数据类型包括"undefined"、"boolean"、"number"、"string"、"symbol"、"bigint"、"object"和"function"。例如：typeof undefined; // "undefined" typeof true; // "boolean" typeof 42; // "number" typeof "Hello"; // "string" typeof Symbol(); // "symbol" typeof {}; // "object" typeof function(){}; // "function"区分
null和对象：typeof null的结果是"object"，这是一个历史遗留问题，实际上null是一个特殊的值，表示空对象引用。要区分null和对象，可以使用严格相等运算符===进行判断。判断函数类型：通过
typeof结合条件语句，可以判断一个值是否为函数类型。例如：function foo() {} if (typeof foo === "function") { console.log("foo是一个函数"); }需要注意的是，
typeof运算符有一些特殊情况，比如对于数组、日期、正则表达式等引用类型，typeof返回的都是"object"。此外，对于未声明的变量也会返回"undefined"。因此，在使用typeof时需要注意这些细节。
3219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
