首页 > 代码库 > html(2)有序,无序,定义列表,表格

html(2)有序,无序,定义列表,表格

1.无序列表
<ul>.............声明无序列表
<li></li>列表项
</ul>

例如:

<html>
<head>
  <title>例如</title>
</head>
<body>
  <ul>
    <li>第一步:清洗面部</li>
    <li>第二部:涂爽肤水</li>
    <li>第三部:涂乳液</li>
    <li>第四部:涂防晒</li>
  </ul>
</body>
</html>

运行结果:

  • 第一步:清洗面部
  •     
  • 第二部:涂爽肤水
  •     
  • 第三部:涂乳液
  •     
  • 第四部:涂防晒

补充:type属性:circle(空心圆),square(实体方心),默认情况下是实体方心
2.有序列表
<ol>.........声明有序列表
<li></li>列表项
</ol>

例如:

 

<html>
<head>
  <title>例如</title>
</head>
<body>
  <ol >
    <li>先涂粉底再涂防晒</li>
    <li>先涂防晒再涂粉底</li>
  </ol>
</body>
</html>

运行结果:

  1. 先涂粉底再涂防晒
  2. 先涂防晒再涂粉底

补充:type属性:1,a,A


3.定义列表  -->表达对名词或概念的解释或者描述
<dl>......声明定义列表
<dt></dt>......列表项内容声明
<dd></dd>.....列表项内容
</dl>

例如:

  

<html>
<head>
  <title>例如</title>
</head>
<body>
  <dl>
    <dt>cpb</dt>
      <dd>日本高端护肤品品牌</dd>
    <dt>雪花秀</dt>
      <dd>韩国中高端护肤品品牌</dd>
  </dl>
</body>
</html>

运行结果:

cpb

  日本高端护肤品品牌

雪花秀

  韩国中高端护肤品品牌

4.表格
<table>...表格标签...
<tr>...行标签...
<td></td>...单元格
</tr>
</table>

例如:

<html>
<head>
  <title>生活用品</title>
</head>
<body>
  <table border="2">
    <tr>
    <td>沐浴露</td>
    <td>
    <table border="2">
      <tr>
        <td>多芬</td>
        <td>力士</td>
        <td>强生</td>
      </tr>
      <tr>
        <td>六神</td>
        <td>舒肤佳</td>
        <td>妮维雅</td>
      </tr>
     </table>
    </td>
    </tr>
  <tr>
    <td>口红</td>
    <td>
    <table border="2">
      <tr>
        <td>纪梵希</td>
        <td>MAC</td>
        <td>香奈儿</td>
      </tr>
      <tr>
        <td>雅思兰黛</td>
        <td>圣罗兰</td>
        <td>迪奥</td>
      </tr>
    </table>
    </td>
  </tr>
</table>

</body>

</html>

运行结果

沐浴露
多芬 力士 强生
六神 舒肤佳 妮维雅
口红
纪梵希 MAC 香奈儿
雅思兰黛 圣罗兰 迪奥


table属性:align:left: 左对齐 center:居中对齐 right:右对齐 valign:top:顶端对齐 middle:居中对齐 bottom:低端对齐 baseline:基线对齐
callspacing:单元格与单元格之间的距离
cellpadding:单元格边界与单元格文字之间的距离
bgcolo:背景颜色
td属性:colspan:表示这一单元格占几格 rowspan:跨行

html(2)有序,无序,定义列表,表格