use of the section element to create a Web page document, using the title (H1~H6) 2, implicit orchestration so-called implicit orchestration in each content chunk, that is, we do not use sections elements for explicit chunk partitioning , we create blocks automatically based on the elements we write (H1-h6, hgroup, etc.), because HTML5 's parser can determine the corresponding chunks of content based on different levels of headings. 3, Title ratin
structure elements
A section element represents a chunk of content in a page, such as a chapter, header, footer, or other part of a page;
The article element represents a piece of independent content in the page that is not relevant to the context, such as an article in a blog or an article in a newspaper;
The aside element represents the auxiliary information related to the content of the article element, outside the content of the article element;
Header eleme
elements represent "sections" or "segments" in a document, and "segments" can refer to sections in an article by topic; "Sections" can refer to groups in a page.2.4 Aside elements are included in the article element as the main content of the subsidiary Information Section, wherein the content can be related to the current article relevant information, labels, ranking interpretation, etc.The 2.5 header element shows the head of a region2.6 Footer element shows the tail part of an areaThe 2.7
The basic idea is to hide (dispaly:none) and then display the translucent mask layer throughz-index:9998;z-index:9999;The larger the value, the more forwardIndex.htmlCSS file Lanrenzhijia.css/* code collation: Lazy People's home www.lanrenzhijia.com*/body,h1,h2,h3,h4,h5,h6, NBSP;P,NBSP;BLOCKQUOTE,NBSP;PRE,NBSP;CODE,NBSP;DEL,NBSP;DFN,NBSP;EM,NBSP;IMG,NBSP;STRONG,NBSP;DD, dl,dt,li,ol,ul,fieldset,form,label,button,input, table,caption,tbody,tfoot,thead,tr,th,td,menu{ margin:0;padding:0;} article,as
code for the Createsafefragment function is as followsfunction Createsafefragment (document) {var list = Nodenames.split ("|"),Safefrag = Document.createdocumentfragment (); ie6,7,8 Browser takes safefrage as HTMLDocument typeAdd a hack to the HTML5 new tab in Ie6-8, what's the specific effect? I don't know, either.if ( safefrag.createelement ) {while (List.length) {Safefrag.createelement (List.pop ());}}return Safefrag;}var nodenames = "abbr|article|aside|audio|bdi|canvas|data|datalist|details
" provide a video control used by the bow userHeight, Width set the video's size and heightloop = "Loop" To set video continuous playbackpreload = "preload" preload, this property is invalid when AutoPlay is usedAudio: Audio properties: Audio has properties similar to video--autoplay, controls, loops, preloadHTML New input type:Other elements: Hgroup: Used to group the title of a chunk of content across a page or pageFigure: Represents a separate stre
1. New Document Type DOCTYPE HTML >2. Link and script do not require a typerel= "stylesheet" href= "a/b/c.css"/> "a.js"/> 3. Semantic tag Header and footer4. Hgroup, group headings5. Highlight label 6. Graphic elements figure img Figcaption, linking pictures to text descriptions7.8. Placeholdertype= "text" name= "Desplaceholder" placeholder = "Bxwlysy"/>9. Required Required Attributestype= "text" name= "Desrequire"/ >Autofocus Auto-FocusOne. Audi
The Modernizr plugin can be used to address: "Responsive Web Design" mentions!Other:The first method: IE9 the following version of IE will create HTML5 tags, non-ie browser will ignore this code, so there will be no HTTP requests, it will not affect the efficiency of Web page execution. if lt ie9]> ( function () { if (! /* @[emailprotected] */ 0) return var e = "abbr, article, aside, audio, canvas, DataList, Details, dialog, EventSource , figure, Footer, header,
@charset "Utf-8";/*css document*//*!* @ name:Reset.css* @ Function: 1, reset browser default style* 2, set general Atomic class*//* Prevents users from customizing the effect of the background color on the Web page, adding lets users customize the font */HTML {Background:white;Color:black;}/* The internal and external margins often make different browser styles behave differently */BODY,DIV,DL,DT,DD,UL,OL,LI,H1,H2,H3,H4,H5,H6,PRE,CODE,FORM,FIELDSET,LEGEND,INPUT,TEXTAREA,P,BLOCKQUOTE,TH,TD, hr,bu
CSS reset and cssresetPrevious
Most of the time, as the front end, we need to add a copy before writing the CSS style.reset.css. CSS reset is not only used to clear the default style, but also a global style definition. If the CSS reset is not customized in the early stage of the project and is modified in the later maintenance stage, the system will be changed. This article will introduce CSS reset in detail
Reset
Take CSS reset of Netease NEC as an example to describe it.
/* reset */html,body,
= "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
// Then introduce the js in the head
8. test whether the browser supports certain CSS3 attributes.
var supports = (function() { var p = document.createElement('p'), vendors = 'Khtml Ms O Moz Webkit'.split(' '),
the browsers earlier than ie9 as the first text subnode of the p element.Assign a new value to elem as a subnode set of p (nodeList object ),Remove p from the File Fragment in this loop and keep the p element clean in the next loop.
2.3 If elem is a text node, it is directly added to the ret array to be returned. Otherwise, nodes in elem (nodeList object) are merged to the array.
2.4. Fixed the bug where the node type in ie6 and 7 is radio and the checkbox node status (checked) fails.
3. Proces
HTML5 can do a lot of things for us, the most delicious is the application of semantic tags, if you have been in chrome or other support HTML5 browser to use it, then this article will certainly be useful to you, because now you can also use the Internet Explorer HTML5.Okay, all right! Today's topic is:html5shiv-masterHere are the html5.js files that quote Google, and the benefits are not:Copy the code to the Head section, and remember that the head section must be (because IE has to know the el
/*!normalize.cssv2.0.1|mitlicense|[git][4].io/normalize*/ /*======================================================================== ==html5displaydefinitions ==========================================================================*/ /** correct display of ' block ' elements not defined in IENBSP;8/9. */article,aside, details,figcaption,figure, footer,header,hgroup,nav, section,summary{ display:block;}/** correcting ie8/9 ' inline-block ' elements n
The recent group of HTML5 label Learning, the method is that everyone selects a few tags, their own first to learn, and then to explain to you. This process is still very rewarding. But now HTML5 is still in the draft stage, and some of the new labeling elements are often explained, Even the label to move out is also very frequent (such as Hgroup), while the existing large Web portal in the use of HTML5 also have no good examples can be consulted, so
secure HTML character in the white list. the whitelist of security characters is encoded as part of $ sanitize. the following items are included in the security list (obtained directly from the source code ):
Empty element:
The code is as follows:
Area, br, col, hr, img, wbr.For more information, visit the http://dev.w3.org/html5/spec/Overview.html#void-elements
Block element:
The code is as follows:
Address, article, aside, blockquote, caption, center, del, dir, p, dl, figure, figcaption, f
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.