Home > Developer > Web Develop
Http://www.cnblogs.com/wanglongshuai/p/[email protected] Wang Lungyu
1, Code First experience, make my first page<! DOCTYPE html><html> <head> <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "> <title> make my first page title> </head> <body> <h1>Hello World</h1> </ body></HTML> Learning the basics of Web front-end development requires mastering: HTML, CSS, JavaScript language. Let's look at the next two technologies that are used to accomplish something:
HTML is the carrier of Web content. The content is the information that the Web creator puts on the page to let the user browse, can contain text, picture, video and so on.
CSS styles are expressive. Just like a web coat. For example, the title font, color changes, or for the title to add background pictures, borders and so on. All these things that change the appearance of the content are called performance.
JavaScript is used to achieve special effects on a Web page. such as: Mouse over Popup drop-down menu. or the mouse slide over the background color of the table changes. There is also the rotation of the Focus news (news pictures). It can be understood that there are animations and interactions that are generally done with JavaScript.
Let's learn from a Web page to have a preliminary understanding of HTML tags. The usual people say that the Internet is to browse a variety of Web pages, these pages are made up of HTML tags. The following is a simple Web page. As follows:
Let's analyze what HTML tags this page consists of:
"Courage" is the title of the page content article, which is the title tag, which is written in the code on the page .
"In the third grade ... I don't have the guts to join. "is the paragraph tag of the article in the Web page ，<p></p> . It's written in the Code on the Web page.<p>三年级时...我也没勇气参加。</p>
The picture of the little girl on the webpage, done by the IMG tag, is written in the code on the page.
eg
<! DOCTYPE html><Html><Head><Metahttp-equiv="Content-type"Content="Text/html; Charset=utf-8 "><Title> Recognize HTML tags</Title></Head><body> <h1> courage </h1> <p > Third grade, I was a timid little girl, class never dare to answer the teacher asked questions, afraid to answer the wrong teacher will criticize me. Have never had the courage to answer the questions asked by the teacher. I didn't have the courage to take part in the school events. </p> <p > to the third grade in the next semester, our class in a public class, the teacher put forward a very simple question, the class many students have raised their hands, and even the results of a lot worse than me, also raised his hand, also said: "I come, I come." "I looked around for four weeks, so I didn't raise my hand. </p> < IMG src= "http://img.mukewang.com/52b4113500018cf102000200.jpg "> </body></ HTML> To summarize, so to speak, every content in a Web page is displayed in a browser and is stored in a variety of tags.
4, the syntax of the label
- Tags
<和> are enclosed in English angle brackets, such as a label.
- The tags in the HTML are usually paired, with the start and end tags. The end tag is one more than the start tag
/ .
Such as:
(1)<p></p>
(2)<div></div>
(3)<span></span>
- tags and tags can be nested, but the order must be consistent, such as:
<div> inside nested <p> , then </p> must be placed in </div> front. As shown
- HTML tags are case-insensitive,
and <H1> are the same, but are recommended in lowercase because most programmers are lowercase.
5. Understanding the basic structure of HTML filesIn this section we will learn the structure of the HTML file: An HTML file has its own fixed structure.
<html> <head>...</head> <body>...</body></html>
Code Explanation:
1. called the root tag, all the page tags are in .
Labels are used to define the head of a document, which is the container for all head elements. Header elements have,,,, and <title> <script> <style> <link> <meta> so on, the head tag in the next section will be described in detail. - Content
<body> </body> between and tags is the main content of the Web page, such as,, and <a>
6. Recognize head tagsNow look at the role of the label. The header of the document describes various properties and information about the document, including the title of the document, and so on. Most of the data contained in the header of a document is not actually displayed to the reader as content.
The following tabs are available in the head section:
<head> Span class= "Hljs-tag" ><TITLE> </title> < meta> <link> <style> ... </style> < script> ... </script></ HEAD>
<title>Tags: the <title> </title> text content between and tags is the title information of the page, it appears in the browser's title bar. The title tag of the Web page is used to tell the user and search engine the main content of this page, search engine can through the page title, quickly determine the theme of the page. The content of each page is different, each page should have a unique title.
For example:
<head> <title>hello world</title></head>
<title>The contents of the tag "Hello World" are displayed in the title bar of the browser, as shown in:
7. Understanding code Comments for HTMLWhat is a code comment? The purpose of the code comment is to help the programmer annotate the code, and after a while to look at the code you have written, you can quickly recall the purpose of the code. Code comments are not only convenient for the programmer to recall the use of the previous code, but also to help other programmers quickly read the functionality of your program, to facilitate the cooperation of many people to develop web code.
Grammar:
<!--注释文字 -->
For example: the 8th and 12 lines of the code of the editor on the right are all, but you will find that the comment code is not displayed in the results window.
HTML+CSS Study Notes (1)-HTML introduction (reprint)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
