优秀程序员Web前端培训分享HTMLCSS学习笔记HTML5基础知识
• HTML 5 的第一个正式草案于2008 年1 月22 日发布。HTML5 仍在进行中。然而，大多数现代浏览器已经提供了一些HTML5 支持。
• 本草案发布以来，自2012年12月27日起已进行近百处修改，包括HTML和XHTML标签、相关API、Canvas等。同时，HTML5图像img标签和svg也进行了修改。进行了改进，性能进一步提高
兼容
支持Html5的浏览器包括Firefox（火狐浏览器）、IE9及以上版本、Chrome（谷歌浏览器）、Safari、Opera等；国内的傲游浏览器（Maxthon），以及基于IE或Chromium的浏览器（Chrome工程版或实验版推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器）也都具备了支持HTML5的能力。
语法
·内容类型（ContentType）
· HTML5的文件扩展名和内容类型保持不变，仍然是“.html”或“.htm”
·不区分大小写
· 指定字符集编码
· 元字符集=’UTF-8′
· 标记的元素可以省略
· 不允许使用带有结束标签的元素：br、col、embed、hr、img、input、link、meta
· 带有结束标签的元素可以省略：
· li、dt、dd、p、选项、colgroup、thead、tbody、tfoot、tr、td、th
· 可以省略所有标记元素：html、head、body、colgroup、tbody
· 属性值可以使用双引号或单引号。
语义化标签
在HTML 5 出现之前，我们使用div 来表示页面章节，但这些div 没有实际意义。 （即使我们使用CSS样式id和class来描述这个内容的含义）。这些标签只是我们向浏览器提供的指令，用于定义网页的某些部分。但现在，那些以前没有“意义”的标签，因为html5的出现而消失了。这就是我们通常所说的“语义”。
·section元素代表页面的一个部分
· Article 元素表示独立于上下文的独立内容。
·aside元素是文章之外的、与文章内容相关的辅助信息。
· header 元素表示页面中的内容块或整个页面的标题。
· 页脚元素表示页面中内容块或整个页面的页脚。
· nav元素代表页面的导航链接部分
figure元素代表一段独立的内容，figcaption元素用于添加标题（第一个或最后一个子元素的位置）
· main元素代表页面的主要内容（即不兼容）
· 一组hgroup头
· 标记定义突出显示的文本（跨度）
· 时间时间
·dialog标签定义了一个类似微信的对话框（对话框）
· embed标签定义外部交互内容或插件，如flash
多媒体标签
视频src=”/视频音频src=”/音频
· 特性
· 控件属性：如果出现此属性，则向用户显示控件，例如播放按钮。
· 自动播放属性：如果存在此属性，视频将在准备好后立即播放。
· 循环属性：重复播放属性。
·静音属性：静音属性。
· 海报属性：指定视频下载过程中直到用户单击播放按钮时显示的图像。
· 来源
· 源标签定义媒体元素（例如视频和音频）的媒体资源。
· 源标签允许您指定替代视频/音频文件，供浏览器根据其对媒体类型或编解码器的支持进行选择。
· 类型属性值：
· 视频：视频/ogg视频/mp4视频/webm
· 对于音频：audio/ogg audio/mpeg
HTML5表单
·新型类型
Type=”email” 限制用户输入电子邮件类型
type=”url” 限制用户输入url类型
Type=”range” 生成滑块形式
type=”number” 限制用户输入数字类型
Type=”search” 生成一个搜索表单
Type=”color” 生成颜色选择表格
type=”time” 限制用户输入时间类型
type=”month” 限制用户输入月份类型
type=”week” 限制用户输入周类型
Type=”datetime-local” 选择当地时间
类型=“日期”
· 添加了新的表单属性
required 监视它是否为空。
最小值最小值
最大最大
步骤确定合法值。 -3 0 3 6 9
该列表必须与datalist 标签和datalist id 名称组合在一起。
autocomplete 是否自动提示信息属性值on off
占位符文本框的提示信息
自动对焦自动对焦。一页只能包含一个。
pattern后面的属性值是一个正则表达式。
novalidate 取消验证
多个选择（上传）多个
· 新增表单标签
·输出
form action=” oninput=’x.value=parseInt(a.value)+parseInt(b.value)’
输入id=’a’ type=’range’ min=’0′ max=’100’100+
输入id=’b’ 类型=’文本’ 值=’50’=
输出名称=’x’ for=’a b’/输出/表单
· datalist 必须与list 属性结合使用。做出提示信息。
输入类型=’url’列表=’url_list’名称=’链接’/datalist id=’url_list’
option label=’W3School’ value=’http://www.W3School.com.cn’ /
选项标签=’Google’值=’http://www.google.com’/
用户评论
滴在键盘上的泪
这篇HTML5基础知识的学习笔记太实用了！刚刚入门前端，感觉这篇笔记能帮我少走很多弯路。
有16位网友表示赞同！
我绝版了i
学习了，感觉HTML5确实比之前的版本强大多了，希望这篇笔记能让我快速掌握。
有6位网友表示赞同！
红玫瑰。
博主分享的HTMLCSS学习笔记太详细了，点赞！特别是对初学者来说，这个分享太有价值了。
有20位网友表示赞同！
放肆丶小侽人
看了这篇Web前端培训分享，发现博主对HTMLCSS的掌握真的很扎实，我也想加入培训了。
有11位网友表示赞同！
莫名的青春
学习HTML5的过程中，这篇笔记给了我很多帮助，感谢分享！
有14位网友表示赞同！
余笙南吟
这个HTML5基础知识讲解得真到位，对于想要转行前端的人来说，这篇笔记是一份不错的指南。
有19位网友表示赞同！
龙吟凤
这篇Web前端培训分享让我对HTMLCSS有了更深入的了解，特别是HTML5的新特性，太赞了！
有12位网友表示赞同！
青瓷清茶倾城歌
学习了，感觉博主对HTMLCSS的热爱真的感染了我，我也想成为像博主这样的优秀程序员。
有8位网友表示赞同！
开心的笨小孩
这篇HTMLCSS学习笔记虽然不长，但信息量很大，非常实用，感谢分享！
有19位网友表示赞同！
别伤我i
作为前端新人，这篇HTML5基础知识的学习笔记对我帮助很大，感谢博主！
有18位网友表示赞同！
别在我面前犯贱
博主分享的Web前端培训经验很实用，我已经收藏了，希望能借此机会提升自己。
有5位网友表示赞同！
浅嫣婉语
这篇HTMLCSS学习笔记让我对HTML5有了更全面的了解，点赞！
有18位网友表示赞同！
呆檬
学习了，感觉博主对HTML5的掌握真的很专业，希望以后能有机会向博主学习。
有12位网友表示赞同！
箜明
这篇HTML5基础知识讲解得太清晰了，对于前端小白来说，这篇笔记简直就是救星。
有12位网友表示赞同！
＊巴黎铁塔
博主分享的Web前端培训经验让我看到了前端的美好前景，谢谢分享！
有18位网友表示赞同！
有恃无恐
这篇HTMLCSS学习笔记让我对前端开发有了更深的认识，希望以后能成为像博主一样的优秀程序员。
有10位网友表示赞同！
坏小子不坏
学习了，感觉这篇HTML5基础知识的学习笔记对我在前端开发上的帮助很大，感谢分享！
有17位网友表示赞同！
不识爱人心
这篇Web前端培训分享让我对前端开发有了新的认识，特别是HTML5的新特性，让我眼前一亮。
有16位网友表示赞同！
凉凉凉”凉但是人心
博主分享的HTMLCSS学习笔记让我对前端开发有了更深的理解，希望以后能和博主交流学习。
有12位网友表示赞同！
巷雨优美回忆
学习了，感觉这篇HTML5基础知识的学习笔记对我入门前端有很大帮助，感谢分享！
有7位网友表示赞同！