Middle Soft Training First week review summary--simple HTML and CSS

Source: Internet
Author: User
Tags html header

Some points to keep in mind:

Day1 HTML format and simple tags:

HTML File General format:

1         page content 8     </body>9 

CharSet set character encoding to avoid garbled characters in Chinese content of the page.

No closed tag needs at the end of the aint Bar "/", the ALT attribute can be used instead of the title property, the Align property can be set within a paragraph of the picture left or right, and the width and Height properties set the photo size

<ol> ordered list <ul> unordered lists can set item label styles with type:

The default type of <ol> is 1, and a style such as a,<ul> does not want the small black dot setting type to none.

Hierarchical list <dl><dt><dd> Hierarchical list,<dd> can contain,<ul><ol>

Day2 <table> Tags:

<table> General Format:

1 <table cellpadding= "0" cellspacing= "0" border= "1" > 2             <tr> 3                 <td>a</td> 4                 <TD >a</td> 5                 <td>a</td> 6             </tr> 7             <tr> 8                 <td colspan= "2" > Across two lines </td> 9                 <td rowspan= "2" > Kua two column </td>10             </tr>11             <tr>12                 <td>a< /td>13                 <td>a</td>14             </tr>15             <tr>16                                     last line across 3 lines                 </td>19             </tr>20         </table>

Run the result diagram as:

Where cellspacing is the table margin, that is, the spacing of each cell, cellpadding the colspan and rowspan of the cell padding;<td>, respectively, are the number of spans and spans.

The size of the cell changes with the content, the fixed size is useful for the text, the block and element is useless, the cell will still be large, you can fixed the size of the block element

There are some special words such as &copy; means the copyright number,&lt; means <,&gt; means; Others can check the help document

DAY3 form label <form>:

<form> tags are used to create a form that generally has the Method,action property. Method has get and post two ways, generally with post,post more secure

1. Get is the data that is fetched from the server and post is the data sent to the server. Get is the default method.
2. Get is the URL where the parameter data queue is added to the Action property of the submission form, and the value corresponds to the field one by one in the form, which is visible in the URL. Post is the HTTP post mechanism that places the fields within the form with their contents in the HTML header, along with the URL address referred to by the Action property. The user does not see the process.
3. For Get mode, the server side uses Request.QueryString to get the value of the variable, and for post, the server side uses Request.Form to obtain the submitted data.
4. Get transmits a small amount of data, cannot be greater than 2KB. Post transmits a large amount of data, which is generally not restricted by default. In theory, however, the maximum amount of IIS4 is 100KB in 80KB,IIS5.
5. Get security is very low, post security is high. But the execution efficiency is better than the Post method.

Suggestions:
1, get the security of the method is less than the post, including confidential information, it is recommended to use the Post data submission method;
2, when doing data query, it is recommended to use Get method, and in the data to add, modify or delete, the proposed post method;

More detailed usage: http://blog.163.com/llf_046/blog/static/527371192009224022140/

The Action property specifies a URL to go to this page after the user commits

<input/> also has no closed tag, and his type attribute has a common value of text,password,radio,checkbox,submit,reset ...

More Type values: http://www.w3school.com.cn/html5/att_input_type.asp

Write <input/> Label should have the habit of writing the Name property, so that to get the value aspect, radio write a single box, the same group of radio box should be set the same name to achieve a single selection, checked can

Set default check.

ReadOnly can be set to read-only, placeholder can set the gray Description field.

Day4 DIV frame and CSS:

The diagram on the left is a reference to the important attributes of the div layout

Div is a block-level element, you can set the size, background, borders and so on, you can also set float float property, you can implement side-by-side layout, need to layout div to set the float property

The Divmargin-top attribute in the DIV has no effect, you can set the parent div's Padding-top property instead

Frame

Frame is a framework that enables you to place several different HTML pages within a page, in the following code format:

1 

It is important to note that the <body> tag is not required if the frame is used.

For example, set the hyperlink in frame B to the value of a, and then the C frame's Name property is a to achieve the navigation effect, and the hyperlinks in B are shown in the C frame

Css

CSS is to wrap the label's style together in the head or in a separate CSS file, and then

<link href= "CSS file path" type= "Text/css" rel= "stylesheet" > Import CSS File

About the naming conventions for CSS: http://www.cnblogs.com/WebShare-hilda/p/4686067.html

There are also some useful styles that have been difficult to remember at present:

Border Square Round: border-radios:5px;

Shadow: box-shadow:0px 0px 3px black inset; Inset built-in shadows selectable

Gradient: Background:linear-gradint (to position (diagonal gradient words write two position right bottom), start color, end color)

There are other non-contact in the future to check the document

  

  

Middle Soft Training First week review summary--simple HTML and CSS

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.