css html summary summary_html/css_WEB-ITnose

Taking advantage of the three days of Qingming Festival, I watched a set of xhtml videos. Although it is xhtml, it also metaphors a lot of experience and consolidated my own foundation. I also wrote a lot myself. Big and small things, but the more I write, the more I realize that my foundation is weak, and it’s true! I still learned some concepts and some experiences that I didn’t understand or know before. Here I will write an article to summarize.

1. First, W3C standards

Structure, performance, action and html, css , Corresponding to JavaScript, its original intention is to separate structure and performance, and write the structure according to HTML specifications.

Tags:

-All tags must be lowercase, closed, and reasonably nested, and IDs cannot be repeated

-tags must There are attributes, the attributes must have values, and are represented by ""

-img tags cannot ignore alt attributes

-table tags are not applicable height attributes

-minimize ifream's Use will affect the browser response speed, although it can also be used in html5 ifream

Content model:

-body, form, blockquote can only contain blocks Level elements

- Inline elements such as text, images, links, etc. cannot be directly exposed in the body tag and must be wrapped with other tags

- Inline elements cannot contain block-level elements

Other aspects:

-Special characters are represented by encoding

Extra:

Initial Scholars’ misunderstandings:

1. div is omnipotent!

2. Table is a shame!

3. Standards for the sake of standards

1. Divs are strictly called containers. Some page decorations can be achieved by nesting divs. , but the entire page must not be written in divs. Many tags have specific meanings, such as h1~h3, p, strong, etc., which are more semantic in HTML5, such as footer, head, nav, article, section and other tags, there are many tags, I will only talk about some commonly used tags here, and if the entire page is written in div, it will not be easy for search engines to search your website.

2. The table is not shameful, but it is rarely used. The table is used to load data, and all tags will not be shameful as long as they are used properly.

3. To put it bluntly, we write website pages for customers and users. We learn corresponding websites according to their needs. We emphasize that pages should be written flexibly and not rigidly.

2. What you must master

1. Block elements and inline elements

(1 ) Block elements

Block elements are generally container elements for other elements. Block elements generally start on a new line. It can accommodate text, inline elements and other block elements. It can be set through the width and height attributes. For its size, common block elements include h tags, p tags, and div tags

Extra: form tags are also block tags and can only accommodate block-level tags

(2) Inline elements

Inline elements are not block-level elements. Inline elements can only accommodate text or other inline elements and will not occupy a line. Width and height have no effect on them. Common inline elements include an img span, etc.

Extra: Here I would like to mention that in order to make it more convenient for developers, w3c has added an inline-block attribute value, which includes the characteristics of block elements: the ability to change the size of elements, and the characteristics of inline elements: the size is only the size of the element in the box

2. Box model

The picture below can represent everything. For details and in-depth information, please see various technical blogs of great experts. :

3. CSS page control style method

(1) Inline

(2) Inline Embedded

(3) Linked

(4) Imported

Priority:

Nearest element, inline > inline > link >Import, the link type is often used in the domestic front-end.

4. Commonly used selectors

-tag selector (div, p)

-id selector (#)

- class selector (.)

- universal selector (*)

- pseudo-class selector (:link,:active,:hover,:visited)

Priority:

ID>Class>Label>General

5. Text flow

Text flow narration is a conceptual thing. The elements on the page are arranged from top to bottom, from left to right.

Extra:

How to get out of the text flow?

In order to facilitate layout, we usually use floating and positioning layout

6. Naming method

-Camel naming method

-Pascal nomenclature

-Hungarian nomenclature

-or all first letters in capital letters

Naming rules:

Header: head/header

Content: content/container

Tail: foot/footer

Navigation: nav/navigation

Sidebar: sidebar

3. CSS control ability

1. First line indentation

text-indent:2em;

If the text is in English, it is also indented by the width of 2 Chinese characters

Knowledge point:

px pixels

rem relative browser unit

% percentage unit

cm, mm absolute unit

2. Enhance page text flexibility

Set the text size font-size in the body: 62.5%. Set the text size to 1.2em where 12px is required, and so on. 14px is relatively 1.4em

Because the default font height of any browser is 16px 1em=16px

1px=1/16em 10px=10/16em=0.625em=0.625*1em=62.5%*1em

12px=62.5%*1.2em

14px=62.5%*1.4em

16px=62.5%*1.6em

Extra:

Setting 1.2em under ie will be larger than 12px, why? How to deal with it?

Because the IE browser always converts the decimal point to 62.5 incorrectly, so we will set the page size directly to 63% in the future to be compatible with all browsers

3. Floating and positioning

Float:

float: left

float: right

Positioning:

position:absolute

position:relative

Extra:

Clear float:

-clear: both

-clear : left

-clear: right

Floating clears not the floating of this element, but the influence of superior elements on this element. We can say that the page as a whole is divided into three levels

The first level is text flow, which is the default display method of the page

The second level is floating, which is separated from the text flow and goes up one level

The third level is positioning, which is better than floating The higher level is the third level

4. position

-absolute

-relative

- static

-Inherit

-Fixed

Absolute: Absolute positioning, this attribute value makes the element absolutely positioned relative to the browser body It is more flexible and can be positioned to any point in the browser

Relative: relative positioning, relative to the parent box positioning

static: the default element positioning method

inherit: inherit from the parent The position attribute of the level box is not very useful. If we want to inherit it, we might as well rewrite it ourselves and find the element again.

Fixed: The element is fixed at a position in the browser body, and the position will not change even if the browser is pulled up or down

Extra: Most websites are mainly floating, supplemented by positioning , you can take a look at the current Taobao website.

5. CSS Reset

css style has the function of inheritance and reset

Commonly used CSS Reset

*{ margin:0,padding:0 }

body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4 ,h5,h6,form,input,textarea,th,td {padding:0; margin:0;}

table {border-collapse: collapse; border-spacing: 0;}

img {border: 0;}

ol,ul{list-style: none;}

h1,h2,h3,h4,h5,h6 {font-weight: normal; font -size: 100%;}

Four: Page debugging/correction methods

1. Page debugging

2. Elimination method

3. Setting the background method

Extra:

The loading order of the website pages is in the order of the text flow.

When we write the page, we give priority to:

1 , Search engine loading

2. Easy for viewers to observe

3. The page structure is simple and neat

Finally

Tell you about a debugging artifact: http://getf5.com/

The above are some experiences and some basic things.
If there are any errors in the description of this article, please point them out in time and I will actively correct them.
There is no end to life and no end to learning.
The more I study, the more I realize that I still have many shortcomings. I will continue to work hard!