### Course Review

Text labels

Content heading H1-H6: Exclusive line with upper and lower spacing font bold from large to small
Paragraph tag P: Exclusive line with upper and lower spacing
Newline br
Horizontal divider HR
Font: B bold I italic small S striked line U underlined

A list of tags

Unordered list: ul: type Li
The ordered list: OL: type start reversed Li
List nesting: Order and disorder can be nested arbitrarily and indefinitely

Image tag IMG

SRC: path Relative path: used when accessing intra-site resources
- Image and page in the same directory: write the name of the image directly
- Image in the parent directory of the page:… Name/picture
- Image in subdirectory of page: folder name/image name… … Absolute path: used when accessing off-site resources, known as picture theft, can save resources on this site, but there is a risk of not finding pictures
Alt: Text to display when the image is not displayed
Title: Text displayed when the mouse hovers over the picture
Width /height: Two assignment methods :1. Pixel 2. Percentage

Hyperlink to a

Href: path, which can point to a page or other file.
Wrapping text is a text hyperlink, and wrapping images is an image hyperlink
Page internal jump, back to the top

Form the table

Table tr td th table header (bold and centered) Caption
Attribute: table:border Border CellSpacing CellPadding The distance between the cell and the content

Form the form

A learning form is a form of learning the various controls
The text box<input type="text" name placeholder placeholder value >
The password<input type="password" name placeholder value>
The radio<input type="radio" name value checked="checked" id=" ABC "><lable for=" ABC "> let text also click </label>
multi-select<input type="checkbox" name value checked="checked">
File selector<input type="file" name >
Date picker<input type="date" name >

# # # form to continue

<form action="http://www.tmooc.cn" method="get"> <! -- drop down select city :<select name="city">
		<option value="bj"> </option> <! -- selected Defaults to <option value="sh" selected="selected"</option> <option value="gz"</select><br> <! <textarea name= <textarea name="intro" rows="3" cols="20"
			placeholder="Say something..."></textarea> <! --> <input type="submit" value="Registered"/ > <! Reset button --> <input type="reset"/ > <! --> <input type="button" value="Button" />
	<button type="button"</form>Copy the code

### Entity references (special characters)

Space: the phenomenon of space folding is that multiple Spaces appear consecutively and only one can be identified
Less than no. :<
More than no. :>

### Partition tag
A partition label can be regarded as a container. You can put multiple related labels into a container to centrally manage multiple labels
Div: block-level partitioned element, characteristic: exclusive row
Span: indicates the elements of an intra-row partition
The new partition tag in HTML5 works just like div: header, footer, article, body, NAV, navigation section area

< div > < / div > < div > body < / div > < div > feet < / div > < header > < header > < nav > < nav > < article > < article > or < section > < section > <footer></footer>Copy the code

CSS

Cascading Style Sheet to beautify your page
How do I add CSS style code to an HTML page?

Inline style: Adds style code to the tag’s style attribute, which cannot be reused less
Internal style: add style tag inside the head tag to write style code inside the tag, can be reused in the current page, this writing method to learn to use more, less use in the work
External styles: Write style code in a separate CSS style file, introduced by the link tag. Benefits: Reuse multiple pages, separating HTML and CSS code

The selector

Label name selector

Format: Tag name {style code}
Function: Selects all tags with the same name in a page

The id selector

Format: #id{style code}
Select the element with the specified ID from the page (id must be unique)

The class selector

Format:.class{style code}
Action: Select a page in which the specified class is worth multiple elements

Packet selector

Format: div,# ABC,.c1{style code}
What it does: Combines multiple selectors into a single selector

Property selector

Format: Element name [attribute name = ‘value’]{style code}
Effect: Selects all specified attribute names and deserving elements in a page

Arbitrary element selector

Format: *{style code}
Action: Selects all elements in a page

Posterity selector

Body div span{style code}
Function: Select all spans inside the body div (including all descendants)

Child element selector

Format: body>div>span
Function: Selects all child elements span within the div inside the body

Pseudo class selector

This selector selects the state of the element: hover state Click state Not accessed State Accessed
Format: a: hover/active/link/visited {}

Practice requirements

Boiled fish for the red word
Braised pork, poached fish, kung pao chicken with blue background
Text box background green
D2 font green
D3, S3, H3
D3 S3 H3 D2 S1 S2 S3 Background green
Add a solid blue border to all elements

### Selector review

Id selector #id{}
Tag name selector div{}
Class selector. Class {}
Group selector #id,div,.class{}
Input [type= ‘button’]{}
Arbitrary element selector *{}
Descendant selector div span{}
Child element selector div>span{}
A :visited /link not visited /hover /active {}

Color assignment

Any color consists of three primary colors. The value of each color ranges from 0 to 255

