互联网技术发展的速度惊人的快,一有点不小心,你可能无法跟上它的步伐。
HTML 5的变化和更新对许多人来说,这篇文章将介绍一些最基本的HTML skills.1也是必要的。
新的文档类型(Doctype)< !
你还使用上面的问题,很难记得XHTML文档类型吗?
如果是,是时候切换到新的HTML文档类型。< !
DOCTYPE HTML >就是这样一个简单的15个字符。
(注意:doctype声明需要出现在你的HTML文件的第一行)。2。
图形元素(图)考虑下面的代码标签图片吗?

Image of Mars. 

< / p >,不幸的是,它不能使用简单,丰富语言义相关方法与图表的标题,因为它只与段落标记和图像元素,并通过<人物>元素的引入,去改善它。
当结< figcaption >元素中使用时,我们可以与图形图标题配对。
代码如下:  
This is an image of something interesting. 
3)定义<小>所以你可以使用<小>元素来创建一个副标题密切相关的标志。
然而现在,它改变了用法,<小>元素被重新定义,或者更确切地说,它是用来表示小字或其他边注(如。
网站底部的版权声明)。
不再需要这个脚本和链接typesYou可能仍像下面的代码链接和脚本标签添加类型的属性。
在HTML 5中,它不再需要。
意味着这两个标签分别代表样式和脚本。
因此,我们可以把它们删除类型属性。
代码如下: 。
使用或不使用报价marksRemember、HTML和XHTML是不同的,如果你不喜欢你不需要使用引号属性。
然而,如果你认为使用引号可以使你感到更舒适,当然,没有问题。

Start the reactor。
在这一点上,你可以自己决定。
如果你想有一个文档结构非常清晰,坚持使用引号也相当good.6。
让你的内容是editableIt非常强大的功能之一是“contenteditable”,顾名思义,它将允许用户编辑元素(包括他的子元素)中包含的任何文本内容。
它的使用非常广泛,如简单的任务列表或基于wiki站点也很实用,此外,它还有一个优点是使用本地存储。< !

To-Do List 
Break mechanical cab driver. 
Drive to abandoned factory 
Watch video of self 

