HTML Notes (iv)-images, tables, lists, chunks

Last Update:2018-01-28 Source: Internet

Author: User

Tags html notes

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

First, the image

1. Image label () and Source properties (<Src>)

In HTML, the image is defined by the tag, is an empty label, it contains only attributes, and there is no closed label.

To display an image on a page, you need to use the source attribute (SRC). The value of the Source property is the image URL address.

The syntax for defining an image is:

url" alt= "some_text" >

2. alt attribute

The ALT attribute is used to define a string of prepared, replaceable text for an image.

The value of the replacement Text property is user-defined.

When the browser fails to load the image, the replacement Text property tells the reader what information they have lost. At this point, the browser will display this alternative text instead of the image.

3. Set the height and width of the image

Height (height) and width (width) properties are used to set the image heights and widths.

The default units for property values are pixels:

4. Create an image map

<body>

<p> Click on the sun or other planets to notice the change:</p>

</body>

5. HTML Image Tag

Label description

Defining images

<map> Defining image Maps

<area> define clickable areas in an image map

Second, form

1. HTML table

Label	Describe
<table>	Defining tables
<th>	Table header for defining tables
<tr>	Define rows for a table
<td>	Defining table Cells
<caption>	Defining table Headings
<colgroup>	Define Groups for table columns
<col>	Define properties for a table column
<thead>	Define a header for a table
<tbody>	Defining the body of a table
<tfoot>	Define a footer for a table

2. Table cells that span rows or columns

<body>

<table border= "1" >
<tr>
<th>Name</th>
<th colspan= "2" >Telephone</th>
</tr>
<tr>
<td>bill gates</td>
<td>555 854</td>
<td>555 855</td>
</tr>
</table>

<table border= "1" >
<tr>
<th>first name:</th>
<td>bill gates</td>
</tr>
<tr>
<th rowspan= "2" >Telephone:</th>
<td>555 854</td>
</tr>
<tr>
<td>555 855</td>
</tr>
</table>

</body>

Third, List

1. HTML unordered list

An unordered list is a list of items that are marked with a bold dot (typically a small black circle).

Unordered list Use <ul> tags

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

2. HTML ordered list

Similarly, a sequence table is a list of items that are marked with numbers. The sequence list starts with the <ol> tag. Each list item starts with the <li> label.

List item items are marked with numbers.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

3. HTML Custom List

<dl>
<dt>Coffee</dt>
<dd>-Black Hot drink</dd>
<dt>Milk</dt>
<dd>-White Cold drink</dd>
</dl>

4. HTML List Label

Label	Describe
<ol>	Defining an ordered list
<ul>	Defining unordered Lists
<li>	Defining list Items
<dl>	Definition List
<dt>	customizing list items
<dd>	Description of the Custom list item

Iv. Block

HTML can combine elements with <div> and <span>.

1. HTML Chunk elements

Most HTML elements are defined as block-level elements or inline elements .

Block-level elements usually start (and end) with a new line when the browser is displayed.

Example:

2. HTML inline function

Inline elements typically do not start with new lines when they are displayed.

Example: <b>, <td>, <a>,

3. html<div> elements

HTML <div> elements are block-level elements that can be used to combine containers for other HTML elements.

The <div> element has no specific meaning. In addition, because it belongs to a block-level element, the browser displays the folded line before and after it.

If used with CSS, the,<div> element can be used to set style properties on large chunks of content.

Another common use of the <div> element is the document layout. It replaces the old-fashioned way of using tables to define layouts. Using the <table> element for document layout is not the correct use of the table. The function of the <table> element is to display tabular data.

4. html<span> elements

HTML <span> elements are inline elements that can be used as a container for text

The <span> element also has no specific meaning.

When used with CSS, the,<span> element can be used to set style properties for some text.

5. HTML Group Tags

Label	Describe
<div>	Defines the area of the document, block-level (Block-level)
<span>	Used to combine inline elements within a document, inline elements (inline)

HTML Notes (iv)-images, tables, lists, chunks

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More