html5学习笔记

时间:2024.3.31

一、html5页面结构

1.

2.

3.

4.

5.

6.

7.

8.

9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">改为<!DOCTYPE html> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />改为<meta charset="gb2312" /> <section>类似<div>,主要用于把文档分成不同的逻辑区域。<div>更适合格式化文档。 <article>,如果希望内容相对独立于其他内容,并可以对外部分发,可用此标签。 <aside>,旁注。一般用于文档内。 <header>,文头。不可以在<header>元素内使用<header>元素,否则会无法正确显示文档。 <hgroup>,组合<h1>到<h6>元素。 <footer>,文脚。该元素不能放在<header>和<footer>元素内,否则无法正确显示文档。 <nav>,导航。

10. <figure>插入图表。<figcaption>如果在图片上面,内容就显示在图片上面。

二、html5标记

1.<hr>,可用于分隔区域中的不同话题。

2.<iframe>,较以前版本的html更加重要。

3.<embed>,嵌入媒体文件。

4.<area>,可以把图像按区域进行超链接。

<img src="html5test2.jpg" width="200" height="100" usemap="#um"/> <map name="um">

<area coords="20,80,122,230" href=""

rel="license" media="screen"/>

<area coords="123,82,288,160"

rel="license" media="print"/>

</map> href="" hreflang="en" hreflang="en"

三、html5结构化语义元素

1.itemscope,布尔型的属性,用于创建一个条目。

2.itemprop,用于给条目或子条目增加一个属性。

3.itemtype,用于定义自定义词汇表。

四、表单

1.页面的任何地方都可以声明表单控件,然后通过元素的form属性就可以把元素和表单关联起来。<form id="testForm" />

<input type="text" form="testForm" />

2.使用email类型的输入,<input type="email" />

Email输入类型的有效属性:

① name:包含于此元素关联的名值对的名称,用于提交表单;

② disabled:设置禁用此插件;

③ type:表明该<input>元素是用于编辑给定的电子邮件地址或电子邮件地址列表 的控件;

④ form:全部表单元素的容器;

⑧ autocomplete:存储用户输入的值; autofocus:加载的时候,将焦点放到该元素上; maxlength:元素中可输入的最大长度; list:列出当前元素要建议给用户的预定义选项;

⑨ pattern:验证值的正则表达式;

⑩ readonly:表明控件的值不可编辑;

11 required:指明元素是否为必填; ○

12 size:该元素代表的控件中显示出来的字符数; ○

13 placeholder:<input>元素中显示的文字(一般用作提示信息)○;

14 multiple:对于一个<input>元素,是否可以指定多个电子邮件地址或文件值; ○

15 value:包含一个电子邮件地址或者地址列表。 ○

3.使用url输入类型,<input type=”url” />。(一般浏览器还都不支持)

4.数字微调控件,<input type=”number” />

Number输入类型的有效属性:

① max:浮点值,使用并显示的最大数值;

② min:浮点值,使用并显示的最小数值;

③ step:元素增减的单位;

④ value:代表数字的字符串。

5.滑动框控件,<input type=”range” />

有效属性同上。

6.发送多个文件<input type=”file” multiple />

7.输入的自动完成<input list=”movies”>

<datalist id=”movies”> <option value=”电影名”>

</datalist>

8.利用正则表达式自定义输入类型,<input pattern=”正则表达式” />。(不是所有浏览器都支持)

9.设置输入框的占位符文本,<input type=”text” placeholder=”占位符内容”>。(当输入域里面填写了内容时,该文本消失,没有时自动显示出来)

10.日期和时间控件<input type=”date” /> <input type=”time” />

五、html5媒体元素:audio和video

1.页面嵌入视频<video width=”640” height=”360” src=”视频路径” />。(由于现在每个浏览器支持的视频格式都不一样,有时会因为视频格式的原因显示不出来)

2.为视频提供交互,<video controls/>

3.预加载视频<video preload=”值” />

值 为:①auto,页面加载后立即开始下载视频文件; ②none,不下载视频文件;

③metadata,获取资源的元数据。

