Python Front End html Foundation

Article directory

Python front-end

Front-end Part I

1. Process of website construction

1. Identify the theme of the website

Website theme is the main content of the website you build. A website must have a clear theme.

2. Choosing domain names for websites

The domain name of an enterprise's website is called "network trademark". A domain name matching the name and image of the enterprise is the premise of the enterprise's network marketing.

3. Selection of Website Space Server

The construction of a website needs its own website space. To choose a suitable website space server, the size of the space depends mainly on the size of the website and the content of the website.

4. Planning website

Website planning contains a lot of content, such as the structure of the website, column settings, website style, color matching, layout, the use of text and pictures, etc.

5. Making Web Pages

It is a complicated and meticulous process to turn one's ideas into reality step by step according to the plan.

6. Upload Test

When the web page is finished, it must be published on the Web server in order to let friends all over the world watch it.

7. Maintenance and update

The website should pay attention to maintaining and updating the content regularly and keeping the content fresh.

2 Components of Web Pages

HTML - equivalent to our blank house

CSS - Web Page Decoration Team

javascript - Smart Home

3 html Foundation

3.1 What is a web page?

An HTML file is a web page. A program page is innumerable, every open page is a page!

3.2 What is a website?

Integrate all website resource files (HTML,CSS,JS, pictures, videos, etc.) into one folder. The website contains domain names, hosts and programs (whatever we see on Jingdong, Ali, Amazon, etc.).

3.3 What is html?

HTML refers to Hyper Text Markup Language. HTML is not a programming language, but a markup language, which is necessary for web page making.
"Hypertext" means that the page can contain non-text elements such as pictures, links, even music, programs and so on.
The structure of hypertext markup language includes header (English: Head) and body (English: Body), where header provides information about web pages and subject provides specific content of web pages.

After the birth of the initial network, many HTML versions have appeared.

Edition Release time
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013

3.4 What is xhtml

XHTML refers to Extensible HyperText Markup Language (EXtensible HyperText Markup Language), which is a markup language similar to HTML, but more stringent in grammar.

3.5 HBuilder Development Tool

HBuilder is a Web development IDE supported by HTML5 launched by DCloud. HBuilder itself is an easy-to-learn and easy-to-use development tool with rich functions, integrated development environment and multi-platform development. It can realize emmet, sass, less automatic compilation, complete code prompt and automatic completion, which greatly improves the development efficiency.

How to install HBuilder?

HBuilder Download Address: Download the latest version of HBuilder at http://www.dcloud.io/click Free Download.

HBuilder currently has two versions, one is windows and the other is mac. When downloading, choose the right version according to your computer.

Commonly used shortcuts:

ctrl+D: Delete the current line

ctrl+r: Running

ctrl+a: full selection

ctrl+shift+F: collating code

ctrl +/: Notes

Alt+/: Activating Code Assistant

ps: The above shortcuts may conflict with input shortcuts (tool - > Options - > General - > shortcuts can be customized).

3.6 Establishment of Sites

File Name Specification

Names are composed of all lowercase letters, numbers and underscores, which shall not contain Chinese characters, spaces and special characters; they must begin with English letters.

Objective: To plan all the contents and codes of the website and integrate resources.

3.7 Basic Structure of HTML Documents

<! DOCTYPE HTML > Named Document Type
 <html> That means we're writing Markup Language.
	Head > File Header (Description Area)
	<meta charset="utf-8"/> encoding format (gb2312/gbk Chinese encoding)
	< title > HTML 5 </title > file title (content displayed on status bar)</head >
	<body> 
        Document body (all content to be written)
	</body>
</html>

3.8 Web Debugging Tool

(1) Use of PC Debugging Tools - Browser Test Browser (Chrome,IE,Firefox)

(2) Mobile debugging tool Chrome can test mobile pages (there are many simulators)

First page

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		< title > first page </title >
		<!--
			Shortcut key: ctrl +/ Quick comment
			Shortcut key: ctrl + R fast running
			Modified need to be saved: ctrl + S
			
			head is usually used to place page load information
			     For example coding
			     For example, adapting information
			Usually also used to introduce external resources
			  For example, css file
			  For example, js files
			
			Title is the title of the page
		-->
	</head>
	<body>
	   First page
	 hello world
	</body>
</html>

