1. 新的Doctype声明
<!DOCTYPE html>
2. <figure>标签
看看下面一段简单的代码:
<img alt="About image" src="path/to/image">
<h6>image of Mars.</h6>
遗憾的是,这里的h6标签和img标签好像没有什么关系,语义不够明确。HTML 5意识到了这一点,于是就采用了<figure>标签。当<figure>结合<figcaption>标签的使用,可以让h6标签和img标签组合起来,代码就更具语义化了。
<figure>
<img alt="about image" src="path/to/image">
<figcaption>
<h6>This is an image of something interesting. </h6>
</figcaption>
</figure>
3. 重新定义<small>
不久前,我使用了<small>标签来创建与logo相关的副标题。但是在HTML 5中重新定义了<small>标签,使之更能表现语义化,在<small>的字号都会变小,想想如果这个标签用于网站的底部的版权信息还是个不错的做法。
4. 去掉了Javascript和CSS标签的type属性
<link href="path/to/stylesheet.css">
<script src="path/to/script.js"></script>
5. 支持使用单,双引号
6. 使网页内容可以编辑
<ul contenteditable="true">
<li>悼念遇难香港同胞 </li>
<li>深圳特区30周年</li>
<li>伊春空难</li>
</ul>
7、新的表单,具有校验功能
<input> type:search mail url
8. 占位符
文本框中的占位符(看看本博的搜索框效果)有利于提升用户体验,之前,我们只能依靠JS来实现占位符的效果,在HTML 5中新增了占位符属性placeholder。
<input type="email" name="email" placeholder="doug@givethesepeopleair.com">
9. 本地存储
HTML 5的本地存储功能,可以让现代浏览器“记住”我们输入的,就算浏览器关闭和刷新也不会受影响。虽然这个功能有些浏览器不支持,但是IE8, Safari 4, 还有 Firefox 3.5还是支持这个功能的,你可以测试下。
10. 更有语义的header和footer等标签
11、HTML5 canvas具有画图功能的标签
HTML页面代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="UTF-8" src="js/canvas.js"></script>
</head>
<body>
<img src="http://www.google.com.hk/images/nav_logo82.png" id="imgid">
<canvas id="canvas">您的浏览器不支持canvas标签</canvas>
<button type="button" onclick="drawPath()">画路径</button>
</body>
</html>
JavaScript代码
function get2DContext(){
var canvasPointer = document.getElementById("canvas");
return canvasPointer.getContext("2d")
}
function drawPath() {
var ctx = get2DContext();
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(100, 75);
ctx.lineTo(100, 35);
ctx.fill();
}
引用
http://www.css3-html5.com/HTML5-Tutorial/20110119621.html
http://www.w3school.com.cn/html5/html5_reference.asp
- 大小: 14.6 KB
- 大小: 18.3 KB
- 大小: 9.7 KB
分享到:
相关推荐
### HTML简介及常用标签(中) #### 一、标题标签(`h1`—`h6`) 在HTML中,`h1`—`h6`标签被用来定义不同的标题等级,其中`h1`表示最高级别的标题,而`h6`则表示最低级别的标题。这些标签通常用于网页结构中的...
### HTML5新增标签和属性详解 #### 一、HTML5新增标签 HTML5引入了许多新的标签,这些标签不仅增强了网页的语义性,还提供了更丰富的功能。下面将详细介绍几个重要的新增标签及其用途。 ##### 1. `<article>` - *...
在本节课程“第01章【HTML5简介】-第04节:HTML结构标签”中,我们将深入探讨HTML5中的结构元素,这些元素对于构建网页的语义化结构至关重要。HTML5作为现代Web开发的标准,引入了一系列新的标签,旨在帮助开发者更...
### HTML标签属性详解 #### 一、HTML基础知识简介 ...HTML文档由多个标签组成,这些标签定义了文档的结构和内容...需要注意的是,随着HTML5的普及,部分标签和属性已被弃用或替代,因此建议在开发时遵循最新的HTML标准。
### HTML5简介与使用方法详解 #### 一、HTML5简介 HTML5是HyperText Markup Language第五版的简称,它是Web开发领域的一项重要标准。自从1999年12月发布HTML4.01之后,HTML5及其相关标准成为了推动Web标准化运动的...
### Java正则表达式过滤HTML标签 在处理文本数据时,经常会遇到需要从HTML文档中提取纯文本内容的需求。为了去除HTML标记并保留有意义的文字部分,可以利用Java中的正则表达式来实现这一功能。本篇文章将详细介绍...
HTML5引入了新的标签,如`<article>`、`<aside>`、`<audio>`等,废弃了一些过时或不必要的标签,如`basefont`、`frame`、`applet`等。 Photoshop是Adobe公司的一款图像处理软件,对于网页设计来说,它常用于创建和...
尽管HTML5包含了一百多种新标签,但开发者并不需要立即掌握所有这些。了解并熟练使用与业务需求紧密相关的标签是更重要的。例如,如果你经常处理多媒体内容,那么`<audio>`、`<video>`和`<canvas>`标签将是你关注的...
HTML5 的结构性标签体系是这场变革的核心,它使得网页的构建更加清晰,更利于人和机器理解。 首先,HTML5 的 DOCTYPE声明变得更加简洁明了。传统的XHTML头部代码通常复杂且难以记忆,而HTML5的DOCTYPE仅需`<!...
HTML5在结构上引入了一系列新的语义化标签,旨在让网页内容更加清晰、易于理解和解析,同时优化了与用户的交互体验。 首先,HTML5的DOCTYPE声明发生了重大变化。在XHTML中,DOCTYPE声明通常是一个长串字符,而在...
1. ["HTML5 -template-标签元素简介" - 张鑫旭的文章](HTML5 -template-标签元素简介 « 张鑫旭-鑫空间-鑫生活.url) 2. ["HTML 5标准中最新引入的template标签介绍" - jackyrong的ITeye博客](HTML 5标准中最新引入的...
### 三、常用HTML5标签详解 #### 1. `<header>` - **用途**:表示页面或区段的页眉,通常包含导航链接、网站标志等内容。 - **示例代码**: ```html 网站标题 <li><a href="#home">首页</a></li> <li><a ...
【前端设计师个人简介模板下载】是一款专为前端设计师量身定制的单页HTML5个人简介网页模板,旨在帮助设计师展示自己的专业技能、项目经验和个人风采。这个模板采用现代设计风格,融合了HTML5的先进技术,提供了丰富...
在这个“HTML5+CSS3期末大作业——城市简介源码”项目中,学生或开发者将有机会实践这两门技术,构建一个介绍特定城市的网页。 HTML5作为最新的超文本标记语言版本,引入了许多新特性,旨在提高网页的交互性和可用...
【JSP标签简介】 JSP(JavaServer Pages)是一种基于Java技术的动态网页开发标准,它允许开发者在HTML代码中嵌入Java代码,以便在服务器端处理数据并生成动态网页内容。为了降低JSP开发的复杂性和维护成本,JSP引入...
- **HTML简介**:HTML是一种用于创建和呈现网页内容的标记语言。 - **HTML的基本结构**:通常包含`<html>`、`<head>`和`<body>`等标签。 - **HTML的标记**:如`<p>`表示段落,`<a>`表示链接等。 - **1.2 一个...
### Struts2 表单标签简介与实例 #### 一、引言 在Web应用程序的开发过程中,表单是用户与系统交互的重要组成部分。Struts2框架为了简化表单的处理,提供了一系列丰富的表单标签,这些标签不仅包含了常见的HTML表单...
在第01章【HTML5简介】-第02节:HTML语言介绍中,我们将深入探讨HTML的基本概念、结构以及它在HTML5中的新特性。 HTML语言的核心是通过一系列的标签来组织网页内容,这些标签描述了内容的类型和样式。例如,`<html>...