HTML elements are divided into: block elements and inline elements
Block-level elements: Label element will be a new line begins or ends. [ <H1> <p> <table > elements currently tag to a separate line}
Inline elements: display data does not start a new line. [ <a> <img> <td> will be piled up]
You need to consider the overall appearance of the page layout views, to perform detailed design. Good page layout can be a good look attractive, bring more traffic. So good page layout is very necessary, reasonable and realistic page setup is important
html events:
Required to trigger certain actions occur, the need to support the event
Html in many types of events, html4 adds the ability to trigger the browser, html5, it also added a lot of events.
For example, windows event properties
Event form
For the realization of the event web page functionality is very important, detailed event types and attributes can be viewed on the W3C
https://www.w3school.com.cn/tags/html_ref_eventattributes.asp
CSS (Cascading Style Sheets), determines how the page display elements
There are three ways to introduce css:
1, the line mode
Be written directly on the current element, for example,
This mode has the highest priority
2, inner fitting formula
In the <head> write pattern using @import in <head> </ head> between applications, for example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" >
@import url(second.css);
</style>
</head>
<body>
<div id="p">this is first title</div>
</body>
</html>
css file is as follows:
As follows:
3, outside the chain
<link> import external css files; import external style;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="first.css">
</head>
<body>
<div id="hacker">this is first title</div>
<p class="china">this is second title</p>
</body>
</html>
css file is as follows
Css syntax:
Selector { attribute a: VALUE1 ; Attribute 2 : value2 ; }
Selector
The first case: the tag name affect other similar label
The second case: the above mentioned id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">行内模式
#hacker{
color:green;
text-align: center;
}
#china{
color: red;
text-align: center;
}
</style>
</head>
<body>
<div id="hacker">i am hacker</div>
<div id="china">i am chinese</div>
</body>
</html>
The third case: class , can be used in different elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.test{
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1 class="test">this is first title</h1>
<p class="test">this is second title</p>
</body>
</html>
Box mode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" >
#p{
background-color: gray;
width: 300px;
border: 25px solid pink;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div id="p">this is first title</div>
</body>
</html>
表现为：
