HTML总结2

列表标记

有序列表

 <!-- 有序列表
      ol中只嵌套li
     特点：独占一行 ，自带样式   
    -->
    <ol>
      <li>列表内容 1</li>
      <li>列表内容 2</li>
      <li>列表内容 3</li>
    </ol>

 

无序列表

 <!-- 无序列表
       ul中只嵌套li
       特点:独占一行，自带样式
    -->
    <ul>
      <li>无序列表内容</li>
      <li>无序列表内容</li>
      <li>无序列表内容</li>
    </ul>

 

自定义列表

    <!-- 自定义列表 
    特点  独占一行
  -->
    <dl>
      <dt>中国的城市</dt>
      <dd>北京</dd>
      <dd>上海</dd>
      <dd>广州</dd>
      <dt>美国的城市</dt>
      <dd>纽约</dd>
      <dd>华盛顿</dd>
    </dl>

div标记

//特点  独占一行   不自带样式
<div>div</div>

span标记

//特点:多个占一行  不自带样式    
    <span>span标记</span>
    <span>span标记</span>
    <span>span标记</span>

表格标记

 <!-- table 
    属性： width：宽度    
    border边框   
    cellspacing单元格和单元格之间的距离
    cellpadding 内容和单元格之间的距离
   -->
    <table width="500" border="1px" cellspacing="0">
      <caption>
        <h1>表格标题</h1>
      </caption>
      <!-- tr  行
       height 高度
       align 内容水平对齐方式  居中center  居左 left 居右right
       valign 垂直方向对齐方式  middle top bottom
      -->
      <tr height="60px" align="right" valign="bottom">
        <td>单元格</td>
        <td>单元格</td>
      </tr>
      <tr>
        <td width="100" height="80" align="right" valign="bottom">xx</td>
        <td>xx</td>
      </tr>
    </table>

单元格合并

同一行的单元格合并是列合并

1.找到合并的单元格进行标记

2.给第一个<td>加colspan="合并的列数"属性

3.多余的<td>删除

 

同一列的单元格合并是行合并

1.找到合并的单元格进行标记

2.给第一个<td>加rowspan="合并的行数"属性

3.多余的<td>删除

 

posted on 2022-07-04 15:57  7891asdf156  阅读(48)  评论(0)    收藏  举报

导航