HTML Basics_General Tags, Common Tags and Tables

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 content--> 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)

&nbsp; 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>

<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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   
  2. < html   xmlns = "http://www.w3.org/1999/xhtml" >   
  3. < head >   
  4. < meta   http-equiv = "Content-Type"   content = "text/html; charset=utf-8"   />   
  5. < title > 123WORDPRESS.COM </ title >   
  6. </ head >   
  7.   
  8. < body   bgcolor = "#00FFCC" >   
  9. <​   name = "top" > </ a >   
  10. Today < br >   
  11. Weather​​   /> Not bad. < br   />   
  12. < br   />   
  13. < font   size = "45"   color = "red" >   
  14. Font format control tags: < br   />   
  15. < b > Text bold method 1, b tag </ b > < br   />   
  16. < strong > Text bold method 2, strong tag </ strong > < br   />   
  17. < i > Text tilt mode 1, i tag </ i > < br   />   
  18. < em > Text tilt mode 2, em tag </ em > < br   />   
  19. < u > Underline text, u tag </ u >   
  20. 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   />   
  21. < br   />   
  22. Content container tag: < br   />   
  23. 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
  24. < ol > ol ordered list
  25. < li > Default comes with serial number </ li >   
  26. < li > Self-wrapped </ li >   
  27. < 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 >   
  28. </ ol >   
  29. <ul> ul unordered list
  30. < li > No serial number by default </ li >   
  31. < li > Self-wrapped </ li >   
  32. < 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 >   
  33. </ ul >   
  34. <​   href = "http://www.baidu.com"   target = "_top" > Baidu search </ a > < br   />   
  35. < img   src = "123.jpg"   title = "These are two beauties"   alt = "zheshilianggemeinv"   /> < br   /> < br   />   
  36.   
  37. <​   href = "http://www.qq.com" > < img   src = "123.jpg"   width = "104"   /> </ a > < br   /> < br   />   
  38.   
  39. < img   src = "123.jpg"   width = "100"   height = "200"   />   
  40.   
  41.   
  42. </ font >   
  43. < h1 > h1~h6 tags, title control tags </ h1 >   
  44. < 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 >   
  45. < h3 > In descending order of importance </ h3 >   
  46. < h4 > Increase or decrease the existing default size </ h4 >   
  47. < div   style = "background-color:#0F0" > div layer tag, by default it takes up a whole line </ div >   
  48. < span   style = "background-color:#CF0" > span layer tag, the default usage is as much as it takes </ span > < br   />   
  49. < br   />   
  50. < table   align = "center"   width = "480"   height = "120"   border = "1"   cellpadding = "0"   cellspacing = "0" >   
  51. < tr   align = "center" >   
  52. < td   width = "120" > < a   href = " http://autohome.com " > Autohome </a> </td>​​   
  53. < td   width = "120" > Yiche.com </ td >   
  54. < td   colspan = "2 " > Sina Auto </td>   
  55. </ tr >   
  56. < tr   align = "center" >   
  57. < td > 58.com </ td >   
  58. < td > Ganji.com </ td >   
  59. < td   rowspan = "2"   bgcolor = " # FF0033" > JD.com </td>   
  60. < td > Anjuke </ td >   
  61. </ tr >   
  62. < tr   align = "center" >   
  63. < td > Tmall </ td >   
  64. < td > Jumeiyoupin </ td >   
  65. < td > vipshop </ td >   
  66. </ tr >   
  67. </ table >   
  68. < br   />   
  69. <​   href = "#top" > Back to top </a>   
  70. </ body >   
  71. </ 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

Recommend

Web page text design should be like smart girls wearing clothes

<br />"There are no ugly women in the w...

Tutorial on installing mysql5.7.18 on windows10

This tutorial shares the installation and configu...

Are you still Select *?

There are many reasons why an application is as s...

PostgreSQL materialized view process analysis

This article mainly introduces the process analys...

How to build a private Docker repository using Harbor

Table of contents 1. Open source warehouse manage...

Detailed explanation of the order of JS object traversal

Some of you may have heard that the order of trav...

Create an SSL certificate that can be used in nginx and IIS

Table of contents Creating an SSL Certificate 1. ...

How to configure environment variables in Linux environment

JDK download address: http://www.oracle.com/techn...

JavaScript implements color identification when the mouse passes over the table row

This article shares with you how to use JavaScrip...

SQL implementation of LeetCode (182. Duplicate mailboxes)

[LeetCode] 182.Duplicate Emails Write a SQL query...

How to set up Referer in Nginx to prevent image theft

If the server's images are hotlinked by other...

Detailed introduction to logs in Linux system

Table of contents 1. Log related services 2. Comm...

【HTML element】How to embed images

The img element allows us to embed images in HTML...

Teach you how to insert 1 million records into MySQL in 6 seconds

1. Idea It only took 6 seconds to insert 1,000,00...

Summary of common commands in Dockerfile

Syntax composition: 1 Annotation information 2 Co...