您的位置：首页 > Web前端 > CSS

HTML+CSS基础（三）：认识html标签

2016-05-20 14:27 639 查看
ul-li是没有前后顺序的信息列表。

<ul>
<li>精彩少年</li>
<li>美丽突然出现</li>
<li>触动心灵的旋律</li>
</ul>


ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点。

ol-li标签来制作有序列表来展示。

<ol>
<li>前端开发面试心法 </li>
<li>零基础学习html</li>
<li>JavaScript全攻略</li>
</ol>


<ol>
在网页中显示的默认样式一般为：每项
<li>
前都自带一个序号，序号默认从1开始。

在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个
<div>
标签中，这个
<div>
标签的作用就相当于一个容器。

为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为
<div>
提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。

语法：

<div  id="版块名称">…</div>


创建表格的四个元素：

table、tbody、tr、th、td

<table>
…
</table>
：整个表格以
<table>
标记开始、
</table>
标记结束。

<tbody>
…
</tbody>
：当表格内容非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等表格内容全部下载完才会显示。

<tr>
…
</tr>
：表格的一行，所以有几对tr 表格就有几行。

<td>
…
</td>
：表格的一个单元格，一行中包含几对
<td>
…
</td>
，说明一行中就有几列。

<th>
…
</th>
：表格的头部的一个单元格，表格表头。

表格中列的个数，取决于一行中数据单元格的个数。

表格在没有添加css样式之前，在浏览器中显示是没有表格线的。

表头，也就是th标签中的文本默认为粗体并且居中显示。

<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年库存记录</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>


显示为：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航