浅谈HTML5网站制作布局中的几个基本要素

  

  现今互联网已经有很多从seo或者设计的角度分析HTML5所带来的突破的信息。尽管据预测HTML5在2022年前不可能得到完全的支持,我们没有理由不去熟悉一些关于HTML5的基本知识。

  HTML5采用了新的语义丰富的元素,这些都可以很好的传达web设计者以及浏览器的目的。例如header,footer,aside,nav等标签,这些标签可以让我们构架网页的结构,允许浏览器就如何显示页面获得更多的控制。现今HTML5遇到的最大的问题就是浏览器的兼容问题,一旦几个主流的浏览器完成了对HTML5的兼容,HTML5站点的加载速度将更快,网站的导航将更加的容易,页面的内容也将更加的丰富。

  下面笔者就简单的列举几个html5中网站制作布局的基本要素:

  

  header:头元素,该元素旨在作为网页的一个片段或者增个页面的介绍信息的“容器”。它可以包含网站的名称、标记线、广告口号或者公司的标志。

  nav:这个元素很明显是应用于创建导航或者菜单栏中的,但是关键的一点是,并不是所有在web页面的链接都要必须在nav元素内,只有那些主导航栏的链接才应该包含在该元素内。

  section:对于section,我们可以说相对于div的无语义,section是带有语义的div。该标签一般应用于文章的章节、标签对话框中的标签页、或者论文中有编号的部分。

  aside:这一元素代表的是与主要内容相关的内容,但并不属于主要内容的一部分。通常应用于引用于,侧边栏相关链接,广告等等。

  footer:此元素的内容是包含更多关于他的父元素的内容。footer置于body之后将可以提供有关该页面的其他的信息内容。例如作者的一些小传信息,到相关文章的链接或者版权信息等等。此元素也可以被被应用于body之中不同的段中,可以给页面中不同段一些特定的其他信息。

  article:这一个元素所代表的内容也是显而易见的,其主要应用于主内容中。它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。例如,一篇博客文章中,包含用户提交的评论的 article 就应该潜逃在包含博客文章 article 之中。

  HTML5可以说是一个亮眼的web设计语言。新增加的独特的标记,更直观的新元素让web设计更简单直观,塑造一个易识别有风格的网站布局将不再是一件难事。文章由江宁网站制作 http://www.cootem.net/ 原创,转载请保留我们的地址。

时间: 2024-09-12 13:33:54

浅谈HTML5网站制作布局中的几个基本要素的相关文章

浅谈html5 响应式布局

 一.什么是响应式布局?       响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.       这个概念是为解决移动互联网浏览而诞生的.响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用大势所趋来形容也不为过.  随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式. 二.响应式布局有哪些优点和缺点?   优点:

浅谈企业网站现阶段应用中出现的问题

中介交易 SEO诊断 淘宝客 云主机 技术大厅 企业要走信息化道路,首先要上网.那么什么是企业上网?我敢说,到现在为止,还有很多企业和站长们大脑中仍然是很模糊的.何谓企业上网呢?是指企业利用Internet/Intranet等计算机等通信技术,在因特网上建立自己的网站,通过因特网宣传产品和服务,与用户及其他企业建立实时互动的信息交换,达到生产.流通.交换.消费各个环节的电子商务,最终实现企业经营管理全面信息化.企业上网的好处在于,第一.充分利用网上资源;第二.开设电子交易;第三.与顾客更好的互动

浅谈小型网站推广优化中需要注意的几点

虽然现在大家都再做地方站,做行业站,甚至做门户站,但是相信仍然还会有很多人坚持着自己那不大不小的个人网站,或者称作垃圾站也好,个人网站也罢,今天在这里所指的个人网站就是工作之余凭一个人之力做起来的"小网站"也许能给你带去稍许的收入也许只无尽的折腾而没有所谓的回报,虽然可以对别人说你是个站长,因为你拥有你自己的网站,但是却不是你所谓的人生奋斗的事业,就像笔者http://www.wgzhongjia.com这个网站就是这种类型的,今天要写的是关于最近网站,由于不是专职站长,只是处于对网络

浅谈:在网站SEO优化中如何脱颖而出

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 现在有不少的新网站像雨后春笋一样的冒出来,相对于我们站长在同类型的网站中竞争更加是一天比一天大既然竞争越来越大我们站长就应该思考如何在众多网站中能够脱颖而出获得较高的排名和权重,今天我们就要结合一些比较实用的方法和经验来说说网站SEO优化. 我们站长都知道SEO优化对于一个网站来说是非常重要的一个操作步骤,而且对于网站SEO优化也是一个长期的

浅谈:网站优化排名中的关键词等级制度

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断淘宝客 站长团购 云主机 技术大厅 欲先行其事,必先利其器.在网站优化排名过程中,掌握了正确的优化方法,了解了准确的优化信息你就能够走出推广误区,就能够从根本上解决网站排名问题,不必在为网站排名而纠结,被不厌其烦的询问.如何来真正做好网站排名呢?第一步我们要明白优化排名中关键词的等级制度划分. 之前笔者小丹讲过关于网站排名周期的问题,而其中针对关键词的排名周期是每位SE

重新认识网站制作过程中采用div+css的布局方式

伴随着"div+css"在互联网的流行,"网站重构"的春风吹遍了华夏大地,一时间互联网上风声鹤唳,"div+CSS"俨然已成为一种网站制作过程中采用一种布局的"时尚",数一万计的网站都不约而同地开始了自己的"网站重构".然而打开这些网站的源代码,看到哪些形形色色源代码,却时常令人哑然失笑-- 当我们看到有嵌套6.7层的div布局,有成百上千的表现css--现在关于div+css标准的书籍也是越来越多,除了极

浅谈学校网站的建设

浅谈学校网站的建设      在包罗万象的网络世界里,要制作一个具有学校特色的网页是需要一定方法与技巧.下面我对学校网页的制作浅谈自己的几点意见. 一:定位好网站的主题和名称 1.主题要有特色而且精巧.定位要有学校特色,内容要精巧.如果想制作一个包罗万象的站点,把所有认为精彩的东西都放在上面,那么往往会事与愿违,给人的感觉是没有主题,没有特色,样样有却样样都很肤浅,因为不可能有那么多的精力去维护它.网络的最大特点就是新和快,目前最热门的主页都是天天更新甚至几小时更新一次.最新的调查结果也显示,网

浅谈web网站架构演变过程

原文:浅谈web网站架构演变过程 前言 我们以javaweb为例,来搭建一个简单的电商系统,看看这个系统可以如何一步步演变.   该系统具备的功能:   用户模块:用户注册和管理 商品模块:商品展示和管理 交易模块:创建交易和管理    阶段一.单机构建网站 网站的初期,我们经常会在单机上跑我们所有的程序和软件.此时我们使用一个容器,如tomcat.jetty.jboos,然后直接使用JSP/servlet技术,或者使用一些开源的框架如maven+spring+struct+hibernate.

浅谈地方网站的建设与推广

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 浅谈地方网站的建设与推广:故名思义,地方站即是针对某个地区而建立的网站.而地方站同样分为综合类和偏特色类两种. 既然选择建的是地方站,那么前期无论是网站主题定位还是到运营后的推广宣传,都应高度集中精神在本地化这方面下功夫. 就地方站的主题定位而言,无论是建综合类站点还是建偏特色类站点,首先都要了解本地文化,搜寻到本地有特色的内容.资源.项目才