4.音频,<audio>元素 <audio controls autoplay src=”音频路径”/>

属性:

① src,一个包含源文件的本地或远程的url;

② autoplay,加载时是否自动播放;

③ loop,是否循环播放;

⑦ controls,是否显示默认媒体控件; preload,是否预加载; play(),播放音频; pause(),暂停音频;

⑧ canPlayType(),给定的MIME类型是否可以播放;

⑨ buffered(),指定音频缓冲的开始时间和结束时间。

六、html5绘图API

1.如何使用<canvas>元素的绘图API。(注:每个<canvas>只能有一个上下文)

①<canvas id="myCanvas" width="300" height="200" style="border:solid 1px #ccc"> </canvas>

②javascript代码:

//访问<canvas>

var canvas=document.getElementById("myCanvas"); //获得<canvas>的上下文对象

var context = canvas.getContext("2d");

2.使用路径和坐标

(1)<canvas>坐标系统,x向右为正值,y向下为正值。

(2)绘制过程: ①调用beginPath()方法开始路径; ②用moveTo(x,y)方法定义路径起点; ③用API方法绘制图形; ④调用closePath()方法关闭路径;

⑤ 调用stroke()或者fill()方法来为图形添加描边或者填充。

(3)图形对应的API

①直线:lineTo(x,y);

②贝赛尔曲线:bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y,endPointX, endPointY);

③二次方曲线:quadraticCurveTo(controlPointX, controlPointY, endPointX, endPointY);

④圆:arc(centerX,centerY,radius,startAngle,endAngle,counter-clockwise);

centerX:圆心横坐标; centerY:圆心纵坐标; radius:半径; start/end Angle:开始/结束 圆的角度; counter-clockwise:true时是逆时针,false是顺时针。

(4)设置形状样式

①线条链接样式:lineJoin,miter(尖角)、round(圆角)、bevel(斜角)。

②线条宽度样式:lineWidth,默认值是1。 ③线条结束样式:lineCap,butt(对接)、round(圆)、square(方)。

3.绘制矩形和圆形的方法

(1)绘制矩形的方法:

①rect(x,y,width,height):添加一个普通矩形

②fillRect(x,y,width,height):绘制一个填充的矩形

③strokeRect(x,y,width,height):绘制一个有线条的矩形

④clearRect(x,y,width,height):删除一个矩形。

(2)画圆的方法:

arc(centerX,centerY,radius,startAngle,endAngle,counter-clockwise),此方法后还需要调用stroke()或者fill()方法才能显示。

七、html5 Canvas

1.<canvas>变换

①缩小/放大,scale(scaleX,scaleY);基数为1; ②移动<canvas>对象,translate(x,y), (x,y)将作为新的原点。 ③旋转<canvas>对象,rotate(angle),angle角度,以弧度为单位。

④变换矩阵,transform(a,b,c,d,e,f);

2.应用阴影和模糊

①shadowColor:阴影颜色; ②shadowOffsetX:设置或者返回水平阴影偏移量; ③shadowOffsetY:设置或者返回垂直阴影偏移量; ④shadowBlur:设置或者返回模糊级别,值必须大于1;


第二篇:C++学习笔记


C++箴言:理解typename的两个含义

问题:在下面的 template declarations(模板声明)中 class 和 typename 有什么不同?

template<class T> class Widget; // uses "class"

template<typename T> class Widget; // uses "typename"

答案:没什么不同。在声明一个 template type parameter(模板类型参数)的时候,class 和 typename 意味着完全相同的东西。一些程序员更喜欢在所有的时间都用 class,因为它更容易输入。其他人(包括我本人)更喜欢 typename,因为它暗示着这个参数不必要是一个 class type(类类型)。少数开发者在任何类型都被允许的时候使用 typename,而把 class 保留给仅接受 user-defined types(用户定义类型)的场合。但是从 C++ 的观点看,class 和 typename 在声明一个 template parameter(模板参数)时意味着完全相同的东西。

然而,C++ 并不总是把 class 和 typename 视为等同的东西。有时你必须使用 typename。为了理解这一点,我们不得不讨论你会在一个 template(模板)中涉及到的两种名字。

