Fourth day Learning: HTML Tag Learning 2

Keywords: HTML tag Learning 2 morning run plan:

Learning tasks:

1. 3rd. Recognition of tags (PART II)
   • 3-1 using UL, add News list
   • 3-2 use OL, add book sales ranking
   • 3-3 Understanding the role of div in typesetting
   • 3-4 naming the DIV to make the logic clearer
   • 3-5 table tags, recognize tables on the web
   • 3-6 using CSS styles to add a border to a table
   • 3-7 caption tags, add titles and summaries to the table

Learning Record:

• 3-1, 3-2 list label learning and use
  • Unordered list
    • An unordered list is a list of items that are marked with a bold circle
    • The unordered list starts with the <ul> tab, and each list starts with the <li>
    • Paragraphs can be used inside a list item. Line breaks, pictures, links, and other lists, and so on.
    • The code is as follows:

      <ul><li>Coffee</li><li>Milk</li></ul>

  • Ordered list
    • is also a list of items that are marked with numbers
    • The sequence table starts with the <ol> tag, and each list starts with the <li> tag.
    • The code is as follows:

      <ol><li>Coffee</li><li>Milk</li></ol> Note: Use <pre></pre> to represent the reference code, where < using &lt; to represent,> with &GT

  • Definition List
    • Custom lists are more than just a list of items, the combination of 20 items and their annotations
    • The custom list starts with the <dl> tab, and each custom list item starts with <dt> and the definition of each custom list item starts with <dd>.
    • The code is as follows:

      <dl><dt>coffee</dt><dd>black Hot drink</dd><dt>milk</dt><dd> White Cold drink</dd></dl>

  • List Label:
  • <ul> Defining unordered Lists
    • Property:
      • Compact and type (deprecated, suggested with CSS instead)
  • • <ol> define ordered list
      • property:
        • Reversed: Specifies that the order of lists is descending Order
        • Start: Specifies the starting value of the ordered list start= "number"
        • type: Specifies the type of markup used in the list. Values are "1 A a I i"
    • <li> define list items
      • <li> available in ordered and unordered tables
      li> use CSS to define the type of list and list items
    • <dl> custom list
    • <dt> custom definition items
    • <dd> Custom definition Description
      • Demo Code:

          <dl>  <dt> computers </dt> <dd> devices for calculation ... ...</dd> < dt> Display </dt> <dd> visual display of information devices ... </dd>  </dl>  

    /li>
• 3-3 Understanding the role of div in typesetting
  • In the Web page production process, you can separate some of the logical parts of the division, hair in a div tag, the role of the DIV tag is equivalent to a container
  • <div> define a partition or section in a document
  • <div> tags can divide documents into separate, different parts. It can be used as a strict organizational tool and is not associated with any format. If you mark <div> with an ID or class, the label will become more effective.
  • Grammar:<div></div>
  • Available properties: Align
    • Values: Left, right, center, justify
• 3-5 table tags, recognize tables on the web
  • CREATE TABLE elements: Table, tbody, tr, TH, TD
    • <table>...</table>: Entire table starts with <table> mark, </table> Mark ends
      • Property: Broder: Specifies the width of the table border
      • Align: Specifies the alignment of the table relative to the surrounding elements
      • Width: Specify table widths
      • CellPadding: A gap between the specified cell edge and its contents
      • cellspacing: Specify whitespace between cells
      • FRAME: Specifies which part of the outer border is visible
        • Values: void, above, below, Hsides, LHS, RHS, vsides, box, border
      • Bgcolor= color value sets the background color of the cell
      • Rules: Specifies which part of the inner border is visible
        • Value: None, Groups, rows, cols, all
    • <tbody>...</tbody>: Defines the table body, when the table content is very long, the table will download a little bit, but if the <tbody> tag is added, the form will be displayed when all the contents of the table are downloaded. <thead>...<thead><tfoot><tfoot>
    • <tr>...</tr>: A row in a table with several pairs of TR tables.
      • Property: Align: Defines the content alignment of a table row
        • Values: Right, left, center, justify, char (text-aligned according to which character)
    • <td>...</td>: A cell in a table with a few pairs of <td> in a row that shows a few columns
      • Property: Align: Defines the content alignment of a table row
        • Values: Right, left, center, justify, char (text-aligned according to which character)
      • RowSpan: Number of columns spanned by a cell
      • Colspan: Number of rows spanned by a cell
    • <th>...</th> header, a cell in the head of the table, the text inside the th element is usually rendered as a centered bold text
    • <table summary= "Form Introduction Text" >
    • <caption> Table Title Text </caption>

Extended reading:

• the logic in Web page design:
  • Logic is the law of thinking, the logic in design, is the norm in the general sense of order, well-reasoned, small to a symbol can also explain the relationship between the picture and the meaning of his existence.
  • describes logical inference in 5 designs
    • reading logic---Gutenberg chart
      • When you browse the screen or layout, the line of sight tends to move from the upper-left corner to the lower-right corner
    • linear logic
      • top-down as the hierarchy of rights distribution, tied up, each link is closely connected before and after the orderly, rigorous and reasonable.
      • Straight line logic is clear, targeted, easy to understand, guide users along the logic to see the design
    • pyramid logic
      • various classifications in the structure with only a few logical ways Interconnected (upward, downward, horizontal), which constitute a close and unobstructed logical thinking.
    • Curved logic
      • design or product-unique leadership and consumer irrational thinking consumption model
    • grid
    • Grid is an accessible tool for framing the layout with vertical or horizontal split lines, including boundaries, blanks, and columns to provide a framework for organizing content
    the
    • grid can make the page layout appear compact and stable, providing designers with a logical and rigorous module when designing a site.
• Talk about the page flowchart:
  • Page Flowchart Brief
    • page = action + content, actions are user-triggered, including connections, buttons, forms, and so on. Users can see different content on the same page through these actions, or jump to other pages
    • Page Flowchart Objective: To express the user's different operating instructions under the different pages of the flow relationship.
    • Page Flowchart elements: page, action, or status, connection line
    • The page also has categories: note that some operations may not give you a real page, but it is possible to send a text message, send an email, and so on, which need to be shown.
• The difference between DIV and table:
  • Differences in loading modes:
    • div Loading method is read-and-load, encountered <div> did not encounter </div> when the content of the same load div, read how much load;
    • Table loading is done after loading, and after encountering <table>, the contents of table are not loaded until </table> is read.
  • Differences in Web applications
    • If the page is added to the table, it must wait until the page has finished reading before loading
    • Page Home div without any impact
• div style Rollup

The problem is recorded and resolved:

• What is the logical part?

• The code is as follows:

  <div id="learming " align="center">
   
      
      
   
       
       
   
      
      

• Git error: Fatal:not a git repository (or any of the parent directories):. git

  • Hint that there is no. git such a directory, the workaround is as follows: Git init is ready
• Add a table to the Div, or add a div to the table?
• What's the use of naming div?
• How can the list be arranged horizontally?

Fourth day Learning: HTML Tag Learning 2