HTML标签二
标签作用（二）
20181115
一、<ur><li>标签
该标签主要是用来完成信息列表、新闻列表、图片列表等。ul-li是没有前后顺序的信息列表。ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点，如下图所示：例如：
<ul>
<li>精彩少年</li>
<li>美丽突然出现</li>
<li>触动心灵的旋律</li>
</ul>
显示结果为：
l 精彩少年
l 美丽突然出现
l 触动心灵的旋律
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> p标签</title>
</head>
<body>
<ul>
<li>我的第一个列表信息</li>
</ul>
</body>
</html>
二、<ol><li>标签
该标签主要是用来展示有排序的列表，例如添加图书销售排行榜等。在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始，如下图所示：
<ol>
<li>前端开发面试心法 </li>
<li>零基础学习html</li>
<li>JavaScript全攻略</li>
</ol>
显示结果：
1.前端开发面试心得
2.零基础学习html
3.JavaScript全攻略
三、<div>容器标签
在网页制作的过程中可以把一些独立的逻辑部分划分出来，放在一个div标签中，该标签就相当于一个容器。逻辑部分指的是页面上相互关联的部分，例如网页中独立的栏目板块等。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
div.hot{font-size:13px;float:left;padding-right:6px;border-right:2px solid blue;}
div.new{font-size:13px;float:right;}
</style>
<title>div标签</title>
</head>
<body>
<div>
<div class="hot">
<h2>热门课程排行榜</h2>
<ol>
<li>前端开发面试心法 </li>
<li>零基础学习html</li>
<li>javascript全攻略</li>
</ol>
</div>
<div class="new">
<h2>最新课程排行</h2>
<ol>
<li>版本管理工具介绍—Git篇 </li>
<li>Canvas绘图详解</li>
<li>QQ5.0侧滑菜单</li>
</ol>
</div>
</div>
</body>
</html>
四、<id>属性
为了使逻辑更加清晰，可以为独立的逻辑部分设置一个名称，用id属性来为<div>提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。<div id="版块名称">…</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表格就有几行。
4、<td>…</td>：列标签。表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
5、<th>…</th>：表格的头部的一个单元格，表格表头，就是指第一行的数据；浏览器中字体样式默认为黑体加粗。
6、表格中列的个数，取决于一行中数据单元格的个数。
7、table表格在没有添加长CSS样式之前，是没有表格线的。
六、用CSS为表格加边框
table表格在没有添加CSS样式之前，是没有边框的。用 css 样式代码，为th，td单元格添加粗细为一个像素的黑色边框。
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
解释：通过代码（上图）可以观察到td和tr标签都在th标签里面，是嵌套关系；td和tr标签是属于同一个级别，为并列的关系，所以用逗号隔开。
七、<caption>标签
该标签的主要作用是为表格添加标题和摘要。
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
摘要语法：<table summary="表格简介文本">
标题用以描述表格内容，标题的显示位置：表格上方。
标题语法：
<table>
<caption>标题文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
…
</table>
八、总结
|
标签名称 |
标签作用 |
|
<ur><li>标签
|
该标签主要是用来完成新闻列表、图片列表等。ul-li是没有前后顺序的信息。在网页中显示的默认样式一般为：每项li前都自带一个圆点。 |
|
<ol><li>标签
|
完成有序的排列，如图书销售排行榜等，默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始 |
|
<div>容器标签 |
页面上相互关联的部分，例如网页中独立的栏目板块等逻辑部分放在div中，相当于是一个容器。 |
|
<id>属性 |
<div id="版块名称">…</div> |
|
<table>标签 table、tbody、tr、th、td
|
表格以<table>开始、</table>结束； <tbody>…</tbody>：优先显示行的内容，分块显示表格。 <tr>…</tr>：行标签。 <td>…</td>：列标签。 <th>…</th>：表格头部的一个单元格，表格表头，就是指第一行的数据；浏览器中字体样式默认为黑体加粗。 |
|
CSS添加表框 |
<style type="text/css"> table tr td,th{border:1px solid #000;} </style> |
|
<caption>标签 |
用于添加摘要和标题。 摘要语法：<table summary="表格简介文本"> 标题语法：<table> <caption>标题文本</caption> |
浙公网安备 33010602011771号