【HTML5与CSS3基础教程第八版学习笔记11~15章-平凡世界平凡人】教程文章相关的互联网学习教程文章

HTML5学习笔记简明版(5):input的type超级类型

HTML5为input的type类型增加了多种枚举值,用来表达不同的意思,同事具有验证功能,如果格式不对,浏览器将原始提供错误提示,堪称超级牛X啊,具体如下:Keyword Data type hidden任意字符text单行文本search单行文本tel单行文本url绝对地址email一个或多个email地址password单行文本datetime带有时区的时间date无时区的年月日时间month无时区的年月week无时区的周数time无时区的时间(小时,分钟,秒,毫秒)datetime-local无时区...

HTML5学习笔记简明版(9):变化的元素和属性

改变的元素(Element)以下元素在HTML5里的用法稍作修改以便能在web里更好的使用或者起到更大作用:没有href属性的a元素将显示成一个占位符,而且a元素内部现在支持flow content类型的元素了(例如:article, input, span等)。address可以被article, aside, nav, section限定范围了,以前只能作用于全局范围。b元素现在描述为在普通文章中仅从文体上突出的不包含任何额外的重要性的一段文本。例如:文档概要中的关键字,评论中的产...

HTML5学习笔记简明版(6):新增属性(1)

a和area下的media属性为了和link元素保存一致性,a元素和area元素也都增加了media属性,只有在href存在时菜有效。media属性的意思是目标 URL 是为何种媒介/设备优化的,默认值是all,详细语法规范请访问:http://dev.w3.org/csswg/css3-mediaqueries/#media0代码示例:<a href="att_a_media.asp?output=print" media="print and (resolution:300dpi)"> HTML5 a media attribute. </a>area下的hreflang, type, rel属性为了保存和a元...

HTML5学习笔记简明版(10):废弃的元素和属性

废弃的元素(Element)这个小节里列出的元素在HTML5里将不再使用,现有文档升级到 HTML5的话可以使用一些替代方案。例如parser section 可以处理isindex 元素的功能。下面的元素被废弃的原因是用CSS处理可以更好地替代他们:basefontbigcenterfontstrikett下面的元素被废弃的原因是他们的使用破坏了可使用性和可访问性:frameframesetnoframes下面的元素被废弃的原因是不经常使用他们,也会引起混乱,而且其它元素也可以很好地实现...

HTML5学习笔记简明版(11):新增的API

HTMLDocument上的扩展HTML5在DOM Level 2 HTML上扩展了一些HTMLDocument的接口。这些接口在所有实现了Document接口的元素对象上进行了实现。HTML5在里面也新增加了几个成员:getElementsByClassName():用class类获取元素,用这个方法可以查询任何带有class属性且带有符合该class参数值的元素和Document对象(例如:SVG和MathML)。innerHTML:一种解析和序列化HTML/XML文档的方式,该属性在以前版本的浏览器里只支持HTMLElement并...

html5学习笔记

