Self-learning Html-four (CSS initialization and HTML semantic tags, h tag p tag img tag ordered list unordered List table hyperlink)

Source: Internet
Author: User

First, CSS initialization

Now let's do a simple test with the following steps:

1. Write the following code:

2. Change the program with a different browser open we will find that the same code in different browsers will show a slight difference:

360 Browser display:

The following Firefox browsers show:

The difference in the effect of the same code in different browsers is due to the fact that each browser has a slightly different initial setting for each element's margin,border,font-size, etc.

WORKAROUND: Enforce the same property values for all elements through CSS

here is a Yahoo engineer CSS initialization code, directly copied to the CSS location can be,Body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p, BLOCKQUOTE,TH,TD {margin:0; padding:0;}
Body {background: #fff; color: #555; font-size:14px; Font-family:verdana, Arial, Helvetica, Sans-serif;}
td,th,caption {font-size:14px;}
H1, H2, H3, H4, H5, h6 {font-weight:normal; font-size:100%;}
address, caption, cite, code, DFN, EM, strong, Th, var {font-style:normal; font-weight:normal;}
a {color: #555; text-decoration:none;}
a:hover {text-decoration:underline;}
img {border:none;}
Ol,ul,li {list-style:none;}
input, textarea, select, button {font:14px verdana,helvetica,arial,sans-serif;}
table {border-collapse:collapse;}
HTML {overflow-y: scroll;}

. clearfix:after {content: "."; display:block; height:0; clear:both; visibility:hidden;}
. clearfix {*zoom:1;}

Add code Location

Eventually the effect will be the same regardless of which browser you open.

Second, the HTML Learning mind Map

Third, HTML has a semantic tag

H tag and p label for 1.html

Description: The H1-h6 label represents the title of the text, from large to small; P tags represent paragraphs, and in news sites, H and P tags often appear in pairs

The code is as follows:

The results are as follows:

2.img Label

Description: We have mentioned IMG layout in self-study html--three

Src= "Here fill in the image address: can be a local address, can be a network address, when the local address, the picture in the current directory directly fill in the picture name, if it is the picture of a first-level directory before the picture name plus . /"

alt= "Search engine can be filled out here by the string search to change the picture, and when the network is not smooth, loading the picture failure is to display the string"

Title= "The string that is filled in here is displayed when the mouse is placed on the image"

Example code:

Chip

3.img in the end is block or inline

Note: In our previous studies, we knew that block elements would be exclusive, inline elements would not wrap, and inline elements could not be set to width and height.

After our tests found that when you set up two img, they are displayed side by side, which is the attribute of the inline element, but when you set their width and height, the image will change with the width and height of our settings, which is not a feature of inline elements. We add a div under the picture, and give him a blue border to find the div with the above img There is a little gap, which is like we previously learned the Magrin value, while the inline element is not magrin worth, we can set the IMG Marin will find no effect, Because the essence of IMG is an inline element, it is a special inline element (an inline substitution element, the replacement element can be set width and height), so the Magrin value cannot be set.

Example code:

4. Ordered list "<ol><li> ordered 1</li></ol>" and unordered list "<ul><li> unordered </li></ul>"

Directly on the sample code:

The effect of a direct run is an unordered list (the solid circle defaults):

Viewing the CSS manual can be seen by the following styles:

We control the list style through CSS:

The code is as follows:

The effect is as follows:

There are sequence table codes:

There are sequence tables:

Note: It is worth mentioning that, we generally in the development of the order or unordered list we will set him to nil, change the picture instead, the reason is to avoid the different browser to open the program caused by the difference.

5. Neat table (table label)

In HTML we use the <table> tag to represent the table,<tr> label represents the row,<td> label represents the column. In the past, we wrote the number of rows, then added the number of columns to the corresponding number of rows, and the label needed content to display.

such as code:

When we ran the code above, we found that the effect was the same, and obviously the tables we understood were different. In fact, the table we are painted well, just not show it, we need to use CSS to control the table can be displayed, just as we used to the div layout, we must set the CSS color to display.

We use CSS to control the side of the table is a 1px blue solid line, the following effect will appear, see we found that the table is a separate small box. At this point we can look at the CSS manual, found that the table has a property border-collapse, its default value is separate (border independent) is the kind of effect we see, We set its Border-collapse property value to collapse (adjacent edges merge) to get the table we normally need, and we can add an actual pixel to it.

Finally set to the table we normally understand:

What do we do if we want to merge a cell?

For example, we need to merge the first row into 1 columns, then the 2,3,4 column of the first row is removed, and the 1th column is prefixed with the attribute colspan= "4", where 4 represents the number of columns spanned.

<tr>
<TD colspan= "4" >1</td>
</tr>

As follows:

What if we need to merge the 24 and 282 squares together?

First delete The 28, we know that 24 across to 28 plus itself is spanning 2 lines, so we add the attribute rowspan= "24" in the 2 column, where 2 is the number of rows spanned.

<TD rowspan= "2" >24</td>

As follows:

The final code is as follows:

6. Hyperlink Tags <a> tags

If there is no hyperlink, our web page is a separate data, hyperlinks to separate pages linked together to achieve the data resources of the work.

<a href= "12.padding optimized home layout. html" > Home layout </a>

href fill in the corresponding link of the address, by default, from the current page into a new page, if we need to click on the link to create a new page and then go to the linked page you need to add a target= "_blank" property.

The program works as follows:

If you do not add target= "_blank" click on the first page layout, the effect is:

If you add the target= "_blank" effect as follows:

The above is linked to the local Web page, in fact, Link Web page is also the same, for example, here linked to GitHub open source site:

The code is:

Hyperlink tag also has a title property, after setting, when the mouse to change the link will display the title content.

Final code:

Self-learning Html-four (CSS initialization and HTML semantic tags, h tag p tag img Label ordered list unordered list table hyperlink)

Related Article

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.