"Front End Interview" HTML5+CSS3 Primary interview 1__html

Recently just looking at the front end of the interview, to see the content summed up, convenient for everyone to study together.

1, simple to say to HTML5 + CSS3 of understanding.

HTML5 and CSS3 are not just two new web technology standards, they represent the next generation of HTML and CSS technologies. Its future development prospects are already predictable, that is, HTML5 will be used by more and more web developers. Major browser manufacturers have been actively updating their products to better support HTML5. Its advantages mainly include the following points:

1 more descriptive Tags: HTML5 introduces a lot of descriptive tags.

2 Good media support: for the previous plug-in way to play audio, video trouble, HTML5 has a solution, audio and videos tag can easily achieve the strain.

3 more powerful Web apps: HTML5 provides amazing functionality and, in some cases, can even discard the use of third-party technology.

4 Cross-Document messaging: Web browsers organize scripting interactions or effects between different domains, but for trusted scripts or trouble. HTML5 introduces a safe and easy to implement solution.

5 Web SOCKETS:HTML5 provides support for Web Sockets.

6 Client Storage: The HTML5 Web Storage and Web SQL Database API, which enables you to build client-persisted data for Web applications in a browser.

7 more exquisite interface: The HTML5+CSS3 combination renders the interface effect more exquisite.

8 more powerful form: HTML5 provides a more powerful form interface control, easy to use.

9 Promote accessibility: content more clearly, so that the user's operation more simple and convenient, enhance the user experience.

10 Advanced selector: The CSS3 selector can easily recognize the odd and even rows of the table, check boxes and so on, fewer code tags.

11 visual Effect: has the exquisite interface, has the shadow, the gradual change, the round angle, the rotation and so on visual effect.

CSS3 is an upgraded version of CSS technology, and CSS3 language development is moving towards modularity. As a module, the previous specification is too large and complex, so break it down into smaller modules so that more modules are added in. These modules include: Box model, List module, hyperlink mode, language module, background and border, text effects, multiple column layout.

2, if the HTML5 as an open platform, then its building blocks are.

If you think of HTML5 as an open platform, it constructs modules that include at least the following:<nav>,

<nav> tags are used to divide links with navigation to make the code structure more accurate in terms of semantics.

<section> tags are used to describe the structure of the document.

<footer> tags are used to define footers. Typically, the element contains the author's name, the document's authoring date, and contact information.

3, CSS3 have what new content, please say at least 5.

1) CSS3 fillet table, corresponding attributes: Border-radius.

2 in the past, the text added to the page can only use the Filter property, but in the CSS3 specifically developed a text effect of the attributes, and more than add shadow this effect.

corresponding attribute: Font-effect.

3 enriched the link underline style, the previous underline are straight lines, this time is not the same, there are wavy lines, dots, dashes and so on, but also the color of the underline and

Position to change arbitrarily, haha ~ ~ The world is no longer a single underline. (There is also the style for top and middle horizontal lines, the effect is similar to the underscore) corresponding attributes: text-

Underline-style,text-underline-color,text-underline-mode,text-underline-position.

4 We often make notes in the text below a few points or to play a circle or something, to show the point, CSS3 also began to join this feature, which should be in some specific Web pages

Very useful. Corresponding attributes: Font-emphasize-style and Font-emphasize-position.

5 Font-face can be used to load font styles, and it can also load server-side font files that display fonts that are not installed by the client.

4, HTML5 have what new content, please say at least 5.

1 HTML5 has been identified with the introduction of canvas tags, through canvas, users can dynamically generate a variety of graphic images, icons and animations. The canvas tag also works with

JavaScript uses the keyboard to control graphic images.

2 contains Web Forms 2.0 in HTML5 to describe how to perform a page table operation. One of the biggest features is "form confirmation." Currently, developers usually

Use JavaScript (client) and PHP (server-side) code to validate what you have entered.

3 HTML5 provides more APIs for new elements and existing elements, designed to improve the development of page programs and add features that HTML4 lacks. For example, a video and audio

Aspect of the API will be used in conjunction with the <audio> and <video> elements, which will provide playback of video and audio without relying on third-party programs, such as Flash.

4 semantic better content elements, such as article, footer, header, nav, section.

5 new form controls, such as Calendar, date, time, email, url, search.

5, HTML5 added semantic tags.

There are a number of HTML5 new semantic tags, such as:

1) <section></section> is used to block content on pages in a Web site or application. Usually consists of content and its headings.

2 <article></article> represents a document, a page, or an application that is independent, complete, and can be referenced externally by itself. When we describe a specific thing

