Home > Developer > Web Develop
Paragraph Related tags <p><br>
Formatting Related tags <small><sub><sup><pre>
List Related tags <ol><ul><li>
Photo Related tags
Ultra-chain related labels <a>
Chapter Highlights: Paragraph-related tags, hyperlink tags
This chapter is difficult: Hyperlink Related tags <a>
First, paragraph related labelsTitle element:
The caption element is defined by label
HTML automatically adds a blank line before and after a heading element.
Paragraph:
The paragraph is defined with the <p> tag.
<p>this Isanother paragraph</p>
HTML automatically adds a blank line before and after a paragraph.
Line break:
Use the <br> tag when you want to end a line and don't wish to start a new paragraph. <br> tags can be forced to line up no matter where they are placed.
<p>This<br> is a para<br>graph with line breaks</p>
The <br> tag is an empty tag and it has no end tag.
Second, formatting related tagsFormatted text:
<body>
<b>this text isbold</b><br>
<strong>
This text is strong
</strong><br>
<big>
This text is big
</big><br>
<em>
This text is emphasized
</em><br>
<i>
This text is italic
</i><br>
<small>
This text is small
</small><br>
This text contains
<sub>
Subscript
</sub><br>
This text contains
<sup>
Superscript
</sup>
</body>
This example shows how the text can be formatted in HTML.
Third, list of related tagsUnordered list:
An unordered list is a sequence of items. Each item is now labeled (usually a black, small circle).
The unordered list starts with the <ul> tag. Each list item starts with <li>.
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Items in an unordered list can include paragraphs, line breaks, images, links, other lists, and so on.
There are sequence tables:
A sequence list is also a sequence of items. The figures are now marked with numbers.
The sequence list starts with the <ol> tag. Each list item starts with <li>.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
More examples:
There are different types of sequence tables:
<body>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<oltype= "A" >
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<oltype= "a" >
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<oltype= "I" >
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<oltype= "I" >
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
This example shows the different types of ordered lists.
Different types of unordered lists:
<body>
<ultype= "Disc" >
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<ultype= "Circle" >
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<ultype= "Square" >
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
This example shows the different types of unordered lists.
Iv. picture-related tagsIMG tags and src attributes:
In HTML, the image is defined by the tag.
is an empty tag, meaning that it has only attributes and no end tag.
To display an image on a page, you need to use the SRC attribute. "src" means "source". The value of the "src" property is the URL of the image you want to display.
syntax for inserting an image:
The URL points to the address of the image store. The URL for the image "Boat.gif" in the site "www.w3schools.com" subdirectory "Images" is as follows: "Http://www.w3schools.com/images/boat.gif".
When the browser encounters an IMG tag in the document, an image is placed. If you place an IMG tag between two paragraphs, a paragraph is displayed first, then this image, and finally another paragraph.
ALT attribute:
The ALT attribute is used to display an "interactive text" for an image. The value of the ALT attribute is user-defined.
The "alt" property tells the user the missing information when the browser loads the image, and the browser displays the "interactive text" instead of the image. It is a good practice to add ALT attributes to the images on the page, which helps to better display the information and is useful for plain text browsers.
Basic points of attention-useful tips:
If an HTML document contains 10 images, you need to load 11 files in order to display the page correctly. It takes time to load the image, so use the image with caution.
More examples:
Resizing images:
<body>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
Youcan make a picture larger or smaller changing the values in the "height" and "width" attributes of the IMG tag.
</p>
</body>
Background Image:
<bodybackground= "./images/background.jpg" >
<p>both gif and JPG files can be Usedas HTML backgrounds.</p>
<p>if the image is smaller than thepage, the image would repeat itself.</p>
</body>
Image Link:
<body>
<p>
You can also with an image as a link:
<a href= "Back.htm" >
</a>
</p>
</body>
Five, hyperlink-related labelsAnchor tag and href properties:
HTML uses anchor tags (<a>) to create a link to other files. Anchors can point to any resource on the network: HTML pages, images, sounds, movies, and so on.
To create an anchor syntax:
Anchors can point to any resource on the network: HTML pages, images, sounds, movies, and so on.
Tags <a> is used to create a link to the anchor, the href attribute is used to specify the address to connect to, and the anchor's start tag <a> and end tag </a> middle section will be displayed as hyperlinks.
This anchor defines a link to w3schools:
The above code shows the following effect in the browser:
Target property:
Using the target property, you can define where to open the link address.
The following code opens a new browser window to open the link:
Anchor label and Name property
The Name property is used to create a named anchor. With a named anchor, you can let the link jump directly to a section of a page without the user opening that page and then looking slowly from top to bottom.
The following is the syntax for a named anchor:
You can assign a name to the anchor as long as you want. The following line of code defines a named anchor:
You should have noticed that there is nothing unusual about the way the named anchors are displayed.
To link directly to the "Tips" section, add a "#" to the URL and the anchor name, just like this:
A named anchor that links to a section of this page is written like this:
Basic points of attention-useful tips:
Try to add a left slash after the subdirectory path. If you write like this: href= "http://www.w3schools.com/html" will generate two HTTP requests to the server, because the server appends a left slash to create a new request, like this: href= "/http Www.w3schools.com/html/".
Named anchors are often used to create chapter tables at the beginning of large documents. Each chapter of this page is added with a named anchor, and links to these anchors are placed at the top of the page.
If the browser cannot find the specified named anchor, it will go to the top of the page without displaying any error prompts.
More examples:
To open a link in a new browser window:
<body>
<a href= "lastpage.htm" target= "_blank" >last page</a>
<p>
If you set the target attribute of a link to "_blank",
The link would open in a new window.
</p>
</body>
Click Hyper-Connect to open a new window:
Link to a location on this page:
<body>
<p>
<a href= "#C4" >
See also Chapter 4.
</a>
</p>
<p>
<p>this Chapter explains BA Blabla</p>
<p>this Chapter explains BA Blabla</p>
<p>this Chapter explains BA Blabla</p>
<aname= "C4" >
<p>this Chapter explains BA Blabla</p>
</body>
Click Hyper-Connect
The use of basic HTML elements
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
