章先介绍一些HTML最基础的考点，很多大长面试官喜欢由浅入深地考察知识。而对于一些基础问题的回答，很多同学反而因组织不好语言而给面试官留下不好的印象。本章节我们就带大家一一整理和回顾。

1.1 DOCTYPE的作用

面试官：我们现在写HTML代码第一行通常是 !<DOCTYPE HTML>，请介绍一下DOCTYPE的作用（基础题）

DOCTYPE标签是一种标准通用标记语言的文档类型声明，且必须声明在文档的第一行，来告知浏览器用何种文档标准来解析这个网页，不同的渲染模式会影响浏览器对CSS和JavaScript的解析标准。

面试官：浏览器解析文档有哪几种解析模式呢？（拓展题）

文档的解析模式目前主要有 *两种（注意：还有一种“准标准模式”只在IE8浏览器里，目前主流浏览器已无需考虑）：

1. 怪异模式（quirks mode）：此种模式会模拟更旧的浏览器的行为。如果没有声明DOCTYPE，浏览器默认会以这种模式解析文档。
2. 标准模式（standards mode）：浏览器使用W3C的标准解析渲染页面。

面试官：如何快速检查页面的解析模式？（发散题）

HTML文档对象有个 compatMode 属性，用于记录页面的解析模式：

• 如果文档处于“混杂模式”，则该属性值为 BackCompat
• 如果文档处于“标准模式”或者“准标准模式(almost standards mode)”，则该属性为 CSS1Compat

const mode = document.compatMode; // 页面的解析模式
if (mode === "BackCompat") {
  // 渲染模式为混杂模式
}

1.2 HTML的语义化

面试官：什么是HTML语义化，语义化的作用是什么？（基础题）

语义化是指使用恰当语义的html标签，让页面具有良好的结构与含义；比如<p>标签就代表段落，<article>代表正文内容等等。语义化的作用有两点：

• 开发者友好：使用语义类标签增强代码的可读性，开发者也能够清晰地看出网页的结构，易维护；
• 机器友好：带有语义的标签适合搜索引擎的爬虫爬取有效信息，能快速生成网页骨架或文章提纲，SEO友好。

面试官：你平时有哪些语义化的建议或最佳实践？（发散题）

根据语义化的优点，对于富文本内容类的网站（如门户、新闻网站），语义化利于SEO，对网站内容的传播有很大帮助，此类网站应该重视和实践语义化标准。而对于一些系统类网站的搭建，语义化就没有那没重要了，甚至刻意做语义化反而会影响开发者的效率，此类网站可以对页面骨架做语义化，至于模块的交互组件和表单等则无需刻意做语义化。

1.3 HTML5新增内容考察

面试官：你知道HTML5有哪些新增的东西吗？（基础题）

HTML5新增的内容确实不少，面试官不会要求你全部记下来，我们可以挑重要的东西来回答：

• 新的文档解析顺序：不再基于 *SGML；
• 全面支持CSS3：
• 加了一些语义化元素：<header>、<mainer>、<footer>、<section>、<nav>等
• 删了一些样式类元素：<font>、<big>、<center> 等
• 表单能力加强：<input>的新类型（date、email、url等）、新属性（autocomplete、autofocus等）
• 新的属性：ping（用于a与area）、charset（用于meta）、async（用于script）等
• 定位能力：navigator.geolocation
• 多媒体支持：<video>（视频）、<audio>（音频）等
• 2D/3D 制图支持：支持svg、canvas绘图和动画等
• 新的缓存策略：Localstorage、SessionStorage、IndexedDB等
• 新的网络协议：WebSocket
• 新的跨域通信方案：XHTMLHttpRequest2、PostMessage......

拓展：什么是SGML

• SGML 即Standard Globalized Markup Language 是用来定义标准的标记语言，简单的说，就是定义文档的元语言。
• HTML 是基于SGML 的超链接语言，可以用于创建Web页面。在DTD 内部定义了标签的规则，DTD就是使用SGML 语言创建的。
• HTML5不是基于SGML 语言的，因此不需要DTD ，它是一种全新的标记语言，有自己的解析规则，HTML5的语法规则与之前版本有很大的差别，可以称的上是一种全新的语言

