Learning HTML is about knowing which tags are there and how to use them, and the rest is about mixing and nesting them.

1. The use of HTML image IMG tag

The <img> tag inserts an image on a web page. It is a stand-alone tag that defines the address of the image with the “SRC” attribute, the text that appears when the image fails to load with the “Alt” attribute, and support for search engines and screen reading software for the blind.

<img SRC ="images/pic.jpg" Alt =" product image "/>Copy the code

Absolute path and relative path

For example, to insert images into external files on a web page, you need to define the reference address of the file. Reference to external files also includes reference to external stylesheets, javascript, etc. Reference address can be divided into absolute address and relative address.

  • Absolute address: The location of the file relative to the disk location
  • Relative address: The location of the referenced file relative to the referenced file itself

Absolute addresses do not find files due to disk and top-level directory changes during a global file migration. Relative paths do not have this problem. Relative path definition tips:

  • JPG in the current directory. For example,./pic. JPG indicates the pic. JPG image in the current directory, which can be omitted.
  • “.. / indicates the upper-level directory under the current file directory, for example.. “/images/pic.jpg” represents the picture in pic.jpg in the images folder in the directory one level above the current directory.

2.HTML href tag usage

The <a> tag can define a link address on the web page, the SRC attribute defines the address to jump to, and the title attribute defines the text box that pops up when the mouse hovers.

<a href="#"></a> <! -- # means link to top of page -->
<a href="http://www.baidu.com/" title="Google it.">Baidu's home page</a>
<a href="2.html">Test page 2</a>
Copy the code

Define a scrolling jump within a page

An element with “ID” or “name” defined in the page can be linked to its page scroll position through the A tag. The premise is that the page should be high enough with scroll bars and the element should not be at the top of the page, otherwise the page will not scroll.

<a href="#mao1"> </a>...... . <h3 id="mao1"> </h3>Copy the code

3.HTML list tag use

3.1 Ordered List

To define a numbered list of contents on a web page, you can use < OL > and <li> together to achieve the code as follows:

List < ol > < li > text < / li > < li > list words 2 < / li > < li > text list three < / li > < / ol >Copy the code

Lists generated on web pages are numbered 1, 2, and 3 for each item. Ordered lists are rarely used in actual development.

3.2 Unordered List

To define an unnumbered list of contents on a web page, you can use <ul> and <li> together to achieve the following code:

List < ul > < li > text < / li > < li > list words 2 < / li > < li > text list three < / li > < / ul >Copy the code

On the web page to generate a list of each project will have a small icon, the small icon display effect is different in different browsers, so generally gets rid of the default ICONS with style, if you need icon, can use the style custom ICONS, so as to achieve in different browsers display effect is the same, the actual development in general in this list.

3.3 Defining a List

Definition lists are often used to define terms. The < DL > tag represents the list as a whole. The <dt> tag defines the topic of the term. The < DD > tag is an explanation of the term. A < DL > can have more than one title and explanation as follows:

< h3 > front three large < / h3 > < dl > < dt > HTML < / dt > < dd > is responsible for the structure of the page < / dd > < dt > CSS < / dt > < dd > is responsible for the performance of the page < / dd > < dt > javascript < / dt > < dd > is responsible for the behavior of the page < / dd > </dl>Copy the code

4. Mixed use cases for lists, images, and links

<! DOCTYPEhtml>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Mix lists, images, and links</title>
</head>
<body>
	
	<h1>The picture</h1>
	<! SRC ="./images/002.jpg".
	<img src="./abc.png" alt="Any picture"  />	
	<a href="http://www.baidu.com" title="Google it.">Go to baidu home page</a>
	
	
	<h1>An ordered list</h1>
	<! -- ol>li*3 -->
	<ol>
		<li>html</li>
		<li>css</li>
		<li>javascript</li>
	</ol>
	

	<h1>Unordered list</h1>
	<!-- ul>(li>a{新闻标题})*3  -->
	<ul>
		<li><a href="#">Headline 1</a></li>
		<li><a href="#">Headline 2</a></li>
		<li><a href="#">Headline 3</a></li>
	</ul>


	<h1>Define a list</h1>
	<! -- dl>(dt+dd)*3 -->
	<dl>
		<dt>html</dt>
		<dd>Responsible for page structure</dd>
		<dt>css</dt>
		<dd>Responsible for page performance</dd>
		<dt>javascript</dt>
		<dd>Responsible for page behavior</dd>
	</dl>
	
</body>
</html>
Copy the code

5. Use the HTML table tag

5.1 Table Common Labels

  • 1, table tag: declare a table
  • Tr tag: Defines a row in the table
  • Td and TH tags: define a cell in a row. Td represents normal cell and TH represents header cell

5.2 Common Attributes in the table tag:

  • 1. Border defines the border of the table
  • Cellpadding defines the distance between the contents of the cell and the border
  • Cellspacing defines spacing between cells
  • 4, set the align cell contents of horizontal alignment, setting values are: left | center | right
  • 5, valign set the cell contents of vertical alignment top | middle | bottom
  • 6. Colspan sets cell horizontal merge
  • Rowspan sets cell vertical merge
  • Border-collapse: Collapse sets border merge and makes a table with borders one pixel wide

5.3 Traditional layout of tables:

The traditional layout method is to use table to do the overall layout of the page, the layout skills are summarized as follows:

  • 1. Define the table width and height. Set border, cellpadding, and cellspacing to 0
  • 2. A table is nested inside a cell
  • Align elements in cells and nested tables with align and valign
  • 4. Set the style of the elements in the cell using properties or CSS styles

Traditional layout currently used:

  • 1. Quickly create an HTML page for the presentation
  • 2. EDM production for commercial promotion (advertisement mail)
<! DOCTYPEhtml>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>form</title>
</head>
<body>
	<h1>form</h1>

	<table border="1" cellpadding="20" cellspacing="20">
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
	</table>

	<table border="1" width="300" height="200" align="center">
		<tr>
			<th>1</th>
			<th>2</th>
			<th>3</th>
		</tr>

		<tr>
			<td align="center">1</td>
			<td align="center">2</td>
			<td align="center">3</td>
		</tr>

		<tr>
			<td valign="top" align="center">1</td>
			<td>2</td>
			<td>3</td>
		</tr>

		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>

	</table>

	<br />
	<br />
	<br />

	<! -- table>(tr>td*5)*6 -->
	<table border="1" width="700" height="300" align="center">
		<tr>
			<td colspan="5">Basic situation</td>			
		</tr>
		<tr>
			<td width="15%"></td>
			<td width="25%"></td>
			<td width="15%"></td>
			<td width="25%"></td>
			<td rowspan="5"><img src="images/person.png" alt="People pictures"></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>			
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			
		</tr>
	</table>

</body>
</html>
Copy the code