Part of the label in 03-body label

Font Label

Title label h1-h6

h1 defines the largest title, h6 defines the smallest title. Generally, h1 can only appear once in a page, and as far as possible, the title should not exceed three levels. The h tag has align attribute, and the attribute values are left, center and right.

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Fugitive</title>
 6 
 7 </head>
 8 <body>
 9 
10 <h1>I'm a Title One</h1>
11 <h2>I'm a Title II</h2>
12 <h3>I'm a Title Three</h3>
13 <h4>I'm a Title 4</h4>
14 <h5>I'm a Title 5</h5>
15 <h6>I'm Title Six</h6>
16     
17 </body>
18 </html>

Bold label b or strong

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Fugitive</title>
 6 
 7 </head>
 8 <body>
 9 
10 <b>I'm so rough.</b>
11 <strong>I'm also rough.</strong>
12     
13 </body>
14 </html>

Italic label i or em

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Fugitive</title>
 6 
 7 </head>
 8 <body>
 9 
10 <i>I'm italic.</i>
11 <em>I'm italic, too.</em>
12     
13 </body>
14 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Fugitive</title>
 6 
 7 </head>
 8 <body>
 9 
10 <u>I'm underscoring</u>
11 <s>I'm the middle line.</s>
12     
13 </body>
14 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Fugitive</title>
 6 
 7 </head>
 8 <body>
 9 
10 10<sup>2</sup>
11 Q<sub>1</sub>
12     
13 </body>
14 </html>

Special Characters

& nbsp;: non-breaking spacing

& lt;: less than

& gt;: greater than

& amp;: Symbol&

& quot;: double quotation marks

& apos;: single quotation marks

& Copy;: Copyright

& trade;: trademark __ __________

Red is more important. Look at an example:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Fugitive</title>
 6 
 7 </head>
 8 <body>
 9 
10 <p>This is one HTML Linguistic&lt;a&gt;Label</p>
11     
12 </body>
13 </html>

 

 

Typographic Label

Paragraph label p

p is short for paragraph.

Attribute: align='center'. Attribute values: left, center, right

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Fugitive</title>
 6 
 7 </head>
 8 <body>
 9 
10 <p>This is a paragraph.</p>
11 <p align="center">This is another paragraph.</p>
12     
13 </body>
14 </html>

 

HTML divides all tags into two types:

Text-level labels: p, span, a, b, i, u, em. Text labels can only contain text, pictures and form elements.

Container-level labels: div, h series, li, dt, dd. Anything can be placed in the container label.

Another point is that the p tag is a text-level tag, which can only put text, pictures, form elements, and other elements can not be placed.

Block-level label div and in-line label span

Divide and span are very important labels. The semantics of div is division "segmentation". The semantics of span is span "range, span". As you will know in the CSS course, these two things are the most important "boxes".

div: To treat tag content as a block, it must be a separate line.

Attribute: align='center'

Attribute values: left, center, right

Span: The only difference between div and div is that div is newline, while span is not.

Div is a container-level label, in which everything can be placed, even div itself, while span is a text-level label, which can only put text, pictures, form elements.

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Fugitive</title>
 6 
 7 </head>
 8 <body>
 9 
10 <div>I am div</div>
11 <div>Me too. div</div>
12 
13 <span>I am span</span>
14 <span>Me too. span</span>
15     
16 </body>
17 </html>

 

div+css implements various styles: div is responsible for page layout, structure and partitioning. css is responsible for style.

1 <div class="header">
2     <div class="logo"></div>
3         <div class="nav"></div>
4     </div>
5     <div class="content">
6         <div class="guanggao"></div>
7         <div class="shop"></div>
8     </div>
9 <div class="footer"></div>

 

Line Break Label br

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Fugitive</title>
 6 
 7 </head>
 8 <body>
 9 
10 <span>I am span</span>
11 <br />
12 <span>Me too. span</span>
13     
14 </body>
15 </html>

Horizontal label hr

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Fugitive</title>
 6 
 7 </head>
 8 <body>
 9 
10 <span>I am span</span>
11 <br />
12 <hr />
13 <hr />
14 <span>Me too. span</span>
15     
16 </body>
17 </html>

 

Predefined (Preformatted) Label pre

Keep all spaces, tab s, newlines, and output the contents as they are.

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Fugitive</title>
 6 
 7 </head>
 8 <body>
 9 
10 <pre>
11         Goose, goose and goose
12 
13             Author: Li Bai
14         Songs to Heaven
15         White Hair Floating Green Water
16         
17 </pre>
18     
19 </body>
20 </html>

 

3. Hyperlink Label a

Hyperlinks come in three forms:

1. External links: links to external files

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Fugitive</title>
 6 
 7 </head>
 8 <body>
 9 
