HTML and CSS Basics addendum

Source: Internet
Author: User

Starting from a zero-based system to learn the front-end knowledge, although the HTML and CSS somewhat understand some, but learn to find a lot of New world ....

I. THE head tag in HTML

1. <meta> Tags:

Meta tags are some of the basics of ancillary information that are generally not displayed on the page.

(1)<meta charset= "utf-8"/> the defined page character set.

(2) <meta name= "keywords" Span class= "Html-attribute-name" >content= " developer, Blog Park, developer, program Ape, Cheng, geek, programming, code, open source, It website, Developer,programmer,coder,geek, technology community "/> Span class= "Html-tag" > here is a handy keyword message for crawlers that will be indexed and then searched when using search engines to protect these keywords.

(3)<meta name= "description" content= " Blog Park is a developer-oriented knowledge sharing community. Since its inception, the blog Park has been dedicated and focused on creating a pure technology exchange community for developers, driving and helping developers to share knowledge through the Internet, which will benefit more developers. The mission of the blog Park is to help developers change the world with code. "/> Here are some of the things that will appear in the search engine summary.

(4)<meta name= "robots" content= "none" > used to tell the search robot which pages need to be indexed and which pages do not need to be indexed. The content parameters are all,none,index,noindex,follow,nofollow. The default is all.

(5) Special attention to the Http-equiv property, equivalent to the HTTP file header function, it can send back some useful information to the browser to help correctly and accurately display the content of the Web page, the corresponding property value of Content,content is actually the variable value of each parameter. Like what:

A) <meta http-equiv= "Refresh" content= "2; Url=https://www.baidu.com "> interval content seconds after which the page refreshes and can be redirected to a different URL.

B) <meta http-equiv= "Set-cookie" content= "cookievalue=xxx;expires=friday,12-jan-200118:18:18gmt;path=/" > Set the socket value and expiration time, and so on.

C)<metahttp-equiv= "Expires" content= "FRI,12JAN200118:18:18GMT" > set Page Expiration time and need to retrieve information from the server after expiration.

2. Other important tags in the head:

(1)<link rel= "shortcut icon" href= "//common.cnblogs.com/  Favicon.ico " type="image/x-icon "/> is the small icon that sets the page on the Browser tab bar.

(2)<title> Blog Park-Developer's online home </title> Set the text information on the label, can also refer to.

Two. Body tag in HTML

1. Concept of inline labels and block labels

HTML tags are mainly categorized as inline and block tags, can be set through the CSS style display, inline values are inline, block blocks, there is a inline-block.

(1) Block-level label Example:<p>

Features include: Always Start on new lines, height, row height, and margin and padding are controllable; the width defaults to 100% of its container unless a width is set. It can accommodate inline elements and other block elements.

(2) Inline Tag example: <a><input><sub><sup><textarea><span>

Features include: and other elements are on one line until the line fills up, high, row height and margins and padding are immutable, and the width is the width of its text or picture, which cannot be changed; inline elements can only hold text or other inline elements.

Set height, margin and padding are not valid, or can be set by Line-height.

(3) Inline-block: The object is rendered as an inline object, but the object's contents are rendered as a block object. Subsequent inline objects are arranged in the same row. For example, give a link (a element) Inline-block attribute value, so that it has both block width height and inline peer characteristics.

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! in construction

HTML and CSS Basics addendum

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.