电子邮件inputIf我们使用“邮件”类型指定输入表单,我们可以点浏览器只允许按照有效的电子邮件地址输入字符串的结构。
尽管内置的表单验证将会很快,但是我们不能完全依赖它。
老版本浏览器不理解这种“电子邮件”,他们只会简单地返回到正常的文本框。< !
DOCTYPE HTML > < HTML lang =“en”> <头> < meta charset = " utf - 8 " > <标题> untitled < /名称> < /头> <身体> <表单动作= =”“方法”“> <标签= "电子邮件" >电子邮件:< /标签> <输入id =“电子邮件”名称=“电子邮件”类型= "电子邮件" / > <类型=“提交”按钮提交表单< /按钮> < /形式> < /身体> < / HTML >与浏览器支持和不支持的元素和属性,你必须知道所有当前浏览器并不那么可靠。
歌剧,例如,只有当你指定name属性支持电子邮件验证。
然而,它不支持一个占位符属性()将讨论如下。
最后,尽管可以使用这种形式的验证,但是不要过于依赖it.8。
placeholderPreviously,我们需要使用JavaScript来创建一个占位符文本框。
初步值属性是否可以配合,但只要用户删除文本,输入的内容将再次变得空虚。
占位符属性有效地弥补了它。
<输入名称= "电子邮件"类型=“电子邮件”占位符= " doug@givethesepeopleair.com " / > 9。
当地storeThanks HTML 5本地存储,我们可以使先进的浏览器“记住”输入内容,即使后来关闭或刷新浏览器不是影响。
虽然并不是所有的浏览器都支持,但关键的Internet Explorer 8,Safari 4,Firefox 3.5的支持。
页眉和页脚的语义< div id = "头" >…
< / div > < div id = "脚注" >…
< / div >上面的代码一去不复返了。
div基本上没有语义结构,即使应用程序ID.In HTML,我们可以使用<标题>和<页脚>元素,上面的代码可以取代:<标题>…
<标题> <页脚>…
<页脚>,但小心不要把两个元素,头和脚的困惑。
他们只是代表container.11。
Internet explorer和HTML 5即理解新的HTML 5元素需要费一定神,为了确保新HTML 5元素块级元素显示正确,有必要把它们用下面的代码定义风格:页眉,页脚,文章中,部分,导航,菜单,hgroup {显示:块;}即使如此,IE仍然不知道这些元素,从而将忽略这些格式,仍然需要使用下面的代码来解决这个问题:文档。
createElement(“文章”);文档。
createElement(“页脚”);文档。
createElement(“标题”);文档。
createElement(“hgroup”);文档。
createElement(nav);文档。
createElement(“菜单”);12。
组标题(hgroup)假设一个网站有一个名称,副标题,分别使用< h1 >,< h2 >标签来标记,在HTML4没有一个可以使用的关系语义关系描述的好方法,此外,当使用h2其他显示在页面标题,问题是更多的层次结构。
使用组标题hgroup元素,我们可以在一起这些标题,而不会影响整个文档的指导方针。
<标题> < hgroup > < h1 >回忆粉丝页< / h1 > < h2 >只适合那些想要一辈子的记忆。
< / h2 > < hgroup > <标题> 13。
必要的属性(必需)形式允许新属性,有必要规定是否一个特定的输入是必要的。
根据你的喜好编写代码,可以使用以下两种不同的方式来声明这个属性:<输入类型=“文本”name = " someInput需要" >,或者更精确:<输入类型=“文本”name = " someInput要求= "需要“>”上面的两行代码将工作。
使用这个代码后,浏览器支持所需的属性,输入一个空白表单不会被提交。
这是一个简单的例子,与此同时,我们也添加一个占位符属性:<形式方法= " post " action = " " > <标签= " someInput " >你的名字:< /标签> <输入类型=“文本”id = " someInput " Name = " someInput占位符= "奎德"要求> <按钮类型=“提交”> < /按钮> < /形式>如果输入为空,表单将无法提交和突出boxes.14的文本。
房颤(自动对焦)propertiesSimilarly,HTML 5将不再需要使用JavaScript解决方案来解决自动对焦的问题。
如果一个输入应该是“选择”或者是重点,我们现在可以使用HTML自动对焦自动对焦属性。
<输入类型=“文本”name = " someInput”占位符=“奎德”需要一个自动对焦> 15。
音频supportWe不需要依赖第三方插件提供音频。
HTML 5提供音频元素<音频>。
目前,只有最新的浏览器都支持HTML 5的音频。
在这一点上,最好是提供向后兼容性。
<音频播放= "播放控制= "控制" > " <源SRC = "文件。
Ogg " / > <源SRC = "文件。
Mp3 " / > < a href = "文件。
Mp3 " >下载这个文件。
< / > < >音频音频格式表示,Mozilla还没有完全support.Firefox。
希望看到一个ogg文件,浏览器只支持最常见。
Mp3扩展。
这意味着,至少在目前,您应该创建两个版本的音频。
Safari加载页面时,它并不认识。
Ogg文件格式,将跳过和搬到mp3版本。
请注意,即不支持它,Opera 10或更低版本只支持。
Wav files.16。
视频supportWith音频元素<音频>非常喜欢,还会在一个新的浏览器支持html5视频。
事实上,它是在YouTube上最近宣布了一项新的HTML 5视频嵌入。
可以珍惜,因为这说明文件不是视频指出,特定的编码器,所以主要取决于浏览器来决定。
尽管Safari和Internet explorer 9支持h。264视频格式,Firefox和Opera仍然还在坚持和Vorbis格式。
因此,根据HTML 5的视频,你必须提供两个formats.17。
视频加载advanceThe你首先需要决定是否需要提前一个浏览器加载视频。
有必要吗?
假设游客进入一个专门用来显示视频页面,然后很必要预先加载页面保存一段时间等。
你可以设置预加载=“预加载”预装视频,或添加预加载之间也可以。
<视频预加载> 18岁。
根据controlYou可能已经注意到,上面的代码的使用,视频显示一幅画,只会没有任何控制组件。
为了获得我们所需要的播放控件,这些控件中的视频元素中指定的属性。
<视频预加载控制> 19。
常规expressionThanks新模型的属性,我们可以直接在代码中插入一个正则表达式。
<表单动作= " "方法= " post " > <标签=“用户名”>创建一个用户名:< /标签> <输入类型=“文本”Name = "用户名" Id = "用户名"占位符= " 4 " > 10 "模式= "[咱- z]{ 4、10 }”需要一个autofocusThe > <按钮类型=“提交”> < /按钮> < /形式>如果您熟悉正则表达式你会注意,新模型:[咱- z]{ 4、10 }只接受小写字母。
字符串必须至少4个字符,最多是十characters.20。
检测浏览器支持propertiesMentioned,并不是所有的浏览器都支持这些属性,是否有任何方式告诉浏览器是否能识别它们?
问这个问题很好,在这里向您介绍两种方式,第一个选项是使用没有测试,或者您可以创建和分析这些元素来看看浏览器有能力。
例如,在前面的例子,如果我们要确保浏览器能够执行模式属性,您可以添加页面上的JavaScript:警报(文档中“模式”。
createElement(“输入”))/ /一个布尔;事实上,这是一个非常常用的浏览器兼容性的方法。
jQuery库使用这种技术。
上面的代码中,我们创建一个新的输入元素,并确认是否可以识别模式属性。
如果能够识别浏览器支持这一功能,否则不支持。
如果(<脚本> !
的模式文档。
createElement(“输入”)){ / /客户端/服务器端验证} < /脚本>记住,这将需要依靠JavaScript实现! 21。
马克elementThe <标记>元素的主要功能是高亮显示的页面,需要强调它对用户的视觉文本的重要性。
包裹的标签字符串必须与当前用户相关的行为。
举个例子,如果我是在一些博客搜索“开放你的思想”,我可以使用<标记>标记在每一个行动都使用JavaScript来包。
< h3 > < / h3 > < p >搜索结果他们打断,刚刚Quato说,“马克>“开放”< /马克>。
< / p > 22。
当使用< div >是否还需要使用< div >标记吗?
当然需要。
例如,如果你想在一个元素将裹着一段代码,特别是为内容定位,< div >将是一个非常理想的选择。
然而,如果不是上述情况但邮包,或者一个页脚的链接列表,建议您使用<文>和<导航>元素。