html5文档必须以开头lang为属性,属性值为en(定义语言为英语)或zh-CN(定义语言为中文)如果浏览器遵循w3c标准,lang属性可以用来定义样式,class定义了主要的样式,lang属性可以在此基础上做出修改,比如:p{ font-family: "宋体" font-size: 14px; color: #F00;}p:lang(zh-CN){ font-family: "宋体"}p:lang(en-US){ font-family: Arial} 这里p标签的主要CSS只定义了字体大小和颜色,然后就需要通过标签的la...

html5中canvas学习笔记1-画板的尺寸与实际显示尺寸_html5教程技巧【图】

在canvas中当在canvas上写width和height时为canvas的实际画板大小,默认情况下width为300px,height为150px。 在style里面写css样式的时候widht和height为实际显示尺寸大小。 现在以用canvas画一个对角线为例: 代码如下: canvas window.onload = function(){ getCanvas(); }; //canvase绘图 function getCanvas(){ //获得canvas元素及其绘图上下文 var canvas = document.getElementById('canvasId'); var context = canvas.g...

html5中canvas学习笔记2-判断浏览器是否支持canvas_html5教程技巧【图】

判断浏览器是否支持canvas,具体代码如下: 代码如下: canvas window.onload = function(){ /**判断浏览器是否支持canvas**/ try{ document.createElement('canvas').getContext('2d'); var addDiv = document.createElement('div'); addDiv.innerHTML='支持canvas'; document.body.appendChild(addDiv); }catch(e){ var addDiv = document.createElement('div'); addDiv.innerHTML='浏览器不支持canvas'; document.body.appen...

HTML5video标签(播放器)学习笔记(二):播放控制_html5教程技巧【图】

上一篇介绍了html5标签video(播放器)初始化需要做的一些工作,如何简单快速使用html5的播放器,本文将重点介绍如何用JS来操作video标签,也就是如何对video做一些简单基本的操作,包括了播放器的播放、暂停,音量的读取、设置等写相关操作,从而开始播放器的扩展之路。 本文的目录: 1.获取影片总时长2.播放、暂停3.获取影片已播放时间和设置播放点4.音量的获取和设置 第一、获取影片总时长 对播放器(video)操作,首先要得...

HTML5video标签(播放器)学习笔记(一):使用入门_html5教程技巧

近有在学习html5中video标签(播放器)的使用,这里做一些学习笔记,方便自己查阅和记录,本文是第一篇,将介绍的是使用该标签初始化该做的哪些工作。 网上的教程其实也不少了 w3cschool里面的最为简单而详细,那么这几介绍的是一些更为直接的应用。 本文目录: 1.使用标签2.加上一些必要参数3.自动播放或自动加载4.规范播放器 第一步:使用标签 使用的方法很简单,就是一句代码:代码如下: 第二步:加上一些必要的参数,比如播放...

HTML5学习笔记之HistoryAPI_html5教程技巧【图】

一,开篇分析 好了,废话不多说,直接进入今天的主题,今天主要讲的是“History API”及在单页应用中的作用,并且会引入一个实际的例子做为讲解的原型范例,先来看看“History API”:为了提高Web页面的响应速度,越来越多的开发者开始采用单页面结构(single-page application)的解决方案。所谓的单页面结构就是指多个页面间切换时,不刷新当前整个页面,更新页面展示数据,并且相应地改变地址栏中的url,以使用户可以分享这个ur...

HTML5学习笔记之html5与传统html区别_html5教程技巧

一. HTML5语法的改变 该知识点所说变化指的是基于HTML4基础上所定义的改变,主要有如下: 1.HTML5的文件扩展符(.html或.htm)与内容类型(text/html)保持不变。 2.HTML5中,刻意不使用版本声明,一份文档将会适用于所有版本的HTML。 3.从HTML5开始,对于文件的字符编码推荐使用UTF-8。 4.HTML5确保了与之前HTML版本的最大程度的兼容性。 为了保证兼容性,需从元素说起,在HTML5.中,元素的标记可以省略。其体来说,元素的标记分为&ld...

html5学习笔记:canvas

1.什么是canvas? 可以绘制图形的标签。一般用javascript来绘制。 2.创建一个画布1 DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <canvas id="mycanvas" width="100" height="100"></canvas> //创建画布用canvas标签 8 </body> 9 </html>3.在画布上绘图。1 <script type="text/javascript">2 //用javascript来绘制图像3 //获取到canvas元素4 var can=document.getElementById("myc...

学习笔记关于HTML(含HTML5)的块级元素和行级(内联)元素总结

1.首先我们要知道什么是块级元素和行级(内联)元素?块级(block)元素的特点: ①总是在新行上开始; ②高度,行高以及外边距和内边距都可控制; ③宽度缺省是它的容器的100%,除非设定一个宽度; ④它可以容纳内联元素和其他块元素。内联(inline)元素的特点:①和其他元素都在一行上;②高,行高及外边距和内边距不可改变;③宽度就是它的文字或图片的宽度,不可改变;④内联元素只能容纳文本或者其他内联元素。2.好的,我们来...

HTML5学习笔记1_html/css_WEB-ITnose【图】

1.HTML5概述 继html4和xhtml1.0后的超文本标记语言最新版本。最重要的三项技术:html5核心规范(标签元素),CSS3,JavaScript2008年发布,主要为了补全功能。特点:1.向下兼容;2。用户至上;3.化繁为简;4.无插件范式(flash插件);5.访问通用性;6.引用语义;7.引入原生媒体支持;8.引入可编程内容;开发工具:sublime text3,Soda Dark3软件界面主题。 2.基本格式 //文档类型声明 //设置语言 ...