适合0基础的web开发系列教程-H5新标签

最新推荐文章于 2024-06-24 22:07:52 发布

weixin_34248849

最新推荐文章于 2024-06-24 22:07:52 发布

阅读量67

点赞数

原文链接：http://www.cnblogs.com/yyjcw/p/10213689.html

版权

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

最新版本的 Safari、Chrome、Firefox 、 Opera 等高级浏览器已经支持 HTML5绝大多数特性。

感受一下H5网页代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>夜鹰教程网</title>
</head>
<body>
   技术咨询QQ：1416759661 微信号：yyjcw10000
</body>
 </html>

文档声明使用：<!DOCTYPE html>，比以前的版本更加简洁。

对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。

H5新功能：

一个语义元素能够清楚的描述其意义给浏览器和开发者。

无语义 元素实例: <div> 和 <span> - 无需考虑内容.

语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.

新增的语义化标签详解：

具体使用位置参考：

语义元素 = 有意义的元素

新的多媒体元素：

所有浏览器，包括旧的和最新的，对无法识别的元素会作为内联元素自动处理。

HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是块级元素。

为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:

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

为了让低版本的浏览器支持H5,可以在页面中加入

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

这个文件的意思就是如果浏览器是版本低于IE9的，就引入此js文件，但是要注意此文件是国外谷歌服务器上面的，可能不太稳定，你可以把它下载到本地使用。

如需此文件加QQ：1416759661

html5新的input类型：

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

下面介绍这些新的输入类型：

注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。

选择你喜欢的颜色: <input type="color" name="favcolor">

date 类型允许你从一个日期选择器选择一个日期。

生日: <input type="date" name="bday">

使用下面的属性来规定对数字类型的限定：

数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">

<input type="range" name="points" min="1" max="10">

转载于:https://www.cnblogs.com/yyjcw/p/10213689.html

关注