HTML 常见面试题

news2024/11/17 1:51:28

一、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://www.coloradmin.cn/o/139279.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

地产2022价值启示录:房企必须闯过的“三重门”

回顾2022年&#xff0c;中国最大的经济变向之一&#xff0c;无疑就是地产增量时代的落幕。过去一整年&#xff0c;地产行业在“冷热交替”中前行。上半年&#xff0c;疫情、交付延期、停贷潮等阴霾萦绕在众多房企头顶上&#xff0c;市场需求疲软之下业绩下滑&#xff0c;难以看…

《MySQL系列-InnoDB引擎10》InnoDB关键特性-异步IO

InnoDB 关键特性 InnoDB存储引擎的关键特性包括&#xff1a; Insert Buffer (插入缓冲)Double Write (两次写)Adaptive Hash Index (自适应哈希索引)Async IO (异步IO)Flush Neighbor Page (刷新领接页) 这些特性为InnoDB存储引擎带来了更好的性能以及更高的可靠性。 异步IO 为…

在外打工好久不回老家,用python为家里贴上新年春联

每逢春节&#xff0c;无论城市还是农村&#xff0c; 家家户户都要挑漂亮的红春联贴于门上&#xff0c;辞旧迎新&#xff0c;增加喜庆的节日气氛。 唠叨神话 据说这一习俗起于宋代&#xff0c;在明代开始盛行&#xff0c; 到了清代&#xff0c;春联的思想性和艺术性都有了很…

SpringBoot @ConfigurationProperties使用详解

SpringBoot ConfigurationProperties使用详解 目录SpringBoot ConfigurationProperties使用详解1.1 简述1.2 场景一1.3 场景二1.4 场景三1.5 聊聊EnableConfigurationProperties1.1 简述 在Spring Boot中注解ConfigurationProperties有三种使用场景&#xff0c;而通常情况下我…

51单片机学习笔记_6 IO通信:电脑与单片机之间的通信

通信 单片机还可以通过IO口实现多种通信。 串行通信&#xff1a;一条数据线&#xff0c;一次发1bit&#xff0c;发很久。 并行通信&#xff1a;多条数据线&#xff0c;同时发送&#xff0c;发的速度快多了但是费用高、接收困难、抗干扰性差。 异步通信&#xff1a;发送和接…

PMP、ACP、软考证书,当前哪些值得一考?

看自己的偏向吧&#xff0c;要说考的话&#xff0c;是都值得考的。ACP和PMP都是美国PMI发起的考试&#xff0c;软考是国内的考试。PMP是项目管理证书&#xff0c;学习的内容是项目管理&#xff0c;包含大约一半的敏捷项目管理的内容&#xff0c;ACP的内容都是敏捷项目管理&…

操作系统第三次实验-动态分区存储管理(python代码实现)

一、实验目的&#xff1a; 目的&#xff1a;熟悉并掌握动态分区分配的各种算法&#xff0c;熟悉并掌握动态分区中分区回收的各种情况&#xff0c;并能够实现分区合并。 任务&#xff1a;用高级语言模拟实现动态分区存储管理。 二、实验内容&#xff1a; 1、实验内容 分区分配算…

Qt 编译出的程序无法在其他电脑运行

明确构建套件&#xff08;Kit&#xff09; Kit 包含了构建程序所需的全部工具&#xff0c;例如编译器&#xff0c;可以从Qt Creator 左下角查看Kit。 我这里使用的Kit是Desktop Qt 5.12.6 MinGW 64-bit 打开 Kit 版本对应的 Qt 命令行工具 我这里需要打开Qt 5.12.6 (MinGW 7.3…

php反序列化字符逃逸

php反序列化字符逃逸 php反序列化字符逃逸的原理 当开发者使用先将对象序列化&#xff0c;然后将对象中的字符进行过滤&#xff0c;最后再进行反序列化。这个时候就有可能会产生PHP反序列化字符逃逸的漏洞。 php反序列化字符逃逸分类 过滤后字符变多 过滤后字符变少 过滤后字…

Alma Linux和Rocky Linux,你会选择用哪个?

