C++、HTML+CSS
HTML+CSS：排版上的标签使用（来源于imooc（鞠躬） ）
注*：当测试代码时，若中文显示为乱码则将<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >中最后一个分号后面的内容改为：charset=gb2312 意思为，字符应识别为中文。
字符集：utf-8,unicode(每个符号都用16bits存储),gbk,gb2312(这2个好像特别为了支持中文,似乎有一个支持繁体)。
一般包含中文字符的时候用gb2312，用到一些特殊字符，例如西欧字符的时候应该用utf-8，以防出现乱码。不过utf-8某些时候不好控制，控制的不好容易出现乱码，例如在将数据写入数据库时，用utf-8是比较容易出现乱码情况的。
GB2312是简体中文编码，当文章/网页中包含繁体中文、日文、韩文时，这些内容可能无法被正确编码。 (此处想到之前做过的测试，将gb更换为大写的GB，简体中文能够正常显示，应该测试繁体中文<--测试后支持)
UTF-8是UTF-8编码是一种目前广泛应用于网页的编码，它其实是一种Unicode编码，即致力于把全球所有语言纳入一个统一的编码。
一.在网页上显示一系列以标题来吸引网民的新闻，在网页上显示是可以没有顺序的，故而在制作网页时，可以利用：
这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。（ul-unordered line 无序的行列）
语法：
ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点，如下图所示：
二.当一些销售网站，例如当当网，会需要显示出图书的销售排行，则可以利用：
<ol>标签来制作有序列表来展示。：（ol-ordered
line 有序的行列）
语法：
<ol> <li>信息</li> <li>信息</li> ...... </ol>
<ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始，如下图所示：
三. 有一些独立逻辑部分（它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分）可以划分出来。则可以使用div标签来进行排版：
语法：(div标签就是一个框，将里面的东西框起来，然后通过css来使这个框按照所需要的样式显示出来)(来源与同一课程同学的笔记)
<div>…</div>
四.（三的*）可以为独立的逻辑部分设置一个名称，用id属性来为<div>提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。给div命名，可以使逻辑更加清晰：
语法：
<div id="版块名称">…</div>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>div标签</title>
</head>
<body>
<div id="hotList">
<h2>热门课程排行榜</h2>
<ol>
<li>前端开发面试心法 </li>
<li>零基础学习html</li>
<li>javascript全攻略</li>
</ol>
</div>
<div id="learningInstructed">
<h2>web前端开发导学课程</h2>
<ul>
<li>网页专业名词大扫盲 </li>
<li>网站职位定位指南</li>
<li>为您解密Yahoo网站制作流程</li>
</ul>
</div>
</body>
</html>
网页测试效果为：（在为div命名前后，网页的效果并未改变，说明这是主要是为了开发人员能看到这个逻辑部分就一目了然。）
五.有时候我们需要在网页上展示一些数据，如某公司想在网页上展示公司的库存清单，
或者是班级中学生对应的学号，姓名，以及对应的成绩。可以用table标签进行制作表格：
创建表格的四个元素：
table、tbody、tr、th、td
1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
2、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）
3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。（tr-table row 表格行）
4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。（table
document 表格单元格）
5、<th>…</th>：表格的头部的一个单元格，表格表头。(table head 表格表头)
6、表格中列的个数，取决于一行中数据单元格的个数。
代码示例：<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>认识table表标签</title>
</head>
<body>
<table>
<tbody>
<tr>
<th>班级</th>
<th>学生数</th>
<th>平均成绩</th>
</tr>
<tr>
<td>一班</td>
<td>30</td>
<td>89</td>
</tr>
<tr>
<td>二班</td>
<td>35</td>
<td>85</td>
</tr>
<tr>
<td>三班</td>
<td>32</td>
<td>80</td>
</tr>
</tbody>
</table>
</body>
</html>
网页的测试效果如下：
六.在五当中利用table标签实现的表格并没有边框，可以联想到，既然在此语法初始使用时没有自动为其附上边框，则说明，需要使用CSS样式辅助添加边框：
Table 表格在没有添加 css 样式之前，是没有边框的。这样不便于我们后期合并单元格知识点的讲解，所以在这一节中我们为表格添加一些样式，为它添加边框。
在右侧代码编辑器中添加如下代码：
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
上述代码是用 css 样式代码（后面章节会详细讲解），为th，td单元格添加粗细为一个像素的黑色边框。
结果窗口显示出结果样式：
七.如上图的标签，若单个来看还好，如果分散在各个表格中，便会不清晰，此时表格还是需要添加一些标签进行优化，可以利用caption标签添加标题和摘要。
摘要
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法：<table
summary="表格简介文本">
标题
用以描述表格内容，标题的显示位置：表格上方。
语法：
<table>
<caption>标题文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
…
</table>
代码示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>认识table表标签</title>
<style type="text/css">
table tr td,th{
border:1px solid #000;
}
</style>
</head>
<body>
<table summary="本表格记录2012年到2013年库存记录，记录包括U盘和耳机库存量">
<caption>2012年到2013年3年库存记录</caption>
<tr>
<th>产品名称 </th>
<th>品牌 </th>
<th>库存量（个） </th>
<th>入库时间 </th>
</tr>
<tr>
<td>耳机 </td>
<td>联想 </td>
<td>500</td>
<td>2013-1-2</td>
</tr>
<tr>
<td>U盘 </td>
<td>金士顿 </td>
<td>120</td>
<td>2013-8-10</td>
</tr>
<tr>
<td>U盘 </td>
<td>爱国者 </td>
<td>133</td>
<td>2013-3-25</td>
</tr>
</table>
</body>
</html>
网页效果如下：