HTML列表标签

1、无序列表

各列表项之间没有次序，各项之间为并列关系

• 语法

    <ul><!-- 列表容器 -->
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>

• 特性

  • 宽度默认撑满整个父元素

  • 高度默认由内容撑开

  • 独立成行

  • 自带外间距

  • 自带内填充(内间距)

  • 自带列表符，去掉自带列表符 li{ list-style: none; }

• css属性

  • list-style-type属性：列表符类型

    • circle空心圆|disc实心圆，默认值|square实心正方形|none去掉列表符

3、自定义列表

自定义列表
​
        语法：
     <dl>
         列表容器
        <dt>词专业名</dt>
        <dd>对专业名次的解释</dd>
    </dl>
    在浏览器中，dd标签的内容会缩进显示
​
<dl>
        <dt>词专业名</dt>
        <dd>对专业名次的解释</dd>
        <dt>web大前端</dt>
        <dd>HTML、CSS、JAVASCRIPT</dd>
    </dl>
​
> 浏览器显示，dd标签的内容会缩进显示
​
- 特性
  - 宽度默认撑满整个父元素
  - 高度默认由内容撑开
  - 独立成行 
  -dl dt dd都是块级标签
    dl标签自带外间距
    dd标签自带外间距
    浏览器显示，dd标签的内容会缩进显示
​
​
典型应用
​
- 名词解释、分类（大分类-细节的类别）

• 应用场景 : 新闻列表 、导航 、商品列表

• 注意：ul的直接子元素只能是li

• 2、有序列表

  有排列次序

• 语法

•     <ol><!-- 列表容器 -->
          <li>列表项</li>
          <li>列表项</li>
          <li>列表项</li>
      </ol>
      <ol start="6" reversed type="I">
          <li>列表项</li>
          <li>列表项</li>
          <li>列表项</li>
      </ol>
       strat属性:开始值 写在 <ol start="6"></ol>开始标签中
       reversed属性：倒叙  写在 <ol start="6" reversed></ol>开始标签中
  ​
  type属性（了解）
  ​
  - `a`: 小写字母
  ​
  - `A`: 大写字母
  ​
  - `i`: 小写罗马数字
  ​
  - `I`: 大写罗马数字
  ​
  - `1`: 数字 默认值

• 特性 与无序列表基本一致

• 应用场景: 有序的列表

表格基本标签

表格常用属性

table属性

td,th属性

语法：

<td width="100" height="100" align="center" valign="middle">

合并单元格

今天所讲得内容就这些，就先分享到这里，明天继续加油。

• table

  • 语法: <table></table>

  • 作用:定义表格

• tr

  • 语法: <tr></tr>

  • 作用:定义表格中的行

• td

  • 语法: <td></td>

  • 作用：普通单元格，定义表格数据（table data） 单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

  • 默认样式:内容水平居左，垂直居中

• th

  • 语法:<th></th>

  • 作用:表示表头单元格，通常在行或列的开始处，定义行或列包含的数据类型

  • 默认样式：字体加粗，内容水平居中，垂直居中

  <table>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>18岁</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>12岁</td>
    </tr>
    </table>
  ​
  表包含三部分：table tr 单元格（th td）
          table:表格的容器
          tr:表格的行
          th:表头单元格,默认文字加粗，水平方向和垂直方向居中显示
          td:普通单元格,默认水平居左，垂直方向居中
          注意：1.表格必须嵌套在table中
               2.单元格必须嵌套在tr行标签中
               3.在单元格内可以添加任意的标签和内容
    

  • width\height

    • 语法

      <table width="1000" height="500" border="1" cellpadding="0" cellspacing="0">

    • 作用：定义表格的宽或高

    • 注：省略单位 默认px

  • border

    • 作用 ：使用表格的边框属性可以显示一个带有边框的表格。

    • 注意：如果不定义边框属性，表格将不显示边框。

  • cellpadding

    • 作用：定义单元格中内容和边框之间的间距,单位是像素，可以省略

  • cellspacing

    • 作用：单元格和单元格之间的间距,默认值为2，单位是像素，可以省略 cellspacing='0',单元格之间的距离为0

  • borderColor：

    • 改变边框的颜色

    <table border="1"  borderColor="#ffa500"></table>

• width\height

  • 作用：定义单元格宽度、高度

  • 注意：省略单位 默认px

• align

  • 作用：单元格水平方向的对齐方式

  • 取值

    • left左对齐

    • center 居中对齐

    • right 右对齐

• valign

  • 作用：单元格垂直方向的对齐方式

  • 取值

    • top顶部对齐

    • middle居中对齐

    • bottom底部对齐

• rowspan

  • 作用：跨行合并 语法：<td rowspan="2"> 电话 </td>

• colspan

  • 作用：跨列合并 语法：<td rowspan="2"> 电话 </td>

• 操作步骤

  • 1.确定是合并行还是合并列

  • 2.找到目标单元格，添加合并属性及合并单元格的数量如：<td rowspan="2"> 电话 </td>

  • 3.删除多余单元格