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

Implementation of modifying configuration files in Docker container

1. Enter the container docker run [option] image ...

CSS3 flexible box flex to achieve three-column layout

As the title says: The height is known, the width...

It's the end of the year, is your MySQL password safe?

Preface: It’s the end of the year, isn’t it time ...

How to modify Flash SWF files in web pages

I think this is a problem that many people have en...

How to maintain a long connection when using nginx reverse proxy

· 【Scene description】 After HTTP1.1, the HTTP pro...

A brief discussion on the difference between Mysql primary key index and non-primary key index

Table of contents What is an index The difference...

CentOS 8.0.1905 installs ZABBIX 4.4 version (verified)

Zabbix Server Environment Platform Version: ZABBI...

Summary of the three stages of visual designer growth

Many people have read this book: "Grow as a ...

JavaScript object-oriented implementation of magnifying glass case

This article shares the specific code of JavaScri...

RGB color table collection

RGB color table color English name RGB 16 colors ...

Use personalized search engines to find the personalized information you need

Many people now live on the Internet, and searchin...

Implementation of forced line breaks and non-line breaks in div, td, p and other containers in HTML

1. Force no line break and end with an ellipsis. C...

Solution to the error when installing Docker on CentOS version

1. Version Information # cat /etc/system-release ...

25 Vue Tips You Must Know

Table of contents 1. Limit props to type lists 2....

Vue large screen data display example

In order to efficiently meet requirements and avo...