1. 程式人生 > >html(2)有序,無序,定義列表,表格

html(2)有序,無序,定義列表,表格

描述 列表 標簽 背景顏色 itl colspan cal ble 列表項

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)有序,無序,定義列表,表格