HTML 常见面试题

最新推荐文章于 2024-07-25 11:52:08 发布

Hupan_Pan

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量499

点赞数

文章标签： html 前端 html5 Powered by 金山文档

本文链接：https://blog.csdn.net/Hupan_Pan/article/details/128546956

版权

一、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链接，代码如下所示。

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

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

六、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分