HTML Learning Day02 (List, Table, Form)

1. List

Using the type attribute in the tag, you can specify the style of the bullet that appears before the list item. Its value and corresponding symbol style are as follows:  dise:
specifies the bullet as a solid origin
 circlr: specifies the bullet as a hollow origin
 square: specifies that the bullet is a solid square and
the list item label is

• …
• , used to define a sequence of list items.

  列表分类:无序列表（使用，工作中常用）、有序列表、定义列表。
  

  HTML lists are an important tool for organizing, arranging, and presenting information in web pages, helping to improve the readability and accessibility of content while providing flexibility so that developers can customize its appearance and style as needed.

  Lists are mainly divided into the following three types:

  1. Unordered List:

  布局排列整齐的不需要规定顺序的区域。
  ul嵌套li。ul是无序列表,li是列表条目
  

  • Usage : An unordered list is used to indicate that there is no specific order or hierarchical relationship between items. Items are usually represented by symbols, usually dots or small solid squares.

  • Commonly used in work : Unordered lists are often used in web navigation menus, project lists, tag clouds, etc. At work, you might use unordered lists to create your website's main menu, sidebar navigation, or similar lists of items.

  Example:

  <ul>
    <li>项目 1</li>
    <li>项目 2</li>
    <li>项目 3</li>
  </ul>
  

  

  • Although <li>a variety of content can be included in tags, <h1>it is because it breaks the structure and semantics of the list. The correct approach is to put the title tag outside the list, or if you need to add a title to the list, you can use a more appropriate way, such as using or etc.
    tags in the list items to emphasize the text content instead of using the title tag. This maintains the structure and readability of the document.<strong><em>

  exist

  • …
  Insert an unordered list into the tag. Use the type attribute in this tag to specify the style of the bullet that appears before the list item. Its value and corresponding symbol style are as follows:  dise: Specify the bullet
  as a solid origin
   circlr : specifies the bullet as a hollow origin
  square: specifies the bullet as a solid square
  The list item label is
