HTML5

16-11-08 来源：[db:作者]

收藏我要投稿

HTML5的DTD声明

在编写HTML文档时，要求指定文档类型，以确保浏览器能再HTML5的标准模式下进行渲染，在THML5中刻意不使用版本声明，一份文档会适用于所有版本的HTML，非常简便，HTML5的DTD声明方法如下：

<!DOCTYPE html>

而HTML4及以前的版本的DTD声明是这样<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">声明的

HTML5不区分关键字的大小写，引号也不区分是单引号，还是双引号。（这和HTML4都是一样的）

HTML5设置页面字符编码

在HTML5中可以使用对<meta>元素直接追加charset属性的方式来指定字符编码，如下所示：

<!--从html5开始，对于文件的字符编码推荐使用utf-8-->
<meta charset="utf-8" />

而HTML4及之前的版本是<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 这样写的。

HTML5可以省略标记的元素

HTML5做到了与之前版本的兼容。

以后HTML5文档都可以省略<html><head><body><colgroup><tbody>标签了。

具有Boolean值的属性

在html中有些元素的属性，只写属性名称而不指定属性值时，表示属性值为true，如果该属性值为false，则不使用该属性即可。例如<input>标签的disabled和readonly属性就是布尔值的属性

<!--以下4个input标签的 disabled属性表示的意思都是一样，即禁用input标签-->
<input type="text" disabled />
<input type="text" disabled="" />
<input type="text" disabled="true" />
<input type="text" disabled="disabled" />

引号的使用在HTML5中属性的值可以用单引号，或者双引号括起来，但是HTML还做了一些改进，就是当属性值不包括空字符串，"<",">","=",单引号，双引号等字符的时候，属性两边的引号是可以省略的。

<!--因为button没有包含大于号，小于号，等号，单引号，双引号等字符，所以button两边的引号可以省略-->
<input type=button value="按钮">

HTML新增加的语义标签

HTML5新增加了一些新的元素和属性，反映典型的现代网站用法
其中有些技术上类似<div>和<span>标签，但是有一定含义，例如<nav>(网站导航块) 和在<footer>，这种语义标签将有利于搜索引擎的索引整理，小屏幕装置和视障人士使用。也提供了新的功能标签，如媒体播放器<audio>和<video>标签
还有一些过时的html4标签将取消，如<font><center> 因为它们已经完全被css取代了。
曾经，网页编写会频繁使用<table>这种没有任何语义的布局，不过最终还是慢慢接受了相对更语义化的<div>布局来替代，并且开始调用外部样式表来操作<div> 但是不幸的是，代码中大量使用<div>标签又太单一了，而且复杂的网页设计需要大量不同的标签结构代码，我们把它叫做"<div>-soup" 综合征
现在，HTML和CSS3正跃跃欲试的等待大家，新增了和布局相关的多种语义标签

下面我们来看看使用div来布局和使用HTML新标签来布局的区别

使用传统div来布局

