详细分析HTML5新增的元素

作者：手机用户2502878261 | 来源：互联网 | 2013-04-23 13:59

对于HTML的渲染，浏览器一直停留在1999年的水平。为此，HTML5是一个实用主义方案，这样不仅可以继续处理这么多年来散落在世界各个角落的HTML，也可以让浏览器厂商更容易添加新特性。这就叫degradegracefully(优雅降级)。让我们来看看HTML5增加的一些新元">

　　对于HTML的渲染，浏览器一直停留在1999年的水平。为此，HTML 5是一个实用主义方案，这样不仅可以继续处理这么多年来散落在世界各个角落的HTML，也可以让浏览器厂商更容易添加新特性。这就叫degrade gracefully(优雅降级)。让我们来看看HTML 5增加的一些新元素。

　　HTML 5结构元素

　　这真是大快人心。目前，我们定义结构只能通过一个“万能”的div, 试图通过设置它的特性id的值如header, footer, sidebar等来分别表达头部，底部或者侧栏等。有了它们，代码编写者不再需要为id的命名费尽心思，对于手机、阅读器等设备更有语义的好处。HTML 5增加了新的结构元素来表达这些最常用的结构：

　　◆section: 这可以表达书本的一部分或一章，或者一章内的一节

　　◆header: 页面主体上的头部。并非head元素

　　◆footer: 页面的底部(页脚)，可以是一封邮件签名的所在

　　◆nav: 到其他页面的链接集合

　　◆article: 诸如blog, 杂志，纲要等之中的一条独立记录。

　　举个例子，一个blog的首页，用HTML 5写的话，可以是这样(有省略)：

> 
<HTML> 
<head> 
<title>realazytitle> 
head> 
<body> 
<header><h1>Php100h1>header> 
<section> 
<article> 
<h2><a href="http://www.php100.com" mce_href="http://www.php100.com">标题a>h2> 
<p>内容在此...（省略n字）p> 
article>   
<article> 
<h2><a href="http://www.php100.com" mce_href="http://www.php100.com">标题2a>h2>   
<p>内容2在此...（省略n字）p> 
article>     ...     section> 
<footer> 
<nav> 
<ul>   
<li><a href="http://www.php100.com" mce_href="http://www.php100.com">导航1a>li>       <li><a href="http://www.php100.com" mce_href="http://www.php100.com">导航2a>li> 
ul> 
nav> 
<p>© 2007 Memoryp> 
footer>   
body> 
HTML>

　　HTML还增加以下三个块级元素：

　　◆aside

　　◆figure/code>

　　◆dialog

　　aside可以用以表达注记、贴士、侧栏、摘要、插入的引用等诸如作为补充主体的内容。比如这样表达blog的侧栏：

<aside> 
<h3>最新文章h3> 
<ul> 
<li><a href="http://www.lvtao.net/" mce_href="http://www.lvtao.net">文章标题a>li> 
ul> 
aside>

　　figure元素表示一个有说明的块级图片。比如：

dialog元素用于表达人们之间的对话。在HTML 5中，dt用于表示说话者，而dd则用来表示说话者的内容。如：

<dialog>   <dt>phpdt>   <dd>100dd>   <dt>php100dt>   <dd>

　　我现在需要点空……行内（inline）的语义元素，m元素用来标记一些不是那么需要着重强调的文本。现在尚有争议，可能最终会改为mark.

time元素如其名，用来表达时间。它需要一个datetime的特性来标明机器能够认识的时间，如：

　　2008年8月8日晚上8时8分8秒meter元素表达特定范围内的数值。可用于薪水、百分比、分数等。比如：

很遗憾地告诉你，我只有150cm它还有6个特性来表达各方面的含义，比如：

<p>您的分数是：<meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+meter>.p>

　　还有一个progress，也是义如其名，用以表达进度：

　　目标完成度：40%嵌入多媒体

　　新增video和audio元素。顾名思义，分别是用来插入视频和声音的。至于格式，交由浏览器实现，HTML再也不需要特别的代码去播放特定的格式。就像img一样，不管是png, jpg还是gif都可以显示。值得注意的是，它们可以包含内容。比如，可以把歌词放到某段歌曲中去：

