HTML5 In or Out

合集下载

html5手机常见问题与工具分享

html5⼿机常见问题与⼯具分享mobileTechA useful tools or tips list for mobile web application developing这个项⽬收集移动端开发所需要的⼀些资源与⼩技巧⼯具类⽹站iphone6的那些事响应式测试⼯具Firefox 浏览器内置了⾃定义设计视图的功能，可以通过Firefox->Web 开发者->⾃定义设计视图（或者摁下Shift + Ctrl + m）。

相⽐⽹络⼯具，运⾏更加流畅，⽆需联⽹。

媒体查询常⽤样式表：<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> // 竖放加载<link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css"> // 横放加载//竖屏时使⽤的样式<style media="all and (orientation:portrait)" type="text/css">#landscape { display: none; }</style>//横屏时使⽤的样式<style media="all and (orientation:landscape)" type="text/css">#portrait { display: none; }</style>Web app 开发的最佳实践与中⽂总结来⾃的⼀些移动端经验总结⼲货本资料很多引⽤了指尖上的js系列基础知识meta标签meta标签，这些meta标签在开发webapp时起到⾮常重要的作⽤<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" /><meta content="yes" name="apple-mobile-web-app-capable" /><meta content="black" name="apple-mobile-web-app-status-bar-style" /><meta content="telephone=no" name="format-detection" />第⼀个meta标签表⽰：强制让⽂档的宽度与设备的宽度保持1:1，并且⽂档最⼤的宽度⽐例是1.0，且不允许⽤户点击屏幕放⼤浏览；尤其要注意的是content⾥多个属性的设置⼀定要⽤分号+空格来隔开，如果不规范将不会起作⽤。

六种常见的HTML5写法误用

六种常见的HTML5写法误用在html5的写法中笔者总结6中最常见的写法错误，如下显示一、不要使用section作为div的替代品人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>——具体地说，就是直接用作替代品(用于样式)。

在XHTML或者HTML4中，我们常看到这样的代码：<div id="wrapper"><div id="header"><h1>My super duper page</h1></div><div id="main"></div><div id="secondary"></div><div id="footer"></div></div>而现在在HTML5中，会是这样：<section id="wrapper"><header><h1>My super duper page</h1></header><section id="main"></section><section id="secondary"></section><footer></footer></section> 这样使用并不正确：<section>并不是样式容器。

22个HTML5的初级技巧

22个HTML5的初级技巧作者：雨夜带刀类型:原创来源:雨夜带刀's Blog目录22个HTML5的初级技巧 (1)作者：雨夜带刀类型:原创来源:雨夜带刀's Blog (1)1. 新的Doctype声明 (1)2. <figure>标签 (2)3. 重新定义<small> (2)4. 去掉了Javascript和CSS标签的type属性 (2)5. 是否使用双引号 (3)6. 使网页内容可以编辑 (3)7. 电子邮件输入框 (3)8. 占位符 (4)9. 本地存储 (4)10. 更有语义的header和footer (5)11. IE对HTML5的支持 (5)12. 标题群( hgroup) (6)13. 必填项属性 (6)14. 自动获取焦点 (7)16. 视频播放的支持 (7)17. 预加载视频 (8)18. 显示控件 (8)19. 使用正则表达式 (8)20. 检测浏览器对HTML5属性的支持 (8)21. Mark标签 (9)22. 该如何正确的使用div标签 (9)Web技术的发展速度太快了，如果你不与时俱进，就会被淘汰。

因此，为了应对即将到来的HTML5，本文总结了22个HTML5的初级技巧，希望能对你进一步学习好HTML5会有所帮助。

1. 新的Doctype声明XHTML的声明太长了，我相信很少会有前端开发人员能手写出这个Doctype声明。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">HTML5的Doctype声明很短，看到这个声明相信你马上就能记住，不用浪费脑细胞去记那长的有点变态的XHTML的Doctype声明了。

<!DOCTYPE html>HTML5的简短的DOCTYPE声明是让Firefox、Chrome等现代浏览器和IE6/7/8等浏览器都进入(准)标准模式，你可能会奇怪IE6/7居然也可以支持HTML5 Doctype，事实上，IE是只要doctype符合这种格式，都会进入标准模式。

HTML5标准白皮书

