Home > Developer > Web Develop
To view the source code of a Web page only need to right click on the blank space to view the Web page source or Ctrl+u.
Before learning HTML and CSS, we need a text editor, the computer's own Notepad can write HTML files, but the text documents written out of the document can not be read. We can download notepad++ to write HTML (notepad++ can also be used to write a lot of other language files) and is free to try, very convenient. [notepad++ official]
After downloading and installing the Notepad, we can begin to write the HTML file.
HTML files include a lot of <tag>, and each HTML file starts with <! DOCTYPE Html>, stating that this is an HTML file.
HTML files in <! DOCTYPE html> below will have two tag:
The head inside can add <title> here is the title</title> of the webpage, in body inside can add the body of the webpage.
We can write two words in body, and then save them as HTML files and then open them with a browser to see the effect
<body>i had milk this morning. and also some eggs</body>
We wrote the page successfully displayed, but in the body of the content is originally written in a blank line, but the page is displayed next to each other, this is because the HTML file will automatically ignore the code of many spaces and blank lines.
To solve this problem, we have two ways to make two lines display.
<p> paragraph Tags </p> paragraph tags are commonly used in HTML text tags, each of the contents of the label is a separate paragraph, so if two sentences are written in two <p></p>tag, TA will automatically divided into two sections:<body><p>i had milk this morning. </p><p>and also some eggs </p></body>
In addition to using <P>, we can also do this by <br/> (break):
<body>i had milk this morning. <br/> and also some eggs</body>
In the HTML there are H1, H2, H3, H4, H5, h6 with different sizes of HEADER,H1 is the largest, H6 is the smallest.
<body>The effect is as follows:Text in bold or italic content
If you want to add bold text, add <strong> text to both sides of the content you want to add </strong>tag
If you want to tilt the text, add <em> text on both sides of the content you want to skew </em>tag
<body>
Add annotations Add comments to a file you can use <!--the content here is all annotated--<body><!--Update the content below--><p>i had milk this morning<br/>and Some<strong>eggs </strong> too</p></body>
Add a link to a webpageAdd a link using <a></a>tag, where a is anchor, we can link to another page via this tag, or link to another page in the same directory as the server
Linking to another Web pageIf we want to add a link to a content, we need to add the href attribute <ahref= "url" ></a> after <a>tag, for example:
Link to other pages in the same directory<body><a href= "http://google.com" >click me togoogle</a></body>If the link jumps to other pages in the same directory, we can change the full URL to the page file name under the directory in the href, as I created a new page another_page.html in the directory:
<a href= "another_page.html" >take you toanother page</a>Click on the text on the page can go to another page, of course, you can also add a link on the second page to achieve the two pages to each other click Jump.
Other places linked to the current pageThis link works well for longer pages, such as Wikipedia and paper or blog catalogs, to help navigate better.
To create a link within a page, we first create the target: precede the node of the page with the <aname= "Checkpoint_name" ></a>, the Name property value can be named as needed, and then we add the content to the link <ahref= "#checkpoint_name" ></a>
<body><!--Click on the line below that will take us to the page where the name attribute is content where-->Mailbox links and Gadgets [link prompt box]
If we want to add the email link to the webpage, we can use Http://img.my.csdn.net/uploads/201607/05/1467685737_3536.png
To show the effect, if you click on the mailbox link, the default mail program will pop up, if not, you may have to set up outlook, sometimes some annoying, perhaps it is better to post the email address directly on the page.
After the Web page is affixed to the link, you can display a link hint via the title property of a tag, such as:
<a href= "https://www.ingress.com/" title= "Google's a very goose sister Boingonium virtual Game" >INGRESS</a>You can see the text prompt when the mouse is over the link
A tag can set multiple properties, as long as they do not conflict with each other, basically can make a lot of good effect
Add a picture to a pageFirst we want to have a picture, you can put the picture in the same folder as the HTML file
can add a picture on the page, with the picture and knowledge of the previous learning, you can turn the picture into a clickable jump to another page and show the effect of the link hint, such as:
Modify picture sizeSometimes we need to put pictures on the Web page but the size of the picture is too large to modify, such as the following poster, if we need ta smaller, such as just to do an index or something, you can add the height of the Imgtag after the high property set
For example, we set the height to 200, the effect is as follows:
It is important to note that our resize just show the image shrink, the file size of the picture is not changed, so although it looks like a small image, but does not play a faster load page effect.
If we want to put a better picture, still need to use the image editing software to compress the image size and then put on the page.
Form tablesThe tag of the table is <table></table>
Table has rows and columns, row is <tr></tr> (table row), column is <td></td>. If we want to make a table of two rows and two columns, as follows, the Border property of table shows the effect of the box, and if there is no border table, the box is not visible.
<table border=2>
<tr> <td>1</td> <td>2</td></tr><tr> <td>3</td > <td>4</td></tr></table>The content in the table is not necessarily text, all the things in the body can be added in the table can be (slices, links and other data)
Table Header HeadersUsually a table will have a header to better understand the table content. The table header tag is <th></th>, and the default is bold center display, such as:
Colspan
Sometimes we do not need a fixed n-row N-column table, you may want the first row of 4 columns, the second row 3 columns or other irregular tables, this time the colspan property can help. We can add the colspan attribute to the place where we want to occupy more than one lattice, and give its attribute value, such as colspan= "2", which means that this place occupies two squares of content.
As modified by the following code, the original first two headers are merged into one and occupy two squares:
Table Widths Table widthWhen we do not specify the width of the table, the default size is based on the contents of the table. If we want to modify the width of the table, we can add the property width to the table tag:
A. Specify width table width= The value behind the Width property is the pixel value
B. Specify the scale table Width= "100%" as a percentage of the table compared to the page width ratio
To a specified width of 500
To specify 100% scale, no matter how the page table is always filled with screen
cellpadding cell contents and edges of cells
cellpadding property and specifies the property value, sets the cell's contents to the cell's margin
Such as:
Add the CellPadding property after the table and specify the property value, setting the cell's contents to the cell's margin
cellspacing Cell and cell spacing
Set the distance between the cell and the cell by adding the CellSpacing property and specifying the property value after the table
Such as:
List
The list is ordered and unordered
Unordered listUnordered list is unorderedlist, with <ul></ul> tags surrounded, each item has <li></li>tag
Let's say we list a list and write the food in the fridge:
An ordered list
The ordered list is the ordered list, and each item in the tag<ol></ol>,list is also surrounded by <li></li>tag, unlike the unordered list, The ordered list will automatically help us number. For example, we are in the column of a to-do-list, based on the time we can use an ordered list, or write a instruction,rank or something, with OL will be more appropriate, such as the following steps:
Introduction to CSSCSS (cascading style sheets Cascading style sheets) is a tool to help beautify HTML.
Usage: Add <style type= "Text/css" ></style>tag in Head and enter object (also known as selector selector) in tag that you wish to beautify (and you need to set properties}.
For example, we need to select all the <p></p>, and change its content to blue, the font to Times New Roman, italic:
CSS has a lot of properties, you can refer to CSS properties to view
Color (RGB) and line spacing modificationsRgb
The Color property of CSS has many colors to choose from, but when we want a specific color (such as blue gray, yellow, etc.), we can set the RGB value
Spaced
Modify the leading property we can modify by line-height= "100%", the default line spacing is 100%, if we need to increase the line spacing can be modified 100% to 150%.
Take the following example, we modified the RGB value of
Font-weight, Font-style
As mentioned above, we can use <strong></strong>,<em></em> to bold and italic text content, we will be more inclined to put these properties in CSS when writing Web pages, This makes the code look clearer and more concise.
The two properties of bold and italic can be passed {font-weight:bold;} and {font-style:italic} to decorate.
Text to it and modify the background color
-Center Title
Center can be passed {text-align:center;} To modify, left and right
-Segment First Indent
The contents of the <p></p> even if it is a new paragraph</p>, the page is displayed without the first indent, if you need to indent, you can go through {text-indent:20 px;} To modify, 20px can be changed to other sizes as needed.
-Page Background Color modification
The background color of the Web page can be passed through body {background-color:#;} To make changes, the text color within the page can also be directly body{color:#;} Direct modifications, such as:
The title part of the center center, each of the young lady in front of the 20px indentation, background color and text color are set in the CSS.
Background picture settings
First we need to put the picture in the same directory, add the picture can be used Background-image:url (picturename);
The Background-repeat property determines whether you want to repeat the picture (if you do not write this property, we see the page will automatically overlay the picture), if the property value is Repeat-x, the picture will be covered horizontally, if it is repeat-y will be covered vertically
If we want to insert a picture at a particular location, you can determine it by background-position this property, either by the image (pixel coordinate is the upper-left corner of the picture), or by a percentage to determine the position of the upper-left corner of the picture in the page:
body{ Background-image:url (picturename.jpg); Background-repeat:no-repeat; background-position:10px 20px; }
The difference between Padding, margin and border-Padding
Take the following example, what we enter is called content, the first part of the text surrounded by the pink area is padding[content distance border part/inner filler], in this area we can set the text distance up and down the left and right side, you can pass the padding-top; Padding-bottom; Padding-left; Padding-right to set;
-Border
Content outside a circle dotted line is border [border], we can set border color, thickness or other style, Border contains the properties of Border-color;border-width;
All border properties can be added with Top/bottom/left/right to set each
The property values for Border-style include:
None: no contour;
Hidden: Hide Border;
Dotted: dot-shaped contour;
Dashed: dashed outline;
Solid: Achieve contour;
Double: two-line contour;
Groove:3d Groove Contour;
Ridge:3d Convex groove contour;
INSET:3D concave edge Contour;
Outset:3d Convex Edge Profile]
Tips: We can also directly border:5px solid blue; Set three properties together to border by only one line
-Margin
Margin is an area outside the border [outer filler],margin contains the properties [outer filler distance] has margin;margin-top; Margin-bottom; Margin-left; Margin-right
Linked adornmentsLink is only a link, but there are 4 different states, each State can also add a variety of properties, such as:
Default state of the link: a:link{color:black; text-decoration:none;}
The mouse is close to the link but not the clicked State: A:hover{background-color:blue;text-decoration:underline; font-weight:bold;}
Status when clicked: A:active{background-color:orange;}
Status after click: A:visited{color:yellow;}
Modification of tablesFirst, we'll build a 2*3 form.
Make a modification to the entire table table {border:2px solid green;}
Then make a modification to each row of the table tr {Background-color:pink}
For each cell decoration td{border:2px dashe blue;}
The properties of the table are for the entire table, each row and cell inherit the properties of the table, and each cell inherits the properties of each row, and on the basis of which it can add its own properties.
Decorated built-in adornments for unordered listsFirst we build a unordered list, we can see the non-modified list front is a solid circle, if we want to change to other shapes, can be modified by Ul{list-style-type:}, the value of the property can be "Click here", the common attribute value has circle ( Hollow Circle), Square (square), decimal (number), Lower-roman (lowercase roman alphabet), Upper-roman (uppercase Roman alphabet), etc.
Custom adornments
If you don't like the existing tags, we can also customize them. Put the prepared small picture in the directory, using {list-style-image:url ("picture name");}, such as:
Without any modification.
If we do not want to add any tags to the unordered list, we can set the List-style-type:none, because the default none or placeholder, we can set the padding to the left.
Selectors decorated to multiple selector decorationsSimilar to a selector decoration, just want to decorate the part with other need to decorate the part of the name separated by commas, such as give
Modify some of the content in a selector <span></span>Add <span></span> tag outside the content you want to decorate, and add the content to the CSS.
Div
Div is division, TA is a block area, you can specify a position to help us better layout.
The div of a page can have many, specify the location of a different div or give its different attributes to be implemented by ID. In the div tag and add id= "Idname", so that different div through the ID to assign different attributes, we can in the style through #idname{} to different IDs to specify the border and distribution location, such as the following two different ID div:
Modified by classThe previous discussion is about decorating a class of selectors, but many times we don't want to set them to the same properties, so we can help with class.
If we want a type of text that is green, you can define a class as a green font:. Greentext{color:green;}, if you want a type of text to be bold, you can define a class as bold:. Boldtext{font-weight: Bold;}, when defining class, you need to precede the class name with a dot/half-width period '. In the use of the time as long as the selector tag inside add class= "ClassName" can be. Such as:
Child Selector
Child selector is in the parent tag. such as the head tag is under the HTML, then head is the HTML child,body is also the HTML child.
There will be different <p> when you make a Web page, there will be different <a>, sometimes you just want to modify a in H3 below, you can modify it by h3> a {}. That is, parent> child {property}.
There are three link a, respectively, in H2, A and p, but we just want to modify the A in P, which can be achieved by p> a {}:
The following CSS is found in the p inside find a This child selector and then the modification.
Pseudo Elements
When we want to modify an element such as the first letter of each paragraph or the first sentence of each paragraph, since there is no special tag to represent such an element, we can use the pseudo element (pseudo element) to make the choice.
Take the first letter of each paragraph as an example, add p:first-letter{font-weight:bold;font-size:30px in the style, color:red;} You can see that the first letter of all the paragraphs in it has enlarged the font size table into bold, and the color has changed. Very convenient:-D
The other pseudo elements
External Style Sheets CSS External template
In addition to a Web page style, we can write a CSS file template, this file is not for or limited to a certain page, countless pages can refer to this template. If we want to make a website and the paragraphs of all the pages of the site have a color a font, all the H1 a color, etc., we can prepare such a CSS file to do the reference.
Write a CSS file can create a new CSS file in Notepad, according to Selector{property:value;} Format to write all the parts that are intended to be modified and then save them in the same directory. Go back to the HTML file you want to refer to, at the head Jiashang <link rel= "stylesheet" type= "Text/css" href= "file name. css"/>.
overriding style
If we have a CSS template but still need to modify a portion, you can continue to add <style= "Text/css" > Rewritten content </style> after the HTML has referenced the CSS; This way, the page will update the modified part of the style after referencing the format of the CSS file. It is important to note that the part of the rewrite must be behind the CSS reference, because the HTML is in order, and the final effect of the TA is to follow the last written file. As we set all the H1 in the CSS file to blue, but in the style is rewritten as green, after saving the final page H1 is green. If we H1 the style setting to green in front of the CSS, the H1 of the final page will display the H1 as blue in the post-write CSS:
Position positioning absolute Position Absolute positioningWhen using absolute positions, you need to specify an exact location for each Div, and each div is independent of each other. If we have two Div, each specifies its position on the page, but the effect is that they overlap each other and it is inconvenient to read, so the use of absolute position should be careful not to let the elements interfere with each other or cause readers to read difficulties
Relative position Relative Positioning
Relative position is an element relative to its original location, the following two pages in style in addition to positioning is not the same as the rest, the first is absolute position, the second is relative position, you can see in the relative position of the layout, the third position than its original position did move, But at the same time other elements are also affected.
It is difficult to use a single method of absolute or relative position to write the layout of the entire page, but it is possible to combine different locations to achieve the desired effect.
Fixed position positioning
As with absolute positioning, the fixed positioning position is stationary, like coordinates, TA and absolutepositioning are different when we use the absolute position of the drop-down page, The contents of the page will also drag the page down with the mouse, while the fixed position will not, the fixed position when using the element position is constant, even if the mouse wheel slide up and down.
Max width & Max HeightThese two are defined as the maximum width and height of the element, using direct selector{max-width:; Max-height:;} Can.
For example, when we upload pictures or avatars in the Web page, although each picture may be different original size, but can be limited to the widest, so the final effect will be more consistent, as follows:
FormsForm helps us to get a series of information from the user, including the input text, the selection of content, upload files and so on.
Text text messageWhen we need to let the user enter information on the page can be achieved through the text type.
In the body, enter <form></form>tag first, then enter the information in the form tag that needs to be entered by the user, such as username and enter
<input type= "text" name= "username" size= "" maxlength= "8" value= "Enter username here" >
The type here is text that is entered as textual information, size is the length of the input box, maxlength is the maximum number of characters a user can enter, and value is the default information displayed in the input box, such as:Password input
After entering username, we can set a password input box by modifying the type password, setting the information [except for the type password other all the same text]:
Radio Box
When we need a single-choice result, we can use the radio type to let the user enter a single option, such as:
You can see that we have three options, but you can select only one
Multi-Select box
When we need the user to select multiple options, you can use the checkbox type, such as:
You can see that the type is a checkbox and you can select multiple
drop-down list
The drop-down list is another more common selection box, and when too many items are selected, TA does not occupy too much space on the screen like a radio box.
The drop-down list is made in <select></select>tag, and TA has a name property to tell us about the options theme, and there's a sub-tag<option></option in the Selecttag. >,ta is the option to expand the drop-down list, so you can create a region drop-down list:
Option content is displayed to the user to see the options, value is for the programmer to see.
Text Area
Text area is a page where you can write a paragraph, TA's tag is <textarea></textarea>, you can set the length of the message box (cols) and height (rows), Content written in the middle of the tag will be displayed by default in the text box, the user can delete and write down their own text content:
Uploading filesIn the Web page upload files can use the file type, refresh the page can see the page prompt to upload a file, click the Select File, our Explorer will open for us to select the file, after selecting the page will show the selected filename:
Submit FileWe can do a submit button to submit the information entered by the user (but after the submission of the processing of this part involves javascript/php, etc., first dig pits, and then fill in).
The Submit button can be created by the submit type, value= "Submitname" text content is displayed on the button text message.
Publishing Web pagesWeb pages need to be posted to the server, so that users everywhere can access the page.
First we want to have a server, there are a lot of server companies can rent servers, search on Google can be found. After we purchased the server, the landing site into the ftp,ftp can upload files from our own computer to the server, there will be a lot of default files on the server, we find the directory/public_html on the server, to ensure that the page you want to upload name is index.html, Then upload this page to the server and then refresh the home page after uploading OK to see the uploaded page appearing on the homepage.
The above is the HTML CSS small introduction, if you have any questions and questions, welcome to discuss the exchange.
Reference:
notepad++ Official website:
Https://notepad-plus-plus.org/download/v6.9.2.html
tags commonly used in HTML:
Http://www.columbia.edu/~sss31/html/html-mean.html
CSS Properties Reference:
Http://www.jb51.net/w3school/css/css_reference.htm
RGB Color Comparison table:
Http://tool.oschina.net/commons?type=3
Monty Python and the Holy Grail script:
Http://www.sacred-texts.com/neu/mphg/mphg.htm
CSS List-style-type Properties:
Http://www.w3school.com.cn/cssref/pr_list-style-type.asp
Pseudo-elements:
Https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
Getting Started with XHTML & CSS Basics
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