<audio src="谁人伴你睡.mp3" mce_src="谁人伴你睡.mp3">   <p>泪枯干p>   <p>难忍怎么委屈自已p>   <p>曾经有一刻悲与喜p>   ... audio>

交互性

HTML 5同时也叫Web Applications 1.0, 因此也进一步发展交互能力。这些标签就是为提高页面的交互体验而生：

details

datagrid

command

details用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如点击）与legend交互才显示出来。这跟现在各种通过Javascript隐藏一段内容，在点击后才显示出来的做法有些类似。比如：

一句话记录生活中的点点滴滴，

交流与分享，拉近你和朋友，支持 MSN/GTalk/QQ、短信、手机 WAP

它可以有一个open的特性，用来显示细节与否。

datagrid用来控制数据，可以由用户或者脚本来更新。

menuHTML 2就存在了，不过HTML 4把它废弃了。HTML 5废物利用，并在期内加上command元素。

推荐阅读

md5
PHP中元素的计量单位是什么？

PHP中元素的计量单位是什么？ ... [详细]

蜡笔小新 2024-11-01 15:06:51
replace
PHP中处理回车换行符转换的有效方法与技巧

PHP中处理回车换行符转换的有效方法与技巧 ... [详细]

蜡笔小新 2024-11-01 14:46:54
php
ASP.NET MVC项目实战：解决Ajax请求500错误及多表数据查询问题

在ASP.NET MVC项目中，通过实战解决了Ajax请求500错误及多表数据查询的问题。具体而言，将页面分为两个部分，用户点击右侧导航栏时，通过Ajax请求动态加载数据，并在右侧显示相应的页面内容。最初尝试使用Partial Action方法，但遇到了500错误。通过详细排查和调试，最终成功解决了这一问题，并实现了预期功能。此外，还优化了多表数据查询的性能，确保系统的高效运行。 ... [详细]

蜡笔小新 2024-11-01 14:23:52
php
优化后的标题：自定义TextView实现按下与焦点变化时动态调整字体颜色效果

通过自定义 `TextView`，实现了在用户点击或焦点变化时动态调整字体颜色的效果。该方法利用了 `ColorStateList` 和 `Selector` 资源文件，确保了界面交互的流畅性和视觉效果的提升。具体实现中，通过重写 `onTouchEvent` 和 `onFocusChanged` 方法，精确控制了颜色变化的时机和状态。此外，还对性能进行了优化，确保在高频率操作下依然保持高效响应。 ... [详细]

蜡笔小新 2024-11-01 14:08:50
php
跑步时常见的7个误区及专业改善建议

尽管许多人认为跑步是一项简单的运动，但实际上它涉及诸多专业知识。不正确的跑步方式不仅会降低锻炼效果，还可能引发伤害。例如，穿着不合脚或过于陈旧的跑鞋，会导致足部支撑不足，增加受伤风险。此外，跑步姿势不当、热身不足、过度训练等问题也同样值得关注。本文将详细介绍七大常见跑步误区，并提供专业的改进建议，帮助跑者避免这些问题，提高运动效率和安全性。 ... [详细]

蜡笔小新 2024-11-01 14:01:24
php
MySQL基础教程：第六章多表查询详解与实践

在第六章中，我们将深入探讨MySQL中的多表查询技术，包括联结查询和子查询。联结查询通过将两个或多个表进行连接，基于连接条件生成结果集。常见的联结类型有内联结、外联结和全外联结。交叉联结（CROSS JOIN）虽然使用较少，但其原理是生成所有可能的组合，类似于笛卡尔积的概念。此外，子查询则是在一个查询语句中嵌套另一个查询，用于获取更复杂的数据集。本章将通过实例详细讲解这些查询方法的应用和优化技巧。 ... [详细]

蜡笔小新 2024-11-01 13:38:07
php
解决基于XML配置的MyBatis在Spring整合中出现“无效绑定语句（未找到）：com.music.dao.MusicDao.findAll”问题的方法

在将Spring与MyBatis进行整合时，作者遇到了“无效绑定语句（未找到）：com.music.dao.MusicDao.findAll”的问题。该问题主要出现在使用XML文件配置DAO层的情况下，而注解方式配置则未出现类似问题。作者详细分析了两个配置文件之间的差异，并最终找到了解决方案。本文将详细介绍问题的原因及解决方法，帮助读者避免类似问题的发生。 ... [详细]

