Introduction to HTML

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 <p></p>preformatted text.          >>>>>>>>>>> Preformatted text. <p></p>It preserves spaces <p></p> It preserves spaces <p></p> and line breaks. and line breaks. <p></p> <p></p>pre tag is great for displaying computer code <p></p> <p></p>Address<p></p>This example shows how to write an address in an HTML file. <p></p> <p></p><p></p>Donald Duck’s address: <p></p><address>
<p><br>Donald Duck</p>
<p><br>BOX 555</p>
<p><br>Disneyland</p>
<p><br>USA</p>
<p></p>
</address><p> </p><p><br></p><p></p><p></p><p></p>W3School’s address: <p></p><address>
<p><a href="mailto:service@w3school.com.cn"> </a>User Service Email <br></p>
<p><br> Shanghai Yingke Investment Co., Ltd. </p>
<p><br> No. 789, Jinqiao Development Zone </p>
<p></p>
</address><p></p> Result: <p></p> Donald Duck’s address: <p></p> <p></p>Donald Duck BOX 555 <p></p><p></p>WWW <p></p><p></p><p>Text Direction</p><p></p><p></p>Here is some Hebrew text<p></p><p></p><p>Here is some Hebrew text<abbr title="United Nations"></abbr></p><p>Block Quote<acronym title="World Wide Web"></acronym></p><p></p>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. <p></p><p><bdo dir="rtl"><p>If you use the blockquote element, the browser will insert line breaks and margins, and the q element will not have any special rendering. </p>
<p><br></p>
<p>HTML Style Example - Background Color The </p>
<p>background-color attribute defines the background color for the element: </p>
<p></p></bdo></p><p></p><h2 style="background-color:red">This is a heading</h2><p></p><p style="background-color:green">This is a paragraph.</p><p></p> <p>font The -family, color and font-size attributes respectively define the font family, color and font size of the text in the element: </p><p></p><h1 style="font-family:verdana">A heading</h1><p></p><p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p><p>The text-align attribute specifies the horizontal alignment of the text in the element Method: sThis is a heading</p><p></p><h1 style="text-align:center"> </h1> 方式 方式 方式 方式 <p></p> <p></p> <p><a href="../example/html/lastpage.html" tppabs="http://www.w3school.com.cn/example/html/lastpage.html"> The header of the table of the table is defined as the header of the table. ... </a></p><p><img  border="0" src="../i/eg_buttonnext.gif" tppabs="http://www.w3school.com.cn/i/eg_buttonnext.gif" alt="Introduction to HTML" ></p>row 1, cell 2<p> </p><p></p><p></p><p></p><th> row 2, cell 1<p></p>
<table border="1">
<p>row 2, cell 2 </p>
<tr>table border="1"> <p></p>
<th></th>
<p>row 1, cell 1</p>
<th></th>
<p>row 1, cell 2</p>
</tr>
<p></p>
<tr>
<p></p>
<td></td>
<p>row 2, cell 1</p>
<td></td>
<p></p>
</tr> <p></p>
<tr>
<p></p>
<td>
<p> </p>
<p>Unordered list:</p>
<p></p>
<h4>An unordered list:</h4>
<p></p>
<ul>
<p> </p>
<li>Coffee</li>
<p> </p>
<li>Tea</li>
<p> </p>
<li>Milk</li>
<p> </p>
</ul>
<p> </p>
<p>Ordered list: </p>
<p></p>
<h4>one Ordered list: </h4>
<p></p>
<ol>
<p> </p>
<li>coffee</li>
<p> </p>
<li>tea</li>
<p> </p>
<li>milk</li>
<p></p>
</ol>
<p> </p>
<p> definition list</p>
<p></p>
<dl> <p></p>
<dt>Coffee</dt>
<p></p>
<dd>Black hot drink</dd>
<p></p>
<dt> Milk</dt>
<p></p>
<dd>White cold drink</dd>
<p></p>
</dl>
<p><br></p>
<p>Form</p>
<p>A form is an area that contains form elements. </p>
<p>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.). </p>
<p>Forms are defined using form tags (</p>
<form>). <p>Input</p>
<p>The form tag used in most cases is the input tag (<input>). Input types are defined by the type attribute (type). </p>
<p>Text field</p>
<p>Text fields are used when users want to type letters, numbers, etc. in a form. </p>
<p></p>
<p></p>
</form>
<form>
<p>First name:</p>
<p><input type="text" name="firstname"></p>
<p><br></p>
<p>Last name:</p>
<p><input type="text" name="lastname"></p>
<p></p>
</form>
<p><br></p>
<p>Radio button</p> <p></p>
<form>
<p><input type="radio" name="sex" value="male"> Male What do name and value mean? I have a bike </p>
<p><br></p>
<p>The action attribute of the form (Action ) and the confirmation button <input type="radio" name="sex" value="female"></p>
<p>                                                                                                                                                                                                                                What does value mean? </p>
</form>
<p></p>
<p> </p>
<form>Example: <p><input type="checkbox" name="bike">Simple drop-down list</p>
<p>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. </p>
<p><br></p>
<p><input type="checkbox" name="car"></p>
<p></p>Volvo<p></p>
</form>
<p>Saab</p>
<p></p>
<form name="input" action="html_form_action.asp" method="get">Fiat<p> 》》》》Add to preferred</p>
<p><input type="text" name="user">Audi</p>
<p><input type="submit" value="Submit"></p>
<p> </p>
</form>
<p></p>Text field<p></p>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. <p></p>
<p></p>
<p>This example cannot be edited</p>
<form>because our editor uses a textarea<p><select name="cars">for input,</select></p>
<p>and your browser does not allow<option value="volvo"></option>a textarea inside a textarea.</p>
<p><option value="saab"></option></p>
<p><option value="fiat" selected></option></p>
<p> <option value="audi">The cat was playing in the garden.</option></p>Create Button<p></p>
<p></p>
</form>
<p></p>
<p></p>
<p>Create Box:</p>
<p></p>
<p></p>
<p></p>Health Information:<p></p>
<p></p>
<p></p>
<p>Height: </p>
<p></p>
<p>Weight: <textarea rows="10" cols="30"></textarea></p>
<p></p>
<p></p>
<p></p>
<form>
<p> <input type="button" value="Hello world!"></p>Form with input box and confirmation button<p></p>
</form>
<p></p> <p>First name: </p>
<fieldset>
<p><legend> </legend>Last name: </p> <p></p>
<form> <p><label><input type="text"></label></p>
<p>with Checkbox form<label><input type="text"></label></p>
<p>I have a bike:</p>
</form>
<p></p>
</fieldset>
<p></p>
<p>I have a car:</p>
<p></p>
<form action="http://www.w3school.com.cn/example/html/form_action.asp" method="get">
<p></p>
<p><input type="text" name="fname"></p>I have an airplane:<p></p>
<p><input type="text" name="lname"> </p>
<p><input type="submit" value="Submit"></p> <p></p>
</form>
<p></p>
<p>Form with radio buttons</p>
<form name="input" action="http://www.w3school.com.cn/html/html_form_action.asp" method="get">
<p></p>
<p>Male:<input type="checkbox" name="vehicle" value="Bike" checked></p>
<p><br></p>
<p></p>
<p>Female:<input type="checkbox" name="vehicle" value="Car"></p>
<p><br></p>
<p></p> <p><input type="checkbox" name="vehicle" value="Airplane"></p>
<p><br><br></p>
<p>Vertical header: <input type="submit" value="Submit"></p>
<p></p>
</form>
<p></p>
<p></p>
<form name="input" action="http://www.w3school.com.cn/html/html_form_action.asp" method="get"> Name<p></p>
<p> <input type="radio" name="Sex" value="Male" checked>Bill Gates</p>
<p><br></p>
<p></p>
<p><input type="radio" name="Sex" value="Female"></p> <p>Phone<br></p>
<p> <input type="submit" value="Submit">555 77 854</p>
<p></p>
</form>
<p></p>
<h4></h4>
<p> </p>
</td>
<th>Phone</th>
<p> </p>
<td>555 77 855</td>
<p></p>
</tr>
<p></p>
</table>
<p> </p>
<p>Illustration: Name Bill Gates</p>
<p> Phone 555 77 854</p> <p>  Phone 555 77 855</p>
<p><br></p>
<p>Table with title</p>
<p> This example demonstrates a table with a title (caption) </p>
<p></p>
<table border="6">
<p></p>
<caption> My title </caption>
<p></p>
<h4> spans two columns of cells: </h4>
<p></p>
<table border="1">
<p></p>
<tr>
<p> </p>
<th>Name</th>
<p> </p>
<th colspan="2">Phone</th> <p></p>
</tr>
<p></p>
<h4>Cells spanning two rows: </h4>
<p></p>
<tr>
<p> </p>
<th rowspan="2">Phone</th>
<p> </p>
<td>555 77 854</td>
<p></p>
</tr>
<p><br></p>
</table>
</table>
</th>