01 Text Operation

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		< title > 01 text operation </title >
	</head>
	<body>
		<! - Shortcut key: Tab quickly completes hea lt h, quickly generates labels and closes labels 
			Shortcut key: shift + enter to quickly generate < br />.
		Transfer character: & lt; denotes < & & gt; denotes > 
			In html, if you use space characters, no matter how many they are written together, only one is valid
			& nbsp; represents a space character that can be written in more than one
		-->
		Some people were late this morning and they are not allowed to be late tomorrow.
		<h1> HBuilder - Fast Coding Geek Tool, Super Tip Function</h1>
		Look at < H6 > as you change: Write the code while looking at the effect </h6>.
		
		<! - P tags are used to identify paragraphs - >.
		<p> Star Road educational science and Technology Research Institute &lt is a > based on Internet + artificial intelligence and cloud computing as the carrier, and based on the comprehensive cultivation of quality growth based on three good practices (good habits, good grades and good qualities), it is a curriculum design research and development covering from youth programming basic education to artificial intelligence higher education, and construction. Sanhao Growth Assessment, Post Competence Assessment and Credit Construction System, Organizing High Level Forum of Education Science and Technology, Student Innovation Education Competition, Innovation Education Training, Application and Promotion of Educational Science and Technology Subjects and other research units, are one of the seven institutes allowed to engage in science and technology education in China, and the qualification research of sub-provincial special economic zones. Hospital. </p>

		<p> For students to love < b > artificial intelligence </b > programming, < I > exploration </i > Artificial Intelligence < U > Science and technology </u >, comprehensive < b > < I > high-quality growth </i > </b > and development, to build academic, career selection and entrepreneurship stronger competitiveness to provide confidence and ability guarantee!
		<hr />
		
		Study hard, <br/> Make progress every day
	</body>
</html>

02 list

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>02 list</title>
	</head>
	<body>
		<!--
			My favorite name is Ma.?
			. Ma Rong
			. pony
			. Ma Dong Mei
			. Jack Ma

			Unordered list: unorder list    ul
			Ordered list :  order list   ol
			List item: list item    li
			
			Custom List:dl  
			        dt  dd			
		-->
		<h2>My favorite name is Ma.?</h2>
		<ul>
			<li>Ma Rong</li>
			<li>pony</li>
			<li>Ma Dong Mei</li>
			<li>Jack Ma</li>
		</ul>
		<hr />
		
		<!--Ordered list-->
		<h2>State leaders</h2>
		<ol type="a" start="5">
			<li>Uncle Xi</li>
			<li>Makron</li>
			<li>Obama</li>
			<li>Abe</li>
		</ol>		
		<hr />
		<!--Custom List-->
		<dl>
			<dt>Guangdong Province</dt>
			<dd>Shenzhen</dd>
			<dd>Guangzhou</dd>
			<dd>Zhongshan</dd>
			<dd>Dongguan</dd>
			
			<dt>Jiangxi Province</dt>
			<dd>Ganzhou City</dd>
			<dd>Nanchang</dd>
			<dd>Jiujiang</dd>
		</dl>
	</body>
</html>

03 hyperlinks and pictures

Picture loading must set the path of static file loading

STATIC_URL = '/static/'


STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "ORM_app/static"),
    os.path.join(BASE_DIR, 'app_img'),
]
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		< title > hyperlinks and pictures </title >
	</head>
	<body>
		<a href="http://news.baidu.com/" target="_blank">Baidu News</a><br/>

		<! - Target common attributes description:
			_ blank: Open the link page in the new window.
			_ self: Open the link page in your own window by default.
			_ Parent: If you don't have a parent framework for your current page, it's basically the same as _self.
			
		picture
			Local path: relative path. sibling directory,... denotes parent directory 
			Absolute path complete path windows: c: xx. jpg linux: / root /...
			 There is no need to change ideas in html          
			                Website
			       		       
		 	Unit of length: px pixels, the length of a point, resolution: e.g. 1920*1080 indicates 1920 points in screen height and 1080 points in width. 
		-->
		<img border="2px" width="500px" height="380px" src="img/01.jpg" alt="loading failure" title="graphical description"/><br/>
		<! - img also has some other elements that are more commonly used:
		title: This property is the prompt information displayed by hovering the mouse over the image.
		alt: This property is a text substitution when the picture is not properly displayed in an unexpected situation. >

		<! - <img src= "img/00.jpg" a lt= "loading error"/> - >
		
		<! - It's not possible to link pictures like this - >
		<img src="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=python&step_word=&hs=0&pn=10&spn=0&di=192200&pi=0&rn=1" />
	</body>
</html>

04 labels

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		< title > block label </title >
		<style type="text/css">
			span{
				color: red;
			}
		</style>
		
	</head>
	<body>
		<!--
			span block elements, which do not work by themselves
			  Using the content of a span package, it is easy to extract and manipulate it.
			  
			  The div block element, the container element, is used to easily divide the area. The div is arranged from top to bottom.
		-->
		
		It's not early for everyone to come today < br />.
		It's not too early for everyone to come to <span> a little </span> today.
		
		<div></div>
		
	</body>
</html>

05div Zoning

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>div Partition area</title>
	</head>
	<body>
		<div>Navigation bar</div>
		<div>Advertisement,Rotation chart</div>
		<div>Product partition</div>
		<div>Cooperative partner</div>
		<div>Web copyright information, etc.</div>
	</body>
