这可能是最全的HTML(5)知识体系总结

最新推荐文章于 2022-03-23 08:57:11 发布

ruanhongbiao

最新推荐文章于 2022-03-23 08:57:11 发布

阅读量1.4k

点赞数

分类专栏： HTML5 文章标签： html

本文链接：https://blog.csdn.net/qappleh/article/details/107207925

版权

HTML5 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.文档声明（Doctype）和<!Doctype html>有何作用? 严格模式与混杂模式如何区分？它们有何意义?

文档声明的作用
文档声明是为了告诉浏览器，我们写的HTML文档当前使用什么版本的HTML来写的，这样浏览器才能按照我们声明的版本来正确的解析。

<!Doctype html>的作用
<!doctype html> 的作用就是让浏览器进入标准模式，使用最新的 HTML5标准来解析渲染页面；如果不写，浏览器就会进入混杂模式，我们需要避免此类情况发生。

严格模式与混杂模式的区分

严格模式：又称为标准模式，指浏览器按照W3C标准解析代码；
混杂模式：又称怪异模式、兼容模式，是指浏览器用自己的方式解析代码.混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作；

区分：
网页中的DTD，直接影响到使用的是严格模式还是浏览模式，可以说DTD的使用与这两种方式的区别息息相关。

如果文档包含严格的DOCTYPE ，那么它一般以严格模式呈现（严格 DTD ——严格模式）；
包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）；
DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现（DTD不存在或者格式不正确——混杂模式）；
HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容(HTML5 没有严格和混杂之分)。

总的来说，严格模式让各个浏览器统一执行一套规范.兼容模式保证了旧网站的正常运行。

2.HTML、XHTML和HTML5区别以及有什么联系

XHTML与HTML的区别

XHTML标签名必须小写；
XHTML元素必须被关闭；
XHTML元素必须被正确的嵌套；
XHTML元素必须要有根元素。

XHTML与HTML5的区别

HTML5新增了canvas绘画元素；
HTML5新增了用于绘媒介回放的video和audio元素；
更具语义化的标签，便于浏览器识别；
对本地离线存储有更好的支持；
MATHML，SVG等，可以更好的render；
添加了新的表单控件：calendar、date、time、email等。

HTML、XHTML、HTML5之间联系

XHTML是HTML规范版本；
HTML5是HTML、XHTML以及HTML DOM的新标准。

3. HTML、XML、XHTML 的区别

HTML：超文本标记语言，是语法较为松散的、不严格的Web语言；
XML：可扩展的标记语言，主要用于存储数据和结构，可扩展；
XHTML：可扩展的超文本标记语言，基于XML，作用与HTML类似，但语法更严格。

4. 什么是HTML5以及和HTML的区别是什么

概念
HTML5是HTML的新标准，其主要目标是无需任何额外的插件如Flash、Silverlight等，就可以传输所有内容。它囊括了动画、视频、丰富的图形用户界面等。
HTML5是由万维网联盟（W3C）和Web Hypertext Application Technology Working Group 合作创建的HTML新版本。
区别
从文档声明类型上看：

HTML是很长的一段代码，很难记住。如下代码：

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

HTML5却只有简简单单的声明，方便记忆。如下：

<!DOCTYPE html>

从语义结构上看：

HTML4.0：没有体现结构语义化的标签，通常都是这样来命名的<div id="header"></div>，这样表示网站的头部。
HTML5：在语义上却有很大的优势。提供了一些新的标签，比如：<header><article><footer>。

拓展：不输入<!DOCTYPE HTML>，浏览器将无法识别html文件，因此html将无法正常工作。

5.HTML5为什么只需要写DOCTYPE

这是因为HTML5不基于SGML，因此不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为（让浏览器按照他们应该的方式来运行）而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

6.页面导入样式时，使用link和@import有什么区别

link属于HTML标签，而@import是css提供的；
页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载；
@import只在IE5以上才能识别，而link是XHTML标签，无兼容问题；
link方式的样式的权重高于@import的权重。

7.行内元素有哪些？块级元素有哪些？空(void)元素有那些？

行内元素： a, b, span, img, input, select, strong;
块级元素： div, ul, li, dl, dt, dd, h1-5, p等；
空元素： <br>, <hr>, <img>, <link>, <meta>;

8.标签上title属性与alt属性的区别是什么

alt是为了在图片未能正常显示时（屏幕阅读器）给予文字说明。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。
title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。

9.如何理解语义化标签

概念
语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。

语义化的好处

用正确的标签做正确的事情；
去掉或者丢失样式的时候能够让页面呈现出清晰的结构；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

10.src与href有什么区别

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

11.iframe有哪些优缺点

优点

iframe可以实现无刷新文件上传；
iframe可以跨域通信；
解决了加载缓慢的第三方内容如图标和广告等的加载问题。

