高频HTML面试题，持续更新ing

小y的日常

已于 2023-07-10 14:09:36 修改

阅读量71

点赞数 1

文章标签： html 前端

于 2023-07-06 11:43:52 首次发布

本文链接：https://blog.csdn.net/qq_34141545/article/details/131569869

版权

1.XHTML和HTLM有什么区别？

语法要求：XHTML更严格遵循xml的语法标准，要求标签必须嵌套闭合，并且所有属性值必须用引号进行包裹，而HTML针对标签和属性值并没有严格要求。

标签名称：XHTML必须用小写字母，而HTML没有大小写的要求

文档类型声明：XHTML必须以DTD（文档类型定义）或者xml命名空间来声明文档类型，而HTML则只需要<!DOCTYPE html>

元素和属性：XHTML必须使用有效的元素和属性，而HTML对一些元素和属性有一定的宽容性，允许使用一些已经被废弃或不合法的元素和属性。

兼容性：由于XHTML更严格的语法要求，对于老旧的HTML页面，需要进行一些修改才能符合XHTML的规范。这意味着在从HTML迁移到XHTML时，可能需要花费一些额外的工作量。

总的来说，XHTML可以看作是更具严格性和规范性的HTML变种，它力求遵循XML的语法规则，并对标签的嵌套、属性的引用等有更严格的要求。而HTML相对较为宽松，对于开发者而言更容易书写和维护。但随着新一代HTML标准的出现（如HTML5），XHTML的使用逐渐减少，HTML成为了最主流的网页标记语言。

2.请写出至少5个块元素标签

div p ui li h1 - h6 table form

3.请写出至少5个span元素标签

span a img label input textarea button select i

4.请写出table标签包含哪些元素

tr td th thead tbody tfoot

5.很多网站不经常使用table，iframe知道原因吗

因为浏览器的渲染是从上至下的，而table和iframe则是先等内部元素渲染完再整体渲染，对用户体验很不好

6.jpg和png的区别

jpg为有损压缩图片，png为无损压缩图片，所以，相同图片jpg体积会更小。常用于官图的banner图片，还有一点事jpg不支持透明度，而png支持透明度

7.请用html知识来解决seo

当使用HTML来解决SEO（搜索引擎优化）问题时，以下是一些推荐的做法：

使用语义化的HTML标记：使用适当的HTML标记来描述网页内容的结构和语义，如使用<h1>至<h6>标签来标记标题，<p>标签来标记段落，<strong>标签来标记重要文本等。这样有助于搜索引擎理解页面内容的重要性和结构。
优化页面标题（Title）：在<head>标签内使用<title>标签来定义每个页面的标题，确保标题准确、具有描述性，并包含与页面内容相关的关键词。页面标题是搜索引擎显示在搜索结果中的重要元素，也是用户点击的决策依据之一。
使用meta标签：在<head>标签内使用<meta>标签提供关于网页的描述（description）和关键词（keywords）。这些信息可以帮助搜索引擎了解页面内容，并在搜索结果中显示相关描述。
使用合适的URL结构：使用短且描述性的URL，包含相关关键词，利于搜索引擎和用户理解页面内容。避免使用无意义的参数等复杂的URL结构。
图片优化：使用适当的alt属性来描述图像内容，以及有关图像内容的关键词。这有助于搜索引擎了解图像内容，并在图像搜索结果中显示相关图片。
内部链接和锚文本：在网页内部使用合适的锚文本（anchor text）来创建内部链接，将相关页面相互连接起来。这有助于搜索引擎了解网站的结构和重要页面，并提升页面的可访问性。
网页速度优化：优化网页加载速度，包括压缩HTML、CSS和JavaScript文件，使用缓存机制，优化图片大小等。搜索引擎更倾向于加载速度快的网页，并将其排名较高。
响应式设计：确保网页能够适应不同设备和屏幕大小，提供良好的用户体验。由于移动设备的普及，响应式设计对于SEO至关重要。
需要注意的是，SEO是一个综合性的工作，不仅限于HTML标记。还需要考虑内容质量、外部链接、社交分享等其他因素来提升网站的整体SEO效果。

7.常用的浏览器有哪些，说说内核