HTML5A vocabulary and associated APIs for HTML and XHTMLW3C Candidate Recommendation17December2012–2Common infrastructure&srarr;1Introduction1 1.1Background1 1.2Audience1 1.3Scope1 1.4History1.5Design notes1 1.5.1Serializability of script execution1 1.5.2Compliance with other specifications1 1.6HTML vs XHTML1.7Structure of this specification1 1.7.1How to read this specification1 1.7.2Typographic conventions1 1.8Privacy concerns1.9A quick introduction to HTML1 1.9.1Writing secure applications with HTML1 1.9.2Common pitfalls to avoid when using the scripting APIs 1.10Conformance requirements for authors1 1.10.1Presentational markup1 1.10.2Syntax errors1 1.10.3Restrictions on content models and on attribute values1 1.11Recommended reading1Introduction1.1BackgroundThis section is non-normative.The World Wide Web's markup language has always been HTML.HTML was primarily designed as a language for semantically describing scientific documents,although its general design and adaptations over the years have enabled it to be used to describe a number of other types of documents.The main area that has not been adequately addressed by HTML is a vague subject referred to as Web Applications.This specification attempts to rectify this,while at the same time updating the HTML specifications to address issues raised in the past few years.1.2AudienceThis section is non-normative.This specification is intended for authors of documents and scripts that use the features defined in this specification,implementors of tools that operate on pages that use the features defined in this specification,and individuals wishing to establish the correctness of documents or implementations with respect to the requirements of this specification.This document is probably not suited to readers who do not already have at least a passing familiarity with Web technologies,as in places it sacrifices clarity for precision,and brevity for completeness.More approachable tutorials and authoring guides can provide a gentler introduction to the topic.In particular,familiarity with the basics of DOM Core and DOM Events is necessary for a complete understanding of some of the more technical parts of this specification.An understanding of Web IDL,HTTP,XML,Unicode,character encodings, JavaScript,and CSS will also be helpful in places but is not essential.1.3ScopeThis section is non-normative.This specification is limited to providing a semantic-level markup language and associated semantic-level scripting APIs for authoring accessible pages on the Web ranging from static documents to dynamic applications.The scope of this specification does not include providing mechanisms for media-specific customization of presentation(although default rendering rules for Web browsers are included at the end of this specification,and several mechanisms for hooking into CSS are provided as part of the language).The scope of this specification is not to describe an entire operating system.In particular,hardware configuration software,image manipulation tools,and applications that users would be expected to use with high-end workstations on a daily basis are out of scope.In terms of applications,this specification is targeted specifically at applications that would be expected to be used by users on an occasional basis,or regularly but from disparate locations,with low CPU requirements.Examples of such applications include online purchasing systems, searching systems,games(especially multiplayer online games),public telephone books or address books,communications software(e-mail clients,instant messaging clients,discussion software),document editing software,etc.1.4HistoryThis section is non-normative.For its first five years(1990-1995),HTML went through a number of revisions and experienced a number of extensions,primarily hosted first at CERN,and then at the IETF.With the creation of the W3C,HTML's development changed venue again.A first abortive attempt at extending HTML in1995known as HTML3.0then made way to a more pragmatic approach known as HTML3.2,which was completed in1997.HTML4quickly followed later that same year.The following year,the W3C membership decided to stop evolving HTML and instead begin work on an XML-based equivalent,called XHTML.This effort started with a reformulation of HTML4in XML,known as XHTML1.0,which added no new features except the new serialization,and which was completed in2000.After XHTML1.0,the W3C's focus turned to making it easier for other working groups to extend XHTML,under the banner of XHTML Modularization.In parallel with this,the W3C also worked on a new language that was not compatible with the earlier HTML and XHTML languages, calling it XHTML2.Around the time that HTML's evolution was stopped in1998,parts of the API for HTML developed by browser vendors were specified and published under the name DOM Level 1(in1998)and DOM Level2Core and DOM Level2HTML(starting in2000and culminating in2003).These efforts then petered out,with some DOM Level3specifications published in2004but the working group being closed before all the Level3drafts were completed.In2003,the publication of XForms,a technology which was positioned as the nextgeneration of Web forms,sparked a renewed interest in evolving HTML itself,rather than finding replacements for it.This interest was borne from the realization that XML's deployment as a Web technology was limited to entirely new technologies(like RSS and later Atom),rather than as a replacement for existing deployed technologies (like HTML).A proof of concept to show that it was possible to extend HTML4's forms to provide many of the features that XForms 1.0introduced,without requiring browsers to implement rendering engines that were incompatible with existing HTML Web pages, was the first result of this renewed interest.At this early stage,while the draft was already publicly available,and input was already being solicited from all sources,the specification was only under Opera Software's copyright.The idea that HTML's evolution should be reopened was tested at a W3C workshop in 2004,where some of the principles that underlie the HTML5work(described below), as well as the aforementioned early draft proposal covering just forms-related features,were presented to the W3C jointly by Mozilla and Opera.The proposal was rejected on the grounds that the proposal conflicted with the previously chosen direction for the Web's evolution;the W3C staff and membership voted to continue developing XML-based replacements instead.Shortly thereafter,Apple,Mozilla,and Opera jointly announced their intent to continue working on the effort under the umbrella of a new venue called the WHATWG.A public mailing list was created,and the draft was moved to the WHATWG site.The copyright was subsequently amended to be jointly owned by all three vendors,and to allow reuse of the specification.The WHATWG was based on several core principles,in particular that technologies need to be backwards compatible,that specifications and implementations need to match even if this means changing the specification rather than the implementations, and that specifications need to be detailed enough that implementations can achieve complete interoperability without reverse-engineering each other.The latter requirement in particular required that the scope of the HTML5 specification include what had previously been specified in three separate documents: HTML4,XHTML1,and DOM2HTML.It also meant including significantly more detail than had previously been considered the norm.In2006,the W3C indicated an interest to participate in the development of HTML5 after all,and in2007formed a working group chartered to work with the WHATWG on the development of the HTML5specification.Apple,Mozilla,and Opera allowed the W3C to publish the specification under the W3C copyright,while keeping a version with the less restrictive license on the WHATWG site.Since then,both groups have been working together.The HTML specification published by the WHATWG is not identical to this specification.At the time of this publication,the main differences were that the WHATWG version included features not included in this W3C version:some features have been omitted, but may be considered for future revisions of HTML beyond HTML5;and other features were omitted because at the W3C they are published as separate specifications.At time of publication of this document,patches from the WHATWG spec have been merged until revision7481inclusive.A separate document has been published by the W3C HTML working group to document the differences between the HTML specified in this document and the language described in the HTML4specification.[HTMLDIFF]1.5Design notesThis section is non-normative.It must be admitted that many aspects of HTML appear at first glance to be nonsensical and inconsistent.HTML,its supporting DOM APIs,as well as many of its supporting technologies,have been developed over a period of several decades by a wide array of people with different priorities who,in many cases,did not know of each other's existence.Features have thus arisen from many sources,and have not always been designed in especially consistent ways.Furthermore,because of the unique characteristics of the Web,implementation bugs have often become de-facto,and now de-jure,standards, as content is often unintentionally written in ways that rely on them before they can be fixed.Despite all this,efforts have been made to adhere to certain design goals.These are described in the next few subsections.1.5.1Serializability of script executionThis section is non-normative.To avoid exposing Web authors to the complexities of multithreading,the HTML and DOM APIs are designed such that no script can ever detect the simultaneous execution of other scripts.Even with workers,the intent is that the behavior of implementations can be thought of as completely serializing the execution of all scripts in all browsing contexts.The method,in this model,is equivalent to allowing other scripts to run while the calling script is blocked.1.5.2Compliance with other specificationsThis section is non-normative.This specification interacts with and relies on a wide variety of other specifications.In certain circumstances,unfortunately,conflicting needs have led to this specification violating the requirements of these other specifications. Whenever this has occurred,the transgressions have each been noted as a"willful violation",and the reason for the violation has been noted.1.6HTML vs XHTMLThis section is non-normative.This specification defines an abstract language for describing documents and applications,and some APIs for interacting with in-memory representations of resources that use this language.The in-memory representation is known as"DOM HTML",or"the DOM"for short.There are various concrete syntaxes that can be used to transmit resources that use this abstract language,two of which are defined in this specification.The first such concrete syntax is the HTML syntax.This is the format suggested for most authors.It is compatible with most legacy Web browsers.If a document is transmitted with the text/html MIME type,then it will be processed as an HTML document by Web browsers.This specification defines version5of the HTML syntax, known as"HTML5".The second concrete syntax is the XHTML syntax,which is an application of XML.When a document is transmitted with an XML MIME type,such as application/xhtml+xml,then it is treated as an XML document by Web browsers,to be parsed by an XML processor. Authors are reminded that the processing for XML and HTML differs;in particular, even minor syntax errors will prevent a document labeled as XML from being rendered fully,whereas they would be ignored in the HTML syntax.This specification defines version5of the XHTML syntax,known as"XHTML5".The DOM,the HTML syntax,and the XHTML syntax cannot all represent the same content. For example,namespaces cannot be represented using the HTML syntax,but they are supported in the DOM and in the XHTML syntax.Similarly,documents that use the noscript feature can be represented using the HTML syntax,but cannot be represented with the DOM or in the XHTML ments that contain the string"-->"can only be represented in the DOM,not in the HTML and XHTML syntaxes.1.7Structure of this specificationThis section is non-normative.This specification is divided into the following major sections:Common infrastructureThe conformance classes,algorithms,definitions,and the common underpinnings of the rest of the specification.Semantics,structure,and APIs of HTML documentsDocuments are built from elements.These elements form a tree using the DOM.This section defines the features of this DOM,as well as introducing the features common to all elements,and the concepts used in defining elements.The elements of HTMLEach element has a predefined meaning,which is explained in this section.Rules for authors on how to use the element,along with user agent requirements for how to handle each element,are also given.Loading Web pagesHTML documents do not exist in a vacuum—this section defines many of the features that affect environments that deal with multiple pages.Web application APIsThis section introduces basic features for scripting of applications in HTML.HTML documents can provide a number of mechanisms for users to interact with and modify content,which are described in this section.The HTML syntaxThe XHTML syntaxAll of these features would be for naught if they couldn't be represented ina serialized form and sent to other people,and so these sections define thesyntaxes of HTML and XHTML,along with rules for how to parse content using those syntaxes.There are also some appendices,defining rendering rules for Web browsers and listing obsolete features and IANA considerations.1.7.1How to read this specificationThis specification should be read like all other specifications.First,it should be read cover-to-cover,multiple times.Then,it should be read backwards at least once.Then it should be read by picking random sections from the contents list and following all the cross-references.As described in the conformance requirements section below,this specification describes conformance criteria for a variety of conformance classes.In particular, there are conformance requirements that apply to producers,for example authors and the documents they create,and there are conformance requirements that apply toconsumers,for example Web browsers.They can be distinguished by what they are requiring:a requirement on a producer states what is allowed,while a requirement on a consumer states how software is to act.Requirements on producers have no bearing whatsoever on consumers.1.7.2Typographic conventionsThis is a definition,requirement,or explanation.This is a note.This is an example.This is an open issue.This is a warning.interface Example{//this is an IDL definition};variable=object.methodmethod(([optionalArgument])This is a note to authors describing the usage of an interface./*this is a CSS fragment*/The defining instance of a term is marked up like es of that term are marked up like this or like this.The defining instance of an element,attribute,or API is marked up like this. References to that element,attribute,or API are marked up like this.Other code fragments are marked up like this.Variables are marked up like this.This is an implementation requirement.1.8Privacy concernsThis section is non-normative.Some features of HTML trade user convenience for a measure of user privacy.In general,due to the Internet's architecture,a user can be distinguished from another by the user's IP address.IP addresses do not perfectly match to a user; as a user moves from device to device,or from network to network,their IP address will change;similarly,NAT routing,proxy servers,and shared computers enable packets that appear to all come from a single IP address to actually map to multiple users.Technologies such as onion routing can be used to further anonymize requests so that requests from a single user at one node on the Internet appear to come from many disparate parts of the network.However,the IP address used for a user's requests is not the only mechanism by which a user's requests could be related to each other.Cookies,for example,are designed specifically to enable this,and are the basis of most of the Web's session features that enable you to log into a site with which you have an account.There are other mechanisms that are more subtle.Certain characteristics of a user's system can be used to distinguish groups of users from each other;by collecting enough such information,an individual user's browser's"digital fingerprint"can be computed,which can be as good,if not better,as an IP address in ascertaining which requests are from the same user.Grouping requests in this manner,especially across multiple sites,can be used for both benign(and even arguably positive)purposes,as well as for malevolent purposes. An example of a reasonably benign purpose would be determining whether a particular person seems to prefer sites with dog illustrations as opposed to sites with cat illstrations(based on how often they visit the sites in question)and then automatically using the preferred illustrations on subsequent visits to participating sites.Malevolent purposes,however,could include governments combining information such as the person's home address(determined from the addresses they use when getting driving directions on one site)with their apparent political affiliations(determined by examining the forum sites that they participate in)to determine whether the person should be prevented from voting in an election.Since the malevolent purposes can be remarkably evil,user agent implementors are encouraged to consider how to provide their users with tools to minimize leakinginformation that could be used to fingerprint a user.Unfortunately,as the first paragraph in this section implies,sometimes there is great benefit to be derived from exposing the very information that can also be used for fingerprinting purposes,so it's not as easy as simply blocking all possible leaks.For instance,the ability to log into a site to post under a specific identity requires that the user's requests be identifiable as all being from the same user, more or less by definition.More subtly,though,information such as how wide text is,which is necessary for many effects that involve drawing text onto a canvas(e.g. any effect that involves drawing a border around the text)also leaks information that can be used to group a user's requests.(In this case,by potentially exposing, via a brute force search,which fonts a user has installed,information which can vary considerably from user to user.)Features in this specification which can be used to fingerprint the user are marked as this paragraph is.Other features in the platform can be used for the same purpose,though,including, though not limited to:•The exact list of which features a user agents supports.•The maximum allowed stack depth for recursion in script.•Features that describe the user's environment,like Media Queries and the Screen object.[MQ][CSSOMVIEW]•The user's time zone.1.9A quick introduction to HTMLThis section is non-normative.A basic HTML document looks like this:<!DOCTYPE html><html><head><title>Sample page</title></head><body><h1>Sample page</h1><p>This is a<a href="demo.html">simple</a>sample.</p></body></html>HTML documents consist of a tree of elements and text.Each element is denoted in the source by a start tag,such as"<body>",and an end tag,such as"</body>". (Certain start tags and end tags can in certain cases be omitted and are implied by other tags.)Tags have to be nested such that elements are all completely within each other, without overlapping:<p>This is<em>very<strong>wrong</em>!</strong></p><p>This<em>is<strong>correct</strong>.</em></p>This specification defines a set of elements that can be used in HTML,along with rules about the ways in which the elements can be nested.Elements can have attributes,which control how the elements work.In the example below,there is a hyperlink,formed using the a element and its href attribute:<a href="demo.html">simple</a>Attributes are placed inside the start tag,and consist of a name and a value, separated by an"="character.The attribute value can remain unquoted if it doesn't contain space characters or any of"'`=<or>.Otherwise,it has to be quoted using either single or double quotes.The value,along with the"="character,can be omitted altogether if the value is the empty string.<input name=address disabled><input name=address disabled=""><input name=address maxlength=200><input name=address maxlength='200'><input name=address maxlength="200">HTML user agents(e.g.Web browsers)then parse this markup,turning it into a DOM (Document Object Model)tree.A DOM tree is an in-memory representation of a document.DOM trees contain several kinds of nodes,in particular a DocumentType node,Element nodes,Text nodes,Comment nodes,and in some cases ProcessingInstruction nodes.The markup snippet at the top of this section would be turned into the following DOM tree:•DOCTYPE:htmlhtmlhead#text:&blank;&blank;title#text:Sample page#text:&blank;o:&blank;#text:&blank;&blank;h1#text:Sample page#text:&blank;&blank;#text:This is aa href="demo.html"#text:simple#text:sample.#text:&blank;&blank;:this is a comment#text:&blank;The root element of this tree is the html element,which is the element always found at the root of HTML documents.It contains two elements,head and body,as well as a Text node between them.There are many more Text nodes in the DOM tree than one would initially expect, because the source contains a number of spaces(represented here by"&blank;")and line breaks("")that all end up as Text nodes in the DOM.However,for historical reasons not all of the spaces and line breaks in the original markup appear in the DOM.In particular,all the whitespace before head start tag ends up being dropped silently,and all the whitespace after the body end tag ends up placed at the end of the body.The head element contains a title element,which itself contains a Text node withthe text"Sample page".Similarly,the body element contains an h1element,a p element,and a comment.This DOM tree can be manipulated from scripts in the page.Scripts(typically in JavaScript)are small programs that can be embedded using the script element or using event handler content attributes.For example,here is a form with a script that sets the value of the form's output element to say"Hello World":<form name="main">Result:<output name="result"></output><script>document.forms.main.elements.result.value='Hello World';</script></form>Each element in the DOM tree is represented by an object,and these objects have APIs so that they can be manipulated.For instance,a link(e.g.the a element in the tree above)can have its"href"attribute changed in several ways:var a=document.links[0];//obtain the first link in the documenta.href='sample.html';//change the destination URL of the linka.protocol='https';//change just the scheme part of the URLa.setAttribute('href','/');//change the content attributedirectlySince DOM trees are used as the way to represent HTML documents when they are processed and presented by implementations(especially interactive implementations like Web browsers),this specification is mostly phrased in terms of DOM trees, instead of the markup described above.HTML documents represent a media-independent description of interactive content. HTML documents might be rendered to a screen,or through a speech synthesizer,or on a braille display.To influence exactly how such rendering takes place,authors can use a styling language such as CSS.In the following example,the page has been made yellow-on-blue using CSS.<!DOCTYPE html><html><head><title>Sample styled page</title><style>body{background:navy;color:yellow;}</style></head><body><h1>Sample styled page</h1><p>This page is just a demo.</p></body></html>For more details on how to use HTML,authors are encouraged to consult tutorials and guides.Some of the examples included in this specification might also be of use,but the novice author is cautioned that this specification,by necessity, defines the language with a level of detail that might be difficult to understand at first.1.9.1Writing secure applications with HTMLThis section is non-normative.When HTML is used to create interactive sites,care needs to be taken to avoid introducing vulnerabilities through which attackers can compromise the integrity of the site itself or of the site's users.A comprehensive study of this matter is beyond the scope of this document,and authors are strongly encouraged to study the matter in more detail.However,this section attempts to provide a quick introduction to some common pitfalls in HTML application development.The security model of the Web is based on the concept of"origins",and correspondingly many of the potential attacks on the Web involve cross-origin actions.[ORIGIN]Not validating user inputCross-site scripting(XSS)SQL injectionWhen accepting untrusted input,er-generated content such as text comments, values in URL parameters,messages from third-party sites,etc,it is imperative that the data be validated before use,and properly escaped when displayed.Failing to do this can allow a hostile user to perform a variety of attacks,ranging from the potentially benign,such as providing bogus user information like a negative age,to the serious,such as running scripts every time a user looks at a page that includes the information,potentially propagating the attack in the process,to the catastrophic,such as deleting all data in the server.When writing filters to validate user input,it is imperative that filters always be whitelist-based,allowing known-safe constructs and disallowing all other input. Blacklist-based filters that disallow known-bad inputs and allow everything else are not secure,as not everything that is bad is yet known(for example,because it might be invented in the future).For example,suppose a page looked at its URL's query string to determine what to display,and the site then redirected the user to that page to display a message, as in:<ul><li><a href="message.cgi?say=Hello">Say Hello</a><li><a href="message.cgi?say=Welcome">Say Welcome</a><li><a href="message.cgi?say=Kittens">Say Kittens</a></ul>If the message was just displayed to the user without escaping,a hostile attacker could then craft a URL that contained a script element:/message.cgi?say=%3Cscript%3Ealert%28%27Oh%20no%21%27%29% 3C/script%3EIf the attacker then convinced a victim user to visit this page,a script of the attacker's choosing would run on the page.Such a script could do any number of hostile actions,limited only by what the site offers:if the site is an e-commerce shop,for instance,such a script could cause the user to unknowingly make。

