Basic HTML5 and CSS3 Tutorial-NOTE 1

Notes (first to second chapter integration)

1,html thought:

Writing HTML is a label that describes the content of the Web page. And, the HTML element describes what the content is, not what it looks like.

That

A,html: Use the label to explain the meaning of the Web page content.

B, semantic HTML: Use the most appropriate HTML element to explain the meaning of the content of the Web page.

C, the structure and performance are completely separated. The content of the Web page is illustrated by HTML. The content of the Web page is described by CSS.

Another: Why is semantics important?

accessibility, search engine optimization (Web pages are ranked in the top search engine), easier to maintain code and add styles.

2, web building block:

Web pages can be saved as plain text, divided into three main parts: text content, references to other files, and tags.

A, text content:

Character encoding type selection (panel discussion).

b, references to other files:

Use references to load images, audio, video files, style sheets, JavaScript files, and references to other HTML pages and resources.

Another: <audio> and <video> tags are available in HTML5, so the browser can play video without plugins.

C, Mark:

Includes HTML tags (tag tags), elements, attributes, values, and more.

HTML Tags: single-label and double-label.

Elements: Start tag + content + END tag. Special elements: Empty elements, empty elements do not contain any textual content.

Another: parent element and child element (this structure is the key attribute of the HTM L code): If an element contains another element, it is the parent element, and the containing element is the child element. Any element that is included in a child element is a descendant of the parent element of the outer layer.

Properties: Contains additional information about the element. An element can have more than one property, and each property has its own value.

3, basic HTML page

View Code

4, other content:

A, file name (folder = directory): HTML file filenames all use lowercase letters, separate words with dashes, and use. html or. htm as suffix names.

B,url (Uniform Resource Locator):

(1) Example: mode hostname path

HTTP://www.site.com/tofu/index.html

Directory file name

(2) absolute URL and relative URL: the same Web page links with relative links, other web site links with absolute links.

C, the browser to the Web page default display effect:

(1) Each browser has a built-in CSS file (a style sheet) that determines the default style for HTML elements.

(2) The style of block-level elements and inline elements is the default style of the browser, not own.

(3) HTML5 abolished the terms of block-level elements and inline elements, because these terms associate elements with performance, while HTML is not responsible for performance. (typically, old inline elements are categorized as phrase content in HTML5)

another: The HTTP protocol to do the discussion.

Summarize:

Consolidate:

1,html thought: The semantic label to describe the meaning of the content of the Web page, structure and performance completely separated.

2,html Basic page.

3, how to use tags to write Web pages.

Extended:

1,HTML5 Change:

A, responsive layout, the same Web page can be displayed in different device adaptability.

Another: The document header adds a declaration for different device interfaces.

b, the structure of the page, adding some semantic structural tags, so that the HTML code semantics, more structural. (SEO: Search engine Optimization)

Another: HTML element semantic Classification: Structural tags, level block tags, inline semantic tags, interactive tags.

Structural Tags: primarily responsible for the definition of the web context structure to ensure the integrity of the HTML document. Mainly include: Section,header,footer,nav,article and so on.

Level block Tags: the main completion of the Web page Area division, to ensure the effective separation of content. Mainly have aside,figure,code,dialog and so on.

In-line semantic tags: the main content of the Web page to complete the reference and expression, is rich content display Foundation. Mainly include: Meter,time,progress,video,audio and so on.

Interactive Tags: mainly used for functional content expression, there will be a certain content and data association, is the basis of various events. Mainly include: Details,datagrid,menu,command and so on.

C,html: Form evolution, doctype simplification, character set declaration simplification, HTML5 API, plugin-free video playback, accessibility, CSS: quick processing of rounded corners, shadows, progressive effects, and more.

2,HTML5 Learning Focus: HTML text structuring, page layout responsiveness, HTML5 API application (application interface), code compatibility, programming experience.

3, Related concepts:

Web OS: The browser is the operating system.

Web application: Web application development, the benefits are many.

Thin servers: Transfer service-side related operations to the client, making HTML5 more powerful.

Cloud computing: Breaking browser-server patterns, trends, and more.

Mobile-HTML5 Technology

4, the inherent thought:

The structure and performance are completely separated. HTML5 Standard-setting pays more attention to this idea.

Code compatibility issues. To accumulate programming experience.

Attached: Book changed to: "HTML5 and CSS3 Basic Course", "HTML5 Authoritative guide" ("HTML5 Program Design"), "JavaScript Advanced Programming", "Responsive layout", "JavaScript authoritative guide".

code: None in this chapter.

Related Topics:

1, character encoding type and language designation.

2,http protocol.

3, how to plan the website.

4, how to view HTML, CSS, and JavaScript code in a Web page.

The use of 5,SUBLIME-TEXT3.

6, Cloud concept, cloud computing.

Basic HTML5 and CSS3 Tutorial-NOTE 1