html5版本

下面的代码为html5版本的代码

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>document</title>
    </head>
</html>

html5语义化标签

什么是语义化?

1.首先，语义化，顾名思义，就是你写的HTML结构，是用相对应的有一定语义的英文字母（标签）表示的，标记的，因为HTML本身就是标记语言。不仅对自己来说，容易阅读，书写。别人看你的代码和结构也容易理解，甚至对一些不是做网页开发的人来说，也容易阅读。那么，我们以后再开发的过程中，一定要注意了，尽量使用官方的有语义的标签，不要再使用一堆无意义的标签去堆你的结构。

怎么知道，自己的页面结构是否语义化，那就要看你的HTML结构，在去掉CSS样式表之后，是否，依然能很好的呈现内容的结构，代码结构。也就是说，脱掉css的外衣，依然头是头，脚是脚。赤裸裸的完整的一篇文档。这也就是，语义化之后文档的效果。

2.其实语义化，也无非就是自己在使用标签的时候多使用有英文语义的标签，比如h标签，在HTML中就是就是用来定义标题，还有p标签，英文是paragraph段落，table表格标签,等等。

语义化例子

请看下面的代码例子:

<!--语义化-->
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>title</title>
    </head>
    <body>
        <header><!--语义化标签-->
            <h1>html5语义化标签</h1>
            <nav><!--语义化标签-->
                <h1>导航</h1>
                <ul><!--语义化标签-->
                    <li>章节</li><!--语义化标签-->
                    <li>标签</li>
                    <li>热门</li>
                </ul>
            </nav>
        </header>
    </body>    
</html>

<!--非语义化-->
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>title</title>
    </head>
    <body>
        <div class="header">
            <h1>html5非语义化例子</h1>
            <div class="nav">
                <h1>导航</h1>
                <ul>
                    <li>章节</li>
                    <li>标签</li>
                    <li>热门</li>
                </ul>
            </div>
        </div>
    </body>    
</html>

语义化标签

下面我引用了一个语义化标签的表格(做得有点像元素周期表)

html5的兼容性问题

使用html5的标签在一些旧版本浏览器它是不显示的,这时候我们该怎么兼容这些浏览器呢,下面我们来介绍一下解决方法:

兼容性解决方法1

以header标签为例:

设置该标签的样式属性display: block
通过dom的方式添加这个标签 document.createElement('header')
这样我们的header标签就可以在旧的浏览器里面显示了

兼容性解决方法2

这个方法其实就是对上面的方法的补全,因为上面的方法只对header有效,但是html5的标签不可能只有header,所以我们需要引用外部的js库来帮我们把其余的html5标签都做上以上的工作

1	<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>

上面的例子就是引用外部js库来完成对就浏览器不支持html5标签的兼容支持

audio 和 video

audio和video是html5的新标签,audio是影评播放器video是视频播放器当然也是可以播放音频的.

这两个标签的出现可以让我们不需要再依赖flash和silverlight这些插件就能原生的支持多媒体的播放.只需简单的添加audio标签或者video标签到我们的html代码当中就可以显示相应的播放器了.

audio使用

<audio controls>
    <srouce src="horse.ogg" type="audio/ogg"/>
    <srouce src="horse.mp3" type="audio/mpeg"/>
  Your browser does not support HTML5 audio.
</audio>

video使用

<video width="400" controls>
  <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

使用这两个html5标签需要考虑兼容性问题,在各个浏览器的默认样式都可能不一样

特别注意:有时候你们会发现video标签在chrome浏览器的自动播放是随机的但是通过往video标签添加muted静音属性之后,则在chrome浏览器能自动播放(这其实是有原因的:下面我来给出解析)

video在chrome的特殊表现原因

如果你刚开始使用chrome浏览器并且没有任何浏览记录,则chrome会在超过1000多个热门网站上自动播放带声音的视频,之后chrome则随着用户浏览的网页的习惯来学习和改变这个自动播放的网站列表,并且在你最经常访问的网站上应许带声视频自动播放,而相反则会阻止你不太常访问的网站的带声视频的自动播放.google产品经理解析过:当你调教chrome浏览器时,你会发现你时不时的需要点击播放按流才会播放视频.但是总体来说这个策略会阻止大约一半的没必要的自动播放情况.所以当你第一次访问新网站时你可以避免一些不必要的噪音打扰.引用于

