3-1 使用ul 添加新闻信息列表
ul-li是没有前后顺序的信息列表。
语法：
<ul> ?<li>信息</li> ?<li>信息</li> ??......</ul>
举例：
<ul> ?<li>精彩少年</li> ?<li>美丽突然出现</li> ?<li>触动心灵的旋律</li></ul>
ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点.
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title> p标签</title> 6 </head> 7 <body> 8 <ul> 9 <li>我的第一个列表介绍信息</li>10 </ul>11 </body>12 </html>
3-2 使用ol，添加图书销售排行榜
如果想在网页中展示有前后顺序的信息列表，怎么办呢？如，当当网上的书籍热卖排行榜，如下图所示。这类信息展示就可以使用<ol>标签来制作有序列表来展示。
语法：
<ol> ??<li>信息</li> ??<li>信息</li> ??......</ol>
举例：
下面是一个热点课程下载排行榜：
<ol> ??<li>前端开发面试心法 </li> ??<li>零基础学习html</li> ??<li>JavaScript全攻略</li></ol>
<ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始，如下图所示：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title> p标签</title> 6 </head> 7 <body> 8 <ol> 9 ????<li>我的第一个列表信息。</li>10 ????<li>我的第一个列表信息。</li>11 </ol>12 </body>13 </html>
3-3 div 排版的作用
在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。
语法：
<div>…</div>
确定逻辑部分：
什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。如下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可以使用<div>标签作为容器。
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>div标签</title> 6 </head> 7 <body> 8 ????<h2>热门课程排行榜</h2> 9 ????<ol>10 ????????<li>前端开发面试心法 </li>11 ????????<li>零基础学习html</li>12 ????????<li>javascript全攻略</li>13 ????</ol>14 ????<h2>最新课程排行</h2>15 ????<ol>16 ????????<li>版本管理工具介绍—Git篇 </li>17 ????????<li>Canvas绘图详解</li>18 ????????<li>QQ5.0侧滑菜单</li>19 ????</ol>20 </body>21 </html>
3-4 div命名 逻辑更清晰
我们把一些标签放进<div>里，划分出一个独立的逻辑部分。为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为<div>提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。
如下两图进行比较，如果设计师把两个图给你，哪个图你看上去能更快的理解呢？是不是右边的那幅图呢。
语法：
<div id="版块名称">…</div>
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>div标签</title> 6 </head> 7 <body> 8 <div id="hotList"> 9 ???<h2>热门课程排行榜</h2>10 ????<ol>11 ???????<li>前端开发面试心法 </li>12 ??????<li>零基础学习html</li>13 ???????<li>javascript全攻略</li>14 ????</ol>15 </div>16 <div id="learningInstructed">17 ????<h2>web前端开发导学课程</h2>18 ????<ul>19 ???????<li>网页专业名词大扫盲 </li>20 ???????<li>网站职位定位指南</li>21 ???????<li>为您解密Yahoo网站制作流程</li>22 ????</ul>23 </div>24 </body>25 </html>
3-5 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 表格就有几行。
4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
5、<th>…</th>：表格的头部的一个单元格，表格表头。
6、表格中列的个数，取决于一行中数据单元格的个数。
上述代码在浏览器中显示的默认的样式为：
总结：
1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的
2、表头，也就是th标签中的文本默认为粗体并且居中显示
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>认识table表标签</title> 6 </head> 7 <body> 8 <table> 9 ??<tbody>10 ????<tr>11 ??????<th>班级</th>12 ??????<th>学生数</th>13 ??????<th>平均成绩</th>14 ????</tr>15 ????<tr>16 ??????<td>一班</td>17 ??????<td>30</td>18 ??????<td>89</td>19 ????</tr>20 ????<tr>21 ??????<td>二班</td>22 ??????<td>35</td>23 ??????<td>85</td>24 ????</tr>25 26 27 28 29 30 ??</tbody>31 </table>32 </body>33 </html>
3-6 css样式 为表格增加边框
Table 表格在没有添加 css 样式之前，是没有边框的。这样不便于我们后期合并单元格知识点的讲解，所以在这一节中我们为表格添加一些样式，为它添加边框。
在右侧代码编辑器中添加如下代码：
<style type="text/css">table tr td,th{border:1px solid #000;}</style>上述代码是用 css 样式代码（后面章节会详细讲解），为th，td单元格添加粗细为一个像素的黑色边框。
结果窗口显示出结果样式：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>为表格添加边框</title> 6 <style type="text/css"> 7 table tr td,th{border:1px solid #000;} 8 </style> 9 </head>10 11 <body>12 <table summary="">13 ??<tr>14 ????<th>班级</th>15 ????<th>学生数</th>16 ????<th>平均成绩</th>17 ??</tr>18 ??<tr>19 ????<td>一班</td>20 ????<td>30</td>21 ????<td>89</td>22 ??</tr>23 ??<tr>24 ????<td>二班</td>25 ????<td>35</td>26 ????<td>85</td>27 ??</tr>28 ??<tr>29 ????<td>三班</td>30 ????<td>32</td>31 ????<td>80</td>32 ??</tr>33 </table>34 35 </body>36 </html>表格还是需要添加一些标签进行优化，可以添加标题和摘要。代码如下：
摘要
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法：<table summary="表格简介文本">
标题
用以描述表格内容，标题的显示位置：表格上方。
语法：
<table> ???<caption>标题文本</caption> ???<tr> ???????<td>…</td> ???????<td>…</td> ???????… ???</tr>…</table>
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>认识table表标签</title> 6 <style type="text/css"> 7 table tr td,th{ 8 ????border:1px solid #000; 9 }10 </style>11 </head>12 <body>13 <table summary="本表格记录2012年到2013年库存记录，记录包括U盘和耳机库存量">14 ????<caption>2012年到2013年库存记录</caption> ?15 ??<tr>16 ????<th>产品名称 </th>17 ????<th>品牌 </th>18 ????<th>库存量（个） </th>19 ????<th>入库时间 </th>20 ??</tr>21 ??<tr>22 ????<td>耳机 </td>23 ????<td>联想 </td>24 ????<td>500</td>25 ????<td>2013-1-2</td>26 ??</tr>27 ??<tr>28 ????<td>U盘 </td>29 ????<td>金士顿 </td>30 ????<td>120</td>31 ????<td>2013-8-10</td>32 ??</tr>33 ??<tr>34 ????<td>U盘 </td>35 ????<td>爱国者 </td>36 ????<td>133</td>37 ????<td>2013-3-25</td>38 ??</tr>39 </table>40 </body>41 </html>HTML标签 随笔2
原文地址：https://www.cnblogs.com/chitangyuanlai/p/9736060.html