1.4 meta标签

面试官：介绍一下<meta>标签的用途 （基础题）

meta标签由name和content两个属性来定义，来描述一个HTML网页文档的元信息，例如作者、日期和时间、网页描述、关键词、页面刷新等，除了一些http标准规定了一些name作为大家使用的共识，开发者也可以自定义name

面试官：移动端适配的viewpoint，能否手写一下？（拓展题）

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

1.5 src和href的区别

面试官：介绍一下src和href的区别（基础题）

• src是指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内，如JS脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，所以一般JS脚本会放在底部而不是头部。

• href是指向网络资源所在位置（的超链接），用来建立和当前元素或文档之间的连接，当浏览器识别到它他指向的文件时，就会并行下载资源，不会停止对当前文档的处理

1.6 img标签的srcset

面试官：介绍一下<img>标签的srcset和sizes属性的作用（基础题）

可以设计响应式图片，我们可以使用两个新的属性srcset 和 sizes来提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源

• srcset 定义了我们允许浏览器选择的图像集，以及每个图像的大小

• sizes 定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择

所以，有了这些属性，浏览器会：

• 查看设备宽度
• 检查 sizes 列表中哪个媒体条件是第一个为真
• 查看给予该媒体查询的槽大小
• 加载 srcset 列表中引用的最接近所选的槽大小的图像
• srcset提供了根据屏幕条件选取图片的能力

<img src="clock-demo-thumb-200.png"
     alt="Clock"
     srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
     sizes="(min-width: 600px) 200px, 50vw"
/>

1.7 script标签的defer和async

面试官：介绍一下<script>标签的defer和async的作用（基础题）

• defer：浏览器指示脚本在文档被解析后执行，<script>被异步加载后并不会立刻执行，而是等待文档被解析完毕后执行

• async：同样是异步加载脚本，区别是脚本加载完毕后立即执行，这导致async属性下的脚本是乱序的，对于<script>有先后依赖关系的情况，并不适用

  如下图：蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析

1.8 前端数据存储的方式

面试官：前端有哪几种数据存储方式？（基础题）

主要的存储方式有Cookie、LocalStorage、SessionStorage、IndexedDB、WebSQL，它们的优缺点如下：

• Cookie：在HTML5标准前本地储存的主要方式
  • 优点是兼容性好，请求头自带cookie方便可以和服务端进行交互
  • 缺点是大小只有4k，请求头携带cookie浪费流量，每个domain限制20个cookie，JS无法直接操作，需要自行封装

• LocalStorage：以键值对为标准的数据存储方式
  • 优点是操作方便，永久性储存（除非手动删除），大小为5M
  • 缺点是兼容IE8+

• SessionStorage：与localStorage基本类似，区别是**sessionStorage当页面关闭后会被清理
  • 优点是会话级随存随取，不占用本地空间，操作方便
  • 缺点是不能在所有同源窗口中共享，是会话级别的储存方式，兼容IE8+

• IndexedDB：是被正式纳入HTML5标准的数据库储存方案，它是NoSQL数据库，用键值对进行储存，可以进行快速读取操作
  • 优点是存储量更大，非常适合web场景，同时支持JS进行操作，非常方便
  • 缺点是兼容性IE8+

• WebSQL：类似SQLite，是真正意义上的关系型数据库，用sql进行操作
  • 优点是关系型数据库，适合大型的离线web应用
  • 缺点是JS需要通过transaction操作sql，火狐浏览器不支持

拓展：如何操作webSql

// WebSql操作实例
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;

// 建表 => 插入 => 删除
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
  tx.executeSql('DELETE FROM LOGS  WHERE id=1');
  msg = '<p>数据表已创建，且插入了两条数据，然后又删除了第一条。</p>';
  document.querySelector('#status').innerHTML =  msg;
});

1.9 WebSocket考点

面试官：介绍一下webSocket的特点和作用（基础题）

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。它允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送

本文由博客一文多发平台 OpenWrite 发布！

TML: HyperText Markup Language 超文本标记语言

HTML代码不区分大小写, 包括HTML标记、属性、属性值都不区分大小写;

任何空格或回车键在代码中都无效，插入空格或回车有专用的标记，分别是 、<br>

