HTML相关知识

时间 2020-03-31

标签 html 相关知识栏目 HTML 繁體版

原文原文链接

DOCTYPE及做用

<!DOCTYPE> 声明不是 HTML 标签；它用来向浏览器说明页面使用哪一个HTML版本编写的。
DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途即是文件的合法性验证。html

HTML版本：

HTML5：前端

<!DOCTYPE html>

HTML 4.01 Strict （严格模式）canvas

该DTD包含全部HTML元素和属性，但不包括展现性的和弃用的元素(好比font)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional（传统/宽松模式）浏览器

该DTD包含全部HTML元素和属性，包括展现性的和弃用的元素(好比font)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5不须要引用DTD，HTML 4.01 须要引用DTD
DTD： (文档类型定义)是一系列的语法规则，用来定义XML或(X)HTML的文件类型。服务器

Canvas和SVG

Canvas

Canvas 经过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续获得浏览器的关注。若是其位置发生变化，那么整个场景也须要从新绘制，包括任何或许已被图形覆盖的对象。

SVG

SVG 是一种使用 XML 描述 2D 图形的语言。
svg绘制出来的每个图形的元素都是独立的DOM节点，可以方便的绑定事件或用来修改。
在 SVG 中，每一个被绘制的图形均被视为对象。若是 SVG 对象的属性发生变化，那么浏览器可以自动重现图形。

Canvas 与 SVG 的比较

Canvassvg

依赖分辨率
不支持事件处理器
弱的文本渲染能力
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
canvas是位图，输出标量画布，就像一张图片同样，可以以 .png 或 .jpg 格式保存结果图像放大会失真或者锯齿

SVG布局

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（好比谷歌地图）
复杂度高会减慢渲染速度（任何过分使用 DOM 的应用都不快）
svg是矢量图，输出矢量图形，后期能够修改参数来自由放大缩小，不会是真和锯齿。

SEO优化

SEO：搜索引擎优化，是一种利用搜索引擎的搜索规则来提升目前网站在有关搜索引擎内的天然排名的方式。

SEO原理：

页面抓取：爬虫向服务器请求页面，获取页面内容。
分析入库：对获取到的内容进行分析，对优质页面进行收录。
检索排序：当用户检索关键词时，从收录的页面中按照必定的规则进行排序，并返回给用户结果。

SEO 中的 TDK

title 标题标签，<title>优化

强调重点便可，重要关键词出现不要超过 2 次，并且要靠前

description 描述标签，<meta description>网站

把页面内容高度归纳

keywords 关键词标签 <meta keywords>ui

列举出重要关键词便可

前端SEO优化

网站结构布局优化

1. 控制首页连接数量
太少：影响网站收录数量
太多：影响用户体验，下降网站首页权重
2. 优化目录层次
尽可能让“爬虫”跳转3次，就能到达网站内的任何一个内页
3. 导航优化
尽可能采用文字方式
4. 分页导航
推荐写法：“首页 1 2 3 4 5 6 7 8 9 下拉框”
不推荐的，“首页下一页尾页”
5. 提升网站速度：
控制页面的大小，减小http请求。

网页代码优化

1. 合理的TDK
2. 语义化的HTML代码

标签要加 “title” 属性加以说明
正文标题用<h1>标签，副标题用<h2>标签
<img>应使用 "alt" 属性加以说明（指图片不显示时显示的文字）
、标签 : 须要强调时使用。
b为了加粗而加粗，strong为了标明重点而加粗
i为了斜体而斜体，em为了标明重点而斜体

3. 重要的HTML代码放在最前
4. 重要的内容不要用js输出
5. 少用iframe

相关概念

严格模式与混杂模式

严格模式：以浏览器支持的最高标准运行
混杂模式：页面以宽松向下兼容的方式显示，模拟老式浏览器的行为

渐进加强和优雅降级

渐进加强：一开始保证最基本的功能，再针对高版本浏览器改进和追加功能。
优雅降级：一开始就构建完整的功能，再针对低版本浏览器进行兼容。

Quirks模式和Standards模式

Quirks(怪癖/兼容）模式是一种浏览器操做模式。一个相对新的浏览器故意模拟许多在旧浏览器中存在的bug。目标是使旧页面显示出他们的做者想要的那样。没有DOCTYPE的文档用怪异模式。Quirks Mode比较宽松对某些规则不强求。

Quirks模式和Standards模式的区别

盒模型：
在W3C标准中，若是设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。
设置行内元素的高宽：
在Standards模式下，给<span>等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。
margin:0 auto：
在standards模式下使用margin:0 auto可使元素水平居中，但在quirks模式下却会失效。

HTML 与 XHTML 两者有什么区别，你以为应该使用哪个并说出理由。
应该使用XHTML，由于XHTML是XML重写了HTML的规范，比HTML更加严格，表现以下：

1.XHTML中全部的标记都必须有一个相应的结束标签；
2.XHTML全部标签的元素和属性的名字都必须使用小写；
3.全部的XML标记都必须合理嵌套；
4.有的属性都必须用引号“”括起来；
5.把全部<和&特殊符号用编码表示；
6.给全部属性附一个值；
7.不要在注释内容中使用“--”；
8.图片必须使用说明文字。