HTML

最新推荐文章于 2024-03-18 07:55:14 发布

置顶 Henry23.

最新推荐文章于 2024-03-18 07:55:14 发布

阅读量326

点赞数

分类专栏：基础相关

本文链接：https://blog.csdn.net/Ayun0420/article/details/98640125

版权

基础相关专栏收录该内容

2 篇文章 0 订阅

订阅专栏

面绘

参考文献：
HTML
HTML5

参考文献：

https://github.com/abc-club/free-resources/blob/master/INTERVIEW.md
https://juejin.im/post/5ce4171ff265da1bd04eb4f3

HTML

HTML 基础

https://mp.weixin.qq.com/s/skM02ZYlGYttlQEwozwy6g

xhtml和html有什么区别?

一个是功能上的差别

主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页

另外是书写习惯的差别

XHTML 元素必须被正确地嵌套，闭合。标签名必须用小写字母。XHTML 文档必须拥有根元素。

doctype 有什么作用？怎么写？

DOCTYPE 标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。

每个页面都要从 doctype 开始，它为浏览器指定这个页面的文档类型，以便浏览器更正确的显示 HTML。只要按照这样的格式和位置写，那么浏览器就会认为你在使用标准 HTML。

怎么写：

doctype 之前只能有注释和空白；
doctype 拼写大小写无所谓，但推荐一致：

<!doctype html>

列出常见的标签，并简单介绍这些标签用在什么场景？

如果是标题，就用 <h1> ~ <h6>；

如果是一段话，就用 <p>；

如果不知道他是什么，如果这个东西能占一行，就用<div>；

如果没有一行，就一个小小的位置，就用<span>；

如果是可点击的就用一个链接；

如果像那种并列一排排的，甚至还有一点一点，就用“列表”；

如果看到一个表格，就用<table>；

如果看到了一个输入框，就用<input>。

页面出现了乱码，是怎么回事？如何解决？

当我们保存一个写好的 HTML 文件，编码方式会保存为 UTF-8；

一个文件就是一堆的数据，即我们写的内容变成了一堆的数据。那这个数据到底是变成了 123，还是 456 呢？

这里我们就用到了“编码”，用的编码方式不一样，那么数据呈现的状态就不一样；

然后，当我们把这个以适当编码方式保存好的数据再次展示在浏览器页面上时（或用其他编辑器打开时），这个数据还要再恢复出来；

这时候，浏览器（或编辑器）需要使用相同的、与文件相对应的编码方式去解码（但浏览器不是万能的，你不告诉他，他就不知道用什么方式去解码，他会随意选择）；

这时，当编码是一种方式，而解码又是另一种方式时，页面就会出现“乱码”；而解决乱码的方式就是：只需要知道我在编辑器保存这个 HTML 文件时，保存的什么编码格式，然后在头部中告诉浏览器用什么方式来解码。

title 属性和 alt 属性分别有什么作用？

title 属性有一个很好的用途：即为链接添加描述性文字，特别是当链接本身并不是十分清楚的表达了链接的目的。

这样就使得访问者知道那些链接将会带他们到什么地方，他们就不会加载一个可能完全不感兴趣的页面。

另外一个潜在的应用就是为图像提供额外的说明信息，比如日期或者其他非本质的信息。

alt 这个属性主要是为了规避例如：因网速差、硬件设备限制等外部因素，我们的浏览器不能很好的显示出图像，那 alt 后边的文本将会取代图像告诉用户这里会是什么东西。

<a href="这里写链接地址“ title="Oli的前端一万小时">知乎-oliver</a>

<!-- 注释：这里的 title 属性，作用就是：当我们把鼠标停在 oliver 上时，会弹出一个文本框：
Oli-Zhao的前端一万小时。 -->

html 的注释怎样写？

<!--这是注释-->

data- 属性的作用？

data- 为 H5 新增的为前端开发者提供自定义的属性，这些属性集可以通过对象的 dataset 属性获取；

不支持该属性的浏览器可以通过 getAttribute 方法获取。

需要注意的是：data- 之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。所有主流浏览器都支持 data-* 属性。

即：当没有合适的属性和元素时，自定义的 data 属性是能够存储页面或 App 的私有的自定义数据

img的 title 和 alt 有什么区别？

title 通常当鼠标滑动到元素上的时候显示；
alt 是的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

WEB 标准以及 W3C 标准是什么？

标签闭合、标签小写、不乱嵌套、使用外链 css 和 js、结构行为表现的分离

doctype 作用? 严格模式与混杂模式如何区分？它们有何意义?

<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。

严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。

在混杂模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。

HTML 全局属性（global attribute）有哪些？

class：为元素设置类标识；
data-*：为元素增加自定义属性；
draggable：设置元素是否可拖拽；
id：元素 id，文档内唯一；
lang：元素内容的的语言；
style：行内 css 样式；
title：元素相关的建议信息。

