1.常见浏览器

Internet Explorer，Safari，Chrome，Opera，Firefox；Trident(IE内核)，Gecko(Firefox内核)，Presto(Opera前内核) (已废弃)，Webkit(Safari内核,Chrome内核原型,开源），Chromium/Blink
主流浏览器内核介绍

2.HTML 头部

<head> 的内容不会在浏览器中显示，它的作用是包含一些页面的元数据。
列如：

元数据 (Metadata): 描述数据的数据 (a set of data that describes and gives information about other data)
<title> 是用来表示整个HTML文档大致内容的元数据

元数据 <meta> 有哪些常见的值？

metadata，中文名叫元数据，是用于描述数据的数据。它不会显示在页面上，但是机器却可以识别。
元元素通常用于指定页面描述、关键字、文档的作者、最后修改的和其他元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务。

指定文档编码

<meta charset="utf-8">

其实网页乱码都是由于编码问题造成的,网页开发者没有指定使用的编码,导致浏览器在打开网页时,按照计算机默认编码执行,所以才会出现乱码的问题;

适配移动页面

<meta name="viewport" content="width=device-width, initial-scale=1.0">

设置 referer
HTTP来源地(referer，或HTTP referer）是HTTP表头的一个字段，用来表示从哪儿链接到目前的网页，采用的格式是URL。换句话说，借着HTTP来源地址，目前的网页可以检查访客从哪里而来，这也常被用来对付伪造的跨网站请求。

<meta name="referrer" content="never">

添加页面描述

<meta name="description" content="腾讯网(www.QQ.com)是中国浏览量最大的中文门户网站，是腾讯公司推出的集新闻信息、互动社区、娱乐产品和基础服务为一体的大型综合门户网站。腾讯网服务于全球华人用户，致力成为最具传播力和互动性，权威、主流、时尚的互联网媒体平台。通过强大的实时新闻和全面深入的信息资讯服务，为中国数以亿计的互联网用户提供富有创意的网上新生活。

doctype有什么作用

DOCTYPE，简称为DTDs，是英文Document type的缩写，中文“文档类型”，在Web设计中用来说明你用的XHTML或者HTML是什么版本。
<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。在HTML中 doctype 有两个主要目的。

(1）对文档进行有效性验证。
它告诉用户代理和校验器这个文档是按照什么DTD 写的。这个动作是被动的，每次页面加载时，浏览器并不会下载DTD 并检查合法性，只有当手动校验页面时才启用。
(2）决定浏览器的呈现模式
Doctype可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了3种呈现模式：
Standards(标准)模式：遵循最新标准。
Quirks（怪癖/兼容）模式：帮助处理所有奇怪的渲染和非浏览器兼容及不符合标准的网页。
Almost Standards（近似标准）模式：针对标准的某个老版本设计的网页。

模式触发

浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。
如果XHTML、HTML 4.01文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。
包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以怪癖/兼容呈现。
DOCTYPE不存在或形式不正确会导致HTML和XHTML文档怪癖/兼容模式呈现。
更多

3.常用的于语义化标签

<a> 用于超链接。

<a href="">some text</a>

<article> 用于一篇文章。

<article>a self-contained article</article>

<aside> 用于页面的侧边栏。

<aside>some content</aside>

<blockquote> 用于大段的引用内容。

<blockquote>some big texts</blockquote>

<body> 页面上显示的所有内容都被包含在<body></body>里

<button> 用于显示一个按钮
<code> 用于一包裹一段代码内容
<dd> 用于一个dl列表的某个dt名词的描述

<div> 用于包裹住一些其他的标签，制造一个容器

<em> 用于强调一些文本内容
<figcaption> 用于一张图表的说明文字
<figure> 用于一张图表
<footer> 用于包裹页面的底部内容
<form> 用于制作一个表单
<h1>-<h6> 用于标记标题，从h1到h6重要性依次递减
<head> 用于包裹页面的元数据，如<meta>, <link>, <title>等
<header> 用于包裹页面的头部内容
用于制造出一条分隔线
<html> 整个 HTML 文档的根元素，包裹住其他所有的元素
<iframe> 用于嵌入另一个小页面到一个页面中(已废弃)
<img> 用于显示一张图片
<input> 用于显示一个表格输入控件
<label> 用于给一个表格输入控件打上一个标签，说明输入控件的作用
<li> 用于<ul>和<ol>标签，代表一个列表项
<link> 用于链接外部CSS文件
<mark> 用于高亮显示某些文本
<meta> 用于下达一些元数据指令，或者对页面进行说明
<nav> 用于包裹住一个导航条的内容
<ol> 用于制作一个有序列表
<p> 用于显示一个段落
<q> 用于一小段引用文字
<script> 用于一段JavaScript脚本代码，或者引入一个外部JavaScript脚本文件
<section> 用于包裹一部分有逻辑关第的页面内容
<select> 用于制作一个下拉列表选框
<span> 用于包裹住一小段文字，作为一个容器
<strong> 用于着重强调重要的文本内容
<style> 用于给页面元素加上样式
_{用于下标文本}
^{用于上标文本}
<table> 用于制作一个表格
<tbody> 用于表格里的主体部分
<td> 用于表格里的某一个单元格
<textarea> 用于制作一大块文本输入框
<th> 用于表格里的表头的单元格
<thead> 用于表格里的表头
<time> 用于页面内容中的时间
<title> 用于显示整个页面的标题（显示在浏览器的tab上）
<tr> 用于标记表格里的一行
<ul> 用于制作一个无序列表

转义实体

列如：如何在html 页面上展示 <div></div> 这几个字符？

<body>
&ltdiv&gt &lt/div&gt
</body>

title 属性和 alt属性分别有什么作用？

1.alt属性
使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户。替换文字是用来替代图像而不是提供额外说明文字的。alt属性包括替换说明，对于图像和图像热点是必须的。它只能用在img、area和input元素中（包括applet元素）。
2.title属性
title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。大部分的可视化浏览器在鼠标悬浮在特定元素上时显示title文字为提示信息（tool tip），然而这又由制造商来决定如何渲染title文字。
title属性有一个很好的用途，即为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的。这样就使得访问者知道那些链接将会带他们到什么地方，他们就不会加载一个可能完全不感兴趣的页面。另外一个潜在的应用就是为图像提供额外的说明信息，比如日期或者其他非本质的信息。

作者：彭荣辉
链接：https://www.jianshu.com/u/0f804364a8a8
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

HTML基础