Home > Web Front-end > HTML Tutorial > Web page HTML ordered list ol and unordered list ul_HTML/Xhtml_web page production

Web page HTML ordered list ol and unordered list ul_HTML/Xhtml_web page production

WBOY
Release: 2016-05-16 16:44:02
Original
2070 people have browsed it

Lists for organizing data

After learning so many HTML tags that control the display of web pages, readers can initially create pure article pages. This section studies the list elements in HTML. The list form plays a large role in website design. The displayed information is very neat and intuitive, making it easy for users to understand. In the following CSS style learning, the advanced functions of list elements will be used extensively.

文本框:
图4.17  列表元素的结构

4.4.1 Structural composition of the list

The HTML list element is a structure enclosed by a list tag, and the included list items are composed of

  • . The specific structure is shown in Figure 4.17.

    4.4.2 Making an unordered list

    As the name suggests, an unordered list is a list in which the list items in the list structure are not in order. Most lists in web applications use unordered lists, and their list tags use

      . The writing method is as follows:

      • List item one
      • List item two
      • List item three
      • List item four
      • List item five

      4.4.3 Making an ordered list

      As the name suggests, an ordered list is a list in which the list items in the list structure are in order. There can be various sequence numbers from top to bottom, such as 1, 2, 3 or a, b, c, etc. Create a web page file in the D:web directory, name it ul_ol.htm, and write the code as shown in Code 4.17.

      Code 4.17 List settings: ul_ol.htm

      List settings

      Web front-end technology

      • HTML
      • CSS
      • JavaScript
      • FLASH

      Learning about web backend

      1. ASP
      2. ASP.net
      3. PHP
      4. CGI
      5. Ruby
      6. Python

      Enter http://localhost/ul_ol.htm in the browser address bar, and the browsing effect is as shown in Figure 4.18.

      Figure 4.18 List settings

      Related labels:
      source:php.cn
      Statement of this Website
      The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
      Popular Tutorials
      More>
      Latest Downloads
      More>
      Web Effects
      Website Source Code
      Website Materials
      Front End Template