零基础学习web前端（一）之HTML标签2

Amy · 发表于 2018-11-27 18:14:14

零基础学习web前端（一）之HTML标签2

【零基础学习web前端】教程目录导航 http://www.sufeinet.com/thread-24027-1-1.html

接上个帖子零基础学习web前端（一）之HTML标签1，我已经介绍了部分HTML标签，今天继续添加！

12、列表标签

无序列标签

[HTML] 纯文本查看 复制代码

<html>
  <h2>默认是实心小圆圈</h2>
  <ul>
    <li>无序列表项1</li>
    <li>无序列表项2</li>
    <li>无序列表项3</li>
  </ul>

  <h2>实心小圆圈</h2>
  <ul type="disc">
    <li>无序列表项1</li>
    <li>无序列表项2</li>
    <li>无序列表项3</li>
  </ul>

  <h2>空心小圆圈</h2>
  <ul type="circle">
    <li>无序列表项1</li>
    <li>无序列表项2</li>
    <li>无序列表项3</li>
  </ul>

  <h2>小方块显示</h2>
  <ul type="square">
    <li>无序列表项1</li>
    <li>无序列表项2</li>
    <li>无序列表项3</li>
  </ul>
  
<html>

效果

注：标签属性，默认是实心小圆圈

type="square" 小方块
type="disc" 实心小圆圈
type="circle" 空心小圆圈

有序列表

[HTML] 纯文本查看 复制代码

<html>
  <h2>数字列表显示</h2>
  <ol>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
  </ol>

  <h2>数字排列显示,从自己确定的数字开始</h2>
  <!-- start=”3”  决定从3开始。 -->
  <ol start="3"> 
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
  </ol>

  <h2>字母排序显示</h2>
  <!-- type=”a”  决定了用字母排列显示。 -->
  <ol type="a">
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
  </ol>
  
  <h2>小写罗马数字显示</h2>
  <!-- type=”i”  决定用小写罗马数字显示。 -->
  <ol type="i" start="i">
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
  </ol>
  
  <h2>大写罗马数字显示</h2>
  <!-- type=”I”  决定用大写罗马数字显示。 -->
  <ol type="I">
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
  </ol>
  
<html>

效果

注： type=”1,a,A,i,I” type的值可以为1,a,A,i,I

自定义列表

[HTML] 纯文本查看 复制代码

<h3>自定义列表</h3>
    <dl>
        <dt>一级标题</dt>
            <dd>二级标题</dd>
            <dd>二级标题</dd>
        <dt>一级标题</dt>
            <dd>二级标题</dd>
            <dd>二级标题</dd>
    </dl>

效果

13、表格标签

[HTML] 纯文本查看 复制代码

<html>
 <table border="边框" background ="背景颜色" width="表宽" height="表高"><!--定义表格-->
    <caption>定义标题</caption>
    <th colspan="2">表头</th>
    <tr><!--定义表行-->
        <td>第一行第一格</td><!--定义表元-->
        <td>第一行第二格</td>
    </tr>
    <tr>
        <td>第二行第一格</td>
        <td>第二行第二格</td>
    </tr>
  </table>
<html>

示例

注：<tr></tr>是控制行的<td></td>是控制列的
而colspan是在一行中跨多少列
rowspan是在一列中跨多少行

[HTML] 纯文本查看 复制代码

<html>
 <table border="1" bordercolor="red">
  <tr>
      <td rowspan="2">苏飞论坛</td>
      <td>sufeinet.com</td>
      <td>sufeinet.com</td>
  </tr>
  <tr>
      <td>sufeinet.com</td>
      <td>sufeinet.com</td>
      <td>sufeinet.com</td>
  </tr>
  <tr>
      <td>sufeinet.com</td>
      <td>sufeinet.com</td>
      <td>sufeinet.com</td>
  </tr>
</table>
<html>

图示

站长苏飞 · 发表于 2018-11-27 19:52:27

强烈支持楼主ing……

liu · 发表于 2018-11-27 21:21:58

强烈支持楼主ing……

Amy · 发表于 2018-11-27 21:25:45

零基础学习web前端（一）之HTML标签1：http://www.sufeinet.com/thread-24013-1-1.html

竹林风 · 发表于 2018-11-27 21:26:26

真是难得给力的帖子啊。

liu · 发表于 2018-11-27 21:29:28

我只是路过打酱油的。

范范 · 发表于 2018-11-28 17:30:23

楼主加油，我们都看好你哦。

		自动登录	找回密码
密码			马上注册

[HTML/HTML5] 零基础学习web前端（一）之HTML标签2

相关帖子