</html>

06 form

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>07 form</title>
	</head>

	<body>
		<!--
		    ctrl+enter Represents fast line breaks
			
			form
			tr Express a row
			td Represents a content in a row
			border Border width
			cellspacing Margin
			cellpadding  padding
			
			Color Representation in Programming Language: 
			 1.Direct use of color terms provided by the system
			 2.Use specific values of color to represent
			   The colour is made up of three primary colours.    RGB(red red,green green,blue blue)
			   R -   0 - 255   Can be expressed in two hexadecimal digits    00 - ff
			   G -   0 - 255
			   B -   0 - 255
			 The manifestation of color: In order to # Start,Each two digits represents a color value.     as: #000000 black   #ffffff white  
			
		-->
		<!--<table border="1px" cellspacing="2px" cellpadding="20px">-->
		<table align="center" border="1px" bordercolor="#ffcccc" width="300px" height="300px">
			<tr align="center">
				<td align="center">Full name</td>
				<td>Age</td>
				<td>address</td>
			</tr>
			<tr align="center">
				<td>Jack Ma</td>
				<td>48</td>
				<td>Hangzhou</td>
			</tr>
			<tr align="center">
				<td>Wang Jianlin</td>
				<td>60</td>
				<td>Dalian</td>
			</tr>
			<tr align="center">
				<td>pony</td>
				<td>50</td>
				<td>Shenzhen</td>
			</tr>
		</table>

	</body>

</html>

Consolidation of Forms 07

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Consolidation of tables</title>
	</head>

	<body>
		<!--
			ctrl + D Quickly delete a line
			colspan Representatives occupy several columns 
			rowspan Representatives occupy several lines
		-->
		<table border="2px" width="250px" height="250px">
			<tr align="center">
				<td colspan="2" rowspan="2"><img src="img/06.gif" width="150px" height="150px" /></td>
				<td>2</td>
			</tr>
			<tr align="center">
				<td>4</td>
			</tr>
			<tr align="center">
				<td>7</td>
				<td>8</td>
				<td>9</td>

			</tr>
		</table>
	</body>
</html>

08 form

Function of forms: Used to collect user information;

Form box

2. Form control
‚Äč

Syntax:

Explain:
Input: Tags can create buttons, text input boxes, selection boxes and other types of input fields.
Name: property identifies the name of the form domain;
Type: Attribute identifies the type of form control, about a dozen;
Value: Attributes define the default values for form fields, and other attributes vary depending on the type.
maxlength: controls the maximum number of characters entered.
Size: Width of the control box (in characters)

1) Text box

2) password box

3) Submit button

4) Reset button

5) empty button

6) Men (selected by default) and women in radio button group

7) Check box group

* disabled = "disabled" (disabled) * checked = "checked" (selected by default)

Form field drop-down list (menu)
Syntax:

Drop-down option 1 Drop-down option 2...

Form field multiline text definition:
Syntax:

Explain:
Multi-line text. The rows and cols attributes are used to set the height and width of the text input window in characters.

Code example:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>form</title>
	</head>

	<body>
		<!--
			alt + / Tips
			form Form.
			action Used to specify the server address to submit
			method Used to specify the mode of request
			 html The most commonly used is get and post, A total of about 13
			 get  get data,  Place request parameters directly url Behind,fast,Unsafe,Small amount of data carried(2k)
			 post Send out,Upload data  ,Encapsulation of request data in data packages, Relative safety,Large amount of data carried
		-->
		<form action="http://www.baidu.com/" method="get">
			<!--Land-->
			Account number:&nbsp;&nbsp;<input type="text" name="username" value="xingdao@163.com" /><br /> Password:&nbsp;&nbsp;
			<input type="password" name="passwd" value="123456" /><br />
			<input type="reset" value="Again" />
			<input type="submit" />
			
			<!--Checkbox-->
			<h3>hobby</h3>
			<input type="checkbox" name="likes" value="eat" /> Having dinner
			<input type="checkbox" checked="checked" name="likes" value="sleep" /> Sleep?
			<input type="checkbox" name="likes" value="playCode" /> Code
			
			<!--Single election-->
			<hr />
			<h3>Gender:</h3>
			<input type="radio" name="sex" value="man" /> male
			<input type="radio" checked="checked" name="sex" value="women" />female
		</form>
	</body>
</html>

09 selector basic format

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Selector Basic Format</title>
		<!--
			Format of selector:
			 selector{Attribute name:Attribute value;Attribute name:Attribute value;...}
		-->
		<style type="text/css">
			div {
				width: 100%;
				height: 300px;
				background-color: red;
			}
		</style>

	</head>
	<body>
		<div></div>
	</body>
</html>