HTML标记中不要有空格，否则浏览器可能无法识别。

如何添加注释(comment:评论;注释)

<!-- -->
<comment></comment>
<!-- --> 不能留有空格

字符集

<meta http-equiv="Content-Type" content="text/html;charset=#"/>

<base target="_blank">

可以将a链接的默认属性设置为_blank属性

单个标签要有最好有结束符(可以没有结束符)

<br/> <img src="" width="" /> 

便于兼容XHTML(XHTML必须要有结束符)

HTML标签的属性值可以有引号,可以没有引号,为了提高代码的可读性,推荐使用引号(单引号和双引号)，尽管属性值是整数，也推荐加上引号。

<marquee behavior="slide"></marquee> 

便于兼容XHTML(XHTML必须要有引号)

<marquee behavior=slide></marquee>

经过测试,以上程序都可以正确运行

HTML标签涉及到的颜色值格式:

color_name 规定颜色值为颜色名称的文本颜色(比如 "red")。

hex_number 规定颜色值为十六进制值的文本颜色(比如 "#ff0000")。

rgb_number 规定颜色值为 rgb 代码的文本颜色(比如 "rgb(255,0,0)")。

transparent 透明色 color:transparent

rgba(红0-255,绿0-255,蓝0-255,透明度0-1)

opacity属性: 就是葫芦娃兄弟老六(技能包隐身)

css:

div{opacity:0.1} /*取值为0-1*/

英文(颜色值)不区分大小写

HTML中颜色值：采用十六进制兼容性最好(十六进制显示颜色效果最佳)

CSS中颜色值：不存在兼容性

红色 #FF0000

绿色 #00FF00

蓝色 #0000FF

黑色： #000000

灰色 #CCCCCC

白色 #FFFFFF

青色 #00FFFF

洋红 #FF00FF

黄色 #FFFF00

请问后缀 html 和 htm 有什么区别?

答: 1. 如果一个网站有 index.html和index.htm，默认情况下，优先访问.html

2. htm后缀是为了兼容以前的DOS系统8.3的命名规范

XHTML与HTML之间的关系?

XHTML是EXtensible HyperText Markup Language的英文缩写,即可扩展的超文本标记语言.

XHTML语言是一种标记语言,它不需要编译,可以直接由浏览器执行.

XHTML是用来代替HTML的, 是2000年w3c公布发行的.

XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求.

XHTML是基于XML的应用.

XHTML更简洁更严谨.

XHTML也可以说就是HTML一个升级版本.(w3c描述它为'HTML 4.01')

XHTML是大小写敏感的,XHTML与HTML是不一样的;HTML不区分大小写,标准的XHTML标签应该使用小写.

XHTML属性值必须使用引号,而HTML属性值可用引号,可不要引号

XHTML属性不能简写：如checked必须写成checked="checked"

单标记<br>, XHTML必须有结束符<br/>,而HTML可以使用<br>,也可以使用<br/>

除此之外XHTML和HTML基本相同.

网页宽度设置多少为最佳?

960px

target属性值理解

_self 在当前窗口中打开链接文件,是默认值

_blank 开启一个新的窗口打开链接文件

_parent 在父级窗口中打开文件,常用于框架页面

_top 在顶层窗口中打开文件,常用语框架页面

字符集：

charset=utf-8

Gb2312 简单中文字符集, 最常用的中文字符

Gbk 简繁体字符集, 中文字符集

Big5 繁体字符集, 台湾等等

Utf-8 世界性语言的字符集

ANSI编码格式编码格式的扩展字符集有gb2312和gbk

单位问题：

HTML属性值数值型的一般不带单位, CSS必须带单位;

强制刷新

ctrl+F5

人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。

产品设计时细节是产品经理最头疼的问题，一个button，一个链接都要考虑太多的细节问题。作者整理了常见的一些功能设计问题，一篇文章看懂这些功能设计。来学习吧。

定义

链接也称为超链接，所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。

样式

链接可以是一个字或是一段字这样的文本，也可以是一个按钮，一张图片，当你点击后跳转到另一个目标，当你把鼠标指针移到某个链接时会变成一个小手，当然在手机上没有这一特点。

1. 文本样式的链接

