整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。
HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素（如<html>），浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们显示在页面上。
HTML可以嵌入如JavaScript的脚本语言，它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表（CSS）来定义文本和其它元素的外观与布局。维护HTML和CSS标准的组织万维网联盟（W3C）鼓励人们使用CSS替代一些用于表现的HTML元素。
历史
W3C制作的早期HTML标志
发展
蒂姆·伯纳斯-李
1980年，物理学家蒂姆·伯纳斯-李在欧洲核子研究中心（CERN）在承包工程期间，为使CERN的研究人员使用并共享文档，他提出并创建原型系统ENQUIRE。1989年，伯纳斯-李在一份备忘录中提出一个基于互联网的超文本系统。他规定HTML并在1990年底写出浏览器和服务器软件。同年，伯纳斯-李与CERN的数据系统工程师罗伯特·卡里奥联合为项目申请资助，但未被CERN正式批准。在他的个人笔记中伯纳斯-李列举“一些使用超文本的领域”，并把百科全书列为首位。
HTML的首个公开描述出现于一个名为“HTML标签”的文件中，由蒂姆·伯纳斯-李于1991年底提及。它描述18个元素，包括HTML初始的、相对简单的设计。除了超链接标签外，其他设计都深受CERN内部一个以标准通用标记语言（SGML）为基础的文件格式SGMLguid的影响。这些元素在HTML 4中仍有11个存在。
伯纳斯-李认为HTML是SGML的一个应用程序。1993年中期互联网工程任务组（IETF）发布首个HTML规范的提案：“超文本标记语言（HTML）”互联网草案，由伯纳斯-李与丹·康纳利（英语：Dan Connolly (computer scientist)）撰写。其中包括一个SGML文档类型定义来定义语法。草案于6个月后过期，不过值得注意的是其对NCSA Mosaic浏览器自定义标签从而将在线图像嵌入的行为的认可，这反映IETF把标准立足于成功原型的理念。同样，戴夫·拉格特（英语：Dave Raggett）在1993年末提出的与之竞争的互联网草案“HTML+（超文本标记格式）”建议规范已经实现的功能，如表格与填写表单。
在HTML和HTML+的草案于1994年初到期后，IETF创建一个HTML工作组，并在1995年完成"HTML 2.0"，这是第一个旨在成为对其后续实现标准的依据的HTML规范。
在IETF的主持下，HTML标准的进一步发展因竞争利益而遭受停滞。自1996年起，HTML规范一直由万维网联盟（W3C）维护，并由商业软件厂商出资。不过在2000年，HTML也成为国际标准（ISO/ IEC15445：2000）。HTML 4.01于1999年末发布，进一步的勘误版本于2001年发布。2004年，网页超文本应用技术工作小组（WHATWG）开始开发HTML5，并在2008年与W3C共同交付，2014年10月28日完成标准化。
版本时间线
1995年11月24日
HTML 2.0作为IETF RFC 1866发布。追加RFC的附加功能：
1995年11月25日：RFC 1867（基于表单的文件上传）
1996年5月：RFC 1942（表格）
1996年8月：RFC 1980（客户端图像映射）
1997年1月：RFC 2070（国际化）
1997年1月14日
HTML 3.2作为W3C推荐标准发布。这是首个完全由W3C开发并标准化的版本，因IETF于1996年9月12日关闭它的HTML工作组。
最初代号为“威尔伯”（Wilbur），HTML 3.2完全去除数学公式，协调各种专有扩展，并采用网景设计的大多数视觉标记标签。由于两家公司达成了协议，网景的闪烁元素（英语：blink element）和微软的滚动元素（英语：marquee element）被移除。HTML对数学公式的支持最后成为另外一种被称为MathML的标准。
1997年12月18日
HTML 4.0作为W3C推荐标准发布。它提供三种变化：
严格，过时的元素被禁止。
过渡，过时的元素被允许。
框架集，大多只与框架相关的元素被允许。
最初代号“美洲狮”（Cougar）， HTML 4.0采用许多特定浏览器的元素类型和属性，并试图淘汰网景的视觉标记功能，将其标记为不赞成使用。HTML 4是遵循ISO 8879 - SGML的SGML应用程序。
1998年4月24日
HTML 4.0进行微调，不增加版本号。
1999年12月24日
HTML 4.01作为W3C推荐标准发布。它同样提供三种变化，最终勘误版于2001年5月12日发布。
2000年5月
ISO/IEC 15445:2000（"ISO HTML"，基于HTML 4.01严格版）作为ISO/IEC国际标准发布。在ISO中这一标准位于ISO/IEC JTC 1/SC 34（英语：ISO/IEC JTC 1/SC 34）域（ISO/IEC联合技术委员会1、小组委员会34 – 文档描述与处理语言）。
2014年10月28日
HTML 5作为W3C推荐标准发布。
草案时间线
HTML5的Logo
1991年10月
HTML标签，一个非正式CERN文件首次公开18个HTML标签。
1992年6月
HTML DTD的首个非正式草案， 后续有七个修订版（7月15日，8月6日，8月18日，11月17日，11月19日，11月20日，11月22日）。
1992年11月
HTML DTD 1.1（首个版本号，基于RCS修订版，版本号从1.1开始而非1.0），非正式草案。
1993年6月
超文本标记语言由IETF IIIR工作小组作为互联网草案（一个粗略的建议标准）。在被第二版代一个月后，IETF又发布6个草案，最终在RFC1866中发布HTML 2.0。
1993年11月
HTML+由IETF作为互联网草案发布，是超文本标记语言草案的一个竞争性提案。它于1994年5月到期。
1995年4月 （1995年3月编写）
HTML 3.0[33]被提议作为IETF的标准，但直到提案在五个月过期后（1995年9月28日）仍没有进一步的行动。它包含许多拉格特HTML+提案的功能，如对表格的支持、围绕数据的文本流和复杂的数学公式的显示。W3C开始开发自己的Arena浏览器作为HTML 3和层叠样式表的试验台（英语：Test bed），但HTML 3.0并没有获得成功。浏览器厂商，包括微软和网景，选择实现HTML3草案功能的不同子集并引入它们自己的插件（见浏览器大战）。
2008年1月
HTML5由W3C作为工作草案（链接）发布。虽然HTML5的语法非常类似于SGML，但它已经放弃任何成为SGML应用程序的尝试，除了一种替代的基于XML的HTML5序列，它已明确定义自己的“HTML”序列。
2011年 HTML5 – 最终征求
2011年5月，工作小组将HTML5推进至“最终征求”（Last Call）阶段，邀请W3C社区内外人士以确认本规范的技术可靠性。W3C开发一套综合性测试套件来实现完整规范的广泛交互操作性，完整规范的目标日期为2014年。2011年1月，WHATWG将其“HTML5”活动标准重命名为“HTML”。W3C仍然继续其发布HTML5的项目。
2012年 HTML5 – 候选推荐
2012年7月，WHATWG和W3C的工作产生一定程度的分离。W3C继续HTML5规范工作，重点放在单一明确的标准上，这被WHATWG称为“快照”。WHATWG组织则将HTML5作为一个“活动标准”（Living Standard）。活动标准的概念是从未完成但永远保持更新与改进，可以添加新特性，但功能点不会被删除。
2012年12月，W3C指定HTML5作为候选推荐阶段。 该阶段的标准为“两个100％完成，完全实现交互操作”。
2014年 HTML5 – 提案推荐与推荐
2014年9月，HTML5进入提案推荐阶段。
2014年10月28日，HTML5作为稳定W3C推荐标准发布，这意味着HTML5的标准化已经完成。
XHTML版本
XHTML是使用XML 1.0改写自HTML 4.01的独立语言。它不再被作为单独标准开发。
XHTML 1.0， 2000年1月26日作为W3C推荐标准发布。修订版于2002年8月1日发布，它提供与HTML 4.0和4.01相同的三个变化，这些变化被重新在XML中制定。
XHTML 1.1，基于XHTML 1.0 严格版，2001年5月31日 作为W3C推荐标准发布。修订版可使用模块化XHTML的模块，2001年4月10日作为W3C推荐标准发布。
XHTML 2.0为工作草案，但为支持HTML5与XHTML5的工作，此草案被放弃。 XHTML 2.0与XHTML 1.x不兼容，因此更确切的说这是一个XHTML风格的新语言而不是XHTML 1.x的更新。
在HTML5草案中规定一个XHTML语法，称为“XHTML5.1”。
标记
HTML标记包含标签（及其属性）、基于字符的数据类型、字符引用和实体引用等几个关键部分。HTML标签是最常见的，通常成对出现，比如<h1>与</h1>。这些成对出现的标签中，第一个标签是开始标签，第二个标签是结束标签。两个标签之间为元素的内容，有些标签没有内容，为空元素，如<img>。
HTML另一个重要组成部分为文档类型声明（英语：document type declaration），这会触发标准模式渲染。
以下是一个经典的Hello World程序的例子：
<!DOCTYPE html>
<html>
<head>
<title>This is a title</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
<html>和</html>之间的文本描述网页，<body>和</body>之间的文本为可视页面内容。标记文本<title>This is a title</title>定义了浏览器的页面标题。
文档标记类型<!DOCTYPE html>用于HTML5。 如果未进行声明，浏览器会使用“怪异模式”进行渲染。
元素
HTML文档由嵌套的HTML元素构成。它们用HTML标签表示，包含于尖括号中，如<p>
在一般情况下，一个元素由一对标签表示：“开始标签”<p>与“结束标签”</p>。元素如果含有文本内容，就被放置在这些标签之间。
在开始与结束标签之间也可以封装另外的标签，包括标签与文本的混合。这些嵌套元素是父元素的子元素。
开始标签也可包含标签属性。这些属性有诸如标识文档区段、将样式信息绑定到文档演示和为一些如<img>等的标签嵌入图像、引用图像来源等作用。
一些元素如换行符<br>，不允许嵌入任何内容，无论是文字或其他标签。这些元素只需一个单一的空标签（类似于一个开始标签），无需结束标签。
许多标签是可选的，尤其是那些很常用的段落元素<p>的闭合端标签。HTML浏览器或其他媒介可以从上下文识别出元素的闭合端以及由HTML标准所定义的结构规则。这些规则非常复杂，不是大多数HTML编码人员可以完全理解的。
因此，一个HTML元素的一般形式为：<tag attribute1="value1" attribute2="value2">''content''</tag>。一些HTML元素被定义为空元素，其形式为<tag attribute1="value1" attribute2="value2">。空元素不能封装任何内容。例如<br>标签或内联标签<img>。一个HTML元素的名称即为标签使用的名称。注意，结束标签的名称前面有一个斜杠“/”，空元素不需要也不允许结束标签。如果元素属性未标明，则使用其默认值。
例子
HTML文档的页眉：<head>...</head>。标题被包含在头部，例如：
<head>
<title>The Title</title>
</head>
标题：HTML标题由<h1>到<h6>六个标签构成，字体由大到小递减：
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
段落：
<p>第一段</p> <p>第二段</p>
换行：<br>。<br>与<p>之间的差异是br换行但不改变页面的语义结构，而p部分的页面成段。
<p>這是<br>一個<br>使用換行<br>段落</p>
链接：使用<a>标签来创建链接。href属性包含链接的URL地址。
<a href="https://zh.wikipedia.org/">中文維基百科的連結！</a>
注释：
<!-- This is a comment -->
注释有助于理解标记，但它不会在网页上显示。
HTML中存在以下几种类型的标记元素：
用于文本的结构式标记
例如，<h2>羽毛球</h2>将“羽毛球”定义为二级标题。结构式标记不指示任何特定的渲染，但大多数网页浏览器都会采用元素格式的默认样式。要在内容上实现进一步的风格可以使用层叠样式表（CSS）。
用于文本外观的表现式标记，不论其目的
例如，<b>粗体</b>表示视觉输出设备应将文本“粗体”加粗，但如果设备无法做到这一点（如朗读文本的听觉设备），就不会发生什么现象。在这种情况下，<b>粗体</b>与''斜体''也可能有相同的视觉效果，但在本质上它们更加语义化。如同<strong>加强文字</strong>与<em>强调文字</em>的区别。为支持CSS的使用，大多数表现式标记在HTML 4.0规范中不再被推荐使用。
超文本标记使文档的一部分链接到其他文档
锚元素在文档中创建超链接，其href属性设置链接的目标URL。例如：HTML标记<a href="https://zh.wikipedia.org/">中文维基百科</a>会将文字"中文维基百科"渲染为超链接。要将图片渲染为超链接，img元素要作为内容插入到a元素中：<a href="https://example.org"><img src="image.gif" alt="说明文字" width="50" height="50" border="0"></a>。
属性
大多数元素的属性以“名称-值”的形式成对出现，由“=”分离并写在开始标签元素名之后。值一般由单引号或双引号包围，有些值的内容包含特定字符，在HTML中可以去掉引号（XHTML不行）。不加引号的属性值被认为是不安全的[58]。有些属性无需成对出现，仅存在于开始标签中即可影响元素[6]，如img 元素的ismap 属性。
许多元素存在一些共通的属性：
id属性为元素提供了在全文档内的唯一标识。它用于识别元素，以便样式表可以改变其表现属性，脚本可以改变、显示或删除其内容或格式化。对于添加到页面的URL，它为元素提供了一个全局唯一标识，通常为页面的子章节。例如，ID "属性"对于https://zh.wikipedia.org/wiki/HTML#属性
class属性提供一种将类似元素分类的方式。常被用于语义化或格式化。例如，一个HTML文档可指定类<class="标记">来表明所有具有这一类值的元素都从属于文档的主文本。格式化后，这样的元素可能会聚集在一起，并作为页面脚注而不会出现在HTML代码中。类属性也被用于微格式的语义化。类值也可进行多声明。如<class="标记 重要">将元素同时放入標記与重要两类中。
style属性可以将表现性质赋予一个特定元素。比起使用id或class 属性从样式表中选择元素，“style”被认为是一个更好的做法，尽管有时这对一个简单、专用或特别的样式显得太繁琐。
title属性用于给元素一个附加的说明。 大多数浏览器中这一属性显示为工具提示（英语：Tooltip）。
lang属性用于识别元素内容的语言，它可能与文档的主要语言不同。例如，在中文文档中：
<p>法语<span lang="fr">c'est la vie</span>在法国的应用很普遍，意为“这就是生活” 。<p>
缩写元素abbr可用于说明一些属性：
<abbr id="ID" class="术语" style="color:purple;" title="超文本标记语言">HTML</abbr>
这个例子显示为HTML； 在大多数浏览器中，光标指向缩写时会显示标题文字“超文本标记语言”。
大多数元素采用与语言相关的属性dir 来指定文字方向，如 "rtl"采用从右到左的文本，比如阿拉伯语、波斯语以及希伯来语。
字符与实体引用
参见：XML与HTML字符实体引用列表和Unicode与HTML
在4.0版本中，HTML定义了一系列共252个字符实体引用和1,114,050个字元值参考。二者都支持单个字符通过简单的标记写入。文字字符与其对应的标记渲染的效果相同。
用这种方式“转义”字符的能力允许字符<与&（当分别被写作<和&时）被理解为字符数据而不是标记。例如<通常为标签的开头，&通常为字符实体引用与数字字符引用的开头；&或&或&将&作为元素的内容或属性的值。双引号字符"在不被用于属性值的标示时必须转义为"或"或"；相等地，当于单引号字符'不被用于属性值的标示时，也必须转义为'或'（或HTML5与XHTML文档中的'）。
如果文档作者忽略了转义这样的字符，一些浏览器会尝试通过上下文猜测他们的意图。如果结果仍为无效标记，这会使其他浏览器或用户代理难以访问到该文档，并使它们尝试使用搜索和索引来解析该文档。
那些难以输入或不在该文档字符编码中的字符也可通过转义来实现。例如通常只在西欧或南美的键盘出现的重音符e（é），可以在HTML文档中用作实体引用é 或数字引用é或é。 诸如UTF-8的Unicode字符编码与所有的现代浏览器兼容并允许直接访问全球书写系统几乎所有的字符 。
数据类型
HTML为元素内容定义了多种数据类型，如脚本数据、样式表数据以及许多属性值的类型，包括ID、名称、URI、数字长度单位、语言、媒体描述符颜色、字符编码、日期和时间等等。所有这些数据类型都是字符数据的特殊化。
文档类型声明
HTML文档需要以文档类型声明（英语：document type declaration）（英语非正式说法“doctype”）开头。在浏览器中，文档类型声明有助于确定渲染模式——特别是是否使用怪异模式。
文档类型声明的初衷是通过基于文档类型定义（DTD）的SGML工具来解析并验证HTML文档。
HTML5未定义DTD，所以在HTML5中文档类型声明更为简短：
<!DOCTYPE html>
HTML 4文档类型声明举例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
该声明引用HTML 4.01“严格”版的DTD。基于SGML的验证器可读取DTD，正确解析这些文档并执行验证。在现代浏览器中，一个有效的文档类型激活标准模式有别于怪异模式。
另外，HTML 4.01提供过渡型与框架集型的DTD。过渡型涵盖最广，它可整合当前以及老旧或“过时”的标签，而严格型DTD排除了过时的标签。框架集拥有所有构建框架所需的标签以及过渡型的标签。
语义化HTML
语义化HTML是一种编写HTML的方式，它强调编码信息的含义在其格式（样子）之上。HTML从创立之初就包括语义化标记，但也包括标识性标记如<font>、<i>和<center>标签。也存在一些语义上中立的span与div标签。自1990年代末层叠样式表开始应用于大多数浏览器，网页制作者就被鼓励使用CSS以便呈现与内容分离。
在2001年一次对语义网的讨论中，蒂姆·伯纳斯-李等人给出了一种的方法，使智能软件“代理人”可能有一天会自动抓取网页进行查找、过滤并将之前不相关的联系起来。这种代理甚至在现在也不普遍，但一些Web 2.0、混搭和价格比较网站的想法可能会结束。这些网页应用程序的混合与伯纳斯-李的语义代理人的之间主要区别基于以下事实：当前的聚合与信息混合通常由网页开发者设计，他们早已知道网络位置和他们希望混搭、比较与结合的特定数据的API语义。
网页代理的一个重要类型是网络爬虫或搜索引擎蜘蛛。这些软件代理依赖于它们发现的网页的语义清晰度，因为它们一天要使用各种技术与算法来读取和索引数百万个网页并给网页用户提供搜索工具，没有这些万维网的有效性就会大大降低。
为使搜索引擎蜘蛛评估它们在HTML文档中发现的文本片段的重要性，也为那些创建标记等混合的人与更多的自动化代理工具，HTML中的语义结构需要广泛一致地应用从而将文本的含义呈现给浏览者。
表示性标记在当前的HTML和XHTML推荐中不被鼓励使用，HTML5中则被视为非法。
好的语义化HTML也改善了网页文档的可访问性。例如，当屏幕阅读器或音频浏览器可以正确判定一个文档的结构时，视觉障碍用户不会再因阅读重复或无关的信息而浪费时间。
分发
HTML文档分发的方法和其他计算机文件相同。不过，它们最常通过网页服务器的超文本传输协议或电子邮件传输。
HTTP
万维网主要由从服务器通过HTTP协议向浏览器发送的HTML文档组成。但是，HTTP也可以被用于传输HTML之外的数据，例如图像、声音和其他内容。为使浏览器了解如何处理接收到的文档，在传输文档时必须同时传递文件类型。这种元数据包含MIME类型（对于HTML 4.01或更早版本是text/html，而对于XHTML 1.0或之后的版本是application/xhtml+xml），以及字符编码（参见HTML字符编码方式）。
在现在的浏览器中，和HTML文档一起发送的MIME类型影响文档的解读方式。和XHTML MIME类型一起发送的文档被认为是良构的XML，而语法错误会导致浏览器无法呈现文档。完全相同的文档如果和HTML MIME类型一起发送，则可能被正常显示，因为浏览器对HTML的语法检查更加松懈些。
W3C的推荐指出，遵循规定的推荐指引的XHTML 1.0文档可标记二者任一的MIME类型。XHTML 1.1还指出，XHTML 1.1文档应标有两种MIME类型。
HTML邮件
大多数图形电子邮件客户端允许使用HTML的子集（经常界限不清）提供格式化和无法使用纯文本的语义标记。这可能包括印刷信息，如彩色标题、强调和引用文本、内嵌图片和图表等。许多这样的客户包含一个编写HTML电子邮件消息的图形用户界面编辑器和一个用于显示的渲染引擎。在邮件中使用HTML受到了一些兼容性的批评，由于一些盲人或具有视觉障碍的人的访问问题，这种方式有利于伪装的钓鱼攻击。因其消息大小超过明文，所以它可混淆垃圾邮件过滤器。
命名规则
最常用的计算机文件扩展名为.html，通用缩写为.htm。它起源于某些早期操作系统与文件系统，如DOS以及FAT数据结构的局限性，它将文件扩展名限制为3个字母。
HTML应用程序
HTML应用程序（HTA；文件扩展名".hta"）是一个Microsoft Windows应用程序，它在浏览器中使用HTML和动态HTML提供应用程序图形界面。正规HTML文件被限制在浏览器的安全模型中，只能分别通过网页服务器和网页对象与站点Cookie进行通信和操作。HTA作为完全受信任的应用程序运行，因此拥有更多的权限，如创建/编辑/删除文件与注册表项。因为它们在浏览器安全模式之外操作，所以HTA不能通过HTTP执行，必须下载（就像EXE文件）并在本地文件系统执行。
所见即所得编辑器
所见即所得编辑器使用图形用户界面（GUI）显示HTML文档，常常类似于文字处理器，所以用户可以设计一切。编者面对的是文档，而不是代码，所以作者并不需要太多的HTML知识。这种所见即所得的编辑模式一直受到诟病，主要因为它生成的代码质量不高；也有人主张将其改变至WYSIWYM模型（所见即所指）。
文同步本人掘金平台的原创翻译：https://juejin.cn/post/6844903817968893960
我们喜欢（使用）<div>标签。它们已经存在了几十年，这几十年来，当需要将一些内容包裹起来达到（添加）样式或者布局目的的时候，它们成为首选元素。查看线上站点时，看到像下面这些内容的情况依旧很常见：
<div class="container" id="header">
<div class="header header-main">Super duper best blog ever</div>
<div class="site-navigation">
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/archive">Archive</a>
</div>
</div>
<div class="container" id="main">
<div class="article-header-level-1">
Why you should buy more cheeses than you currently do
</div>
<div class="article-content">
<div class="article-section">
<div class="article-header-level-2">
Part 1: Variety is spicy
</div>
<!-- cheesy content -->
</div>
<div class="article-section">
<div class="article-header-level-2">
Part 2: Cows are great
</div>
<!-- more cheesy content -->
</div>
</div>
</div>
<div class="container" id="footer">
Contact us!
<div class="contact-info">
<p class="email">
<a href="mailto:us@example.com">us@example.com</a>
</p>
<div class="street-address">
<p>123 Main St., Suite 404</p>
<p>Yourtown, AK, 12345</p>
<p>United States of America</p>
</div>
</div>
</div>
复制代码Hoo，那有很多的div标签。但是，它有效。我的意思主要是，它具有你需要的结构。并且，我确定在你完成样式添加之后，它看起来会像你想要的那个样子。然而，它有些严重的问题：
HTML5并不新奇。这是轻描淡写；最初的工作草稿于2008年1月（11年前）发布，以征求公众意见，并于4年半前，2014年10月份成为一个全面W3C的推荐。所以，就像它已经存在了一段时间。
HTML5的主要进步之一是引入了一组标准化的语义元素。术语“语义”指的是单词或事物的含义，因此”语义元素“是用于以更有意义的方式标记文档结构的元素，这种方式可以清楚地表明它们的用途和它们在文件中服务的目的是什么。而且重要的是，由于它们是标准化的，定义文档的这些元素可以被每个人使用并理解，包括机器人。
我认为HTML5规范本身在<div>元素定义下的一个注释中很好地总结了这个问题：
注释： 强烈建议作者将div元素视为最后采取的元素，在没有其它元素适合的（情况下）。使用更合适的元素而不是div元素可以使读者更容易访问，并且更容易为作者提供可维护性。-- www.w3.org/TR/html5/gr…
我将语义块元素分为两类：主要结构和内容指标。这些不是标准的条款或者其它条款；我在这篇文章中做了一些（区分）。但我认为这种区分足够有用。♂️
有一个超级常见的模式，可在互联网上的网站，教程甚至CSS库中找到，并且有充分的理由。我们经常将最顶层的页面划分为三个区域：页眉、主页和页脚，然后根据需要将这些区域划分为多个区域。我在上面的例子中包含了这个来证明这点：
<div class="container" id="header">...</div>
<div class="container" id="main">
...
<div class="article-section">...</div>
...
</div>
<div class="container" id="footer">...</div>
复制代码我已经看过（并且使用过）这种模式很久了，以这种方式构造文档非常有意义，既可以读取HTML，又可以更加简单地在CSS中设置页面样式。页眉和页脚元素页可以使用PHP或Rails/ERB等语言中的部分模版来更易于使用，因为你可以在整个站点中包含常见的页眉和页脚部分：
<?php include 'header.php'; ?>
<div id="main">...</div>
<?php include 'header.php'; ?>
复制代码所以这就是事情：每个人都认为这是一个很好的模式。这包括WHATWG和W3C的人员，他们将模式标准化为HTML5中的四个新元素，名称非常清晰：<header>, <main>, <footer>和<section>。
<header> 和 <footer>元素基本上是双胞胎：它们在规范中的定义非常相似，并遵循相同的规则，关于它们被允许使用的位置，唯一区别在于它们的语义目的：页眉在事物的前面，页脚在事物的末尾。对于事物，我的意思不仅仅是页面的： 这对元素的设计用于文档的任何部分，代表一大块内容，具有明确的开头和结尾。这可以包括表格，文章，文章部分，社交媒体网站上的帖子，卡片等。
页眉和页脚在语义上接近sectioning root或sectioning content元素。像<body>, <blockquote>, <section>, <td>,<aside>等许多其它元素；如果你想了解完整的列表，就点击上面的链接。辅助技术可以使用这些元素和其它元素生成文档大纲，这可以帮助用户更轻松的访问它。在每个sectioning root/content中，你不应该使用超过一个的<header>或<footer>。（一个就好，不能两个相同）
作为最后说明，<header>经常作为其上下文保存标题元素（<h1>-<h6>）。这不是必须的，但可以帮助将其它相关元素与标题分组，比如链接，图片或子标题，并且可以维持一直的结构，即使标题是<header>中的唯一元素。
第三个主要区域元素--<main>很特别。规范中说明了关于<main>的两个非常重要的内容：
文档的主要内容区域包括文档的特定内容，且不包括在一组文档中重复的内容，例如站点导航链接，版本信息，站点的徽标，横幅和搜索表单（除非文档或应用的主功能是一种搜索形式）-- www.w3.org/TR/html5/gr…
所以，<main>是你放置好东西的区域，是页面的重要部分，特别是用户访问此页面的原因（或说目的），而不是您的站点。换句话来说，主要内容。
所有其它东西，徽标、搜索表单和导航栏等都可以在<body>中的<header>或<footer>中，但是在<main>之外。
文档中不能有多个可见的main元素。如果文档中存在多个main元素，则必须使用隐藏属性隐藏所有其它（main）实例。 -- www.w3.org/TR/html5/gr…
这很独特。和<header>和<footer>（以及其它块元素不同），<main>不能在任意切片内容的整个页面中使用；它应该只被使用一次。或者更确切地说，它可以在文档中多次被使用，但是一次只能看到一个<main>元素，所有其它的（
）必须被使用隐藏属性隐藏，如CSS中的display:none。如果您思考下，（你会明白）这在应用程序中预加载视图是种很有用的模式：创建一个新的<mian hidden>，获取用户可能接下来查看的一些内容（例如：系列文中的下一篇，下一张幻灯图放映等），然后，当用户点击链接/按钮加载该视图时，通过在两者上切换隐藏属性，将当前的<main>切换到预加载的（那个）。
在继续之前，我们暂停下并查看上面的示例。如果我们使用<header>，<main>和<footer>作为文章的主要结构，它的外观如下：
<header>
<h1>Super duper best blog ever</h1>
...
</header>
<main>
<h2>Why you should buy more cheeses than you currently do</h2>
...
</main>
<footer>
Contact us!
<div class="contact-info">this.is.us@example.com</div>
</footer>
复制代码那真的很棒！但是，还有很多工作要做。
因此，我们为页面提供了一个基本大纲：页眉，页脚和主要内容区域。现在是时候添加些美妙的内容了。
通常，你会希望将你的内容分解为多个部分，尤其是对像本文这样的大量文本内容，因为没人喜欢阅读这些难以理解的文本墙。
<section>派上用场了。这是在系列规则中最简单的一个：从结构上讲，它基本上只是一个具有特殊含义的<div>。一个<section>开始一个新的"sectioning content"区域，因此它可以有自己的<header>和<footer>。
那么，<section>和普通的旧<div>之间有什么区别，然后，你应该在什么时候使用它们呢？好吧，允许我再次引用规范：
笔记：
元素不是通用容器元素。当一个元素仅是用于样式目的或为脚本编写提供便利的时候，鼓励作者使用[div](https://www.w3.org/TR/html5/grouping-content.html#elementdef-div)元素。一般规则是元素仅在元素内容在文本[大纲](https://www.w3.org/TR/html5/sections.html#outline)中明确列出时候才适用。-- [https://www.w3.org/TR/html5/sections.html#the-section-element](https://www.w3.org/TR/html5/sections.html#the-section-element)
你知道，概述来说，HTML5规范实际上是可读的。它是那个比较可读的规范之一。每当我浏览它以获取快速答复时，我都不可避免地学到一些意想不到的和有用的东西，尤其是当我开始点击链接的时候。有时（你也）试试吧！
简而言之，如果要在目录中列出文档的一部分，请使用<section>。如果没有，请使用<div>或其它元素。
很好，我们已经得到了一个坚固的页面结构。我们已经明确标记了页面的主要内容区域，而不仅仅是单独调整<div>，我们已经调整出了页眉，页脚和章节。但是，肯定还有比我们的文档更多的语义。
让我们来谈谈HTML5中添加的一些元素，它们传达的内容语义而不是结构。
<article>元素用于表示完全独立的内容区域，这些内容可以从页面中提取出来并放入另一个内容中，并且仍然有意义。这可能是文字文章或博客，但也可用于社交媒体帖子，如推特或脸书的墙贴。
HTML5规范建议文章总有一个标题，标识它是什么，理想的情况下使用标题元素(<h1>-<h6>)。<article>也可以有<header>，<footer>和<section>元素，因此你可以使用它来嵌入一个完整的文档片段，其中包含其它页面中所需的所有结构。
从上面的方式返回到示例，我们使用<article>和我们讨论的其它一些元素来重写带class="article-*"的元素。
<article>
<header>
<h1>Why you should buy more cheeses than you currently do</h1>
</header>
<section>
<header>
<h2>Part 1: Variety is spicy</h2>
</header>
<!-- cheesy content -->
</section>
<section>
<header>
<h2>Part 2: Cows are great</h2>
</header>
<!-- more cheesy content -->
</section>
</article>
复制代码这不是比原来更具可读性吗？而且，不仅更容易阅读，它对辅助技术更有用；机器人不能总是弄清楚你的特定类名模式，但是它们可以遵循这种结构。
这个元素比其它元素更有名。<nav>旨在清楚地识别页面上的主要导航块，帮助用户围绕站点其余部分找到路径的链接组（例如站点地图或标题中的链接列表）或当前页面（例如目录）。
在我们的示例顶部，让我们将<nav>应用于标题中的那组链接。
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/archive">Archive</a>
</nav>
复制代码根本不改变结构，但你知道它是什么，一目了然而不需要在<div>上读物和处理类名来找到它，更重要的是机器人也可以找到它。
我们要讨论的最后一个元素是<address>。这个元素旨在调出联系信息，它通常在主页<footer>中用于标记企业的邮寄地址，电话号码，客户服务邮箱地址等等。
有趣的是，如何在<address>元素中标记内容的规则是开放的。规范提到有几个其它规范可以解决这个问题，并且提供这种级别的粒度可能超出了HTML本身的范围。
常见的解决方案是RDFa，也是W3C规范，它使用标签上的属性来标记数据的不同组件。下面是我们示例中的页脚在标记<address>元素和RDFa时可能看起来的样子：
<footer>
<section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
<h2>Contact us!</h2>
<address property="email">
<a href="mailto:us@example.com">us@example.com</a>
</address>
<address property="address" typeof="PostalAddress">
<p property="streetAddress">123 Main St., Suite 404</p>
<p>
<span property="addressLocality">Yourtown</span>,
<span property="addressRegion">AK</span>,
<span property="postalCode">12345</span>
</p>
<p property="addressCountry">United States of America</p>
</address>
</section>
</footer>
复制代码无疑，RDFa有点冗长，但它对于标记数据非常方便。如果你有兴趣了解有关RDFa的更多信息，请点击以下链接：
好了，我们已经介绍了很多，我们已经看到很多零零散散的元素应用到我们的例子中。那么，让我们把它们放在一起看看它的样子。
<header>
<h1>Super duper best blog ever</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/archive">Archive</a>
</nav>
</header>
<main>
<article>
<header>
<h1>Why you should buy more cheeses than you currently do</h1>
</header>
<section>
<header>
<h2>Part 1: Variety is spicy</h2>
</header>
<!-- cheesy content -->
</section>
<section>
<header>
<h2>Part 2: Cows are great</h2>
</header>
<!-- more cheesy content -->
</section>
</article>
</main>
<footer>
<section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
<h2>Contact us!</h2>
<address property="email">
<a href="mailto:us@example.com">us@example.com</a>
</address>
<address property="address" typeof="PostalAddress">
<p property="streetAddress">123 Main St., Suite 404</p>
<p>
<span property="addressLocality">Yourtown</span>,
<span property="addressRegion">AK</span>,
<span property="postalCode">12345</span>
</p>
<p property="addressCountry">United States of America</p>
</address>
</section>
</footer>
复制代码如果你问我（怎么看改造后的内容？），那这比原始例子的可读性高100倍，而且对于搜索引擎优化和可访问性目的而言，其效率将提高100倍。
这些绝不是HTML中唯一的语义元素。有很多其它元素可以帮助你标记和构建你的文本内容，嵌入媒体资源等等。如果你喜欢这个并且希望深入挖掘，这里有一些（标签）可以查看下。你可能认识一些：
这只是一个开始！就像我说的，当你开始阅读HTML规范时，很难停下来。它是种非常丰富的语言，我认为人们经常会低估这种语言。
lt;h2 id="title1">开发工具(工欲善其事必先利其器)</h2>
为了让大家更快的融入到编程的世界中, 不被繁琐的英语单词所困扰, 不用每天编写很多没有意义的重复代码, 提升大家的开发效率今后的课程中我们统一采用最高级高发工具来编写网页
<h3 id="title2">常见的前端开发工具</h3>
记事本: 提示功能较差
editplus/nodepad++: 提示功能较差
Dreamwaver: 更偏向设计
Sublime: 轻量级,自带功能不太全, 但是插件十分丰富
WebStorm: 重量级, 自带功能全面
其它ide(zend studio、netbean等)
为了让大家更快的融入到编程的世界中, 不被繁琐的英语单词所困扰, 今后的课程中我们统一采用最牛逼最高级的高发工具WebStorm
<h3 id="title3">WebStorm安装和使用</h3>
安装软件
1.png
2.png
3.png
4.jpg
5.jpg
6.png
7.jpg
8.png
破解软件
9.png
10.png
11.jpg
12.jpg
13.png
14.png
汉化软件
15.png
16.jpg
设置模版
创建文件
17.png
18.jpg
关注微信订阅号：网页设计轻松学 有更多内容
19.png
WebStorm常见快捷键
如何在WebStorm中利用快捷键创建一个新的.html的文件
同时按下键盘上的Ctrl + Alt + Insert
如何在WebStorm中让光标移动到当前行的末尾
按下键盘上的End键即可
如何在WebStorm中让光标移动到当前行的最前面
按下键盘上的Home键即可
如何在WebStorm中让光标在多行中闪烁
按住键盘上的Alt键不放, 然后再按住鼠标的左键不放, 然后再拖动鼠标即可
如何在WebStorm中快速的复制光标所在的那一行
按下键盘上的Ctrl + D
如何在WebStorm中快速的删除光标所在的那一行
按下键盘上的Ctrl + X
如何在WebStorm中让标签包裹一段内容, 也就是自动在一段内容前后加上标签
按下键盘上的Ctrl + Alt + T, 然后按下回车, 然后输入对应的标签即可
<h2 id="title4">基础标签学习</h2>
<h3 id="title5">H系列标签(Header 1~Header 6)</h3>
作用:
用于给文本添加标题语义
格式:
<h1>xxxxxx</h1>
注意点:
H标签是用来给文本添加标题语义的, 而不是用来修改文本的样式的
H标签一共有6个, 从H1~H6, 最多就只能到6, 超过6则无效
被H系列标签包裹的内容会独占一行
在H系列的标签中, H1最大, H6最小
在企业开发中, 一定要慎用H系列的标签, 特别是H1标签. 在企业开发中一般情况下一个界面中只能出现一个H1标签(和SEO有关)
<h3 id="title6">P标签(Paragraph)</h3>
作用:
告诉浏览器哪些文字是一个段落
格式:
<p>xxxxxxxx</p>
注意点:
在浏览器中会单独占一行
<h3 id="title7">Hr标签(Horizontal Rule)</h3>
作用:
在浏览器上显示一条分割线
格式:
<hr />
注意点:
在浏览器中会单独占一行
通过我的观察发现HR标签可以写/也可以不写/, 如果不写/那么就是按照HTML的规范来编写, 如果写上/那么就是按照XHTML的规范来编写.但是在HTML5中, 由于HTML5兼容HTML和XHTML所有写不写都可以.那么以后我们在做前端开发时到底写还是不写呢? 按照高级开发工具的提示来写即可.
由于hr标签是用来修改样式的, 所以不推荐使用. 今后开发中添加水平线一般都使用CSS盒子来做
<h2 id="title8">HTML注释(Annotation)</h2>
什么是注释?
注释是在所有计算机语言中都非常重要的一个概念，从字面上看，就是注解、解释的意思
注释可以用来解释某一段程序或者某一行代码是什么意思，方便直接或程序员之间的交流
为什么要使用注释?
适当的注释，能够让我们的程序更加可读，所以用中文提示自己，这里的程序是干什么的
注释格式
<!--被注释的内容-->
注意点:
被注释的内容不会在浏览器中显示, 注释是写给我们自己看的
注释不能嵌套使用
<!--<!--被注释的内容-->-->
快捷键: ctrl + /
<h3 id="title9">img标签(image)</h3>
作用: 在网页上插入一张图片
格式: 
标签的属性
写在标签中K="V"这种格式的文本我们称之为标签属性
| 属性名称 | 作用 |
|---|---|
| src(source) | 告诉浏览器需要插入的图片路径, 以便于浏览器到该路径下找到需要插入的图片 |
| alt(alternate) | 规定图像的替代文本, 只有在src指定的路径下找不到图片,才会显示alt指定的文本 |
| title | 悬停文本(介绍这张图片, 只有在鼠标移动到图片上时才会显示) |
| height | 设置图片显示的高度 |
| width | 设置图片显示的宽度 |
注意点:
img标签添加的图片默认不是占一整行空间
如果想让图片等比拉伸, 只写高度或者宽度即可
关注微信订阅号：网页设计轻松学 有更多内容
<h3 id="title10">br标签(Break)</h3>
作用:
让内容换行
格式:
<br/>
注意点:
br的意思是不另起一个段落进行换行, 而网页中99.99%需要换行时都是因为另起了一个段落, 所以应该用p来做
<h3 id="title11">相对路径和绝对路径</h3>
图片路径分为两种, 一种是绝对路径, 一种是相对路径, 我们重点学习相对路径, 因为在企业级开发中没有人使用绝对路径
绝对路径
从电脑的具体盘符开始寻找我们需要的资源
以上代码表示在F盘下查找lnj文件夹, 然后在lnj文件夹下查找girl.png图片
相对路径
一个文件相对于另外一个文件的位置寻找我们需要的资源
假设html文件和girl.png都在lnj文件夹下, 以上代码表示在lnj文件夹下查找girl.png图片
为什么没人使用绝对路径?
可以移植性太差.
什么是可移植性?
可以简单的理解为把写到的代码拷贝到另外一台电脑上是否能够正常运行
为什么绝对路径可移植性差?
假如我编写的html文件放在我电脑的 F:/lnj 目录下, html文件中用到的图片放在F:/lnj/images目录下, 我给src指定的绝对路为F:/lnj/images/girl.png. 那么将来我将整个lnj文件夹拷贝给你, 如果你将lnj文件夹放在非F盘下, 那么将无法显示图片
例如你存放在C盘根目录, 那么图片的绝对路径会变为C:/lnj/images/girl.png, 而src会去F盘找, 所以不会显示
你只有将lnj文件夹存放在F盘根目录下时图片才会正常运行, 这就叫做可移植性不好
Q群；162542073
为什么相对路径可移植性好?
同上, 如果src指定的路径为images/girl.png, 那么无论你拷贝到那个盘, 哪个文件夹. 系统都只会在当前文件夹中的images下去查找图片, 不会受到盘符和存储位置的影响, 只要保证页面和图片位置的相对关系不变就不会影响到图片的显示
相对路径几种查找方式
../代表访问上级目录
假设a文件夹下面有b文件夹, 图片存放在a文件夹中, html文件存放在b文件夹中, 那么路径为../girl.png
因为html文件在b文件夹中, 所以路径是相对于b文件夹的, 所以../代表访问b文件夹的上一级目录, b文件夹的上一级目录是a文件夹, 所以../girl.png就代表在a文件夹查找girl.png
直接编写, 例如abc/girl.png
加上./ 编写, 例如./abc/girl.png
相对当前目录有几个文件夹,就在后面依次补全几个文件夹名称即可, 例如 abc/bbb/ccc/ddd/girl.png或./abc/bbb/ccc/ddd/girl.png
直接编写, 例如: girl.png
加上./ 编写, 例如./girl.png
./代表当前目录, ./girl.png代表在当前目录下查找
同级
下级
上级
注意事项:
相对路径不会出现这种格式aaa/../bbb/girl.png
虽然可以显示, 但是企业开发中千万不要这么写
<h3 id="title12">a标签(anchor)</h3>
格式: <a href="http://www.it666.com">江哥博客</a>
作用: 用于从一个页面链接到另一个页面
注意事项:
在a标签之间一定要写上文字, 如果没有, 那么在页面上找不到这个标签
a标签也叫做超级链接或超链接
a标签的属性
| 属性名称 | 作用 |
|---|---|
| href(hypertext reference) | 指定跳转的目标地址 |
| target | 告诉浏览器是否保留原始界面, _blank保留, _self不保留 |
| title | 悬停文本(介绍这个链接, 只有在鼠标移动到超链接上时才会显示) |
base标签和a标签结合使用
如果每个a标签都想在新页面中打开,那么逐个设置a标签的target属性比较麻烦, 这时我们可以使用base和a标签结合的方式,一次性设置有a标签都在新页面中打开
格式: <base target="_blank" />
注意事项:
base必须嵌套在head标签里面
如果标签上指定了target,base中也指定了target,那么会按照标签上指定的来执行
a标签其它用法
例如<a href="girl.zip">下载福利资源<a/>
格式: <a href="01-锚点链接.html#location">跳转到指定位置</a>
只需要在01-锚点链接.html页面添加一个id位置即可
2.1.格式<a href="#location">跳转到指定位置</a>
2.2.在页面的指定位置给任意标签添加一个id属性
例如 <p id="location">这个是目标</p>
格式<a href="#">江哥博客</a>
格式<a href="javascript：">江哥博客</a>
假链接(本质是跳转到当前页面)
跳转到当前页面指定位置(锚点链接)
跳转到指定页面的指定位置
下载(极力不推荐使用)
*请认真填写需求信息，我们会在24小时内与您取得联系。
