"2017.7.27" HTML and CSS learning Note 1-3

Source: Internet
Author: User

Tag: Dash led combined with complete relative line break for lock pc

From 23rd to 4 days to read the "Head first HTML and CSS" this book, the book explains the way simple, easy to understand, combined with exercises, easy to remember, is a good introductory book. Here is the study note for this book:

I. Knowledge of HTML

Hypertext Markup Language, abbreviation for Hypertext Markup Language. Tag text to tell the structure of the browser text.

Comments are placed between <!--and the browser ignores the content.

1. Create an HTML file on your computer

Open Notepad, save as suffix. html, encoded as UTF-8.

Local test, open directly in the browser, you can directly drag the file in.

2. Basic structure of HTML file

<body>

</body>

A complete element:

3. Add Style,<style> elements

Put in the head, make type, add attribute type to CSS (also can not specify), can be in the head tag Riga attribute.

<style type= "Text/css" >

</style>

CSS is another language is the abbreviation of cascading style sheet, cascading style sheets, syntax structure is different from HTML. HTML is responsible for page structure (layout), CSS is responsible for page style (performance).

The basic syntax for CSS is: element name {attribute 1: value;

Attribute 2: value;

}

Example: Body {

Background-color: #d2b48c;

border:2px dotted black;

margin-left:20%;

margin-right:20%;

padding:10px;

}

Ii. in-depth understanding of hypertext Ht,hypertext

1. Hyperlinks, Elements <a>

<a href= "direction.html" >detailed derections</a>

The href attribute to specify the target file of the link,> < middle content is the text (label) that the browser displays, usually with an underscore, which represents clickable. HREF is an abbreviation, hypertextreference, and hypertext reference.

2. Reference Path

In the content of this site with a relative address, external site content with absolute address URL

If relative to this page, the content to be referenced is in sub-folder: Images/coffee.jpg

If relative to this page, to refer to the content is in the sibling folder, you have to first return to the parent folder, in the downstream to the sibling folder: ... /images/coffee.jpg, a ".." Represents an upstream level. If you want to uplink level two, use the. /..。

If relative to this page, to refer to the content at this level, then directly with Coffee.jpg

Note: "/" is used only as a separator.

Third, web page construction

First, according to the sketch of a page, is to use HTML elements to identify the basic framework, and then add elements and content complete, form a basic layout.

1. block element, inline element

Block elements:<p> <blockquote> <ol> <ul> <li>, separate display, front and rear line breaks.

inline element:<q> <em> , no line break.

2. Other

<br> is a newline character with no content and no end tag. is a void element. is also a void element, with attributes, but no content and end tags.

ul:unordered List unordered lists

Ol:ordered List ordered lists

Li:list Item List Item

UL and Li, ol and Li, must be used in groups, can not be used alone and can not be combined with other use.

Special characters are represented by character entities. & is the first character of all entities, such as < is &LT, but & cannot be used alone, with entity &amp.

"2017.7.27" HTML and CSS learning Note 1-3

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.