HTML5标签_和属性手册

HTML5 标签和属性手册第一部分按字母顺序分第二部分按功能分一、主体结构二、HTML 5元素标记汇总表备注：1、●表示该标记属于围堵标记，需要结束标记</标记>。

2、o 表示该标记属空标记，不需要结束标记。

五、html5中被废除的属性在HTML 4中使用的属性使用该属性的元素在HTML 5中的替代方案rev link、a relcharset link、a 在被链接的资源的中使用HTTP Comem-type头元素shape、coords a 使用area元素代替a元素longdesc img, iframe 使用a元素链接到较长描述target link 多余属性，被省略nohref area 多余属性，被省略profile head 多余属性，被省略version html 多余属性，被畨略name img idscheme meta 只为某个表单域使用schemearchive、classid、codebase, codetype、declare, standby object使用data与type属性类调用插件。

需要使用这些厲性来设S参数时，使用param属性valuetype% type param 使用name与value域性，不声明值的MIME类型axis、abbr td、th 使用以明确简洁的文字开头、后跟详述文字的形式。

可以对更洋细内容使用title属性，来使单元格的内容变得简短scope td 在被链接的资源的中使用HTTP Content-type头元素aligncaption、input legend、div、hi、h2、h3、h4、h5、h6、p使用CSS样式表替代alink、link、text, vlink、background、bgcolorbody 使用CSS样式表替代align、bgcolor、border、cellpadding、cellspacing, frame、rules、widthtable 使用CSS样式表替代align、char、charoff、height、nowrap, valigntbody、thead, tfoot 使用CSS样式表替代align、bgcolor、char、charoff,td、th 使用CSS样式表替代height, nowrap、valign, widthalign、bgcolor、char、charoff、tr 使用CSS样式表替代valignalign、char、charoff、valign、col、colgroup 使用CSS样式表替代widthalign、border, hspace、vspace object 使用CSS样式表替代clear br 使用CSS样式表替代compact, type ol、ul、li 使用CSS样式表替代compact dl 使用CSS样式表替代compact menu 使用CSS样式表替代width pre 使用CSS样式表替代align、hspace, vspace img 使用CSS样式表替代align、noshade、size、width hr 使用CSS样式表替代align、frameborder, scrolling、iframe 使用CSS样式表替代marginheight、marginwidthautosubmit menu种类说明支持浏览器search 与text文本框类似，伹是它用于搜索，比如站点搜索或Google捜索在Safari4浏览器中其外观与text不同，在其他浏览器中外观均与text相同tel 与text文本框类似，但是专用于电话在各浏览器中外观与text相同url 与tex文本框t类似，但是要求用户必须在其中正确输入url格式的文字Opera 10email 与text文本框类似，但是要求用户必须在其中正确输入email格式的文字Opera 10datetime、date、month、week、time、datetime-local各种日期与时间输入文本框Opera 10number 数值输入文本框。