假设我们有一个函数的模板,它能取得一个 STL-compatible container(STL 兼容容器)中持有的能赋值给 ints 的对象。进一步假设这个函数只是简单地打印它的第二个元素的值。它是一个用糊涂的方法实现的糊涂的函数,而且就像我下面写的,它甚至不能编译,但是请将这些事先放在一边——有一种方法能发现我的愚蠢:

template<typename C> // print 2nd element in

void print2nd(const C& container) // container;

{

// this is not valid C++!

if (container.size() >= 2) {

C::const_iterator iter(container.begin()); // get iterator to 1st element

++iter; // move iter to 2nd element

int value = *iter; // copy that element to an int

std::cout << value; // print the int

}

}

我突出了这个函数中的两个 local variables(局部变量),iter 和 value。iter 的类型是 C::const_iterator,一个依赖于 template parameter(模板参数)C 的类型。一个 template(模板)中的依赖于一个 template parameter(模板参数)的名字被称为 dependent names(依赖名字)。当一个 dependent names(依赖名字)嵌套在一个 class(类)的内部时,我称它为 nested dependent name(嵌套依赖名字)。C::const_iterator 是一个 nested dependent name(嵌套依赖名字)。实际上,它是一个 nested dependent type name(嵌套依赖类型名),也就是说,一个涉及到一个 type(类型)的 nested dependent name(嵌套依赖名字)。

print2nd 中的另一个 local variable(局部变量)value 具有 int 类型。int 是一个不依赖于任何 template parameter(模板参数)的名字。这样的名字以 non-dependent names(非依赖名字)闻名。(我想不通为什么他们不称它为 independent names(无依赖名字)。如果,像我一样,你发现术语 "non-dependent" 是一个令人厌恶的东西,你就和我产生了共鸣,但是 "non-dependent" 就是这类名字的术语,所以,像我一样,转转眼睛放弃你的自我主张。)

nested dependent name(嵌套依赖名字)会导致解析困难。例如,假设我们更加愚蠢地以这种方法开始 print2nd:

template<typename C>

void print2nd(const C& container)

{

C::const_iterator * x;

...

}

这看上去好像是我们将 x 声明为一个指向 C::const_iterator 的 local variable(局部变量)。但是它看上去如此仅仅是因为我们知道 C::const_iterator 是一个 type(类型)。但是如果 C::const_iterator 不是一个 type(类型)呢?如果 C 有一个 static data member(静态数据成员)碰巧就叫做 const_iterator 呢?再如果 x 碰巧是一个 global variable(全局变量)的名字呢?在这种情况下,上面的代码就不是声明一个 local variable(局部变量),而是成为 C::const_iterator 乘以 x!当然,这听起来有些愚蠢,但它是可能的,而编写 C++ 解析器的人必须考虑所有可能的输入,甚至是愚蠢的。

直到 C 成为已知之前,没有任何办法知道 C::const_iterator 到底是不是一个 type(类型),而当 template(模板)print2nd 被解析的时候,C 还不是已知的。C++ 有一条规则解决这个歧义:如果解析器在一个 template(模板)中遇到一个 nested dependent name(嵌套依赖名字),它假定那个名字不是一个 type(类型),除非你用其它方式告诉它。缺省情况下,nested dependent name(嵌套依赖名字)不是 types(类型)。(对于这条规则有一个例外,我待会儿告诉你。)

记住这个,再看看 print2nd 的开头:

template<typename C>

void print2nd(const C& container)

