Front end HTML&CSS basic summary

HTML

Grammar
① Document suffix. html or. htm
② Labels are divided into:

  • Containment label: there are start and end labels, such as < HTML ></html>
  • Autism and tag: start tag and end tag are together, such as < br / >

③ Labels can be nested
④ Define the attribute in the start tag. The attribute is composed of key value pairs. The value needs to be enclosed in quotation marks
⑤ html tags are not case sensitive, lowercase is recommended
Example

<html>
   <head>
      <title>monkey Title</title>
   </head>
   <body>
      <font color='red'>hello monkey1</font><br/>
	  <font color='green'>hello monkey2</font>
   </body>
</html>


Two, label
1. File label

  • <html>< / HTML >: the root tag of an HTML document
  • < head > < head >: header label, used to specify some attributes of html document. Reference external resources
  • < title > < title >: title label
  • <body>< / body >: body label
  • <! DOCTYPE html >: html document defined in html5

2. Text label

  • <h1>To < H6 >: title label, decreasing font size
  • <p>< / P >: paragraph label
  • <br>: newline label
  • < HR > < / HR >: display a horizontal line, attributes: color, size, align (center, left, right), width
  • <b>< / b >: bold font
  • <i> < / I >: font italics
  • < font > < / font >: font label, attribute: color (ා value 1 value 2 value 3, value range: 00~FF), size, face (font), width (value, default unit is px (pixel), or proportion, relative to parent element)
  • &nbsp: space
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>monkey First page of</title>
	</head>
	<body>
    <h2>Title<h2>
    	<hr color=aquamarine>
     <p><font color="green">Small start</font>
     	Paragraph 1
     </p>
     
     <p>
     	Paragraph 2
     </p>
     
     <p>
     	Paragraph 3
     </p>
     
     <p>
     	Paragraph 4
     </p>
     <hr color="aquamarine">
     <center>
     	<font color="#CCCCCC" size="2">
     	       Centered content
        </font>
     </center>
	</body>
</html>

3. Picture label

  • < img src = "" width = "" height = "" align = "" alt = "" >: picture label (self closing and label), attributes: align (top, right, left), src (picture path), alt (picture load failure), width (width), height (height)
  • Path: path. / with relative path beginning with. Represents the current directory,.. / represents the upper level directory

4. List label

  • < ol > < li > < li > < ol >: ordered list, attribute: type (order is number or letter, etc.)
  • < UL > < li > < li > < UL >: unordered list, attribute: type (pattern before order)
<ol type="1">
    		<li>
    		  hello	
    		</li>
    		<li>
    		  monkey
    		</li>
    	</ol>
    	<ol type="A">
    		<li>
    		  hello	
    		</li>
    		<li>
    		  monkey
    		</li>
    	</ol>
    	<ul type="square">
    		<li>
    		  hello	
    		</li>
    		<li>
    		  monkey
    		</li>
    	</ul>

5. Link label

  • < a href = "" target = "" >

6. div and span Tags

  • <span>< / span >: text information is displayed on one line
  • < div > < / div >: each div occupies a whole line

8. Semantic label

  • <header> </header>
  • <footer> </footer>
  • Tags provided by html5 to improve readability of programs

9. Table label

  • < Table > < / Table >: define table, attributes: border, cellpadding, cellspacing, bgcolor, align
  • < tr > < / TR >: define row, attribute: bgcolor, align
  • <td>< / td >: define cell
  • < th > < th >: define table cells
  • < caption > < / caption >: table title
 <table border="1" width="50%" cellpadding="0" cellspacing="0" align="center" bgcolor="aquamarine">
    	<caption><font color="cornflowerblue">Animal information sheet</caption>
    	<tr bgcolor="crimson">
    		<th>Name</th>
    		<th>number</th>
    		<th>Age</th>
    	</tr>
    	<tr>
    		<td>dog</td>
    		<td>1</td>
    		<td>20</td>
    	</tr>
    	<tr>
    		<td>cat</td>
    		<td>2</td>
            <td>18</td>
    	</tr>
    	
    </table>


10. Form label
Concept: used to collect user input data and interact with the server

  • Form is used to define a form. It can define a range, which represents the range of collecting user data
  • < form > < / form >: used to define a range, which represents the range to collect user data. Properties: action (specify the submitted URL, ාis the current page), method (specify the submission method get, post)
  • To submit data in a form item, you must specify its name attribute
  • < input >: the form item label can change the style of element display through the type attribute value. Attribute: type
  • < Select >: drop down list
  • < textarea >: text field