HTML5的结构和语1

HTML5的结构和语义——语义性的块级元素（三）2012-01-10 15:53:06[字体：] aside figure dialog我在文章和书中一直使用前两个元素。

第三个元素我不经常用，它主要用于书面文本。

asideaside 元素代表说明、提示、边栏、引用、附加注释等，也就是叙述主线之外的内容。

例如，在developerWorks 文章中，经常会看到用表格形式编写的边栏，见代码3 用HTML 4 编写的developerWorks 边栏。

以下是代码片段：[ ]<table align="right" border="0" cellpadding="0" cellspacing="0"width="40%"><tbody><tr><td width="10"><img alt="" src="//" height="1" width="10"></td><td><table border="1" cellpadding="5" cellspacing="0" width="100%"><tbody><tr><td bgcolor="#eeeeee"><p><a name="xf-value"><span class="smalltitle">.xf-value</span></a></p> <p>The <code type="inline">.xf-value</code> selector used here styles the input field value but not its label. This is actually inconsistentwith the current CSS3 draft. The example really should use the<code type="inline">::value</code> pseudo-class instead like so:</p><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="code-outline"><pre class="displaycode">input::value { width: 20em; }#ccnumber::value { width: 18em }#zip::value { width: 12em }#state::value { width: 3em }</pre></td></tr></tbody></table><br><p>However, Firefox doesn't yet support this syntax.</p></td></tr></table>在HTML 5 中，可以按照更有意义的方式编写这个边栏，见代码4 用HTML 5 编写的developerWorks 边栏。

