项目期复习总结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或者其它不论什么元素

时间: 2024-08-02 10:56:36

项目期复习总结2:Table, DIV+CSS,标签嵌套规则的相关文章

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

目录: 1.表格的意义,含义? 2.表格有哪些元素? 3.表格布局,表格布局的优缺点 4.行元素,块元素的区别? 5.标签的合理嵌套及标签的语义性 ① 表格的意义,含义? 表格应该用来展现那些适合表格化显示的信息,比如数据的显示,统计或者二维报表之类的信息,而不是作为一种而已的工作 ② 表格有哪些元素? 表格元素:table thead tbody tfoot caption tr th td .... 较常用  ③ 表格的使用应该注意哪些? 1)使用表格时注意合理嵌套,遵循标签的语义性,tab

项目期复习总结:背景图合并,hack,浏览器内核前缀,伪类after before

目录: 1.背景图合并和CSS Spirit 2.PS基本快捷键 3.hack技术基本书写,为什么不用? 4.内核前缀 5.伪类afterbefore 1.背景图合并和CSS Spirit 背景图合并在使用时有两种方法: ①一种就是你会PS,可以自己PS实现背景图合并成一张图片,再用background-position实现背景图的定位. ②如果你不会PS,那可以用CSS背景图合并工具,直接选好图片后在线制作生成相对应格式的图片,方便快捷. background的语法: background-c

项目期复习:JS操作符,弹窗与调试,注释,数据类型转换

1.JS操作符 ① 除法运算后,是有小数存在的,跟C语言不同之处 var num = 67/4;         ----------> 输出:16.75 console.log(num); ② 通常情况下,操作符与数值/变量之间需要有空格隔开 1) 赋值操作符  = 2) 算数操作符  + .- .*. / .% , 除法是可以有小数存在的 ③  取余 最后结果正负与被除数有关 与除无关  如: (-7)%3 = -1         7%3=1    (-7)%(-3)=-1    7%(-

深度理解div+css布局嵌套盒子

1. 网页布局概述 网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用<div>标记进行分块,然后对每个快进行CSS定位以及设置显示效果,最后在每个块中添加相应的内容.利用CSS排版方法更容易地控制页面每个元素的效果,更新也更容易,甚至页面的拓扑结构也可以通过修改相应的CSS属性来重新定位.  2. 盒子模型 盒子模型是CSS控制页面元素的一个重要概念,只有掌握了盒子模型,才能让CSS很好地控制页面上每一个元素,达到我们

项目期复习总结1:背景图合并,hack,浏览器内核前缀,伪类after before

文件夹: 1.背景图合并和CSS Spirit 2.PS基本快捷键 3.hack技术基本书写,为什么不用? 4.内核前缀 5.伪类afterbefore 1.背景图合并和CSS Spirit 背景图合并在使用时有两种方法: ①一种就是你会PS.能够自己PS实现背景图合并成一张图片.再用background-position实现背景图的定位. ②假设你不会PS.那能够用CSS背景图合并工具,直接选好图片后在线制作生成相相应格式的图片.方便快捷. background的语法: background-

有利于SEO的DIV+CSS的命名规则小结

由于项目中编写文档结构.编写CSS的人员较多,并与程序员协同工作,所以就需要统一开发规范,根据XHTMl和CSS编织的规范和大多人的习惯,整理了以下针对本项目的一个简单的开发规范. 一.CSS文件及样式命名 1.CSS文件命名规范 全局样式:global.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:print.css: 2.CSS样式命名规范 本人建议:用字母._号工.-号.数字组成,必须以字母开头,不能为纯数字.为了开发后样

有利于SEO优化的DIV+CSS的命名规则小结

一.CSS文件及样式命名 1.CSS文件命名规范 全局样式:global.css/master.css: 专栏样式:columns.css: 主题样式:themes.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:print.css: -------------------------------------------------- 页面主体:main: 内容:content: 标签页:tab: 文章列表:list: 提示信息:

你不知道的DIV+CSS的命名规则

搜索引擎优化(seo)有很多工作要做,其中对代码的优化是一个很关键的步骤.为了更加符合SEO的规范,下面是目前比较好的CSS+DIV的命名规则 1DIV CLASS或者ID 页头:header 登录条:loginBar 标志:logo 侧栏:sideBar 广告:banner 导航:nav 子导航:subNav 菜单:menu 子菜单:subMenu 搜索:search 滚动:scroll 页面主体:main 内容:content 标签页:tab 文章列表:list 提示信息:msg 小技巧:t

div+css 布局经验 - 最简单的 = 最不变形的(原创技巧)

站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条"捷径". 希望广大网友提出宝贵意见 同时不希望将初学的您 带入走火入魔的状态! 1 :css (cascading style sheet): 初学者可以下载一本css 2.0 手册 大概48小时的时间可以看完 试完.至于样式手册上的单词(属性和取值) 多久能背完取决你的努力和英语基础,请注意 无论