Java Web Basics - HTML and css

catalogue

Edit

HTML basic tag

Entity symbol

form

Cell merge, th label

Background color and picture

picture

Hyperlinks

list

Forms (relatively important to Java programmers

User registration form and drop-down list

file control and hidden control

readonly and disable

maxlength attribute

id attribute

div and span editing

Three ways to introduce css into HTML

List style

Absolute positioning

 

HTML basic tag

  <!--- P paragraph label -- >

<!--- H1-6 title label -- >

 <!-- Br: line feed -- >

<!-- : hrhorizontal line -- >

<!-- Color and width are label attributes -- >

<!-- Pre reserved format, what format is written and what format is displayed -- >

< del > delete word < / del >

< ins > inserter < / INS >

< b > bold</b>

< I > Italic < / I >

    <!-- Sup; add words in the upper right corner; sub; add words in the lower right corner -- >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Basic label</title>
</head>
<body>
    <!---p Paragraph label-->
    <p>Most of the Internet passwords have been leaked. Underground black products are sold in a complete database. Once you check your email or mobile phone number, your password will come out. You may as well assume that your password has been leaked. If you set different passwords for each website, the situation may be better, but you can't guarantee that a certain account is safe.</p>
    <p>Most of the Internet passwords have been leaked. Underground black products are sold in a complete database. Once you check your email or mobile phone number, your password will come out. You may as well assume that your password has been leaked. If you set different passwords for each website, the situation may be better, but you can't guarantee that a certain account is safe.</p>
    <!---h1-6 Title label-->
    <h2>biaoti</h2>
    <h3>biaoti</h3>
    <h4>biaoti</h4>
    <h5>biaoti</h5>
    <h6>biaoti</h6>
    <h1>biaoti</h1>
    <!--br:Line feed-->
    Hello<br>World
    <!--hr level-->
    <!--color width Are label attributes-->
    <hr color="red" width = 50%>
    <!--pre Reserved format, what format is written and what format is displayed-->
    <pre>
       1
       2
    </pre>
    <del>Delete word</del>
    <ins>Inserter</ins>
    <b>Bold</b>
    <i>italics</i>
    <!--sup Add words in the upper right corner sub Add words in the lower right corner-->
    10<sup>2</sup>
    10<sub>m</sub>
   
   

</body>
</html>

Entity symbol

<!-- The characteristics of entity symbols are as follows: &; End & lt; Is less than sign & gt; is greater than sign -- >

<!-- Space -- > A & nbsp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Entity symbol</title>
</head>
<body>
<!--Characteristics of entity symbols: Based on&Start with;end&lt;Yes, less than sign&gt Yes, greater than sign-->
b&lt;a&gt;c
<!--Space-->
a&nbsp;&nbsp;nbsp;b
    
</body>
</html>

form

 <!-- Table: table label, tr: row; td: column -- >

    <!-- Border = "1px": set the border of the table to a pixel wide -- >

    <!-- Align -- >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form</title>
</head>
<body>
    <!--table:Table label, tr: that 's ok; td: column-->
    <!--border="1px":Set the border of the table to one pixel wide-->
    <!--align Alignment:-->
    <br><br><br>
    <center><h1>Employee information table</h1></center>
    <hr>
    <table  border="1px" width = 60% height = "300px" align="center">
        <tr align="center">
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tr>
        <tr>
            <td>d</td>
            <td>e</td>
            <td>f</td>
        </tr>
        <tr>
            <td>g</td>
            <td>h</td>
            <td>i</td>
        </tr>
    </table>
</body>
</html>

Cell merge, th label

<!-- Rowspan merge columns and delete lower cells -- >

        <!-- ColSpan merge columns -- >

        <!-- Thead, tbody and tfood divide the content into three parts. It is not necessary to add them, but just for the convenience of js code writing later -- >

        <!-- The th label is also a cell label. More things than td are centered and bold -- >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cell merge,th label</title>
</head>
<body>
    <table border="1px" width = 60%>
        <!--rowspan Merge columns and delete the lower cell-->
        <!--colspan Merge columns-->
        <!--thead,tbody,tfood It is not necessary to divide the content into three parts, just for convenience js Code writing-->
        <!--th The label is also a cell label, which is more td Many things are centered and bold-->       <!--<tr>
            <td>Employee No.:</td>
            <td>Employee salary</td>
            <td>Employee name:</td>
        </tr>-->
        <thead>
        <tr>
            <th>Employee No.:</th>
            <th>Employee salary</th>
            <th>Employee name:</th>
        </tr></thead>
        <tbody>
        <tr>
            <td>4</td>
            <td>5</td>
            <td rowspan="2">6</td>
        </tr>
        <tr>
            <td colspan="2">7</td>
           
            <!--<td>9</td>-->
           
        </tr></tbody>
        <tfoot>
            <th>Employee No.:</th>
            <th>Employee salary</th>
            <th>Employee name:</th>
        </tfoot>
    </table>
</body>
</html>

Background color and picture

<!-- Bgcolor background: background picture -- >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background color and picture</title>
</head>
<!--bgcolor Background color  background: Background picture-->
<body bgcolor="pink" background="./1.jpeg">
    
</body>
</html>

picture

<!-- When setting the height and width of the picture, only the width is set, and the height will be zoomed

img is a picture label

title: set the information displayed when the mouse hovers

alt sets the prompt message displayed when the image fails to load

-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>picture</title>
</head>
<body>
    <!--When setting the height and width of the picture, only the width is set, and the height will be zoomed
    img Is a picture label
     title Set the information displayed when the mouse hovers
     alt Set the prompt message displayed when the picture fails to load
-->
    <img src="./1.jpeg" width="100px" title="I am a picture" alt="Picture display failed">
    <br><br><br>
    <img src="./1.jpeg" >   
</body>
</html>

Hyperlinks

<!-- Role of hyperlinks

You can send a request from the browser to the server through hyperlinks

The browser sends data (request) to the server

The server sends data to the browser (response: response)

B/s structure system, each request will correspond to a response

B ----- request ----- S

S ------ response ------ B

What is the difference between a user clicking on a hyperlink and a user directly entering a URL in the browser address bar?

Essentially, there is no difference. They all send requests to the server

Operationally speaking, hyperlinks are more convenient to use

a: Hyperlink tag hyperlink features: underlined, mouse on the hyperlink with a small hand, click on the hyperlink to jump directly to the corresponding path

href: followed by a URL. It has been explained that a resource address can be a relative path, a path of a resource in the network, or a path of a local resource

target can take the following values:

                    _ blank: new window_ self: current window_ top window

                    _ parent window

          

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hyperlinks: hot links</title>
</head>
<body>
   
    <a href="http://Www.baidu.com "> Baidu</a>
    <a href="http://Nwes.baidu.com "> Baidu news</a>
    <a href ="http://Wwww.jd.com "> JD</a>
    <a href="picture.html">picture</a>
    <!--Picture hyperlink-->
    <a href="picture.html" target="_blank"><img src="./1.jpeg" width="120px"></a>
</body>
</html>

list

<!-- There is a sequence table < ol > < li > < / Li > < / OL > -- >

<!-- Unordered list < UL > < li > < / Li > < / UL > -- >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>list</title>
</head>
<body>
    <!--Ordered list-->
<ol type="1">
    <li>Fruits
        <ol type = "a">
            <li>Apple</li>
            <li>Peach </li>
        </ol>
    </li>
    <li>Vegetables</li>
    <li>Peach</li>
</ol>
    <!--Unordered list-->
    <ul type = "circle">
        <li>China
            <ul type = "square">
                <li>Beijing
                    <ul type = "disc">
                        <li>Dongcheng District</li>
                        <li>Xicheng District</li>
                        <li>Haidian District</li>
                        <li>Chaoyang District</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <ul>
        <li>U.S.A</li>
    </ul>
    
</body>
</html>

Forms (relatively important to Java programmers

1 what is the use of forms?

After collecting user information and presenting the form, the user fills in the form and clicks the submit button to submit the data to the server

(2) how to draw a form

Draw a form with the form label

(3) a web page can have multiple form s

4. The final submitted data of the form needs to be handed over to the server. The form tag has an action attribute, which is used to specify the server address

The action attribute is used to specify which server to submit the data to

The action attribute is the same as the href attribute in the hyperlink

five http://192.168.111.3:8080/oa/save OA: project this is the form request path. The form submission data is finally submitted to the software corresponding to port 8080 on the 192.168.111.3 machine

Draw a submit button, which can submit the form, and use the input field to draw the button

Draw a button · you can use the input field. type = "submit" means that the button is a submit button with the ability to submit a form

"Button" this is an ordinary button and does not have the ability to submit forms

"Text" text box

"password" box

CheckBox check box

radio button

"reset" clear

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form </title>
</head>
<body>
   
  
        <input type="submit" value="Set the text displayed on the button">

    </form>
    <form action="http://www.baidu.com">
        <input type="submit" value="Baidu"><br>

    </form>
    <form action = "http://127.0.0.1:8080/jd/login">
        user name<input type = "text"><br>
        password<input type="password"><br>
        <input type="submit" value="Sign in">
<br><br>
    </form>
    <form action="http://127.0.0.1:3306/test/student">

        <table>
            <tr>
                <td> user name</td>
                <td> <input type="text" name="userName"> </td>
               
            </tr>
            <tr>
                <td> password</td>
                <td><input type="password" name="userPass"></td>
            </tr>
            <tr align="center">
                <td colspan="2"> 
                    <input type="submit"name="user" value="Sign in">
&nbsp;&nbsp;&nbsp;
                   <input type="reset" value="empty"></td>
               
            </tr>
          

        </table>
    </form>
</body>
</html>

User registration form and drop-down list

method property

When get is submitted in the get method, the information submitted by the user will be displayed on the browser address bar. By default, get

When post is submitted by post, the information submitted by the user will not be displayed on the browser address bar

Drop down multiple selection < select multiple = "multiple" >
           

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User registration form</title>
</head>
<body>

    <form action="http://127.0.0.1/3306/text/student" method="post">
        user name
        <input type="text" name="userName">
        <br>
        password
        <input type="password" name="userpwd">
        <br>
        Confirm password
        <input type="password" >
        <br>
        Gender
        <input type="radio" name="gender" value="1" checked>male
        <input type = "radio" name="gender" value="0">female 
        <br>
        hobby
     
       <input type="checkbox" name="instert" value="0">having dinner
       <input type="checkbox" name="instert" value="1">sleep
       <input type="checkbox" name="instert" value="2">Beat beans
       <br>
   education
        <select name="grade">
            <option value="gz">high school</option>
            <option value="dz">junior college</option>
            <option value="bk" selected>undergraduate</option>
            <option value="ss">master</option>
            </select>
            <br>
        brief introduction<!--textarea no return value-->
        <textarea rows="10" cols="10" name="introduct"></textarea>
        <br>
        <input type="submit"  value="register">
        <input type="reset"  value="empty">
        <!--Pull down multiple selection, press and hold Ctrl Multiple choices
        -->
        <select multiple="multiple" size =3>
            <option>Henan Province</option>
            <option>Shandong Province</option>
            <option>Hunan Province</option>
            <option>Hebei Province</option>
            <option>Henan Province</option>
            <option>Henan Province</option>
        </select>
    </form>

</body>
</html>

file control and hidden control

File upload file

hidden is not displayed in the browser. Compared with text, post is not displayed in the address bar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>file control</title>
</head>
<body>
    <!--file Upload file-->
    <input type="file">
    <form action="http://localhost:3306/text/student" method="post">
        <!--hidden Not displayed in the browser, and text For comparison, post Do not display in the address bar-->
     <!--<input type="text" name="userid" value="111">-->
     <input type="hidden" name="userid" value="111">
        
        user designation codes
        <input type="text" name="userCode" >
        <input type="submit" value="Submit">

    </form>
</body>
</html>

readonly and disable

 <!-- Readonly and disable are read only and cannot be changed

But eadonly submits it to the server, and the other does not -- >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>readonly disable</title>
</head>
<body>
    <!--readonly disable They are only readable and cannot be changed
    but eadonly Submit to the server, and the other does not-->
    <form action="http://127.0.0.1:3306/tese/student">
       user designation codes <input type="text" name="user" value="110" readonly>

       user name
<input type="text" name="usercode" value="111" disabled>
    </form>
    
</body>
</html>

maxlength attribute

<!-- Limit the number of input words -- >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>maxlength</title>
</head>
<body>
    <input type="text" maxlength="3">
    <!--Limit the number of input words-->
</body>
</html

id attribute

div and span

 

 

Three ways to introduce css into HTML

It's good for Java programmers to know

 

First

 

 

 

 

 

 

 

 

The third kind

Transfer and build an independent. class file

List style

Absolute positioning

 

Tags: Java Front-end html

Posted by karq on Mon, 05 Sep 2022 21:22:32 +0300