文本样式的链接一般在搜索引擎的网站呈现蓝色字样，大多会在下面加上下划线以便识别，不过现如今考虑到不影响文本的可读性与用户体验，逐渐取消了下划线。而在一些别的网站考虑到界面设计风格各方面的因素而不用蓝色。

谷歌的文本链接是蓝色，没有下划线

百度的文本链接也是蓝色，关键词是红色，有下划线

而京东的文本链接有灰色，有白色，有黑色

2. 按钮样式的链接

按钮样式的链接比文本样式的更容易识别，每一个按钮都是一样链接。

按钮样式链接

3. 图片样式的链接

图片样式的链接可以是单独的一张图片，也可以是文字与按钮一起组成一张图片，只是鼠标指针扫过图片的任何一个部位都会变成小手。

如桌面弹出这种游戏小窗口的图片式链接

由文字/图/按钮样式一起构成的一张图片式按钮，鼠标可以点击图中任何一部位

打开方式

链接打开的方式有三种：第一种是在当前页面刷新跳转，国外的网站大多是这样的打开式；第二种是在新标签页面打开链接，国内大多采用这种；第三种是提示用APP打开。当然现在出现了一种新的打开方式，那就是二维码扫描。

提示用美拍APP打开

类型

按照连接路径的不同，网页中超链接一般分为以下3种类型：内部链接，锚点链接和外部链接。

链接还可以分为动态链接和静态链接。动态超链接指的是可以通过改变HTML代码来实现动态变化的链接，例如我们可以实现将鼠标移动到某个文字链接上，文字就会象动画一样动起来或改变颜色的效果，也可以实现鼠标移到图片上图片就产生反色或朦胧等等的效果。而静态链接，顾名思义，就是没有动态效果的链接。

1. 内部链接

与外部链接（即反向链接）相反，内部链接是指同一网站域名下的内容页面之间互相链接。如频道、栏目、终极内容页之间的链接，乃至站内关键词之间的Tag链接都可以归类为内部链接，因此内部链接我们也可以称之为站内链接，对内部链接的优化其实就是对网站的站内链接的优化。

2. 锚点链接

HTML中的链接，正确的说法应该称作"锚点"，它命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作"精准链接"的便利工具，让链接对象接近焦点。便于浏览者查看网页内容。类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时，标记锚点是最佳的方法。

3. 外部链接

外部链接，又常被称为：“反向链接”或“导入链接”，是指通过其他网站链接到你的网站的链接。

外部链接指的是针对搜索引擎，与其它站点所做的友情链接。高质量的外部链接指：和你的网站建立链接的网站知名度高，访问量大，同时相对的外部链接较少，有助于快速提升你的网站知名度和排名的其他网站的友情链接。

如果按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，E-mail链接，锚点链接，多媒体文件链接，空链接等。

链接是一种对象，它以特殊编码的文本或图形的形式来实现链接，如果单击该链接，则相当于指示浏览器移至同一网页内的某个位置，或打开一个新的网页，或打开某一个新的WWW网站中的网页。

链接状态

链接在交互上一般会呈现4种状态，即默认状态/悬停时状态/点击时状态/点击后状态。比如谷哥网站的交互体验。如下图：

点击前

悬停时，下面浮现半透明线条

点击时，有波纹晕开的动态效果

点击后，下面线条粗

有时候是3种状态，比如百度网和知乎应用：

默认状态

点击时链接变红

点击后链接变成紫色

IOS系统知乎应用的3种状态，而在Android系统没有用力点击这一状态。

默认状态

点击状态

用力点击会弹出预览小窗口

有些时候只有2种状态，如下图谷歌网：

默认和点击后状态一样

鼠标悬停时出现下划线

默认状态

点击时

而有时候比如在APP里有时候就一直只有一种状态，也可以称静态链接，之前的可以称之为动态链接。在不同的使用场景会因为当时的情况选择最合适的交互体验设计。有的情况下还会加上点击的音效，使用户体验更畅快，这在移动端用的使用情况多一些。

总之链接是网页不可缺少的构成部分，每一个链接的呈现都是经过深思熟虑的。

作者：潘瑶琼（简书作者）

本文由 @潘瑶琼 授权发布于人人都是产品经理，未经作者许可，禁止转载。