10 <a href="index.html"></a>
11 <a href="http://www.baidu.com">Use Baidu Search</a>
12     
13 </body>
14 </html>

 

2. Anchor links: jump at different locations on this page or other pages.

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Fugitive</title>
 6 
 7 </head>
 8 <body>
 9 
10 <a name="top">Top</a>
11 <p>hello</p>
12 <p>hello</p>
13 <p>hello</p>
14 <p>hello</p>
15 <p>hello</p>
16 <p>hello</p>
17 <p>hello</p>
18 <p>hello</p>
19 <p>hello</p>
20 <p>hello</p>
21 <p>hello</p>
22 <p>hello</p>
23 <p>hello</p>
24 <p>hello</p>
25 <p>hello</p>
26 <p>hello</p>
27 <p>hello</p>
28 <p>hello</p>
29 <p>hello</p>
30 <p>hello</p>
31 <p>hello</p>
32 <p>hello</p>
33 <p>hello</p>
34 <p>hello</p>
35 <p>hello</p>
36 <p>hello</p>
37 <p>hello</p>
38 <p>hello</p>
39 <p>hello</p>
40 <p>hello</p>
41 <p>hello</p>
42 <p>hello</p>
43 <p>hello</p>
44 <p>hello</p>
45 <p>hello</p>
46 <p>hello</p>
47 <a href="#top">Return to the top</a>
48     
49 </body>
50 </html>

 

Jump to the anchor of other files:

<a href="index.hhml#top">Back to the top</a>

 

Represents jumping to the top anchor in index.html.

3. Mail Links

<a href="mailto:zhaoxu@tedu.cn">Contact us</a>

Effectiveness: After clicking, outlook pops up, which has little effect.

Prerequisite: Mail client must be installed in the computer, and mail-related information must be configured.

Several special links:

Jump to the top of the page:

<a href="#">Jump to the top</a>

 

Related to js:

<a href="javascript:alert(1)">content</a>
<a href="javascript:;">content</a>
  1. Javascript:; means nothing is executed, so there is no response when you click < a > for example: <a href= "javascript:;"> content </2
  2. Javascript: It means to execute a piece of JavaScript code when triggering the default action <a>. For example: <ahref= "javascript: alert ()"> content</a>

Attributes of a Label: \\\\\\\

href: Target URL

title: Hovering text

Name: Used to set anchor name

target: Four attribute values.

_ self: Open on the current page

_ black: Open a new window

_ parent: Open in the parent window

_ top: Open in the top window

A tag is a text-level tag.

The semantics of a is less than that of p. To make the text content clicked, p should contain a.

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Fugitive</title>
 6 
 7 </head>
 8 <body>
 9 
10 <p align="center">
11     <a href="http://www.baidu.com">Use Baidu Search</a>
12 </p>
13     
14 </body>
15 </html>

 

IV. Image label img

The types of images that can be inserted are: jpg(jpeg), gif, png, bmp

The formats of pictures that cannot be inserted into a web page are: psd, ai

HTML does not insert pictures directly, but inserts the quotation address of the pictures, so upload the pictures to the server.

src attribute: refers to the path of the picture

1. Absolute path:

<img src="http://www.baidu.com/2016040102.jpg">

 

2. Relative Path: Page files and your pictures must be on one server

<img src="images/1.jpg">

 

Attributes of img tags: \\\\\\\

Width: The width of the picture

height: Picture height

Alignment: Horizontal align ment of images. Attribute values can be left, center, right

alt: When the picture cannot be displayed, replace the content displayed.

title: Hovering text

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Fugitive</title>
 6 
 7 </head>
 8 <body>
 9 
10 <img src="https://imgs.diercun.com/hd1/2019/808/7/m24mnorg_46.jpg" alt="Beauty" title='How beautiful!' width="200px" height="180px" />
11     
12 </body>
13 </html>

When text-level labels are displayed on browsers, no matter how tall the image is, there is a phenomenon called "uneven height, bottom alignment".

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Fugitive</title>
 6 
 7 </head>
 8 <body>
 9 
10 hello<img src="https://imgs.diercun.com/hd1/2019/808/7/m24mnorg_46.jpg" alt="Beauty" title='How beautiful!' width="200px" height="180px" />Hey
11     
12 </body>
13 </html>

 

Matters needing attention:
(1) If you want to ensure that the image scales equally, set only one of the width and height.
(2) If you want to achieve the effect of image-text mixing, use the align attribute with the value of left or right.

Click on the picture to jump to a link. It should be:

<a>
   <img src="images/bojie.jpeg" alt="Bo Jie" title='Yui Hatano'>
</a>

 

 

 

Author: Wanderers

Date: 2019-08-30

Tags: Python Attribute Javascript less

Posted on Fri, 30 Aug 2019 01:03:44 -0700 by Khrysller