蜡笔小新 2024-11-01 11:37:01
int
深入解析设计模式之原型模式的应用与实现

本文深入探讨了原型模式在软件设计中的应用与实现。原型模式通过使用已有的实例作为原型来创建新对象，而不是直接通过类实例化。这种方式不仅简化了对象的创建过程，还提高了系统的灵活性和效率。具体来说，原型模式涉及一个支持克隆功能的接口或基类，子类通过实现该接口来提供具体的克隆方法，从而实现对象的快速复制。此外，文章还详细分析了原型模式的优缺点及其在实际项目中的应用场景，为开发者提供了实用的指导和建议。 ... [详细]

蜡笔小新 2024-11-01 10:13:25
hash
Java集合框架的使用方法与性能对比分析

本文详细探讨了Java集合框架的使用方法及其性能特点。首先，通过关系图展示了集合接口之间的层次结构，如`Collection`接口作为对象集合的基础，其下分为`List`、`Set`和`Queue`等子接口。其中，`List`接口支持按插入顺序保存元素且允许重复，而`Set`接口则确保元素唯一性。此外，文章还深入分析了不同集合类在实际应用中的性能表现，为开发者选择合适的集合类型提供了参考依据。 ... [详细]

蜡笔小新 2024-11-01 09:51:38
int
优化Apache配置文件：httpd.conf与.htaccess的深入解析

本文深入解析了 Apache 配置文件 `httpd.conf` 和 `.htaccess` 的优化方法，探讨了如何通过合理配置提升服务器性能和安全性。文章详细介绍了这两个文件的关键参数及其作用，并提供了实际应用中的最佳实践，帮助读者更好地理解和运用 Apache 配置。 ... [详细]

蜡笔小新 2024-11-01 04:26:35
php
POJ 2482：窗口中的星星 —— 基于线段树、离散化与扫描线算法的优化解决方案

题目描述非常吸引人。每颗星星可以通过其在窗口的左下角和右上角位置构建两条扫描线，从而将问题转化为区间增减和求最大值的操作。需要注意的是，位于边界的星星不应计入结果，因此在处理时应分别对左右边界进行适当的增减调整。此外，利用线段树和离散化技术可以显著提高算法效率，确保在大规模数据下的性能表现。 ... [详细]

蜡笔小新 2024-10-31 23:19:19
php
PHP应用性能优化实战指南：从理论到实践的全面解析

在《PHP应用性能优化实战指南：从理论到实践的全面解析》一文中，作者分享了一次实际的PHP应用优化经验。文章回顾了先前进行的一次优化项目，指出即使系统运行时间较长后出现的各种问题和性能瓶颈，通过采用一些通用的优化策略仍然能够有效解决。文中不仅详细阐述了优化的具体步骤和方法，还结合实例分析了优化前后的性能对比，为读者提供了宝贵的参考和借鉴。 ... [详细]

蜡笔小新 2024-10-31 20:54:49
audio
在JavaScript中实现电子邮件和密码的输入验证 - Implementing Input Validation for Email and Password in JavaScript

本文旨在构建一个JavaScript函数，用于对用户输入的电子邮件地址和密码进行有效性验证。该函数将确保输入符合标准格式，并检查密码强度，以提升用户账户的安全性。通过集成正则表达式和条件判断语句，该方法能够有效防止常见的输入错误，同时提供即时反馈，改善用户体验。 ... [详细]

蜡笔小新 2024-10-24 14:23:11
chat
渲染所有可能的元素或根据请求渲染 - Render all possible elements or render on request

SoIhaveanappthathasarightsidebarwhosevisibilityistoggledviaabutton.Inthatsidebar ... [详细]

蜡笔小新 2024-10-19 08:14:13
function
javascript学习笔记之10个原生技巧

javascript学习笔记之10个原生技巧-1、原生JavaScript实现字符串长度截取复制代码代码如下:functioncutstr(str,len){ vartemp; ... [详细]

蜡笔小新 2024-10-16 14:07:57

手机用户2502878261

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章