html5和css3入门知识

11
HTML5移除的元素移除的元素
▪ font, center, strike, big, s, u, acronym, applet, dir... 移除的属性
▪ 如link和a元素的rev属性, link元素的target属性, td的scope属性，script元素的language属性, body元素的alink， link，text和vlink属性...
3
HTML5是什么下一代 Web 语言，它不单单是一种标记语言，更为下一代 Web 提供了全新功能，并将引领下一代 Web 实
现类似桌面的应用体验。
4
HTML5是什么 HTML5将使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。
HTML5是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。
5
HTML5是什么
新增的功能： ▪ 本地音频视频播放 ▪ 动画 ▪ 地理信息 ▪ 硬件加速 ▪ 本地运行（即使在 Internet 连接中断之后） ▪ 本地存储 ▪ 从桌面拖放文件到浏览器上传 ▪ 语义化标记
6
7
8
HTML发展历史
HTML4.0
XHTML1
XHTML2
WHATG
HTML5
1998
2000
2002
2004
2007
Web Hypertext Application Technology Working Group 很多浏览器支持html5：Safari 3.1+，FireFox 3.1+，Internet Explorer 8.0+，Google等
9

HTML5新特性基本操作解密

HTML5 新功能解密HTML5 基本新功能教程解密1) 什么是 HTML5？HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

2) HTML5 是如何起步的？HTML5 是 W3C 与 WHATWG 合作的结果。

为 HTML5 建立的一些规则：    新特性应该基于 HTML、CSS、DOM 以及 JavaScript。

减少对外部插件的需求（比如 Flash）更优秀的错误处理更多取代脚本的标记 HTML5 应该独立于设备3) 新特性HTML5 中的一些有趣的新特性：    用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素对本地离线存储的更好的支持新的特殊内容元素，比如 article、footer、header、nav、section 新的表单控件，比如 calendar、date、time、email、url、searchHTML 5 视频4) Web 上的视频HTML5 规定了一种通过 video 元素来包含视频的标准方法。

视频格式当前，video 元素支持三种视频格式：格式 Ogg MPEG 4 WebM IE No 9.0+ No Firefox 3.5+ No 4.0+ Opera 10.5+ No 10.6+ Chrome 5.0+ 5.0+ 6.0+ Safari No 3.0+ No 1HTML5 新功能解密 Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件5) 如何工作<video src="movie.ogg" controls="controls"> </video> control 属性供添加播放、暂停和音量控件。

html5学习资料整理

早在几个星期前，Adobe就发布了Dreamweaver CS5 HTML5 Pack的预览版下载。

众所周知，HTML5在互联网领域掀起了一场大论战，并让Adobe的日子很难熬。

HTML5致力于为前端开发提供全面的标记语言。

以下30多个资源可帮你开始学习HTML5。

Blowing up HTML5 video and mapping it into 3D space（将HTML5视频吹散并组成3D 效果）最近我研究了HTML 5中的Canvas 和Video 标签，并发现了一些很酷的特性。

其中之一就是Canvas.drawImage() api。

此为详细介绍。

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3（用HTML5 和CSS3 打造向下兼容的网页）HTML5更加语义化，使用HTML5 我们不必在网页上布满没有意义的div。

它引入了有意义的tag，比如 navigations 和 footers 使代码更有意义也更接近自然语言。

Coding A HTML 5 Layout From Scratch（HTML 5 布局）这篇文章将教你•用原有技术将元素放置在特定位置•最新的技术潮流•Microformats与HTML5协同使用•介绍HTML5与CSS3的新特性Coding a CSS3 and HTML5 One Page Website Template（制作CSS3和 HTML5 一页式站点模板）这篇文章介绍了如何利用CSS3 和jQuery的新特性制作HTML5 网页模版。

HTML5 仍在完善当中，你也可以选择性的下载XHTML版。

Comprehensive video tutorial on HTML5（全面的HTML5视频指南）这是一个叫Brad Neuberg的工程师制作的HTML5教学视频。

Create modern Web sites using HTML5 and CSS3（用HTML5与CSS3打造时尚站点）这篇文章介绍了许多HTML5的功能和语法及API，还有CSS3的新的选择器，效果和特性。

HTML5标签使用的常见误区

HTML5标签使用的常见误区最近组内进行HTML5标签的学习，方法呢就是大家每人挑选几个标签，自己先去学习，然后给大家作讲解。

这个过程大家还是挺有收获的。

但是现在HTML5还处在草案阶段，有些新的标签元素的解释也是经常有变化，甚至标签加入/移出也很频繁(比如hgroup)，同时现有的大的门户网站在使用HTML5方面也没有很好的范例可以参考，让大家的学习过程更摸索。

下面是我在html5doctor 上面看到的一篇文章，在目前大家懵懂的阶段，可能看看大师的讲解会更容易理解。

由于才疏学浅,很多不明白的地方可能只是做了字面上的翻译，不对的地方还请大家多多指教。

下面附上原文地址：Avoiding common HTML5 mistakes，作者:Richard Clark，有疑问的地方大家可以核对英文。

在这篇文章中，我将给大家分享HTML5构建页面的小错误和不好的实践方法，让我们在以后的工作中避免这些错误。

