Home > Developer > Web Develop
The front-end development of systematic learning tutorials, front-end development is a required curriculum for the backend programmer, this course focuses on two points:
1, the actual development of the knowledge to be used
2. The knowledge to be used in the interview
HTML is the initials of hypertext mark-up Language, meaning Hypertext Markup Language, hyper-text refers to hyperlinks, tags refers to the label is a language used to make Web pages, the language is composed of a label, Files made in this language are saved as a text file with a file extension of HTML or HTM.
HTML Document BASIC structureThe basic structure of an HTML is as follows:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title>Page title</title> </Head> <Body>Web page display content</Body></HTML>
The first line is the document declaration, the second line of "
An HTML file is a Web page, the HTML file is opened with an editor to display text, you can edit it in text, if opened in a browser, the browser will follow the description of the label content to render the file as a Web page.
Quick creation of HTML documentsAfter creating a new HTML document, you can quickly create an HTML document using shortcut keys. Shortcut key:!+tab key, or Html:5+tab key
1.2-html Label entry tag syntax:Learning HTML language is to learn the use of tags, html commonly used tags have more than 20, learn the use of these tags, basically learned the use of HTML.
How to use the label:<!--1. Tags appearing in pairs: -<H1>H1 title</H1><Div>This is a div tag</Div><P>This one paragraph tag</P><!--2, a single occurrence of the label: -<BR><imgsrc= "Images/pic.jpg"alt= "Picture"><!--3. Labels with attributes, such as SRC, Alt, and HREF, are all attributes -<imgsrc= "Images/pic.jpg"alt= "Picture"><ahref= "Http://www.baidu.com">Baidu Network</a><!--4, the label of the nesting -<Div> <imgsrc= "Images/pic.jpg"alt= "Picture"> <ahref= "Http://www.baidu.com">Baidu Network</a></Div>Block element label (row element) and inline element label (inline Element)
The label will appear as a block on the page. In addition to being shown as blocks, they are generally divided into the following two categories:
Block elements: A row is exclusive by default in the layout, and the elements after the block elements are arranged in line wrap, and the default width of the block element is equal to the width of the parent element, even if it is set to a small width.
Inline elements: Elements can be arranged in a row, the width of the height is invalid, its width is open by the content, the inline elements will have a small gap between the default.
<H1>First Level title</H1><H2>Second Level title</H2><H3>Level Three title</H3><h4>Level four title</h4><h5>Level five title</h5><h6>Level six title</h6>2, paragraph label, represents a text paragraph in the document, in addition to having the basic characteristics of block elements, but also contains the default margin
3, universal block container label, representing a piece of content in the document, with block element basic characteristics, no other default style<p>本人叫张山，毕业于某大学计算机科学与技术专业，今年23岁，本人性格开朗、稳重、待人真诚、热情。有较强的组织能力和团队协作精神，良好的沟通能力和社交能力，善于处理各种人际关系。能迅速适应环境，并融入其中。</p><p>本人热爱研究技术，热爱编程，希望能在努力为企业服务的过程中实现自身价值。</p>
<Div>This is a DIV element</Div><Div>This is the second DIV element</Div><Div> <H3>Self introduction</H3> <P>I call mysterious, graduated from a university computer science and Technology major, this year 24 years old, I am cheerful, stable, treat people sincerely, enthusiasm. Strong organizational skills and teamwork spirit, good communication skills and social skills, good at dealing with all kinds of interpersonal relationships. Can quickly adapt to the environment and into it. </P></Div>Common inline Element label 1, hyperlink tag, link to another page, with inline element basic features, default text blue, underlined
<ahref= "02.html">Second page</a><ahref= "Http://www.baidu.com">Baidu Network</a><ahref= "Http://www.baidu.com"><imgsrc= "Images/logo.png"alt= "logo"></a>2, Universal inline container label, with inline element basic characteristics, no other default style
3, the picture tag, inserts the picture in the webpage, has the inline element basic characteristic, but it supports the wide height setting.< P > This is a paragraph text that has <span> Special logo or style in paragraph text </span> the text </p>
Other common function label 1, line wrapping label<src= "images/pic.jpg" alt= "picture"/>
2. HTML Comment:< P > This is a line of text,<br> This is a line of text </p>
The HTML document code can insert comments, comments are descriptions and explanations of the code, and the contents of the comments are not displayed on the page, and the methods for inserting comments in the HTML code are:
Common HTML character entities<!-- This is a note -
In the code into paragraph text, if you want to empty space between the text, in the Code hollow multiple spaces, when rendered into a Web page will only display a space, if you want to display more than one space, you can use a space character entity, the code is as follows:
<!-- to indent two text spaces before a paragraph, use a space character entity: - < P > An HTML file is a Web page, the HTML file is opened with the editor display text, you can use </> text To edit it, if opened with a browser, The browser renders the file </> as a Web page according to the label description, and the displayed page can be redirected from one page link to another page. </p>
displaying "<" and ">" on a webpage is mistaken for a label, and you want to display "<" and ">" on the Web page with their character entities, such as:
1.3-html Layout Preliminary Page Layout principle<!-- "<" and ">" Are < and & Gt --> < p > < Div> is a label for HTML < BR > 3 < 5 < br > 5 </ p >
tags in the Web page will be displayed as a block, the first line of the way, the page divided into multiple lines, and then the row inside the column, that is, in the label of the row is nested in the label to represent the column, the nesting of tags to create a superposition effect.
Layout exampleAccording to the principle of page layout and the above example, write out the HTML structure code of the Web page.
Label semanticsIn the layout of the need to use a semantic tag, the use of semantic tags for the purpose of the first is to enable the search engine to better understand the structure of the page, improve the site in the search ranking (also known as SEO), followed by convenient code reading and maintenance.
Tagged with semantics
1. H1~h6: Indicates the title
2. P: Indicates paragraph
3. IMG: Show Pictures
4, A: means the link
Non-semantic tags
1. Div: Represents a piece of content
2. Span: Represents a piece of content within a row
So we can optimize the previous code based on what is displayed on the page, using the appropriate tags.
Html,css Getting Started
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
