网页html结构搭建方法总结
在div+css布局中,一般都这样来整体构架的:
<div id="header"></div>
<div id="center"></div>
<div id="footer"></div>
而对于header部分,肯定要显示网站标题,除了显示网站标题外,还可能要显示其他比较重要的对象,比如网站的导航栏:
<div id="header">
<div id="title">这里是网站的标题</div>
<div id="nav">这里是网站导航栏</div>
</div>
很多人一般都这样写的,当然这样写并没有什么语法错误。但对于div来说有个原则,那就是尽少的使用div的嵌套(和table一样的缺点:1、对于用户:浏览器要消耗资源对嵌套的关系进行解析,影响速度;2、对于搜索:搜索引擎对嵌套的层数可能有所限制)。而且这样写带给我们的可读性也不算太高。
那如何才是最优化,最科学的写法呢?
我们选用其他的Xhtml代码来取代上面的div,那又如何选择呢??
首先标题的选择——我们知道在xhtml中h1-h6是表示标题的,而header里的标题在全页来看是最重要的,我们选择h1来表示标题是顺其自然的。
其次导航栏的选择——导航栏是由多个小块内容组成,我们选择无序列表
<ul><li></li></ul>
来表示菜单最合适不过了!
最后以上的内容可以优化成:
<div id="header">
<h1>这里是网站的标题</h1>
<ul>
<li>这里是网站导航栏</li>
</ul>
</div>
网页html结构搭建方法总结的更多相关文章
- seo之google rich-snippets丰富网页摘要结构化数据(微数据)实例代码
seo之google rich-snippets丰富网页摘要结构化数据(微数据)实例代码 网页摘要是搜索引擎搜索结果下的几行字,用户能通过网页摘要迅速了解到网页的大概内容,传统的摘要是纯文字摘要,而结 ...
- NET 项目结构搭建
NET 项目结构搭建 我们头开始,从简单的单项目解决方案,逐步添加业务逻辑的约束,从应用逻辑和领域逻辑两方面考虑,从简单的单个项目逐步搭建一个多项目的解决方案.主要内容:(1)搭建应用逻辑和领域逻辑都 ...
- Springmvc+Spring+Hibernate搭建方法
Springmvc+Spring+Hibernate搭建方法及example 前面两篇文章,分别介绍了Springmvc和Spring的搭建方法,本文再搭建hibernate,并建立SSH最基本的代码 ...
- vue2项目结构搭建
vue2项目结构初搭建与项目基本流程 一.开始项目结构搭建的重要性 决定项目是否能够健康成长 决定了项目是否利于多人协作开发 决定了项目是否利于后期维护 决定了项目是否性能良好 决定了代码是否重用率降 ...
- [转]MVP+WCF+三层结构搭建项目框架
最近,我一直在重构之前做的一个项目,在这个过程中感慨万千.原先的项目是一个运用了WCF的C/S系统,在客户端运用了MVC模式,但MVC的View.Model耦合以及WCF端分布式欠佳等问题让我有了重构 ...
- laravel基础课程---4、Laravel基础网站结构搭建
laravel基础课程---4.Laravel基础网站结构搭建 一.总结 一句话总结: 1.搭建网站前后台路由:在路由组Route::group()中设置好命名空间和前缀 2.搭建控制器:比如1)新建 ...
- 项目架构(结构)搭建:主流结构(UITabBarController + 导航控制器)
/* 项目架构(结构)搭建:主流结构(UITabBarController + 导航控制器) -> 项目开发方式 1.storyboard 2.纯代码 */ @interface AppDele ...
- Python下载网页的几种方法
get和post方式总结 get方式:以URL字串本身传递数据参数,在服务器端可以从'QUERY_STRING'这个变量中直接读取,效率较高,但缺乏安全性,也无法来处理复杂的数据(只能是字符串,比如在 ...
- Redis Cluster搭建方法简介22211111
Redis Cluster搭建方法简介 (2013-05-29 17:08:57) 转载▼ Redis Cluster即Redis的分布式版本,将是Redis继支持Lua脚本之后的又一重磅 ...
随机推荐
- 基于canvas和jsp的头像剪辑上传
最近在做项目时候需要一个头像长传功能,但是现在照片动不动就几兆的,都是流量的浪费. 我只是简单想要上传一个头像而已... 经过几天发愤图强..总算是略有所获.. 基本思路: 1.html部分,图片剪辑 ...
- 制作 OpenStack Windows 镜像 - 每天5分钟玩转 OpenStack(152)
这是 OpenStack 实施经验分享系列的第 2 篇. OpenStack 通过 Glance 镜像部署 instance,上一节我们介绍了 linux 镜像制作方法,windows 镜像与 lin ...
- Java编程规范(一)
最近在看一本有关Java编程规范的书,书中精炼阐述了使用java语言时应该遵循的一些原则.接下来的一段时间我将在这里总结我的学习内容,也希望这一系列文章能够对有需要的人有所帮助. 不考虑任何编码规范的 ...
- windows 地址空间分配
当系统创建一个进程同时为其创建它地址空间时,此地址空间中大部分都是闲置的.为了使用这部分地址空间,我们必须调用VirtualAlloc来分配其中的区域.分配区域的操作被称为预定. 当应用程序预定地址空 ...
- 浅谈Jasmine的安装和拆卸
单元测试中,我们通常需要在执行测试代码前准备一些测试数据,建立测试场景,这些为了测试成功而所做的准备工作称为Test Fixture.而测试完毕后也需要释放运行测试所需的资源.这些铺垫工作占据的代码可 ...
- 【转】搜索引擎选择: Elasticsearch与Solr
原文地址:http://i.zhcy.tk/blog/elasticsearchyu-solr/ Elasticsearch简介 Elasticsearch是一个实时的分布式搜索和分析引擎.它可以帮助 ...
- Spark集群搭建_Standalone
2017年3月1日, 星期三 Spark集群搭建_Standalone Driver: node1 Worker: node2 Worker: node3 1.下载安装 下载地址 ...
- java中的ConcurrentModificationException异常
先看这样一段代码: List<String> list = new ArrayList<String>(); list.add("1"); list.add ...
- Extjs中grid前端分页使用PagingMemoryProxy【二】
在项目中遇到Grid前端分页,本人也是刚接触extjs没多久,为了实现效果,一直找了很久才实现出来,对于代码中的一些也不能详细的说明出来, 不知道能不能帮助到遇到同样问题的朋友,所以将例子代码 ...
- 2751: [HAOI2012]容易题(easy)
2751: [HAOI2012]容易题(easy) Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 1087 Solved: 477[Submit][ ...