HTML 常见面试题

article/2025/11/4 8:55:07

一、HTML5(超文本标记语言,第五次重大修改)

二、HTML5新特性

①:新的语义标签 header footer nav aside article section

②:新的表单控件 calendar date time email url search

③:音频、视频( audio、 video)API

④:地理定位 ( Geolocation)APl

⑤:画布( Canvas、Svg)API

⑥:本地离线存储( localStorage/sessionStorage)

⑦:拖拽( Drag and drop)API

⑧:多线程处理 (webWorker)

三、!DOCTYPE 的作用

①:DOCTYPE是document type的简写,它并不是 HTML 标签,也没有结束标签,它是一种标记 语言的文档类型声明,即 告诉浏览器要通过哪一种规范(DTD)解析文档(比如HTML或XHTML规范)。

注意: DOCTYPE的声明必须是 HTML 文档的第一行,位于html标签之前。大多数Web文档的顶部都有doctype声明,它是在新建一个文档时,由Web创作软件草率处理的众多细节之一。很少人会去注意 doctype ,但在遵循标准的任何Web文档中,它都是一项必需的元素。doctype会影响代码验证,并决定了浏览器最终如何显示你的 Web文档

四、新的HTML5文档类型和字符集是什么?

①. HTML5文档类型是<!doctype html>。

②. HTML5使用的字符集< meta charset="UTF8">。

五、HTML5中如何实现应用缓存?

首先,需要指定“ manifest”文件," manifest”文件帮助你定义缓存如何工作以下是“ manifest”文件的结构。

CACHE MANTEEST 
# version 1.0
/demo. css
/demo. js
/demo.png
所有 manifest文件都以” CACHE MANIFEST"语句开始。
#(散列标签)有助于提供缓存文件的版本。
manifest文件的内容类型应是"text/ cache- manifest”。

创建一个缓存 manifest文件后,在HTML页面中提供 manifest链接,代码如下所示。

<html manifest="icketang. appcache">

第一次运行以上文件时,它会添加到浏览器应用缓存中,在服务器宕机时,页面从应用缓存中获取数据。

应用缓存通过变更“#”标签后的版本号来刷新

六、meta 标签属性有哪些,具体有什么作用?

常用属性:http-equiv、name、content、charset

1. charset为HTML5中新增的,用来声明字符编码;

2. http-equiv属性在HTML4中有很多值,在HTML5中只有refresh、default-style、content- type可用

3. name属性与content属性结合使用, name用来表示元数据的类型,表示当前<meta>标签的具体作用;content属性用来提供值。

元数据名称(name的值)

说明

application name

当前页所属Web应用系统的名称

keywords

描述网站内容的关键词,以逗号隔开,用于SEO搜索

description

当前页的说明

author

当前页的作者名

copyright

版权信息

renderer

renderer是为双核浏览器准备的,用于指定双核浏览器默认以何种方式渲染页面

viewport

它提供有关视口初始大小的提示,仅供移动设备使用

renderer

<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式<meta name="renderer" content="webkit|ie-comp|ie-stand">

2. 声明字符编码

charset属性为HTML5新增的属性,用于声明字符编码,以下两种写法效果一样

<meta charset="utf-8"> //HTML5
<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //旧的HTML

3. 模拟http标头字段

http-equiv属性与content属性结合使用, http-equiv属性为指定所要模拟的标头字段的名称,content属性用来提供值。

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

content-Type 声明网页字符编码:

<meta http-equiv="content-Type" content="text/html charset=UTF-8">

refresh 指定一个时间间隔(以秒为单位),在此时间过去之后从服务器重新载入当前页面,也可以另外指定一个页面.

<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">//2秒后在当前页跳转到百度

X-UA-Compatible 浏览器采取何种版本渲染当前页面

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> //指定IE和Chrome使用最新版本渲染当前页面

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

<meta http-equiv="expires" content="Sunday 22 July 2016 16:30 GMT">

cache-control 用于指定所有缓存机制在整个请求/响应链中必须服从的指令

<meta http-equiv="cache-control" content="no-cache">//

content有以下值(百度百科):

content的值

说明

public

所有内容都将被缓存(客户端和代理服务器都可缓存)