AlmaLinux和Rocky Linux是两个基于 Red Hat Enterprise Linux (RHEL) 发行版的免费开源操作系统&#xff0c;两者都旨在由社区驱动、透明且稳定&#xff0c;但两者之间存在一些关键差异。 Rocky Linux Rocky Linux 是一个基于 Red Hat Enterprise Linux (RHEL) 发行版的免费开…

Android 音视频学习之《MediaCodec》

一、介绍以及编解码流程 MediaCodec 类可用于访问低级媒体编解码器&#xff0c;即编码器/解码器组件。它是 Android 低级多媒体支持基础结构的一部分&#xff08;通常与MediaExtractor、MediaSync、MediaMuxer、MediaCrypto、 MediaDrm、Image、Surface和一起使用AudioTrack。…

060-MySQL数据库综合应用(实现登录及注册功能源代码)

【上一讲】059-MySQL数据库综合应用(实现登录及注册功能)_CSDN专家-赖老师(软件之家)的博客-CSDN博客 本文章讲解JAVA数据库技术与MySQL数据库结合使用,利用DAO技术对数据库操作进行封装,达到高内聚低耦合,具体技术如下: 1.综合利用JAVA数据库技术,掌握Connection,St…

操作系统第四次实验-基本分页存储管理(python代码实现)

一、实验目的&#xff1a; 目的&#xff1a;熟悉并掌握基本分页存储管理的思想及其实现方法&#xff0c;熟悉并掌握基本分页存储管理的分配和回收方式。 任务&#xff1a;模拟实现基本分页存储管理方式下内存空间的分配和回收。 二、实验内容&#xff1a; 1、实验内容 内存空间…

一道有意思的图论题

今天写这道题的过程就一直在摆&#xff0c;主要是写不太出来&#xff0c;之前想到动态规划去了&#xff0c;然后又开始深搜&#xff0c;在出口那块放动态规划 题&#xff1a; D. Ela and the Wiring Wizard 点我 但是cf让我明白了一个道理&#xff0c;任何一道我写不出来的题代…

点菜方案数

题目描述 不过uim的口袋里只剩 M元(M < 10000)&#xff0c;来到了一家低端餐馆前。 餐馆虽低端&#xff0c;但是菜品种类不少&#xff0c;有 N 种(N < 100)&#xff0c;第i种卖元(ai < 1000)。由于是很低端的餐馆所以每种菜只有一份。 uim奉行“不把钱吃光不罢休”&a…

作用域与作用域链

javascript拥有一套设计良好的规则来存储变量&#xff0c;并且之后可以方便的找到这些变量&#xff0c;这套规则叫做作用域。 内部原理 内部原理分成编译、执行、查询、嵌套和异常五部分。今天来简单说一下查询。 var a2;这行代码中&#xff0c;在引擎执行的第一步操作中&am…

【C++ Primer】阅读笔记(3):decltype

目录 简介decltype基础decltype需要注意的地方1.decltype处理顶层const、引用与auto不同2.如果decltype使用的表达式不是一个变量,则decltype返回表达式结果对应的类型。3.如果表达式的内容是解引用操作,则decltype会得到引用类型。4.对于decltype所用的表达式来说,如果变量…

Spring AOP统一功能处理

⭐️前言⭐️ 这篇文章主要介绍AOP&#xff08;Aspect Oriented Programming&#xff09;——面向切面编程的思想&#xff0c;它是对某一类事情的集中处理&#xff0c;也是对OOP&#xff08;Object Oriented Programming&#xff09;面向对象编程的补充和完善。 &#x1f349;…

【编程语言选择】我们学C++将来能做什么?

首先贴上C嘎嘎祖师爷的镇楼帅照&#x1f606; 凝视目录 什么是C C的使用广泛度 C的具体工作领域有什么 什么是C 简单说 C是基于C语言而产生的&#xff0c;它既可以进行C语言的过程化程序设计&#xff0c;又可以进行以抽象数据类型为特点的基于对象的程序设计&#xff0c;还可…

【区块链 | 前端】前端开发人员入门区块链的最佳实践

前端开发人员入门区块链的最佳实践 一. 建立信仰 从技术入门一个行业通常是漫无目的&#xff0c;个人认为正确的入行区块链的方式是去了解他的背景&#xff0c;是去建立自己信仰的&#xff0c;尤其身处一个刚起步就被扼杀的行业&#xff0c;我们每个人都是领头人&#xff0c;我…