html5 form 新特性

这里有14个新的form属性我们将会在下面的段落介绍和接触:

placeholder
list
formaction
autofocus
multiple
formentype
autocomplete
novalidate
formmethod
required
formnovalidate
formtarget
pattern
form

placeholder

第一个属性就是placeholder,中文直译就是占位符.当输入框没有输入任何字符串时,如果设置了placeholder的值的话,输入框会默认显示placeholder的字符,这个字符可以当做提示性的消息不能当做输入框的值.

See the Pen input placeholder by somi (@somiframe) on CodePen.

autofocus

autofocus能实现它字面上的意思:自动获取焦点,添加这个属性到input可以使input在页面渲染完成后自动把光标对焦到该input中.

See the Pen input autofocus by somi (@somiframe) on CodePen.

autocomplete

autocomplete属性可以帮助用户根据先前的数据来完成表单输入框的输入.这个属性默认是自动填充内容的.
如果你想不要这个自动填充效果只需要把这个autocomplete设置为off就可以了.

See the Pen input autocomplete by somi (@somiframe) on CodePen.

required

required属性无需太多的介绍了,相信很多人在表单使用的时候都会用到这个.其实就是把带有required属性的input设置为必填项.

See the Pen input required by somi (@somiframe) on CodePen.

pattern

pattern属性可能是一个领开发人员非常兴奋的东西了.它可以通过使用正则表达式来校验输入框的值.

See the Pen input pattern by somi (@somiframe) on CodePen.

list 和 datalist 元素

list 属性允许用户关联一个带制定项的可选列表(datalist).input输入框里面的list属性的值一定要跟datalist的id保持一致这样才能关联起来.

See the Pen input list attribute by somi (@somiframe) on CodePen.

multiple

multiple属性可以让input接受多个值.

See the Pen input multiple by somi (@somiframe) on CodePen.

novalidate 和 formnovalidate

novalidate和formnovalidate属性可以让form表单在提交的时候不校验内容.formvalidate可以在type类型为submit和image的input中,而novalidate只能添加到form元素中.

See the Pen form novalidate by somi (@somiframe) on CodePen.

form

form属性可以关联input,select或者textarea元素到form属性指定的form表单中即使是处于form外部也可以关联.

See the Pen input form by somi (@somiframe) on CodePen.

formaction, formenctype, formmethod, 和 formtarget

这是个新的属性如果把前面的form都去掉之后再看看是不是有点眼熟?没错它们就是form元素的属性action,enctype,method,target.但是跟form表单的属性不同的是它们只用在type为submit和image的input中.

See the Pen formaction, formenctype, formmethod, 和 formtarget by somi (@somiframe) on CodePen.

html5 dom selector

html5新增一个新的选择器;

document.querySelector(arg),document.querySelectorAll(arg),
document.getElementsByClassName(arg)

能返回被选择的dom元素数组.

html5 element.classList

html5的一个新特性就是在element里面的属性classList
它包含有六个方法:

classList.add(),classList.remove(),classList.item(),classList.toggle(),classList.contains(),classList.replace().

html5 element.dataset

element.dataset是html5对元素新增的一个自定义属性的特性:

当需要往元素节点添加一些自定义数据的时候可以通过添加以data-为前缀的自定义数据,例如:

<div data-name="somi" data-age="18" id="testdom">testdom</div>
<script>
    console.log(document.getElementById('testdom').dataset.age) //18
    console.log(document.getElementById('testdom').dataset.somi) //somi
</script>

html5 FileReader

FileReader允许网页程序异步读取本地文件内容.

See the Pen html5 filereader by somi (@somiframe) on CodePen.

html5 network state

See the Pen html5 network state by somi (@somiframe) on CodePen.