HTML 元素、属性详解

https://mp.weixin.qq.com/s/nt8s8-PHJJX29–7n0ThSw

meta 有哪些常见的值？

指定文档编码：
<meta charset="UTF-8">
适配移动端页面：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

定制页面图标：

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 

<!-- 注释：href="favicon.ico" 这里边放这个图标的图形文件地址。-->

设置 referer：

<meta name="referer" content="never">

添加页面描述：

<meta name="description" content="注册即代表你同意《知乎协议》注册机构号……">

meta 以及viewport

<!DOCTYPE html>  <!--H5标准声明，使用 HTML5 doctype，不区分大小写-->
<head lang=”en”> <!--标准的 lang 属性写法-->
<meta charset=’utf-8′>    <!--声明文档使用的字符编码-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>   <!--优先使用 IE 最新版本和 Chrome-->
<meta name=”description” content=”不超过150个字符”/>       <!--页面描述-->
<meta name=”keywords” content=””/>     <!-- 页面关键词-->
<meta name=”author” content=”name, email@gmail.com”/>    <!--网页作者-->
<meta name=”robots” content=”index,follow”/>      <!--搜索引擎抓取-->
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> <!--为移动设备添加 viewport-->
<meta name=”apple-mobile-web-app-title” content=”标题”> <!--iOS 设备 begin-->
<meta name=”apple-mobile-web-app-capable” content=”yes”/>  <!--添加到主屏后的标题（iOS 6 新增）
是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏-->
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>
<!--添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）-->
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<meta name=”format-detection” content=”telphone=no, email=no”/>  <!--设置苹果工具栏颜色-->
<meta name=”renderer” content=”webkit”> <!-- 启用360浏览器的极速模式(webkit)-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>     <!--避免IE使用兼容模式-->
<meta http-equiv=”Cache-Control” content=”no-siteapp” />    <!--不让百度转码-->
<meta name=”HandheldFriendly” content=”true”>     <!--针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓-->
<meta name=”MobileOptimized” content=”320″>   <!--微软的老式浏览器-->
<meta name=”screen-orientation” content=”portrait”>   <!--uc强制竖屏-->
<meta name=”x5-orientation” content=”portrait”>    <!--QQ强制竖屏-->
<meta name=”full-screen” content=”yes”>              <!--UC强制全屏-->
<meta name=”x5-fullscreen” content=”true”>       <!--QQ强制全屏-->
<meta name=”browsermode” content=”application”>   <!--UC应用模式-->
<meta name=”x5-page-mode” content=”app”>   <!-- QQ应用模式-->
<meta name=”msapplication-tap-highlight” content=”no”>    <!--windows phone 点击无高亮
设置页面不缓存-->
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    // width    设置viewport宽度，为一个正整数，或字符串‘device-width’
    // device-width  设备宽度
    // height   设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
    // initial-scale    默认缩放比例（初始缩放比例），为一个数字，可以带小数
    // minimum-scale    允许用户最小缩放比例，为一个数字，可以带小数
    // maximum-scale    允许用户最大缩放比例，为一个数字，可以带小数
    // user-scalable    是否允许手动缩放

怎样处理移动端 1px 被渲染成 2px问题

https://segmentfault.com/a/1190000007604842

局部处理

mate标签中的 viewport属性，initial-scale 设置为 1
rem按照设计稿标准走，外加利用transfrome 的scale(0.5) 缩小一倍即可；

全局处理

mate标签中的 viewport属性，initial-scale 设置为 0.5
rem 按照设计稿标准走即可

如何在 html 页面上展示这几个字符？

<div></div>

&lt;div&gt;&lt;/div&gt;

SEO是什么？

SEO是英文Search Engine Optimization的缩写,中文译为"搜索引擎优化"

你是如何理解 HTML 语义化的？

用正确的标签做正确的事情！

html 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；

在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的；

搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO；

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

比如，

标题可以用 <h1> ~ <h6>；

边栏用<aside>；

头部用 <header>；

主体内容用<main>；

页脚用<footer>；

等等。

前端需要注意哪些 SEO?

合理的 title、description、keywords：
https://jingyan.baidu.com/article/cdddd41cacd96353ca00e14e.html

搜索对着三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超过 2 次，而且要靠前，不同页面 title 要有所不同；

description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同；

keywords 列举出重要关键词即可。

语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页。
重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取。
重要内容不要用 js 输出：爬虫不会执行 js 获取内容。
少用 iframe：搜索引擎不会抓取 iframe 中的内容
非装饰性图片必须加 alt。
提高网站速度：网站速度是搜索引擎排序的一个重要指标。

你对网页标准和 W3C 重要性的理解?