缺点

iframe会阻塞主页面的Onload事件;
无法被一些搜索引擎索引到;
页面会增加服务器的http请求;
会产生很多页面，不容易管理。

12.HTML和DOM有何关系？

HTML是死的，只是一个字符串；而DOM是由html解析而来，是活的，我们可以通过Javascript维护DOM。

13.property和attribute的区别是什么

property是DOM中的属性，是JavaScript里的对象;
attribute是HTML标签上的特性，它的值只能够是字符串;

简单的理解就是：Attribute就是DOM节点自带的属性，例如html中常用的id、class、title、align等；而Property是这个DOM元素作为对象，其附加的内容，例如childNodes、firstChild等。

14.几种Doctype文档类型

标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

HTML 4.01 规定了三种文档类型：分别是Strict、Transitional 以及 Frameset；
XHTML 1.0 规定了三种 XML 文档类型：分别是Strict、Transitional 以及 Frameset；
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页；
Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

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

新特性
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

拖拽释放(Drag and drop) API；
语义化更好的内容标签（header, nav, footer, aside, article, section）;
音频、视频API(audio, video);
画布(Canvas) API;
地理(Geolocation) API;
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除;
表单控件:calendar、date、time、email、url、search ;
新的技术webworker, websocket, Geolocation等；

移除元素
纯表现元素：

<basefont> 默认字体，不设置字体，以此渲染；
<font> 字体标签；
<center> 水平居中；
<u> 下划线；
<big>字体；
<strike>中横字；
<tt>文本等宽；

对可用性产生负面影响的元素：
<frameset>,<noframes>和<frame>；

16.Quirks模式是什么？它和Standards模式有什么区别？

Quirks模式
Quirks模式，又称怪癖模式、诡异模式、怪异模式。
Quirks和Standards模式的区别
当我们在写程序时，遇到新旧功能不兼容的时候，如何做才能保证原来的接口不变，又可以提供强大的功能？
一般情况下可以通过增加参数和分支来解决。也就是当某个参数为true时，使用新功能，为false时使用旧功能，这样就能不破坏原有的程序，又能提供新功能。
IE6也是类似这样做的，它将DTD当成了这个“参数”，因为以前的页面大家都不会去写DTD，第一IE6就假定，如果写了DTD就意味这个页面将采用对CSS支持更好的布局，而如果没有就采用兼容之前的布局方式，这就是Quirks模式（怪癖，诡异，怪异模式）。
其与Standards的区别总体会有布局、样式解析、和脚本执行三个方面的区别：

盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border；
设置行内元素的高宽：在Standards模式下，给等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效；
设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用；
设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。

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

结构，样式和行为分离

小编的理解是：若是将前端比作一个人来举例子，结构（HTML）就相当于是人体的“骨架”，样式就相当于人体的“装饰”，例如衣服，首饰等；行为就相当于人做出的一系列“动作”。
在结构，样式和行为分离，就是将三者分离开，各自负责各自的内容，各部分可以通过引用进行使用。
在分离的基础上，我们需要做到代码的：精简，重用，有序。
分离的好处

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

18.对HTML5有什么了解？

良好的移动性，以移动设备为主；
响应式设计，以适应自动变化的屏幕尺寸；
支持离线缓存技术，webStorage本地缓存；
新增了canvas，video，audio等新标签元素；以及特殊内容元素：article，footer，header，nav，section等；以及表单控件：calendar，date，time，email，url，search等；
新增webSocket/webWork技术；
还有新增的地理位置等。

19.如何对网站的文件和资源进行优化

文件合并（目的是减少http请求）；
文件压缩（目的是直接减少文件下载的体积）；
使用缓存；
使用cdn托管资源；
gizp压缩需要的js和css文件；
反向链接，网站外链接优化；
meta标签优化（title, description, keywords）,heading标签的优化,alt优化；

20.Html5中datalist是什么

<datalist>标签，用来定义选项列表，与input元素配合使用钙元素，来定义input可能的值。

datalist及其选项不会被显示出来，他仅仅是合法的输入列表值。

21.Html5中本地存储概念是什么，有什么优点，与cookie有什么区别？

HTML5的Web storage的存储方式有两种：sessionStorage和localStorage。

sessionStorage用于本地存储一个会话中的数据，当会话结束后就会销毁；
和sessionStorage不同，localStorage用于持久化的本地存储，除非用户主动删除数据，否则数据永远不会过期；
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。

区别：

从浏览器和服务器间的传递看： cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
从大小看：存储大小限制不同，cookie数据不能超过4k，只适合保存很小的数据；而sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
从数据有效期看： sessionStorage在会话关闭会立刻关闭，因此持续性不久；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。而localStorage始终有效。
从作用域看： sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；而localStorage和cookie都是可以在所有的同源窗口中共享的。