private

内容只缓存到私有缓存中(仅客户端可以缓存,代理服务器不可缓存)

no-cache

必须先与服务器确认返回的响应是否被更改,然后才能使用该响应来满足后续对同一个网址的请求。因此,如果存在合适的验证令牌 (ETag),no-cache 会发起往返通信来验证缓存的响应,如果资源未被更改,可以避免下载。

no-store

所有内容都不会被缓存到缓存或 Internet 临时文件中

must-revalidation/proxy-revalidation

如果缓存的内容失效,请求必须发送到服务器/代理以进行重新验证

max-age=xxx (xxx is numeric)

缓存的内容将在 xxx 秒后失效, 这个选项只在HTTP 1.1可用, 并如果和Last-Modified一起使用时, 优先级较高

七、SEO优化手段?

HTML代码的几个优化重点

一、Title 标签

Title 标签能够告诉用户和搜索引擎网页页面的主题思想是什么,一直是搜索引擎的抓取重点。通常,搜索引擎抓取Title标签出于两个目的:作为影响网页排名的重要因素和作为搜索结果页面的显示信息。不管是哪一个目的,对我们做SEO来说都非常重要。

一般来说,Title标签中的单词最好保持在3~6个左右,最好包含关键字。但Title标签中的单词不要全部都是关键字,因为这样可能会造成页面关键字堆砌,导致过度优化。所选单词应简洁明了、具有描述性,要与网页内容具有很大的相关性,并且每个不同的页面都应该包含Title标签。

二、Meta Description标签

对Title标签优化之后,接下来就是对Meta Description标签的优化。Meta Description标签可以说是对Title标签的进一步解释,可以是一句话或者是包含十几个单词的短语。每个页面都该有其自己的Meta Description标签,并且Meta Description标签还可包含一些与网站内容相关但Title标签中未提及的信息。与Title标签要求相似,该部分内容也应具有描述性,与网页内容具有相关性,可包含关键字,但不可过多。

三、Heading标签 (H1 - H6 标签)

Heading标签包含了H1、H2、H3等等,是搜索引擎识别页面信息的重要标记。合理使用H1、H2、H3等不同级别的标签能够使得页面结构更加清晰,有利于搜索引擎的抓取。H1、H2、H3等标签是按照重要程度来排名的。一般一个页面按照需求程度来适当添加该标签:从H1开始,依次往下添加。但不可添加太多Heading标签,否则会适得其反。

四、Strong和B标签

相信大多数朋友都知道Strong和B标签都有加粗的意思,但是很多人并不清楚两者具体有什么区别。其实B标签就是单纯地将文字加粗,而Strong标签不仅是对文字加粗,并且这种形式的加粗会告诉搜索引擎该部分文字比较重要。所以两者从搜索引擎优化的角度来看,是有很大的区别的。

上文中所提到的Heading标签页具有加粗效果,那么这三种标签到底该怎么用?其实,Heading标签一般用于文章大标题以及每段的小标题,而Strong标签一般用于文章段落中的重点词汇,而B标签一般只是强调一种视觉效果。

五、ALT标签

ALT标签是一种图片标签,它将图片的信息以文本的形式展现。对ALT标签的使用没有太多要求,只要在网页中出现图片的部分添加上该属性即可,但其标签内容应与相应页面内容具有相关性,长度不得过长,一般1~5个单词即可。

以上介绍了HTML代码中的五种重要标签,相信会对做SEO工作的人员特别是SEO新手具有很大帮助。对HTML代码的优化一直是我们做搜索引擎优化工作的非常基础并且重要的一部分,只有做好了这部分优化工作,我们才能开展更加深层的优化。

html标签权重分值排列 分值

内部链接文字

10分

标题title

10分

域名

7分

H1,H2,字号标题

5分

每段首句

5分

路径或文件名

4分

文本用法(内容)

1分

title属性(例如: a href="" title="")

1分

alt标记

0.5分

八、为什么使用语义化标签?

一、让浏览器或是网络爬虫可以很好地理解,让机器更懂HTML,进而更好地分析网页结构、内容;

二、具有更好的搜索引擎优化能力,提高网站的搜索排名,对于网站后期的维护推广尤为有利;