10 selector position

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Position of selector</title>

		<style type="text/css">
			div {
				width: 100%;
				height: 300px;
				background-color: #FF0000 !important;
			}
		</style>

		<!--Associated externally css file-->
		<link rel="stylesheet" type="text/css" href="css/Selector position.css" />

	</head>

	<body>
		<!--style Better not put it on the label.-->
		<div style="width: 100%;height: 300px;background-color: #ccffcc;"></div>
	</body>

</html>

Front end d Part 2

01 selector

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>01 selector</title>
		<style type="text/css">
			/*
			 Note ctrl in css+/ 
			 Element selector format: element name {attribute;}
			 
			 * */
			div{
				width: 200px;
				height: 200px;
				background-color: red;
			}
			
			/*
			 * id Selector format: # id name {attribute}, note that you need to start with # and the label you use needs to specify id attribute 
			 * */
			#head{
				width: 300px;
				height: 300px;
				background-color: green;
			}
			
			/*
			 *id Generally used to identify the uniqueness of selectors, but most browsers can render tags that use the same id
			 * 
			 * Class selectors are commonly used to set properties for a class of labels
			 * 
			 * Class selector format:.Class name {attribute} Note that you need to start with "..." and you need to specify class attributes when using labels
			 * */
			.one{
				width: 400px;
				height: 400px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div></div>
		<div id="head"></div>
		<!-- Shortcut: #id name by tab key can quickly generate div with id name - > id
		<!--<div id="head"></div>-->
		
		<div class="one">		</div>
		
		
	</body>
</html>


02 Use multiple selectors

Example 1:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Using multiple selectors</title>
		<style type="text/css">
			
			/*
			 style You can write multiple selectors.  
			 * */
			.one{
				width: 100px;
			    
			}
			.two{
				height: 100px;
			}
			#three{
				background-color: red;
				
			}			
			
		</style>
		
	</head>
	<body>
		<!--Multiple class selectors can be used simultaneously, Spacing between multiple class selectors
			Multiple selectors are available
		-->
		<div class="one two" id="three"></div>
	</body>
</html>

Example 2:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{width: 300px;
				height: 300px;
			}
			.one{
				background: red;
			}
			.two{
				background: green;
				
			}
			.three{
				background: blue;
			}
			
			
		</style>
		
	</head>
	<body>
			<div class="one"></div>
			<div class="two"></div>
			<div class="three"></div>
		
	</body>
</html>

03 pseudo class selector

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Pseudo-class selector</title>
		<style type="text/css">
			/*
			  State of color: 1. The color name provided by the system
			          2.Hexadecimal color value # ffffff
			          3.rgb(Red, Green, Blue) 0-255
			            alpha
			          4.rgba(Red, Green, Blue, Transparency) The transparency range is 0-10.5 translucent.  
			 * 
			 * */
			
			a:link {
				color: red;
			}
			
			a:visited {
				color: green
			}
			
			a:hover {
				color: blue;
			}
			
			a:active {
				color: #ffcccc
			}
		</style>
	</head>

	<body>
		<a href="https://www.baidu.com/" target="_blank">Chain Baidu Search Home Page</a>
	</body>

</html>

04 group selector

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Group selector</title>
		<style type="text/css">
			/*h2{
				color: red;
			}
			
			.one{
				color: red;
			}
			
			#two{
				color: red;
			}
			*/
			/*
			 Group selector, where multiple selectors are placed together, separated by numbers between each selector
			 * */
			
			h2,
			.one,
			#two {
				color: red;
			}
		</style>

	</head>

	<body>
		<h2>It's going to rain tonight.</h2>
		<p class="one">Chicken for dinner tonight</p>
		<h5 id="two">No chicken.,Learning is the absolute truth</h5>
	</body>

</html>

05 contains selector

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Descendant Selectors</title>
		<style type="text/css">
			div {
				color: red;
			}
			/*
			 Descendant Selectors
			 The parent tag name and the child tag name can set the style of the child tag under a parent tag, which is connected by a space.
			 * */
			
			div div {
				color: green;
			}
		</style>

	</head>

	<body>
		<div>
			Father's property
			<div>
				Son's property
			</div>
		</div>

	</body>

</html>

06 wildcard selector

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Wildcard selector</title>
		<style type="text/css">
			/*
			    * Number means wildcard selector, which can match any tag, but is not used in general.
			 * */
			*{color: red;}
		</style>
	</head>
	<body>
		<h1>What did you have for dinner this evening?</h1>
		<p>The most favorable auspices,Chicken at night</p>
		<div>Stop eating and study hard.</div>
		
	</body>
</html>

07 selector weight

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Weights of selectors(priority)</title>
		<style type="text/css">
			/*
			 Element selector weights: 0001
			 * */
			
			p {
				color: red;
			}
			/*
			 id Selector weight: 0100
			 * */
			
			#one {
				color: green;
			}
			/*
			 Class selector weight: 0010
			 * */
			
			.two {
				color: blue;
			}
		</style>

	</head>

	<body>
		<p id="one" class="two">Sunshine incense burner produces purple smoke, looking at the waterfall hanging in Qianchuan.<br/>The galaxy is suspected to have fallen for nine days.</p>
	</body>

