Design HTML5 lists and hyperlinks

In web pages, most of the information is a list structure, such as menu bar, graphic list, category navigation, news list, column list, etc. HTML5 defines a set of list tags to achieve reasonable layout of web page information through the list structure. In addition, web pages also contain a large number of hyperlinks, through which web pages and locations can be jumped. Hyperlinks can connect the entire website and the Internet together. List structures are closely related to hyperlinks and often need to be used together.

1. Definition list

1.1, unordered list

An unordered list is a list structure without sorting, using

tag definition, in
The tag can contain multiple
• List items defined by the tag.
  [Example 1] Use the unordered list to define the solution method of the quadratic equation in one variable. The preview effect is shown in the figure below.

   <h1>Solving quadratic equations</h1>
      <p>There are four methods for solving quadratic equations of one variable:</p>
      <ul>
          <li>direct square method</li>
          <li>Preparation method</li>
          <li>formula method</li>
          <li>factoring method</li>
      </ul>
  

  

  Unordered lists can be divided into one-level unordered lists and multi-level unordered lists. After a one-level unordered list is parsed in the browser, a small black dot modifier will be added in front of each list item, while a multi-level unordered list will adjust the modifiers of the list items according to the number of levels.

  [Example 2] Design a three-layer nested multi-level list structure in the page. The display effect of the browser’s default parsing is as shown in the figure below.

   <ul>
          <li>First level list item 1
              <ul>
                  <li>Secondary list item 1</li>
                  <li>Secondary list item 2
                      <ul>
                          <li>Level 3 list item 1</li>
                          <li>Level 3 list item 2</li>
                      </ul>
                  </li>
              </ul>
          </li>
          <li>First level list item 2</li>
      </ul>
  

  
  Unordered lists are gradually indented in nested structures as the level of the list they contain increases, and different modifiers change as the level of the list increases. Reasonable use of list structures can make the structure of the page clearer.

  1.2, ordered list

  An ordered list is a list structure that cares about the sorting position. Use

  1. tag definition, which contains multiple
     

  2. List item tag. In columns that emphasize the ordering of items, it is more scientific to use ordered lists, such as news lists (sorted according to news time), rankings (emphasis on the ranking of items), etc.

  [Example 1] List structure is relatively common in web pages, and its application scope is relatively broad. It can be news lists, sales lists, navigation, menus, charts, etc. The following code shows three list application styles, and the effect is as shown in the figure below.

   <h1>List application</h1>
      <h2>Baidu Internet News Classification List</h2>
      <ol>
          <li>Netizens are discussing online literature: Gradually becoming mainstream or a sudden meteor?</li>
          <li>Does the e-mail envelope kill the router? Consumers question: forced transactions</li>
          <li>College Student Entrepreneurship Club helps college students start their own businesses</li>
      </ol>
      <h2>Welding machine product model list</h2>
      <ul>
          <li>DC argon arc welding machine series</li>
          <li>Air plasma cutting machine series</li>
          <li>Argon welding/hand arc/cutting three-purpose machine series</li>
      </ul>
      <h2>Site navigation menu list</h2>
      <ul>
          <li>Weibo</li>
          <li>Community</li>
          <li>news</li>
      </ul>
  

  
  [Example 2] Ordered lists can also be divided into one-level ordered lists and multi-level ordered lists. When the browser parses by default, the ordered list is represented by Arabic numerals and indented, as shown in the figure below.

   <ol>
          <li>First level list item 1
              <ol>
                  <li>Secondary list item 1</li>
                  <li>Secondary list item 2
                      <ol>
                          <li>Level 3 list item 1</li>
                          <li>Level 3 list item 2</li>
                      </ol>
                  </li>
              </ol>
          </li>
          <li>First level list item 2</li>
      </ol>
  

  
  The

  tag contains three more practical attributes. These attributes are also supported by HTML5, and reversed is a new attribute. Specific instructions are shown in the following table:
  
  [Example 3] Design an ordered list to display in descending order. The starting value of the sequence is 5, and the type is uppercase Roman numerals. The effect is as shown in the figure below:

   <ol type="I" start="5" reversed >
          <li>Yellow Crane Tower <span>Cui Hao</span></li>
          <li>Send Yuan Er to Anxi <span>Wang Wei</span></li>
          <li>Liangzhou Ci (Yellow River Far Away) <span>Wang Zhihuan</span></li>
          <li> Climbing the Stork Tower <span>Wang Zhihuan</span></li>
          <li> Climbing Yueyang Tower <span>Du Fu</span></li>
      </ol>
  

  

  1.3. Description list

  The description list is a special structure, which includes two pieces of content, the entry and the explanation, and the description of the tags included is as follows:

  • …

    : A list of identifier descriptions.

  • …
    : Identifies the entry.

  • …

    : Identification explanation.

  [Example 1] The following code defines a list of Chinese medicine entries.

   <h2>List of Chinese medicine entries</h2>
      <dl>
          <dt>Danpi</dt>
          <dd> is the root bark of peony, a perennial deciduous shrub of Ranunculaceae. Produced in Anhui, Shandong and other places. Harvested in autumn and sun-dried. Use raw or fried. </dd>
      </dl>
  

  

  In the above list structure, “paeonia” is an entry, and “is the root bark of peony, a perennial deciduous shrub of the Ranunculaceae family. Produced in Anhui, Shandong and other places. Harvested in autumn, dried in the sun. Used raw or stir-fried. ” is a description (or explanation) of the entry.

  [Example 2] The following code uses the description list to display the explanation of two idioms.

   <h1>List of idiom entries</h1>
      <dl>
          <dt>Tell me everything you know and tell me everything</dt>
          <dd>Speak what you know, and speak without reservation. </dd>
          <dt>A wise man has a lot of worries, but he will make mistakes</dt>
          <dd>No matter how smart a person is, in many considerations, there will be individual mistakes. </dd>
      </dl>
  

  Tip: Describe the list of

  and

  There are single form, multiple form and multiple form in the form of label combination.
  
  
  
  
  The single form is as follows:

   <dl>
           <dt>Description list title</dt>
           <dd>Description list content</dd>
      </dl>
  

  

  One belt and multiple forms are as follows:

   <dl>
           <dt>Description List Title 1</dt>
           <dd>Description list content 1</dd>
           <dt>Description List Title 2</dt>
           <dd>Description list content 2</dd>
       </dl>
  

  
  [Example 3] The following description list contains two entries, which are used to introduce the types of flowers in the flower garden. The list structure code is as follows:

   <div class="flowers">
          <h1>Flowers in the flowerbed</h1>
          <dl>
              <dt>Rose</dt>
              <dd>Rose, also known as Red Rose, is a deciduous shrub in the family Rosaceae. Stems are prickly. There are two kinds of flowers, purple and white, which resemble roses and roses. Generally used as preserves,
  Ingredients for pastry and other foods. Both petals and roots are used for medicine, and purple roses are mostly used for medicine. </dd>
              <dt>Azalea</dt>
              <dd>One of the top ten famous flowers in China. Among all ornamental flowers and trees, it can be said to have both beautiful flowers and leaves, suitable for both ground and potted plants, and is the most widely used. ...</dd>
          </dl>
      </div>
  

  When the list contains a content set, a title can be added appropriately, and the demonstration effect is shown in the figure below.
  

  Note: The description list is not limited to defining the interpretation relationship of terms. Search engines believe that dt contains abstract, general or concise content, and the corresponding dd contains specific, detailed or vivid descriptions associated with the dt content. For example:

   <dl>
          <dt>Software name</dt>
          <dd>Little Times 2.6.3.10</dd>
          <dt>App size</dt>
          <dd>2431 KB</dd>
          <dt>Software language</dt>
          <dd>Simplified Chinese</dd>
      </dl>
  

  

  2. Define hyperlink

  Hyperlinks generally include two parts: link target and link label. Goals are defined via hrefs, specifying what happens when a visitor clicks on a link. A tab is what a visitor sees in their browser, and activating a tab takes them to the target of the link.

  2.1, common links

  Here’s how to create a link to another web page:

   <a href="page.html ">Tag text</a>
  

  Among them, page.html is the URL of the target web page. The label text is highlighted by default, and when the visitor activates it, they are taken to the page pointed to by page.html.

  An img element can be added instead of text (or together with text) as a label, for example:

   <a href="page.html "><img src="images/1.jpg" /></a>
  

  It is also possible to create a link to another website page, for example:

   <a href="http://www.w3school.com.cn" rel="external">W3School</a>
  

  Replace the value of href with the target URL address, the rel attribute is optional, even without it, the link will work as usual. However, for links pointing to another website, it is recommended to include this setting. Additionally, you can add a different style to links with rel=”external” to inform visitors that this is a link to an external site.

  When a visitor moves their mouse over a link to another website, the target URL appears in the status bar, and the title text (if specified) appears next to the link.

  Tip: Web pages can be navigated via the keyboard. Each time you press the Tab key, the focus will shift to the next link, form control, or image map that appears in the HTML code. Each time Shift+Tab is pressed, the focus shifts forward. This order does not necessarily match the order it appears on the web page, as the page’s CSS layout may be different. By using the tabindex attribute, you can change the order of tab key access.

  The tag contains many attributes, among which the attributes supported by HTML5 are shown in the following table:
  
  Tips: If you do not use the href attribute, you cannot use the download, hreflang, media, rel, target and type attributes. By default, the linked page will be displayed in the current browser window. You can use the target attribute to change the window in which the page is displayed.

  The following code defines a link text that will display the Baidu homepage in a new tab when the text is clicked:

   <a href="https://www.baidu.com/" target="_blank">Baidu</a>
  

  Note: In HTML4, tags can define links or anchors. But in HTML5, tags can only define links. If the href attribute is not set, it is just a placeholder for the link and no longer an anchor.
  

  2.2, block link

  HTML5 relaxes the restrictions on the use of tags, allowing links to contain any type of element or group of elements, such as paragraphs, lists, entire articles, and blocks. Most of these elements are blocks. Level elements, also known as block links. In HTML4, links can only contain images, phrases, and inline elements that mark text phrases, such as em, strong, cite, etc.

  Note: Links cannot contain other links, audio, video, form controls, iframes and other interactive content.

  [Example] Below is a short section of the article as a link to the complete article. If you want this small piece of content and the prompt to form a link to the full article page, you should use block links. You can use CSS to make some text appear underlined, or not all text to appear underlined.

   <a href="pages.html">
          <h1>Heading text</h1>
          <p>paragraph text</p>
          <p>More information</p>
      </a>
  

  
  It is generally recommended to put the most relevant content at the beginning of the link, and not to put too much content in one link. For example:

   <a href="pioneer-valley.html">
          <h1>Heading text</h1>
          <img src="images/1.jpg" width="143" height="131" alt="1" />
          <img src=" images/2.jpg" width="202" height="131" alt="2" />
          <p>paragraph text</p>
      </a>
  

  Note: Don’t overuse block links, try to avoid wrapping a large section of content with one link.

  2.3, Anchor link

  An anchor link is a link that points to a specific location within the same page or another page. For example, setting an anchor point at the bottom of a very long page can jump to the top of the page after clicking, which avoids the trouble of scrolling up and down.

  Here’s how to create an anchor link.

  Step 1, create the anchor point for the link. Any element defined with an ID value can be used as an anchor tag, and can define an anchor link pointing to the location point. Note that when naming the ID anchor of the page tag, do not contain spaces, and do not place it in an absolute positioning element.

  Step 2: Define links at different locations on the current page or other pages, and set the href attribute for the tag. The attribute value is “# + anchor name”, such as entering “#p4”. If you link to a different page, such as test.html, enter “test.html#p4”, you can use an absolute path or a relative path. Note that anchor names are case-sensitive.

  [Example] Define an anchor link to link to different locations on the same page, the effect is shown in the figure below. After clicking the text link at the top of the page, it will jump to the location of picture 4 at the bottom of the page.

   <body>
      <p><a href="#p4">View image 4</a></p>
      <h2>Picture 1</h2>
      <p><img src="C:\Users\yyb\Desktop\Project Documentation\Programming Documentation\log\image\1.jpg" /></p>
      <h2>Picture 2</h2>
      <p><img src="C:\Users\yyb\Desktop\Project Documentation\Programming Documentation\log\image\2.jpg" /></p>
      <h2>Picture 3</h2>
      <p><img src="C:\Users\yyb\Desktop\Project Documentation\Programming Documentation\log\image\3.jpg" /></p>
      <h2 id="p4">Picture 4</h2>
      <p><img src="C:\Users\yyb\Desktop\Project Documentation\Programming Documentation\log\image\4.jpg" /></p>
      <h2>Picture 5</h2>
      <p><img src="C:\Users\yyb\Desktop\Project Documentation\Programming Documentation\log\image\5.png" /></p>
      <h2>Picture 6</h2>
      <p><img src="C:\Users\yyb\Desktop\Project Documentation\Programming Documentation\log\image\6.jpeg" /></p>
      </body>
  

  

  

  2.4, target link

  The target of the link can be a web page, a location, a picture, an email address, a file, an FTP server, or even an application or a JavaScript script.

  [Example 1] If the browser can recognize the target type of the link pointed to by the href attribute, it will be displayed directly in the browser; if the browser cannot recognize the type, the “File Download” dialog box will pop up, allowing the user to download it locally, as shown below shown.

   <p><a href="images/1.jpg">Link to image</a></p>
      <p><a href="demo.html">Link to web page</a></p>
      <p><a href="demo.docx">Link to Word document</a></p>
  

  
  Define the link address as an email address, that is, an email link. The email link can provide users with convenient feedback and communication opportunities. When the viewer clicks the email link, the client browser’s default email handler will automatically open. The recipient’s email address is automatically updated with the address specified in the email link, and the viewer does not need to enter it manually.

  Here’s how to create an email link:
  Set the href attribute for the tag. The attribute value is “mailto: + email address + ? + subject= + email subject”, where subject represents the email subject and is an optional item, for example, mailto :[email protected]?subject=Comments and Suggestions.

  [Example 2] The following uses tags to create email links:

   <a href="mailto:[email protected]">[email protected]</a>
  

  Note: If “#” is set for the href attribute, it means an empty link. Clicking the empty link will not change the page.

   <a href="javascript:alert("Thank you for your attention, the voting has ended.");">I want to vote</a>
  

  If a JavaScript script is set for the href attribute, clicking on the script link will execute the script:

   <a href="javascript:alert("Thank you for your attention, the voting has ended.");">I want to vote</a>
  

  2.5, download link

  HTML5 adds a new download attribute, which can be used to force the browser to perform a download operation instead of directly parsing and displaying it.

  [Example] Compare the difference between using download and not using download in the link.

   <p><a href="images/1.jpg" download >Download images</a></p>
      <p><a href="images/1.jpg" >Browse Images</a></p>
  

  Tip: Currently, only Firefox and Chrome browsers support the download attribute.

  2.6, image hotspot

  An image hotspot is to define a link for a local area of an image. When the hotspot area is clicked, the link will be activated and jump to the specified target page or location. Image hotspots are a special form of links that are often used to set up multi-hotspot navigation on images.

  Use

  tags to define image hotspots, as follows:
  • 
