当前位置：网站首页>Web development from entry to proficiency I (detailed)

Web development from entry to proficiency I (detailed)

2022-07-18 22:31:00 【Lan Zhou Qianfan】

notes ： Originality is not easy. , Unauthorized , Declined reprint . Please observe csdn Blog agreement .     Every time I learn something, I like to summarize , By the way, I can share it with you . therefore , Writing a summary of knowledge points on the blog has undoubtedly become our favorite summary method at present .

Let's introduce it web Development     web The origin of : 1989 year CERN（ CERN ） Zhongyou Tim Berners-Lee The leading group submitted a report on Internet A new protocol and a documentation system that USES the protocol , The team named the new system World Wide Web, Its purpose is to make it available to scientists around the world Internet Communicate your work documents . The new system is designed to allow Internet Any user can search and retrieve documents from the database of many document service computers .1990 end of the year , The basic framework for the new system is already in place CERN Developed and implemented in a computer ,1991 The system was ported to other computer platforms in 1994 , And officially released . So! ,web Also called global wide area network .     The main forms of expression ：1： Hypertext , At present, the most commonly used is HTML This loser text , And, of course, rich text , I haven't seen this rich text , It should be used less . Now you may have heard of hypertext for the first time or HTML Netizens have questions ---- What exactly is hypertext ,HTML What is it .

    Hypertext ： In short , seeing the name of a thing one thinks of its function , Hypertext . It uses hyperlinks to combine the text information in different spaces into a network text . The so-called hyperlink is to allow us to connect with other web pages and sites . What does that mean ？ It is this kind of text that can add links , Realize the jump of web page . by comparison , Our text documents don't have this function , our word Documents don't have this function , Only hypertext can be linked to the outside .     HTML： Let's start with the picture above , Browsers like Google Chrome have the ability to check elements or view source code , We open a web page , Check the element or view the source code , We can all see HTML. as follows ： Let's see , In fact, its overall framework is like this ,html label , And the following head, It's the head , also body, It's the main part . Finally, there is an end HTML label .

Let's open it and see , Just to show the overall framework , Just fold it up . Let's expand and see . as follows ： See no , Are there many , Among them is metal,title,script wait . Among them is src, This is often where links are placed . Let's talk about it later .

2: Hypermedia , Let's talk about it briefly , Is a combination of hypertext and media information , There can be audio , Pictures, etc. , for example , We can write a hypertext that can play music . 3： Hypertext transfer protocol , In short , We often like http,https Wait, such an agreement , Is a network protocol for transmission . Write a HTML The file of ： notes ： First time ape friends , It is recommended to use notepad++, Or directly use the notepad that comes with the computer ok, First time study , Or ape friends who are not very skilled in code , Don't rush to use loser Software , At present, we should exercise our hands-on ability . Otherwise, they will rely too much on software . Here I use notepad To write . Because I think I'm good at cooking , You need to exercise your hands-on ability , Familiar with code .     1：ok, Let's first create a text file named suffix .html, Notice that it must be .html.     2： Write a html file , Write Hello World. We use it notepad++ Open the file just created . Let's write these sentences ： Here is the source code 

<DOCTYPE html><h1>
<html>
	<head>
		<body>
		</body>
	</head>	
			<h1>web Basics </h1>
				<p>Hello World</p>
			<a href="https:blog.csdn.net" target="_blank"> Welcome to blog </a>
			
</html>

The following is a related note I wrote for you , Distinguish it from the code above , Don't confuse notes .

<DOCTYPE html><h1><!-- notes ： Affirming html The fixed format of -->
<html><!-- notes ：html The beginning of the label -->
	<head><!-- notes ：head The beginning of the head -->
		<body><!-- notes ：body The beginning of the head -->
		</body><!-- notes : The end -->
	</head>	<!-- notes : The end -->
			<h1>web Basics </h1><!-- title -->
				<p>Hello World</p><!-- The paragraph -->
			<a href="https:blog.csdn.net" target="_blank"> Welcome to blog </a><!-- notes ： Here I add the following link -->
			
</html>	<!--html The end >

After we write these, save and close , Then click Open , Let's see the effect , Will display on your browser , I am here chrome browser .

See the blue font of the picture above , Click to go to the link I gave in the source code , Is the following page , Enter the blog .

