HTML5培训教程：HTML5基础介绍
HTML5发展史：
HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。
• HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
• 2012年12月17日，万维网联盟(W3C)正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”
• 2013年5月6日， HTML 5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言(HTML)。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。
• 本次草案的发布，从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"
DOCTYPE声明
不区分大小写
指定字符集编码
<meta charset="UTF-8">
可省略标记的元素
不允许写结束标记的元素：br、col、embed、hr、img、input、、link、meta
可以省略结束标记的元素：
li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
可以省略全部标记的元素：html、head、body、colgroup、tbody
属性值可以使用双引号，也可以使用单引号。
语义化标签：
在HTML 5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。（即使我们用css样式的id和class形容这块内容的意义）。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部分。但现在，那些之前没“意义”的标签因为因为html5的出现消失了，这就是我们平时说的“语义”。
section元素 表示页面中的一个区块
article元素 表示一块与上下文无关的独立的内容
aside元素 在article之外的，与article内容相关的辅助信息
header元素 表示页面中一个内容区块或整个页面的标题
footer元素 表示页面中一个内容区块或整个页面的脚注
nav元素 表示页面中导航链接部分
figure元素 表示一段独立的内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)
main元素 表示页面中的主要的内容(ie不兼容)
hgroup标题的一个分组
mark定义高亮显示的文本(span)
time时间
dialog标记定义一个对话框(会话框)类似微信
embed 标记定义外部的可交互的内容或插件 比如flash
多媒体标签：
<video src=""></video>
<audio src=""></audio>
属性
controls属性：如果出现该属性，则向用户显示控件，比如播放按钮。
autoplay属性：如果出现该属性，则视频在就绪后马上播放。
loop属性：重复播放属性。
muted属性：静音属性。
poster属性：规定视频正在下载时显示的图像，直到用户点击播放按钮。
source
<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
Type属性值：
用于视频：video/ogg video/mp4 video/webm
用于音频：audio/ogg audio/mpeg
HTML5表单：
新增type类型
Type=“email” 限制用户必须输入email类型
Type=“url” 限制用户必须输入url类型
Type=“range” 产生一个滑动条表单
Type=“number” 限制用户必须输入number类型
Type=“search” 产生一个搜索意义的表单
Type=“color” 生成一个颜色选择的表单
Type=“time” 限制用户必须输入时间类型
Type=“month” 限制用户必须输入月类型
Type=“week” 限制用户必须输入周类型
Type=“datetime-local” 选取本地时间
Type=”date”
新增表单属性
required 监测是否为空。
min 最小
max 最大
step 步幅 确定一个法定值。 -3 0 3 6 9
list 必须结合datalist标签，绑定datalist id名称。
autocomplete 是否自动提示信息 属性值 on off
placeholder 文本框的提示信息
autofocus 自动聚焦。一个页面只能由一个。
pattern 后面的属性值是一个正则表达式。
novalidate 取消验证
multiple 选择（上传）多个
新增表单标签
output
<form action="" οninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input id="a" type="range" min="0" max="100">100+
<input id="b" type="text" value="50">=
<output name="x" for="a b"></output>
</form>
datalist 必须和list属性结合使用。做提示信息。
<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
相关文章：
LeetCode实战：买卖股票的最佳时机 II
背景 为什么你要加入一个技术团队？如何加入 LSGO 软件技术团队？我是如何组织“算法刻意练习活动”的？为什么要求团队的学生们写技术Blog 题目英文 Say you have an array for which the ith element is the price of a given stock on day …
csdn模拟登陆
版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章原始出版、作者信息和本声明。否则将追究法律责任。http://blog.csdn.net/mayongzhan - 马永占,myz,mayongzhan 首先声明本模拟不稳定,有时会出现登陆不进去.模拟的原理请参考bl…
Xcode 创建.a和framework静态库(转)
最近因为项目中的聊天SDK，需要封装成静态库，所以实践了一下创建静态库的步骤，做下记录。 库介绍 库从本质上来说是一种可执行代码的二进制格式，可以被载入内存中执行。库分静态库和动态库两种。iOS中的静态库有 .a 和 .framework两…
软件测试培训需要学习什么
软件测试在近几年引起了很多人的关注，不少人都想要学习软件测试，零基础的学员都会选择报软件测试培训机构学习，那么软件测试需要学习什么呢?来看看下面的详细介绍。 软件测试培训需要学习什么? 软件测试需要学测试环境(网络环境，…
IL，Emit之OpCodes说明（备查）
名称说明Add将两个值相加并将结果推送到计算堆栈上。Add_Ovf将两个整数相加，执行溢出检查，并且将结果推送到计算堆栈上。Add_Ovf_Un将两个无符号整数值相加，执行溢出检查，并且将结果推送到计算堆栈上。And计算两个值的按位“与”并…
LeetCode实战：只出现一次的数字
背景 为什么你要加入一个技术团队？如何加入 LSGO 软件技术团队？我是如何组织“算法刻意练习活动”的？为什么要求团队的学生们写技术Blog 题目英文 Given a non-empty array of integers, every element appears twice except for one. Find…
610D - Vika and Segments（线段树+扫描线+离散化）
扫描线：http://www.cnblogs.com/scau20110726/archive/2013/04/12/3016765.html 看图，图中的数字是横坐标离散后对应的下标，计算时左端点不变，右端点加1，所以总的更新的区间是l到r-1。 也可以理解为1代表的是ÿ…
UI设计比较流行的插画类型和运用
在当代平面设计中，插画是颇为经常使用的展现性元素，是视觉转达的紧张对象。插画在设计作品中，每每用来指导、开导和出现消息，更有针对性地、视觉化地同用户举行交换。真正高效的插画必然是有针对性的，易于辨认的&#…
poj 2362 Square
#include <iostream> //参照poj 1011 sticks#include <algorithm>using namespace std;int sticks[20],visited[20];int flag,total;int t,seg;int cmp(const void* a,const void* b){return (*(const int*)b)-(*(const int *)a);}void solve(int k,int…
Java BIO、NIO、AIO
同步与异步 同步与异步的概念, 关注的是 消息通信机制 同步是指发出一个请求, 在没有得到结果之前该请求就不返回结果, 请求返回时, 也就得到结果了.比如洗衣服, 把衣服放在洗衣机里, 没有洗好之前我们一直看着, 直到洗好了才拿出来晾晒. 异步是指发出一个请求后, 立刻得到了回…
LeetCode实战：数组中的第K个最大元素
背景 为什么你要加入一个技术团队？如何加入 LSGO 软件技术团队？我是如何组织“算法刻意练习活动”的？为什么要求团队的学生们写技术Blog 题目英文 Find the kth largest element in an unsorted array. Note that it is the kth largest el…
热修复测试过程注意事项
软件测试行是近几年比较火热的技术岗位，想要学习软件测试的同学有很多，今天小编给你分析一下关于热修复测试过程注意事项的相关内容，如果你在一次测试中脱颖而出那将来的你一定很精彩! 基于tinker实际测试过程中遇到的问题，小编简…
LeetCode实战：存在重复元素
背景 为什么你要加入一个技术团队？如何加入 LSGO 软件技术团队？我是如何组织“算法刻意练习活动”的？为什么要求团队的学生们写技术Blog 题目英文 Given an array of integers, find if the array contains any duplicates. Your function…
oracle exec 和 call 区别
转自：http://helloaq.iteye.com/blog/221614 exec 和 call 执行一个procedure时， exec是sqlplus的命令，只能在sqlplus中使用。 call是sql命令，任何工具都可以使用转载于:https://www.cnblogs.com/zerocc/archive/2011/07/27/21189…
html简单响应式滚动条置顶
简单响应式滚动条置顶 一般的，让页面出现滚动条的常见方法有： overflow:auto||overflow:scroll 或者overflow-x水平滚动条和overflow-y垂直滚动条那么现在要实现这样的一个效果： 直接在body中给一个header，后面一个Group盒子&…
UI设计培训之：5个小技巧快速学会PS抠图
一听到PS抠图，我们大家心里是不是产生了退却心理，害怕它过于复杂的操作。 那么现在有一种简单方法教给大家，如何在10分钟内快速学会ps抠图。 而你所需要准备的就是给自己10分钟的尝试时间。 你没有尝试过某件事情，就不要轻易说它难…
AIX VNC setup
1. 下载VNC for AIX虽然标明是for AIX51的，但AIX53和AIX61仍可用。 2. 安装RPM: rpm -Uhv vnc-3.3.3r2-3.aix5.1.ppc.rpm 3.编辑配置文件： # which vncserver/usr/bin/X11/vncserver #chmod 777 /usr/binX11/vncserver vi /usr/bin/X11/vncserver 更改前…
历史 history
题目描述 历史学家小Ａ正在研究一个奇怪的王国的历史。当前阶段的任务是研究该国的交通。 根据这个奇怪的王国的史书记载，史书开始记载前这个王国有 n 个城市（城市从 0 开 始标号） ，但所有城市之间都没有道路相连。 …
LeetCode实战：Nim 游戏
背景 为什么你要加入一个技术团队？如何加入 LSGO 软件技术团队？我是如何组织“算法刻意练习活动”的？为什么要求团队的学生们写技术Blog 题目英文 You are playing the following Nim Game with your friend: There is a heap of stones on…
python值得报班学习吗
python值得报班学习吗?最近有很多想要学习Python的同学都会问到这个问题，Python在近几年的发展前景是非常不错的，想要学会Python编程语言，建议还是报班学习，来看看下面的详细介绍吧。 python值得报班学习吗?首先Python值不…
LeetCode实战：2的幂
背景 为什么你要加入一个技术团队？如何加入 LSGO 软件技术团队？我是如何组织“算法刻意练习活动”的？为什么要求团队的学生们写技术Blog 题目英文 Given an integer, write a function to determine if it is a power of two. Example 1: …
P1214 等差数列
https://www.luogu.org/problem/show?pid1214#sub 暴力枚举题，加上一些剪枝。 （原谅我卑劣地提交了两个答案特判） #include<iostream> #include<cstdio> #include<cstring> #include<vector> #include<algorit…
cocos2d 0.99.5版本屏幕默认是横屏，怎么修改为竖屏呢？
在RootViewController.m文件里面，修改如下代码#elif GAME_AUTOROTATION kGameAutorotationUIViewController // // EAGLView will be rotated by the UIViewController // // Sample: Autorotate only in landscpe mode // // return YES for th…
学习java三个技巧要知道!
java一直是IT行业发展前景非常不错的一门编程语言，学起来是相对有点困难的，尤其是零基础学员，要想学好java技术，一定要知道这三个技巧，来看看下面的详细介绍就知道了。 学习java三个技巧要知道! 1. 树立学习的信心 很多…
LeetCode实战：格雷编码
背景 为什么你要加入一个技术团队？如何加入 LSGO 软件技术团队？我是如何组织“算法刻意练习活动”的？为什么要求团队的学生们写技术Blog 题目英文 The gray code is a binary numeral system where two successive values differ in only o…
Programmer of Practice Manual
这是我以前再读研究生的时候写的东东，希望搞计算机的同学，教计算机本科生学习技术的文章（非算法类）粘在这里纪念一下。 大一寒假 结构化编程基础： 图书：《How to C》 实践过程：完成课后的习题&a…
改善C#程序的建议3：在C#中选择正确的集合进行编码
原文:改善C#程序的建议3：在C#中选择正确的集合进行编码要选择正确的集合，我们首先要了解一些数据结构的知识。所谓数据结构，就是相互之间存在一种或多种特定关系的数据元素的集合。结合下图，我们看一下对集合的分类。 集合分类 …
Python工程师求职必知的经典面试题
最近几年，学习Python语言的同学越来越多，学成之后大家对于后期的面试都遇到了很多难题，小编这次为大家整理了一份关于Python工程师求职必知的经典面试题!希望能够帮助到正在找Python工作的同学们。 Python工程师求职必知的经典面试题…
LeetCode实战：二叉树中的最大路径和
背景 为什么你要加入一个技术团队？如何加入 LSGO 软件技术团队？我是如何组织“算法刻意练习活动”的？为什么要求团队的学生们写技术Blog 题目英文 Given a non-empty binary tree, find the maximum path sum. For this problem, a path i…
为Visual Studio添加配色方案
看到网上有一些教程，他们的代码截图，不是VS默认的白底黑字，觉得挺好看，就也把自己的VS鼓捣了一把： 使用的是现成的配色方案，试了好几种，就觉得这个看着舒服son-of-obsidian.vssettings 你可以去…