DOCTYPE及作用

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

HTML版本:

HTML5:

<!DOCTYPE html>

HTML 4.01 Strict (严格模式)

该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 的比较

Canvas

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

SVG

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

SEO优化

SEO:搜索引擎优化,是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。

SEO原理:

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

SEO 中的 TDK

title 标题标签,<title>

强调重点即可,重要关键词出现不要超过 2 次,而且要靠前

description 描述标签,<meta description>

把页面内容高度概括

keywords 关键词标签 <meta keywords>

列举出重要关键词即可

前端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.图片必须使用说明文字。

梁柱
135 声望12 粉丝