浅析HTML

深入理解HTML与浏览器解析

关于HTML

HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。是一种预定义了属性，可被解释翻译的标签化文本（个人理解）具体的HTML的解析在浏览器章节有介绍。

** HTML、XML、XHTML 的区别**：

HTML：超文本标记语言，是语法较为松散的、不严格的Web语言；

XML：可扩展的标记语言，主要用于存储数据和结构，可扩展；

XHTML：可扩展的超文本标记语言，基于XML，作用与HTML类似，但语法更严格。

一些标签：

!DOCTYPE 标签：指示 web 浏览器关于页面使用哪个 HTML 版本/或者文档类型进行编写的指令.（影响文档的渲染模式）

浏览器渲染页面的两种模式：标准模式（Strick mode），怪异模式(混杂模式)(Quick mode)（可通过document.compatMode获取）

head：它是所有头部元素的容器，头部标签内能放置一些meta元素给浏览器解析预先准备或设定一些基础属性。可以引用脚本、指示浏览器在哪里找到样式表。

可以在head内使用的标签：, , ,

body：文档主体标签，包含的是文档的全部内容，该标签支持 html 的全局属性和事件属性。

meta标签：用来描述网页文档属性的页面元标签，属性包括类似于字符集，关键词，描述词，以及重定向，还有以下两种，可以在页面解析时被调用或者提供给浏览器解析。

content的参数一般为以下几种：

viewport参数