不要把<Section>当成简单的容器来定义样式我们经常看到的一个错误，就是武断的将<div>标签用<section>标签来替代，特别是将作为包围容器的<div>用<section>来替换。

在XHTML或者HTML4中，我们将会看到类似下面的代码：<div id="wrapper"><div id="header"><h1>My super duper page</h1></div><div id="main"></div><div id="secondary"></div><div id="footer"></div></div>现在我看到了下面的代码样子：<section id="wrapper"><header><h1>My super duper page</h1></header><section id="main"></section><section id="secondary"></section><footer></footer></section>直观的看，上面的例子是错误的：<section> 并不是一个容器。

HTML5 交互设计练习题及答案

HTML5 交互设计练习题及答案HTML5 是一种新一代的网页标准，不仅提供了更多的语义化标签，还支持多媒体、图形处理、本地存储等功能。

而交互设计则是指通过用户与页面的互动来提升用户体验。

本文将提供一些HTML5交互设计的练习题，并给出相应的答案。

练习题一：创建一个网页，包含一个按钮，点击按钮后弹出提示框显示 "Hello, World!"。

```html<html><head><title>HTML5 交互设计练习</title></head><body><button onclick="alert('Hello, World!')">点击我</button></body></html>```练习题二：创建一个网页，包含一个文本输入框和一个按钮。

点击按钮后，将输入框中的内容显示在网页上。

```html<html><head><title>HTML5 交互设计练习</title></head><body><input type="text" id="inputField"><button onclick="displayInput()">显示输入</button><p id="output"></p><script>function displayInput() {var input = document.getElementById("inputField").value; document.getElementById("output").innerHTML = input; }</script></body></html>```练习题三：创建一个网页，包含一个图片和一个按钮。

HTML5的十大新特性

HTML5的⼗⼤新特性为了更好地处理今天的互联⽹应⽤，HTML5添加了很多新元素及功能，⽐如: 图形的绘制，多媒体内容，更好的页⾯结构，更好的形式处理，和⼏个api拖放元素，定位，包括⽹页应⽤程序缓存，存储，⽹络⼯作者，等(1)语义标签语义化标签使得页⾯的内容结构化，见名知义标签描述<hrader></header>定义了⽂档的头部区域<footer></footer>定义了⽂档的尾部区域<nav></nav>定义⽂档的导航<section></section>定义⽂档中的节（section、区段）<article></article>定义页⾯独⽴的内容区域<aside></aside>定义页⾯的侧边栏内容<detailes></detailes>⽤于描述⽂档或⽂档某个部分的细节<summary></summary>标签包含 details 元素的标题<dialog></dialog>定义对话框，⽐如提⽰框(2)增强型表单 HTML5 拥有多个新的表单 Input 输⼊类型。

这些新特性提供了更好的输⼊控制和验证。

输⼊类型描述color主要⽤于选取颜⾊date从⼀个⽇期选择器选择⼀个⽇期datetime选择⼀个⽇期（UTC 时间）datetime-local选择⼀个⽇期和时间 (⽆时区)email包含 e-mail 地址的输⼊域month选择⼀个⽉份number数值的输⼊域range⼀定范围内数字值的输⼊域search⽤于搜索域tel定义输⼊电话号码字段time选择⼀个时间url URL 地址的输⼊域week选择周和年 HTML5 也新增以下表单元素表单元素描述元素规定输⼊域的选项列表<datalist>使⽤ <input> 元素的 list 属性与 <datalist> 元素的 id 绑定提供⼀种验证⽤户的可靠⽅法<keygen>标签规定⽤于表单的密钥对⽣成器字段。

HTML 5 参考手册

HTML 5 标签W3C 在1 月22 日发布了最新的HTML 5 工作草案。

HTML 5 工作组包括AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera 以及数百个其他的开发商。

HTML 5 中的一些新特性：嵌入音频、视频、图片的函数、客户端数据存储，以及交互式文档。

其他特性包括新的页面元素，比如<header>, <section>, <footer>, 以及<figure>。

通过制定如何处理所有HTML 元素以及如何从错误中恢复的精确规则，HTML 5 改进了互操作性，并减少了开发成本。

按字母顺序排列∙4: 指示在HTML 4.01 中是否定义了该元素∙5: 指示在HTML 5 中是否定义了该元素标签描述 4 5 定义注释。

4 5 <!DOCTYPE>定义文档类型。

4 5 <a>定义超链接。

4 5 <abbr>定义缩写。

4 5 <acronym>不支持。

定义首字母缩写。

4<address>定义地址元素。

4 5 <applet>不支持。

定义applet。

4<area>定义图像映射中的区域。

4 5 <article>定义article。

5 <aside>定义页面内容之外的内容。

5 <audio>定义声音内容。

5 <b>定义粗体文本。

4 5<base>定义页面中所有链接的基准URL。

4 5 <basefont>不支持。

请使用CSS 代替。

4<bdo>定义文本显示的方向。

4 5 <big>不支持。

定义大号文本。

4<blockquote>定义长的引用。

HTML5基础知识

Html5·JS根底Html5是超文本标记语言，不属于编程语言。

Html5不考虑对IE9及以下版本的支持。

1.html5根底div布局中设置浮动：float: right;去除浮动：clear: both;表格布局中合并2个单元格：colspan="2"要在网页上显示预留关键字可以直接百度HTML实体。

XHTML的语法和书写格式更加严格规。

1.1.html根底格式<!DOCTYPE html> //声明:html各版本的声明方式不同，这里是html5版本<html lang="en"> //en表示英文，zh表示中文<head><meta charset="UTF-8"> //编码格式<title>叉叉学院</title></head><body>大叉叉家族 hello //这里的两排文字是没有格式的，不会分两排显示,可使用换行符<h1>大狗狗</h1> //html标题<h2>大豚豚</h2><p>hello dachacha</p> //html段落 hello //这里的两排文字是有格式的，会分两排显示<a href=" s://.baidu./">百度一下</a> //html<imgsrc="images/image01.jpg"> //html图片</body></html>换行符：hello dachacha <br/> hello dagou1.2.html标签属性1)通用属性：class：规定元素的类名id：规定元素唯一IDstyle：规定元素样式title：规定元素的额外信息2)键/值属性：<a href="href_file.html">翻开本地</a>点击翻开本地，进入href_file.html。

设备故障维修服务管理系统基于HTML5标准说明书

