HTLM&CSS of Java Web

HTML Tags: form tags

* form:
	*Concept: used to collect user input data. Used to interact with the server.
	*Form: used to define the form. You can define a range that represents the range in which user data is collected
        * properties:
            *action: specify the URL of the submitted data
            *Method: specify the submission method
                *Classification: 7 kinds in total, 2 kinds are commonly used
                   * get: 
                        1. The request parameters will be displayed in the address bar. It will be encapsulated in the request line (explained after HTTP protocol).
                        2. The request parameter size is limited.
                        3. Not very safe.
                   * post: 
                        2. The request parameters will no longer be displayed in the address bar. It will be encapsulated in the request body (explained after HTTP protocol)
                        2. There is no limit to the size of the request parameter.
                        3. Relatively safe.

        *To submit data in a form item: its name attribute must be specified

	

	*Form item label:
		*input: you can change the style of element presentation through the type attribute value
			*type attribute:
				*Text: text input box, default
					*placeholder: Specifies the prompt information of the input box. When the content of the input box changes, the prompt information will be cleared automatically	
				*Password: password input box
				*Radio: radio box
					* Note:
						1. In order for multiple radio boxes to achieve the effect of radio selection, the name attribute value of multiple radio boxes must be the same.
						2. Generally, the value attribute will be provided for each radio box to specify the submitted value after it is selected
						3. checked property. Default value can be specified
				*checkbox: check box
					* Note:
						1. Generally, the value attribute will be provided for each radio box to specify the submitted value after it is selected
						2. checked property. Default value can be specified

				*File: file selection box
				*hidden: hidden domain, used to submit some information.
				* button:
					*Submit: Submit button. Can submit form
					*Button: normal button
					*image: picture submit button
						*The src property specifies the path of the picture	

		   *label: Specifies the text description of the input item
			   * Note:
				   *The for attribute of the label generally corresponds to the id attribute value of the input. If it does, click the label field, and the input input field will get the focus.
		*select: drop-down list
			*Child element: option, specify list item
			
		*textarea: text field
			*cols: specify the number of columns and how many characters are in each row
			*Rows: the default number of rows.

CSS: page beautification and layout control

1. Concept: Cascading Style Sheets
	*Cascading: multiple styles can act on the same html element and take effect at the same time

2. benefits:
	1. Powerful function
	2. Separation of content presentation and style control
		*Reduce coupling. decoupling
		*Make division of labor and cooperation easier
		*Improve development efficiency

3. Use of CSS: combination of CSS and html
	1. Inline style
		 *Use the style attribute within the tag to specify the css code
		 *For example: < div style = "color: red;" > Hello CSS < / div >
	2. Internal style
		*In the head tag, define the style tag. The body content of the style tag is the css code
		* such as:
			<style>
		        div{
		            color:blue;
		        }
		
		    </style>
			<div>hello css</div>
	3. External style
		1. Define the css resource file.
		2. In the head tag, define the link tag and import the external resource file
		* such as:
    		*a.css file:
				div{
				    color:green;
				}
			<link rel="stylesheet" href="css/a.css">
			<div>hello css</div>
			<div>hello css</div>

	* Note:
		*The range of 1,2,3 modes of css is increasing
		*1 method is not commonly used, 2,3 in later stage
		*Three formats can be written as follows:
			<style>
		        @import "css/a.css";
		    </style>

4. css syntax:
	* format:
		Selector {
			Property name 1: property value 1;
			Property name 2: property value 2;
			...
		}
	*Selectors: filtering elements with similar characteristics
	* Note:
		*Each pair of attributes needs to be used; the last pair of attributes can be separated without adding;

