HTML5笔记

最新推荐文章于 2024-09-11 10:10:41 发布

Tachyglossus

最新推荐文章于 2024-09-11 10:10:41 发布

阅读量544

点赞数

分类专栏： Study Note 文章标签： html5

本文链接：https://blog.csdn.net/Y_Tseng/article/details/82313067

版权

Study Note 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

HTML5笔记

简介

将互联网语义化，更好的被人机阅读，更好的支持各种媒体的嵌入。
是包括HTML、CSS和JavaScript在内的一套技术组合。

特性

强化了web网页的表现性能
追加了本地数据库等web应用的功能

新特性

取消一些过时的HTML4标记，如<font>和<center>，新增标签如header、footer、dialog、aside和figure等；
b、i标签虽然保留但意义不再一样；u、font、center、strike这些标签则被完全去掉了；
表单中部分控件提供了验证功能，新增了一些新的空间，如：url、email、tel等；
本地数据库；
新增音频和视频标签；
canvas对象。

新增的结构标签

标签	意义
`<section>`	文档中的节
`<article>`	独立的文档区块
`<aside>`	页面内容之外的内容
`<nav>`	定义导航链接
`<header>`	定义页眉【可将组合标题放在其中】
`<footer>`	定义页脚
`<hgroup>`	对标题进行组合/放置标题组
`<figure>`	独立的流内容(图像、图表、照片、代码等)

多媒体标签

<audio>音频标签

<audio src="demo.mp3">您的浏览器不支持audio标签</audio>

<audio>标签属性

属性名	意义
src	指定音频url地址（支持wav、MP3、ogg三种格式）
controls	添加该属性会显示播放控件
autoplay	添加后会自动播放
loop	循环播放
preload	auto-当页面加载后载入整个音频；meta-当页面加载后只载入元数据；none-当页面加载后不载入音频。设置了autoplay属性，preload会被忽略。

<video>视频标签【很多网站会将视频当作网页背景】【要记得兼容问题】
```
<video src="shipin.mp4">您的浏览器不支持video标签</video>
```
<video>标签属性

属性名	意义
src	指定视频url地址（支持WebM、MPEG4、ogg三种格式）
controls	添加该属性会显示播放控件
width
height
muted	输出音量被静音
poster	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像

<source>标签
对audio和video标签的补充，source标签为媒介元素（比如 <video>和 <audio>）定义媒介资源，以video视频标签为例，火狐浏览器不支持MP4格式，但是支持ogg格式，因此为了在各种浏览器下都能显示视频，做以下兼容方式：

<video controls="controls">
    <source src="video.ogg" type="video/ogg">
    <source src="video.mp4" type="video/mp4">
</video>

其他功能性标签

<details>和<summary>标签
details用于描述文档或文档某个部分的细节。
summary做为details的标题，标题是可见的，用户点击标题时，会显示出details的详细内容。

<details>
        <summary>这里填写标题文字</summary>
        <p>这里填写详细内容</p>
</details>

<progress>和<meter>标签
progress标签是一个进度条，有两个常用参数value（表示当前进度）、 max（表示总进度）。
meter标签的结构类似progress控件，都是设置一个max参数，使用value来指定显示的结果。但它比progress多了几个参数，还可以设置min表示最低量，以及low、high、optimum这些参数来描述数据的状态。
<mark>、<cite>、<time>标签
mark标签突出显示部分文本。
cite标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
time标签定义日期或时间，或者两者。
<canvas>标签
一个图像的容器，可以实现在网页中直接绘制复杂图形。

新增的表单控件和属性

控件

email
```
<input type="email" name="youxiang"/>
```
要求输入格式正确的email地址，否则浏览器不允许提交，并会有错误信息提示。此类型在Opera中必须指定name值，否则无效果。
url
```
<input type="url" name="dizhi" />
```
要求输入格式正确的URL地址，开始处需要添加http://。
日期时间
目前各种浏览器兼容性不是很好，且展示效果也不一样。

<input type="date">      <!--格式：  年/月/日 --> 
<input type="time">      <!--格式：  时/分 --> 
<input type="month">     <!--格式：  年/月 -->  
<input type="week">      <!--格式：  年/周 -->

number
```
<input type="number"/>
```
输入框中只能用来输入数字，不支持其他字符，在输入框上有可以点击的上下按钮。但浏览器支持情况不是很好，IE和Firefox不支持。
search
```
<input type="search" results=s />
```
表示输入的将是一个搜索关键字，通过results=s可显示一个搜索小图标。
tel
```
<input type="tel" />
```
要求输入一个电话号码，但实际上它并没有特殊的验证，与text类型没什么区别。
color
```
<input type="color" />
```
让用户通过颜色选择器选择一个颜色值，并反馈到value中。
range
```
<input type="range" max="100" min="0" step="20" value="10">
```
具有返回数值结果的滑块控件，可以调节滑块的最大值、最小值以及渐进程度。

属性

placeholder

<input type="text" placeholder="文本框提示文字，点击将会清除">

required/pattern
```
<input type="text" required pattern="^[1-9]\d{5,12}$">
```
表单验证属性，require类型若输入值为空，则拒绝提交。
pattern类型为正则验证，可以完成各种复杂的验证。
这两种类型在Opera中必须指定name值，否则无效果。
autodocus
```
<input type="text" autofocus="true">
```
默认聚焦属性，可在页面加载时聚焦到一个表单控件，类似于JS的focus()。
list
该属性需要与datalist属性共用，datalist是对选择框的记忆，而list属性可以为选择框自定义记忆的内容。

<input type="text" list="ilist">
<datalist id="ilist">
  <option value="值1"></option>
  <option value="值2"></option>
  <option value="值3"></option>
</datalist>

max/min/step
```
<input type="range" max="100" min="0" step="20" value="10">
```
max定义最大值
min定义最小值
step定义渐进程度
autocomplete
```
<input type="text" autocomplete="on">
```
autocomplete属性规定表单是否应该启用自动完成功能。默认值是”on”，为自动补全，如果为”off”则是关闭自动补全功能。

兼容说明

一些老版本浏览器对HTML5标签不支持，如果想让你的网站使用HTML5标签，但是又想兼容低版本的浏览器，下面推荐一种方法。
将下述代码放在<head>标签内部，或者你直接下载下来使用。

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

以下是html5.js文件中的代码：

/*
 HTML5 Shiv v3.7.0 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
*/
(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}</style>";
c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:"3.7.0",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);
if(g)return a.createDocumentFragment();for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);