index
1. Technical structure of web pages: HTML, CSS, JS(javascript)
HTML (structure standard) - provide web content (provide different content through different tags)
CSS (style standard) - responsible for the style layout of web content
JS (standard of conduct) - responsible for controlling the content transformation of web pages
2.HTML - hypertext markup language
A web page is an html, and the html code is usually written in an html file that can be parsed directly by the browser
1) Basic structure of html: an html tag contains a head tag and a body tag
html tag - represents the entire web page
head tag - the part at the top of the page that is responsible for displaying icons and titles (also responsible for invisible setting content)
body tag - responsible for the display of web content
2) Tag syntax: html provides different web page contents through different tags. Tags are divided into two types in terms of structure:
a. Double Tags: < tag name attribute name 1 = attribute value 1 attribute name 2 = attribute value 2... > tag content < / tag name >
b. Single tag: < tag name attribute name 1 = attribute value 1 attribute name 2 = attribute value 2... >, < tag name attribute name 1 = attribute value 1 attribute name 2 = attribute value 2... / >
explain:
a. There must be no gap between the tag name and < and > (note the gap)
b. Attribute values, regardless of the type of data, must be enclosed in double quotes
c. The label content of double label can be any content: including pure text, one or more labels, or a mixture of text and labels
d. The tag name is not created by the programmer, but provided by html
<!-- html Version Description: html It means html5 --> <!DOCTYPE html> <!-- Basic structure of web page --> <html> <head> <!-- Set page encoding --> <meta charset="utf-8" /> <!-- Set page title --> <title>hello word</title> </head> <body> </body> </html>
Label in head
<!DOCTYPE html> <html> <head> <!-- 1.Set encoding method --> <meta charset="utf-8"> <!-- 2.Set page title --> <title></title> <!-- 3.Set Web page icon --> <link rel="icon" type="image/ico" href="img/jd_logo.ico"> </head> <body> </body> </html>
Text label
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 1.Title label: h1~h6 --> <h1>==========1.Title label==========</h1> <h1>Primary title</h1> <h2>Secondary title</h2> <h3>Tertiary title</h3> <h4>Four level title</h4> <h5>Five level title</h5> <h6>Six level title</h6> <h1>==========2.Paragraph label==========</h1> <p>With the delta strain raging all over the world, the international epidemic situation is becoming more and more serious. However, Delta's police The report has not been released, and the mutant strain called "ramda" began to rise again.</p><p>A voice pointed out that, People are not aware of the harmfulness of ramda, but it may become a potential threat beyond the delta strain.</p> <!-- 3.Normal text labels(Inline text label):font,span,label --> <h1>==========3.Normal text labels==========</h1> <span>Release time: 08-09</span> <span>22:19</span> <span>Official account of China Youth Network</span> <!-- 4.Labels and symbols related to text effects Bold: b,strong Tilt: i,em Line feed: br(Pressing enter directly in the code is invalid for line feed) Space: (Empty one pixel); &emsp(Empty a space); --> <h1>==========4.Labels and symbols related to text effects==========</h1> <b>  In fact, this new crown variant strain, first discovered in Peru, has been widely spread in many countries in South America, And is spreading to Europe.<br></b>in the past<i>4 week</i>Inside,<em>Ramda</em>It has been in more than 30 countries such as Britain, Canada and Australia Spread and attracted many countries<strong>medical officer</strong>Your attention. </body> </html>
Pictures and hyperlinks
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 1.Picture label:img 1)src Property: set picture address(It can be local or network) 2)title Properties: set picture title(Only when the mouse hovers over the picture will it be displayed) --> <h1>------------1.Picture label-------------</h1> <img src="img/dog.jpg" title="dog"> <img title="Sister bao'er" src="https://img2.baidu.com/it/u=1810171082,1266198879&fm=26&fmt=auto&gp=0.jpg" > <!-- 2.Hyperlink: a --> <h1>------------2.Hyperlinks-------------</h1> <!-- Text hyperlink --> <a href="https://www.baidu. Com "> Baidu</a> <!-- Picture hyperlink --> <a href="https://www.baidu.com"> <img src="img/dog.jpg" > </a> <a href="https://www.baidu.com"> <div id=""> <img src="./img/jd_logo.ico" alt=""> <p>A paragraph of text</p> </div> <img src="img/dog.jpg" > </a> </body> </html>
list
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 1.Unordered list: ul-li --> <ul> <li>Python</li> <li>java</li> <li>H5</li> <li>UI</li> </ul> <!-- 2.Ordered list: ol-li --> <ol> <li>Python</li> <li>java</li> <li>H5</li> <li>UI</li> </ol> </body> </html>
input tag
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 1.Normal input box 1)value attribute - Contents of input box --> <input type="" value="Xiao Ming" placeholder="Please enter your name"/> <!-- Built in clear button --> <input type="search" value="" placeholder="Search for movies,TV play"/> <!-- 2.radio button --> <input type="radio" name="sex" id="s1" value="" /><label for="s1">male</label> <input type="radio" name="sex" id="s2" value="" /><label for="s2">female</label> <br> <!-- 3.Check button --> <input type="checkbox" name="ins" id="i1" value="" /><label for="i1">Basketball</label> <input type="checkbox" name="ins" id="i2" value="" /><label for="i2">Table Tennis</label> <input type="checkbox" name="ins" id="i3" value="" /><label for="i3">badminton</label> <br> <!-- 4.Normal button --> <input type="button" name="" id="" value="determine" /> <input type="button" value="cancel" /></button> <input type="button"><img src="img/kais.png" ></button> <!-- 5.Other functions --> <input type="color" name="" id="" value="" /> <input type="file" name="" id="" value="" /> <input type="date"> <input type="datetime-local" name="" id="" value="" /> </body> </html>
div tag
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- div label: 1.Provide content as a normal double label 2.As a box, the content in the web page is divided into blocks and groups --> </body> </html>
css syntax
css(cascading style sheet) is used to add style and layout to labels
1.css syntax
Selector {property 1: property value 1; property 2: property value 2;...}
explain:
1) Selector - select the label to which you want to add the style. (in case of inline style, the selector {} needs to be omitted)
2) Attribute - attribute names are determined by css, and different attributes represent different styles
Common attributes: Color - text color; Background color - background color; Font size - font size; Width - width; Height - height; Border - border
2. Location of CSS code
1) Inline style sheet: write css code in the style attribute of the label
2) Internal style sheet: write css code in the style tag
3) External style sheet: write css code in css file, and then import it through link tag in html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- External style sheet -->
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<!-- Inline Style Sheet -->
<p style="color: blue;font-size: 25px;">I'm paragraph 1</p>
<!-- Internal style -->
<style type="text/css">
span{
color: crimson;
border: 1px solid deeppink;
}
</style>
<span>I am span1</span>
<a href="https://www.baidu. Com "> Baidu</a>
</body>
</html>
selector
The function of selector: select the label in the web page
1. Label selector (element selector) - directly use the label name as the selector and select all specified labels
For example: a{} - select all a tags; p {} - select all p tags
2.id selector - add # as a selector before the id attribute value, and select the tag whose id attribute value is the specified value (the id of the same page is unique)
For example: #p{} - select the tag whose id attribute value is p
3.class selector (class selector) - add before the class attribute value As a selector, check that all class attribute values are labels of the specified values
For example: P {} - select the label whose class attribute value is p
4. Group selector - separate multiple selectors with commas as as one selector, select each selector separated with commas, and select all labels
For example: P, #p1 c1 - select all P tags and tags whose id is P1 and tags whose class is c1
5. Descendant selectors - multiple selectors are separated by spaces
For example: div p{} - select the P tag of all div descendants (select the P tag in all DIV); Div and P are descendants
6. Descendant selectors - multiple selectors are separated by >
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 1.tag chooser */
/* p{
color: red;
} */
/* a{
color: red;
} */
/* 2.id selector */
/* #p1{
color: #8A2BE2;
} */
/* 3.class Selector (class selector) */
/* .c1{
color: cornflowerblue;
} */
/* 4.Group selector */
/* p,.c1{
color: red;
} */
/* 5.Descendant Selectors */
/* div p{
background-color: aquamarine;
} */
/* 6.Progeny selector */
/* div>p{
background-color: aquamarine;
} */
.c2{
color: #ffff7f;
}
/* Check the tag with both class values c1 and c2 */
/* .c1.c2{
color: #DC143C;
} */
</style>
</head>
<body>
<h1>I'm Title 1</h1>
<div>
<p class="c1 c2">I'm paragraph 1</p>
<a href="">My hyperlink 1</a>
<p id="p1" class="c1">I'm paragraph 2</p>
<div id="">
<span class="c1">
I am span1
</span>
<p>I'm paragraph 3</p>
<span>
<p>I'm paragraph 5</p>
</span>
<a href="">I'm hyperlink 2</a>
</div>
<a class="c1" href="">I'm hyperlink 3</a>
</div>
<p>I'm paragraph 4</p>
</body>
</html>