HTML5

H5好处

本地存储更好的支持 localStorage sessionStorage 新的特殊内容元素更加智能的表单标签二维绘画更好的异常处理等等

HTML5新标签

新增结构标签

让html文档更加清晰，可阅读性更强，更利于SEO（搜索引擎优化）

相关代码

<body>

  <header>...</header>

  <nav>...</nav>

  <article>

    <section>

      ...

    </section>

  </article>

  <aside>...</aside>

  <footer>...</footer>

header：定义文档页眉,不局限写在网页头部，也可以写在网页内容里面，至少包括一个标题标记

nav：定义导航链接的部分

footer:定义section 或者document页脚可以在一个页面多次使用

article:定义文章

article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。除了内容部分，一个article元素通常有它自己的标题（一般放在一个header元素里面），有时还有自己的脚注。

article是一个特殊的section标签，它比section具有更明确的语义, 它代表一个独立的、完整的相关内容块。 div、section、article，语义是从无到有，逐渐增强的。div无任何语义，仅仅用作样式化或者脚本化的标签，对于一段主题性的内容，则就适用section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。原则上来说，能使用article的时候，也是可以使用section的，但是实际上，假如使用article更合适，那么就不要使用section。

<article>
      <header>         
　　　　<h1>标题</h1>
           <p>发表日期：<time pubdate="pubdate">2010/10/10</time></p>
　　</header>
　　<p>article的使用方法</p>
　　<footer>
            <p><small>Copyright @ yiiyaa.net All Rights Reserverd</samll></p>
　　</footer>
</article>

注：article元素是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联。例如，一篇博客文章中，针对该文章的评论就可以使用嵌套article元素的方式；用来呈现评论的article元素被包含在表示整体内容的article元素里面。

section：定义文档中的节（section、区段）

section用作一段有专题性的内容，一般在它里面会带有标题。 section典型的应用场景应该是文章的章节、标签对话框中的标签页、或者论文中有编号的部分。section元素用于对网站或应用程序中页面上的内容进行分块，section元素的作用是对页面上的内容进行分块，或者说对文章进行分段；一个section元素通常由内容及其标题组成，通常不推荐为那些没有标题的内容使用section元素。

article与section的嵌套方式一般如下：

<article>
　　<header>
            <h1>article元素使用方法</h1>
　　　　<p>发表日期：<time pubdate="pubdate">2010/10/10</time></p>
　　</header>
　　<p>此标签里显示的是article整个文章的主要内容，，下面的section元素里是对该文章的评论</p>
　　<section>
            <h2>评论</h2>
　　　　<article>
                  <header>
　　　　　　　　<h3>发表者：maizi</h3>
　　　　　　　　<p><time pubdate datetime="2016-6-14">1小时前</time></p>
　　　　　　</header>  
　　　　　　<p>这篇文章很不错啊，顶一下！</p>
           </article> 
　　　　<article>
                  <header>            
　　　　　　　　<h3>发表者：小妮</h3>
                        <p><time pubdate datetime="2016-6-14T:21-26:00">1小时前</time></p>
　　　　　　</header>
　　　　<p>这篇文章很不错啊，对article解释的很详细</p>  
　　　　</article>
      </section>
</article>

示例内容分为几个部分，文章标题放在了header元素中，文章正文放在了header元素后面的p元素中，然后section元素把正文与评论进行了区分（是一个分块元素，用来把页面中的内容进行区分），在section元素中嵌入了评论的内容，评论中每一个人的评论相对来说又是比较独立的、完整的，因此对它们都使用一个article元素，在评论的article元素中，又可以分为标题与评论内容部分，分别放在header元素与p元素中。

但是关于section元素的使用禁忌总结如下：
（1）不要将section元素用作设置样式的页面容器，那是div元素的工作。
（2）如果article元素、aside元素或nav元素更符合使用条件，不要使用section元素。
（3）不要为没有标题的内容区块使用section元素。

总结：在H5中，article元素可以看成是一种特殊类型的section元素，它比section元素更强调独立性。即section元素强调分段或分块，而article强调独立性。具体来说，如果一块内容相对来说比较独立的、完整的时候，应该使用article元素，但是如果你想将一块内容分成几段的时候，应该使用section元素。另外，在HTML5中，div元素变成了一种容器，当使用CSS样式的时候，可以对这个容器进行一个总体的CSS样式的套用。

aside：用来装载非正文的内容被视为页面里面一个单独的部分，包含内容与页面主要内容是分开的，可以被删除，而不会影响网页的内容、章节或是页面索要传达的信息。例如广告，成组的链接，侧边栏等等

figure标签：用于对元素进行组合，多用于图片与图片描述组合

<figure>

<img src="img.gif" alt="figure标签"  title="figure标签" />

<figcaption>这儿是图片的描述信息</figcaption>

</figure>

<template>

声明模板元素天生display：none

childNodes无效性，可以用template.innerHTML获得完整的html片段

克隆

var clone = document.importNode(template.content, true);

appendChild 加载模板内容

增强型表单标签

新增多个input类型

1）只能输入数字的number类型input标签

step：是步长的意思，也就是在点击增大或者减小按钮的时候的增加减少的步长

2）新型Email类型input标签

Html代码：<input type="email" name="email" placeholder="请输入注册邮箱" />

3)新型url类型 input标签

Html代码：<input type="url" placeholder="请输入网址" name="url" />

4）新型Tel类型input标签

Html代码：<input type="tel" placeholder="输入电话" name="phone"/>

5）新型range类型input标签

Html代码：<input type="range" min="0" max="50" step="5" name="rangedemo" value="0" />

运行效果：

6）新的日期、时间、月份、星期input标签

