HTML与CSS布局对比-优快云博客

本文链接：https://blog.youkuaiyun.com/lutaiyu1314520/article/details/82874925

本文对比了使用Table和DIV+CSS进行网页布局的优缺点，分析了代码简洁性、页面加载速度、布局灵活性及兼容性等问题，并介绍了表单中name与value属性的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

课程关键字

| 关键字| 英文 |解释|

| 浏览器 |Browser | |

作业完成汇报

使用table表签和form标单元素完成一个个人简历的网页编写；

个人简介个人简历粘贴相片姓名: 性别: 年龄:

	<form>
	<input type="radio" name="sex" value="male"/>Male
	<input type="radio" name="sex" value="female"/>Female
	</form>
</th>

学历起止时间学校名字

使用frame完成一篇带目录导航的文章页面编写；

我的网页收藏

input

文本输入框：
隐藏域：
文件上传：
按钮：

年龄：
<select>
	<option value="1">1岁</option>
	<option value="2">2岁</option>
	<option value="3">3岁</option>
	<option value="4">4岁</option>
</select>
<hr/>
<h1>textarea</h1>
自我介绍：
<textarea rows="4"></textarea>

table页面布局和div布局的区别和为什么要使用div布局

**一、 TABLE方式优点： 1、简单易用：比较适合入门级的用户操作，用户可直接利用Dreamweaver（以下简写为“DW”）工具栏插入表格，设置长宽、对齐方式、属性等。
2、所见即所得：当用户插入一个TABLE的时候就可立即看到效果。
3、可读性好：语句编写较为简便，主要代码就是

、、等语句。
4.开发速度较快：新建网站时，从DW中直接拖入TABLE比编写DIV要快速很多。
5.兼容性较强：TABLE设计由来已久，得到浏览器的广泛支持，故显示效果很好，不会出现错位情况。缺点： 1、代码冗余，<
/TABLE>这是构成一个表格的最基本元素（此为一行一列的表格），相对
编写来说，代码繁多。
2、网页打开速度较慢：后台代码太多，导致网站打开速度慢。二、 DIV+CSS方式优点：

标准化的页面结构：DIV+CSS是行业标准，是WEB发展的趋势。 2、代码简洁：
较TABLE来说代码精简许多。 3、页面浏览速度较快：
对于同一个页面视觉效果，采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。
4、页面布局灵活：DIV+CSS使得页面布局方便操作灵活，改版时只需改CSS样式即可实现页面重新布局，而不用改动程序，从而降低了网站改版的成本。页面效果丰富，包括视觉效果和用户体验比如拖拉。
缺点： 1、可观性差：用户在编辑的时候并不能立即看到编辑效果，需要预览才可看到。
2、操作繁琐：相对于入门级的用户或是对代码不是很了解的人来说，操作起来很是麻烦。
3、兼容性较差：DIV＋CSS设计的网站在IE浏览器里面正常显示，到火狐浏览器（FireFox
）中有可能面目全非，故设计时需要把不同浏览器样式都考虑进去。
综上所述，其实页面布局采用哪种排版都可以，如果是初入门的新手，需要从TABLE入手，待对html语言有
所了解时再接触DIV+CSS；或者有的客户强调的是网站开发制作的速度，那html语言排版就可以；如果对html语言已经很了解，或者需要进行SEO
优化，想做关键词推广、那最好是用DIV＋CSS来实现，这样网站的流量和页面浏览速度会快一些。**