Familiar with page architecture and layout, have a deep understanding of web standards and label semantics, what should I say?

Source: Internet
Author: User
Tags object model

Recently, many companies on the internet have asked interviewers to familiarize themselves with the page architecture and layout, to understand the semantic meaning of web standards and labels, and many interviewers do not know what to say about them. In fact, this problem for many interviewers, I think more is the expression of language. The prerequisite is that you have a certain understanding of these basic computer knowledge. To be blunt, is to have the basic knowledge of the front end.

1.Web Standard

Web standards are made up of a series of standards. A Web page consists mainly of three parts: structural layer, performance layer and behavior layer. The corresponding standards are divided into three aspects: the structured standard language mainly includes XHTML and HTML as well as XML, the presentation layer standard language mainly includes the CSS, the behavior standard mainly includes the object model, DOM, ECMAScript and so on.

Structured standard language, as stipulated by the Consortium,

The writing of ㈠ tags needs to start and end. Except for single notes;

㈡ block level elements cannot be placed inside the <p></p> tag. The Li can contain div tags.

㈢ block elements inside can be placed in the block and inline, special p and H1-h6 inside do not put block elements, Li and Div can be put a lot. Because these two labels, they have the properties of the container.

㈣ inside to put inline, do not put block.

Separation of structure and performance of ㈤

㈥ naming must be standardized

Performance Layer Standard:

The writing of CSS, first of all, to use the external introduction of the way, because the structure layer as far as possible to reduce the presentation layer of the code too much appear. Achieve the purpose of separation. CSS selectors, those attributes can be inherited, and those cannot be inherited. What is the priority between them? How to use the most concise CSS code to express the designer's ideas, and not just to achieve the designer's ideas will be fine. We want the code is concise, too much code, but let the browser parse a lot, wasting time.

Behavior Layer Standard:

It's mainly about knowledge in JavaScript. Like Dom, ECMAScript. Using the standard in JavaScript, you can. Generally for the user's behavior, or a page of the dynamic effect of some special implementation, we can take into account the use of JavaScript to write, but the reusability of the code, modular. variables, scopes. Perhaps more is the rules of JavaScript. It's OK to speak your own understanding.

2. Label Semantics

What is semantics. In fact, it simply means that the machine can read the content. The resolution of the web page is searched by the search engine, the machine to parse. So the standard of semantics is to make machines read as much as possible.

The original HTML, such as H1~h6, THEAD, UL, OL and other labels, through the semantics of the label, the original design ideas, to achieve the requirements of semantics. such as headings, headers, unordered, ordered lists, search engines make good use of these semantic tags to crawl content

Later, the originally defined HTML semantic tags, not enough to achieve the various parts of the Web page function or location description, so the Web front-end staff using the HTML tag ID and class attributes, further to the HTML tag description, such as the footer HTML tag add such as id= "Footer" or class= "Footer" attribute (value), in a "silent" way between different front-end programmers or back and forth programmers to achieve communication.

The HTML5 of the Organization adopts the semantic tags such as header, footer, section and so on to design the layout of the page, which makes up the id= "header" or "class=".

Deeper semantics is the process of teamwork, the variables and class,id that need to be declared. Use English as much as possible to understand each other. This reduces the cost of cooperation and accelerates the efficiency of cooperation.

3. Layout and page Architecture layout, divided into two types: code, Visual. The code is the most typical div+css layout, table layout (table), IFRAME framework (special place to use) layout, specific use. Can be a corresponding look. At present the most popular is the way of div+css layout. Of course, the concept of layout is more extensive, because there are many ways of layout in CSS, such as float and position. The degree of specific understanding, you need to elaborate on their own. Visual layout: such as single page, nine Sudoku, Waterfall flow layout, tab switch layout, accordion layout, etc. Page Schema: If this is the problem, with my current ability, I'm afraid it's still a little difficult to answer this question for everyone to recommend an article, it feels good to write the article address: http://kb.cnblogs.com/page/210101/

I think the front-end practitioners, should be more to their own basic knowledge tamping very strong. With all the practitioners ...

Contact Us

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.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.