Introduction to HTML

1. The function of a web browser is to read HTML documents and display them in the form of web pages. Browsers do not display HTML tags, but use tags to interpret the content of the page.

2.

My First Heading

My first paragraph.

#

#

and

The text between #

and

is visible as the page content. The text between

#

and

is displayed as a paragraph.

HTML link

1.HTML link is Defined through the

tag.

This is a link

HTML image

HTML images are defined via the

tag.

HTML element syntax

HTML element starts with a start tag

HTML element ends with an end tag

The content of the element is the content between the start tag and the end tag

Some HTML elements have empty content ( empty content)

Empty elements are closed in the start tag (end with the end of the start tag)

Most HTML elements can have attributes

Empty HTML elements

HTML content without content is called empty element. Empty elements are closed in the opening tag.

is an empty element without a closing tag (
tag definition newline).

In XHTML, XML, and future versions of HTML, all elements must be closed.

Adding a slash in the opening tag, such as

, is the correct way to close an empty element and is accepted by HTML, XHTML and XML.

Even though

works in all browsers, using
is actually a longer-term guarantee.

HTML Centering

has additional information about alignment.

Has additional information about background color.

HTML Horizontal Line

tag creates a horizontal line in an HTML page. The

---

hr element can be used to separate content.

Always quote attribute values ​​

Attribute values ​​should always be enclosed in quotes. Double quotes are the most commonly used, but there is no problem using single quotes.

In some individual cases, such as the attribute value itself contains double quotes, you must use single quotes, for example:

name='Bill "HelloWorld" Gates'

Use empty paragraph tags

It's a bad habit to insert a blank line. Replace it with the

tag!
If you want line breaks (new lines) without creating a new paragraph, use the

tag:
This is

a para
graph with line breaks

element is an empty HTML element. Since a closing tag doesn't make any sense, it doesn't have a closing tag.

Preformatted text

This example demonstrates how to use the pre tag to control empty lines and spaces.

This is 
preformatted text.          >>>>>>>>>>> Preformatted text. 
It preserves spaces 
 It preserves spaces 
 and line breaks. and line breaks. 
 
pre tag is great for displaying computer code 
 
Address
This example shows how to write an address in an HTML file. 
 
Donald Duck’s address: 


Donald Duck

BOX 555

Disneyland

USA

 

W3School’s address: 

 User Service Email 


 Shanghai Yingke Investment Co., Ltd. 

 No. 789, Jinqiao Development Zone 

 Result: 
 Donald Duck’s address: 
 
Donald Duck BOX 555 
WWW 
Text Direction
Here is some Hebrew text
Here is some Hebrew text
Block Quote
This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. 
If you use the blockquote element, the browser will insert line breaks and margins, and the q element will not have any special rendering. 


HTML Style Example - Background Color The 
background-color attribute defines the background color for the element: 
This is a heading
This is a paragraph.
 
font The -family, color and font-size attributes respectively define the font family, color and font size of the text in the element: 
A heading
A paragraph.
The text-align attribute specifies the horizontal alignment of the text in the element Method: sThis is a heading
 
 方式 方式 方式 方式 
 
 
 The header of the table of the table is defined as the header of the table. ... 
row 1, cell 2
 
 row 2, cell 1

row 2, cell 2 
table border="1"> 
row 1, cell 1
row 1, cell 2
row 2, cell 1
 















 



 
Unordered list:

An unordered list:


 
Coffee
 
Tea
 
Milk
 

 
Ordered list: 

one Ordered list: 


 
coffee
 
tea
 
milk


 
 definition list

 

Coffee

Black hot drink

 Milk

White cold drink




Form
A form is an area that contains form elements. 
Form elements are elements that allow users to enter information in a form (such as text fields, drop-down lists, radio buttons, check boxes, etc.). 
Forms are defined using form tags (
). 
Input
The form tag used in most cases is the input tag (). Input types are defined by the type attribute (type). 
Text field
Text fields are used when users want to type letters, numbers, etc. in a form. 




First name:



Last name:





Radio button
 


 Male What do name and value mean? I have a bike 


The action attribute of the form (Action ) and the confirmation button 
                                                                                                                                                                                                                                What does value mean? 


 
Example: 
Simple drop-down list
This example demonstrates how to create a simple drop-down list box in an HTML page. The drop-down list box is a selectable list. 



Volvo


Saab

Fiat
 》》》》Add to preferred
Audi

 

Text field
This example shows how to create text Field (multiline text input control). The user can write text in the text field. There is no limit to the number of characters that can be written. 


This example cannot be edited
because our editor uses a textarea
for input,
and your browser does not allowa textarea inside a textarea.


 The cat was playing in the garden.
Create Button





Create Box:


Health Information:



Height: 

Weight: 




 
Form with input box and confirmation button


 
First name: 

 
Last name: 
 

 

with Checkbox form
I have a bike:




I have a car:



I have an airplane:

 
 



Form with radio buttons


Male:



Female:


 




Vertical header: 




 Name

 Bill Gates



 
Phone

 555 77 854




 

Phone

555 77 855




 
Illustration: Name Bill Gates
 Phone 555 77 854
 
  Phone 555 77 855


Table with title
 This example demonstrates a table with a title (caption) 

 spans two columns of cells: 


 My title 



 
 
Cells spanning two rows: 
 
 





Name

Phone
 






Phone

555 77 854