在编写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中可以使用对<meta>元素直接追加charset属性的方式来指定字符编码,如下所示:
<!--从html5开始,对于文件的字符编码推荐使用utf-8--> <meta charset="utf-8" />
而HTML4及之前的版本是<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 这样写的。
以后HTML5文档都可以省略<html><head><body><colgroup><tbody>标签了。
<!--以下4个input标签的 disabled属性表示的意思都是一样,即禁用input标签--> <input type="text" disabled /> <input type="text" disabled="" /> <input type="text" disabled="true" /> <input type="text" disabled="disabled" />
<!--因为button没有包含大于号,小于号,等号,单引号,双引号等字符,所以button两边的引号可以省略--> <input type=button value="按钮">
(我们想要区分哪个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>
<!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>
<body> <form action="Login.aspx" method="post"> <input type="text" name="username" /> <input type="submit" value="提交"> </form> </body>
<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中
<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>
<body> <form id="form1" action="Add.aspx" method="post"></form> <!--autofocus的作用就是当进入这个页面的时候这个标签获取焦点--> <input form="form1" type="text" autofocus /> <input form="form1" type="text" /> </body>
<body> <input form="form1" type="text" placeholder="我是提示信息" autofocus /> <input form="form1" type="text" placeholder="用户名" /> </body>
<body> <!--list属性需要和datalist标签配合使用,它的作用其实就是自动感应提示--> <input type="text" list="city" /> <datalist id="city"> <option>永州</option> <option>长沙</option> <option>长春</option> <option>广州</option> </datalist> </body>
<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>
<body> <form action="Login.aspx" method="get"> <!--pattern指定验证规则,title表示在输入错误时候的提示文本--> <input type="tel" title="请输入11位数字" pattern="^\d{11}$" /> <input type="submit" value="提交" /> </form> </body>
<form action="Login.aspx" method="get"> <!--required表示这个元素是必填的,如果不填则不能提交--> <input type="url" required /> <input type="submit" value="提交" /> </form>
<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>
<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>
<body> <form action="Login.aspx" method="get"> <input type="color" name="color" /> <input type="submit" value="提交" /> </form> </body>
<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>
<body> <!--在form表单中使用了novalidate属性后,整个表单都不再对数据做合法性验证--> <form action="Login.aspx" method="get" novalidate> <input type="url" required /> <input type="submit" value="提交" /> </form> </body>
<body> <form action="Login.aspx" method="get"> <input type="url" required /> <!--在input标签中使用了formnovalidate属性后,提交表单时不再对此标签做数据合法性验证--> <input type="email" required formnovalidate/> <input type="submit" value="提交" /> </form> </body>
<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>
<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>