International Conference on Manufacturing Engineering and Intelligent Materials (ICMEIM 2017)The Management System of Equipment Failure ServiceBased on HTML5 StandardXin Yu1, Peng Liu*1 ,Zheng-Da Jian1,Zhu-Wei Zhou2,Tian-Wei Ye1,WeiWang1,Xiang Zhang1,Mei Le1and Xin Chen11 The Institute of Mechanical Science and Engineering, Jilin University, Changchun, China2Shanghai GKN Drive Shaft-Changchun Co., Ltd. Chang chun, China*Corresponding authorKeywords: Equipment Failure，HTML5 Standard,Equipment MaintenanceAbstract. Using information to realize manual equipment repair service can improve the efficiency of equipment maintenance, and master the latest information of operating status of equipment timely, and be propitious to statistics and archive information. Therefore, this paper proposes an equipment failuer repair service management system based on HTML5 Standard, what uses the international popular HTML5 standard to write. It can run on the mobile device and computer simultaneously and reflect equipment operational condition in real time, transmitting the information of equipment failure repair. The system's experiment in Fenterprise shows that this approach can shorten equipment maintenance cycle, and improve work efficiency, summarizing the short-term and long-term information on the equipment then managing equipment maintenance and worker performance.IntroductionWith the advance of industry 4.0, modern manufacturing technology requires the degree of enterprises intelligence and automation to become higher and higher, in order to meet the user's strict requirements for product diversity and timeliness. It also puts forward higher requirements for the production and operation capacity of the enterprise. The equipment in the enterprise must be ensured its continuity and high-speed. In the traditional equipment failure repair mode, when the equipment failure occurs, the production shift leader fill in repair orders, and repair orders are delivered to the factories’ equipment maintenance department, then the equipment maintenance department sends maintenance workers for trouble shooting. The production shift leader check and accept after completion of equipment failure repairing. After acceptance, the maintenance records and acceptance records are filed and the managerscan count these data regularly or irregularly. When the equipment failure is not resolved, it is submitted to the engineering services, and then the engineering service contacts the equipment manufacturer to send maintenance specialists to repair. The traditional equipment repair has a longer cycle, which affects the production efficiency. In the highly developed mobile Internet technology today, ouring information management system based on HTML5 standards has became the mainstream of industrial applications. This technology can be developed directly on mobile devices, which guarantees the timeliness of information transmission. The new repair management system that use the technology transmits repair information in real-time and effectively, which is a reasonable way of shortening the repair cycle and improving work efficiency undoubtedly. Therefore, thispaper proposesan equipment failuer repair service management systembased on HTML5 Standard.The management system not only reflects the operation of each station equipment, but also can sendthe informationto all levels of management and the head of maintenance department through the mobile terminal APP in the event of equipment failure, timely. The system has been applied and popularized in Fenterprise（a joint venture of auto parts manufacturers）.The Management System of Equipment Failure Repair Service Based on HTML 5 Standard DesignDesign PrinciplesThis system based on the HTML5 language of the jQuery and bootstrap technology, using the specification of HTML + CSS + JS as the standard of information interaction, using B/S framework design. B/S mode application system is composed of the browser and Server. The SQL Server database is installed on the server and making data interaction via the browser. At the same time, this system uses the advanced and mature software and hardware to support platform and uses related standards as the basis of the system. Rapid development/quickly modify system principle provides a flexible means of secondary development. On the component-oriented application framework, we are able to develop new business and add new features quickly without affecting system. At the same time we can provide convenience to modify their business and support dynamic loading. Ensuring application system could be able to support centralized version control and upgrade management conveniently.Process DesignThis paper mainly introduces a kind of equipment fault repair service management system based on HTML 5 standards, the specific process as shown in figure 1, concrete operation is as follows: During equipment failure, the operators send the fault information to the group of mechanics and mechanics monitor distribute tasks to the mechanic. Timing starts at the same time, the system will send timeout information to the monitor, workshop section chief, workshop manager automatically , if more than 4 hours to overhaul the machine. After the completion, it will get a report for statistical data and the index of machine history failure data. It needs to send a report to the machine monitor, if the mechanic could not repair. The monitor will reallocate tasks and make job evaluation for the mechanic. If the equipment maintenance needs outsourcing, according to normal process operation, checking maintenance outsourcing in the maintenance report, the monitor is responsible for the outsourcing maintenance.informationRepair information is pushed to all machine repairgroup Machine repair squad send tasks to the mechanicThemechanicbegin torepairMore than 4hours or notThemechaniccontinuerepairingThe mechanicfill in thecause of themalfunctionandmaintenanceThe system sends the repairinformation to all machinerepair groups, operators andmanagersNoThe mechanic indicate thereasons withoutrepairment and whether tocontinue maintenanceOperators checkEligibility or notRepair completedSystem ArchivesYesNoOperatorsresend repair-informationFig.1Process DesignSystem FunctionsUser Information and Rights Management ModuleThis module includes four functions: login management, user management, equipment management, rights management. Its main function is to achieve users at all levels of the user login,manage user account usage, add or remove device information,receive allocation information and send permissions.Maintenance Tasks Reporting and Execution Module.After the equipment failure, the operation worker sends the breakdown information according to the different situation.The machine repair monitor assign tasks to operators.Whenthe repair task is completed, the section chief carries on the appraisal to this maintenance.Specific operation shown in Figure 2.Fig.2 Maintenance mission reporting and implementation moduleBusiness Process Management ModuleThe main function of this module is to monitor the progress of the maintenance tasks.The relevant personnel through the business process map real-time observe the progress of each maintenance task.When the process has been completed, the color will be lit up,and remaining the unfinished work white. Such as shown in Figure 3.Fig. 3 Business process moduleProduction Equipment Status Monitoring ModuleThis part of the main functions is completed in the PC-side. Based on the production data, the layout of the production lineis cycleing displayed in the terminal. When a machine failure can receive fault information, and then the fault of the production line where the machine is displayed to the screen, the fault machine marked red fault signal, as shown in Figure 4.Production monitor acceptance is complete, the fault mark disappears, the screen become normal machine condition.Fig. 4 Production equipment status monitoringManagement Staff Statistics ModuleThis module includes three main functions:(1)Query the fault list. Administrators can use this module feature to view the current list of device faults.(2)Query repair list statistics. Administrators can use this module function to view the current device repair list.When you click the query repair list button, by reading the repair list in the database, the return value to the form of the form output to the browser, the current equipment failure to understand. And the manager can count all maintenance records of a service person (3)Query equipment maintenance records. Administrators can use this module function to view all current repair records for a particular device.ConclusionBased on the HTML 5 standard,this paper designs a kind of equipment fault repair service management system. The main function is completing real-time on-line fault repair service and handle and realizing the intelligent and informationalized the equipment management and improving the efficiency of equipment maintenance. Managers also can call maintenance data, which providing a reliable basis for performance appraisal and development plan. The system has been commissioned in F company nearly a year. To a certain extent, its strong practicability and good effect has solved some problems such asthe complex repair process, long repair cycle, difficult in statistical analysis, and so on. In this paper, the research results have important application value and can be spread in the discrete manufacturing enterprise.AcknowledgementThis research was financially supported by JLU Training Plan of Innovation and Entrepreneurship.References[1] Zhiqiang Jiang, Xilan Feng, Xianzhang Feng, Lingjun Li.A Study of SVDD-based Algorithm to the Fault Diagnosis of Mechanical Equipment System.[J]. Physics Procedia,Volume33,2012:1068-1073[2]V.V.Panteleev,V.A. Kamaev,A.V. Kizim.Developing a Model of Equipment Maintenance and Repair Process at Service Repair Company Using Agent-based Approach.[J].Procedia Technology, Volume 16, 2014:1072-1079[3]A.V.Kizim,M.V.Denisov,S.V.Davydova,V.A.Kamaev.A.Conceptual Agent-based Model to Supporting the Production Equipment Technical Service and Repair Organization.[J].Procedia Technology,Volume 16, 2014:1176-1182[4]NING Hui, SHI Yanbin, GAO Xianjun.Dynamic Simulation of the Equipment Repair Support System based on the OPN Model.[J].Procedia Engineering, Volume 23, 2011:284-289[9]A.V. Kizim.Establishing the Maintenance and Repair Body of Knowledge: Comprehensive Approach to Ensuring Equipment Maintenance and Repair Organization Efficiency.[J].Procedia Technology, Volume 9, 2013:812-818[5]Wang Yupu; Liu He; Liu Changkui; Lu Mingyan; Liu Mingzhen.The development of Drilling & Production Equipment Management and Repairing Techinques in Daqing Oilfiled.[J].The Fourth World Conference of Maintenance,2008.11。

