Self-study web front-end (1) HTML common tags (on)

In a web page, in order to display texts in an orderly manner, it is necessary to display these texts in segments. In HTML tags, <p> tags are used to define paragraphs, which can divide the entire web page into several paragraphs

<p>I am a paragraph tag</p>

Abbreviation for the word paragraph[lpaeragraef], which means paragraph

Tag semantics: HTML documents can be divided into several paragraphs

2.2 Newline tags

In HTML, the text in a paragraph will be arranged from left to right until the right end of the browser window, and then automatically wrap. If you want a piece of text to be displayed in a new line, you need to use the newline tag<br />

<br />

The abbreviation of the word break, which means to interrupt, to change the line

Label Semantics: Forced newline.

Features :

1. <br/> is a single tag

2. The <br/> tag simply starts a new line. Unlike paragraphs, some vertical spacing is inserted between paragraphs

3. Text formatting tags

In web pages, sometimes it is necessary to set bold, italic or underlined effects for the text. At this time, it is necessary to use the text formatting tags in HTML to display the text in a special way

Label semantics: highlight the importance, more important than ordinary text

Semantics	Label	illustrate
bold	<strong></strong> or <b></b>	It is more recommended to use the <strong> tag to have stronger semantics
tilt	<em></em>或者 <i></i>	It is more recommended to use the <em> tag to make the bold semantics stronger
delete	<de</de> 或者 <s></s>	It is more recommended to use the <del> tag to have stronger semantics
underline	<ins></ins> 或者 <u></u>	It is more recommended to use the <ins> tag to make the bold semantics stronger

4. div and span tags

<div> and <span> have no semantics, they are just a box for content

<div> This is the header</div>

<span>Price Today</span>

div is the abbreviation of division, which means division and division. span means span, span

Features :

1. The <div> tag is used for layout, but now only one <div> can be placed in a row. big box

2. The <span> tag is used for layout, and there can be more than one <span> on a line. small box

5. Image tags

Additional properties of the image tag:

Attributes	attribute value	illustrate
src	image path	required attributes
alt	text	Replacement text, text that images cannot display
title	text	Prompt text, when the mouse is placed on the image, the displayed text
width	pixel	set the width of the image
height	pixel	set the height of the image
border	pixel	Set the border thickness of the image

Points to note :

Image tags can have multiple attributes, which must be written after the tag name

Attributes are in no particular order. Tag names and attributes, and attributes and attributes are separated by spaces. Attributes are in the format of key-value pairs, that is, the format of key="value", attribute="attribute value"

6. Link tags

In HTML tags, the <a> tag is used to define a hyperlink, which is used to link from one page to another

6.1 Link Syntax Format

<a href="jump target" target="popup method of target window">text or image</a>

An abbreviation for the word anchor['aenka(r], meaning: anchor

The functions of the two properties are as follows:

Attributes	effect
href	The url address used to specify the link target, (required attribute) when the href attribute is applied to the tag, it has the function of a hyperlink
target	It is used to specify how to open the link page, where _self is the default value, and _blank is the way to open in a new window.

6.2 Classification of Links

External links: such as <a href="Baidu, you will know"> Baidu</a> .
Internal link: The mutual link between the internal pages of the website can be directly connected to the names of the internal pages.
For example <ahref="index.html>Homepage</a>
Empty link: <a href="#">homepage</a> if no link target is determined at that time
Download link: If the address in the href is a file or compressed package, the file will be downloaded
Links to web page elements: Hyperlinks can be added to various web page elements in web pages, such as text, images, tables, audio, video, etc.
Anchor link: click on the link to quickly navigate to a certain position on the page
- In the href attribute of the link text, set the attribute value in the form of #name, such as <a href="#two">episode 2</a>
- Find the target location tag, and add an id attribute = the name just now, such as: <h3 id="two">Introduction to Episode 2</h3>

7. Special characters

In HTML pages, some special symbols are difficult or inconvenient to use directly, at this time we can use the following characters instead

Special characters	describe	character code
	space character	&nbsp
<	Less than sign	&It;
>	greater than sign	>
&	ampersand	&
￥	RMB	¥
©	copyright	©
®	Trademark	®
℃	Celsius	& you;
±	sign	±
✖	Multiplication sign	×
➗	division sign	÷
²	square 2 (superscript 2)	²
³	cubic 3 (superscript 3)	³