The color word is assigned to red
Each of the six hexadecimal assignments represents a color #ff0000
The 3-bit hexadecimal system repeats each bit #f00 equivalent to #ff0000
3-digit decimal assignment RGB (255,0,0)
4-bit decimal assigned rGBA (255,0,0,0-1) a=alpha The smaller the transparency value, the more transparent it is

The attached: The color name and its hexadecimal list

The background image

Set background-image: url(… /imgs/1.jpg);

Set the background image size background-size: 100px 80px; // Assign only the width to the height auto to ensure the original aspect ratio of the image
Background-repeat :no-repeat;
Background image position background-position: Horizontal percentage Vertical percentage

Element display

Block: a block-level element that occupies a single line and can be changed in width and height, including div H1-h6 p hr
Inline: An inline element occupies a single line. The width and height cannot be changed. The options are as follows: SPAN B I Small S U Hyperlink A
Inline-block: inline block elements that occupy a single line. You can also change the width and height: image img input

Text and font related styles

* Horizontal alignment text-align:left/right/center
* Text-decoration :text-decoration: overline /underline /line-through /none
Text shadow: text-shadow: color x offset y offset concentration (smaller, clearer)
* line height: the line – height: 30 px; You can center text vertically by line height
*文本颜色: color:red;
Font :20px;
* Bold: font weight:bold/normal
Italic font – style: italic;
Font-family: XXX, XXX, XXX; font:20px xxx,xxx,xxx;

practice

1. Form exercises

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action= "http: //www. tmooc.cn method="get "> <! <select name="city"> bj">  sh" selected="selected">  gz</option> </select><br> <! <textarea name="intro" rows="3" cols="20
		placeholder="Say something..."></textarea> <! --> <input type="submit" value="Registered"/ > <! Reset button --> <input type="reset"/ > <! --> <input type ="button" value="Button"/>
		<button type="button"> button </button> </form> <p> &nbsp; &nbsp; Space & lt; abc&gt; </p> <div id="">div1</div><div id="">div2</div>
		<div id="">div3</div>
		<span>span1</span>
		<span>span2</span>
		< span>span3</span>

	</body>
</html>
Copy the code

Display effect:

2.CSS import mode

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* Add the style */ after selecting the label through the selector
			/* Label name selector: select label */ by label nameh4{ color:blue; } </style> <! -- Introducing external CSS style files --> <link rel="stylesheet" type="text/css" href="first.css"/> </head> <body> <! < p style= "max-width: 100%; clear: both; min-height: 1em"color:red;"> Test inline styles1</h3>
		<h3 style="color:red;"> Test inline styles2</h3> <! -- Internal styles: Benefits: Can reuse current page --> <h4> test internal styles1</ H4 > <h4> Test internal styles2</h4> <! External styles: Benefits: Multiple page reuse, CSS style code and HTML code can be separated --> < H2 > Test external styles1</h2> <h2> Test external styles2</h2>

	</body>
</html>
Copy the code

The code in first.css:

h2{
	color:green
}
Copy the code

Test results:

3. Selector exercises

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* id selector */
			#p2{
				color:red;
			}
			/* Class selector */
			.c1{
				color:blue;
			}
			/* Group selectors combine multiple selectors into a single */ using commas
			h3,#p2,.c1{
				background-color:yellow;
			}
			/* Property selector */
			input[type='button']{
				color:red;
			}
			/* Arbitrary element selector border: border thickness style (solid line) color */
			*{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<input type="button" value="Button"/>
		<input type="submit" value="Button"/>
		<p>p1</p>
		<p id="p2">p2</p>
		<p class="c1">p3</p>
		<div>div1</div>
		<div>div2</div>
		<div class="c1">div3</div>
		<span>span1</span>
		<span>span2</span>
		<span class="c1">span3</span>
		<h3>h3</h3>
	</body>
</html>
Copy the code

Test results:

4. Selector exercises:

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#l2{
				color:red;
			}
			li{
				background-color:blue;
			}
			input[type='text']{
				background-color:green
			}
			#d2{
				color:green;
			}
			*{
				border: 1px solid blue;
			}
			.c1{
				color:purple;
			}
			.c1,#d2,span{
				background-color:green;
				}
		</style>
	</head>
	<body>
		<div>d1</div><div id="d2">d2</div><div class="c1">d3</div>
		<h3 class="c1"> This is H3 </ H3 ><span> S1 </span><span> S2 </span><spanclass="c1">s3</span>
		<input style="background-color:green;" type="text"/>
		<input type="password"/> <ul> <li> </li> <li id="l2"</li> </li> </li> </li> </ul> </body> </ HTML >Copy the code

Test results:

