元素
引子
上一个篇章中提到了HTML的概念，知道HTML是标记语言。这一章我们来深入了解标记语言的概念。
我们把一个网站比成做一本书,每一个网页都是书的一页，书的每一页都是由一个个文字写出来的，而元素就是网页中的文字。
什么是元素
元素指的是从开始标签到结束标签的所有内容。如下图;
元素包含的每个部分:
- 开始标签: <p ... >
- 属性:
- 属性名: class
- 属性值: foo
- 内容: wware你好
- 结束标签:</p>
就像上面看到的，包含了这样几部分的一个整体就是一个元素。
元素中的标签是用来控制内容的风格等属性的，例如上面这个例子<p>...</p>表示一个段落，此外还有很多，比如：
表示粗体的<strong>...</strong>
表示小号字体的<small>...</small>
表示一个表格的<table>...</table>
...
元素开始标签中的属性，为元素提供附件信息。可以控制内容的风格，也可以给元素添加一个标识等。其实，元素样式绝大部分是依靠属性来控制的。例如上面这个例子class="foo"表示给元素添加一个名为foo的class，此外可以有，style="color:red"表示将该元素的内容部分的文字颜色设置为红色。
现在有多种多样的元素，方便你更灵活的表现自己的页面。大多数元素被定义为段元素（块级元素）或字元素（内联元素）。段元素在浏览器显示时，通常会以新行来开始（和结束），例子：<div>、<h1>、<p>、<ul>、<table>等。字元素在显示时通常不会以新行开始，例子：<b>、<td>、<a>、<img>、<big>等。
元素的树形结构
我们知道，书是由一个一个的文字累计起来的，元素是网页的文字，那么网页也是由一个一个的元素组成的
如下图，我们在浏览器中看到了这样的一个页面：
这样的一个简单的页面，其实就是由下面这样三个元素写出来的：
正如上图，绿色部分代表的是元素的标签，分为开始标签与结束标签。蓝色部分代表了属性名，而红色部分代表了属性值。为了更好的让您理解，这里的颜色与wide源码中的各部分的颜色是保持一致的
元素并不仅仅只能向上面那样并列的组合，元素中是可以继续包含元素的。这就是元素的树状结构，也就是元素DOM树。如下图：
从图中可以清晰的看出：
在一个div元素中，我们继续写入了一个p元素，而在p元素中，继续写入了span元素，最终，我们在span元素中再次写入了一个span元素，这就构成了一个树形结构。这时元素就有了父元素与子元素之称，如上图例子：若span元素称为子元素，那么包含了span元素的p元素就是它的父元素。
父元素与子元素是相对的，并不仅有一个父元素或子元素。例如上图例子：div元素为p元素的父元素，同时也是span元素的父元素，span元素是p元素的子元素，同时也是div元素的子元素
这里需要注意的是：
- 父元素中设置的样式会影响子元素，只有子元素自己设置了样式的情况下，才会覆盖父元素对其样式的影响，因此想要只改变子元素的样式，需要给子元素单独设置样式。(想了解样式请看下面的章节)
- 在使用各种方式选择元素时，如果父元素被选中，那么其子元素也会被选中
与元素是否包含子元素无关，开始标签 和 与之对应的结束标签 加上中间的内容，都称为一个元素，如上面的例子：div元素是一个元素，p元素是一个元素，span元素也是一个元素
元素来源
对于元素怎么来，我们列举了如下来源：
- 通过复制粘贴获得
- 在word文档中复制获得
- 通过格式刷获得
- 通过在页面编辑界面左侧的菜单栏拖拽获得
- 通过查找模板，应用模板获得
- 自己书写获得
观测元素
对于元素怎么观测，有很多种方法，其中常用的有几种：
-可以在wide图形编辑界面，使用显示区块与区块编辑模式来查看元素组成，如图：
-可以在wide图形编辑界面，使用下方蓝色条查看元素组成并且选择元素，如图：
提示：当使用蓝色条选中一个元素时，这个元素的所有子元素都会被选中
-在wide图形编辑界面，切换到源码查看
-可以使用chrome浏览器，通过快捷键F12查看，如图：
-在chrome浏览器中，在想要查看的内容上右键，点击审查查看对应元素
元素样式
写书用到的文字，是有很多的字体，很多的流派的，同样的，做网页用到的元素，也是有很多样式。不论是写书还是做网页，都是一种艺术创作，流派众多，每一种都有自己的特色。通过上面的了解，我们知道，不论是元素的标签还是属性，都可以控制元素的样式，让你做的页面更丰富多彩。想要详细了解样式，请阅读下面的样式章节。
元素模型
在上文什么是元素中提及到了元素属性。id、name、style等等就是元素的属性。元素模型中同样包含元素属性。其包括特殊元素标识（data-wwclass）、普通属性（data-）、控制+数据属性（data--）、数据属性（data-x-）。如同步数据元素，插入后的代码为：
<div data-source-ele="li" data-vm-var="a" data-wwclass="fetchdata" id="aa">获取数据基础元素, 请右键配置详细信息. </div>其中，data-wwclass="fetchdata"是该元素的特殊元素标识，"data-source-ele""data-vm-var"都是同步数据元素的普通属性。如有需要可以查看同步数据元素页面。
章节总结
通过上面的了解，我们可以意识到：如果将网站比作一本书，那么元素就是网页的文字。做一个网页，就是不停地在这个网页上添加元素。其实只是简单的添加有时并不能满足要求，就像一本书需要排版使得书的内容更加醒目，页面也是需要排版的，而页面的排版，就是布局。想要详细了解布局，请阅读下面的布局章节。