</html>

08 font attributes

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>08 Font attribute</title>
		<style type="text/css">
			.one{
				font-size: 24px;
			}
			
			/* 
			 em Relative length, 1em = 16px
			 * */
			.two{
				font-size: 1.5em;
			}
			
			.color{
				color: red;
			}
			
			/*Thickening*/
			.three{
				font-weight: bold;
			}
			/*
			 tilt
			 italic
			 oblique A heavier tilt
			 normal Normal font
			 * */
			.four{
				/*font-style: italic;*/ 
				font-style: oblique;
			}
			
			/*
			 * Converting text to case
			 * lowercase A lowercase letter
			 * uppercase Capitalization
			 */
			.five{
				/*text-transform: lowercase;*/
				text-transform: uppercase;
			}
			.six{
				width: 600px;
				height: 300px;
				background-color: violet;
				
				/*position*/
				text-align: center;
				
				/*vertical-align: middle; No effect, no use.*/
				line-height: 300px;
			}
			
			/*
			 Add underscores
			 underline Sliding money
			 line-through Delete line
			 none No,
			 * */
			#seven{
				text-decoration: none;
			}
			
			a{
				text-decoration: none;
			}
			
		</style>
	
	</head>
	<body>
		<p class="one">Who has not died since ancient times?,Keep your heart shining</p>
		<p class="two">Who has not died since ancient times?,Keep your heart shining</p>
		<p class="color">The sky is blue, the wilderness is vast, the wind blows grass but cattle and sheep are low.</p>
		<p >Heaven, wilderness, wind<span class="three">Grass low</span>See cattle and sheep</p>
		<p class="four">I want to be a beautiful man who knocks on the code quietly.</p>
		<p class="five">li plum  is a  GOOD  man</p>
		<div class="six">
			//Xing Xiaozhi likes learning very much, Xiaohua likes it very much.
		</div>
		<p>Xiao Junjun really is.<span id="seven">handsome</span></p>
		<!--
			//The underline property of the hyperlink is set by default on the text-decoration property
		-->
		<a href="https://www.baidu.com/">Star intelligence</a>
		
	</body>
</html>


09 list attributes

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>List attribute</title>
		<style type="text/css">
			.one {
				/*
				 *Picture format:
				 * png Developing Common Uses, androd,ios Common Uses
				 *   It can be stretched and has low distortion after stretching.
				 * jpg Compression efficiency 
				 * */
				/*List Compliance Attribute*/
				/*list-style-type: circle;*/
				/*List Picture Properties*/
				list-style-image: url(img/pay-dot.png);
				/*List Location Attribute*/
				list-style-position: outside;
			}
			
			li {
				background-color: #ffcccc;
			}
			
			.two {
				/*Comprehensive use: Each attribute is separated by spaces, which can reverse the order.*/
				list-style: inside url(img/pay-dot.png);
			}
		</style>

	</head>

	<body>
		<h2>Requirements for Girlfriend</h2>
		<ul class="one">
			<li>Female</li>
			<li>Height over 167</li>
			<li>Gentle personality</li>
		</ul>
		<hr />
		<h2>Is there anything delicious?</h2>
		<ul class="two">
			<li>Hot Pot</li>
			<li>mutton</li>
			<li>Steamed Dumplings</li>
		</ul>

	</body>

</html>


10 Border Properties

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Border</title>
		<style type="text/css">
			.one {
				width: 300px;
				height: 300px;
				/*Comprehensive use*/
				/*border: 2px solid green;*/
				border-width: 2px 8px 16px 32px;
				border-style: dashed solid;
				border-color: red green blue yellow;
				/*
				 * The border has four edges. When setting values for each property, you can set 1 to 4 parameters.
				 * Clock principle
				 * 1 Each parameter - - 4 edges use this parameter
				 * 2 The first parameter represents the upper and lower values, and the second parameter represents the left and right values.
				 * 3 The first parameter represents the upper value, the second parameter represents the left and right value, and the third parameter represents the lower value.
				 * 4 Parameters - Follow: 1 up 2 right 3 down 4 left
				 * */
			}
			
			.two {
				width: 300px;
				height: 300px;
				/*border-bottom: blue solid 10px;*/
				border-bottom-color: red;
				border-bottom-style: solid;
				border-bottom-width: 15px;
			}
		</style>

	</head>

	<body>
		<div class="one">
		</div>

		<div class="two"></div>

	</body>

</html>


