HTML入门基础冷知识

Posted 2022-01-31 焉小馒

1.列表标签、div标签及span标签

(1)列表标签分为三种标签，无序列表、有序列表和定义列表。

• 无序列表：以符号作为分项标记   

        disc(默认值,实心圆)、circle(空心圆环)和square(正方形)

<ul type="square">
     <li>第一个</li>
     <li>第二个</li>
     <li>第三个</li>
</ul>

• 有序列表：以数字或字母为序列，及在每一项之前添加1,2,3...等数字，又称编号列表。

         主要使用<ol>和<li>两个标签以及type和start两个属性

<ol type="1">
    <li>第一项</li>
    <li>第二项</li>
</ol>

(2)div标签：作为组合里html元素里的一种容器。默认情况下div元素独占一行，顺序是从上到下的方式排列。

<div>
    标签或内容
</div>

(3)span标签：作为文本的容器。默认情况下，多个span标签可以存在于同一行，顺序是从左到右的方式排列。

<span>文本</span>

2.表格标签

1.创建表格

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

在HTML中创建表格，通常分为以下3步：

（1）创建表格标签<table>......</table>。

（2）在表格标签<table>......</table>中创建行标签<tr>......</tr>可以有多行。

（3）在行标签<tr>......</tr>中创建单元格标签<td>......</td>可以有多个单元格。

<table>
    <tr>
        <td>单元格内的文字</td>
        <td>单元格内的文字</td>
        ... ...
    </tr>
    <tr>
        <td>单元格内的文字</td>
        <td>单元格内的文字</td>
        ... ...
    </tr>
</table>

2.创建不规则表格

        （1）跨列：指单元格的横向合并，实现单元格在水平方向上跨多列。

<table>
    <tr>
        <td colspan="所跨列数">单元格内的文字</td>
    </tr>
</table>

        （2）跨行：可以在垂直方向上跨行，跨行指单元格在垂直方向上合并。

<table>
    <tr>
        <td rowspan="所跨行数">单元格内的文字</td>
    </tr>
</table>

3.表格的美化和布局

        （1）表格的跨宽度、高度与边框

<table width="宽度" height="高度" border="边框宽度">
      ... ...
</table>

        （2）表格的背景颜色和图片

   <table bgcolor="背景颜色" background=背景图片的地址>
      ... ...
   </table>

        （3）表格以及单元格内容的对齐方式：right（右对齐）、center（居中对齐）、left（左对齐），默认为left。

        （4）单元格的填充以及间距

   <table cellspacing="单元格间距" cellspadding="单元格填充">
      ... ...
   </table>