vwidth viewport ：宽度(数值/device-width)
height viewport ：高度(数值/device-height)
initial-scale ：初始缩放比例
maximum-scale ：最大缩放比例
minimum-scale ：最小缩放比例
user-scalable ：是否允许用户缩放(yes/no）

搜索引擎索引方式：robots

• all：文件将被检索，且页面上的链接可以被查询；
• none：文件将不被检索，且页面上的链接不可以被查询；
• index：文件将被检索；
• follow：页面上的链接可以被查询；
• noindex：文件将不被检索；
• nofollow：页面上的链接不可以被查询。

script标签：页面脚本defer和async；脚本标签的内容执行和加载会阻塞页面，如果给其添加defer或async属性，defer能确定执行顺序，async不会。async在加载完成后直接异步执行，而defer则阻塞到脚本调用队列中。

行内元素，块级元素，空元素：关于行内以及块级元素的高度计算和一些变化，在css中进行复习。

行内元素： a, b, span, img, input, select, strong;

块级元素： div, ul, li, dl, dt, dd, h1-5, p等；

空元素： <br>, <hr>, <img>, <link>, <meta>;

img标签上的alt与title属性：提供给标签非本质的额外信息

input与textarea的区别：

input是单行文本框，不会换行（添加word-break和wrap属性单词换行和语句换行）。它可以通过size属性指定显示字符的长度，如果使用css限制了宽高，size属性便失效。

textarae是多行输入文本，无限容纳，但无vakue属性。（可以使用contenteditable="true"来使得元素内可以被编辑，由此可以自由实现一个div转换成为textarea）

.textarea{
    min-height: 100px;
    border: 1px solid #a0b3d6; 
    width: 300px;
    font-size: 14px;
    max-height: 300px;
    overflow-y: auto;
  }

title与h1的区别、b与strong的区别、i与em的区别：h1默认样式 h1 strong具有语义化 i em有默认样式区别。

src与href的区别：src用于的是替换当前元素。而href用于在当前文档和引用资源之间确立联系。src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置。而href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。

关于iframe标签：我在通讯那一节介绍过iframe,它会共享当前页面的线程，同时拥有自己的域，和父级页面之间可以通讯（可跨域）

关于ifame的一些缺点：阻塞主页面的onload（onload调用在页面全部加载完毕后，共享了主页面连接池TCP，无法被收索引擎捕获）

img中的srcset属性的作用是用于设置不同屏幕密度下，img 会自动加载不同的图片：

<img src="small.jpg " srcset="big.jpg 1440w, middle.jpg 800w, small.jpg 1x" />

body {
    background-image: -webkit-image-set( url(../images/pic-1.jpg) 1x, url(../images/pic-2.jpg) 2x, url(../images/pic-3.jpg) 600dpi);
    background-image:         image-set( url(../images/pic-1.jpg) 1x, url(../images/pic-2.jpg) 2x, url(../images/pic-3.jpg) 600dpi);
}

伪类与伪元素:

本来是想放在css当中的，但是因为面经也是将其放在了html中，所以我在这里介绍伪类及伪元素。

css引入伪类以及伪元素的概念是为了格式化文档树意外的其他信息。

伪类：根据页面或者鼠标事件使得页面元素改变状态时，存在的隐藏类样式调节，这个状态完全取决于用户行为，类似于hover。

伪元素：指的是一些不在DOM树中的元素，但可以为其更改样式。

需要的时候再查看吧，比如一些状态量（child这些也算，毕竟文档树是数据结构存在于内存中）

需要引入src的一些页面元素

audio实现自己的预加载preload属性

preload	preload	预加载（在页面被加载时进行加载或者说缓冲音频），如果使用了autoplay的话那么该属性失效。

HTML中几种图片格式的区别以及使用：

页面中常用的几种图片格式有: png, jpg(jpeg),gif, bmp等；

1）Png格式的特征

特征： 图片背景透明，可以支持的颜色有很多。

使用范围: 比较广，在目前使用频率最高。

（2）jpg格式特征

特征： 图片不支持透明，静态图，支持的颜色也比较多，可压缩。

使用范围： 使用范围较广，可使用作为电脑做面壁纸，手机屏保等，可根据需求来确实使用图片的分辨率，

（3）gif格式特征

特征： 动态图，支持的颜色较少。

使用范围： 在目前看到的在网站内使用频率较低。
————————————————
版权声明：本文为优快云博主「归子莫」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/qq_45163122/article/details/108750774

Canvas和SVG的区别：

（1）SVG： SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

其特点如下：

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用
（2）Canvas： Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。

其特点如下：

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
————————————————
版权声明：本文为优快云博主「归子莫」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/qq_45163122/article/details/108750774

H5的新特性：

新增选择器 document.querySelector document.querySelectorAll,为何要新增这两个调用方法，传统的通过class，id，标签名的获取文档对象属性的方法效率比较底下。而此方法支持css的样式写法,类似于Jquery的组合查询，查找结果精准

拖拽释放(Drag and drop) API：DragAPI只能拖拽出类似透明度的效果，同时你要调用此API需要为其绑定相应的3个事件，很简单。设置其属性为 draggable="true"即可

媒体播放的 video 和 audio：他们有自己的生命周期和调度事件触发，以及一些标签特有属性。它们提供了一些列譬如加载截断，播放阶段，错误，播放列表的事件触发器（(9条消息) video/audio 音频/视频 标签详解_蒲公英芽的博客-优快云博客_video和audio标签的作用）甚至还有网络特性等，需自己查api调度。注意关于一些媒体的样式，可以考虑不采用原生播放器的方法，而是通过函数调度重构播放器，保留元素触发事件。

本地存储 localStorage 和 sessionStorage：关于session和local的区别可以看关于知识的具体，这里只是一个提供浏览器内存存储调用的api增加，它们在window对象上等待被调用，同时封装了一些调用的方法。

离线应用 manifest：使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本，启动离线缓存需要在html标签种添加manifest属性。manifest文件指向的是manifest文件（手动编写），它有三个头：

• CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
• NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
• FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

缓存原理：网页页面指引main文件 main文件标识缓存资源 缓存资源走缓存策略（浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB））（很老了这个功能）

桌面通知 Notifications（调用浏览器接口，很多不支持）

语意化标签 article、footer、header、nav、section：让元素更加语义化，可以方便搜索引擎进行算法（SEO助力爬虫），同时可以帮助文档更具有语义性。

增强表单控件 calendar、date、time、email、url、search：类似email这些的组件都自己封装了一些或是正则匹配，或是校验规则，同时日历还自我实现了一些机器时间获取，以及日历组件和事件监听，可以手动封装制作一个。

地理位置 Geolocation：调用自身方法 获取位置参数

多任务webworker：创建Webworker对象，在主线程之外独立执行脚本，相应的有自己的事件监听，和postMessage等函数，通过post传入的事件对象，提取相关参数，渲染页面。(线程交互)

全双工通信协议 websocket：在HTTP协议基础上建立的一次握手的双工通信协议，具体看我写的网络传输那章，它也拥有一整套的生命周期和监听器，在生成后形成持续连接，直到对象销毁。占用了一条TCP请求。

历史管理 history，可以通过push pop操控浏览器的历史记录栈，可以更新浏览器回退状态栏，以及更新当前url

跨域资源共享(CORS) Access-Control-Allow-Origin：(9条消息) Access-Control-Allow- 设置 跨域资源共享 CORS 详解_Normal Developer的博客-优快云博客_access-control-allow-methods跨域的头部添加行为。

简单行为和非简单行为 一些浏览器的cors头添加会使得服务器进行校验后提供预检约束，设置aca-Methods头或者一些其他头信息。

页面可见性改变事件 visibilitychange：可见性改变，在document文档上绑定了类似于焦点的标签页切换监听以及状态属性，注意在页面预渲染时，有自己独立的新属性，此时不属于hidden或display的任何一种。

跨窗口通信 PostMessage：同端口（及之前）页面脚本之间的通讯，通过window的监听器和自身的post api指定传输脚本的origin从而达到消息传递的效果。

Form Data 对象：用来表单提交之类的。

绘画 canvas：（需要特别介绍）具体看我的canvas画布那章

HTML优化：

尽量减少请求的文件数量，防止多个文件请求Http连接的浪费，占用连接池等：

减少HTTP请求的方案主要有合并JavaScript和CSS文件、CSS Sprites、图像映射 （Image Map）和使用Data URI来编码图片

文件压缩：通过Acceppt-Encoding头来标识对压缩的支持。客户端HTTP请求头声明浏览器支持的压缩方式，服务端配置启用压缩，压缩的文件类型，压缩方式。当客户端请求到达服务器，服务器响应时对请求资源进行压缩，返回给客户端浏览器，浏览器按照相应的方式进行解析。

CDN方式：边缘化网络搭配负载的服务器处理用户信息与目标信息的最小路径权。最后返回不同的资源ip

使用缓存：缓存策略与缓存选择看我浏览器那一章

SEO优化：（反向链接，网站外链接优化）（匹配搜索引擎 Search Engine Optimization, 搜索引擎优化。）

关于链接：网站链接的基本类型有内部链接和外部链接这两种。根据链接的不同方向，可以分为导出链接和导入链接。

导出链接也就是来自其他源页面的链接指向。（通过检查网站的反向链接来衡量网站的整体质量）

1、控制数量

虽然反向链接是越多越好，但我们还是不能在短时间内添加太多反向链接。反向链接的快速增长很可能使网站进入沙盒效应，并可能受到搜索引擎的惩罚。搜索引擎喜欢自然且不断增长的反向链接。

2、合理布局

这里指的是网页中反向链接放置的位置。反向链接最好放在页眉。一般来说，这部分网页的权重和PR值越高，以后的权重就越低。

3、提高质量

所谓反向链接质量，是指这个链接的内容与网站内容的相关程度，以及链接所在网页的排名。通常，反向链接质量比数量对网站排名影响会更大。

一般来说，反向链接与网站的相关性越高，网站的质量越好，更容易被搜索引擎看重。一个高质量的反向链接甚至可以承受几百个一般的反向链接，但是高质量的反向链接并不是那么容易就能获得的，所以网站管理员必须努力。

总之，在反向链路优化过程中，不仅要追求数量，还要考虑质量、位置等因素。但是，不要想着用非法手段获取反向链接，这样会给网站带来严重的惩罚。

关于meta标签的seo优化：

meta标签的内容设计对搜索引擎优化（seo）来说是很重要的一个元素，合理运用Description和Keywords属性，可以优化网站

可以从meta的关键词中，也可以在页面源中的图片内alt属性中获取关键词来被搜索引擎捕获：

META标签优化SEO - 腾讯云开发者社区-腾讯云 (tencent.com)

关于HTML的一些面试题

什么是前端的结构，样式和行为相分离？以及分离的好处是什么？

代码分离，利于团队的开发和后期的维护；
减少维护成本，提高可读性和更好的兼容性

关于渐进增强和优雅降级：

渐进增强（progressive enhancement）：主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果，交互等方面的改进和追加功能，以达到更好的用户体验。

优雅降级 graceful degradation： 一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。

区别：

优雅降级是从复杂的现状开始的，并试图减少用户体验的供给；而渐进增强是从一个非常基础的，能够起作用的版本开始的，并在此基础上不断扩充，以适应未来环境的需要；
降级（功能衰竭）意味着往回看，而渐进增强则意味着往前看，同时保证其根基处于安全地带。

写HTML代码时，应该注意什么？

尽可能少的使用无语义的标签div和span；

在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；

不要使用纯样式标签，如：b、font、u等，改用css设置。

需要强调的文本，可以包含在strong或em标签中，strong默认样式是加粗（不要用b），em是斜体（不要用i）；

使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；

表单域要用fieldset标签包起来，并用legend标签说明表单的用途；

每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

补充一点：不仅写html结构时，要用语义化标签，给元素写css类名时，也要遵循语义化原则，不要，随便起个名字就用，那样等以后，再重构时，非常难读。最忌讳的是不会英文，用汉语拼音代替。可以使用翻译软件，毕竟随时备着。

关于语义化标签的简单介绍（新增）

header：页眉，可在区块内多使用，注意默认样式兼容。

footer：页脚，类似header

hgroup元素代表“网页”或“section”的标题

nav元素代表页面的导航链接区域

aside元素被包含在article元素中作为主要内容的附属信息部分

为什么利用多个域名来存储网站资源会更有效？

(4条消息) 为什么利用多个域名来存储网站资源会更有效？_阿珊和她的猫的博客-优快云博客_为什么从多个域名去加载页面资源会更有效

1.CDN缓存会更加方便：CDN的缓存策略。

2.突破浏览器并发限制：

对于资源的并发请求，浏览器为此做出了限制，具体看浏览器章节。

domain hash：对资源做哈希，请求到不同的域下面。//用多的DNS服务换取时间
cookie free：前后端分离，减少不必要的cookie提交。
css sprite：将零星的图片整合到一张大图中，减少请求次数。
js/css combine：资源合并，减少请求次数，不过也会增加文件修改的几率。
max expires time：合理设置客户端缓存时间。
loading images on demand：图片按需加载。

3.节约cookie的带宽：在跨域资源访问不会携带默认所传的cookie

4.节约主域名的连接数，优化服务域名的响应；

5.防止不必要的安全问题。