40个重要的HTML5面试题及答案

内容∙介绍∙SGML（标准通用标记语言）和HTML（超文本标记语言），XML（可扩展标记语言）和HTML的之间有什么关系？∙什么是HTML5？∙为什么HTML5里面我们不需要DTD（Document Type Definition文档类型定义）？∙如果我不放入<! DOCTYPE html> 标签，HTML5还会工作么？∙哪些浏览器支持HTML5？∙HTML5的页面结构同HTML4或者更前的HTML有什么区别？∙HTML5中的datalist是什么？∙HTML5中哪些是不同的新的表单元素类型？∙HTML5中什么是输出元素？∙什么是SVG（Scalable Vector Graphics可缩放矢量图形）？∙我们能看到使用HTML5的SVG的简单例子么？∙HTML5中canvas是什么？∙我们如何使用Canvas来画一条简单的线？∙Canvas和SVG图形之间的区别是什么？∙如何使用Canvas和HTML5中的SVG去画一个矩形？∙CSS（cascading style sheets级联样式表）中的选择器是什么？∙如何使用ID值来应用一个CSS样式？∙CSS中使用列布局是什么？∙你能解释一下CSS的盒子模型么？∙你能解释一些CSS3中的文本效果么？∙什么是Web Workers？为什么我们需要他们？∙Web Worker线程的限制是什么？∙我们如何在JavaScript中创建一个worker线程？∙如何中止Web Worker?∙为什么我们需要HTML5的服务发送事件？∙HTML5中的本地存储概念是什么？∙我们如何从本地存储中添加和移除数据？∙本地存储的生命周期是什么？∙本地存储和cookies（储存在用户本地终端上的数据）之间的区别是什么？∙什么是事务存储？我们如何创建一个事务存储？∙本地存储和事务存储之间的区别是什么？∙什么是WebSQL？∙WebSQL 是HTML5的一个规范吗？∙我们如何使用WebSQL？∙HTML5中的应用缓存是什么？∙HTML5中我们如何实现应用缓存？∙我们如何刷新浏览器的应用缓存？∙应用缓存中的回退是什么？∙应用缓存中的网络是什么？介绍我是一个 MVC的开发者，最近在我找工作的时候被问到很多与HTML5相关的问题和新特性。

HTML5考试模拟题库

HTML5试题1、以下说法不正确的是：AA、HTML5 标准还在制定中B、HTML5兼容以前HTML4下浏览器C、<canvas>标签替代FlashD、简化的语法2、以下不是canvas的方法是：DA、getContext()B、fill()C、stroke()D、controller()3、关于HTML5说法正确的是： CA、HTML5只是对HTML4的一个简单升级B、所有主流浏览器都支持HTML5C、HTML5新增了离线缓存机制D、HTML5主要是针对移动端进行了优化4、以下是HTML5新增的标签是：AA、<aside>B、<isindex>C、<samp>D、<s>5、以下不是HTML5的新增的标签是：BA、<bdi>B、<xmp>C、<command>D、<dialog>6、以下不是HTML5新增的API是：DA、Media APIB、Command APIC、History APID、Cookie API7、HTML5不支持的视频格式是：CA、oggB、mp4C、flvD、WebM8、不是HTML5特有的存储类型是：BA、localStorageB、CookieC、Application CacheD、sessionStorage9、以下关于FileReader说法正确的是：AA、readAsText方法有3个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。

B、readAsBinaryString：该方法将文件读取为二进制字符串C、onabort事件，中断时触发D、onload事件，文件读取成功完成时触发10、以下关于canvas说法正确的是：DA、clearRect(width, height,left, top)清除宽为width、高为height,左上角顶点在(left,top)点的矩形区域内的所有内容。

html5绝对元素的对齐与偏移的方法

ft:auto 将元素右对齐; n 用 margin-right:+VALUE 将元素从右侧向左偏移; n 用 margin-right:-VALUE 将元素从右侧向右偏移。从顶端进行偏移： n 用 top:0 和 bottom:auto 将元素顶端对齐; n 用 margin-top:+VALUE 将元素从顶端向下偏移; n 用 margin-top:-VALUE 将元素从顶端向上偏移。从底端进行偏移： n 用 bottom:0 和 top:auto 将元素底端对齐; n 用 margin-bottom:+VALUE 将元素从底端向上偏移; n 用 margin-bottom:-VALUE 将元素从底端向下偏移。模式绝对元素的左偏移
html5 绝对元素的对齐与偏移的方法
想把绝对定位元素排列到它的定位最近的祖先元素的上、下、左、右 4 边上。还想将它从排列位置上进行偏移。还想为它设置尺寸或进行包裹。下面我们就给大家介绍一下 html5 绝对元素的对齐与偏移的方法吧! 解决方案把样式赋给已选择的类和 ID 上： n 用 width:+VALUE 和 height:+VALUE 为元素设定尺寸; n 用 width:auto 和 height:auto 对元素进行包裹。从左侧进行偏移： n 用 left:0 和 right:auto 将元素左对齐; n 用 margin-left:+VALUE 将元素从左侧向右偏移; n 用 margin-left:-VALUE 将元素从左侧向左偏移。从右侧进行偏移：
SELECTOR { position:absolute; left:0;right:auto; margin-left:±VALUE;margin-right:auto; } 绝对元素的右偏移 SELECTOR { position:absolute; left:auto; right:0; margin-left:auto; margin-right:±VALUE;} 绝对元素的顶端偏移 SELECTOR { position:absolute; top:0;bottom:auto; margin-top:±VALUE;margin-bottom:auto; } 绝对元素的底端偏移 SELECTOR { position:absolute; top:auto; bottom:0; margin-top:auto; margin-bottom:±VALUE; } 适用范围