HTML、XML、XHTML
- HTML：超文本标记语言 （Hyper Text Markup Language），用于显示数据，使用标记标签来描述网页的一种语言。HTML语法较为松散。标签不区分大小写，标签甚至不必成对出现。
- XML：可扩展标记语言（EXtensible Markup Language），用于传输和存储数据，需要自行定义标签的一种标记语言。XML语法较为严格。标签必须小写，标签也必须成对地出现。
- XHTML：可扩展超文本标签语言（EXtensible HyperText Markup Language），以 XML 重构的 HTML，继承了XML严格的语法。是更严格更纯净的 HTML 版本。
HTML 语义化
HTML语义化是选择合适的标签来把HTML内容结构化，使得开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。
优点
- 有利于SEO，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重
- 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构
- 方便其他设备的解析
- 便于团队开发和维护
内容与样式分离
本意是：一篇文档的实际内容和意义，与这篇文档呈现给读者的方式（样式），是相互独立的。
在网页设计中，将页面通过HTML和CSS分开，不仅可以更清晰地分别表达样式或者内容，更重要的是这一分离使得二者不再耦合，样式变得可复用、组件化。
优点
- 利于协同工作。样式往往由设计师负责，而内容往往由前端工程师负责。这样的分离有利于他们的分工。
- 样式可复用。引入样式时，可以对不同的样式文件进行组合，便于网站风格的建立和管理。
meta标签
meta标签用于定义关于 HTML 文档的的元信息（meta-information）。通过一些字段信息来描述一下当前网页，以便浏览器和搜索引擎在访问到此网页的时候，可以通过这些描述信息来知道如何去解析此网页数据。
<meta> 标签不包含任何内容，通过属性定义了与文档相关联的名称/值对。
如：
-
<meta charset="utf-8">标明文档编码 -
<meta name="author" content="Jiaz">注明文档作者 -
<meta name="description" content="This page is about the meaning of science, education,culture.">注明了当前网页的主要内容 -
<meta name="keywords" content="HTML,ASP,PHP,SQL">注明了页面关键词
!DOCTYPE 文档声明
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。定义文档是否可以使用一些不被W3C推荐的标签，以及是否可以使用框架。
浏览器从服务端获取网页后会根据文档的 DOCTYPE 定义显示网页，如果文档正确定义了 DOCTYPE，浏览器则会进入严格模式（Standards Mode），否则浏览器会进入怪异模式或混杂模式（Quirks mode）。
浏览器开发初期W3C倡导的网页标准并不流行，因此浏览器有独特的对网页标签或属性的解析模式，随着日后网页标准的流行，浏览器增加了对新标准的支持（严格模式），但又没有放弃对原有模式的兼容（混杂模式），这就是浏览器多种表现模式的来源。
- 在 HTML 4.01 中有三种 <!DOCTYPE> 声明。
-
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> -
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
-
- 在 HTML5 中只有一种：
<!doctype html>
在每个 HTML 页面的第一行添加声明，能够确保在每个浏览器中拥有一致的展现。
编码格式
在计算机内部，所有的信息最终都表示为一个二进制的字符串。上个世纪60年代，美国制定了一套字符编码，对英语字符与二进制位之间的关系，做了统一规定。这被称为ASCII码，一直沿用至今。
-
乱码
英语用128个符号编码就够了，但是用来表示其他语言，128个符号是不够的。所以世界上出现了多种编码方式，比如，简体中文常见的编码方式是GB2312。
同一个二进制数字通过不同的编码方式可以被解释成不同的符号。因此，要想打开一个文本文件，就必须知道它的编码方式，否则用错误的编码方式解读，就会出现乱码。
-
统一
互联网的普及，强烈要求出现一种统一的编码方式，将世界上所有的符号都纳入其中。每一个符号都给予一个独一无二的编码，那么乱码问题就会消失。这就是Unicode，就像它的名字都表示的，这是一种所有符号的编码。
UTF-8就是在互联网上使用最广的一种Unicode的实现方式。
-
实现
在网页中通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致。
浏览器
浏览器是一种用于检索并展示万维网信息资源的应用程序。这些信息资源可为网页、图片、影音或其他内容，它们由统一资源标志符标志。
主流网页浏览器有Mozilla Firefox、Internet Explorer、Microsoft Edge、Google Chrome、Opera及Safari。
浏览器内核主要指的是浏览器的渲染引擎，2013 年以前，代表有 Trident（IE），Gecko（firefox），Webkit（Safari chrome 等）以及 Presto（opera)。2013 年，谷歌开始研发 blink 引擎，chrome 28 以后开始使用，而 opera 则放弃了自主研发的 Presto 引擎，投入谷歌怀抱，和谷歌一起研发 blink 引擎，国内各种 chrome系的浏览器（360、UC、QQ、2345 等等）也纷纷放弃 webkit，投入 blink 的怀抱。
HTML标签
- HTML 文档和 HTML 元素是通过 HTML 标签进行标记的
- HTML 标签由开始标签和结束标签组成
- 开始标签是被括号包围的元素名
- 结束标签是被括号包围的斜杠和元素名
- 某些 HTML 元素没有结束标签
常见的标签
html限定了文档的开始点和结束点。
head文档的头部，描述了文档的各种属性和信息，不会作为内容显示出来。
body文档的主体，包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
title定义文档的标题。<title> 标签是 <head> 标签中唯一要求包含的东西。
style用于为 HTML 文档定义样式信息，通常位于 head 部分中
script用于定义客户端脚本，比如 JavaScript。既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。
h1~h6 标题 ，<h1>标题</h1>表示一级标题， h2表示二级标题……
p 段落，<p>一段文字</p>表示一段文字。
a 超链接，<a href="#"></a>表示链接到一个地址。
img 图片，用于展示图片。
div 块元素，<div>...</div>把文档分割为独立的、不同的部分。
ul 无序列表，ol 有序列表， li列表项目，
<ul> <li>...</li> <li>...</li> </ul>
<ol> <li>...</li> <li>...</li> </ol>
用于表示并列的内容.
dl 项目列表， dt 项目标题，dd项目内容
<dl> <dt>标题1:</dt> <dd>内容1 </dd> <dt>标题2:</dt> <dd>内容2 </dd> <dt>标题3:</dt> <dd>内容3</dd> </dl>
定义了定义列表
iframe 嵌入页面, <iframe src="#"></iframe>创建包含另外一个文档的内联框架
table 表格，tr定义行 th表头单元格 td标准单元格
<table> <tr> <th>表头1</th> <th>表头2</th> </tr> <tr> <td>项目1</td> <td>项目2</td> </tr> </table>
button 按钮，<button type="button">Click Me!</button>
em强调, strong更强的强调。
span 组合行内元素，以便通过样式来格式化它们。
header定义文档的页眉（介绍信息）。
nav定义导航链接的部分。
section定义文档中的节（section、区段）。比如章节部分。
footer定义文档的页脚。
网友评论