Web front-end 丨 web Development 丨 Web code HTML+CSS 0 Basics Getting Started Tutorial

What is HTML text formatting

HTML can define a number of elements for formatting output, such as bold and italic characters.

The following code:

<p>tthis text is normal</p>
<b>this text is bold</b>
<br/>
<strong>this text is strong</strong>
<br/>
<big>this text is big</big>
<br/>
<em>this text is emphasized</em>
<br/>
<i>this text is italic</i>
<br/>
<small>this text is small</small>

The page appears as follows:

This text is bold

This text is bold
This text is strong
This text is big
This text is emphasized
This text is italic
This text is small

By label function can be divided into: text formatting tags, ' computer output ' label and reference and term definition label

Text formatting tags The

label	description
<b> ;	defines bold text.
<big>	defines a large character.
<em>	defines text-focused.
<i>	defines italic words.
<small>	defines small words.
<strong>	defines the aggravating tone.
<sub>	defines the subscript word.
<sup>	defines the superscript word.
<ins>	defines the insertion word.
<del>	define Delete.
<s>	deprecated. Use <del> instead.
<strike>	deprecated. Use <del> instead.
<u>	deprecated. Use style instead.

Computer Output label

label	Description
<code>	defines the computer code.
<kbd>	defines the keyboard code.
<samp>	defines a sample of computer code.
<tt>	defines the typewriter code.
<var>	define variables.
<pre>	defines the pre-formatted text.
<listing>	deprecated. Use <pre> instead.
<plaintext>	deprecated. Use <pre> instead.
<xmp>	deprecated. Use <pre> instead.

references, references, and terms definitions

label	Description
<abbr>	defines abbreviations.
<acronym>	defines acronyms.
<address>	defines the address.
<bdo>	defines the text direction.
<blockquote>	defines a long reference.
<q>	defines a short reference.
<cite>	define references, citations.
<dfn>	define a definition project

The HTML link

HTML uses hyperlinks to connect to another document on the network. Hyperlinks can be text or images that you can click to jump to a new document or to a section of the current document. Create a link in HTML by using the <a> tag. The code for the hyperlink, such as <a href= "url" >link text</a>  the href attribute specifies the target of the link, and the text between the start and end tags is displayed as a hyperlink.

The following code:

 <a href= "http://f2e.tming.net.cn/" >f2e. Tming</a> The 

page appears as  f2e. Tming

Comment: Always add a forward slash to a subfolder. If you write this link: href= "http://www.w3school.com.cn/html", it will generate two HTTP requests to the server. This is because the server adds a forward slash to this address, and then creates a new request, like this: href= "http://www.w3school.com.cn/html/".

The HTML Link-target property

<a> Tag's target property specifies where to open the linked document. The target property has 4 reserved destination names for use as a special document redirection operation:

1)  _blank loading the target document in a newly opened, unnamed window. such as <a href= "http://f2e.tming.net.cn/" target= "_blank" >f2e. Tming</a>   Opens the Web site in a new window.

2) The  _self is displayed in the same frame or window. This is the default value for the target property, and if the target property is not set, the default target for the <a> tag is _self. such as:   <a href= "http://f2e.tming.net.cn/" >f2e. Tming</a> or <a href= "http://f2e.tming.net.cn/" target= "_self" >f2e. Tming</a>   jumps in the current window

3)  _parent This goal causes the document to be loaded into the parent window or frameset that contains the frame referenced by the hyperlink. If the reference is in a window or in a top-level frame, then it is equivalent to the target _self.

4)  _top This target causes the document to load into the window containing the hyperlink, with the _top target clearing all the contained frames and loading the document into the entire browser window.

In addition, the target property can be set to a different target name, such as: <a href= "1.html" target= "Window1" > New window 1</a>   After clicking the browser will open a new window, mark it as "Window1", and then display the 1.html document in it

The HTML Link-Name property

Name property specifies the names of anchors (anchor). When using a named anchor, we can create a link that jumps directly to the named anchor, such as a section in the page, so that the user doesn't have to scroll the page constantly to find the information they need. To use anchor, you first need to name the anchor in the HTML document. Syntax for named anchors: <a name= "label" > Anchor 1</a> Then, create a link to the anchor in the document as follows: <a href= "#label" > Jump to Anchor 1 </a> .

Example: An anchor point has been added on the page at the beginning of the paragraph "HTML Link-target property", with the code: <a name= "Links_target" ></A>   The link code is as follows

 <a href= "#links_target" > Jump to paragraph:html  links  - target  Properties </a> 

Click to try effect: jump to paragraph: HTML Link-target property

If the anchor does not have a corresponding named anchor on the page, the click will jump to the top of the page. It is also possible to jump to the top by setting href= "#". Click to try: Go back to the top

Note: Named anchors are often used to create a table of contents at the beginning of a large document. You can assign a named anchor to each chapter, and then place a link to the anchor to the top of the document. If you visit Baidu Encyclopedia frequently, you will find that almost every entry in it uses this kind of navigation method. If the browser cannot find a named anchor that is already defined, it will be positioned at the top of the document.

Other tricks

1) Link Add text tip You can use the Title property to hover over a hyperlink to display a text comment for that hyperlink. such as <a href="http://f2e.tming.net.cn/" title="爱思资源网首页">首页</a> . Move the mouse over the link to see the effect: Home 2) Link to email address as long as the link href attribute is set to mailto: email address, click on this link will trigger your mail client, such as <a href="mailto:[email protected]">联系我们</a> . Click to see the results: Contact us

Web front-end 丨 web Development 丨 Web code HTML+CSS 0 Basics Getting Started Tutorial