Markup Language -- Review list_html/Xhtml _ webpage Creation

Click here to return to the webpage tutorial section HTML. above: Markup Language-Source of the anchor source Chapter8 repeat the listing previously in chapter 1, we have discussed several methods to mark the listing, and studied with & lt; ul & gt; and & lt; benefits of marking them as Unordered Lists. this method can identify the structure of the list and ensure that all browsers and devices have previously discussed several methods of marking the List in Chapter 1.

And
• The benefit of marking them as Unordered Lists. this method can identify the structure of the list, ensure that all browsers and devices can correctly display its content, and also allow us to add various styles for it with CSS.
  In various environments, it is not difficult to fill the whole book with all the methods of marking the list when dealing with individual problems, however, I do plan to use an independent chapter to discuss several listing categories other than unordered listing. this article describes several situations that are suitable for using the list.
  A list is a powerful tool for organizing the page structure. It adds meaning to each independent project and allows you to add independent styles with css later.
  Let's take a look at the number compilation project list and two methods to mark this list. you may be able to see at a glance which method is more helpful, but I will explain this example in detail again to emphasize the importance of structured labeling and using the correct tool to solve the problem. which of the following is the best way to mark a numbered project list?
  Assuming that you are marking a step list, each project is numbered before, we will study two different ways to achieve this goal, and explain why a method is more suitable. method A: disordered and ordered

     
     
  
      
      
  1. Chop the onions.
      
      
  2. Saute the onions for 3 minutes.
      
      
  3. Add 3 cloves of garlic.
      
      
  4. Cook for another 3 minutes.
      
      
  5. Eat.
     
     

  The previous list may be one of the worst recipes in the history of cooking. but it is quite appropriate to use it as a simple example. It may be better to add some salt and eggs, or... no matter, go back to the question.
  Method A we chose to mark these steps with an unordered list to get all the benefits we have mentioned in Chapter 1. We add structure to the content and know that most browsers, screen readers and other devices can correctly process this part of the content. We can also use css to easily specify styles for it, which is great! But... digital games
  Because this is a numbered list, we add a number before each project, followed by a full stop after the number to identify the order of each step, but if you need to wait for step 1, what should I do if a new step is added between Step 1? Now we need to (manually) re-number all projects after the new step. this configuration is not a headache, but if you are modifying a configuration with 100 items, the modification process will become very tedious. small dot
  Because we mark the structure in this example with an unordered list, we will see a small dot (like Figure 8-1) before each code-encoding project ), you may like the dot symbol. If you do not like it, you can remove it through CSS, but these dot symbols will be displayed when you do not use CSS to browse this list.

     
     
  
      
      
  Chop the onions.
      
      
  Saute the onions for 3 minutes.
      
      
  Add 3 cloves of garlic.
      
      
  Cook for another 3 minutes.
      
      
  Eat.
     
     

  I'm sure this is the practice most people use, but it doesn't mean that we are not using method A in some situations for some reason.

  Meaning "ordered list", so we use the correct elements to solve the problem. What is the special feature of Method B? Automatic ID
  You may find that we do not have to manually add a number for each configuration item.
  The number is automatically generated in order. If the list of steps contains more than 100 items, and we need to insert several new steps in the middle, we just need to insert a new
  1. The project is ready, and the browser will automatically rename it, just like magic.
     If method A is used, we need to manually correct all numbers when inserting each project. I can think of more interesting work than this...
     Figure 8-2. the browser of version 11 displays the effect of Method B, which is automatically numbered before each step.
     

     Figure 8-2 The browser shows method B as a good package, part 2
     Another benefit of Method B is that A long list item will be indented to the generated number when wrapping the line, and method A will be folded to the number (Figure 8-3)
     

     Figure 8-3 Comparison Method A and method B
     Although the default numbering style of the ordered list is usually an Arabic number (1, 2, 3, 4, 5, etc.), we can change the numbering style by using the list-style-type attribute of CSS. list-style-type can be selected in the following ways: decimal: 1, 2, 3, 4 ,... (usually the default value) upper-alpha: A, B, C, D... lower-alpha: a, B, c, d... upper-roman: I, II, III, IV... lower-roman: I, ii, iii, iv... none
     Therefore, for example, if we want Method B to generate an uppercase Rome number, we can achieve the following CSS:
     

     ol li {list-style-type: upper-roman;}

     Figure 8-4 shows method B with the CSS display in the browser. Our step list is no longer a preset Arabic number, but instead a roman number. of course, the marked parts are still identical. have you changed your mind? You just need to make a small modification and change it to another style listed previously. Then, you can change the numbering method of the List to what you like immediately.
     

     Figure 8-4 use an ordered list of Roman numerals
     HTML type attribute: Some people may directly

     The type attribute is used in the tag to replace the numbering method of the list with Roman numerals and English letters. However, to support the CSS rules described earlier, we do not recommend using the type attribute since the HTML 4.01 standard. Therefore, you should not use the type attribute again. You should use CSS instead.
     Later, in the tip extension, we will add a style for this ordered list with CSS, but now let's take a look at another example of the list type.
     

     Which of the following is better for a group of nouns and explanations?
     OK, this question has provided enough clues, and it is almost the answer. after reading the following two methods, you will know the meaning of this sentence. more important than the problem itself: Method A is often used to mark nouns and explanations, while Method B is actually A list rarely used, however, it can be applied in many cases, and the structure is more flexible.
     First, let's take A quick look at the terms/interpretation markup that you may be very familiar with, especially the W3C standards: Method
     

            
            
     
             
             
     CSS
     A simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
             
             
     XHTML
     A family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML.
             
             
     XML
     A simple, very flexible text format derived from SGML.
            
            

     This method seems a bit reasonable, use the unordered list, and
     Tags separate Nouns from definitions.
     However, if we want to specify different styles for each noun (CSS, XHTML, and XML) and the definition content, what should we do? When using method A, the only option is to add some labels that can specify the style, such as additional orFrom the maintenance point of view, this is not an ideal practice.
     Figure 8-5 shows the effect of method A in A general browser. The terms and definitions are in A separate row.
     

     Figure 8-5 display the effect of method A in A general Browser
     Method A does not have any disadvantages except that A special style cannot be set for each row, but it is enough to be used as an interface to highlight the list type used by Method B-define the list. Method B
     

            
            
     
             
             
      
              CSS 
             
             
             
      
              A simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. 
             
             
             
      
              XHTML 
             
             
             
      
              A family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML. 
             
             
             
      
              XML 
             
             
             
      
              A simple, very flexible text format derived from SGML. 
             
            
            

     Definition list (

     ) The content consists of two additional tags:

     (Defining nouns) and

     (Definition description). For our example, the definition list perfectly matches the meaning of content representation-because we are defining a series of Terms and explanations.
     According to the preset value, most visualization browsers define the description

     It is displayed in a separate row and slightly indented (Figure 8-6). Of course, we can use CSS to modify the indent settings as needed.
     

     Figure 8-6 the effect of Method B displayed in a general browser is guided by the structure
     In terms of semantics, Method B is completely complete, so that we can use independent tags for each element in the list. This allows us to separate nouns and reveal specific styles.
     For example, we can make a simple modification

     Bold. Only a few lines of statements can achieve this goal. You do not have to modify the label content.
     

     dt {font-weight: bold;}

     This is enough.,Even labels, all

     Will be changed to bold, as shown in Figure 8-7.
     

     Figure 8-7 Method B is

     Add the font-weight: bold effect Film
     You may find that I like to use CSS to add small icons to tags. The reason why I like this is that I can use the background attribute of CSS to dress up pages and make them decorative, the structure of unimportant images and page content is separated.
     It's easy to change, add, or remove images because I don't need to modify the TAG content to complete these changes.
     For the definition list, it should be interesting to add a small arrow icon to point from a noun to the definition content. We can easily add this effect to the CSS section below:
     

     dt {font-weight: bold;}dd {margin-left: 15px;padding-left: 15px;color: #999;background: url(dd_arrow.gif) no-repeat 0 2px;}

     The first change we made is to remove some data with margin-left: 15px.

     Next, we change the color of the definition description to gray so that it matches

     The difference is greater. at the same time, a small orange arrow icon is placed on the left side of the description text at the top 2 pixels, and 15 pixels are left on the left side of the description text, so that the icon does not overlap the text, and Figure 8-8 is the result of completion.
     

     Figure 8-8 Add a flag to highlight the definition list of text relevance
     As you can see, using the definition list structure, we can easily specify a unique style for each component project to enrich the layout without having to modify the label content, we are sure that browsers that do not support styles will still display this list in an organized and easy-to-read manner. other applications
     It is important to note that the purpose of the definition list is not only to mark nouns, but also to define content. The definition list can also be used to mark dialogs, navigation bars, and even form la S.
     We can even reference W3C definitions of the definition list in the HTML 4.01 specification: (http://www.w3.org/TR/html4/struct/lists.html)
     "

     The definition list created by a tag usually contains a series of nouns and definitions (although the definition list can be applied elsewhere )"
     So don't be afraid to use the definition list outside of Terms and explanations!
     

     Summary
     So far, we have read the other two types of list: ordered list and definition list. we found that using these configuration structures to replace the unordered list with additional labels makes it easier for us to control the style and maintain the list.
     Next we will use the initial step list in this chapter as an example to adjust the style with CSS.
     Let's review the list of the first steps in this chapter:
     

                  
                  
     
                   
                   
     Chop the onions.
                   
                   
     Saute the onions for 3 minutes.
                   
                   
     Add 3 cloves of garlic.
                   
                   
      Cook for another 3 minutes.
                   
                   
     Eat.
                  
                  

     Without adding any CSS, the browser will display similar effects to Figure 8-2, just like other structured markup syntax examples in this book. When importing CSS, an ordered list is a group of labels that are easy to specify a style.
     We know that the correct structure is used, so the content of the clear ticket can be correctly displayed in browsers that do not support CSS or close CSS.
     Let's make a little bit of decoration. Let's first define the number before each project. Identify each project
     To allow us to access each configuration item and change its number to a more elegant style, we need

     Adding id to the tag will also add id to the entire ordered list, so that we can specify a specific style for this list without affecting all other

     .
     

                    
                    
     
                     
                     
     Chop the onions.
                     
                     
     Saute the onions for 3 minutes.
                     
                     
     Add 3 cloves of garlic.
                     
                     
      Cook for another 3 minutes.
                     
                     
     Eat.
                    
                    

     Now we can identify each item, so we have complete control over the style of each element in the list. it is worth mentioning that after adding a unique id for each project, we cannot rely on the "Automatic number" function of the ordered list. if you insert a new step in the middle, you have to change the id value of the subsequent step. custom number
     The first step to create a custom number for the list is to remove the default number from the # recipe element using the list-style-type attribute:
     

     #recipe {list-style-type: none;}

     Figure 8-9 shows the effect of the list after the number is removed using the preceding rule.

     Figure 8-9 use CSS to close the ordered list after the number
     Now we have prevented Automatic Generation of numbers, and then we can replace them with our own digital images. use photoshop (or your favorite drawing tool) to create five GIF images, one digit and one image. figure 8-10 shows the five numbers created in red Prensa.

     Figure 8-10 Add the number to the CSS using the five GIF images in the ordered list
     Due to the large size, we need to add an internal and external patch for each configuration item to leave sufficient space for the digital images to display them as backgrounds, we will also add a light gray edge line under each step.
     We can use the inheritance selector # recipe li to apply these rules to

     1. So that we do not have to repeatedly define these rules for each id.
        

        #recipe {list-style-type: none;}#recipe li {padding: 10px 50px;margin-bottom: 6px;border-bottom: 1px solid #ccc;}

        Apply these settings to each

     2. Then, we can specify a digital image for each id.
        

        #recipe {list-style-type: none;}#recipe li {padding: 10px 50px;margin-bottom: 6px;border-bottom: 1px solid #ccc;}#one {background: url(ol_1.gif) no-repeat 6px 50%;}#two {background: url(ol_2.gif) no-repeat 2px 50%;}#three {background: url(ol_3.gif) no-repeat 3px 50%;}#four {background: url(ol_4.gif) no-repeat 0px 50%;}#five {background: url(ol_5.gif) no-repeat 6px 50%;}

        6 PX 50% will place the image 6 pixels away from the left and 50% up and down to align the horizontal midline.
        Figure 8-11 shows the final result in a general browser. Each picture is displayed on the left side of the project, and a gray line is displayed at the bottom of each step to further differentiate them.
        

        Figure 8-11 view the final result in a general Browser
        Using several images and several CSS rules, we added some custom styles to the structured ordered list: Once again, we proved that we could put unimportant images out of the tag for later updates.
        In addition to changing the list, the ordered list and definition list can also provide the corresponding semantic structure, convenient style selection, and give full play to your imagination, try using these different configuration types-and add a gorgeous coat to the CSS infrastructure.
        In the end, you will get a solid foundation for correct display in various places, and can modify the display effect with a powerful CSS bit function.
        From the chapter point of view, half of the book has been translated, so that we know how difficult it is to make English documents into Chinese... first, you must understand the original author's intention to organize it in your own language... for this image, I prefer to combine the background image and then use background-position to specify the corresponding background image for each list, at least visually reducing the number of times an image is loaded... haha