<form action="#" method="get">
			<label for="username">User name</label>: <input type="text" name="username" placeholder="enter one user name" id="username"><br>
			<label>Password</label>:<input type="password" name="password" placeholder="Please input a password"><br>
			Gender:<input type="radio" name="gender" value="male">male
			     <input type="radio" name="gender" value="female">female
			     <br>
			Hobbies:<input type="checkbox" name="hobby" value="java">Java
			     <input type="checkbox" name="hobby" value="python">Python
			     <input type="checkbox" name="hobby" value="dart">Dart
			     <input type="checkbox" name="hobby" value="c++">C++
			     <br>
			Photo:<input type="file" name="file"><br>
			Hidden fields:<input type="hidden" name="id" value="aaa"><br>
			Color picker:<input type="color" name="color"><br>
			Birthday:<input type="date" name="birthday"><br>
			Birthday:<input type="datetime-local" name="birthday"><br>
			Mailbox:<input type="email" name="email"><br>
			Age:<input type="number" name="age"><br>
			
			Province:<select name="province">
				    <option>--Please choose--</option>
				    <option>Beijing</option>
				    <option>Shanghai</option>
				    <option>Chengdu</option>
			     </select>
			<br>
			Self Description:
			<textarea cols="20" rows="5" name="description"></textarea>
			<input type="submit" value="Sign in"><br>
			<input type="button" value="A button"><br>
			<input type="image" src="img/3.jpg">	
		</form>


get and post methods in property method
get:

  • Request parameters are displayed in the address bar
  • The request parameter size is limited
  • Not very safe.

post:

  • The request parameters will not be displayed in the address bar, but will be encapsulated in the request body
  • There is no limit to the size of the request parameter
  • Safer
<form action="#" method="post">
	                //User name:<input name="username"><br>
                        //Password:<input name="password"><br>
            <input type="submit" value="Sign in">
		</form>

CSS page beautification and control

I. concept
1. Cascading Style Sheets: Cascading Style Sheets, that is, multiple styles can work on the same html element at the same time. It's a bit like changing skin, but the content is the same.
2. Benefits: powerful, separation of content presentation and style control (reduced coupling, decoupling, easier division of labor and collaboration, improved development efficiency). It is equivalent to dividing html and css, which can be integrated finally.

2, Combination of CSS and HTML
1. Inline style: use the style attribute within the label to specify the css code

  • <div style="color: red;">hello,monkey</div>
  • Still coupled, not recommended

2. Internal style: define the style label in the head label. The body content of the style label is css code. Effective only on the current page.

<head>
		<meta charset="utf-8">
		<title>Internal style</title>
		<style>
			div{
				color: blue;
			}
		</style>
	</head>
	<body>
		<div>hello,monkey</div>
	</body>

3. External style
① Define the css resource file (create a file directory under the current project file, write a file in it with the suffix. css)
② In the head tag, define the link tag and import the external resource file


Note: 1, 2 and 3 ways of css are more and more widely used. 1 mode is not commonly used, and 2,3 are commonly used in the later stage. The third format can also be written as

<style>
  @import"css/1.css"
</style>

Three. Grammar
format

Selector {
    Attribute name 1: attribute value 1;
    Attribute name 2: attribute value 2;
    ....
}

Note: each pair of attributes needs to be separated by semicolons. The last pair of attributes can be separated without semicolons

4, Selectors and common properties
Selectors: filtering elements with similar characteristics
1. Selector classification
① Foundation selector
id selector: select the element of id attribute value

  • Syntax: ාid attribute value ()

Element selector: select an element with the same label name

  • Syntax: label name {}

Class selector

  • Syntax:. class attribute {}
<head>
		<meta charset="utf-8">
		<title>Foundation selector</title>
		<style>
			#div1{
				color:blue;
			}
			div{
				color: green;
			}
			.cls1{
				color: red;
			}
			
		</style>
	</head>
	<body>
		<div id="div1">hello,monkey</div>
		<div>hello,cat</div>
		<p class="cls1">hello,dog</p>
	</body>


Note: the priority of id selector is higher than that of element selector, and the priority of class selector is higher than that of element selector

② Extension selector
Select all elements:

  • Syntax: * {}

Union selector:

  • Selector 1, selector 2 {}

Child selector: filter selector 2 element under selector 1 element

  • Syntax: selector 1 selector 2 {}

Parent selector: filter selector 2's parent element selector 1

  • Syntax: selector 1 > selector 2 {}

Property selector:

  • Syntax: element name [attribute name = "attribute value"] {}

Pseudo class selector: select the state that some elements have

  • Syntax: element: state {}
  • Such as <a>
  • Status:
link: status of initialization
 visited: accessed state
 active: accessing state
 hover: mouse hovering
<head>
		<meta charset="utf-8">
		<title>Extension selector</title>
		
		<style >
			
			a:link{
		 	   color:green;
	        }
	        
		    a:visited{
			   color:red;
		    }
		    
		    a:active{
			   color: deeppink;
		    }	
		    a:hover{
		       color: yellow;
		    }
		    
		</style>	
	</head>
	<body>
	    <a href="#">monkey</a>
	</body>

