HTML列表及表格基础知识

 

一、列表

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

代码如下:

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

结果如下:

HTML列表及表格基础知识

<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>

HTML列表及表格基础知识

 

<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>

结果如下

HTML列表及表格基础知识

 

二、表格

表格标签<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>

HTML列表及表格基础知识

 

上一篇:Till I Collapse CodeForces - 786C


下一篇:页面布局三大核心之盒子模型