, usually use article instead of section. such as a post, a section of user comments.

3) <aside></aside> represents the attached information section of the current page or article. such as references to the current page or main content, sidebar, ads, nav element groups, and so on.

4) <nav></nav> is used as a link group for page navigation, which can include <ul><li><p> elements.

5

6 <footer></footer> footer, the bottom of the page or the content of the section.

7)

8) <figure></figure> is usually used for pictures, statistical charts or code examples with optional headings. Removing it from the Web page does not affect other content on the page.

9) <figcaption></figcaption> represents the title of the figure, subordinate to the figure element.

<time></time> indicates a time or a date. The Pubdate property represents the publication date of the document and can be used in the time tag.

6. What are the new attributes of HTML5?

1 Form-related properties

· Specify the Autofocus property for input (Type=text), select, TextArea, and button. It allows the element to automatically get focus when the screen is open, in the way it specifies the property.

· Specifies the placeholder property for input (Type=text), textarea, which prompts the user's input for what can be entered.

· Specifies the form property for input, output, select, TextArea, button, and fieldset. It declares which form it belongs to, and then places it anywhere on the page without losing the form.

· Specify required properties for input (Type=text), textarea. This attribute indicates that the user is being submitted for a check, checking that the element must have input.

· Add a few new attributes to the input label: AutoComplete, Min, max, multiple, pattern and step. The list property is used in conjunction with the DataList element, and the DataList element is used in conjunction with the AutoComplete property. The Multiple property allows uploading multiple files at a time when uploaded; The pattern property is used to validate the mode of the input field, which is actually a regular expression. The Step property stipulates the legal number interval for the input field (if step= "3", the legal number should be-3, 0, 3, 6, and so on), and the step property can be used in conjunction with the Max and Min attributes to create a range of legitimate values.

· Adds FormAction, Formenctype, FormMethod, formnovalidate, and Formtarget attributes for input, button elements. The user overloads the action, Enctype, method, Novalidate, and target properties of the form element. To add a disabled attribute to the FIELDSET element, you can set its child elements to the disabled state.

· For input, button, form to increase the novalidate attribute, you can cancel the submission of the relevant checks, the form can be unconditionally submitted.

2 Link-related properties

· Add media properties for a and area. Specify the target URL is why the type of media/device is optimized. This property is used to specify that the target URL is designed for special devices such as the iPhone, voice, or print media. This property can accept multiple values. Can only be used if the href attribute exists.

· Add Herflang and REL attributes to area. The Hreflang property stipulates the language of the text in the linked document. This property can be used only if the href attribute is set. Note: This property is purely advisory. The Rel property stipulates the relationship between the current document and the linked document/resource. You can use the Rel property only if you are using the href attribute.

· Increase the Size property for link. The Sizes property sets the size of the linked resource. This property can only be used if the linked resource is an icon (rel= "icon"). This property can accept multiple values. Values are separated by spaces.

· Add the target attribute to the base element, primarily to maintain consistency with the a element.

3) Other properties

· Increase the reversed property for OL, which specifies that the list is displayed in reverse order.

· Add charset attribute to meta

· Increase the type and label properties for the menu. The label defines a courseware annotation for the menu, and the type attribute allows it to appear in the context menu, toolbar, and list Cande but three forms.

· Adds the scoped property to the style. It allows us to define styles for the specified part of the document, not the entire document. If you use the scoped property, the specified style can only be applied to the parent element of the style element and its child elements.

· Add or subtract attributes for the script, which defines whether the scripts are executed asynchronously. The Async property applies only to external scripts (only when using the SRC attribute) there are several ways to execute external scripting:

· If async= "Async": The script executes asynchronously relative to the rest of the page (the script is executed when the page continues to parse)

· If you do not use async and defer= "defer": The script will execute when the page finishes parsing

· If you do not use async or defer: Read and execute the script immediately before the browser continues to parse the page

· Add manifest to HTML elements, use it in conjunction with APIs when developing offline Web applications, and define a URL that describes the cached information for a document on this URL.

· Add an attribute to the IFRAME, sandbox, seamless, srcdoc. Used to improve page security and prevent untrusted Web pages from performing certain actions.

Front End Interview Series articles:

1, "Front interview" HTML5+CSS3 Junior interview 1

2, "Front-End Interview" HTML5+CSS3 Primary interview 2 3, "front-end Interview" HTML5+CSS3 Primary interview 3

4, "Front interview" HTML5+CSS3 Junior interview 4