Study Notes for HTML5 and CSS3 basic tutorials-One Day, dayone2 Evernote

Study Notes for HTML5 and CSS3 basic tutorials-One Day, dayone2 Evernote
Chapter 1

1. The Email Address URL includes: mailto: + email address

2. ../indicates going up to the first level, and directly using/to indicate the root directory at the beginning

Chapter 3

1.

Role = "banner" [applicable to page-level headers]

2. <nav> label Navigation:

Role = "navigation" is not mandatory, improving accessibility

3. In the <main> main area, there is only one page, and the main cannot be placed in the article, aside, footer, header, and nav elements.

Role = "main"

4. <article> Create an article that can be used for independent content items and can be nested. For example, a blog entry/comments submitted by a user/an interactive widget/Case Study

5. <section> define a block. A group of content similar to a topic usually contains a title, which is more organized and structured than article.

6. <aside> specify the comment column, which is placed after main.

Role = "complementary"

7. <footer> indicates the footer of the nearest Element Nested in it. It is the footer of the entire page only when its closest ancestor is the body.

Role = "contentinfo" [only page-level footer]

Chapter 4

1. Use of each element:

1) The em element is used to identify the highlighted text.

2) The cite element is used to identify references to works of art, movies, books, and other content.

3) small indicates the side comment of the Detailed Rules. "It generally includes disclaimers, precautions, legal restrictions, and copyright information. Sometimes we can use it to indicate the signature or meet the license requirements.

4) The strong element indicates the importance of the content.

(5) B is used for example, keywords in the document abstract, product names in the comments, text instructions for operations in text-based interactive software, and Article introduction.

6) The I element indicates a text with a different voice or tone, or something different from the conventional one, used for classification names, technical terms, idioms in foreign languages, translated prose, and ship names in Western languages.

2. Create a chart:

1) <figure> Add images, videos, data tables, and other content

2) <figcaption> the element is not required, but if it is contained, it must be the first or last element embedded in the figure element, and only one figcaption is allowed.

3. quoted text

1) blockquote: by default, the browser indent the blockquote text. The value of the cite attribute is not displayed.

2) Optional cite attributes can be used for blockquote and q, cite = url (referenced address)

3) The content referenced by the q element cannot span different paragraphs. In this case, blockquote should be used.

4. specify the time

1)<Time>

2) datetime ="2014-07-16",Atetime, the text content can represent the date, time, or time period in any form you want.

5. Explain Acronyms

1) <abbr>

2) attribute: title = "Full name of acronyms"

6. Define terms

1) <dfn>

7. Create superscripts and subscripts

1) Enter <sub> Create subscript, or enter <sup> create superscript

2)

/** Prevent sub and sup from affecting line-height * gist.github.com/413930379/sub,sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;} sup {top:-0.5em;} sub {bottom:-0.25em ;}

 

8. Add the author's contact information

1) <address>

9. annotation editing and text that are no longer accurate (it can enclose the phrase content ("in-line element" previously called HTML5) and block-level content elements ,)

1) <ins> MARK New inserted text

2) <del> mark the deleted text

3) <s> MARK text that is no longer accurate or irrelevant

10. Mark the code

1) <code>

2) <kbd> MARK user input instructions

3) <samp> indicates the sample output of a program or system.

4) <var> the element represents the value of a variable or placeholder.

11. pre-formatted text

1) <pre>

2) Enable Automatic line feed for pre content (IE <8 is not applicable)

pre {white-space: pre-wrap;}

 

12. highlight text

1) <mark> adds a yellow background.

13. Other elements

1) by default, the browser adds underscores to the <u> element.

2) <wbr>: You can wrap a line when necessary.

3) side note MARK: ruby, rp, and rt Elements

4) bdi (when the content direction is unknown. The dir attribute does not need to be included, because it is set to automatic judgment by default)

5) bdo (you must include the dir attribute and set the attribute value to ltr (from left to right) or rtl (from right to left) to specify the orientation you want to present)

6) meter: indicates the score value or measurement result within a known range.

7) progress: indicates the progress of a task. It can be used to indicate a progress bar.

(1) max: total workload of a task. The value must be greater than 0.

(2) value: number of completed tasks

(3) form: add the form attribute and set its value to the id of the form.

Chapter 6

1. Create an anchor

Add id = "anchor-name" to the element to jump"

2. Create a link to a specific anchor.

<A href = "# anchor-name">

3. If the anchor is located in another document, use <ahref ="Page.html # anchor-name"> Reference this region. (There is no space between the URL and .)

4. Enter

<A href ="Http://www.site.com/directory/age.html#anchor-name"> (No space)