• Learn 10 web front-end lessons
  1. HTML learn how to build page structure and content.
  2. CSS learn how to beautify the page (decoration)
  3. How to add dynamic effects to a page
  4. JQuery JS language framework, simplify native JS development
  5. The Bootstrap front-end framework for HTML/CSS/JavaScript/jQuery encapsulation, purpose is to improve the efficiency of the development of the front page
  6. Project page

HTML

HyperTextMarkupLanguage: HyperTextMarkupLanguage

  • Hypertext: not only plain text but also various font effects and multimedia (images, audio, video)

  • Markup language format: < Start tag attribute = ‘XXX’ > Tag body </ End tag >

  • Learn HTML to learn what the tags are and how to use them

### Common text tags

  1. H1-h6 align= “left/right/center”; Exclusive line, bold font, own up and down spacing
  2. The paragraph tag P occupies a single line with its own spacing
  3. Horizontal divider HR
  4. Bold b
  5. Italic l
  6. Small small
  7. Delete the line s
  8. Underline the u
  9. Line feed BR A carriage return in an HTML page is not a line feed and is only recognized as a space ### list tag
  10. Unordered list ul:type(control icon) li
  11. The ordered list OL :type(sequence type) start(start value) reversed(descending order) li
  12. List nesting: Ordered and unordered lists can be nested indefinitely ### image tag img

practice

1. List exercises

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul type="square"> < li > pei escape tiger < / li > < li > waner shangguan < / li > < li > lyu3 bu4 < / li > < li > d < / li > < li > Su Lie < / li > < / ul > < ol type ="1" start="10" reverse="reversed"> < li > open the refrigerator door < / li > < li > put an elephant into a < / li > < li > close the fridge door < / li > < li > it is time for dinner < / li > < / ol > < ul > < li > cold dish < ol > < li > take cucumber < / li > < li > mustard duck palm < / li > < li > flower hair Peanut < ul > < li > < / li > < li > edamame < / li > < / ul > < / li > < / ol > < / li > < li > hot < ol > < li > braise in soy sauce meat < / li > < li > boiled fish fillet < / li > < li > to a pot chicken < / li > < / ol > < / li > </ul> </body> </html>Copy the code

Display effect:

2. Hyperlink exercises

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a id="top" href="01 first page.html">01The first page </a> <a href="http://www.baidu.com"< p style = "max-width: 100%; clear: both; min-height: 1em"1.jpg"< p style = "max-width: 100%; clear: both; min-height: 1em"http://www.tmooc.cn"><img  width="20%" height="20%"src="1.jpg"></a>
		<img width="20%" height="20%" src=".. /imgs/1.jpg">
		<img width="20%" height="20%" src=".. /imgs/2.jpg">
		<img width="20%" height="20%" src=".. /imgs/3.jpg"> 
		<img width="20%" height="20%" src=".. /imgs/4.jpg">
		<img width="20%" height="20%" src=".. /imgs/5.jpg"> > <! --> <a href="#top"> Back to top </a> </body> </ HTML >Copy the code

Display effect:



3. Table exercises

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <! <table align="center" border="1" cellspacing="10" cellpadding="10"> <caption> </caption> <! Line - tr said th column header td said - > < tr > < th > number < / th > < th > name < / th > < th > age < / th > < / tr > < tr > < td >1</ TD > <td>28</td>
			</tr>
			<tr>
				<td>2</ TD > < TD >29</td>
			</tr>
		</table>
		<table border="" cellspacing="" cellpadding=""> <! --colspan --> <tr>< TD align="center"colspan="2">1-1</td><td rowspan="2">1-3</td></tr>
			<tr><td rowspan="2">2-1</td><td>2-2</td></tr>
			<tr><td align="center"colspan="2">3-2</td></tr>
		</table>
	</body>
</html>
Copy the code

Display effect:



4. Form exercises

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <! -- Action server address method Submit method --> <form action="http://www.tmooc.cn" method="get"> <! Id unique identifier value Sets the value of the text box --> name: <input type="text" name="username"
			placeholder="Please enter user name" id="" value=""/> <br/> Password: <input type="password" name="pwd"
			placeholder="Please enter your password." id="" value=""/> <hr> Gender: <input type="radio" checked="checked" name="gender" id="" value="m"Male / > < input type ="radio" name="gender" id="" value="f"/ > < hr > <! <input type= <input type="checkbox" checked="checked" name= "hobby" id=""
			value="cy"/> smoke <input type="checkbox" name="hobby" id=""
			value="hj"/> <input type="checkbox" name= "hobby" id=""
			value="tt"/ > permed hair <! --> <input type="checkbox" name="hobby" id="dbj" value="dbj"/>
			<label for="dbj"> Big Healthcare </label> < HR > <! -- Date picker --> birthday: <input type="date" name="birthday" id="birthday" />
			<input type="submit" value="Registered"/> <hr > <! <input type="file" name="pic" id="pic" />
		</form>
	</body>
</html>
Copy the code

Display effect:

5. Picture practice

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <! -- Alt: display text when images are not displayed --> <img Alt ="It doesn't show." src="a1.jpg"> <! -- title: <img width="100" height="100" title="This is a head." src=".. /2.jpg">
		<img width="100" height="100" src="abc/3.png">
		<img width="20%" height="20%" src=".. /imgs/4.jpg"> <! <img width= <img width= <img width= <img width="20%" height="20%" src="http://cdn.tmooc.cn/bsfile//courseImg///280c6025caa14649ba86b3561db92066.jpg">
	</body>
</html>
Copy the code

Display effect:\

To be continued…

Next Section Link: Web Front-end Basics (02)