Knowledge carding--html

Browser kernel:

• ie:trident
• fixfox:gecko
• safari:webkit
• opera: formerly Presto, has now switched to Google Chrome's blink
• chrome:blink (based on WebKit)

DOCTYPE :

<! doctype> Document type declaration, located at the front of the document, before the <thml> label.

Role: Tell the browser to parse the page by what specifications

Browser mode: ( standard mode or promiscuous mode )

　　Standard mode: renders the page according to the specifications

　　Promiscuous mode: renders a page in a more relaxed, backwards-compatible way

　　The difference between the two:

1. 1. Analysis of Box model

　　　　　　　　In standard mode, the content width and height of the box model do not include padding and border values, while promiscuous mode includes padding and border values.

Calculations can be made with box-sizing.

　　　　　　2. Set the width height for the inline element

　　　　　　　　In standard mode, setting the width and height for a line element such as <span> will not take effect, but in promiscuous mode.

3. Set the percentage height

　　　　　　　　In standard mode, the height of an element is determined by the size of its content, and if no height value is set for the parent element, the height of the child element setting percentage is invalid and in promiscuous mode takes effect.

　　(PS: These are some of the differences I've encountered in writing projects, and there should be a lot more.

Progressive enhancement, graceful demotion:

　　Progressive enhancement: start by building only the fewest features of the site, and then continue to append functionality to the browser.

　　Graceful Downgrade: build the full functionality of your site from the start, then test and fix it for your browser.

　　Subtle difference: focus on the level of performance of the same website under different browsers. The difference lies in the difference in their focus and how this concern affects the process of work.

Semantic:

　　Using tags that contain semantics, it's important to tell you what they do.

　　Benefits:　

Clear structure of the page after removing the style

Blind readers better read with a screen reader

Search engines better understand the page

facilitates the sustainable operation and maintenance of the team project

block element, inline element:

　　block elements:div p H1~h6 ul Li address Form table Section article aside nav header hgroup footer

　　Inline elements:span th tr TD a label TEXTAREA input select img button time, where TEXTAREA input select IMG Button time is also called inline block Level element.

　　The difference: block-level elements will have a single row, by default, its width will automatically fill the width of the parent element, the row element will not be exclusive row, the adjacent rows of elements will be arranged in the same row, until a row, will be wrapped, the width varies with the content, Inline block-level elements can be set to a wide height using CSS, but not exclusively on a single line.

HTML5:

　　HTML5 is mainly about the image, location, storage and other functions of the increase.

Semantically Better content Tags: header nav footer aside article section

Audio, Video: Voice video

Canvases: Canvas

Drag and drop

Local storage: localstorage (permanent, the browser is closed after the data is not lost, need to manually delete)

Sessionstorage (temporarily saved, automatically deleted when the browser is closed)

Offline applications

New form type: Email URL number Range Date search

To remove an element:

　　　　Pure expression of elements: Basefont Big Center font u ...

　　　　No longer use frame frame

Knowledge carding--html