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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