11 Background attributes

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Background attribute</title>
		<style type="text/css">
			.one {
				border: 2px red solid;
				width: 400px;
				height: 400px;
				/*Setting Background Colors*/
				/*background-color: #ffcccc;*/
				/*background: #ccccff;*/
			}
			
			.two {
				border: 2px green solid;
				width: 800px;
				height: 800px;
				background-image: url(img/02.jpg);
				background-repeat: no-repeat;
				/*Size of background picture*/
				background-size: 100%;
				background-position: center;
			}
		</style>
	</head>

	<body>
		<div class="one"></div>
		<div class="two"></div>
	</body>

</html>


12 floating

Example 1:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Float</title>
		<style type="text/css">
			/*
			  Floating blocks can only be set in left and right directions
			 Non-floating blocks determine upper and lower directions
			 Equivalent to two layers
			 * 
			 * */
			
			.one {
				width: 300px;
				height: 300px;
				background: red;
				float: left;
			}
			
			.two {
				width: 300px;
				height: 300px;
				background: green;
				float: left;
			}
			
			.three {
				width: 300px;
				height: 300px;
				background: blue;
				float: left;
			}
		</style>

	</head>

	<body>
		<div>
			<div class="one"></div>
			<div class="two"></div>
			<div class="three"></div>
		</div>
	</body>

</html>


Example 2:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			   Note: When changing the browser's width,
			    When the width of the floating block exceeds the browser's width, the document flow reorders the floating blocks 
			 * Floating blocks outside the browser's scope will find the smallest ones in turn, and floating blocks will be placed below the smallest ones.
			 * But the disadvantage is that the location of the fast block will be affected by the height of the previous block.
			 * */
			
			.one {
				width: 300px;
				height: 300px;
				background: red;
				float: left;
			}
			
			.two {
				width: 300px;
				height: 80px;
				background: green;
				float: left;
			}
			
			.three {
				width: 300px;
				height: 300px;
				background: blue;
				float: left;
			}
			
			.four {
				width: 300px;
				height: 200px;
				background: yellow;
				float: left;
			}
		</style>

	</head>

	<body>
		<div>
			<div class="one"></div>
			<div class="two"></div>
			<div class="three"></div>
			<div class="four"></div>
		</div>
	</body>

</html>


Example 3 (error demonstration):

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Float bug</title>
		<style type="text/css">
			.one {
				width: 300px;
				height: 300px;
				background: red;
				float: left;
			}
			
			.two {
				width: 300px;
				height: 300px;
				background: green;
				float: left;
			}
			
			.three {
				width: 300px;
				height: 300px;
				background: blue;
				float: left;
			}
			/*
			 Add an empty block at the end of the float.
			 Execute clear: both; clear floats
			 * */
			
			.six {
				clear: both;
			}
			
			.five {
				width: 300px;
				height: 300px;
				background: blue;
			}
			
			.four {
				border: 2px yellow solid;
				/*Add in parent elements*/
				/*overflow: hidden;*/
			}
		</style>

	</head>

	<body>
		<div class="four">
			<div class="one"></div>
			<div class="two"></div>
			<div class="three"></div>
			<div class="six"></div>
		</div>
		<div class="five"></div>
	</body>

</html>


Front-end Part III

01 Standard Box Model

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>01 Standard box model</title>
		<style type="text/css">
			.one {
				width: 300px;
				height: 300px;
				border: 2px solid green;
				padding: 10px 20px 30px 40px;
				margin: 10px 20px;
				/*border-width: {1,4};
				 padding,margin You can set 1 to 4 values and follow the clock principle
				 
				 padding-left: ; margin-left: ; You can also specify the upper and lower sizes separately.
				 * */
			}
			/*
			 *Standard box model:
			 *   Composition: Content content area
			 *         padding Inside drama
			 *         border Border area
			 *         margin Margin
			 * 
			 * Be careful: 
			 * To set the width and height of an area is actually the width and height of the content.
			 * The actual width/height is content plus padding*2 + border*2 
			 * margin Calculating out of range
			 * 
			 *  */
		</style>
	</head>

	<body>
		<div>
			<div class="one">Shenzhen is a good place</div>
		</div>
	</body>
</html>

The Outer Margin Problem of 02 Box Model

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>The Outer Margin Problem of Box Model</title>
		<style type="text/css">
			#one {
				width: 800px;
				height: 800px;
				border: solid blue 2px;
			}
			
			.box {
				width: 200px;
				height: 200px;
				border: solid red 2px;
				margin: 10px;
				float: left;
			}
			
			.box2 {
				width: 200px;
				height: 200px;
				border: solid green 2px;
				margin: 20px;
				float: left;
			}
			/*
			 * When each block is arranged longitudinally, the adjacent outer margins will overlap, and the values with large outer margins will be taken, and one will be taken at the same time.
			 * Note: In horizontal alignment, the adjacent outer margins add up.
			 * Attention should be paid to the calculation of the margin of the standard box model
			 * */
		</style>
	</head>

	<body>
		<div id="one">
			<div class="box"></div>
			<div class="box2"></div>
		</div>
	</body>
