`

html5标签简介

 
阅读更多
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简介及常用标签(中)

    ### HTML简介及常用标签(中) #### 一、标题标签(`h1`—`h6`) 在HTML中,`h1`—`h6`标签被用来定义不同的标题等级,其中`h1`表示最高级别的标题,而`h6`则表示最低级别的标题。这些标签通常用于网页结构中的...

    HTML5新增标签和属性简介

    ### HTML5新增标签和属性详解 #### 一、HTML5新增标签 HTML5引入了许多新的标签,这些标签不仅增强了网页的语义性,还提供了更丰富的功能。下面将详细介绍几个重要的新增标签及其用途。 ##### 1. `&lt;article&gt;` - *...

    第01章【HTML5简介】-第04节:HTML结构标签

    在本节课程“第01章【HTML5简介】-第04节:HTML结构标签”中,我们将深入探讨HTML5中的结构元素,这些元素对于构建网页的语义化结构至关重要。HTML5作为现代Web开发的标准,引入了一系列新的标签,旨在帮助开发者更...

    html标签属性大全

    ### HTML标签属性详解 #### 一、HTML基础知识简介 ...HTML文档由多个标签组成,这些标签定义了文档的结构和内容...需要注意的是,随着HTML5的普及,部分标签和属性已被弃用或替代,因此建议在开发时遵循最新的HTML标准。

    html5简介和简单的使用方法

    ### HTML5简介与使用方法详解 #### 一、HTML5简介 HTML5是HyperText Markup Language第五版的简称,它是Web开发领域的一项重要标准。自从1999年12月发布HTML4.01之后,HTML5及其相关标准成为了推动Web标准化运动的...

    java正则表达式过滤html标签

    ### Java正则表达式过滤HTML标签 在处理文本数据时,经常会遇到需要从HTML文档中提取纯文本内容的需求。为了去除HTML标记并保留有意义的文字部分,可以利用Java中的正则表达式来实现这一功能。本篇文章将详细介绍...

    HTML简介及常用标签(下)

    HTML5引入了新的标签,如`&lt;article&gt;`、`&lt;aside&gt;`、`&lt;audio&gt;`等,废弃了一些过时或不必要的标签,如`basefont`、`frame`、`applet`等。 Photoshop是Adobe公司的一款图像处理软件,对于网页设计来说,它常用于创建和...

    HTML5的标签的代码的简单介绍 HTML5标签的简介

    尽管HTML5包含了一百多种新标签,但开发者并不需要立即掌握所有这些。了解并熟练使用与业务需求紧密相关的标签是更重要的。例如,如果你经常处理多媒体内容,那么`&lt;audio&gt;`、`&lt;video&gt;`和`&lt;canvas&gt;`标签将是你关注的...

    HTML5+CSS3 HTML5结构性标签体系.pdf

    HTML5 的结构性标签体系是这场变革的核心,它使得网页的构建更加清晰,更利于人和机器理解。 首先,HTML5 的 DOCTYPE声明变得更加简洁明了。传统的XHTML头部代码通常复杂且难以记忆,而HTML5的DOCTYPE仅需`&lt;!...

    HTML5+CSS3 HTML5结构性标签体系.docx

    HTML5在结构上引入了一系列新的语义化标签,旨在让网页内容更加清晰、易于理解和解析,同时优化了与用户的交互体验。 首先,HTML5的DOCTYPE声明发生了重大变化。在XHTML中,DOCTYPE声明通常是一个长串字符,而在...

    HTML5的template标签 详细介绍+示例源代码.zip

    1. ["HTML5 -template-标签元素简介" - 张鑫旭的文章](HTML5 -template-标签元素简介 « 张鑫旭-鑫空间-鑫生活.url) 2. ["HTML 5标准中最新引入的template标签介绍" - jackyrong的ITeye博客](HTML 5标准中最新引入的...

    HTML5教程 常用标签使用说明

    ### 三、常用HTML5标签详解 #### 1. `&lt;header&gt;` - **用途**:表示页面或区段的页眉,通常包含导航链接、网站标志等内容。 - **示例代码**: ```html 网站标题 &lt;li&gt;&lt;a href="#home"&gt;首页&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a ...

    前端设计师个人简介模板下载是一款单页html5个人简介网页模板。.zip

    【前端设计师个人简介模板下载】是一款专为前端设计师量身定制的单页HTML5个人简介网页模板,旨在帮助设计师展示自己的专业技能、项目经验和个人风采。这个模板采用现代设计风格,融合了HTML5的先进技术,提供了丰富...

    HTML5+CSS3期末大作业——城市简介源码

    在这个“HTML5+CSS3期末大作业——城市简介源码”项目中,学生或开发者将有机会实践这两门技术,构建一个介绍特定城市的网页。 HTML5作为最新的超文本标记语言版本,引入了许多新特性,旨在提高网页的交互性和可用...

    jsp标签简介.docx

    【JSP标签简介】 JSP(JavaServer Pages)是一种基于Java技术的动态网页开发标准,它允许开发者在HTML代码中嵌入Java代码,以便在服务器端处理数据并生成动态网页内容。为了降低JSP开发的复杂性和维护成本,JSP引入...

    即用即查HTML+CSS标签参考手

    - **HTML简介**:HTML是一种用于创建和呈现网页内容的标记语言。 - **HTML的基本结构**:通常包含`&lt;html&gt;`、`&lt;head&gt;`和`&lt;body&gt;`等标签。 - **HTML的标记**:如`&lt;p&gt;`表示段落,`&lt;a&gt;`表示链接等。 - **1.2 一个...

    Struts2_表单标签简介 示例

    ### Struts2 表单标签简介与实例 #### 一、引言 在Web应用程序的开发过程中,表单是用户与系统交互的重要组成部分。Struts2框架为了简化表单的处理,提供了一系列丰富的表单标签,这些标签不仅包含了常见的HTML表单...

    第01章【HTML5简介】-第02节:HTML语言介绍

    在第01章【HTML5简介】-第02节:HTML语言介绍中,我们将深入探讨HTML的基本概念、结构以及它在HTML5中的新特性。 HTML语言的核心是通过一系列的标签来组织网页内容,这些标签描述了内容的类型和样式。例如,`&lt;html&gt;...

Global site tag (gtag.js) - Google Analytics