22.常见的浏览器内核有哪些

Trident内核：IE最先开发或使用的， 360浏览器；
Webkit内核：Google Chrome，Safari，搜狗浏览器，360极速浏览器，阿里云浏览器等；
Gecko内核： Mozilla FireFox (火狐浏览器) ，K-Meleon浏览器；
Presto内核：Opera浏览器；

23.Canvas是什么？怎样写Canvas？

概念
Canvas是HTML5的一个元素，它使用JavaScript在网页上绘制图形。Canvas是一个矩形区域。它的每一个像素都可以由HTML5语言来控制。使用Canvas绘制路径、框、圆、字符和添加图像有几种方法。
使用方式
如果要在我们的HTML文档中添加Canvas标签，我们需要ID、宽度和高度。下面是如何将基本Canvas标签写入HTML文档的示例。
<canvas id="myCanvas" width="100" height="100"> </canvas>

24.Html5应用程序缓存和HTML浏览器缓存有什么区别

新的HTML5规范的应用缓存最关键的就是支持离线应用，允许浏览器在链接客户端时预取一些或全部网站资产，如HTML文件，图像，CSS以及JS等，预取文件加速了站点的性能。换句话说，应用程序缓存可以预取完全未被访问的页面，从而在常规的浏览器缓存中不可用。与传统的浏览器缓存比较，该特性并不强制要求用户访问网站。

25.最新的HTML5标准中的新增了哪些API？

Canvas ：Canvas由HTML代码中定义的具有高度和宽度属性的可绘制区域组成。JavaScript代码可以通过一组完整的绘图函数访问该区域，这与其他常见的2D API类似，因此允许动态生成图形。Canvas 的一些预期用途包括构建图形、动画、游戏和图像合成。
媒体定时回放；
离线存储数据库；
文档编辑；
拖放；
跨文档消息传递；
浏览器历史管理；
MIME类型和协议处理程序注册；
Notification API（桌面通知API）

26.有关HTML5中新的输入类型属性

类型	作用
search	用于搜索域，域显示为常规的文本域
email	用于应该包含email地址的输入域，在提交表单时，自动验证email域的值
url	用于应该包含url地址的输入域在提交表单时，会自动验证url的域值
number	用于应该包含数值的输入域，可自定义数字限定
range	用于应该包含一定范围内数字值的输入域，类型显示为滑动条
dateTime	用于选取时间，日，月，年（为UTC时间）
date	用于选取日，月，年
month	用于选取月，年
week	用于选取周和年
time	用于选取时间（分钟和小时）
dateTime-local	用于选取时间，日，月，年（当地时间）

27.对于web标准以及w3c有何理解与认识

于WEB而言：

web标准简单来说可以分为结构、表现和行为。web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰；

于W3C而言：

W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范，如下：
结构上的要求：

标签必须闭合、标签小写、不乱嵌套，可以提高搜索机器人对网页内容的搜索几率；

对于css和js来说：

建议使用外链css和js脚本，从而达到结构与行为、结构与表现的分离，提高页面的渲染速度，能更快地显示页面的内容；
样式与标签的分离，更合理的语义化标签，使内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，从而降低维护成本、改版更方便；
不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性；

总之，遵循w3c制定的web标准，能够使用户浏览者更方便的阅读，使网页开发者之间更好的交流。

28.渐进增强和优雅降级之间的区别

渐进增强（progressive enhancement）：主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果，交互等方面的改进和追加功能，以达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。
区别

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

29.浏览器如何对HTML5的离线储存资源进行管理和加载

有线情况下：

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

在离线情况下：浏览器直接使用离线缓存的资源；

30.页面可见性（Page Visibility）API 可以有哪些用途

在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放。

31.<link> 标签定义文档与外部资源之间的关系

标签大多数时候都用来连接样式表。
link 元素是空元素，它仅包含属性。
该元素只能位于head 部分，但可以出现任何次数。

32.<map> 标签用于定义客户端图像映射

图像映射指的是带有可点击区域的图像。
name 属性在 map 元素中是必需的。该属性与 <img> 标签的 usemap 属性相关联，以创建图像与映射之间的关系。
map 元素包含若干 area 元素，定义图像映射中的可点击区域。
在 HTML5 中，如果同时规定了 <map> 标签的 id 属性，则必须为 name 属性规定相同的值。
area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

33.<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

标签位于文档的头部，不包含任何内容。
标签的属性定义了与文档相关联的名称/值对。
name属性的值：

author
description
keywords
generator
revised
others

34.<nav> 标签定义导航链接的部分

如果文档中有“前后”按钮，则应该把它放到 <nav> 元素中。

35.<noscript> 元素用来定义在脚本未被执行时的替代内容（文本）