: Define the hotspot area. This tag contains the id attribute, which can define the ID of the hotspot area, or define the optional name attribute. It can also be used as a handle to bind to the hotspot image. The usemap attribute in can refer to the id or name attribute in
    (according to the browser), so it should be added to
    Add id and name attributes.
  • 
: defines the area in the image map, the area element must be nested in the
    tag. This tag contains a must-set attribute alt, which defines the replacement text for the hotspot area. This tag contains several optional attributes whose descriptions are shown in the table below.
    
    [Example] The following code specifically demonstrates how to define multiple hotspot areas for a picture.

   <img src="images/china.jpg" width="618" height="499" border="0" usemap="#Map">
      <map name="Map">
          <area shape="circle" coords="221,261,40" href="show.php?name=Qinghai">
          <area shape="poly" coords="411,251,394,267,375,280,395,295,407,299,431,307,436,303,429,284,431,271,426,255" href=
  "show.php?name=Henan">
          <area shape="poly" coords="385,336,371,346,370,375,376,385,394,395,403,403,410,397,419,393,426,385,425,359,418,343,
  399,337" href="show.php?name=Hunan">
      </map>
  

  2.7, frame link

  HTML5 no longer supports frameset frames, but still supports iframe floating frames. The floating frame can control the size of the window freely, and the window can be inserted at any position in accordance with the layout of the web page.

  The usage of using iframe to create a floating frame is as follows:

   <iframe src="URL">
  

  src represents the path of the webpage displayed in the floating frame, which can be an absolute path or a relative path.

  [Example] The following code links to Meituan in a floating frame, and the display effect is shown in the figure below.

   <iframe src="//i2.wp.com/tech.meituan.com//page/19.html"></iframe>
  

  
  By default, the width and height of the floating frame are 220px by 120px. If you need to adjust the size of the floating frame, you should use CSS styles. The tag contains multiple attributes, among which the attributes supported or newly added by HTML5 are shown in the following table: