HTML列表及表格基础知识_html列表项为书名-CSDN博客

本文链接：https://blog.csdn.net/weixin_45731881/article/details/117448616

一、列表

1.有序列表：标签有<ol></ol>和<li></li>

代码如下：

 <ol>
        <li>Google</li>
        <li>Baidu</li>
        <li>Bing</li>
        <li>Sougou</li>
    </ol>

结果如下：

<ol>标签中可以定义列表类型，如：

<ol type="1"> 
<ol type="A/a">     
<ol type="I/i">

2.无序列表标签有<ul></ul><li></li>

代码如下

 <ul>
        <li>Java</li>
        <li>C++</li>
        <li>Python</li>
        <li>JavaScript</li>
  </ul>

<ul>中也可以定义列表类型

 <ul type=”disc"> 
 <ul type=”square">   
 <ul type=”circle">

3.自定义列表

<dl>   定义一个自定义列表

<dt>   列表项的标题

<dd>   列表项的描述

代码如下

<dl>
      <dt>水果</dt>
      <dd>苹果</dd>
      <dd>香蕉</dd>
      <dt>蔬菜<dt>
      <dd>西兰花</dd>
       <dd>菠菜</dd>

  </dl>

结果如下

二、表格

表格标签<table></table>

<tr>标签：行

<td>,<th>标签：行内元素

<caption>标签：为表格设置一个标题该标签必须在<table>标签之后

代码：<table>
<caption>标题</caption>
<tr>
<th>书名</th>
<th>作者</th>
</tr>
<tr>
<td>活着</td>
<td>余华</td>
</tr>
<tr>
<td>西游记</td>
<td>吴承恩</td>
</tr>
</table>

要使用表格标签，要在<style>中改变样式

<style>
table{
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
</style>

border-collapse是设置表格的行<tr>或<td>之间是否留有距离。
border-collapse : 取值有separate :（默认值）边框独立和 collapse :相邻边被合并。

border的属性：width：线的粗细，一般用px，color：颜色，style：样式，solid（实线）、dashed（虚线）、dotted（点划线）、none（不显示）.....。border的样式可以写在一起，例：border：1px solid black。

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格</title>
    <style>
        table{
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid black;
        }
    </style>
</head>
<body>
        <table>
                <caption>标题</caption>
                        <tr>
                            <th>书名</th>
                            <th>作者</th>
                        </tr>
                        <tr>
                            <td>活着</td>
                            <td>余华</td>
                        </tr>
                        <tr>
                            <td>西游记</td>
                            <td>吴承恩</td>
                        </tr>
                    </table>
    
</body>
</html>