In fact, we can also add such as jump in link , We write like this , there head Now I join meta label , among http-equiv="refresh" Just set up a jump ,content="5’ representative 5 Seconds to jump , The following link is the link to jump .

<DOCTYPE html><h1>
<html>
	<head>
		<meta http-equiv="refresh" content="5;https://blog.csdn.net/jgdabc">
		<body>
		</body>
	</head>	
			<h1>web Basics </h1>
				<p>Hello World</p>
			<a href="https:blog.csdn.net" target="_blank"> Welcome to blog </a>
			
</html>

After we click welcome to visit the blog , Enter the blog page , then 5 Seconds to enter the link I want to jump . as follows ： Here is my blog page

What else can you do ,html It's more than that , Let's demonstrate inserting background images and music and text , And the related operations of modifying font color . I don't say much nonsense , On the code chip ：

<!DOCTYPE html>
<html>
</head>	
<body background ="E:/ Aestheticism .jpg"style="background-repeat:no repeat;
background-size:100% 100%;background-attachment:fixed;">
<video width="160" height="120" controls>
	<source src ="E://catch_music// heavy snow .mp3"type="video/mp4">
</video>	
        <h1 style = "text-align:center"> Snow song </h1>
		<a href="https://blog.csdn.net/jgdabc/article" target="_blank"style="text-decoration:none;"><font color="red" > Click on ： Welcome to blog </a>
		<h2>jgdabc</h2>
		<font color="yellow"size=5>
		<p style="text-align:center">
			<pre>
			 The vast sky meets the earth , The trees swayed in the north wind .<br>
			 The snowflakes all over the sky are like white butterflies , So silent , So pure .<br>
			 It snowed heavily , It snowed in the sky , May you say goodbye to your troubles , Forget your sorrow , May you be happy .<br>
			 winter , A thin layer of snow , Like a huge soft wool blanket , Cover and pick on this vast wasteland , Shining with cold silver .<br>
			 If you can , I want to turn into a snowflake in winter , Bring some peach blossom fragrance , Then it falls on your shoulder <br>
			</pre>
        </p>

</html>

Let's look at the notes 

<!DOCTYPE html>
<html>
</head>	
<body background ="E:/ Aestheticism .jpg"style="background-repeat:no repeat;
background-size:100% 100%;background-attachment:fixed;">
<video width="160" height="120" controls><!-- Set the player here -->
	<source src ="E://catch_music// heavy snow .mp3"type="video/mp4"><!-- Here is a link to my music , And format -->
</video>	
        <h1 style = "text-align:center"> Snow song </h1><!-- Here is the topic I gave you -->
		<a href="https://blog.csdn.net/jgdabc/article" target="_blank"style="text-decoration:none;"><font color="red"> Click on ： Welcome to blog </a>
		<h2>jgdabc</h2><!-- This is another topic -->
		<font color="yellow" size =5><!-- This is the color and size I set for the following text -->
		<p style="text-align:center"><!-- Here, set the center display , Here are the paragraphs -->
			<pre><!--pre Can help me manipulate spaces -->
			 The vast sky meets the earth , The trees swayed in the north wind .<br><!--br Line breaks can be set -->
			 The snowflakes all over the sky are like white butterflies , So silent , So pure .<br>
			 It snowed heavily , It snowed in the sky , May you say goodbye to your troubles , Forget your sorrow , May you be happy .<br>
			 winter , A thin layer of snow , Like a huge soft wool blanket , Cover and pick on this vast wasteland , Shining with cold silver .<br>
			 If you can , I want to turn into a snowflake in winter , Bring some peach blossom fragrance , Then it falls on your shoulder <br>
			</pre>
        </p>

</html>

good , Let's see the effect ： as follows ：

There's a player on it , I gave Wang Ziyu's snow song , I personally like this song very much , Super love , ha-ha , So add . The red ones on the left are the link addresses of my blog , And the name of my blog , The yellow in the middle is a beautiful sentence combined with snow . The background is also a beautiful picture . I'm so tired , Shoulder is in pain , That's all for today , More basic , Welcome to the next chapter , Also welcome ape friends to leave messages and give advice .

原网站

版权声明
本文为[Lan Zhou Qianfan]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/199/202207161404370474.html

边栏推荐

猜你喜欢

随机推荐