{

if (container.size() >= 2) {

C::const_iterator iter(container.begin()); // this name is assumed to

... // not be a type

这为什么不是合法的 C++ 现在应该很清楚了。iter 的 declaration(声明)仅仅在

C::const_iterator 是一个 type(类型)时才有意义,但是我们没有告诉 C++ 它是,而 C++ 就假定它不是。要想转变这个形势,我们必须告诉 C++ C::const_iterator 是一个 type(类型)。我们将 typename 放在紧挨着它的前面来做到这一点:

template<typename C> // this is valid C++

void print2nd(const C& container)

{

if (container.size() >= 2) {

typename C::const_iterator iter(container.begin());

...

}

}

通用的规则很简单:在你涉及到一个在 template(模板)中的 nested dependent type name(嵌套依赖类型名)的任何时候,你必须把单词 typename 放在紧挨着它的前面。(重申一下,我待会儿要描述一个例外。)

typename 应该仅仅被用于标识 nested dependent type name(嵌套依赖类型名);其它名字不应该用它。例如,这是一个取得一个 container(容器)和这个 container(容器)中的一个 iterator(迭代器)的 function template(函数模板):

template<typename C> // typename allowed (as is "class")

void f(const C& container, // typename not allowed

typename C::iterator iter); // typename required

C 不是一个 nested dependent type name(嵌套依赖类型名)(它不是嵌套在依赖于一个 template parameter(模板参数)的什么东西内部的),所以在声明 container 时它不必被 typename 前置,但是 C::iterator 是一个 nested dependent type name(嵌套依赖类型名),所以它必需被 typename 前置。

"typename must precede nested dependent type names"(“typename 必须前置于嵌套依赖类型名”)规则的例外是 typename 不必前置于在一个 list of base classes(基类列表)中的或者在一个 member initialization list(成员初始化列表)中作为一个 base classes identifier(基类标识符)的 nested dependent type name(嵌套依赖类型名)。例如:

template<typename T>

class Derived: public Base<T>::Nested {

// base class list: typename not

public: // allowed

explicit Derived(int x)

: Base<T>::Nested(x) // base class identifier in mem

{

// init. list: typename not allowed

typename Base<T>::Nested temp; // use of nested dependent type

... // name not in a base class list or

} // as a base class identifier in a

... // mem. init. list: typename required

};

这样的矛盾很令人讨厌,但是一旦你在经历中获得一点经验,你几乎不会在意它。

让我们来看最后一个 typename 的例子,因为它在你看到的真实代码中具有代表性。假设我们在写一个取得一个 iterator(迭代器)的 function template(函数模板),而且我们要做一个 iterator(迭代器)指向的 object(对象)的局部拷贝 temp,我们可以这样做:

template<typename IterT>

void workWithIterator(IterT iter)

{

typename std::iterator_traits<IterT>::value_type temp(*iter);

...

}

不要让 std::iterator_traits<IterT>::value_type 吓倒你。那仅仅是一个 standard traits class(标准特性类)的使用,用 C++ 的说法就是 "the type of thing pointed to by objects of type IterT"(“被类型为 IterT 的对象所指向的东西的类型”)。这个语句声明了一个与 IterT objects 所指向的东西类型相同的 local variable(局部变量)(temp),而且用 iter 所指向的 object(对象)对 temp 进行了初始化。如果 IterT 是 vector<int>::iterator,temp 就是 int 类型。如果 IterT 是 list<string>::iterator,temp 就是 string 类型。因为 std::iterator_traits<IterT>::value_type 是一个 nested dependent type name(嵌套依赖类型名)(value_type 嵌套在 iterator_traits<IterT> 内部,而且 IterT 是一个 template parameter(模板参数)),我们必须让它被 typename 前置。

如果你觉得读 std::iterator_traits<IterT>::value_type 令人讨厌,就想象那个与它相同的东西来代表它。如果你像大多数程序员,对多次输入它感到恐惧,那么你就需要创建一个 typedef。对于像 value_type 这样的 traits member names(特性成员名),一个通用的惯例是 typedef name 与 traits member name 相同,所以这样的一个 local typedef 通常定义成这样:

template<typename IterT>

void workWithIterator(IterT iter)

{

typedef typename std::iterator_traits<IterT>::value_type value_type;

value_type temp(*iter);

...

}

很多程序员最初发现 "typedef typename" 并列不太和谐,但它是涉及 nested dependent type names(嵌套依赖类型名)规则的一个合理的附带结果。你会相当快地习惯它。你毕竟有着强大的动机。你输入 typename std::iterator_traits<IterT>::value_type 需要多少时间?

作为结束语,我应该提及编译器与编译器之间对围绕 typename 的规则的执行情况的不同。一些编译器接受必需 typename 时它却缺失的代码;一些编译器接受不许 typename 时它却存在的代码;还有少数的(通常是老旧的)会拒绝 typename 出现在它必需出现的地方。这就意味着 typename 和 nested dependent type names(嵌套依赖类型名)的交互作用会导致一些轻微的可移植性问题。

Things to Remember

·在声明 template parameters(模板参数)时,class 和 typename 是可互换的。

·用 typename 去标识 nested dependent type names(嵌套依赖类型名),在 base class lists(基类列表)中或在一个 member initialization list(成员初始化列表)中作为一个 base class identifier(基类标识符)时除外。

更多相关推荐:
Html5开发心得

Html5开发心得HTML5在网页开发上赋予网页更好的意义和结构更加丰富的标签将随着对RDFa的微数据与微格式等方面的支持构建对程序对用户都更有价值的数据驱动的Web北京恒泰博远软件开发公司对HTML5的解释是...

html5开发工具7个最实用的HTML5学习资源

html5开发工具7个最实用的HTML5学习资源虽然HTML5还是很新没有被所有主要浏览器支持但现在还是有许多设计师和开发人员使用毫无疑问几年下来HTML5将对web开发起着很重要的作用我注意到很多人都在使用它...

厦门html培训博看分享HTML5开发物理游戏的心得

厦门html培训博看分享HTML5开发物理游戏的心得HTML5技术为现今Web应用程序在浏览器中提供了非常广阔的发挥空间,其强大的功能让我们在浏览器上开发游戏和玩游戏不再是难事。厦门博看文思利用Canvas和强…

html5学习笔记

一html5简介1html的组合HTML5HTMLCSSJSAPIsHtml5的发展其实是htmlcssjsapi的发展HTML5草案的前身名为WebApplications10是在20xx年由WHATWG提出...

Html5开发心得

Html5开发心得HTML5在网页开发上赋予网页更好的意义和结构更加丰富的标签将随着对RDFa的微数据与微格式等方面的支持构建对程序对用户都更有价值的数据驱动的Web深蓝教育品牌H5EDUcn对HTML5的解释...

1学习心得jumptapCPG品牌如何最大化移动广告效果

根据MaryMeeker用户已经将23的媒体消费时间用在移动设备上我们也看到移动广告的参与率是网络广告的23倍那么这些对于营销者意味着什么尤其是对于CPG营销者这意味着移动互联网不仅是一个营销机遇而是一个必须应...

基于Html5个性化学习系统-开题报告

杭州电子科技大学毕业设计论文开题报告题目学院专业姓名班级学号指导教师基于HTML5的个性化学习系统设计与实现软件工程学院软件工程王竹君1010841110109238任一支一综述本课题国内外研究动态说明选题的依...

html5学习笔记

HTML5的变化和新标签ltgt没有变化是给代码的注释标签会被浏览器忽略只是对代码编辑的解释有助于对代码修改HTML401ltDOCTYPEHTMLPUBLICquotW3CDTDHTML40Transitio...

html学习笔记小结2

43lttrgtltthgtlttdgt标签下的常用属性属性名称属性值说明widthheightalign水平方向rightleftcentervalign垂直方向top数据靠上middle数据居中buttom...

html学习总结

网页第一次课一什么是网页1定义构成网站的基本元素2格式分为静态和动态网页3动态网页的扩展名为jsp或aspx或asp4静态网页的扩展名为html或htm二基本格式lthtmlgtltheadgt标题lthead...

html学习总结2

目录一块结构1二内敛元素1三如何让两个块结构元素显示到一行2四ulli无序列表标签2五背景图片3六定义样式的三种方式5七文字在容器内垂直方向上居中5八容器在另一个容器内水平方向上水平居中5一块结构margin0...

html学习总结

1HTML标签由开始标签和结束标签组成空的HTML元素没有结束标签比如ltbrgt没有内容的HTML内容被称为空元素空元素是在开始标签中关闭的ltbrgt就是没有关闭标签的空元素ltbrgt标签定义换行在XHT...

html5学习心得(9篇)