3. html
HTML文档通常以文档声明开始，该声明的确定其尝试解析和显示的HTML文档类型。
<!DOCTYPE html>文档声明必须是HTML文档的第一行、且顶格显示，对大小写不敏感。因为任何放在DOCTYPE前面的东西，比如批注或XML声明，会令IE9或更早期的浏览器触发怪异模式
文档声明井非一个HTML标签。它是一条"信息”，告知浏览器期望的文档类型，以哪一种文档类型方式来解析当前的文件
html的发展历史
| 版本 | 年份 |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1996 |
| HTML 4.0 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2014 |
在html5之前的版本，文档声明都特别长，和xml文件的头部一样，如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">这是因为HTML5不需要引入DTD文件，而其他类型的文档声明是需要引DTD
在早期的HTML版本，例如HTML4.01中，</DOCTYPE>声明之所以要引用DTD，是因为HTML4.01基于SGML。 而DTD规定的是标记语言的规则，这样浏览器才能正确地星现内容。 但是最新的HTML5不基于SGML，所以不需要引用DTD
ML（Markup Language）置标语言
是用标准的标记来来解释纯文本文档的内容，从而提供关于文档结构或文档该如何渲染的信息。 标记语言的发展  GML是第一代置标语言，使文档能明确将标示和内容分开，所有文件使用同样的标示方法
SGML在GML的基础上进行整理，形成了一套非常严谨的文件描述方法。它的组成包括语法定义，QTD，文件实例三部分。SGML因太严谨规范达500多页，故而不易学、不易用、难以实现，所以在它的基础上文发展出了其他的更易用的置标语富。
HTML抛弃了SGML复杂庞大的缺点，继承了SGML的很多优点。HTML最大的特点是简单性和跨平台性。它只使用了SGML中很少的一部分标记，例如HTML4.0中只定义了70余种标记。为了便于在计算机上实现，HTML规定的标记是固定的，即HTML语法是不可扩展的。
随着Web应用的不断发展，HTML的局限性也越来越明显地显现了出来，如HTML无法描述数据、可读性差、搜索时间长等。人们又把目光转向SGML，再次改造SGML使之适应现在的网络需求。1998年2月10日，W3C（WoridWide Web Covnsortium，万维网联盟）公布XML1.0标准，XML诞生了。很长一段时间，XML都作为网络传输的标准数据格式。
XHTML的出现是因为当时的HTML语法要求比较松敢，这样对网页编写者来说，比较方便，但对于机器来说，语言的语法越松散，处理起来就越困难，对于传统的计算机来说，还有能力兼容松散语法，但对于许多其他设备，比如手机，难度就比较大。因此产生了由DTD定义规则，语法要求更加严格的XHTML
最终，HTML5是HTML的第五个修订版，该版本不在基于SGML了，所以也就不用再引I入DTD声明了。 HTML5的出现，其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。
渲染模式
浏览器染模式分为3种：
- 怪异模式（混杂模式）Quirks mode
- 严格模式（标准模式）Standars mode
- 几乎标准模式 Aimost standards mode
之所以出现不同的染模式，是由于历史原因造成的： 当年Netscope4（网景公司早期的浏览器）和IE4（微软公司早期的浏览器）实现CSS机制时，没有遵循w3c提出的标准。Nerscope4提供了糟糕的支持，而ie4虽然接近标准，但依旧未能完全正确的支持标准。 所以，在W3C标准推出以前，浏览器在对页面的溫染上没有统一规范，产生了差异（Quirks mode或者称为Compatibility Mode) 为了保障自己的网站在各个浏览器上显示正确，网页开发者们不得不依据各个浏览器自身的规范来便用CSS因此大部分网站的CSS实现并不符合W3C规范的标准。 W3C标准推出后，测览器渲染页面有了统一的标准（Stricrt mode也有叫做Standar smode）浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。 为保持浏览器渲染的兼容性，使以前的页面能够正常测览，浏宽器都保留了旧的渲染方法（如：微软的ie）这样浏宽器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。混杂模式服务于旧式规则，而严格模式服务于标准规则。
语义化
语义是指对一个词或者句子含义的正确解释。很多HTML也就是说元素本身传达了关于标签所包含内容类型的签时，它将该标签解释为包含这一块内容的最重要的标题。h1标签的语义就是用它来标识特定网页或部分最重要的标题
为什么要语义化
- 使页面没有css的情况下，也能够量现出很好的内容结构
- 有利于SEO爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多
- 提升用户体验：例如title、alt可以用于解释名称或者解释图片信息，以及lobe/标签的灵活运用
- 便于团队开发和维护：语义化使得代码更具有可读性，让其他开发人员更加理解你的hrm/结构，减少差异化
- 方便其他设备解析：如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。
无障碍网页
W3C在1997年发起了一项WA/（WebAccessibityInitiotive）的计划，该计划的目标是提升网站的易用性（accessibity），而其中有一个很重要的指标，那就是能够被残障人士使用的网站才能称得上一个易用的（易访问的）网站。 HTML5在无障碍方面进行了加强，加入了无障碍属性。 而HTML5无障碍属性就是可以让屏幕阅读器准确识别网页中的内容，变化，状态的技术规范，可以让盲人这类用户也能无障碍阅读
常见的无障碍属性
WAI-ARIA是W3C编写的规范，定义了一组可用于其他元素的HTML特性，用于提供额外的语义化以及改善缺乏的可访问性。以下是规范中三个主要的特性：
- 角色：这定义了元素是干什么的。许多「标志性的角色」，其实重复了HTML5的结构元素的语义价值。 例如：role=navigation（nav）或者role=complementary（aside)。
- 属性：我们能通过定义一些属性给元素，让他们具备更多的语义。 例如：aria-required=true意味着元素在表单上是必填的。然而aria-label允许在元素上设置一个ID，用于labelledby引用作为屏幕阅读器指定的labe内容，多个也可以。
- 状态：用于表达元素当前的条件的特殊属性 例如oria-disabled=true，屏幕阅读器就会这个表单禁止输入。状态和属性的差异之处就是：属性在应用的生命周期中不会改变，而状态可以，通常我们用编程的方法改变它，例如javascript
<nav role="navigation">
<input role="search" area-label="Search through site content"></input>
</nav>SEO
SEO由英文Search Engine Optimization中文为搜索引擎优化
其实叫针对搜索引擎优化更容易理解得网站流量的技术和过程，是在了解握索引擎自 然排名机制的基磁上，对网站进行内部调整优化，改进网站在搜索引擎中的关键词自然排名，获得更多流量，从而达成网站销售及品牌建设的目标
整个SFO工作大致可以分为内部优化和外部优化
内部优化
1. 合理的title、description、keywords
这个就是经典面试题中出现的TDK，其实就是这3个单词的缩写。
- tite：浏览器上显示的那些内容，不仅用户能看到，也能被搜索引擎检索到，搜索引擎在抓取网页时，最先读取的就是网页标题，所以title是否正确设置极其重要，title一般不超过80个字符，而且词语间要用英文横杠隔开，因为计算机只对英语的敏感性较高，对汉语的敏感性不高。
- description：也就是网页的内容摘要，这是对于一个网页的简要内容概况。description一般不超过150个字符，描述内容要和页面内容相关。
- keywords：主要作用是告诉搜索引擎本页内容是围绕哪些词展开的.因此keywords的每个词都要能在内容中找到相应匹配，才有利于排名。keywords一般不超过3个，每个关键词不宜过长，而且词语间要用英文逗号隔开，尽量将重要的关键字靠前故。
2. 语义化的HTML代码，符合W3C规范
语义化代码能够让搜索引擎容易理解网页，即使脱去了CSS这一层外衣，整个网页的结构也是清清楚楚的，无论是搜索引擎还是阅读者，都能够很容易的分辨网页的结构。
3. 非装饰性图片必须加alt
img标签的olit属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。
alt标签的作用：
- 增强内容相关性：它是可以利用汉字介绍文章内容的，对于一些特定的企业产品，由于视觉的体验，它往往是少文字的。
- 提高关键词密度：在操作企业站的时候，我们经常遇到是站点首屏一个大的横幅banner，几乎占用了首页的大部分页面，为了有效的提高首页核心关键词密度，我们只能利用一切办法增添关键词
4. 对于不显示的对象谨慎使用display:none
对于不想显示的文字内容，应当设置z-index或设置到浏览器显示器之外。因为搜索引擎会过滤掉disploycnone其中的内容。
5. 重要内容HTML代码放在最前面
索引擎抓取HTML顺序是从上到下，所以我们尽量将重要的内容放在前面，保证重要内容一定会被抓取。
6. 少用iframe
少用或者尽量不用jrame，因为搜索引擎不会抓取iframe中的内容
外部优化
外部优化主要是指放友情链接和外链。好的网站的权重，高质量的外链，会给你的网站提 高源源不断的权重提升，另外向各大搜索引擎登录入口提交尚未收录站点
iframe
iframe称之为嵌入式框架，嵌入式框架可以把一个完整的网页内容嵌入到现有的网页中。
缺点就是搜索引擎的爬虫“程序无法解读这种页面，当“爬虫“遇到多个页面嵌套的网页时只 看到框架却找不到链接，然后认定此网站是死站点并离开，这对于SEO来讲无疑是毁灭性的打击，并且使用大量的iframe标签也会稀释你该页面的关键词密度井对其产生影响。
微格式
所谓微格式，是建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式。 具体表现是把语义嵌入到HTML中，以便有助于分离式开发。并通过制定一些简单的约定，来兼顾HTML文档的人机可读性，相当于对Web网页进行了语义注解。
普通的链接
<a href='http://www.bbon.cn'>click</a>为链接添加上rel属性
<a href='http://www.bbon.cn' rel='homePage'>click</a>指明这个链接是网站的首页（语义注解）
不只是rel可以标记，使用类名也可以标记
通过为已有的链接元素添加语义化属性，为这个链接添加具体的结构和意义
通过使用合适的HTML元素并将结构化类名应用到标记中，可以生成用户可以清楚理解的内容，井通过自动化程序和其他在线工具以结构化方式使用这些内容， 机器友好型标记——微格式可以轻松地将这种更高程度的结构集成到网站中，而无需学习复杂的新语言或格式
微格式就是为了兼顾HTML文档的人机可读性，在标签中添加的语义注解。
并不是所有的html标签都需要添加微格式，微格式一般用于标记人员、组织、事件、地点、博客帖子、产品、评论、简历、食谱等的html标签
常用于seo优化帮助爬虫更好地理解网站内容
替换元素
所谓可替换元素（replaced element），是指一些展现效果不由CSS来控制的元素。这些元素是一种外部对象，它们外观的渲染，是独立于CSS的。
简单来说，它们的内容不受当前文档的样式的影响，CSS可以影响可替换元素的位置，但不会影响到可替换元索自身的内容。某些可替换元素，如：iframe可能有自己的样式表，它们不会继承父元素的样式
与替换元素相对应的，就是非替换元素，顾名思义就是那些样式完全由CSS来控制的元素，例如p，h1~h6等。
常见的替换元素
- 图片标签img
- 内联框架iframe
- 音频视频标签
贡献者
pinkdopeybug版权所有
版权归属：