网页标准和标准制定机构都是为了能让 Web 发展的更健康，开发者遵循统一的标准，降低开发难度，开发成本，SEO 也会更好做，也不会因为滥用代码导致各种 bug、安全问题，最终提高网站易用性。

关于语义化，以下说法错误的是？（不定项）

✅ 在做页面做整体布局的时候，table 标签用起来很方便可以作为布局的一种推荐方案。
❌ 语义化的本质是可读性，让代码适合自己阅读、适合队友阅读、适合机器阅读。
✅ 对于 h1-h6、p、span 这些标签，用 div 替换也没关系，修改它的 display 属性即可。
❌ 使用语义化标签能让代码更简洁，所以能用尽量用。

HTML 表单详解

https://mp.weixin.qq.com/s/kpVydcwvYo1cEyWeuBJ–Q

在 input 里，name 有什么作用？

绝大多数表单元素都需要一个名字，相当于用户输入数据的一个标识符。后台服务器脚本将使用这个元素名，并提取里边的参数。

在 input 中，name 具有很重要的作用，在数据提交到后台后，name 属性可以明确的反映出每项信息是属于什么属性，如果没有 name 属性，数据将会非常混乱。

abel 有什么作用？如何使用？

label for 是为了给一个 input 输入框前边加上可点击的说明文字；

label 里边的 for 和 input 里边的 id 连用，是为了：正常情况下，我要在这个输入框里边输入的话，我仅仅点击前边的说明文字是没反应的，我必须要点击这个输入框才能进入可输入模式。而这里的 label for 和 id 的连用就可以实现点击输入框前边的输入文字也可以进入输入模式。（注意：有 for 就必须有一个 id）

radio 如何分组？

type=“radio” ，这个是“单选钮输入”，用于单选，在表单多项信息中选择一项。

如果要给 radio 分组，设置不同的 name 属性即可分组，同一 name 属性的属性属于同一组选项。

placeholder 属性有什么作用？

placeholder 属性是表单中用于提示的属性，不会提交给后台。这个属性用阴影文字来引导、提示用户输入框的相关信息。

type=hidden 隐藏域有什么作用？举例说明。

type=hidden 隐藏域的作用是：
暂存一些信息。比如在里边埋了一个值，下次我们要用的时候，就直接可以定位到这个元素去获取它的值，获取到后就可以用了，但用户什么都不知道；

由于可以暂存信息，那么在针对 csrf 攻击使用一些安全策略时，可以用到这个功能。

比如打开一个页面，实际这个页面是写好的模板，然后后端往里边填充数据，填充好后让你看得到。

换句话说，这个页面是后端处理后得到的页面。那假如说，后端在渲染这个页面给我们时（返回给浏览器之前），他就通过这种方式在这里加上这个值—— ，他把这个东西写好后发给你，发给你之后，你看到的页面表面上没什么特别的变化，可实际上有一个点已经埋下了—— name=“csrf” value=“123456oliver”。

接下来，用户该干什么还是继续干，填写用户名、密码等，填写完后点击“提交”。当用户点击“提交”按钮的时候，用户所填写的所有信息都会提交给后台，同时会提交里的这个值csrf=123456oliver。

提交给后台后，后台就可以做个“校验”，看看这个值对不对，如果这个值是对的，那你用户的提交是安全的。

假如说没有这样一个参数、接口，那任何人都可以伪造一个这样的页面。比如说他知道我们的请求地址（ action 的值），就可以用 method 发送一个 get/post 请求，把所有的参数都发进去，那就相当于修改了数据库。

但如果我们有这个值——csrf=123456oliver，而他没有这样一个值，或得到的值是错的，那他即使发送了这些数据，服务器也是不认可的。

只有当他发的这个值是对的，才能说明他有这个权限，表示他是一个合法的用户。这样就可以阻止 csrf 攻击。

CSRF 攻击是什么？如何防范？

CSRF（Cross-site request forgery），中文名称：跨站请求伪造。攻击者盗用了你的身份，以你的名义发送恶意请求。

CSRF 能够做的事情包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账…造成的问题包括：个人隐私泄露以及财产安全。例如通过 QQ 等聊天软件发送的链接(有些还伪装成短域名，用户无法分辨)，攻击者就能迫使 Web 应用的用户去执行攻击者预设的操作。例如，当用户登录网络银行去查看其存款余额，在他没有退出时，就点击了一个 QQ 好友发来的链接，那么该用户银行帐户中的资金就有可能被转移到攻击者指定的帐户中。

如何防范：
采用 anti-csrf-token 方案。

① 服务端在收到路由请求时，生成一个随机数，在渲染请求页面时把随机数埋入页面（一般埋入 form 表单内，）；