5. Selector Exercise (continued):

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* Descendant selector: all spans within the div inside the body (including the child elements span and all descendants) */
			/* body div div span{ color:red; } * /
			/* Child element selector: all child elements within a div within a body div */
			body>div>div>span{
				color:blue;
			}
			body>span{
				color:yellow;
			}
			/* Pseudo-class selector */
			a:visited{/* access */
				color:red
			}
			a:link{/* Not accessed */
				color:yellow
			}
			a:hover{/ * hover * /
				color:blue;
			}
			a:active{Click the / * * /
				color:green
			}
		</style>
	</head>
	<body>
		<a href=".. /imgs/1.jpg"> hyperlinks1</a>
		<a href=".. /imgs/2.jpg"> hyperlinks2</a>
		<a href=".. /imgs/3.jpg"> hyperlinks3</a>
		<a href=".. /imgs/4.jpg"> hyperlinks4</a> <hr> <span>s1</span> <div> <span>s2</span> <div> <span>s3</span> </div> <div> <span>s4</span> <div> <span>s5</span>  </div> </div> </div> </body> </html>Copy the code

Display effect:

6. Color

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
	<style type="text/css"> h1{color: red; } h2{color: #ff0000; } h3{color: #f00; } h4{color: rgb(255.0.0); } h5{color: rgba(255.0.0.0.5); } < / style > < / head > < body > < h1 > this is h1 < / h1 > < h2 > this is h2 < / h2 > < h3 > this is h3 < / h3 > < h4 > this is h4 < / h4 > < h5 > this is h5 < / h5 > < / body > < / HTML >Copy the code

Display effect:

7. Background picture:

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				width: 200px;
				height: 150px;
				background-color: cadetblue;
				/* Set the background image */background-image: url(.. /imgs/1.jpg);
				/* Set the image size */
				background-size: 100px 80px;
				/* Do not repeat */
				background-repeat: no-repeat;
				/* Sets the position of the background image: horizontal percentage and vertical percentage */
				background-position: 50% 50%;
				}
			#d2{
				width: 611px;
				height: 376px;
				background-color: #e8e8e8;
				/* Set the background image */
				background-image: url(http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png);
				background-size: 318px 319px;
				background-repeat: no-repeat ;
				background-position: 90% 70%;
				}
		</style>
	</head>
	<body>
		<div id="d1">
		</div>
		<div id="d2">
		</div>
	</body>
</html>
Copy the code

noteThe url path of the image should be in the correct position.../“Is the level above the folder you are in,”/“Is under the folder, below is the position of 1.jpg

Display effect:

8. Display mode:

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img{
				width:100px;
			}
			span{
				background-color: green;
				width: 100px;
				/* span can't be changed by using block or inline-block */
				display:block;
			}
			div{
				width:50px;
				height:50px;
				background-color: #5F9EA0;
				/* Block level elements are changed to inline blocks, which change the width and height to display within a line */
				display: inline-block; 
			}
			a{
				width:80px;
				height:80px;
				background-color:yellow;
				/* Block level elements are changed to inline blocks, which change the width and height to display within a line */
				display: inline-block;
				}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com"< p style = "max-width: 100%; clear: both; min-height: 1em"http://www.youku.com"< span style = "box-sizing: border-box! Important; word-wrap: break-word! Important"http://www.qq.com"> tencent < / a > < div > div1 < / div > < div > div2 < / div > < div > div3 < / div > < span > s1 < / span > < span > s2 < / span > < span > s3 < / span > < img SRC =".. /imgs/1.jpg" >
		<img src=".. /imgs/2.jpg" >
		<img src=".. /imgs/3.jpg" >
	</body>
</html>
Copy the code

Test effect:

9. Text is about fonts

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 150px;
				height: 40px;
				border: 1px solid red;
				Overline underline line-throuth none*/
				text-decoration: line-through;
				/* Horizontal alignment center right */
				text-align: center;
				/* Shadow: color x offset y offset concentration (the smaller the clearer)*/
				text-shadow: green -15px -15px 0px;
				/* Row height can be controlled vertically centered */
				line-height: 40px;
				/* Font size */
				font-size: 20px;
				/* Bold */
				font-weight: bold;
				/ * italics * /
				font-style: italic;
			}
				h1{
					font-weight: normal;/* Remove the bold */
					/* Set the font */
					/* font-family: cursive; * /
					font:20px cursive;
				}
			a{
				text-decoration: none;/* Remove the underline */} </style> </head> <body> <h1"#"> Hyperlink </a> <div> Text test </div> </body> </ HTML >Copy the code

Test effect:

Next section Link: Web Front-end Basics (03)

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Web Front-end Basics (02)

CSS

The selector

Practice requirements

Color assignment

The background image

Element display

Text and font related styles

practice

Web Front-end Basics (02)

CSS

Practice requirements

The background image

Text and font related styles

Related Posts