python full stack engineer - web development front end Foundation: Web page tag

python full stack engineer - web development front end Foundation: Web page tag

Course objectives

  • Introduction to web editing tools
  • Basic structure of web page
  • Label specification of web page
  • Common web page tags

The learning content of the previous web page is a skill that must be mastered when engaging in web development. Those who take this as their employment goal must complete every exercise and assignment.
Crawler development partners must master web page structure and Style Selector
The rest of the kids have to watch every video to understand the role of web pages in the web and related features Check in number)

Interpretation of details

1. Prelude:

1.1 working process of the front section

1.2 basic structure of web page

1.3 page common labels

label Meaning of label
h1~h6 The title of the web content, and the number indicates the importance of the content
p paragraph
br Wrap
a Hyperchain
img Insert picture in web page
audio Insert sound in web page
video Insert video in web page
hr horizontal rule

Code example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!--Block label, cannot display in the same row
		html Tag is a semantic tag
		-->
		<h1>hello world</h1>
		<h2>hello world</h2>
		<h6>hello world</h6>
		<p>python It's a powerful language that's easy to learn</p>
		<p>In fact, you just need to know a little bit python Can't solve the problem</p>
		No matter what language you learn,<br />All need to work hard!
		<hr />
		Horizontal split line
	</body>
</html>

Operation result:

1.4 common web page labels - formatted text labels

label Meaning of label
b Bold font appearance
strong Important parts, bold appearance
i Italics
em Important parts, appearance in italics
ins Underline
del Strikeout
small One size smaller than the surrounding
big is one size bigger than the surrounding
mark Highlight
sub Font subscript
sup Font superscript
pre Preformatted text
blockquote Text reference

1.5 common web page labels - list labels

label Meaning of label
ul Unordered list
ol Ordered list
li List entry
dl Definition list with two child Tags
dt List item entry
dd Definition part of project entry

1.6 common web page labels - table labels

label Meaning of label
table Table with multiple child labels
caption Table title
tr Table row
th Header
td Table cell
colspan The value is the number of merged columns
rowspan The value is the number of merged rows
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table>
			<caption>Table example</caption>
			<tr><th>header</th><th>header</th><th>header</th><th>header</th></tr>
			<tr><td>data</td><td>data</td><td>data</td><td>data</td></tr>
			<tr><td colspan='2'>data</td><td>data</td><td>data</td></tr>
			<tr><td>data</td><td rowspan="2">data</td><td>data</td><td>data</td></tr>
			<tr><td>data</td><td>data</td><td>data</td></tr>
		</table>
	</body>
</html>

Operation result:

1.7 common web page labels - form labels

label Meaning of label
from Form label
input According to different attributes, it is represented as input, button and check
select Select menu with option subtab
option Select menu options
button Button
textarea Multiline text box

Code example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<!--Submit data to background-->
	<form action="">
		<input type="text" name="" id="" />
		<input type="color" name="" id="" />
		<input type="data" name="" id=""/>
		<input type="email" name="" id=""/>
		<input type="file" name="" id=""/>
		<input type="hidden" name=""/>
		<input type="image" scr="" alt=""/>
		<input type="submit" name="" id=""/>
		<input type="password" name="" id=""/>
		<input type="number" name="" id="">
		male<input type="radio" name="sex" id="" value="1" />
		female<input type="radio" name="sex" id="" value="0" />
		Hobbies: singing<input type="checkbox" name="" id="" />
		dance<input type="checkbox" name="" id="" />
		go fishing<input type="checkbox" name="" id="" />
		sleep<input type="checkbox" name="" id="" />
		<input type="range" name="" id=""/>
		<input type="reset" value="Reset" />
		<input type="search" name="" id=""/>
		<select name="city">
			<option value ="shanghai">Shanghai</option>
			<option value ="beijing">Beijing</option>
		</select>
		<textarea name="" id="" rows="10" cols="30">
			
		</textarea>
	</body>
</html>


Operation result:

Tags: Python Web Development REST

Posted on Thu, 25 Jun 2020 23:17:13 -0400 by calmchess