此标签用于可识别 <script> 标签但无法支持其中脚本的浏览器。
如果浏览器支持脚本，那么它不会显示出 noscript 元素中的文本。
无法识别 <script> 标签的浏览器会把标签的内容显示到页面上。为了避免浏览器这样做，您应当在注释标签中隐藏脚本。老式的（无法识别 <script> 标签的）浏览器会忽略注释，这样就不会把标签的内容写到页面上，而新式的浏览器则懂得执行这些脚本，即使它们被包围在注释标签中！

36.<script> 标签用于定义客户端脚本，比如 JavaScript

script 元素既可包含脚本语句，也可以通过 "src" 属性指向外部脚本文件。
JavaScript 通常用于图像操作、表单验证以及动态内容更改。
如果使用 "src" 属性，则 <script> 元素必须是空的。
如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行，即html和javascript 代码同时进行）
如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行（先解析html代码，在执行Javascript 代码）
如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本(阻塞html 代码的解析，页面加载缓慢，甚至导致页面空白)

37.<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

38.<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源

39.<style> 标签定义 HTML 文档的样式信息

scoped 属性是 HTML 5 中的新属性，它允许我们为文档的指定部分定义样式，而不是整个文档。
如果使用 "scoped" 属性，那么所规定的样式只能应用到 style 元素的父元素及其子元素。
如需链接外部样式表，请使用 <link> 标签。
如果未定义 scoped 属性，那么 <style> 元素必须位于 <head> 部分中

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

产生乱码的原因

网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码。反之也会出现乱码；
html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码；
浏览器不能自动检测网页编码，造成网页乱码。

解决办法

使用软件进行编辑HTML网页内容；
如果网页设置编码是gbk，而数据库储存数据编码格式是UTF-8，此时需要程序查询数据库数据显示数据前进程序转码；
如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单进行转换；

41.data- 属性的作用？

data-* 属性用于存储页面或应用程序的私有自定义数据。

data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

data-* 属性包括两部分：

属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
属性值可以是任意字符串

42.HTML 全局属性（Global Attribute）有哪些？

参考资料（全局属性兼容性特别不好，几乎各个浏览器很少支持）：

MDN: html global attribute或者W3C HTML global-attributes

accesskey:设置快捷键，提供快速访问元素如aaa在windows下的firefox中按alt + shift + a可激活元素

class:为元素设置类标识，多个类名用空格分开，CSS和javascript可通过class属性获取元素

contenteditable: 指定元素内容是否可编辑

contextmenu: 自定义鼠标右键弹出菜单内容

data-*: 为元素增加自定义属性

dir: 设置元素文本方向

draggable: 设置元素是否可拖拽

dropzone: 设置元素拖放类型： copy, move, link

hidden: 表示一个元素是否与文档。样式上会导致元素不显示，但是不能用这个属性实现样式效果

id: 元素id，文档内唯一

lang: 元素内容的语言

spellcheck: 是否启动拼写和语法检查

style: 行内css样式

tabindex: 设置元素可以获得焦点，通过tab可以导航

title: 元素相关的建议信息

translate: 元素和子孙节点内容是否需要本地化

43.meta viewport 是做什么用的，怎么写？

meta viewport
meta viewport是专为移动设备下显示所设计的.只有检测到在移动设备上使用包含meta的文档时, meta标签才会起作用.
在meta标签中, 当name为viewpor时, 有下面的约定

Value	可能值	描述
width	一个正整数或者字符串 device-width	以pixels（像素）为单位，定义viewport（视口）的宽度
height	一个正整数或者字符串 device-height	以pixels（像素）为单位，定义viewport（视口）的高度
initial-scale	一个0.0 到10.0之间的正数	定义设备宽度（纵向模式下的设备宽度或横向模式下的设备高度）与视口大小之间的缩放比率
maximum-scale	一个0.0 到10.0之间的正数	义缩放的最大值；它必须大于或等于minimum-scale的值，不然会导致不确定的行为发生
minimum-scale	一个0.0 到10.0之间的正数	定义缩放的最小值；它必须小于或等于maximum-scale的值，不然会导致不确定的行为发生
user-scalable	一个布尔值（yes 或者no）	如果设置为 no，用户将不能放大或缩小网页。默认值为 yes

44.前端需要注意哪些 SEO?

语义化：提高网站在搜索引擎的排名、利于爬虫、代码可读性强易维护、利于盲人阅读器
优化局部SEO：预渲染

合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
语义化的HTML标签，符合W3C规范：语义化代码让搜索引擎容易理解网页
重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
重要内容不要用js输出：爬虫不会执行js获取内容
少用iframe：搜索引擎不会抓取iframe中的内容
非装饰性图片必须加 alt
提高网站速度：网站速度是搜索引擎排序的一个重要指标