</html>

03 Strange Box Model

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#one {
				width: 800px;
				height: 800px;
				border: solid blue 2px;
			}
			
			.box {
				width: 200px;
				height: 200px;
				border: solid red 2px;
				padding: 3px;
				margin: 5px;
			}
			
			.box2 {
				width: 200px;
				height: 200px;
				border: solid green 2px;
				padding: 6px;
				margin: 5px;
				/*
				 Using weird box models
				 The actual width width is content plus padding*2 + border*2 
				 
				 * */
				box-sizing: border-box;
			}
		</style>
	</head>

	<body>
		<div id="one">
			<div class="box">Now study hard and strive hard</div>
			<div class="box2">The most favorable auspices,Evening learning</div>
		</div>
	</body>
</html>

04 text overflow

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Text overflow</title>
		<style type="text/css">
			.one {
				width: 100px;
				height: 100px;
				border: solid 2px green;
				/*Excessive text length will exceed the text area
				 visible By default, all will be displayed by default, and the extra part will be displayed outside the border.
				 hidden Hide, content will be tailored, beyond part invisible
				 scroll To display the whole content in the form of scrollbars, you can drag the scrollbars
				 * */
				overflow: scroll;
			}
			
			.two {
				width: 300px;
				height: 500px;
				border: solid 2px green;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
		</style>
	</head>

	<body>
		<div class="one">
			//In the learning stage, it is the most basic part of professional management to file and organize the knowledge points you have learned for easy review. In the future, it is necessary to manage the entity of archives and the information of archives, and to use archives to carry out all kinds of business.
		</div>
		<p class="two">Starway Institute teachers and senior expert team fully combine the rapid development trend of AI globalization, and formulate 18 key points of post competence which are divided into three aspects: good habits, good grades and good literacy, aiming at how each post can possess excellent competence.</p>

	</body>
</html>

05 Label Type

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Tag type</title>
		<style type="text/css">
			.one {
				width: 200px;
				height: 200px;
				border: solid 2px green;
			}
			
			.two {
				width: 300px;
				height: 200px;
				border: solid 2px red;
			}
			
			.three {
				width: 200px;
				height: 200px;
				border: solid 2px blue;
			}
			
			span {
				width: 500px;
				height: 500px;
				/*display: block;
				 Convert in-line elements into block-level elements, supporting width and height, occupying a row
				 * */
				border: solid 2px blue;
			}
			
			img {
				width: 200px;
				height: 200px;
				border: 2px red solid;
			}
			/*
			  The division of elements:
			   Block level element: block, which by default occupies one line, supports width and height attributes
			  In-line element: in-line, will not occupy a row, the default will be horizontally arranged, when beyond the scope of the current line, automatically line-wrapping, does not support the width and height attribute. 
			  Special elements: do not occupy a single line, while supporting width and height attributes, such as img,
			 
			 Note: Spacing problems may occur when line breaks are used between tags.
			 * * 
			 * */
		</style>
	</head>

	<body>
		<div class="one"></div>
		<div class="two"></div>
		<div class="three"></div>

		<input type="text" />
		<input type="password" />
		<span>text</span>
		<img src="img/03.jpg" />
		<img src="img/06.gif" />

	</body>

</html>

06 absolute location

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>absolute Location</title>
		<style type="text/css">
			.box {
				width: 1000px;
				height: 1000px;
				position: relative;
			}
			
			.one {
				width: 200px;
				height: 200px;
				background: red;
				position: absolute;
				/*It is understood as referring to the upper left corner.*/
				left: 200px;
				top: 0px
				/*absolute Location is calculated by the width of the current browser*/
				/*It is understood as referring to the lower right corner.*/
				/*right: 0px;
				bottom: 0px;*/
				;
				/*
				   postsion:absolute 
				   Absolute position: 
				 * The default is the origin of the coordinate system relative to the upper left corner of html
				 * Support left,top,bottom,right attributes to set location
				 * Departure from Document Flow
				 * *absolute Location is calculated by the width of the current browser*
				 * 
				 * absolute The origin of the reference coordinate can be changed.
				 * It can be the origin of coordinates relative to the parent container. 
				 * It automatically goes up to the parent container to find out if there is a position attribute, and the attribute is set to relative or absolute (usually not used).
				 * If it is found, it will find the upper left corner of the parent container as the coordinate origin. If it is not found, it will continue to search in the parent container. If it is not found, it will use html as the coordinate origin.
				 * 
				 * */
			}
			
			.two {
				width: 200px;
				height: 200px;
				background: green;
			}
			
			.three {
				width: 200px;
				height: 200px;
				background: blue;
			}
		</style>

	</head>

	<body>
		<div class="box">
			<div class="one"></div>
			<div class="two"></div>
			<div class="three"></div>
		</div>

	</body>

</html>

07 relation location

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>relative</title>
		<style type="text/css">
			.one {
				width: 200px;
				height: 200px;
				background: red;
			}
			
			.two {
				width: 200px;
				height: 200px;
				background: green;
				/*
				 * It will not affect the original document flow, that is, it will not affect the original effect.
				 * relative It is the origin of coordinates relative to the upper left corner of its original position.
				 * */
				position: relative;
				left: 20px;
				top: 20px
			}
			
			.three {
				width: 200px;
				height: 200px;
				background: blue;
			}
		</style>

	</head>

	<body>
		<div class="one"></div>
		<div class="two"></div>
		<div class="three"></div>
	</body>

</html>

08fixed positioning

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>08fixed Location</title>
		<style type="text/css">
			
			.one{
				width: 200px;
				height: 2000px;
				background: red;
				
			}
			
			.two{
				width: 200px;
				height: 200px;
				background: green;
				/*Departure from Document Flow
				 * Absolute Location of Current Visual Area relative to Browser
				 */
				position: fixed;
				bottom: 0px;
				right: 0px;
				/*position:
				 * staic: By default, it will not be separated from the document stream and does not support top, left, bottom, right attributes.
				 * absolute,relative,fixed All support top, left, bottom, right attributes
				 * absolute,fixed Absolute location, out of document flow
				 * relative Document flow will not be affected
				 * */
			}
			
			.three{
				width: 200px;
				height: 200px;
				background: blue;
				
			}
			
			
		</style>
	</head>
	<body>
		    <div class="one"></div>
			<div class="two"></div>
			<div class="three"></div>
	</body>
</html>

09z-index attribute

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.one {
				width: 200px;
				height: 200px;
				background: red;
			}
			
			.two {
				width: 200px;
				height: 200px;
				background: green;
				position: relative;
				left: 20px;
				top: 20px;
				z-index: 1;
			}
			
			.three {
				width: 200px;
				height: 200px;
				background: blue;
				position: relative;
			}
		</style>

	</head>

	<body>
		<div class="one"></div>
		<div class="two"></div>
		<div class="three"></div>
	</body>

</html>


10 always in the middle

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Always in the middle</title>
		<style type="text/css">
			.one{
				height: 2000px;
				width: 100%;
			}
			/*.content{
				width: 200px;
				height: 200px;
				background: #ffcccc;
				position: fixed;
				right: 0px;
				bottom: 50%;
				margin-bottom: -100px;
			}*/
			.content{
				width: 200px;
				height: 200px;
				background: #ffcccc;
				position: fixed;
				right: 0px;
				/*
				 calc It's css3, which can be used to calculate some values  
				  -  There should be spaces on both sides.
				 * */
				
				bottom: calc(50% - 100px);
			}
			
		</style>
	</head>
	<body>
		<div class="one"></div>
		<div class="content">Star Road-Artificial Intelligence, Winning the Future</div>
	</body>
</html>


11 Anchor Point Connection

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.head{
				width: 100%;
				height: 100px;
				background: #ffcccc;
			}
			.bannar{
				width: 100%;
				height: 250px;
				background: #ccffcc;
			}
			.content{
				width: 100%;
				height: 800px;
				background: #ffff00;
			}
			.foot{
				width: 100%;
				height: 100px;
				background: gray;
			}
		</style>
		
	</head>
	<body>
		<div>
		    <div class="head"  id="head"></div>
		    <div class="bannar"></div>	
		    <div class="content" id="content"></div>
		    <div class="foot">
		    	<a href="#head">Return to the top</a>
		    	<a href="#content">Return content</a>
		    </div>
		</div>
	</body>
</html>


12js Foundation (hello world)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScriptHelloWorld</title>
		<script type="text/javascript">
			// One-line comment alert is a function that pops up a warning window
			
			/*Multi-line annotation ctrl + shift+/
			 * js When a page is loaded, it executes
			 * */
			alert("Think very carefully: How to learn again hello world")
			//Print information on the browser's console
			console.log("Hello world")
			
			document.write("<h1>Think very carefully:It's hard, but I can learn by heart.</h1>")
			
		</script>
	</head>
	<body>
	</body>
</html>


Introduction of 13js & variable creation

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js The Way of Introducing and the Way of Creating Variables</title>
		<!--Introducing external js file  
			<src  Quick introduction to the outside world js File
			-->
		<script type="text/javascript" src="js/content.js" >
		</script>
		
		<script type="text/javascript">
			var name;
			
			//js is a weakly typed language
			name = "Tuan Tuan";
			name = 1;
			
			var age = 12,address="Chengdu";
			console.log(name);
			console.log(age);
			console.log(address);
		</script>
		
	</head>
	<body>
	</body>
</html>



f

Tags: Attribute Javascript Programming Python

Posted on Tue, 10 Sep 2019 23:29:30 -0700 by AnsonM