热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

html5新标签布局应用指南

html5中为了便于设计者的网站布局新添加了一些标签,本文主要讲解这些标签的实际应用方法。大多数前端的朋友在设计网站时主要应用<div>标签构造盒子进行布局,这是种非常高效的方法,可以将整

html5中为了便于设计者的网站布局新添加了一些标签,本文主要讲解这些标签的实际应用方法。

大多数前端的朋友在设计网站时主要应用

标签构造盒子进行布局,这是种非常高效的方法,可以将整体的布局分拆成为各个部分的布局。在html5中我们可以省去更多的时间对盒子的属性进行设置。下面两图是对传统方法与HTML5布局方法的对比,可以看出,两种方法都能实现我们的设计思想。


alt
="Bok Choi" />
<figcaption>Bok Choifigcaption>
figure>
<hgroup>
<h2>Japanese Vegetarianh2>
<h3>Five week course in Londonh3>
hgroup>
<p>A five week introduction to traditional
Japanese vegetarian meals, teaching you a
selection of rice and noodle dishes.
p>
article>
a>

:figure提出的主要原因是在传统的html语言中我们对内容的补充说明需要利用其它标签,而figure与figcaption搭配使用可以增加代码的可读性(没错就是只有这个功能)

<figure>
<img src="/macaque.jpg" alt="Macaque in the trees">
<figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href="http://www.flickr.com/photos/rclark/">Richard Clarka>figcaption>
figure>

这些新的元素在旧版本浏览器中会被当做行内元素,所以为了保证页面的正常显示,可以加入以下代码:

css:
header, section, footer, aside, nav, article, figure
{
display: block;}
html:

 HTML的主要有点是能够让开发者更加语义化的开发页面,比如在HTML之前各个开发者对header都可能会按自己的习惯命名,而HTML5将头部都统一的命名为了,避免了开发者之间代码的复杂性。

 


推荐阅读
  • 本文详细介绍了 React 中的两个重要 Hook 函数:useState 和 useEffect。通过具体示例,解释了如何使用它们来管理组件状态和处理副作用。 ... [详细]
  • 本文详细解析了HTML5中nav标签的功能及其在网页设计中的应用,帮助开发者更好地理解和使用这一标签来提升网站的结构化水平。 ... [详细]
  • 本文总结了在使用HTML5 Canvas进行开发时常见的错误及其解决方案,帮助开发者避免常见的陷阱,提高开发效率。 ... [详细]
  • 利用HTML5 Canvas构建商场监控系统的实践案例
    本文详细探讨了如何运用HTML5的Canvas技术来构建商场监控系统,旨在为相关领域的开发者提供实用的技术指导和灵感。文章不仅提供了具体的代码示例,还深入分析了实现过程中可能遇到的问题及解决方案。 ... [详细]
  • 前端技术分享——利用Canvas绘制鼠标轨迹
    作为一名前端开发者,我已经积累了Vue、React、正则表达式、算法以及小程序等方面的技能,但Canvas一直是我的盲区。因此,我在2018年为自己设定了一个新的学习目标:掌握Canvas,特别是如何使用它来创建CSS3难以实现的动态效果。 ... [详细]
  • H5技术实现经典游戏《贪吃蛇》
    本文将分享一个使用HTML5技术实现的经典小游戏——《贪吃蛇》。通过H5技术,我们将探讨如何构建这款游戏的两种主要玩法:积分闯关和无尽模式。 ... [详细]
  • Cocos2d-HTML5初学者指南:第一部分基础知识
    本文旨在为初学者提供Cocos2d-HTML5的基础知识入门指南。虽然作者在交大期间学习了基础的Web技术和AS3游戏开发,但感觉这些知识与实际应用仍有差距。几年前曾接触过Android开发,但由于缺乏C++和Objective-C的背景,未能深入。本篇将详细介绍Cocos2d-HTML5的核心概念和技术要点,帮助读者快速上手并掌握游戏开发的基本技能。 ... [详细]
  • HTML5大文件传输技术深度解析与实践分享
    本文深入探讨了HTML5在Web前端开发中实现大文件上传的技术细节与实践方法。通过实例分析,详细讲解了如何利用HTML5的相关特性高效、稳定地处理大文件传输问题,并提供了可供参考的代码示例和解决方案。此外,文章还讨论了常见的技术挑战及优化策略,旨在帮助开发者更好地理解和应用HTML5大文件上传技术。 ... [详细]
  • 本文介绍了如何利用摄像头捕捉图像,并将捕获的图像数据保存为文件。通过详细的代码示例,展示了摄像头调用的具体实现方法,适用于多种应用场景,如安全监控、图像处理等。 ... [详细]
  • HTML5 sever-sent onmessage方法不执行,怎么回事,求大神指点!做服务器广播,页面接收!
    我想实现HTML5sever-sent实现服务器发送消息,然后页面来获取消息,网上找了好多方法,最终找到了一个能用的,但是消息获取页面不执行onmessage方法,求大神指点!本人用.net写的,代 ... [详细]
  • 绑定完成的汗青绑定的基础是propertyChange事宜。怎样得知viewModel成员值的转变一直是开辟MVVM框架的主要题目。主流框架的处置惩罚有一下三大类:别的开辟一套AP ... [详细]
  • 一、HTML5新增属性1.1、contextmenucontextmenu的作用是指定右键菜单。<!DOCTYPEhtml><html><head> ... [详细]
  • 媒介这里大部份是本身碰到过的状况,另有一部份自创了偕行的文章,假如人人有碰到别的坑,迎接提出来一同研讨。学问要点1.Meta标签1.制止用户缩放页面,页面强迫让文档的宽度与装备的宽 ... [详细]
  • Html5-Canvas实现简易的抽奖转盘效果
    本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
  • WebSocket与Socket.io的理解
    WebSocketprotocol是HTML5一种新的协议。它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送 ... [详细]
author-avatar
IKUN
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有