Web test basis -Html basics

Html basics

First, what is html?

Language is used to describe a web page, html refers HTML (hyper textmarup language),

It is not a programming language, it is a markup language, html contains static and dynamic html html

Two, html tag

example:

<html>

<head>

<Title> Green space </ title>

</head>

<body>

<H1> Welcome to the land of green space </ h1>

<P> in the ocean to find a green space of their own land </ p>

<P> Here, you can do what you want to do </ p>

<body>

</html>

An Example Analysis:

1, <html> and the text between the </ html> is used to describe the contents of the entire page

2, the label content between <htad> and </ head> is used to define the head of the document, which is the container header element.

3, the text between the <body> and </ body> is the visible page content

4, <h1> text between </ h1> is displayed as a title

5, the text between <p> and </ p> is displayed as a paragraph

to sum up:

1, html tag label is often referred html tag (Tag html)

2, html tags are keywords surrounded by angle brackets, such as <html>

3, html tags are usually in pairs, such as <p> and </ p>

4, the label of the first tag is a start tag, the second tag is a tag end

5, the start and end tags are also referred to as closed and open-label tags

Third, the basic html tags

1, html title

html header is defined by the <h1> <h2> ... .. <h6> tag and the like, is divided into six different font sizes.

Such as:

<H1> This is a heading </ h1>

<H2> This is a heading </ h2>

<H3> This is a heading </ h3>

2, head Definition and Usage

<Head> tag is defined for the head of the document, which is a container for all the head elements. <Head> element can be referenced in the script, tells the browser where to find style sheets, provide meta-information and so on.

3, html paragraph

html passages are defined by <p> tags

Such as:

<P> This is a paragraph. </ P>

<P> This is a paragraph. </ P>

4, html link

html link is defined by the label <a>

<a> tag defines a hyperlink, a link from one page to another page.

The most important element is the href attribute <a> attribute that indicates the target of the link.

Such as:

<a href=https://www.baidu.com>this is 百度link</a>

Case:

<html>

<head>

<Title> Green space </ title>

</head>

<body>

<H1> Welcome to the land of green space </ h1>

<P> in the ocean to find a green space of their own land </ p>

<P> Here, you can do what you want to do </ p>

<a href=https://www.baidu.com>this is 百度 link</a>

<body>

</html>

5, html image

html image is defined by the <img> tag

如:<img src="timg.jpg" width="300"  height="300" />

Note: quotes put the path of the picture, if not in the same directory, you should add the absolute path.

Case:

<html>

<head>

<Title> Green space </ title>

</head>

<body>

<img src="timg.jpg" width="300"  height="300" />

<H1> Welcome to the land of green space </ h1>

<P> in the ocean to find a green space of their own land </ p>

<P> Here, you can do what you want to do </ p>

<a href=https://www.baidu.com>this is 百度 link</a>

<body>

</html>

6, html comments

You can insert comments in html code, this can improve readability, make the code more easily understood. Comments are ignored by the browser, it will not display them. Notes syntax:

<! - This is a comment ->

7, html wrap

If you want without generating a new paragraph wrap,

Use <br/> tags:

Case:

<html>

<head>

<Title> Green space </ title>

</head>

<body>

<imgsrc="timg.jpg" width="300"  height="300" />

<H1> Welcome to the land of green space </ h1>

<P> in the open sea, a green find a space of their own land </ p>

<P> Here, you can do what you want to do </ p>

<a href=https://www.baidu.com>this is 百度 link</a>

<body>

</html>

 bdf878bc14c9428c9e84a9fae8c4e723.png

8、 html  div

<Div> define document partition or section (division / section).

<Div> tag can document into separate, different parts, it can be used strictly organizational tool, and does not use any format associated therewith. Or if the class id labeled <div>, then the effect of the tag becomes

Even more effective.

Case:

 457720dc45d0439eab7533d3901d3305.png

<html>

<head>

<Title> Green space </ title>

</head>

<body>

<imgsrc="timg.jpg" width="300"  height="300" />

<H1> Welcome to the land of green space </ h1>

<P> in the open sea, a green find a space of their own land </ p>

<P> Here, you can do what you want to do </ p>

<a href=https://www.baidu.com>this is 百度 link</a>

<div style="background-color:red;height:100;width:100">

<P> This is a new regional </ p>

</div>

<body>

</html>

Four, html basic properties

1, name attribute

label name attribute specifies the name of the element. Href attribute must be provided within <a> or name tags.

如:<a name=”value”>

2, id attribute

Id id attribute specifies a unique html element

id must be unique within the html document.

Id attribute pattern can be changed or added by javascript (HTML DOM) for the element by css with the specified id. (Source: Thousand Feng software testing)

Guess you like

Origin blog.csdn.net/IT_studied/article/details/89682701