昨天简单了解了HTML、XHTML和HTML5的概念，顺带说了下CSS和JavaScript
今天会更深入的学习HTML的几种常用的元素标签，以及探讨前端设计的大背景—WEB语义化。
首先来介绍一下元素的概念，以及它的语法和用法。
HTML元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
示例如下：
| 开始标签 | 元素内容 | 结束标签 |
|---|---|---|
| <p> | This is a paragraph | </p> |
| <a href="default.htm" > | This is a link | </a> |
注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。
HTML元素语法
- HTML 元素以开始标签起始以结束标签终止。
- 元素的内容是开始标签与结束标签之间的内容。
- 某些 HTML 元素具有空内容但需要在开始标签中进行关闭。
- 大多数 HTML 元素可拥有属性
例：<br />就是在开始标签中关闭的元素
嵌套的 HTML 元素
大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
HTML 文档由嵌套的 HTML 元素构成。
HTML 文档实例：
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
上面的例子包含三个 HTML 元素。
下面简要介绍几种常用的元素标签
<p>
<p>This is my first paragraph.</p>
这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。
元素内容是：This is my first paragraph。
<body>
<body>
<p>This is my first paragraph.</p>
</body>
<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>。
元素内容是另一个 HTML 元素（p 元素）。
<html>
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html>，以及一个结束标签 </html>。
元素内容是另一个 HTML 元素（body 元素）。
注释：
1.HTML虽然可以识别没有结束标签的元素，但是忘记使用结束标签也可能会产生不可预料的结果或错误。
2.TML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。但是W3School 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。
HTML 标题
标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
<h1> 定义最大的标题。<h6> 定义最小的标题。
实例
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p>
</body>
</html>
结果如图：
image
更多标签用法参考W3school
HTML 属性
可以为HTML 标签添加属性。
属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。
实例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
</head>
<body bgcolor="yellow">
<h2>请看: 改变了颜色的背景。</h2>
</body>
</html>
效果如下：
image
注释：
1.属性和属性值对大小写不敏感。不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。而新版本的 (X)HTML 要求使用小写属性。
2.属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='Bill "HelloWorld" Gates'
HTML 属性参考手册
web语义化
简单来说web语义化就是让机器可以读懂web里的内容。
历史背景
在 Web 被刚刚设计出来的时候，Tim Berners-Lee 可能不会想到它现在会达到的规模以及深入到我们生活的那么多方面。也许起初的想法很简单：用来发布 Web 内容和资源的索引，方便人们查看。但是随着 Web 规模的不断扩大，信息量之大已经不在人肉处理的范围之内了。这个时候人们开始用机器来处理 Web 上发布的各种内容，搜索引擎就诞生了。再后来，人们又设计了各种智能程序来对索引好的内容作各种处理和挖掘。所以让机器能够更好地读懂 Web 上发布的各种内容就变得越来越重要。
两种实现方法
HTML 在刚开始设计出来的时候就是带有一定的「语义」的，包括段落、表格、图片、标题等等，但这些更多地只是方便浏览器等 UA 对它们作合适的处理。但逐渐地，机器也要借助 HTML 提供的语义以及自然语言处理的手段来「读懂」它们从网上获取的 HTML 文档，但它们无法读懂例如「红色的文字」或者是深度嵌套的表格布局中内容的含义，因为太多已有的内容都是专门为了可视化的浏览器设计的。面对这种情况，出现了两种观点：
- 我们可以让机器的理解能力越来越接近人类，人能看懂、听懂的东西，机器也能理解；
- 我们应该在发布内容的时候，就用机器可读的、被广泛认可的语义信息来描述内容，来降低机器处理 Web 内容的难度（HTML 本身就已经是朝这个方向迈出的一小步了）。
image
图中的意思是说，内容的语义表达能力和 AI 的智能程度决定了机器分析处理 Web 内容能力的高低。
上面观点 1 的方向是朝着人类水平的人工智能努力，而观点 2 的方向正是万维网创始人 Tim Berners-Lee 爵士提出的美好愿景：语义网。语义网简单来说就是让一切内容和包括对关系的描述都成为 Web 上的资源，都可以由唯一的 URI 定义，语义明确、机器可读。显然，两条路都的终极目标都很遥远，第一条路技术上难以实现，而第二条路实施起来障碍太多。我认为我们当前能够看得见摸得着的 Web 语义化，其实就是在往第二条路的方向上，迈出的一小步，即对已经有的被广泛认可的 HTML 标准做改进。
我们刚开始意识到，我们必须回归内容本身，将内容本身的语义合理地表述出来，再为不同的用户代理设计不同的样式描述，也就是我们说的内容与样式分离。
这样我们在提供内容的时候，首先要做的就是将内容本身进行合理的描述，暂时不用考虑它的最终呈现会是什么样子。
注释 ：内容转自知乎-顾轶灵：如何理解 Web 语义化？
网友评论