Introduction to HTML and javascript

1. HTML

HTML is a hypertext markup language (Hypertext Markup Language), which is a tool for static page layout.

We know that a web page usually consists of three parts: structure, style and behavior html In fact, it is the markup language that determines the structure of a web page. The style is the so-called cascading style sheets (CSS). The behavior is the special effects of the web page controlled by javascript.

As for why I didn't talk about CSS alone, the main reason is that in practical applications, CSS is often inseparable from various tags in Html, that is, the use of the two appears together. For example, the layout of tags is equivalent to a person, and CSS is equivalent to a beautiful coat on this person.

2. javascript

javascript is a scripting language used in front-end development, but it has nothing to do with Java. js is just a script running on a web page, while Java is a programming language used for background development. It is a pure object-oriented strong type language running in Java virtual machine. Of course, js I discussed here is actually a weak type language. The so-called weak type simply means that all variables can be declared with one type, var, Including number type, string type, boolean type, undefined type and null type; These five types are the basic data types in js. In addition, there are composite data types, including functions, objects and arrays. For the so-called strongly typed language, I will briefly say here that there are strict restrictions on the declaration of variable types, such as integer should be declared as int, floating point float or double, character shape as char, etc. for Java, the type checking mechanism is very strict, which is stricter than C/C + +. Interested readers can learn about some of this strongly typed programming language, I won't introduce it here.

Quick start methods for HTML and javascript

For those who want to learn a new programming language, I think the prerequisite to learn the language well is to prepare one or more "compilers". From these two languages, most people may choose to use tools such as dreamweaver and HBuilder

But I think it's best for beginners to use EditPlus4.0. The main feature of this tool is that we don't bring any tips when writing code, which is very beneficial to improve our ability to write code. The following figure is a screenshot of this tool.

Let me talk about how to get started with HTML and javascript.

1. Getting started with HTML

This language is a language for label style operation, which controls the layout and style of the whole web page. Therefore, the proficiency of label style operation is the factor that determines whether you can master the language. So when we just learn this language, we must be familiar with the relevant labels.

In general, labels can be divided into three types: inline labels, block level labels and inline block labels. Using these three tags, we can control the structure of the whole web page. Of course, CSS style is indispensable.

What do these three labels mean?

In line labels: there can be multiple such labels in a line, and the setting of width and height values will not take effect unless display:block is added to this label; Or display: inline block; Or float:left; Or float:right; One of the attributes. These tags include: < span > < / span >, < a > < / a >, < strong > < / strong >, < EM > < / EM >, < label > < / label >, < input > < / input >, < Select > < / Select >, that is, there will be no line breaks between these tags. For example, take < span > < / span > tags as an example. In the layout, there is such a content: < span > 111 < / span > < span > 222 < / span >, through "visual method" We soon know that there is no line break between "111" and "222", that is, "111222" is displayed in the web page, so there is no line break, because they are in the in-line label, and we can draw the same conclusion from other such labels.

Block level labels: such labels will take effect when we set the width and height values. This label also has a feature of being "overbearing". A label needs to monopolize one line, and it "doesn't like" to share the space of that line with other labels, unless we artificially take "coercive" measures and call them "unwilling" In doing so, we have to do so. And our "coercive measures" are to give these "disobedience" Add a float:left; or float:right; attribute to the tag of so that they can be displayed in the same row. Such common tags are: < div > < / div >, < form > < / form >, < Table > < / Table >, < p > < / P >, < pre > < / pre >, < H1 -- H6 > < / H1 -- H6 >, < DL > < / dl >, < ol > < li > < / Li > < / OL >, < UL > < li > < / Li > < / UL >.

2. javascript

If you want to learn javascript tags, you must be able to win. Before learning this scripting language, we must first have a "compiler". In fact, this is the same as html, that is, js code is actually nested in html code, but js code needs to be nested in tags to run.

If you have learned some programming languages before, it is not very difficult to get started with js. Because the thinking of each programming language is similar, and js is a weak type language, it may be easier for some people with programming foundation to get started. The following is an example of the application of js code. The picture behind the code is the effect picture (actually the function of a drop-down menu).

<!DOCTYPE html>
<html> 
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}			
			.search {
				width: 760px;
				height: 70px;
				margin: 0 auto;
			}			
			.logo {
				float: left;
				width: 188px;
				height: 70px;
				margin-right: 44px;
			}			
			.logo img {
				width: 100%;
				height: 100%;
			}
			/*Menu style start*/
			.menu {
				float: left;
				width: 60px;
				height: 40px;				
				margin-top: 11px;
				border: 2px solid dodgerblue;
				border-right: none;
			}
			.menu #hasmenu{
				width: 60px;
				height: 40px;
				line-height: 40px;
				padding-left: 10px;
				color: grey;							
			}
			.menu .up{background: url(img/up.png) no-repeat 46px center;}
			.menu .down{background: url(img/down.png) no-repeat 46px center;}
			.menu .submenu {
				width: 60px;
				height: 223px;
				margin-left: -11px;						
				border:1px solid dodgerblue;	
				border-top: none;	
				display: none;
				background: #FFFFFF;
			}
			.menu .submenu li{
				width: 60px;
				height: 25px;
				line-height: 25px;
				text-align: center;
				color: grey;
			}

End of menu style

			.input-text {
				width: 200px;
				height: 40px;
				margin-top: 11px;
				border: 2px solid dodgerblue;
				border-left: none;
			}			
			.btn {
				width: 120px;
				height: 40px;
				border: 0;
				background: dodgerblue;
				color: #fff
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var oHasMenu = document.getElementById('hasmenu');//Get the element or node of the menu item through the id value
				var oSubMenu = document.getElementById('submenu');//Get the element or node of the whole submenu item through the id value 
				oHasMenu.onmouseover = function() {//When the mouse passes the menu item, the submenu is displayed and the upward arrow is displayed at the same time
					oHasMenu.className='up';
					oSubMenu.style.display = 'block';
				}
				oHasMenu.onmouseout = function() {//When the mouse moves out of the menu item, the submenu is hidden and the downward arrow is displayed 
					oHasMenu.className='down';
					oSubMenu.style.display = 'none';
				}
			}
		</script>
	</head> 
	<body>
		<div class="wrap"><--Start with the overall container-->
			<div class="head"><--Head start-->
				<div class="search"><--Search box start-->
					<p class="logo"><img src="img/logo.png" /></p>
					<ul class="menu">
						<li class="down" id="hasmenu">Webpage
							<ul class="submenu" id="submenu">
								<li>Webpage</li>
								<li>picture</li>
								<li>video</li>
								<li>music</li>
								<li>Map</li>
								<li>pose a question</li>
								<li>Encyclopedias</li>
								<li>Journalism</li>
								<li>shopping</li>
							</ul>
						</li>
					</ul>
					<input type="text" class="input-text" />
					<input type="button" class="btn" value="Sogou search" />
				</div><--End of search box-->
			</div><--Head end-->
		</div><--End of overall container-->
	</body> 
</html>

The above is the introduction to HTML and JavaScript. I hope it will help you. JavaScript is still a little difficult. It is suggested that you can learn it by video, which is easier to understand and master quickly

The power node was explained by Lao Du JavaScript tutorial , for readers who do not have any Java foundation, let you learn from introduction to mastery. It mainly introduces some core knowledge of Java foundation, so that everyone can learn and understand java programming better and more conveniently.