5. Selector: filter elements with similar characteristics
	* classification:
		1. Foundation selector
			1. id selector: select the element of specific id attribute value. It is recommended that the id value is unique in an html page
		        *Syntax: {} value of {id attribute
		    2. Element selector: select an element with the same label name
		        *Syntax: tag name {}
		        *Note: the id selector takes precedence over the element selector
		    3. Class selector: select the element with the same class attribute value.
		        *Syntax:. class attribute value {}
		        *Note: class selector takes precedence over element selector
		2. Extension selector:
			1. Select all elements:
				*Syntax: * {}
			2. Union selector:
				*Selector 1, selector 2 {}
			
			3. Sub selector: filter selector 2 element under selector 1 element
				*Syntax: selector 1 selector 2 {}
			4. Parent selector: the parent element selector 1 of filter selector 2
				*Syntax: selector 1 > selector 2 {}

			5. Attribute selector: select element name, attribute name = element of attribute value
				*Syntax: element name [attribute name = "attribute value"] {}

			6. Pseudo class selector: select the state of some elements
				*Syntax: element: state {}
				* such as: <a>
					* status:
						*link: status of initialization
						*visited: accessed status
						*active: accessing state
						*hover: mouse hovering
 6. attribute
	1. Font and text
		*Font size: font size
		*Color: text color
		*Text align: how to
		*Line height: line height 
	2. background
		* background: 
	3. frame
		*Border: set border according to property
	4. dimensions
		*Width: width
		*Height: height
	5. Box model: control layout
		*Margin: outer margin
		*padding: inner margin
			*By default, the inside margin affects the size of the entire box
			*Box sizing: border box; set box properties so that width and height are the final box size

		*Float: float
			* left
			* right

Case study:

	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>Registration page</title>
	<style>
	    *{
	        margin: 0px;
	        padding: 0px;
	        box-sizing: border-box;
	    }
	    body{
	        background: url("img/register_bg.png") no-repeat center;
	        padding-top: 25px;
	    }
	
	    .rg_layout{
	        width: 900px;
	        height: 500px;
	        border: 8px solid #EEEEEE;
	        background-color: white;
	        /*Center the div horizontally*/
	        margin: auto;
	    }
	
	    .rg_left{
	        /*border: 1px solid red;*/
	        float: left;
	        margin: 15px;
	    }
	    .rg_left > p:first-child{
	        color:#FFD026;
	        font-size: 20px;
	    }
	
	    .rg_left > p:last-child{
	        color:#A6A6A6;
	        font-size: 20px;
	
	    }

	

	    .rg_center{
	        float: left;
	       /* border: 1px solid red;*/
	
	    }
	
	    .rg_right{
	        /*border: 1px solid red;*/
	        float: right;
	        margin: 15px;
	    }
	
	    .rg_right > p:first-child{
	        font-size: 15px;
	
	    }
	    .rg_right p a {
	        color:pink;
	    }
	
	    .td_left{
	        width: 100px;
	        text-align: right;
	        height: 45px;
	    }
	    .td_right{
	        padding-left: 50px ;
	    }
	
	    #username,#password,#email,#name,#tel,#birthday,#checkcode{
	        width: 251px;
	        height: 32px;
	        border: 1px solid #A6A6A6 ;
	        /*Set border fillet*/
	        border-radius: 5px;
	        padding-left: 10px;
	    }
	    #checkcode{
	        width: 110px;
	    }
	
	    #img_check{
	        height: 32px;
	        vertical-align: middle;
	    }
	
	    #btn_sub{
	        width: 150px;
	        height: 40px;
	        background-color: #FFD026;
	        border: 1px solid #FFD026 ;
	    }
	
	</style>
	
	</head>
	<body>
	
	<div class="rg_layout">
	    <div class="rg_left">
	        <p>New user registration</p>
	        <p>USER REGISTER</p>
	
	    </div>
	
	    <div class="rg_center">
	        <div class="rg_form">
	            <!--Define form form-->
	            <form action="#" method="post">
	                <table>
	                    <tr>
	                        <td class="td_left"><label for="username">User name</label></td>
	                        <td class="td_right"><input type="text" name="username" id="username" placeholder="enter one user name"></td>
	                    </tr>
	
	                    <tr>
	                        <td class="td_left"><label for="password">Password</label></td>
	                        <td class="td_right"><input type="password" name="password" id="password" placeholder="Please input a password"></td>
	                    </tr>
	
	                    <tr>
	                        <td class="td_left"><label for="email">Email</label></td>
	                        <td class="td_right"><input type="email" name="email" id="email" placeholder="Please enter email"></td>
	                    </tr>
	
	                    <tr>
	                        <td class="td_left"><label for="name">Full name</label></td>
	                        <td class="td_right"><input type="text" name="name" id="name" placeholder="Please enter a name"></td>
	                    </tr>
	
	                    <tr>
	                        <td class="td_left"><label for="tel">Cell-phone number</label></td>
	                        <td class="td_right"><input type="text" name="tel" id="tel" placeholder="Please enter your mobile number"></td>
	                    </tr>
	
	                    <tr>
	                        <td class="td_left"><label>Gender</label></td>
	                        <td class="td_right">
	                            <input type="radio" name="gender" value="male"> male
	                            <input type="radio" name="gender" value="female"> female
	                        </td>
	                    </tr>
	
	                    <tr>
	                        <td class="td_left"><label for="birthday">Date of birth</label></td>
	                        <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="Please enter the date of birth"></td>
	                    </tr>
	
	                    <tr>
	                        <td class="td_left"><label for="checkcode" >Verification Code</label></td>
	                        <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="Please enter the verification code">
	                            <img id="img_check" src="img/verify_code.jpg">
	                        </td>
	                    </tr>

	

	                    <tr>
	                        <td colspan="2" align="center"><input type="submit" id="btn_sub" value="register"></td>
	                    </tr>
	                </table>
	
	            </form>


	        </div>

	    </div>

	    <div class="rg_right">
	        <p>Existing accounts?<a href="#"> log in now</a></p>
	    </div>



	</div>

	</body>
	</html>
Published 7 original articles, won praise 4, visited 94
Private letter follow

Tags: Attribute Mobile

Posted on Fri, 17 Jan 2020 07:34:36 -0500 by kostik