2. Common properties
① Text, font

  • Font size: font size
  • Color: text color
  • Text align: how to
  • Line height: line height

Background

  • Background: set background

③ Border outline

  • Border: set border according to property

Size 4

  • Width: width
  • Height: height
<style>
			p{
				color: green;
				font-size: 30px;
				text-align: center;
				line-height: 100px;
				border: 2px solid deeppink;
			}
			div{
				height: 200px;
				width:200px;
				background: url(img/3.jpg) no-repeat center;
			}
		</style>

     <p>monkey</p>
	 <div></div>


⑤ Box model: page layout control

  • Margin: outer margin
  • padding: inner margin (by default, the box will be affected by the inner margin. You can set the box properties so that width and height are the size of the final box sizing: border box)
  • Float: float
<head>
		<meta charset="utf-8">
		<title>Box model</title>
		
		<style>
		div{
			border: 1px solid red;
			width: 80px;
		}
		.div1{
		    width: 100px;
		    height: 100px;
		    margin-left: 50px; 
		}
		.div2{
			width: 200px;
			height: 200px;
			box-sizing: border-box;
		}
		.div3{
			float:left
		}
		.div4{
			float: left;
		}
		.div5{
			float:right;
		}
		</style>
	</head>
	<body>
		
	   <div class="div2">
	     	<div class="div1"></div>
	   </div>
	   <div class="div3">monkey</div>
	   <div class="div4">cat</div>
	   <div class="div5">dog</div>
	   
	</body>


Case: write a registration page with HTML and CSS

Full code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Registration interface</title>
		<style>
			/*
			 * '*'Is a wildcard that refers to all elements
			 */
			*{
				margin: 0px;
				padding: 0px;
				box-sizing: border-box;
			}
			body{
				background: url(img/18.jpg) no-repeat center;
			}
			/*
			 * margin:auto(Vertical center)
			 */
			.rg_layout{
				width: 1000px;
				height: 500px;
				border: 8px solid darkgrey;
				margin: auto;
				padding: 15px;
				margin-top: 20px;
			}
			.rg_left{
				float:left;
				margin: 15px;
			}
			.rg_left p:first-child{
				color: darkblue;
				font-size: 20px;
				font-family:futura;
			}
			.rg_left p:last-child{
				color: grey;
				font-size: 30px;
			}
			.rg_center{
				float: left;
				width: 450px;
			}
			.rg_right{
				float: right;
				margin: 15px;
				
			}
			.rg_right p a{
				color: palevioletred;
			}
			.td_left{
				width: 100px;
				text-align: right;
				height: 40px;
			}
			.td_right{
				padding-left: 50px;
			}
			#username,#password,#tel,#name,#email,#checkcode,#birthday{
				width: 240px;
				height: 32px;
				border: 1px solid grey;
				/*Set border fillet*/
			    border-radius: 5px;
			    padding-left: 10px;
			}
			#checkcode{
				width: 110px;
				
			}
			/*
			 * vertical-align: middle(Set element vertical arrangement)
			 */
			#img_check{
				height: 32px;
				vertical-align: middle;
			}
			#btn_sub{
				width: 150px;
				height: 40px;
				background: cornflowerblue;
				border: darkgray 2px solid;
			}
		</style>
		
		
	</head>
	<body>
		<div class="rg_layout">
			<div class="rg_left">
				<p class="p1">New user registration</p>
				<p class="p2">USER REGISTER</p>
			</div>
			
			
			<div class="rg_center">
				<div class="rg_form">
					<form action="#" method="post">
					<table   align="center" width="500px" height="400px">
						<tr>
							<td class="td_left"><label for="username">User name</label></td>
							<td class="td_right"><input type="text" name="username" id="username" autocomplete="off" 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" autocomplete="off" 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" autocomplete="off" placeholder="Please input 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" autocomplete="off" 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" autocomplete="off" 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" autocomplete="off">male
								&nbsp;&nbsp;&nbsp;&nbsp;
								<input type="radio" name="gender" autocomplete="off">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" autocomplete="off"></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" autocomplete="off" placeholder="Please enter the verification code">
							   <img id="img_check" src="img/3.jpg" / width="60px" height="30px">
							</td>
						</tr>
						<tr>
							<td colspan="2" align="center">
								<input id="btn_sub" type="submit" value="register" />
							</td>
						</tr>
						
					</table>
				</form>
				
				</div>	
			</div>
		
		
		    <div class="rg_right">
		    	<p>Already have an account?<a href="#">Login immediately</a></p>
		    </div>
	
		</div>  
	</body>
</html>
Published 51 original articles, won praise 16, visited 5447
Private letter follow

Tags: Attribute html5 Java Python

Posted on Tue, 14 Jan 2020 20:37:06 -0800 by jacko