`
wungking
  • 浏览: 10879 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

页面设计中table和div的适当选用

阅读更多

Table在早期的页面设计中应用广泛,但是随着互联网的发展table渐渐被抛弃,现在互联网上只有一小部分老站(有名气,不必要改的那种有很多),还是沿用着table来布局页面,现在的新站基本上都是使用了div+css来布局页面,但是很多web前端初入门的朋友就会产生一种错觉,认为table会是页面对搜索引擎不友好的元凶,所以在设计列表的时候总是会去使用dt ul 之类的标签。这样有的使用会让你多花很多设计页面样式的时间,而真正对搜索引擎优化的效果很微弱。

大量使用table的一个非常大的弊端除了对搜索引擎不友好,还有就是对程序员也非常的不友好,table的大量嵌套,会让人看的很晕。但是如果配合着div使用的话就会提供效果,达到的效果或许比dtul来的更加好。

还有一个问题就是大量的table tr td 会让你页面的语义非常的差,这里先不讨论标签语义化,大家自己去百度搜一下,语义良好的页面,搜索引擎是非常的喜好的,这里我先介绍一个语义化很好的网站 www.w3school.com.cn 大家也可以自己动手操作,用谷歌浏览器去掉它的css链接,然后再看它的页面布局,你会发现,它的所有的标题,列表,都井然有序,就像是写论文的时候非常正规的排版一样,即使不要样式表,相信大家也不会产生非常大的厌恶感,但是有些网站就不一样了,去掉css样式文件之后,页面直接就瘫了,这里再发个站www.webgamei.com 去掉它的css样式文件 (2个) 再看页面,因为它的样式很多都是直接写进table中的style中,所以你看起来没有很大的变化,但是你看导航部分,会发现,页面毫无语义感,若是页面的样式分离开了,那去掉css文件,估计没法看了。

所以这里建议,在你的页面设计出来之后,你可以先不去加css样式,直接先把默认样式的版面写出来,在根据页面去加css自定义样式,这样会不会更高效点呢 ,呵呵 ,我没试过,只是这么想而以。

关于语义的内容很多,这里我也不说太多了,介绍大家一本书 《编写高质量代码--Web前端开发修炼之道》很不错的一本书,里面对语义化介绍的很清楚。页面布局是一个经验积累的过程,看到好的网站,它的页面布局,你都可以借鉴一下,看到不好的,你也可以想一下该怎么去优化它,这样才能在web前端之路上成长更快。

分享到:
评论

相关推荐

    html网页布局模板01-简谱风

    1. **表格布局(Table Layout)**:早期网页设计中常用,通过`<table>`、`<tr>`、`<td>`等标签创建表格结构来布局页面。但这种方法不利于响应式设计,已逐渐被取代。 2. **层布局(Div Layout)**:使用`<div>`标签...

    ActiveX插件的Z-Index属性无效问题解决

    当我们在页面上定义了不同的元素如图片、按钮、输入框等,我们希望控制这些元素的前后层叠关系,以满足特定的界面设计要求。这时,z-index属性就显得至关重要了。该属性仅接受整数值,并通过此值决定元素在页面上的...

    dawe_01_1108.pdf

    dawe_01_1108

    全站打包最新wordpress+网创资源自动同步更新

    主要功能: wordpress插件主题系列支持自动采集并发布。 主要采集: 福缘,中创,冒泡 自动采集各大项目网进行整合发布到自己个人网站 插件话更新,减少网络请求,提升稳定性 代码完美开源 傻瓜式操作,一次设置永久使用

    基于OpenCV 4.x

    测试课本程序运行 修改main.cpp文件 原main.cpp文件内容: #include "OpenCV_example.hpp" #include <iostream> int main() { return 0; } 运行一个程序案例: 假设要运行课本案例的Logo.cpp,在main.cpp文件的main函数里写上一行:run_logo(); 设置运行参数(run>>Edit Configurations),讲working directory设置为当前工程的路径

    【框架完整】毕业答辩PPT模板.pptx

    【框架完整】毕业答辩PPT模板.pptx

    深度解析:解决DeepSeek服务器繁忙-本地部署解决方案与步骤详解

    内容概要:本文详细介绍了三种方法来应对DeepSeek服务器繁忙问题,着重阐述了如何进行DeepSeek的本地部署,包括详细的硬件和软件环境配置建议,特别是针对不同规模参数模型的具体配置需求,同时提供了简化的部署指南。通过本地部署可以有效缓解因服务器繁忙带来的使用不便问题,同时增强数据的安全性和稳定性。此外,还讨论了一些潜在限制,如内容更新滞后和UI界面美观度问题。 适合人群:适用于希望提高使用效率和保障数据安全的技术人员或研究团队,尤其是正在面临DeepSeek云服务平台拥堵问题的人群。 使用场景及目标:为用户提供了一套全面且灵活的解决方案,使其能够在不受限于互联网的情况下独立开展深度学习相关的工作或实验;旨在帮助用户体验更快的数据处理速度,获得更加稳定可靠的服务体验。 阅读建议:为了更好地理解和实施文中提及的各项操作,请确保熟悉所在的操作系统环境,并按步骤执行每个环节,尤其是对硬件设备的选择和驱动程序的正确安装保持关注。对于初次接触此类项目的人来说,可以先从简单的轻量级配置入手逐步过渡到更为复杂的大型配置上。

    dawe_3cd_02_0718.pdf

    dawe_3cd_02_0718

    基于COMSOL的非饱和裂隙土降雨入渗特性研究:三维基质模型与VG、Brooks-Corey模型的应用分析,基于COMSOL的非饱和裂隙土降雨入渗特性研究:三维基质模型与VG、Brooks-Corey

    基于COMSOL的非饱和裂隙土降雨入渗特性研究:三维基质模型与VG、Brooks-Corey模型的应用分析,基于COMSOL的非饱和裂隙土降雨入渗特性研究:三维基质模型与VG、Brooks-Corey模型的应用分析,comsol非饱和裂隙土降雨入渗研究,复现lunwen(侯晓萍,樊恒辉.基于COMSOL Multiphysics的非饱和裂隙土降雨入渗特性研究[J].岩土力学,2022,43(02):563-572.),建立三维基质—裂隙土柱模型,使用“空气单元”描述坡面积水水头。 使用VG模型和Brooks-Corey模型分别描述土基质和裂隙的非饱和特性,下图为0-5天内压力水头变化以及降雨断面入渗率以及参考文献对比) ,关键词: comsol; 非饱和裂隙土; 降雨入渗研究; 三维基质-裂隙土柱模型; 空气单元描述坡面积水水头; VG模型; Brooks-Corey模型; 压力水头变化; 降雨断面入渗率; 参考文献对比。,COMSOL模型下裂隙土渗透研究:雨季三维模拟与对比分析

    diminico_01_0909.pdf

    diminico_01_0909

    anslow_04_0909.pdf

    anslow_04_0909

    Comsol 6.2版流固耦合注浆及冒浆解析:以达西定律与固体力学模块为核心,实现渗流场与结构场流固耦合方程的嵌入学习案例 附赠参考论文与流固耦合视频教程 ,基于Comsol流固耦合理论的注浆过程与冒

    Comsol 6.2版流固耦合注浆及冒浆解析:以达西定律与固体力学模块为核心,实现渗流场与结构场流固耦合方程的嵌入学习案例。附赠参考论文与流固耦合视频教程。,基于Comsol流固耦合理论的注浆过程与冒浆现象分析(6.2版)-深入探讨达西定律模块与固体力学模块的实践应用,Comsol流固耦合注浆及冒浆分析(6.2版本) 采用其中达西定律模块及固体力学模块,通过建立质量源项、体荷载等实现上述考虑渗流场与结构场流固耦合理论方程的嵌入。 附带参考lunwen及流固耦合视频 是学习注浆扩散,流固耦合,变形很好的新手案例。 ,Comsol;流固耦合注浆;冒浆分析;达西定律模块;固体力学模块;渗流场与结构场流固耦合;质量源项;体荷载;学习案例,Comsol 6.2版流固耦合注浆分析:达西定律与固体力学模块应用案例

    基于python内置的opencv的图像识别项目

    基于python内置的opencv的图像识别项目

    0308_ba_open_report.pdf

    0308_ba_open_report

    cole_02_0507.pdf

    cole_02_0507

    Matlab非线性优化算法实现,基于Matlab的BFGS梯度下降算法结合Armijo线搜索法在多项式目标函数优化中的应用与最优解研究,基于matlab的非线性优化算法实现 通过梯度下降法(具体实现为

    Matlab非线性优化算法实现,基于Matlab的BFGS梯度下降算法结合Armijo线搜索法在多项式目标函数优化中的应用与最优解研究,基于matlab的非线性优化算法实现 通过梯度下降法(具体实现为 BFGS 方法),并结合 Armijo 线搜索方法,对一个多项式目标函数进行优化,找到其最优解。 开发语言:matlab ,核心关键词:Matlab; 非线性优化算法; 梯度下降法; BFGS方法; Armijo线搜索方法; 多项式目标函数; 最优解。,MATLAB中结合BFGS与Armijo线搜索实现多项式目标函数优化算法

    【财通证券-2025研报】轻工行业周报:上海二手房成交亮眼,家居315营销开启.pdf

    【财通证券-2025研报】轻工行业周报:上海二手房成交亮眼,家居315营销开启.pdf

    基于SS补偿网络的无线电能传输中的变频移相综合控制策略:谐振稳定与输出电压优化调节,基于多目标综合控制的无线电能传输系统:谐振稳定输出电压的变频移相控制策略 ,ss补偿网络变频控制移相控制,同时控制系

    基于SS补偿网络的无线电能传输中的变频移相综合控制策略:谐振稳定与输出电压优化调节,基于多目标综合控制的无线电能传输系统:谐振稳定输出电压的变频移相控制策略。,ss补偿网络变频控制移相控制,同时控制系统保持谐振和稳定输出电压,多目标综合控制 无线电能传输 ,ss补偿网络; 变频控制; 移相控制; 谐振控制; 稳定输出电压控制; 多目标综合控制; 无线电能传输。,综合控制下的无线电能传输系统,实现稳定谐振输出与多目标管理

    chang_01_0509.pdf

    chang_01_0509

    基于深度学习的语义分割模型FCN的pytorch实现源码

    【资源介绍】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目,也可以作为小白实战演练和初期项目立项演示的重要参考借鉴资料。 3、本资源作为“学习资料”如果需要实现其他功能,需要能看懂代码,并且热爱钻研和多多调试实践。 基于深度学习的语义分割模型FCN的pytorch实现源码.zip 基于深度学习的语义分割模型FCN的pytorch实现源码.zip 基于深度学习的语义分割模型FCN的pytorch实现源码.zip 基于深度学习的语义分割模型FCN的pytorch实现源码.zip 基于深度学习的语义分割模型FCN的pytorch实现源码.zip 基于深度学习的语义分割模型FCN的pytorch实现源码.zip 基于深度学习的语义分割模型FCN的pytorch实现源码.zip 基于深度学习的语义分割模型FCN的pytorch实现源码.zip 基于深度学习的语义分割模型FCN的pytorch实现源码.zip 基于深度学习的语义分割模型FCN的pytorch实现源码.zip

Global site tag (gtag.js) - Google Analytics