Prerequisite basic learning for hybrid APP development-HTML1

4) HTML is a highly extensible language, you can nest program segments written in scripting languages, such as: VBScript, JavaScript. Embedding JavaScript code can achieve dynamic effects, and you can also use CSS to define styles.

1.2 Web browser

1) Main functions:

① Submit the request on behalf of the visitor.

②As HTML interpreter and embedded script program executor.

③Display HTML documents in a graphical way.

2) Main web browser products

IE、Firefox、Chrome、Opera、Safari

2. HTML basic syntax

2.1 Markup syntax

1) HTML symbols used to describe functions are called "marks", such as <p>, <h1>, etc.

2) Marks must be enclosed in angle brackets when used, and some marks must also appear in pairs.

2.2 Closed Type Marking: Double Marking

1) Syntax:

<tag>content</tag>

<tag attribute 1="value" attribute 2="value">content</ tag>

2) The attribute declaration must be in the opening tag.

3) A tag may have more than one attribute, and multiple attributes are separated by spaces.

u Matters needing attention:

v Markers of closed types must appear in pairs.

v If a mark that should be closed is not closed, an unexpected error will occur.

2.3 Non-closed type mark: single mark or empty mark

1) Syntax:

2) No end tag is required, content cannot be included, and attributes can be set.

例如： hello word <br>hello word

hello word <br />hello word

u Matters needing attention:

v <br />is the current standard, and <br>is the earlier version.

v For single mark, it is recommended to write <br /> instead of <br>.

2.4 Elements and attributes

1) Element: The part enclosed by each pair of angle brackets, such as the part enclosed by <body></body>, is called the body element.

2) Attributes: used to decorate elements, each attribute has a value, and the attribute is placed in the opening tag.

2.5 Notes

Adding appropriate comments to the code is a good coding practice.

1) The comment is only visible when editing the document, and will not be displayed when the browser displays the page.

2) Syntax for adding comments:

u Matters needing attention:

v Any content between "" will not be displayed in the browser.

v Comments cannot be nested in other comments.

2.6 Standard structure of HTML documents

1) Structure:

Version Information

</html>

2) For example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

</html>

2.7 version information

1) Use DOCTYPE to declare the specified version and style at the beginning of the document, so that the browser is clear about the version, type and style of the document. Version information is divided into three types: strict type, traditional type (transition type), and frame type.

2）Strict DTD：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3) Transitional DTD: (commonly used)

<!DOCTYPE html >

4) Frameset DTD: (not commonly used anymore)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

u Note: The traditional type does not require a namespace, and the strict type requires a namespace.

2.8 <head> element

1) The <head> element is used to define global information for the page

①A container for all other head elements. ②Follow the start tag <html>.

2) Define the information related to the entire document, often including the following sub-elements:

①<title>: Title.

②<meta>: Metadata element, which defines the encoding format or refresh frequency of the page.

③<script>: JavaScript script (or introduce Ajax, jQuery script, etc.).

④<style>: Define the internal style sheet.

⑤<link>: Introduce other resources (such as external style sheets) for the current page.

2.9 <body> element

The main body of the document, which contains all the content to be displayed.

2.10 Header element: <title>

The title element <title></titile> is used to define a title for the document.

1) The content of the title element appears at the top of the browser.

2) No attributes.

3) Must appear in the <head> element.

4) A document can only have one title element.

For example: <head>

<title>First page</title>

</head>

2.11 Header element: <meta>

The metadata element <meta /> is used to define the basic information of the web page.

1) It is an empty tag.

2) Common attributes are: content, http-equiv

For example: <head>

<title>First page</title>

</head>

2.12 Case: Create an HTML document with a standard structure and create a head element.

<!DOCTYPE html >

<html>

<head>

<title>First page</title>

</head>

<body>

</body>

</html>

u Note: If you don't want to appear garbled, the physical code during storage must be the same as the code when viewed; if there is garbled, please look at the code when saving, and specify the code for viewing.

3. Text mark

3.1 The role of text mark

1) Text is the basic ingredient on a web page.

2) The directly written text will be displayed in the browser's default style.

3) The text contained in the mark will be displayed as the style of the mark: special characters, comments, heading elements, paragraph elements, line break elements, and partition elements.

3.2 Text and special characters

1) Space folding: multiple spaces or tabs are compressed into a single space, that is, only one space is displayed.

2) Special characters (such as spaces) can be escaped characters, which are also called character entities.

3.3 Title element <hn>

