html5知识点整理笔记,html5基础知识
1. 新的Doctype声明
XHTML语句太长，相信很少有前端开发者能写出这种Doctype语句。
！ DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD
HTML5的Doctype语句很短。相信你看到这个语句马上就能记住，不用浪费脑细胞去记住XHTML这个有点变态的Doctype语句了。
！声明文档类型
HTML5简短的DOCTYPE声明就是让Firefox、Chrome等现代浏览器和IE6/7/8等浏览器进入(准)标准模式。你可能会惊讶，IE6/7也可以支持HTML5 Doctype。其实只要doctype符合这种格式，IE就会进入标准模式。2. figure标签复制代码代码如下：
img alt=关于图像 src=路径/到/图像
h6火星图像。/h6
看一下下面的简单代码：
可惜这里的h6标签好像和img标签没什么关系，语义也不够清晰。HTML5意识到了这一点，所以采用了figure标签。figcaption标签结合fig caption标签时，可以结合h6标签和img标签，代码更有语义。复制代码如下：
我猜的
img alt=关于图像 src=路径/到/图像
图片标题
h6这是一些有趣事物的图像。/h6
/图片标题
/图3. 重新定义small
不久前，我使用小标签创建了与logo相关的副标题。不过，small标签在HTML5中被重新定义，使其更具语义，small中的字体大小会更小。如果这个标签用于网站底部的版权信息，这是一个好主意。4. 去掉了Javascript和CSS标签的type属性
通常将type属性添加到链接和脚本中：复制如下代码：
link rel=style sheet type=text/CSS href= path/to/style sheet . CSS
脚本类型=text/JavaScript src= path/to/script . js /script
在HTML5中，不再需要type属性，因为它有点多余，去掉后可以让代码更简洁。复制代码如下：
link href= path/to/style sheet . CSS
script src= path/to/script . js /script5. 是否使用双引号
这就有点混乱了。HTML5不是XTHML。你可以省去标签中的双引号。我相信包括我在内的大多数同志都习惯加双引号，因为这样代码看起来更规范。不过要不要双引号，可以根据个人喜好来决定。复制代码如下：
H6ID=someidclass=我的班级启动反应堆。/H66. 使网页内容可以编辑复制代码如下：
h2至D0列表/h2
ul内容可编辑
李机械司机/李
李开车去废弃工厂/李
李瓦特/李
/ul7. 电子邮件输入框
HMTL5新增了一个输入框的email属性，可以检测输入内容是否符合email的书写格式。它变得越来越强大。在HTML5之前，只能用JS检测。虽然内置的表单验证功能将很快成为现实，但该属性并不被很多浏览器支持，只会被当作普通的文本输入框。复制代码如下：
表单方法=get
电子邮件的标签:/LABEL
输入id=电子邮件类型=电子邮件名称=电子邮件
按钮类型=提交提交表单/按钮
/表单
到目前为止，现代浏览器还不支持这个属性，所以暂时不靠谱。8. 占位符
文本框中的占位符(见本博客搜索框效果)有助于提高用户体验。以前，我们必须依靠JS来实现占位符效果。在HTML5中，添加了一个占位符属性。关于这个属性的详细介绍，可以点击这里：HTML5表单占位符属性。
INPUT type=email name=email placeholder= Doug @ givethesepeopleair . com
同样，目前主流的现代浏览器也不太支持这个属性。暂时只有Chrome和Safari支持这个属性，Firefox和Opera不支持。9. 本地存储
HTML5的本地存储功能可以让现代浏览器“记住”我们输入的内容，即使浏览器关闭刷新也不会受到影响。虽然部分浏览器不支持该功能，但IE8、Safari 4和Firefox 3.5仍支持该功能。你可以测试一下。10. 更有语义的header和footer
以下代码将不再存在于HTML5中
DIV id=标题
.
/DIV
DIV id=页脚
.
/DIV
通常，我们为页眉和页脚定义一个div，然后添加一个id。但是，在HTML5中，可以直接使用header和footer标记，所以上面的代码可以重写为：
页眉
.
/页眉
页脚
.
/页脚
注意不要将这两个标签与网站的页眉和页脚混淆。他们只是代表他们的容器。11. IE对HTML5的支持
目前IE对HTML5的支持并不好，也是HTML5更快普及的绊脚石。不过IE9对HTML5的支持还是很不错的。
将IE HTML5中的所有新标签解析为内联元素，但实际上它们是块级元素，所以有必要为它们定义一个样式：复制代码如下：
页眉、页脚、文章、节、导航、菜单、组{
显示：块；
}
即便如此，IE仍然无法解析这些新加入的HTML5标签。这时候我们需要Javascript来解决这个问题：复制代码如下：
document . createelement(“article”)；
document.createElement(“页脚”)；
document . createelement(“header”)；
document . createelement( h group )；
document . createelement( nav )；
document . createelement( menu )；
可以借助这段Javascript代码修复IE，更好的解析HTML5复制代码。代码如下：
SCRIPT MCE _ src= http://html 5 shim . Google code . com/SVN/trunk/html 5 . js /SCRIPT _ fcksavedurl= 3358 html 5 shim . Google code . com/SVN/trunk/html 5 . js /SCRIPT _ FCKSAVEDUL= 3358HTML5SHIM.googlecode.com/SVN/trunk/HTML5.js/script12. 标题群( hgroup) 这和第二招类似。如果用h1和h2标签分别表示网站的名称和副标题，会让原本意义上紧密相关的两个标题变得毫无关联。这时候可以用hgroup标签把它们组合起来，这样代码会更有语义。复制代码如下：
页眉
h组
H1回忆粉丝页/H1
H2只适合那些想要终生难忘的人。/H2
/h组
/HEADER13. 必填项属性
前端工作人员肯定做过很多表单验证项目，其中一个就是有些输入框是必须填写的，所以这里需要Javascript来检查。在HTML5中，增加了一个“required”属性：required。有两种方法可以使用required属性。第二种方法更结构化，而第一种方法更简洁。复制代码如下：
需要输入type=text name=someInput
输入类型= text name= some input required= required
有了这个属性，表单的提交验证变得更加容易。看看下面这个简单的例子：复制代码代码如下：
from方法=过帐
label for=some输入您的姓名：/label
输入id=some input type=text name=some input placeholder= Douglas Quaid required= required
按钮类型=提交/按钮
/表单
如果输入框为空，表单将不会成功提交。14. 自动获取焦点
同样，HTML5不再需要Javascript来解决自动获取输入框焦点的问题。如果要选择一个输入框或者获得输入焦点，HTML5增加了自动获得焦点的属性：复制代码如下：
输入类型=text name=some INPUT placeholder= Douglas Quaid required= required auto focus= auto focus
自动对焦也可以写成“自动对焦=自动对焦”，这样看起来比较标准。这个看你个人喜好了。15. 音频播放的支持
HTML5中提供了音频标签，解决了音频文件只能通过第三方插件播放的问题。到目前为止，只有少数最新的浏览器支持这个标签。复制代码如下：
音频控制=控制自动播放=自动播放
source src= file . ogg _ fcksavedurl= file . ogg _ fcksavedurl= file . ogg /
source src=file.mp3 /
a href=file.mp3 下载此文件。/a
/音频
为什么有两种格式的音频文件？因为Firefox和Webkit浏览器支持的格式不同，Firefox只能支持。ogg文件，而Webkit只支持. mp3文件。解决方案是创建两个版本的音频文件，以便它们可以兼容Firefox和Webkit浏览器。需要注意的是，IE不支持这个标签。16. 视频播放的支持
像音频标签一样，HTML5也为播放视频文件提供视频标签支持。YouTube还宣布了HTML5的新视频嵌入。不过可惜的是HTML5的规范并没有指定具体的视频播放器，而是让浏览器自己决定。这导致了浏览器兼容性问题。虽然Safari和IE9都支持H.264格式的视频(Flash player可以播放)，但是Firefox和Opera支持开源的Theora和Vorbis格式。因此，在显示HTML5视频时，必须准备两种格式。复制代码如下：
视频控件预加载
source src= cohagenphonecall . ogv type= video/ogg；编解码器=vorbis，theora /
source src= cohagenphonecall . MP4 type= video/MP4；编解码器=avc1.42E01E，mp4a.40.2 /
差异
你的浏览器太旧了。
a href=cohagenPhoneCall.mp4
请下载此视频。
/a
/div
.
/视频
需要注意的是，虽然可以省略type属性，但是如果添加的话，浏览器可以更快更准确地解析视频文件。不是所有的浏览器都支持HTML5视频，所以你可以选择使用Flash版本。当然，这个决定权在你。17. 预加载视频
预加载属性：预加载首先要确定视频是否需要预加载。如果访问者正在访问一个有很多视频的页面，就需要预加载一个视频，这样可以节省访问者的等待时间，提高用户体验。可以给视频标签添加一个预加载属性，实现预加载的功能。复制代码如下：
视频预加载=预加载
.
/视频18. 显示控件
display属性可以添加一个控件来暂停视频。需要注意的是，每个浏览器的显示效果可能会有些不同。复制代码如下：
视频控件=控件预加载=预加载
.
/视频19. 使用正则表达式
在HTML5中，我们可以直接使用正则表达式。复制代码如下：
form method=post action=
=Username的标签创建用户名：/label
input id=username type=text name=username placeholder= 4 10 required= required auto focus= auto focus pattern=[A-Za-z]{ 4，10}
按钮类型=提交/按钮
/表格20. 检测浏览器对HTML5属性的支持
因为不同的浏览器对HTML5属性的支持不同，这导致了一些兼容性问题。但是，您可以使用方法来检查浏览器是否支持这些属性。如果上面例子中的代码想要检查模式属性是否被浏览器识别，可以使用Javascript代码进行检查。复制代码如下：
alert( pattern in document . createelement( input ))//boolean；
其实这是一种常用的确定浏览器兼容性的方法，jQuery库也经常使用这种方法。上面的代码创建了一个输入标签，并检查浏览器是否支持模式属性。如果是，浏览器就支持这个功能，否则就不支持。复制代码如下：
脚本
如果(！document . createelement( input )}中的 pattern
//进行客户端/服务器端验证
}
/script21. Mark标签
标记用于突出那些需要在视觉上向用户突出其重要性的单词。包装在这个标签中的字符串必须与用户的当前行为相关。
比如我在一些博客中搜索“打开你的思维”，我可以在mark标签中使用JavaScript来包装每一个动作。复制代码如下：
h3搜索结果/h3
h6他们被打断了，就在夸托说，马克打开你的心灵/马克。/h622. 该如何正确的使用div标签
有人会问，有了header和footer这样的标签，div标签在HTML5中还有用吗？答案是肯定的。比如你想创建一个可以包装特殊内容的容器，一个自由灵活的div绝对是首选。如果你想创建一篇文章或导航菜单，我建议你使用更多的语义文章和导航标签。
很多人觉得HTML5可能还是一个很遥远的东西，所以就忽略了。其实不是的。现在很多网站都开始用HTML5了。其实HTML5的一些新属性和新功能是为了让代码更简洁，这总是好事，应该被我们称赞。最后，感谢您阅读这篇HTML5文章。希望这篇文章对你有所帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。