Henry23.
Henry23.

HTML

面绘

  • 参考文献：
  • HTML
    • HTML 基础
      • xhtml和html有什么区别?
      • doctype 有什么作用？怎么写？
      • 列出常见的标签，并简单介绍这些标签用在什么场景？
      • 页面出现了乱码，是怎么回事？如何解决？
      • title 属性和 alt 属性分别有什么作用？
      • html 的注释怎样写？
      • data- 属性的作用？
      • img的 title 和 alt 有什么区别？
      • WEB 标准以及 W3C 标准是什么？
      • doctype 作用? 严格模式与混杂模式如何区分？它们有何意义?
      • HTML 全局属性（global attribute）有哪些？
    • HTML 元素、属性详解
      • meta 有哪些常见的值？
      • meta 以及viewport
      • 怎样处理 移动端 1px 被 渲染成 2px问题
      • 如何在 html 页面上展示 这几个字符？
      • SEO是什么？
      • 你是如何理解 HTML 语义化的？
      • 前端需要注意哪些 SEO?
      • 你对网页标准和 W3C 重要性的理解?
      • 关于语义化，以下说法错误的是？（不定项）
    • HTML 表单详解
      • 在 input 里，name 有什么作用？
      • abel 有什么作用？如何使用？
      • radio 如何分组？
      • placeholder 属性有什么作用？
      • type=hidden 隐藏域有什么作用？举例说明。
      • CSRF 攻击是什么？如何防范？
      • 网页验证码是干嘛的？是为了解决什么安全问题？
      • 常见 web 安全及防护原理？
      • 以下哪种写法会导致 checkbox 被勾选:
      • 关于 post 和 get 的区别，以下说法正确的是？
  • HTML5
    • html5有哪些新特性、移除了那些元素？
    • HTML5的离线储存怎么使用，工作原理能不能解释一下？
    • 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢
    • 与传统浏览器缓存区别
    • HTML5 为什么只写 !DOCTYPE HTML ？
    • Canvas和SVG有什么区别？

参考文献：

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。

怎么写：

  1. doctype 之前只能有注释和空白；

  2. doctype 拼写大小写无所谓，但推荐一致：

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

如果是标题，就用

~
；

如果是一段话，就用

；

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

；

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

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

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

如果看到一个表格，就用

；

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

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

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

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

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

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

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

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

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

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

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

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

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

知乎-oliver

html 的注释怎样写？

data- 属性的作用？

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

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

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

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

img的 title 和 alt 有什么区别？

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

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

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

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

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

严格模式的排版和 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 有哪些常见的值？

  1. 指定文档编码：
  2. 适配移动端页面：
  1. 定制页面图标：
  1. 设置 referer：
  1. 添加页面描述：

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>

SEO是什么？

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

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

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

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

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

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

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

比如，

标题可以用

~
；

边栏用