1) The title element allows the text to be displayed in a prominent way, and is often used in the title of an article.

2) Basic syntax: <h#>……</h#>, #: can be 1, 2, 3, 4, 5, 6

From <h1> to <h6>, namely heading 1 to heading 6

u Note: <h1> is the largest, and <h6> is the smallest.

3.4 Paragraph element <p>

1) The <p> element provides a way to structure text.

2) The text in the <p> element will be displayed in a separate paragraph:

① It is separated from the text before and after it (that is, the content in p will be on its own line).

②Add an extra vertical blank space as a paragraph space (compared with <br />, the space is larger).

Common attributes: align (available values are: left, right, center)

例如： <p>The first paragraph.</p>

<p align="right">The first paragraph.</p>

3.5 Line break element<br>

Use the <br> element to create a manual line break anywhere, this element is an empty tag, the syntax is: <br />. It is equivalent to carriage return, with a small interval.

3.6 Partition elements <span> and <div>

1) Partition elements are used to group elements and are often used in page layout. That is to make some unified settings for certain elements.

2) <span>Text</span>: Does not affect the layout, and is often used for some elements in the same row.

3) <div>Text</div>: Occupy one line alone, often used in the case of multiple lines.

3.7 Block and inline elements

1) Block-level elements: By default, block-level elements will occupy a line on their own, that is, they will automatically wrap before and after, such as: <div>, <p>, <hn>, <li>

2) In-line elements: they can be on the same line as other elements, that is, they will not wrap, such as: <span>, <img>, <a>

3.8 Case: Use text markup to add content to the page

<!DOCTYPE html>

<html>

<head>

<title>An HTML document</title>

</head>

<body>

<h1 align="center">Java language basics <span style="color:red;">

<h2>1 Personal income tax calculator</h2>

<h3>1.1 Questions</h3>

<p>Calculate personal taxation</p>

<p>Use the if statement to complete the program</p>

<h2>1.3 Implementation</h2>

<p>Use Notepad, the code is as follows:</p>

<p>public class IncomeTax<br />

{<br /><br /><br />}

</p>

</body>

</html>

4. Image and connection

4.1 Image element <img>

1) Use the <img> element to add an image to the page. This element is an empty tag and the syntax is <img />.

2) Required attributes: src

3) Common attributes: width, height

4) Syntax: <img src="the path of the image" width="wide" heigth="high"/>

例如：<img width="100" src="images/cat.jpg" />

u Matters needing attention:

It is not recommended to set both width and height, because you don't know the proportion of the original image, all settings will be deformed, only set one, the system will automatically zoom in proportion.

4.2 Link element <a>

1) Use the <a> element to create a hyperlink: click to go to other resources (commonly go to the page).

2) Syntax: <a href="" target="">clicked content, text or picture</a>

① href attribute: link URL

②target attribute: target, possible values are: _self: default value, replace the current page

_blank: Open a new blank page, display the page

4.3 URL

1) URL (Uniform Resource Locator): Uniform Resource Locator, used to identify any resource in the network. Such as: text, pictures, audio and video files, paragraphs or other hypertext.

2) The composition of the complete URL: protocol, machine name, path name, and file name.

3) The path name in URL means: relative path and absolute path.

4.4 Anchor

1) An anchor is a mark on a line in the document, used to link to a line in the document. That is to realize the jump between different positions of the current page.

2) How to use anchor points:

Step 1: Use a to define an anchor point at the target location, <a name="link1"></a>

Step 2: Use connection a to link to the anchor point (add # in front of the anchor point name), href points to link1, <a href="#link1"></a>

u Matters needing attention:

v # represents that the following is not a page, but an anchor point.

v Jumping between different positions on the page is only effective when there is a scroll bar!

3) Go directly to the top of the page

①In the early version, you must first define the anchor point, and then define the link.

②Because it is very commonly used, it is simplified now, just write a #, no need to define the anchor point first:

4.5 Case: Using images and link tags

<!DOCTYPE html >

<html>

<head>

<title>An HTML document</title>

</head>

<body>

<h1 align="center">Java language basics <span style="color:red;">

<h2>1 Personal income tax calculator</h2>

<h3>1.1 Questions</h3>

<p>Calculate personal taxation</p>

</a>

</div>

<p>Use the if statement to complete the program</p>

</a>

</div>

<h2>1.3 Implementation</h2>

<p>Use Notepad, the code is as follows:</p>

<p>public class IncomeTax<br />

{<br /><br /><br />}

</p>

</body>

</html>