三、代码可读性好,方便维护;

四、技术趋势所趋,让WEB开发越来越普及、规范;


http://chatgpt.dhexx.cn/article/JM1AYYVx.shtml

相关文章

经典HTML前端面试题总结

经典HTML前端面试题总结 1. 1简述一下你对 HTML 语义化的理解&#xff1f;.1.2 标签上 title 与 alt 属性的区别是什么&#xff1f;1.3 iframe的优缺点&#xff1f;1.4 href 与 src&#xff1f;1.5 HTML、XHTML、XML有什么区别1.6 知道img的srcset的作用是什么&#xff1f;1.7 …

html相关面试题

html相关面试题 1.html和css中的图片加载与渲染规则是什么样的&#xff1f;2.title与h1的区别、b与strong的区别、i与em的区别&#xff1f;title 和 h1 的区别b 和 strong 的区别i 和 em 的区别最后 3.script 标签为什么建议放在 body 标签的底部&#xff08;defer、async&…

html面试复习

目录 网页的显示过程 浏览器的渲染引擎 不同浏览器的内核 什么是标记语言&#xff08;markup language &#xff09; 什么是超文本&#xff08; HyperText &#xff09; 完整的html结构 文档声明 html元素 head元素 body元素 html元素 img标签 a标签 锚点链接 i…

HTML 面试题汇总

HTML 面试题汇总 1. 什么是 <!DOCTYPE>&#xff1f;是否需要在 HTML5 中使用&#xff1f; 参考答案&#xff1a; 它是 HTML 的文档声明&#xff0c;通过它告诉浏览器&#xff0c;使用哪一个 HTML 版本标准解析文档。 在浏览器发展的历史中&#xff0c;HTML 出现过很多个…

【2022前端面试】HTML面试题汇总(加紧收藏)

【2022前端面试】HTML面试题汇总&#xff08;加紧收藏&#xff09; 更新时间&#xff1a;2022年2月23日。 本文致力于建设前端面试题库&#xff0c;欢迎兄弟们投稿哈&#xff01; 引言 没办法&#xff0c;逃不过。看了很多面经和总结&#xff0c;时过一年&#xff0c;再次更新…

前端html+css+js面试题

HTML&CSS&#xff1a;对Web标准的理解&#xff08;结构、表现、行为&#xff09;、浏览器内核、渲染原理、依赖管理、兼容性、CSS语法、层次关系&#xff0c;常用属性、布局、选择器、权重、盒模型、Hack、CSS预处理器、CSS3、Flexbox、CSS Modules、Document flow、BFC、H…

10个最常见的HTML5面试题

本文为大家分享了最常见的10个HTML5面试题,希望大家喜欢。 问题1、新的 HTML5 文档类型和字符集是? 答:HTML5 文档类型很简单: HTML5 使用 UTF-8 编码。 问题2、HTML5 中如何嵌入音频? 答:HTML5 支持 MP3、Wav 和 Ogg 格式的音频,下面是在网页中嵌入音频。 问题3、H…

前端面试题 —— HTML

目录 一、src 和 href 的区别 二、对 HTML 语义化的理解 三、DOCTYPE(⽂档类型) 的作⽤ 四、script 标签中 defer 和 async 的区别 五、常⽤的 meta 标签有哪些&#xff1f; 六、HTML5 有哪些更新 八、行内元素有哪些&#xff1f;块级元素有哪些&#xff1f; 空(void)元素…

前端十五道html面试题

目录 01.说一下对语义化的理解&#xff1f;✅ 02.说一下iframe有哪些优点和缺点&#xff1f;✅ 03.DOCTYPE的作用&#xff1f;严格模式和混杂模式的区别&#xff1f; 04.说一下渐进增强和优雅降级的区别&#xff1f; 05. <!DOCTYPE html> 标签是否为 HTML 标签&#…

【前端面试题】01—42道常见的HTML5面试题(附答案)

HTML5为我们提供了更多的语义化标签、更丰富的元素属性&#xff0c;以及更让人欣喜的功能。但在面试中&#xff0c;HTML5部分的面试题主要考察应试者对HTML5API的掌握情况&#xff0c;这是HTML5的重点&#xff0c;也正是这些API推动了前端的发展。 这些新技术早已应用在很多大型…

