Since html4.01, the new version is no longer released, because the HTML language is becoming more and more complex and dedicated. That is, there are more and more tags. Even browser manufacturers have developed HTML tags that are only applicable to their specific browsers, which obviously hinders the compatibility of HTML web pages. So the W3C organization re-obtained nutrition from SGML, and then released XML, a more rigorous markup language than HTML, the full name is extensible
Markup
Language ). However, XML is too complex, and most browsers currently do not fully support xml. Therefore, the XHTML language comes in handy.
HTML standardization: HTML pages rewritten in XHTML can be used with many XML application technologies. This makes web pages easier to expand and is suitable for automatic data exchange and more regular. Said this
Now we have to answer the question-CSS. The key to CSS lies in its integration with the scripting language (such as JavaScript) and XML technology, that isCSS + JavaScript + XML(There is actually a better integration:XML + XSL + Javascript) -- But XSL, the style sheet language can be expanded, which is too complicated and not easy to use than CSS. Since the emergence of CSS, HTML has finally gotten rid of the messy nightmare and startedSeparate the page content from the style.
the DIV element is used to provide the structure and background elements for the block-level content in the HTML document. All content between the start tag and end tag of a div is used to constitute this block. The features of the elements contained in the block are controlled by the attributes of the DIV tag, or you can use the style sheet to format the block for control.
although there is no rigid rule on when to use Div, div is more suitable for positioning the general framework. for example, to define the area of a header, a div is generally defined as follows:
here is the content to be written in the header framework
Of course, you can use class to define it, but in general, if the elements are not repeated on the same page, they can be better differentiated by ID.
view the following definition generation
1. complies with W3C standards. Microsoft and other companies are W3C supporters. This is the most important because it ensures that your website will not be eliminated due to the upgrade of network applications in the future.
2. Support for backward compatibility of browsers, that is, whether it is in the future browser war, the winner is IE7 or Firefox, and your website can be well compatible.
3. search engines are more friendly. Compared with traditional tables, web pages using Div + CSS technology are more friendly for search engine indexing.
4. Style adjustment is more convenient. The separation of content and style makes it easier to adjust pages and styles. Currently, international portal websites such as Yahoo and MSN, domestic portal websites such as Netease And Sina, and mainstream Web2.0 websites all adopt the DIV + css framework mode, it proves that DIV + CSS is the trend of the times.
5. the great advantage of CSS is its concise code. For a large website, it can save a lot of bandwidth. As we all know, search engines like clean code.
6. Separation of performance and structure makes it easier to work in team development and reduce mutual relevance.
Apply in-row
We can directly declare styles in HTML files.
For example, thisisfontsize16.
The preceding HTML file is displayed in the browser as thisisfontsize16.
Embedded style can be embedded in HTML files (usually in For example, Type = "text/CSS"> Div {background-color: # ff0000 ;}</style> <
/Head> <body> the background color is red </body>
The above HTML will show that the background color is red.
In this way, all CSS style announcements are stored in another file.
The file is commonly named .css.
In the HTML file <Linkrel = style sheettype = "text/CSS" href = "external-stylesheet.css">
In this line, the styles declared in the file external-stylesheet.css will be added to the HTML file.
You can also import external CSS styles to HTML files.
The import method is to use the @ import command.
@ Import Syntax: <style type = "text/CSS"> <! -- @ Import URL ("style.css"); --> </style>
@ Import command was originally intended to apply different styles to different browsers. However
This is not necessary. The purpose of @ import is to add multiple CSS styles. When multiple CSS styles are added in @ import mode and different CSS styles conflict with each other,
The added CSS style has a priority (for details, see CSS concatenation ).
Another way of embedding is to write directly on tags. However, this method has some limitations. Most tags can accept this solution:
<Div style = "color: #000000;"> text </div>
This Code directly embeds the label to change the color of the text in the label, and directly embeds the label based on the CSS calling priority.
H1
There may be very few people who use this label, because the font displayed is too big, but we are csser. What label styles cannot be changed? And what it can express is like its original meaning.
The role is just as obvious (Big title). I think you already know how to use it. ^_^. UL
This label is often used to define the navigation part. Of course it can also be replaced by ol, but there is no order for navigation connections, so it is more accurate to use ul (the effect is more obvious after CSS is removed)
.
B. This label is no longer recommended, but it brings a lot of convenience in layout (because it is short). Although I am not in favor of using this label, however, sometimes (such as the layout definition in a small place) is a good choice.
The most commonly used part of H2 is not the layout, but the subtitle. However, if you need to define the topic style in some places, use this label to make the topic content use p.
1. Make the page Load faster
Because most of the page code is written in CSS, the page size becomes smaller. Compared with table nesting, div + CSS splits pages into more areas and loads them layer by layer when opening pages. Unlike table nesting, the whole page is circled in a big table, making loading slow.
Ii. Reduce traffic fees
The page size becomes smaller and the browsing speed becomes faster, which makes it the biggest advantage for some websites that control host traffic.
3. More efficient Design Modification
Because the DIV + CSS method is used, it is easier to modify the page. Find the corresponding ID in CSS based on the area content tag, which makes it easier to modify the page and does not damage the layout style of other parts of the page.
4. Maintain visual consistency
One of the most important advantages of Div + CSS is to maintain visual consistency. In the past, the nested table creation method would make the display effect between the page and the page, or between the area and area different. Using Div + CSS to control all pages or all areas with CSS files avoids the effect deviation of different areas or pages.
5. Better indexed by search engines
Because most of the HTML code and content styles are written into CSS files, this makes the text section in the webpage more prominent and easy to be collected and indexed by search engines.
6. more friendly to viewers and browsers
We all know that the website is made for the viewer, which is more friendly to the viewer and the browser, and Div + CSS is more advantageous in this regard. Because CSS is rich in rich styles, it makes the page more flexible. It can achieve consistent and non-distorted display effects based on different browsers.
Although Div + CSS has some advantages, the current CSS + Div website construction has obvious problems, mainly manifested in:
First, the high dependence on CSS makes webpage design more complicated. Compared with the table layout (table) in html4.0, CSS + div is at least more complex than table positioning, even if it is difficult for a website designer, not to mention beginners, which affects the popularization and application of the XHTML website design language to a certain extent.
Second, an exception in the CSS file will affect the normal browsing of the entire website. The design elements of CSS websites are usually put in several L external files, which may be quite complex or even large. If the CSS file call is abnormal, the whole website will become terrible.
Third, the problem of browser compatibility in CSS website design is prominent. HTML-based Web Design in ie4.0 and later versions, there is almost no browser compatibility problem, but the CSS + Div designed website is normally displayed in the IE browser, to Firefox) but it may not be clear (this is why network marketing personnel are recommended to use Firefox ). CSS + Div needs further support from various browser vendors.
Fourth, the optimization of CSS + Div on search engines depends on the professional level of web design rather than CSS + Div itself. The CSS + Div web page design does not guarantee that the webpage is optimized for the search engine, or even has a simpler code design than the HTML website, what's more, the indexing and sorting of web pages by the search engine is clearly not measured by the use of tables and CSS positioning. This is why many websites with traditional table layout are ranked first in the search results, there are many reasons why the ranking of web pages made using CSS and web standards is still low. Because for search engines, factors such as website structure, content, and related website links are always the most important indicators for website optimization.
1. Check whether the HTML element has a spelling error and whether it has forgotten the ending mark.
Even veteran engineers often mistake the DIV nesting relationship. You can use the Dreamweaver verification function to check whether there are any errors.
2. Check whether CSS is correct
Check whether there are spelling mistakes, whether the end is forgotten, and so on. Cleancss can be used to check whether CSS spelling is correct. Cleancss is a tool for CSS weight loss, but it can also check spelling errors.
3. Locate the error
If the error affects the overall layout, you can delete the DIV blocks one by one until a div block is deleted and displayed as normal. Then, you can determine where the error occurs.
4. Use the border attribute to determine the layout characteristics of error elements
An error occurs when you use the float attribute layout. Add the border attribute to the element to determine the element boundary.
5. The clear attribute cannot be specified for the parent element of the float element.
If the clear attribute is used for the parent element of the float element in Macie, the layout of the surrounding float element will be chaotic. This is a famous bug of Macie. If you do not know it, it will lead a detour.
6. the float element must specify the width attribute.
Many browsers have bugs when displaying float elements with unspecified width. Therefore, regardless of the content of the float element, you must specify the width attribute for it.
In addition, when specifying Elements, try to use EM instead of PX as the unit.
7. The float element cannot specify attributes such as margin and padding.
IE has a bug when displaying float elements with margin and padding specified. Therefore, do not specify the margin and padding attributes for the float element (you can nest a div inside the float element to set the margin and padding attributes ). You can also use the hack method to specify a special value for IE.
8. The sum of Float elements must be smaller than 100%.
If the sum of the float elements width is exactly 100%, some ancient browsers will not be able to display normally. Therefore, make sure that the sum of width is less than 99%.
9. Have you reset the default style?
Some attributes, such as margin and padding, are explained differently in different browsers. Therefore, it is best to set all the margin, padding to 0, and list style to none before development.
10. Have you forgotten to write the DTD?
If the display results of different browsers are different, check whether the following line of DTD has been written at the beginning of the page:
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en"
People without foundation will find CSS + Div development hard to learn. In fact, you only need to understand the meaning of the code and can edit it in any text editor. At present, many people are writing code in notepad. Of course, some other tools will be used for convenience:
1.notepad.exe notepad ,(ProgramSmall, manual editing at any time, less spam code, no visual preview)
2. Dreamweaver)
3. editplus (it should be an upgraded notepad tool with a color prompt for code editing)
4. ultraedit
5. golive (Adobe announces that development has stopped)
6. topstyle (there are many features with CSS code check function to reduce the chance of writing errors. In particular, the detailed CSS instructions in its help file are suitable for reference files and those who first contact CSS for learning and use)
Difference between IE6 and FF: Background: orange; * Background: blue;
Difference between IE6 and IE7: Background: Green! Important; Background: blue;
Difference between IE7 and FF: Background: orange; * Background: green;
Difference ff, IE7, IE6: Background: orange; * Background: Green! Important; * Background: blue;
IE7 and IE8 compatibility: <meta http-equiv = "X-UA-compatible" content = "Ie = emulateie7"/>
Head
1. Several browsers in CSS support different keywords, which can be repeatedly defined in browser compatibility! Important can be recognized by Firefox and IE7 * can be recognized by IE6 and IE7 _ can be recognized by IE6 * + can be recognized by IE7
2. Condition comments dedicated to IE <! -- Other browsers --> <Link
Rel = "stylesheet" type = "text/CSS" href = "css.css"/> <! -- [If IE
7]> <! -- Suitable for IE7 --> <LINK rel = "stylesheet" type = "text/CSS"
Href = "ie7.css"/> <! [Endif] --> <! -- [If lte ie 6]> <! --
Suitable for IE6 and later --> <LINK rel = "stylesheet" type = "text/CSS"
Href = "ie.css"/> <! [Endif] -->
3. Several browsers explain actual pixels. ie/Opera: actual object width =
(Margin-left) + width + (margin-Right) Firefox/Mozilla: actual width of the object =
(Margin-left) + (border-left-width) + (padding-left) + width +
(Padding-Right) + (border-right-width) + (margin-right)
4. mouse gesture: The cursor attribute of Firefox does not support hand, but both pointer and IE are supported. Therefore, pointer is used for compatibility.
5. When setting the style attribute of the HTML Tag in Firefox, all positions, width, height, and size values must be followed by PX. IE also supports this method, so the unit of PX is uniformly added. For example, obj. style. Height = imgobj. style. height + 'px ';
6. Firefox cannot parse the abbreviated padding attribute settings, such as padding 5px.
4px 3px 1px; must be changed to padding-top: 5px; padding-Right: 4px; padding-bottom: 3px;
Padding-left: 1px0;
7. when the indentation of UL and ol lists is eliminated, the style should be written as: List-style: none; margin: 0px; padding: 0px; the margin attribute is valid for IE, And the padding attribute is valid for Firefox.
8. Transparent CSS control: IE: filter: progid: DXImageTransform. Microsoft. Alpha (style = 0, opacity = 60); Firefox: opacity: 0.6;
9. CSS rounded corners: IE: corner corners are not supported; Firefox:
-Moz-border-radius: 4px; or-moz-border-radius-topleft: 4px;
-Moz-border-radius-topright: 4px;-moz-border-radius-bottomleft: 4px;
-Moz-border-radius-bottomright: 4px;
10. CSS double-line concave and convex border: IE: Border: 2px outset; Firefox:
-Moz-border-top-colors: # d4d0c8 white;-moz-border-left-colors: # d4d0c8
White;-moz-border-right-colors: #404040 #808080;
-Moz-border-bottom-colors: #404040 #808080;
11. ie supports the CSS method cursor: URL () to customize the Color Style of the cursor Style File and scroll bar. Firefox does not support either of the above.
12. ie has the bug that the select control is always at the top layer, and all CSS does not work for the select control.
13. ie supports label labels in form, including images and text content. Firefox does not support label containing images. clicking an image cannot make radio or checkbox labeled label for produce results.
14. textarea in Firefox does not support onscroll events
15. Firefox does not support display inline and block
16. Firefox sets margin-left for div, and margin-right is centered when it is set to auto, but not in IE.
17. When Firefox sets text-align for the body, the DIV needs to set margin: auto (mainly margin-left margin-right) to be centered.
18. It is best to set the CSS style of the hyperlink in the following order: L-v-h-. That is
<Style type = "text/CSS"> <! -- A: link {} A: visited {} A: hover {}
A: active {} --> </style> to avoid having to have hover and active styles in accessed hyperlinks.
19.
In IE, set the long paragraph to wrap automatically. In CSS, set the word-wrap: Break-word. In Firefox, use the JS insertion method. The specific code is as follows:
<SCRIPT type = "text/JavaScript">/* <! [CDATA [*/Function
Tobreakword (El, intlen) {var OBJ = Document. getelementbyid (EL); var
Strcontent = obj. innerhtml; var strtemp = "";
While (strcontent. length> intlen ){
Strtemp + = strcontent. substr (0, intlen) + "";
Strcontent = strcontent. substr (intlen, strcontent. Length);} strtemp + ="
"+ Strcontent; obj. innerhtml = strtemp;} If (document. getelementbyid
&&! Document. All) tobreakword ("div_id", 37);/*]> */
</SCRIPT>
20. After the floating attribute is added to the sub-container, the container cannot automatically open the solution: Add a clear floating CSS clear: both to the next tag after the Tag ends;
21. After floating, IE6 explains that the outer margin is double the actual margin. Solution: add the display: inline
22. There is a gap below IE6. Solution: add the display: block to IMG or set the vertical-align attribute to vertical-align: Top | bottom | Middle | text-bottom
23. There is a gap between the two layers in IE6. Solution: set the right div to floating float: Left or define margin-Right:-3px relative to IE6;
24. The display method <style type = "text/CSS"> <! -- Li {width: 200px; white-space: nowrap; text-overflow: ellipsis;-o-text-overflow: ellipsis; overflow: hidden ;} --> </style> (applicable only to IE)
25. Set the element height and Row Height to the same value to vertically center the text <style type = "text/CSS"> <! -- Div {Height: 30px; line-Height: 30px;} --> </style>
26.
Align text and text input boxes. Vertical-align: middle must be added to CSS; Attribute setting <Style
Type = "text/CSS"> <! --... ... Vertical-align: middle;} -->
</Style>
27.
If the fixed height value is set for a Web standard browser, it will not be opened like IE6, but you want to set the fixed height and want to be opened? The solution is to remove the height attribute and set it.
Min-height. for compatibility with IE6 that does not support Min-height, you can define {Height: Auto! Important;
Height: 200px; Min-Height: 200px ;}
28. In Web standard, the color of the scroll bar cannot be set for IE
Solution: Set the body in CSS to <style type = "text/CSS"> <! -- HTML {
Scrollbar-face-color: # f6f6f6; scrollbar-Highlight-color: # FFF;
Scrollbar-shadow-color: # eeeeee; scrollbar-3dlight-color: # eeeeee;
Scrollbar-arrow-color: #000; scrollbar-track-color: # FFF;
Scrollbar-darkshadow-color: # fff ;}--> </style>
29. IE6 containers with a height of about 1 px cannot be defined due to the default line height problem. Solution: Set the container in CSS, for example, overflow: hidden | ZOOM: 0.08 | Line-Height: 1px.
30. Set transparent properties for Flash so that the layer is displayed on top of Flash <Param
Name = "wmode" value = "Transparent"/> <! -- Solve the problem on IE //> <embed
Wmode = "Transparent "...... > <! -- Solve the problem on Firefox //>
31. After setting the padding attribute in Firefox, the width and height attribute values will be added accordingly. ie will not solve the problem: use! The important method defines a set of height and width.
32. firefox ignores spaces between Div and DIV, but ie processes them. Therefore, do not enter spaces or press Enter between two connected Div, otherwise, the format of different browsers may be incorrect, such as the famous 3px deviation, and the cause is difficult to find out.
33. The format is as follows: <Div id = "parent"> <Div
Id = "content"> </div>
When there is a large amount of content, even if the parent is set to a height of 100% or auto, it still cannot be automatically stretched in different browsers. The solution is to generate a height at the bottom of the layer
The Code is as follows: <Div id = "parent"> <Div id = "content"> </div>
<Div style = "Font: 0px/0px sans-serif; clear: Both; display: Block">
</Div>
34. The sizes of small are different for IE and Firefox. Firefox is 13px and IE is 16px.
35. IE and Firefox have different sizes for spaces. Firefox is 4px and IE is 8px.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