常用浏览器有 IE 火狐(firefox) chrome safari 360 搜狗等

内核：IE的是 Trident

火狐的是 Gecko

chrome和safari 用的是 Webkit

360和搜狗这些分极速模式和兼容模式，极速模式用的Webkit的内核，兼容模式用的Trident内核。

8.h5的新增特性

input表单控件：calendar、date、time、email、url、search 等

语义化标签：header、footer、nav、aside、section、article 等

HTML5 drag

Web Worker

Web Storage：localstorage、sessionstorage

WebSocket

视频和音频: audio标签 video标签

Canvas 与 SVG

9.a标签详解：

概念：a标签全称anchor，翻译为锚，常用来表示一个锚点或超链接。除交互类别的内容（按钮，链接等）外，a标签可以嵌套任何文档流内容。所有浏览器都支持a标签。

基本特性：
href（超文本引用）
是a标签最重要的特性，表示链接的目标地址，包含三种类型，其一链接地址，其二下载地址，其三锚点地址。href特性值不能为空，否则会刷新页面，若暂时不需要设置目标地址，可以如下代码所示设置特性值。

<a href="www.baidu.com">链接地址</a>
<a href="login.zip">下载地址</a>
<a href="#test">描点位置到test</a>
<a href="http://baike.baidu.com/view/2202.htm#2">描点到html中的id为2的位置</a>
<a href="javascript:;">暂时不需要设置</a>
<a href="javascript:void(0)">暂时不需要设置</a>

href特性与src特性的区别

href全称hypertext reference，翻译为超文本引用，表示当前页面引用了别处的内容。src全称source，翻译为来源地址，表示把别处的内容嵌入到当前页面。img、script和iframe等标签使用src特性，a、map等标签使用href特性。
target（链接的打开方式）

_self:      当前窗口(默认)
_blank:     新窗口
_parent:    父框架集（在父窗体中打开链接，在窗口与顶级框架中，等同于_self）
_top:       整个窗口（在当前窗体打开链接，并替换当前的整个窗体(框架页)，清除所有包含的框架）
_framename: 指定框架

参考链接：a标签的target属性_前端_前端小菜鸟WZK-View Design

download（设置下载名称）

<a href='file.zip' download='文件下载'>文件下载</a>

rel（链接间的关系）

alternate   相较于当前文档可替换的呈现
author      链接到当前文档或文章的作者
bookmark    链接最近的父级区块的永久链接
help        与当前上下文相关的帮助链接
license     当前文档的许可证
next        后一篇文档
prev        前一篇文档
nofollow    当前文档的原始作者不推荐超链接指向的文档
noreferer   访问时链接时不发送referer字段
prefetch    预加载链接指向的页面(对于chrome使用prerender)
search      用于搜索当前文档或相关文档的资源
tag         给当前文档打上标签

prefetch，prev，next

<a href="prev.html" rel="prev prefetch prerender">前一页</a>
<a href="next.html" rel="next prefetch prerender">后一页</a>
<!--prefetch也可以用于预加载其他类型的资源-->
<link rel="prefetch prerender" href="test.img">

注意事项：

a标签的文本颜色只能自身设置，从父级继承不到。
a标签的下划线颜色跟随文本颜色进行变化
a标签不能嵌套a标签和按钮等交互类型的内容

<div style="color: red;">
    <a href="#">从父级继承不到红色字体</a>
    <br>
    <a href="#" style="color: green">下划线颜色与文本同色</a>
    <br>
    <a href="#">前面<a href="#">a标签不可嵌套</a></a>
</div>

小y的日常

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
高频HTML面试题，持续更新ing

总的来说，XHTML可以看作是更具严格性和规范性的HTML变种，它力求遵循XML的语法规则，并对标签的嵌套、属性的引用等有更严格的要求。使用语义化的HTML标记：使用适当的HTML标记来描述网页内容的结构和语义，如使用至标签来标记标题，标签来标记段落，标签来标记重要文本等。需要注意的是，SEO是一个综合性的工作，不仅限于HTML标记。元素和属性：XHTML必须使用有效的元素和属性，而HTML对一些元素和属性有一定的宽容性，允许使用一些已经被废弃或不合法的元素和属性。
复制链接

扫一扫