Those you do not know HTML knowledge, come to learn about it

Foreword

As one of the front three basic HTML knowledge, every front-end developers have to master the part. Today in this article we will look at some usually do not pay attention, but at the time of the interview may ask the questions, you will look at it?

 

 

 

How to use div analog implementation textarea?

We all know that is a form textarea form a very common element for multi-line text input, you can set the number of rows and columns.

But the default style textarea on the page looks ugly, many pages are simulated using div textarea achieve. For example, published QQ space to talk about the main page, you will find page after you look at the source code input box is actually a div element, not a textarea element, and now we take a look at how this is done, right?

First, let's look at the effect achieved is what

 

 

 

Key attributes: contenteditable

As literally this property may be understood to be edited, if provided on the page contenteditable = true tag, which can be edited.

It can be used with user-modify attribute, which represents the control whether the user can edit the page elements, you can choose Rich Text or plain text content by setting different values, but because the property is non-standard properties, very few people know.

First, let's look at some code HTML page is a simple div tag, and then set the contenteditable attribute to true.

 

 Next we take a look at the complete implementation of CSS code throughout the bar.

 

 

Div height can be controlled by the min-height and max-height attribute, the content will appear in the scroll bar beyond the max-height. If you want to fix the height of the div, only need to set the height property can instead set min-height and max-height property.

The difference between the src and href

src and href are a kind of external resources referenced from the use of point of view, but on the specific understanding is different.

Href value specifies the location of the resource on the network, the definition of an element is a link on the current page and resource files needed. For example, the following statement.

 

 

When a browser parses the pages of this statement, we will know where references an external style file, but does not prevent page resolution. This @import are very different, so when the introduction of external style, it is recommended to use link tags.

The value of the src represents the essential content of the page, you need to load the specified content into the current page. For example, the following statement.

 

When the browser to parse this statement on the page, the browser will parse this file, compiled and executed, causing the entire page to load is suspended, which is why the general will choose the script tag on the body end tag front.

There is a better way of understanding, href representation is a link to a resource; src is the replacement of the current element, the contents will eventually be embedded in the current page.

DIV + CSS layout Table layout and contrast

While most web pages are based on currently DIV + CSS layout of the way, but there are a few old-fashioned Web page uses a Table layout, we can take a look at the pros and cons of both layouts.

 

 Updated front-end technology so rapidly in this environment, front-end engineers to maintain self-learning ability is especially important. Therefore, the "what to learn" "how to learn" that we have to urgently address the problem. This is my front-end exchange study qun: in front of four hundred eighty-four, the middle is seven hundred fifty-seven, followed by seven hundred sixty. If you need to download learning materials on the inside. I'm doing this for ten years, have questions feel free to ask me, learning, learning efficiency and so on.

• div + css layout

1. div + css layout belongs to the W3C standards, but also due to the presence of CSS, HTML part of the code would look very pure, satisfying behavior patterns, structural separation principle.
2. Pages load faster, which is currently DIV + CSS using a wider range of a very important reason.
3. Page coding amount with respect to the Table layout will be a lot less.
4. Page content easier to maintain because there are styles CSS file, you only need to modify the CSS file, an HTML file will not be affected.
5. Since DIV + CSS layout easier SEO optimization, so more easily indexed by search engines.

• Table layout

Although DIV + CSS has various advantages, Table layout is not entirely useless. Here you can also include several advantages using Table layout.

1. Easy for novices to learn (I believe a lot during the beginning of the back-end RD are starting from the front end of the learning table layout).
2. Better compatibility, as Table layout is from the oldest browser evolved, compatibility will meet on all browsers. The emergence of CSS3 have to consider the level of support the browser, a style you want to consider adding a few different browsers prefix, similar to -webkit, -moz etc.

Conclusion

Today This article explains some knowledge about HTML, we have mastered it?