28道HTML基础面试题及答案汇总

1、内元素和块级元素的区别&#xff1f; 行内元素&#xff1a;不会独立出现在一行&#xff0c;单独使用的时候后面不会有换行符的元素。eg&#xff1a;span, strong, img, a 等。这些元素&#xff0c;默认的高宽&#xff0c;总是其内容的高宽。并且&#xff0c;margin和padding…

HTML+CSS基础面试题总结

1. display:none; 和visibility:hidden;的区别 display:none; 彻底消失&#xff0c;释放空间。可能引发页面的reflow回流&#xff08;重排&#xff09;。 visibility:hidden; 就是隐藏&#xff0c;但是位置没释放&#xff0c;好比opacity:0; 不引发页面回流。 2.CSS 选择器权…

HTML面试题整理

HTML面试题整理 01.说一下对语义化的理解&#xff1f;✅ 对开发者友好&#xff0c;让人更容易读懂&#xff0c;利于代码可读性对机器友好&#xff0c;让搜索引擎更容易读懂&#xff0c;利于seo 02.说一下HTML5有哪些更新/新增&#xff1f;✅ 新增语义化标签&#xff0c;音频…

安全-反射性xss基础注入

目录 题目 代码分析 注入过程及思路 1、第一次注入 2、第二次注入 3、第三次注入 4、第四次注入 题目 <?php header(X-XSS-Protection: 0); $xss isset($_GET[xss])? $_GET[xss] : ; $xss str_replace(array("(",")","&",&qu…

网络安全-靶机dvwa之XSS注入Low到High详解(含代码分析)

目录 XSS(DOM)-LOW 普通注入 代码分析 后端 前端 XSS(DOM)-MIDIUM 普通注入 大小写绕过 Html标签绕过 闭合标签 代码分析 XSS(DOM)-HIGH 闭合HTML标签绕过 代码分析 主要步骤 漏洞原因 XSS(Reflected)-LOW 普通注入 代码分析 主要步骤 漏洞原因 XSS(Refle…

关于HTML 代码注入,XSS攻击问题解决

大部分的网站一般都有评论功能或留言功能&#xff0c;或类似可以让用户写东西的地方。 如果后台不经过处理&#xff0c;又把数据返回前端&#xff0c;这就会出问题了。网页解析器会把用户的信息也当成html代码给解析了。 如果用户写的是一些恶意的 js 脚本这是很危险的。专业…

实验三:XSS和SQL注入

实验三&#xff1a;XSS和SQL注入 实验目的&#xff1a; 实验目的&#xff1a;了解什么是XSS&#xff1b;了解XSS攻击实施&#xff0c;理解防御XSS攻击的方法&#xff1b;了解SQL注入的基本原理&#xff1b;掌握PHP脚本访问MySQL数据库的基本方法&#xff1b;掌握程序设计中避…

XSS注入漏洞解决方法(高风险)

漏洞描述 攻击者往Web页面里插入恶意Script代码&#xff0c;当用户浏览该页之时&#xff0c;嵌入其中Web里面的Script代码会被执行&#xff0c;从而达到恶意攻击用户的目的。 漏洞验证 通过在页面中的留言板&#xff0c;提交框&#xff0c;录入信息框等能够提交参数的地方&a…

XSS注入——DOM型XSS

DOM型xss XSS根据恶意脚本的传递方式可以分为3种&#xff0c;分别为反射型、存储型、DOM型&#xff0c;前面两种恶意脚本都会经过服务器端然后返回给客户端&#xff0c;相对DOM型来说比较好检测与防御&#xff0c;而DOM型不用将恶意脚本传输到服务器在返回客户端&#xff0c;这…

XSS注入之xss-labs

目录 &#xff08;一&#xff09;配置环境 &#xff08;1&#xff09;phpstudy 的安装 &#xff08;2&#xff09;xss-labs 的安装 &#xff08;二&#xff09;XSS漏洞的一些基础知识 &#xff08;1&#xff09;XSS漏洞的定义 &#xff08;2&#xff09;XSS漏洞的原理 &…