HTML Basics

This note is classified into Java EE (link: Java EE concise notes ), because Java EE knowledge is too much and complex, classify and sort out each knowledge point. After finishing, all of them will be entered into Java EE notes.
HTML is a hypertext markup language, not a programming language. It is a simple descriptive markup language used to make hypertext documents. Its syntax is relatively simple.
Static web page making language.
Continuous updating
Your third company is my biggest motivation.

Introduction case

Here, take VScode as an example, and save the file as. html.

<html>
    <head>
        <title>S</title>
    </head>
    <body>
        Hello
    </body>
</html>

In the following figure, open the text interface with Edge.

A complete HTML file includes headings, paragraphs, lists, tables and various embedded objects, which are collectively referred to as elements.

<html>
    <head>
        Header information
    </head>
    <body>
        Document body
    </body>
</html>

Control of text and layout style

Font control

<font>label
<font face=Font type size=font size color=Color value style=style>...</font>
face:Specify the font type, such as Tahoma Times new roman etc.
size:Valid value 1-7 Integer of
color: Font color, using#Prefix, hexadecimal, or color name

The following is the display code and interface of font

<html>
    <head>
        <title>Font Use of labels</title>
    </head>
    <body bgcolor="#eeeeee">
        <center>
            <font>default font</font>
            <font size="1">1 Font size</font>
            <font size="4" face="Regular script" color=blue>4 Font size</font>
            <font size=3>
                <p>
                    <b>Boldface</b><i>italics</i>
                    <u>Underline</u>
                </p>
                <p><cite>Welcome!</cite></p>
                <p>a<sub>1</sub>=x<sub>2</sub>+y<sub>2</sub></p>
            </font>
        </center>
    </body>
</html>

title

HTML provides title tags, one for six titles

<html>
    <head>hn Use of labels</head>
    <body>
        <h1>Primary title</h1>
        <h2>Secondary title</h2>
        <h3 align=center>Tertiary title</h3>
    </body>
</html>

Web page overall style control

bgcolor: the background color of the web page
Text: sets the background color of web page text
Background: set the background graphics of the web page and use the tiling method as the background of the web page

Segmentation and line feed control

1 segment: it is realized by using p mark. p represents the beginning of a paragraph, / p represents the end of a paragraph, and a separate p can produce a blank line.
2 line feed: it is implemented with the tag br. If there is no corresponding end tag, line feed is performed. In order to ensure the integrity of a word, sometimes it is forbidden to wrap a line somewhere. In this case, the nobr tag is used.
3 pre formatted text: pre tag
4 separator line: hr mark

<hr size=width width=length align=Alignment color=colour noshade>
size:Sets the width of the horizontal line
width: Length of horizontal line
align:Alignment of horizontal lines
color:Specifies the line color
<hr>Single marker

Images, hyperlinks, and tables

1 image mark
(take time to talk about the relative path and absolute path in detail)
Here is a description of relative path and absolute path: relative path: the directory path established based on the location of the web page of the referenced file. Therefore, when web pages saved in different directories reference the same file, the paths used will be different, so it is called relative.
Absolute path: the directory path based on the root directory of the Web site. The reason why it is called absolute means that when all Web pages reference the same file, the path used is the same. In fact, the difference between absolute path and relative path lies in the different reference points used when describing directory path. Because the reference point of root directory is the same for all files on the website, the path description method using root directory as the reference point can be called absolute path.

<img src=Address of image file alt=written words border=Border width width=Image width height=Image height align=Alignment>
src:Relative path/Absolute path
alt:The mouse is placed on the picture to display a short paragraph of text, usually the title
border: Pixel, default = 0

<html>
    <head>img Use of labels</head>
    <body>
        <img src="C:\Users\Jack Leo\Desktop\HTML.jpg">
    </body>
</html>

2 hyperlinks
Hyperlinks are very important to web pages. They are the strongest and most valuable function of HTML. (link)
Hyperlinks are based on a tags

<a href="URL" target=target> </a>
href Is an abbreviation for hypertext reference, target How do I open the specified web page
target There are several values:
1._blank:In a new window
2._self:default setting
3._parent:Display in the previous window
4._top:The entire window opens, ignoring all frame structures

<html>
    <head><title>Use of labels</title></head>
    <body>
        <a href="http://www.baidu.com" target="_ Blank "> Open Baidu website in a new window</a>
    </body>
</html>

Define anchor

<a name=Anchor name> written words</a>

Tags: Java Front-end JavaEE html

Posted on Tue, 02 Nov 2021 18:18:33 -0400 by emopoops

Programmer Help