② 服务端设置 setCookie，把该随机数作为 cookie 或者 session 种入用户浏览器；

③ 当用户发送 GET 或者 POST 请求时带上_csrf_token参数（对于 Form 表单直接提交即可，因为会自动把当前表单内所有的 input 提交给后台，包括_csrf_token）；

④ 后台在接受到请求后解析请求的cookie获取_csrf_token的值，然后和用户请求提交的_csrf_token做个比较，如果相等表示请求是合法的。

网页验证码是干嘛的？是为了解决什么安全问题？

区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水。

有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。

常见 web 安全及防护原理？

SQL 注入原理
通过把 SQL 命令插入到 Web 表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的 SQL 命令。

总的来说有以下几点：
永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双 - 进行转换等。
永远不要使用动态拼装 SQL，可以使用参数化的 SQL 或者直接使用存储过程进行数据查询存取。
永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。
不要把机密信息明文存放，请加密或者 hash 掉密码和敏感的信息。

XSS 原理及防范：
XSS（cross-site scripting攻击）指的是攻击者往 Web 页面里插入恶意 html 标签或者 javascript 代码。比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取 cookie 中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。

XSS 防范方法：
首先代码里对用户输入的地方和变量都需要仔细检查长度和对 “<”，“>”，“;”，“’” 等字符做过滤；
其次任何内容写到页面之前都必须加以 encode，避免不小心把 html tag 弄出来。这一个层面做好，至少可以堵住超过一半的 XSS 攻击。

XSS 与 CSRF 有什么区别吗？
XSS 是获取信息，不需要提前知道其他用户页面的代码和数据包。
CSRF 是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。要完成一次 CSRF 攻击，受害者必须依次完成两个步骤：
登录受信任网站 A，并在本地生成 Cookie。
在不登出 A 的情况下，访问危险网站 B。

CSRF 的防御：
服务端的 CSRF 方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数。

通过验证码的方法。

以下哪种写法会导致 checkbox 被勾选:

✅
✅
✅
✅
❌

关于 post 和 get 的区别，以下说法正确的是？

✅ get 的语义是“要”数据，post 的语义是“给”数据或者“创建”数据。
✅ get 把参数拼装成 url，发 get 请求实际上是浏览器请求拼接后的 url。
❌ get提交的数据没有最大长度限制，post 提交的数据有最大长度限制（和服务端的设置有关）。
✅ get 提交的数据有最大长度限制，根本原因是浏览器地址栏对输入的 url 有最大长度限制，超过会截断。
✅ post 相对更“安全”一些，因为 get 请求拼装的 url 会保存在浏览器历史记录，到了服务器之后一般也有保存的请求日志可以直接看到请求参数。
✅ 从严格的安全意义上讲，只要是 http 的请求，都不安全。https + post 才安全。

HTML5

html5有哪些新特性、移除了那些元素？

绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
新的技术webworker、 websocket、 Geolocation
移除的元素：纯表现的元素：basefont、big、center、font、 s、strike、tt、u对可用性产生负面影响的元素：frame、frameset、noframes
支持HTML5新标签：IE8/IE7/IE6支持通过document.createElement方法产生的标签可以利用这一特性让这些浏览器支持HTML5新标签浏览器支持新标签后，还需要添加标签默认的样式当然也可以直接使用成熟的框架、比如html5shim

HTML5的离线储存怎么使用，工作原理能不能解释一下？

https://mp.weixin.qq.com/s/Q-Z8kYWSUJpkpAkTBv1Igw?
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件

原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示

如何使用：

页面头部像下面一样加入一个manifest的属性；
在cache.manifest文件的编写离线存储的资源
在离线状态时，操作window.applicationCache进行需求实现

CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/offline.html

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，
如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。
如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，
然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。

与传统浏览器缓存区别

离线缓存是针对整个应用，浏览器缓存是单个文件。
离线缓存断网了还是可以打开页面，浏览器缓存不行。
离线缓存可以主动通知浏览器更新资源

HTML5 为什么只写 !DOCTYPE HTML ？

HTML5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为（让浏览器按照他们应该的方式来运行）。

而 HTML4.01 基于 SGML，所以需要对 DTD 进行引用，才能告知浏览器文档所使用的文档类型。

Canvas和SVG有什么区别？

svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布
svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会失真和锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿

Henry23.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML

面绘HTMLHTML 基础doctype 有什么作用？怎么写？列出常见的标签，并简单介绍这些标签用在什么场景？页面出现了乱码，是怎么回事？如何解决？title 属性和 alt 属性分别有什么作用？html 的注释怎样写？HTML5 为什么只写？data- 属性的作用？的 title 和 alt 有什么区别？WEB 标准以及 W3C 标准是什么？doctype 作用? 严格模式与混杂模式如何区...
复制链接

扫一扫