> 웹 프론트엔드 > HTML 튜토리얼 > 初学HTML 常见的标签(二) 列表标签_html/css_WEB-ITnose

初学HTML 常见的标签(二) 列表标签_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:27:16
원래의
1309명이 탐색했습니다.

  上次介绍了一些简单的文本标签设计, 这篇介绍列表类标签, 通过列表能写出很好看的, 多元化的网络页面.

  ul-li 列表标签

  

        

  • 列表1
  •     

  • 列表2
  •   

  ul-li在网页中显示的默认样式一般为:每项li前都带一个圆点, 所以ul-li是没有序号的信息列表, 不存在前面的1, 2, 3等等的序号为其排序.

  ol-li 列表标签

  


        
  1. 有序列表1

  2.     
  3. 有序列表2

  4.   

  ol-li在网页中显示的默认样式和ui-li的区别就在于, 它是有序号的信息列表, 所以它的前面不再是圆点, 而是1, 2, 3等等的序号为其排序, 如果懂一些英文的人我想会更好记忆(

    代表的就是, unorder list,
    代表的是order list,
  1. 代表的是list, 如上都是我推断出来, 英文本人惭愧的连四级都没有过, 所以如果哪里有错误, 希望批评指正).

      
    逻辑标签

      

    逻辑标签很大程度上和文本标签中的很像, 但是它是有语义的, 也会对原本的布局产生影响, 之所以说很像, 也是因为
    标签大部分都只是为自定义提供了一个容器, 这点和是相同的, 在实际的网页中,
    也和一样, 是最重要的标签之一.
    最主要的作用是将一个完整的逻辑模块框在一起, 说的通俗一点, 就是古惑仔中的这片场子归我管.

      

    表格标签

      先来简单说说标签名字的含义, 我个人习惯这样, 因为这样能方便记忆, 就如同ol-li这样似的, 在

    中会有三种必用标签, , table row 表格行标签, 这个标签的出现意味着下面的都是这一行上面要出现的数据, 结束也就意味着这一行结束了. 再出现当然就是又出现一行了.

      

    中的, 因为先有行, 才会有表头对吧, 所以这个只会在一个标签中出现, 毕竟表头不可能有两行.

      

    中就会有多少个

      这个标签没什么可说的, 就是为表格添加一个标题, 使用在

    , .

      

    table head 表头标签, 这个标签是内嵌在
    table data cell 单元数据标签, 这个标签的的用法和 是一样的, 在非表头行使用, 是指每个单元中和表头标题一一对象的元素, 所以在第一行表头有多少个 在后面的
    与之相对应.

      下面上代码给大家解释:

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>认识table表标签</title></head><body><!--表格开始标签--><table>    <!--表格行开始标签-->    <tr>      <!--表格头标签-->      <th>班级</th>      <th>学生数</th>      <th>平均成绩</th>    </tr>    <tr>      <!--表格单元格标签-->      <td>一班</td>      <td>30</td>      <td>89</td>    </tr>    <tr>      <td>二班</td>      <td>35</td>      <td>85</td>    </tr>    <tr>        <td>三班</td>        <td>32</td>        <td>80</td>    </tr></table></body></html><br />
    로그인 후 복사

      运行效果如下

      可能会有人想, 表格为什么没有边框呢, 但是这些是需要css进行帮助的, 所以这里就先不解释如何添加了.

      

    表格标题标签
    开始标签之后.

     

            

      

        

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