（我们想要区分哪个div，要么用id，要么用class，这就导致了太多的id，和class属性）

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>使用传统的DIV来布局：缺点是页面到处到是Div标签，不直观</title>

    <style type="text/css">
        div#news {width: 660px;margin: 0 auto;}
        div.section { width: 100%;}
        div.article {width: 500px; float: left;}
        div.aside {width: 150px; float: right; }
        div.header {width: 100%; text-align: center;background: #ddd;}
        div.content {width: 100%;}
        div.footer {width: 100%;background: #ddd;
        }
    </style>
</head>
<body>
    <div id="news">
        <div class="section">
            <div class="article"><!--文章-->
                <div class="header"><!--文章头部-->                   
                    <h1>Div布局示范</h1>
                    <p>发表于2016年11月6日</p>
                </div>
                <div class="content"><!--文章内容-->                   
                    <p>文章内容等等</p>
                    <p>文章内容等等</p>
                    <p>文章内容等等</p>
                </div>
                <div class="footer"><!--文章脚部-->                    
                    <p>Tage:HTML,代码演示</p>
                </div>
            </div>

            <div class="aside"> <!--边栏-->             
                <div class="header"><!--边栏头部-->                   
                    <h1>附属信息</h1>
                </div>
                <div class="content"> <!--边栏内容-->                  
                    <p>边栏内容等等</p>
                    <p>边栏内容等等</p>
                    <p>边栏内容等等</p>
                    <p>边栏内容等等</p>
                </div>
                <div class="footer"><!--边栏脚部-->                    
                    <p>Tage:HTML,代码演示</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

用HTML5新增的语义标签来布局

（优点是每个区块区分的非常明显，头是头，躯体是躯体，脚是脚）

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>使用HTML5语义便签来布局，简单直观</title>

    <style type="text/css">
        section { width: 660px;margin: 0 auto; }
        article { width: 500px;float: left;}
        header { width: 100%;text-align: center;background-color: #ddd;}
        footer { width: 100%;background: #ddd; }
        aside { width: 150px; float: right; }
    </style>
</head>
<body>
    <section>
        <article><!--文章-->
            <header><!--文章头部-->               
                <h1>Div 布局示范</h1>
                <p>发表于2016年11月6日</p>
            </header>
            <section><!--文章内容-->               
                <p>内容文本等等</p>
                <p>内容文本等等</p>
                <p>内容文本等等</p>
            </section>
            <footer> <!--文章脚部-->              
                <p>Tags:HTML,代码演示</p>
            </footer>
        </article>

        <aside><!--边栏-->
            <header><!--边栏头部-->
                <h1>附属信息</h1>
            </header>
            <section><!--边栏内容-->
                <p>边栏文本等等</p>
                <p>边栏文本等等</p>
                <p>边栏文本等等</p>
                <p>边栏文本等等</p>               
            </section>
            <footer><!--边栏脚部-->
                <p>Tags:HTML,代码演示</p>
            </footer>
        </aside>
    </section>
</body>
</html>

HTML5中表单新增属性

传统表单

对于传统的form表单的写法，对于一个input标签，它是属于哪个表单的就必须写在哪个表单里的。缺点：配合表格，配合div去布局的话，有时候标签嵌套可能不太利于我们布局。

<body>
    <form action="Login.aspx" method="post">
        <input type="text" name="username" />
        <input type="submit" value="提交">
    </form>
</body>

HTML5 标签新增的form属性

而对于HTML新增的的属性功能则可以将input，或者其他标签与form表单分离开来。即：一个input标签虽然属于某个form表单，但是这个input标签并不需要些在那个form表单中

<body>
    <!--HTML5标签新增form属性，将标签与form表单关联起来-->
    <form id="Login" action="Login.aspx" method="get"> </form>

    <!--form="Login"表示这个标签属于Id为Login的这个表单-->
    <input type="text" form="Login" name="username" value="Liy" />
    <input type="submit" form="Login" value="提交" />
</body>

当点击“提交”的时候就会将相应的from属性为Login的表单元素提交到Login.aspx中

HTML5 标签新增的formaction属性和formmethod（指定提交到页面和指定提交方式）

<body>
    <!--HTML5标签新增form属性，将标签与form表单关联起来-->
    <form id="Login" method="post"> </form>

    <!--form="Login"表示这个标签属于Id为Login的这个表单-->
    <input type="text" form="Login" name="id" value="12" />
    <input type="text" form="Login" name="username" value="Liy" />

    <!--通过指定formaction属性的值可以将此标签对应的表单提交到指定的页面-->
    <!--通过指定的formmethod属性的值可以指定这个标签属于的表单的提交方式-->
    <input type="submit" form="Login" formaction="Add.aspx" formmethod="post" value="新增" />
    <input type="submit" form="Login" formaction="Delete.aspx" formmethod="get" value="删除" />
    <input type="submit" form="Login" formaction="Edit.aspx"  formmethod="get" value="编辑" />

</body>

HTML5标签新增的autofocus属性（进入页面获取焦点）

<body>
    <form id="form1" action="Add.aspx" method="post"></form>

    <!--autofocus的作用就是当进入这个页面的时候这个标签获取焦点-->
    <input form="form1" type="text" autofocus />
    <input form="form1" type="text" />
</body>

HTML5标签新增的placeholder属性（提示信息）

<body>
    <input form="form1" type="text" placeholder="我是提示信息" autofocus />
    <input form="form1" type="text" placeholder="用户名" />
</body>

HTML标签新增的list属性（自动感应）

<body>
    <!--list属性需要和datalist标签配合使用，它的作用其实就是自动感应提示-->
    <input type="text" list="city"  />

    <datalist id="city">
        <option>永州</option>
        <option>长沙</option>
        <option>长春</option>
        <option>广州</option>      
    </datalist>
</body>

HTML5标签的autocomplete属性

<body>
    <form action="Login.aspx" method="get">
        <!--有时候我们在输入的时候浏览器会记下我们输入的数据，等我们下次输入的时候会自动提示我们过去输入过的值，这样虽然很方便，但是存在安全隐患，所以我们可以通过设置autocomplete属性的值来指定是否关闭自动提示功能-->
        <!--autocomplete="on"的时候表示打开自动提示功能-->
        <!--autocomplete="off"的时候表示关闭自动提示功能-->
        <input type="text" list="city" name="name" autocomplete="on" />
        <input type="submit" value="提交" />
    </form>
</body>

HTML5中改良的input元素

Tel

tel被设置用来输入电话号码的专用文本框，它没有特殊的校验规则，不强制输入数字，因为许多电话号码通常都带有其它文字，如#，但开发者可用通过pattern属性来指定对于输入的电话号码格式的验证。

<body>
    <form action="Login.aspx" method="get">
        <!--pattern指定验证规则，title表示在输入错误时候的提示文本-->
        <input type="tel" title="请输入11位数字" pattern="^\d{11}$" />
        <input type="submit" value="提交" />
    </form>
</body>

url

    <form action="Login.aspx" method="get">
        <!--required表示这个元素是必填的，如果不填则不能提交-->
        <input type="url" required />        
        <input type="submit"  value="提交" />
    </form>

Email

    <form action="Login.aspx" method="get">
        <!--required表示这个元素是必填的，如果不填则不能提交-->
        <input type="email" required />        
        <input type="submit"  value="提交" />
    </form>

年月日和时间

<body>
    <form action="Login.aspx" method="get">
        <!--注意：value值的 日和时间的中间用大写T隔开-->
        年月日时间<input type="datetime-local" name="datetime-local" value="2015-10-13T11:11" />
        年月日<input type="date" name="date"  value="2015-10-13"/>
        年月<input type="month" name="month" value="2015-10" />
        <!--注意：value值的 年和周的中间用大写的W隔开-->
        年周<input type="week" name="week"  value="2015-W18"/>
        时间<input type="time" name="time" value="11:11"/>              
    </form>
</body>

Number数字

number类型的input元素是一种专门用来输入数字的文本框，并且在提交时检查输入的内容是否为数字。它具有min,max，step属性

    <form action="Login.aspx" method="get">
        <!--min表示输入框中能输入的最小值  max表示能输入的最大值-->
        <input type="number" min="0" max="10" /> 
        
        <input type="submit" value="提交" />                  
    </form>

<body>
    <form action="Login.aspx" method="get">
        <!--min表示输入框中能输入的最小值  max表示能输入的最大值-->
        <!--step表示输入框中只能输入2的倍数，即只能输入2，4，6，8，10-->
        <input type="number" min="0" max="10" step="2" /> 
        
        <input type="submit" value="提交" />                  
    </form>
</body>

Color 颜色

<body>
    <form action="Login.aspx" method="get">
        <input type="color" name="color" />
        <input type="submit" value="提交" />
    </form>
</body>

Range滑块

Range 是一种只允许输入一段范围内数值的文本框，它具有min,max和step属性。默认范伟是0-100 在HTML5中还追加了新的output元素，output元素定义不同类型的输出，比如计算结果，或脚本的输出，output元素必须从属于某个表单，写在表单的内部，或者对它添加form属性，目前只被Opera10等少数浏览器支持，ouput结合range元素使用如下：

<body>
    <form action="Login.aspx" method="get">
        <input type="range" onchange="document.getElementById('num').value=this.value" min="0" max="100" step="5" name="range" value="50" />
        <!--我们可以将renge和output标签搭配起来使用，output标签主要起一个提示range所选择值的作用-->
        <output id="num">
            50
        </output>
    </form>
</body>

HTML5的novalidate和formnovalidate属性

在开发阶段，我们可能想将表单临时提交下，又不想让它进行表单中所有元素的内有有效性检查，有两种方式可以取消表单验证第一种：在form表单中使用novalidate属性,让整个表单验证全部失效

<body>
    <!--在form表单中使用了novalidate属性后，整个表单都不再对数据做合法性验证-->
    <form action="Login.aspx" method="get" novalidate>       
        <input type="url" required />
        <input type="submit" value="提交" />
    </form>
</body>

第二种：利用input元素中的formnovalidate属性，

<body>  
    <form action="Login.aspx" method="get">       
        <input type="url" required />

        <!--在input标签中使用了formnovalidate属性后，提交表单时不再对此标签做数据合法性验证-->
        <input type="email" required  formnovalidate/>
        <input type="submit" value="提交" />
    </form>
</body>

audio音乐播放

<body>
    <!--如果浏览器不支持audio标签，就会显示“您的浏览器版本太低，无法播放此音乐”如果支持则不显示文字-->
    <!--autoplay属性的作用是在页面加载完毕就会自动播放123.mp3这首音乐-->
    <!--controls属性的作用则是显示播放器的界面-->
    <audio src="~/123.mp3" autoplay controls>您的浏览器版本太低，无法播放此音乐</audio>
</body>

由于各浏览器对于各种媒体的类型及编码格式的支持情况都各不相同，我们可以通过source元素来为同一个媒体数据指定多个播放格式与编码方式，以确保浏览器可以从中选择一种自己支持的播放格式进行播放，浏览器的选择顺序为代码中的书写顺序，它会从上往下判断自己对该播放格式是否支持，选到为止。

<body>   
    <audio autoplay controls>
        <!--浏览器会从上往下找，找到自己支持的格式就不再往下找了-->
        <source src="~/123.mp3" type="audio/mp3" />
        <source src="~/123.mp4" type="audio/mp4" />
        <source src="~/123.ogg" type="audio/ogg" />

        您的浏览器版本太低，无法播放此音乐      
    </audio>
</body>

以下是各个版本的浏览器对于一下几种格式的支持数据

video视频播放

<body> 
    <!--video使用方式和audio差不多-->  
    <!--如果浏览器不支持video标签，就会显示“您的浏览器版本太低，无法播放此视频”如果支持则不显示文字-->
    <!--autoplay属性的作用是在页面加载完毕就会自动播放test.mp4这个视频-->
    <!--controls属性的作用则是显示播放器的界面-->  

    <video autoplay controls style="width:500px;height:350px" poster="~/error.img">
        <!--因为各个浏览器版本对视频的支持格式存在差异，为了让大部分浏览器都能播放test这个视频，我们会将这个视频转换成多种格式，用source来指定路径。浏览器会从上往下找，找到自己支持的格式就开始播放，就不再往下找了-->
        <source src="~/test.mp4" type="video/mp4" />
        <source src="~/test.wmv" type="video/x-ms-wmv" />

        您的浏览器版本太低，无法播放此视频      
    </video>
</body>

点击复制链接与好友分享!回本站首页