• 项目期复习总结2:Table, DIV+CSS,标签嵌套规则


    文件夹:
    1、表格的意义,含义?
    2、表格有哪些元素?
    3、格布局,表格布局的优缺点
    4、行元素,块元素的差别?
    5、标签的合理嵌套及标签的语义性
     

    ① 表格的意义,含义?
    表格应该用来展现那些适合表格化显示的信息,比方数据的显示,统计或者二维报表之类的信息,而不是作为一种而已的工作

    ② 表格有哪些元素?
    表格元素:table thead tbody tfoot caption tr th td .... 较经常使用 

    ③ 表格的使用应该注意哪些?
    1)使用表格时注意合理嵌套,遵循标签的语义性,table下仅仅能包括thead。tbody,tfoot。在使用表格的时候,注意用在合适的地方。tbody,thead里包括tr,th。td。标题是在表格外面用caption标签。
    2)表格里的内容要写在tr或者td单元格里面,否则内容会跑到表格外面。包括不起来,比如:
    <table border="1" width="200px">
      <caption align="center">Monthly savings</caption>
      这里乱插入
      <tr>
        这里少了th
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
    </table>
         
    3)禁用表格布局页面,这样会带来代码冗余以及维护不方便。


    4)table元素仅仅可以包括caption、colgroup、col、thead、tbody、tfoot,不可以直接包括tr或者其它不论什么元素

    ④ 表格布局,表格布局的优缺点?
    长处:Table的布局easy上手。能够形成复杂的变化。简单高速,表现上更加“严谨”,在不同的浏览器中都能得到非常好的兼容
    缺点:不利于维护,代码多,冗余。table假设超过了3层收索引擎就不再抓取。假设你的站点有布局变化的须要时,这样table的布局就会又一次设计。再加table分行分列什么的,页面变化的比例会稍大一些,这就会影响你前期做好一些排名和搜索基础了。
    ①代码臃肿 ②页面渲染性能问题 ③不利于搜索引擎优化 ④可訪问性差 ⑤不够语义
    ⑥ 表格基本属性的设置(行列的合并)?
    列合并:colspan是合并列的意思,“3”是指三列。colspan="3"的意思就是把三列合并为一列,换句话来说,就是把竖向的三个单元格合并为一个单元格了。
    行合并:rowspan合并行的代码,这里的“7”,表示合并7行。


    代码实战:打开


    DIV+CSS布局的优缺点?
    长处:方便维护更改。有利于SEO的抓取。(注意table布局的对照),结构嵌套合理,结构样式分离。降低网页载入时间,页面渲染性能较table高
    缺点:① 开发技术高 众所周知。div+css要兼容各种浏览器,这样添加div+css开发的难度。② 开发时间长 div+css布局相对于table布局来说,div+css的耗费时间要比table布局的时间长非常多,另外考虑到浏览器兼容的问题,各种浏览器间的測试也是一个费时的事情。③ 开发成本高,就上两点所说。高技术和长时间决定了他的成本。


    行元素,块元素的差别?
    块元素: h div p title ol ul dl dt dd fieldset form …
    1. 默认占领一整行,  块包括行/块元素
    2. 设置宽高有效
    3.margin和padding设置有效
    4. 转换成行元素display:inline
    行元素: a span i em strong b
    1. 不会占领整行 行仅仅能包括行元素,不能包括块元素
    2. 设置宽高无效
    3. 纵向margin的设置是无效的
    4. 转换成块元素:display:block

    标签的合理嵌套以及标签的语义性
    标签的嵌套规则
    1.body能够直接包括块状元素、ins、del、script。不能够直接包括行内元素
    2.ins和del(行内元素)能够包括块状元素或者行内元素。其它不论什么行内元素都不同意包括块状元素
    3.p、h1-h6能够直接包括行内元素和文本信息,可是不同意包括块状元素
    4.dl元素仅仅同意包括dt和dd,同一时候dt不能包括块状元素,仅仅同意包括行内元素。对于dd能够包括不论什么元素
    5.form元素不可以直接包括input元素。

    原因在于input元素属于行内元素。form元素只可以包括块状元素
    6.table元素仅仅可以包括caption、colgroup、col、thead、tbody、tfoot,不可以直接包括tr或者其它不论什么元素


  • 相关阅读:
    ch5 对链接应用样式
    ch4 圆角框
    ch4 背景图像基础
    ch8 CSS 3列(等高文本列)
    ch8 高度相等的列--CSS方法
    ch8 faux列
    java基础 (四)之集合
    java基础 (二)之HashMap,HashTable,ConcurrentHashMap区别
    java基础 (三)之ConcurrentHashMap(10)未完待续~~~
    java基础 (一)之HashMap(jdk1.7)
  • 原文地址:https://www.cnblogs.com/blfbuaa/p/6725974.html
Copyright © 2020-2023  润新知