From the software classification began to learn programming language, mainly for software development, software in accordance with the intended use can be divided into system software and application software, but also according to different software programs and data storage location can be divided into stand-alone software, C / S software architecture, the development of different ways B / S structure software, different software architecture, interface:
- Stand-alone software: software programs and data are stored in the client interface: GoQt, GXUI library
- C / S (Client / Server) architecture software: software programs and data that there is a part of the client, there is a part of the server-side interface: GoQt, GXUI library
- B / S (Broswer / Server) software architecture: the presence of all the software programs and data server interface: Web (Web)
Also known as web front-end development front-end development, providing interface solutions for the B / S structure of the software.
1.1html overview of the basic structure of the document and html
html Overview
HTML is the first letter of HyperText Mark-up Language shorthand, meaning that HTML, hypertext refers to the hyperlink, tag refers to the label, is a language used to create web pages, the language of one of label composition, preservation of this language crafted file is a text file, the file extension html or htm.
The basic structure of an html document
Html a basic structure as follows:
<! DOCTYPE HTML>
<HTML>
<head>
<Meta charset = "UTF-. 8">
<title> Page Title </ title>
</ head>
<body>
page display content
</ body>
</ HTML>
The first line is the declaration document, the second line "<html>" tag and the last line "</ html>" is defined integrally html document, "<head>" tag and the "<body>" tag which is the first layer child element, "<head>" tag which is responsible for the page header and defining some settings, including coding format definition set page, the chain css style files and javascript files, a content setting is not displayed on the page, the title content will be displayed in the title bar, writing content displayed on a page "<body>" inside.
A html file that a Web page, html file with an editor to open the display of text, you can edit it in text mode, if you open the browser, the browser will follow the label describing the contents of the file rendered page.
html files to quickly create
After a new html document, you can quickly create html document with the way shortcuts. Shortcuts:! + Tab key, or html: 5 + tab key
1.2 html tags Getting
Tag syntax:
Learning the language is to learn html tag usage, commonly used html tag more than 20, learn to use these labels, it's basically learned how to use HTML.
The use of the label:
<- 1 label in pairs:! ->
<h1> h1 heading </ h1>
<div> This is a div tag </ div>
<the p-> The paragraph tag </ the p->
<-! - 2, in each occurrence tags: ->
<br>
<IMG the src = "images / pic.jpg" Alt = "image">
<- 3, the label tape properties, such as src, alt, and href so! is a property ->
<img src = "ImagesRF Royalty Free / pic.jpg" alt = "Image">
<a href="http://www.baidu.com"> Baidu net </a>
<-! 4, nested tags ->
<div>
<img src = "ImagesRF Royalty Free / pic.jpg" alt = "Image">
<a href="http://www.baidu.com"> Baidu net </a>
< / div>
Tag block elements (rows of elements) and the element tags inline (inline elements)
Tag will be displayed as a box on the page. Shown as block addition, they generally fall into the following two types:
block elements: the default layout in a separate line, the default width equal to the width of the parent, for an element of a transducer block elements arranged in a row.
Inline elements: between elements may be arranged in a row, width and height setting is invalid, it is stretched by the width and height of the content, there is a small spacing between the elements of the default, and is aligned with the baseline (align text at the bottom).
Common block element tag
1, title tag indicating the title of the document, in addition to having characteristics substantially block elements, but also contains the default font size and margins
<h1> a title </ h1 of> <H2> subheadings </ H2> <H3> three title </ H3> <H4> four title </ H4> <H5> five title </ h5> <h6> title six </ h6>
2, paragraph tag, indicates a text document, paragraphs, in addition to having characteristics substantially block elements, but also contains the default margins
<p> I called Zhang Shan, a graduate of computer science and technical expertise of a university, 23 years old, I am cheerful, stable, sincere, passionate. Have strong organizational skills and team spirit, good communication skills and social cross ability, good at dealing with all kinds of relationships. Can quickly adapt to the environment and into one. </ the p-> <the p-> I love study technology, love programming, hoping to realize their own values in an effort for the enterprise service. </ p>
3, common blocks container label indicating the content of a document, the basic characteristics of the block elements having no other default style
<div> This is a div element </ div>
<div> This is the second div element </ div>
<div>
<h3> self-introduction </ h3>
<the p-> I called Zhang Shan, a graduate of a university computer Science and technology, 23 years old, I am cheerful,
stable, sincere, passionate. Have strong organizational skills and team spirit, good communication skills and social
cross ability, good at dealing with all kinds of relationships. Can quickly adapt to the environment and into one. </ P>
</ div>
Common inline element tag
1, hyperlinks tags, link to another web page, has the basic characteristics of inline elements, the default text Blue, underlined
<a href="02.html">第二个网页</a> <a href="http://www.baidu.com">百度网</a> <a href="http://www.baidu.com"><img src="images/logo.png" alt="logo"></a> <a href="#">默认链接</a>
2, generic inline container labels having characteristics substantially inline elements, no other default style
<P> This is a paragraph of text, paragraph text has <span> specific mark or pattern </ span> Text </ p>
3, image tag, is inserted in the page image, having characteristics substantially inline elements, but it supports the width and height is provided.
<img src="images/pic.jpg" alt="图片" />
Other common features labels
1. Break tag
<P> This is a line of text, <br> this is a line of text </ p>
2, html comments:
html document code can be inserted comments, which are code descriptions and explanations of the content of the comment will not be displayed on the page, html code method is to insert a comment:
<! - This is a comment ->
Common html character entities
Character code into segments, if space between characters want more space, more hollow spaces in the code, when rendered into a web page will display a blank, if you want to display multiple spaces, you can use a space character entities, as follows :
<- before the paragraph indent want two text spaces, use a space character entities:! -> <the p-> a html file that a Web page, html file with an editor to open the display of text, you can use <br /> text edit it, if you open the browser, the browser will follow the label describing the contents of the file <br /> rendered into a web page, the page displayed can jump from one page links to another page. </ p>
Displayed on the page "<" and ">" will be mistaken for a label, want to display "<" and ">" character entities can use them, for example on the page:
! - "<" and ">" character entities <and> ->
<the p->
<div> tag is an html of a <br>
3 <5 <br>
10> 5
</ the p->
1.3 html layout
Page layout principles
Tag will appear in a Web page into one box, the first line manner, the page is divided into multiple rows, and then to divide the line inside the column, which is representing the tag line of re-nested tags to represent the column as a whole accordance with the first overall, after topical, after the first big order to write small structures.
Layout Example
According to an example and the principle of the above page layout, structure of the code write html page.
Semantic tags
In the layout needs as much as possible with the use of semantic tags, with the purpose of using semantic tags first is to allow search engines to better understand the structure of the web and improve the site's ranking in search (also known as SEO), followed by the code easy the read and maintain.
Semantic label tape
1, h1 ~ h6: header represents
2, p: represent paragraphs
3, img: image represents
4, a: represents a link
Without semantic tags
1, div: content represents a
2, span: indicates a row of contents
So we have to based on the content displayed on a page, use the appropriate label, you can optimize the code before.
Introduction 1.4 css
css Overview
To make the style page elements more abundant, in order to allow the content and style of the web page can be split open, CSS thereby idea was born, CSS is Cascading Style Sheets is the first letter of the abbreviation, meaning Cascading Style Sheets. With CSS, html most of the performance style of the label would be abandoned, html only responsible for the structure and content of the documents, forms entirely to CSS, html documents becomes more succinct.
The basic syntax of css
css definition is:
Selector {attribute: value; attribute: value; attribute: value;}
The selector is the name of the style and the associated page elements together, is a desirable property set style attributes, each attribute has one or more values. Colon, semicolon between an attribute value and the next value between attributes and attribute values, and finally a semicolon may be omitted, sample code:
/ * Written annotation styles, single-line or multi-line comment * /
div {
width: 100px;
height: 100px;
background: Gold;
}
1.5 css way of introduction
css way to introduce pages in three ways:
1, inline: The style attribute tag, the direct write pattern on the label.
<div style="width:100px; height:100px; background:red ">......</div>
2, embedded: by style tags, create an embedded style sheet on the page.
<style type="text/css">
div{ width:100px; height:100px; background:red }
......
</style>
3, outside the chain: through the link tags, links an external style file into the page.
<link rel="stylesheet" type="text/css" href="css/main.css">
A selector 1.6 css
1, the tag selector
Tag selector, the selector impact such range, typically used to do some general settings, or in the level selector.
For example:
Color {div: Red}
......
<div> This is a first div </ div> <- - corresponding to the above style!>
<div> This is the second div </ div> <! - corresponding to the above style ->
2, class selector
Select elements by class name, a class can be applied to a plurality of elements, the elements can also be used on a plurality of classes, flexible, reusable, is one kind of most widely css selector.
For example:
.blue{color:blue}
.big{font-size:20px}
.box{width:100px;height:100px;background:gold}
......
<div class="blue">....</div>
<h3 class="blue big box">....</h3>
<p class="blue box">....</p>
3, level selector
Tag is mainly used in a nested structure, the level selector, a combination of the above two selector to write the selector, which may be used in combination with tag selector reduce named, but also through the hierarchy, limiting style range.
For example:
.con{width:300px;height:80px;background:green}
.con span{color:red}
.con .pink{color:pink}
.con .gold{color:gold}
......
<div class="con">
<span>....</span>
<a href="#" class="pink">....</a>
<a href="#" class="gold">...</a>
</div>
<span>....</span>
<a href="#" class="pink">....</a>
1.7 CSS box model elements and attributes
Box model
Elements displayed as a box on the page, similar to a box, CSS box model is the use of the box to do in reality metaphor, to help us set the corresponding style elements. Box schematic model is as follows:
The box named elements, respectively provided corresponding to the style: width of the box (width), the height of the box (height), the box frame (border), the spacing between the frame and the content within the box (padding), and the cassette box the spacing between the (margin).
Setting the width and height
width: 200px; / * set the width of the box, this width is the width of the box content, not the case overall width (difficulty) * / height: 200px; / * set the height of the box, this height is the height of the box content, not the overall height of the box (difficulty) * /
Set the border
setting aside of the border, such as the top of the frame can be set as follows:
border-top:10px solid red;
Wherein the thickness of a wire frame 10px; represents a linear Solid.
The method provided above and the other three sides, like the above 'top' replaced 'left' is disposed on the left, into 'right' is disposed to the right, into 'bottom' base is provided.
If the same four sides, four sides can be combined into one set:
border:10px solid red;
Padding disposed within the pitch
Disposed in four sides of the box the spacing can be set as follows:
padding-top: 20px; / * set top inner spacing 20px * / padding-left: 30px; / * set the left spacing 30px * / padding-right: 40px; / * set within the right spacing 40px * / padding-bottom: 50px ; / * set the inner bottom spacing 50px * /
The above settings can be abbreviated as follows:
padding: 20px 40px 50px 30px; / * value of four clockwise, respectively, is provided on the left and right lower inner margin value of the four directions. * /
Padding can project behind with three values, two values and a values, which are provided as follows:
padding: 20px 40px 50px; / * set the margin to 20px the top, right and left inner margin to 40px, padding bottom * 50px / padding: 20px 40px; / * set the margin to 20px upper and lower, left and right margins within * is 40px / padding: 20px; / * set the margin to the four sides 20px * /
Spacing the outer margin is provided
outside the setting method and padding from the same setting method, setting the above items 'padding' replaced 'margin' is the method of setting margins.
Real size cassette
box width and height fixed value, and if the box border padding increases, the overall size of the box becomes large, so that the real size of the box:
- = Width of the box around the left and right width + padding + border
- Height = height + padding box + border vertically up and down
Block elements of skill center
block elements page if you want to set the relative levels of center, you can use margin value in the auto keyword, "auto" can only be used around the margin settings can not be used from top to bottom:
.box{
width:300px;
height:300px;
background:gold;
margin-left:0px;
margin-top:0px;
margin-left:auto;
margin-right:auto;
}
Abbreviated as follows:
.box{
width:300px;
height:300px;
background:gold;
margin:0px auto;
}
Floating elements float setting properties
Floating allow block elements arranged in a row, divided into left floating float: float: left; floating right: float: right;
Set background properties background element
Setting the background color or background element images, such as: background: gold; a gold background color setting element
1.8 css text attributes
-
color setting text color, such as: color: red;
-
font-size character size settings, such as: font-size: 12px;
-
font-family set the text font, such as: font-family: 'Microsoft elegant black'; in order to avoid incompatible characters, usually written as: font-family: 'Microsoft Yahei';
-
font-weight Bold text is provided, such as: font-weight: bold; provided bold font-weight: normal setting not bold
-
High line-height line of text is provided, such as: line-height: 24px; height plus text indicates the vertical pitch is 24px text, i.e. each row is occupied 24px height
-
text-decoration provided underline text, such as: text-decoration: none; underlined text removed
-
text-align the horizontal alignment of the text is provided as text-align: center centered horizontally disposed Text
-
text-indent the first line indent text settings, such as: text-indent: 24px; 24px set the text first line indent
1.9 css layout demo
With style, and with reference to the following figure, the layout can be written before further adjustments to complete the final layout effects:
