Home > Developer > Web Develop
1.1 the relationship between HTML and CSS
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:
1. 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.
2. CSS style is performance . 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.
3. JavaScript is used to achieve special effects on Web pages . 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 .
code example:
1 <!DOCTYPE HTML>2 3 <HTML>4 5 <Head>6 7 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8">8 9 <title>The relationship between HTML and CSS</title>Ten One <styletype= "Text/css"> A - H1{ - the font-size:18px;//Change font size - - Color:#930;//Change font color - + text-align:Center;//Change font position - + } A at </style> - - </Head> - - <Body> - in <H1>Hello world!</H1> - to </Body> + - </HTML>
1.2
recognize HTML tags
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 " title label courage </H1>
"In the third grade ... I don't have the guts to join. " is the paragraph of the article in the webpage,<p></p> is the paragraph label . It's written in the Code on the Web page <p> when the third grade ... I don't have the guts to join. </p>
The picture of the little girl on the webpage, done by the IMG tag, is written in the code on the page
code example:
<!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 next semester, our class in a public class, the teacher put forward a very simple question, the class many students have raised their hands, even the result is much 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> <imgsrc= "Http://img.mukewang.com/52b4113500018cf102000200.jpg" > </Body></HTML>1.3 Syntax for tags
1. tags are enclosed in English brackets < and > , such as is a label.
2. the tags in the HTML are usually paired, with the start and end tags . The end tag has one more/more than the start tag .
Such as:
(1) <p></p>
(2) <div></div>
(3) <span></span>
3. tags and labels can be nested, but the order must be consistent, such as:<div> nested <p>, then </ P> must be placed in front of </div>. As shown in.
4. HTML tags are not case-sensitive, and <H1> are the same, but lowercase is recommended because most programmers are lowercase.
1.4 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.
<body>...</body>
Code Explanation:
1. called the root tag, and all the page tabs are in .
2. tags are used to define the head of a document, which is the container for all head elements. Head elements include <title>,<script>, <style>,<link>, <meta > labels, head tags are described in detail in the next section.
3. The content between <body> and </body> tags is the main content of the page, such as ,<p>, <a>, and other Web content tags, where the contents of the label will be displayed in the browser.
1.5 Understanding Head Tagswell done, let's look at the role of
The following tabs are available in the Head section:
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
<title> tags : The text content between <title> and </title> tags is the title information of the page, It will appear in the title bar of the browser. 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:
<title>hello world</title>
The contents of the <title> tag "Hello World" are displayed in the title bar of the browser, as shown in:
1.6 Understanding code comments for HTMLWhat is code Comments ? 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:
<!-- comment text --
The first chapter of HTML introduction
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
