HTML Basics_General Tags, Common Tags and Tables

Part 1 HTML

<html> -- start tag

<head>

Control information on the web page

<title>Page Title</title>

</head>

<body>

Content displayed on the page

</body>

</html> -- End tag

Comment

Properties of body:

bgcolor page background color

text color (specifies the color of all text)

topmargin top margin

leftmargin left margin

rightmargin right margin

bottomargin bottom margin

background

Note: Choose between background color and background wallpaper.

1.1. General tags 1.1.1. Format control tags

<font color="" face="" size=""></font> controls font; color="##FF0000"; face, font; size, font size.

<b></b> Bold font

Tilt

<u></u> Underline

<strong></strong> Bold font (for emphasis, to strengthen the tone)

<em></em> Italic font (for emphasis, tone of voice)

<center></center> Center

Note: If there are other characters before and after <center></center> by default, they will be wrapped before and after to ensure that it is a whole and then displayed in the center.

<br> or <br /> is equivalent to Enter (shortcut key: shift + enter)

  To indicate a space, you can also press ctrl+shift+space in the design page.

1.1.2 Content container tags

<h1></h1>…<h6></h6> Titles (will wrap automatically). HTML headings are defined using tags such as <h1> - <h6>.

Note: The importance of <h1></h1>…<h6></h6> decreases in sequence, and they increase or decrease based on the existing default size. If there are other lines before and after, they will be wrapped and left blank to ensure that they are a whole.

<p></p> Paragraph tags (blank lines between paragraphs)

Note: If there are other characters before and after <p></p>, they will be wrapped and left blank to ensure that they are a complete unit.

<div></div> layer tag (occupies one line by default)

<span></span> layer tags (the default space is how much space it takes up)

<ol type="1"> -- Ordered list, serial number is 1, 2, 3..., the serial number format can be changed in quotation marks

<li>Contents</li>

</ol>

Note: By default, it comes with a serial number and line break. If there are other lines before and after, they will be wrapped before and after, and a blank line will be left to ensure that it is a whole.

If the above "ol" is changed to "ul", it will become an unordered list, which does not have its own line break function.

1.2. Common tags

Hyperlink Tags

<a href="hyperlink address" target="_blank">Hyperlink text</a> --href (hyperlink reference); _blank means opening in a new window.

Step 1: Label the anchor points. <a name=""></a>

Step 2: Make an anchor link. <a href="value of the target link's name"></a>

Image Tags

<img src="Image address" alt="Text" width="" height="" /> --Just set one of the height and width, and the displayed image will be scaled proportionally. When the image cannot be loaded, alt displays text, which can also help search engines to search.

<img /> must appear alone.

1.3. Table

<table></table> Table

width: width. Can be expressed in pixels or percentage. 960 pixels are commonly used.

border: border. The commonly used value is 0.

cellpadding: The margin between the content and the cell border. The commonly used value is 0.

cellspacing: The spacing between cells. The commonly used value is 0.

align: Alignment.

bgcolor: background color.

background: background image.

<tr></tr> line

align: The horizontal alignment of the content of a line

valign: The vertical alignment of the contents of a row

height: row height

bgcolor: background color

background: background image

<td></td> Cell

<th></th> Header, the cell content is automatically centered and bolded

align: Alignment of the cell content

valign: The vertical alignment of the cell's contents

width: cell width

height: cell height

bgcolor: background color

background: background image

Content must be placed in cells, cells must be placed in rows, and rows must be placed in tables. When setting the cell row height or column height, the corresponding row or column will be affected at the same time

Cell merging: (It is recommended to use table nesting as much as possible)

colspan="n"——Merge cells in the same row (subtract the corresponding columns when writing code later)

rowspan="n"——Merge cells in the same column (subtract the corresponding column from the second row)

Based on the above basic knowledge, the program code and running results are given below

Program code:

XML/HTML CodeCopy content to clipboard

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns = "http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
< title > 123WORDPRESS.COM </ title >
</ head >
< body bgcolor = "#00FFCC" >
< name = "top" > </ a >
Today < br >
Weather /> Not bad. < br />
< br />
< font size = "45" color = "red" >
Font format control tags: < br />
< b > Text bold method 1, b tag </ b > < br />
< strong > Text bold method 2, strong tag </ strong > < br />
< i > Text tilt mode 1, i tag </ i > < br />
< em > Text tilt mode 2, em tag </ em > < br />
< u > Underline text, u tag </ u >
123 < center > Center tag, center, by default, if there are other tags before and after, line breaks will be executed to ensure that it is a whole, and then it will be displayed in the center. </ center > 456 < br />
< br />
Content container tag: < br />
123 < p > p tag, paragraph tag, if there are other tags before and after, execute line breaks before and after, and leave a blank line to ensure that it is a whole, </ p > 456
< ol > ol ordered list
< li > Default comes with serial number </ li >
< li > Self-wrapped </ li >
< li > If there are other lines before and after, wrap them before and after, and leave a blank line to ensure that it is a whole. </ li >
</ ol >
<ul> ul unordered list
< li > No serial number by default </ li >
< li > Self-wrapped </ li >
< li > If there are other lines before and after, wrap them before and after, and leave a blank line to ensure that it is a whole. </ li >
</ ul >
< href = "http://www.baidu.com" target = "_top" > Baidu search </ a > < br />
< img src = "123.jpg" title = "These are two beauties" alt = "zheshilianggemeinv" /> < br /> < br />
< href = "http://www.qq.com" > < img src = "123.jpg" width = "104" /> </ a > < br /> < br />
< img src = "123.jpg" width = "100" height = "200" />
</ font >
< h1 > h1~h6 tags, title control tags </ h1 >
< h2 > If there are other lines before and after, execute line breaks before and after, and leave a blank line to ensure that it is a whole </ h2 >
< h3 > In descending order of importance </ h3 >
< h4 > Increase or decrease the existing default size </ h4 >
< div style = "background-color:#0F0" > div layer tag, by default it takes up a whole line </ div >
< span style = "background-color:#CF0" > span layer tag, the default usage is as much as it takes </ span > < br />
< br />
< table align = "center" width = "480" height = "120" border = "1" cellpadding = "0" cellspacing = "0" >
< tr align = "center" >
< td width = "120" > < a href = " http://autohome.com " > Autohome </a> </td>
< td width = "120" > Yiche.com </ td >
< td colspan = "2 " > Sina Auto </td>
</ tr >
< tr align = "center" >
< td > 58.com </ td >
< td > Ganji.com </ td >
< td rowspan = "2" bgcolor = " # FF0033" > JD.com </td>
< td > Anjuke </ td >
</ tr >
< tr align = "center" >
< td > Tmall </ td >
< td > Jumeiyoupin </ td >
< td > vipshop </ td >
</ tr >
</ table >
< br />
< href = "#top" > Back to top </a>
</ body >
</ html >

Running results:

The above article HTML Basics - General Tags, Common Tags and Tables is all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.

Original URL: http://www.cnblogs.com/H2921306656/p/5654635.html

<<: CSS example code to hide the scroll bar and scroll the content

>>: How to connect SpringBoot to MySQL to get data and write to the backend interface