• …
• , used to define a sequence of list items.

  2. Ordered List:

  布局排列整齐需要规定顺序的区域
  ol 嵌套li。ol 是有序列表，li 是列表条目
  

  • Usage : An ordered list is used to indicate a specific order or hierarchical relationship between items, usually represented by numbers or letters.

  • Commonly used at work : Ordered lists are often used to develop steps, rankings, task lists, etc. when a specific order is required. For example, ordered lists are useful when illustrating the product buying process or writing tutorials.

  Example:

  <ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
  </ol>
  

  

  Change numbers in an ordered list to letters or custom content

  (1) 1: Specify the project number as Arabic numerals
  (2) a: Specify the project number as lowercase English letters
  (3) A: Specify the project number as English letters of thanks
  (4) i: Specify the project number as lowercase Roman numerals
  (5) I: Specify the project number as uppercase Roman numerals

  li... /liThe value attribute in the list item tag specifies the item numbering style of the list, its value and the corresponding numbering style:

  (1) Only the style of the specified single list item has changed, and its sequence value remains unchanged.
  (2) The type attribute of the list item mark <li>...</li>only affects the current list item, and subsequent list items will resume following the type attribute set in the list.
  (3) The specification of the type attribute of the list item mark <li>...</li>applies to both unordered lists and ordered lists.
  (4) The type attribute of the list tag can only change the symbol or number of the current list item, and will not change its value. Using the value attribute of the list item tag can change the number of the current list item, and will affect <li>...</li>subsequent The number size of all list items.

  

  You can mix <ol>the label's typeproperties with <li>the label's valueproperties to customize the item numbering style for an ordered list.

  This means you can specify item numbering styles at the entire list level, while also customizing them at the individual list item level.

  <ol type="A">
    <li>Item 1</li>
    <li value="5">Item 2</li>
    <li>Item 3</li>
  </ol>
  

  In the above example, the item numbering style of the entire ordered list is set to uppercase letters (A, B, C...), but the numbering of the second list item is explicitly set to 5 and is not numbered in the default order. Other items are still numbered in uppercase alphabetical order.

  This hybrid approach allows you to customize the numbering style where needed, while still maintaining the default style for the entire list. This provides greater flexibility to meet different layout needs.

  3. Definition List:

  Create a Definition List with each Definition List item （<dt>和<dd>）at the bottom of the page without a dot or number prefix. Here is an example:

  • Usage : Definitional lists are used to represent terms and their corresponding definitions or descriptions. Each item <dt>is represented by a (Term) element and its corresponding definition is <dd>represented by a (Description) element.

  • Commonly used at work : Definitional lists are often used in glossaries of terms, lists of product features, and any situation that requires explanation or description.

  Example:

  <dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，用于创建网页。</dd>
    <dt>CSS</dt>
    <dd>层叠样式表，用于网页样式设计。</dd>
  </dl>
  

  At work, you can choose the appropriate list type to present information based on your specific needs and content type. Unordered lists, ordered lists, and defined lists are all useful tools that help structure and express content on a web page.

  <dl>
  	<dt>...</dt>
            <dd>...</dd>
            <dd>...</dd>
  
   	<dt>...</dt>
            <dd>...</dd>
   		  <dd>...</dd>
  
  </dl>
  
  

  1. <dl>...</dl>Label:

     • <dl>Tags are used to create definition lists.
     • Definition lists are often used to present information in the form of terms and explanations.

  2. <dt>...</dt>Label:

     • <dt>Tags are used to create the upper level item in the list, the term.
     • Terms are usually left-aligned in lists.

  3. <dd>...</dd>Label:

     • <dd>Tags are used to create lower-level items in the list, called Definitions.
     • Explanatory content is usually indented to the right relative to the corresponding term to distinguish it from the term.

  The code snippet in the example shows the definitions of both sets of terms and explanations. Each group includes a term ( <dt>...</dt>) and two related explanations ( <dd>...</dd>). This structure is ideal for creating glossaries, documentation, or other situations where you need to present terms and their definitions.

  sheet

  Tables in HTML5 are markup language elements used to display and organize data. Data can be organized in tabular form and presented on a web page, which makes the data easier to understand and compare

  Below is an explanation of the HTML tags used in the code:

  - <table>: This is the main tag that defines the table and is used to define the start and end of the table.

  • <tr>: This label represents the row of the table and is used to define each row of the table.
  • <th>: This label represents the header cell of the table and is used to define the header cell of the table. By default, text within labels is bold.
  • <td>: This label represents the content cell of the table and is used to define the content cell of the table.

  The code you provided also mentions that tables in HTML have no border lines by default. To add border lines to a table, you can use

  The border attribute of the label. For example, <table border="1">a one-pixel border line will be added to a table.

  在网页中，表格默认没有边框线，使用 border 属性可以为表格添加边框线
  

  Additionally, the code you provided mentions three sections that can be used to structure tables:

  • <thead>: This part represents the header of the table and is used to group the header cells of the table.
    - <tbody>: This part represents the main body of the table and is used to group the main content of the table.
  • <tfoot>: This section represents the footer of the table and is used to group summary or footer information of the table.

  By using these tags and sections, you can create well-structured, semantically clear HTML tables.

  <table border="1">
    <thead>
    <tr>
      <th>姓名</th>
      <th>语文</th>
      <th>数学</th>
      <th>英语</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>学生1</td>
      <td>98</td>
      <td>89</td>
      <td>98</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
      <td colspan="4">汇总信息</td>
    </tr>
    </tfoot>
  </table>
  

  

  Merge Cells:

  将多个单元格合并成一个单元格，以合并同类信息
  

  

  1. Determine the cells to merge.
  2. Keep the leftmost and topmost cells and add appropriate properties to indicate the number of cells to be merged.
     • To merge cells vertically (across rows), use the rowspan attribute on the top cell.
     • To merge cells horizontally (across columns), use the colspan attribute on the leftmost cell.
  3. Delete other merged cells.

  form

  Function: Mainly used to collect user information.
  Usage scenarios: login page, registration page, search area, etc.
  

  input tag (single tag)

  

  The information you provided is correct, <input>tags are one of the basic elements in HTML used to create user input controls. It is a single tag, typically used in forms, that can accept different types of input, depending on typethe value of the attribute. Here are some common typeproperty values ​​and their functions:

  1. text - text box:

  <input type="text" name="username">
  

  This creates a text box for entering a single line of text. Users can enter text, numbers, etc. there.

  2. password - password box:

  <input type="password" name="password">
  

  This creates a text box for entering the password, and the input will be displayed with symbols such as asterisks or dots to protect the user's privacy.

  3. radio - radio button:

  <input type="radio" name="gender" value="male"> Male
  <input type="radio" name="gender" value="female"> Female
  

  This creates two radio buttons and the user can only select one of them.

  4. checkbox - multi-check box:

  <input type="checkbox" name="hobbies" value="reading"> Reading
  <input type="checkbox" name="hobbies" value="traveling"> Traveling
  

  This creates two checkboxes, one or both of which the user can select.

  <input type="checkbox" name="hobbies" value="reading" checked> Reading
  <input type="checkbox" name="hobbies" value="traveling"> Traveling
  
  

  Because it is checked, it will be selected by default.

  
  Checkboxes are typically used to allow users to select multiple options from a set of options, such as selecting interests, selecting a file format to export, etc. Checkboxes that are selected by default can provide a preset selection, making it easier for users to operate.

  5. file - upload file:

  <input type="file" name="file">
  

  This creates a button for uploading files that the user can click to select the file to upload.

  The above are some common typeproperty values, each with specific functions and uses. Of course, there are other typevalues ​​that can implement different input methods, such as date, time, email, etc. Using appropriate typevalues ​​can provide users with a better input experience.

  input label placeholder text –> prompt information

  <input>Labels can use placeholderthe attribute to set placeholder text, which is a way of providing a hint as to what is expected in the input field. When the user clicks or focuses on the input field, the placeholder text disappears until the user starts typing.

  <input type="text" name="username" placeholder="请输入用户名">
  

  In this example, when the user sees the text box, they see placeholder text like "Please enter your username" to indicate that they should enter their username here.

  Placeholder text is useful for providing clear guidance and helping users understand the information they should provide in an input field. This is important to improve user experience and reduce input errors.

  <input type="...">
  <p></p>
  文本框：<input type="..." placeholder="提示信息">
  <br>
  密码框：<input type="password" placeholder="密码">
  

  

  Other properties

  The information you provide is <input>a description of some important properties of the tag:

  1. name attribute :

     • Function: Used to specify a name for the form control so that the corresponding data can be identified and processed when the form is submitted.
     • Within a group of radio buttons, identical nameattributes can group them together, ensuring that only one of them can be selected.

     For example:

     <input type="radio" name="gender" value="male"> Male
     <input type="radio" name="gender" value="female"> Female
     

  2. checked attribute :

     • Function: Used to set the default selected state of a form control (such as a radio button or check box).
     • Usually in abbreviated form, just write the attribute name, for example checked, it means it is selected by default.

     For example:

     <input type="checkbox" name="hobbies" value="reading" checked> Reading
     <input type="checkbox" name="hobbies" value="traveling"> Traveling
     

     In the above code, the "Reading" checkbox will be selected by default because it has a checkedproperty.

  3. value属性 . is <input>an important attribute of the label. It is used to define the value of the input field. Whether it is a text box, radio button, check box, etc., you can use this attribute to specify its value.

  for example:

  <input type="text" name="username" value="John Doe">
  

  In this example, valuethe property sets the text box's initial value to "John Doe." The user can see this value in the input box and can modify it at any time.

  For radio buttons and check boxes, valueproperties define the value that is sent when the form is submitted. For example:

  <input type="radio" name="gender" value="male"> Male
  <input type="radio" name="gender" value="female"> Female
  

  In this example, if the user selects the "Male" option and submits the form, genderthe field in the form data will be set to "male".

  In general, valueproperties are important for determining and processing values ​​entered or selected by the user.
  

  label label

  effect:

  • Provide labels or descriptive text for form elements to improve the form's usability and user experience.
  • By associating with form elements, better interaction effects are achieved and the click range is increased.

  experience:

  • Use <label>labels to bind the relationship between text and form controls to increase the click range of the form controls.

  Form controls that support label tags to increase the click range:

  • text box
  • Password box
  • upload files
  • Single box
  • Checkbox
  • Drop-down menu
  • text fields etc.

  Two common ways of writing:

  1. Writing method one:

     • The label tag only wraps the content, not the form controls.
     • Set the label forattribute value to be the same as the form control idattribute value.
     • Example:

       Gender:
       <input type="radio" name="gender" id="man">
       <label for="man">man</label>
       

  2. Writing method two:

     • Use label tags to wrap text and form controls, no forattributes are required.
     • Example:

       <label>
         <input type="radio" name="gender2">
         g
       </label>
       

  Text field: <textarea>It is a form control used for multi-line input text. It is a double label (with a start label and an end label).

  effect:

  • Used to allow users to enter multiple lines of text, usually in scenarios where users need to enter larger paragraphs or messages.

  Label:

  • <textarea>It is a double tag, which contains a start tag <textarea>and an end tag </textarea>.

  Example:

  <p>请输入您的评论：</p>
  <textarea>默认提示文字</textarea>
  

  Drag and drop function:

  • In most modern browsers, <textarea>a small triangle will appear in the lower right corner of the element that can be dragged to resize the text box. This allows the user to expand or shrink the text box as needed.

  Disable drag and drop:

  • If you want to disable dragging, you can use CSS to set <textarea>the dimensions of the element, for example:

  textarea {
        
        
    resize: none;
  }
  

  

  <style>
      textarea {
          
          
          resize: none;
      }
  </style>
  
  
  <p></p>
  <textarea>默认提示文字</textarea>
  

  become prompt text
  

  button

  1. <button>Element is used to create buttons, which can be used in forms and elsewhere.

  2. typeAttributes can specify the type of button. Common values ​​include:

     • submit:Submit button, when clicked, the form data will be submitted to the background (default function).
     • reset: Reset button, click to restore the form controls to their default values. It should be noted that this feature only takes effect in forms.
     • button: Ordinary button, without default behavior, usually needs to be used in conjunction with JavaScript.

  3. If typethe attribute is not specified, the default value is submit, that is, the button will be treated as a submit button.

  4. <button>You can use elements in your form instead of <input type="submit">and <input type="reset">.

  5. When used in a form <button>, you can set the attribute in the form tag actionto specify the address where the data is sent.

  6. In your example, a simple form is shown, including a username input box, a password input box, as well as a button for submit and a button for reset.

  Overall, your code clearly shows the usage of <button>the element and its different typeattributes. If you have any further questions or need help, please feel free to let me know!

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按钮示例</title>
  </head>
  <body>
  <h2>表单示例</h2>
  <form action="/submit" method="post">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
    <br><br>
  
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
    <br><br>
  
    <!-- 提交按钮 -->
    <button type="submit">提交</button>
  
    <!-- 重置按钮 -->
    <button type="reset">重置</button>
  </form>
  </body>
  </html>
  
  

  

  No semantic tags

  <div> 标签：

  • Purpose: Used to divide web page areas and perform layout.
  • Features:
    • Alone in a row, also known as the "big box".
    • Typically used to wrap a group of related elements in order to style or control their layout.
  • Example:

  <div>这是一个div标签</div>
  

  <span> 标签：

  • Purpose: Used to create a container within text that has no specific semantics and can be used to style or group text.
  • Features:
    • No line breaks, also known as "little boxes", are usually displayed on one line.
    • No interaction with form elements is provided.
  • Example:

  <span>这是一个span标签</span>
  

  Common character entities and their descriptions:

  • Space:  

    • Function: Used to insert a space in a web page that will not be folded or ignored.
    • Example:   Indicates inserting two spaces.

  • Less than sign: < :<

    • Function: Used to display the less than sign (<) in a web page instead of interpreting it as the beginning of an HTML tag.
    • Example: <Display less than sign.

  • Greater than sign: > :>

    • Function: Used to display the greater than sign (>) in a web page instead of interpreting it as the end of an HTML tag.
    • Example: >Indicates displaying a greater than sign.

  These character entities are very useful, especially when you need to display some special characters in the text to avoid conflicting with HTML tags or being interpreted.

  In addition, you mentioned the situation of entering multiple spaces in the code. This is because HTML will merge multiple consecutive spaces into one by default. If you need to retain multiple spaces, you can use character entities  .