Html代码：<input type="date" name="datedemo" />

运行效果：

还有其他的type：month(月) 、time、week、datetime-local、datetime。那赶紧实验一下吧。

7）颜色选择input标签

Html代码：<input type="color"/>

运行效果：

8）input标签自动完成功能

datalist

定义和用法

<datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。

datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

请使用 input 元素的 list 属性来绑定 datalist。

下面是一个 input 元素，datalist 中描述了其可能的值：

<input type="text" name="" value="输入明星" list="star"/>
<datalist id="star">
    <option>刘德华</option>
    <option>刘诺言</option>
    <option>任问问</option>
    <option>任玩得</option>
</datalist>

fieldset

组合表单中的相关元素：

  <fieldset>
    <legend>健康信息</legend> 标题
    身高：<input type="text" /><br>
    体重：<input type="text" />
  </fieldset>

HTML5表单新增属性

Input标签新增加的特有属性

1）autofocus属性

demo：<input type="text" autofocus="autofocus"/> 此属性可以设置当前页面中input标签加载完毕后获得焦点。

2）max,min,step这些上面都介绍过了，都是跟数字相关。
3）placeholder:提示信息属性，上面有demo。
4）multiple：用于文件上传控件，设置此属性后，允许上传多个文件。
demo <input type="file" name="img" multiple="multiple" />
5）校验属性：设置了required 属性后预示着当前文本框在提交前必须有数据输入，而这一切都是由浏览器自动完成。

这跟使用Jq Validate的时候一样的爽。而且还添加了：pattern正则表达式的校验。

demo：input type="text" autofocus="autofocus" required pattern="\d+" />

6）另外一个比较大的改进就是增加了form属性，也就是说，任何一个标签都可以指定它所属于一个表单，而不是必须在<form></form>进行包裹了。
且看demo：<input type="text" form="demoForm" name="demo"/>

Form表单标签新增加属性

1）novalidate 属性规定在提交表单时不应该验证 form 或 input 域。就是提交表单时不验证合不合规

demo：<form action="" method="POST" novalidate="true"></form>

2)autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
<form action="demo_form.asp" method="get" autocomplete="on">

自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

多媒体标签

video

demo <video src="movie.ogg" controls="controls" width="400px" height="240px"> controls添加播放暂停和音量控制

支持三种视频格式 ogg，mpeg4 webm

video元素允许多个source元素，可以链接不同的视频文件，浏览器将使用第一个可识别的格式

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

video标签属性

autoplay 自动播放 controls 播放控件 loop循环播放 preload页面加载时进行加载，预备播放

video标签方法

play（）播放视频 pause（）暂停视频

onload（）更改视频、音频src时重新加载

<button onclick="change()">更改</button>
  <video id="video1" width="420" style="margin-top:15px;">
     <source src="movie.ogv" id="mp1" type="video/ogg" />
    Your browser does not support HTML5 video.
  </video>

function change()
{ 
 document.getElementById("mp2").src="1.mp4";
 myVideo.load();
}

video标签Dom属性

myvid=document.getElementById("video1");

currentSrc 当前视频、音频src地址 myvid.currentSrc

currentTime 返回当前视频、音频播放时间位置当设置属性时播放会跳转到指定位置例 myvid.currentTime=5;跳到第五秒位置 myvid.currentTime

duration 返回当前视频长度以秒计 myvid.duration

ended 检测视频是否播放结束，结束返回true，否则返回false myvid.ended

error获取视频错误状态例 myvid.error.code

paused 检查视频是否已暂停暂停返回true 否则false myvid.paused

volume 音量设置值为0.0-1.0 1是100% 0.5是50% myvid.volume=0.5；

video事件

记得前面加on

play 播放时触发

pause 暂停时触发

progress 下载时触发

error 视频出错时触发

timeupdata 播放位置发送改变时触发

ended 播放结束时触发

abort 视频加载中断时触发

onwaiting 在视频需要播放下一帧而需要缓冲时触发

loadedmetadata 指定元数据已加载时触发

音频audio

支持格式

audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

标签属性与video一样

SVG

可缩放矢量图形

优势：体积小，质量高，效果好，可控程度高

一般工作，把别人做好的svg导入自己代码，做稍微的修改

第一种方式 iframe <iframe src="demo.svg" frameborder="0"></iframe> 推荐！

第二种方式 object <object data="demo.svg" type=""></object>一般载入第三方媒体时用到的标签

第三种方式 <embed src="demo.svg" type=""></embed>

个人总结重点

article 独立完整的一段，可脱离上下文 section一段专题性内容，对文章进行分段

datalist 标签定义input选项列表用input 的list 来绑定datalist的id值

fieldset 组合表单相关元素比如input和legend（表单标题）

<input type="file" name="img" multiple="multiple" /> 允许上传多个文件

<form action="" method="POST" novalidate="true"></form> 提交表单时不验证form或input合不合规

<form action="demo_form.asp" method="get" autocomplete="on"> 基于之前输入过的值，预测对字段输入

video

source可以添加多个不同视频文件，浏览器使用第一个可识别格式

play（）方法播放 pause（）暂停视频 dom属性用的时候往上查

video事件几个重要的 onplay 播放时触发 onpause暂停时触发 ended播放结束时触发

posted @ 2020-06-10 20:12 Ren小白阅读(200) 评论(0) 收藏举报

刷新页面返回顶部

Ren小白

HTML5

新增结构标签

<template>

增强型表单标签

新增多个input类型

datalist

fieldset

HTML5表单新增属性

Input标签新增加的特有属性

Form表单标签新增加属性

多媒体标签

video

video标签属性

video标签方法

video标签Dom属性

video事件

音频audio

SVG

个人总结重点

公告