html5标签简介

最新推荐文章于 2024-11-12 11:19:19 发布

xiaofancn

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量137

点赞数

分类专栏： web前端文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/xiaofancn/article/details/83978202

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1. 新的Doctype声明

<!DOCTYPE html>

2. <figure>标签

看看下面一段简单的代码：

<h6>image of Mars.</h6>

遗憾的是，这里的h6标签和img标签好像没有什么关系，语义不够明确。HTML 5意识到了这一点，于是就采用了<figure>标签。当<figure>结合<figcaption>标签的使用，可以让h6标签和img标签组合起来，代码就更具语义化了。

<h6>This is an image of something interesting. </h6>

</figcaption>

</figure>

3. 重新定义<small>

不久前，我使用了<small>标签来创建与logo相关的副标题。但是在HTML 5中重新定义了<small>标签，使之更能表现语义化，在<small>的字号都会变小，想想如果这个标签用于网站的底部的版权信息还是个不错的做法。

4. 去掉了Javascript和CSS标签的type属性

5. 支持使用单，双引号

6. 使网页内容可以编辑

<li>悼念遇难香港同胞 </li>

</ul>

7、新的表单，具有校验功能

<input> type:search mail url

8. 占位符

文本框中的占位符(看看本博的搜索框效果)有利于提升用户体验，之前，我们只能依靠JS来实现占位符的效果，在HTML 5中新增了占位符属性placeholder。

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"  οnclick="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