Study Notes of HTML5 and CSS3 basic tutorial-supplement: html5 and css3 basic tutorial

Study Notes of HTML5 and CSS3 basic tutorial-supplement: html5 and css3 basic tutorial

In HTML5, the spaces and slashes at the end of the empty element are optional, but in XHTML, there must be a slash, so it is best to write the slashes each time.

Disabled and required can be attribute values or not.

1) Attribute Value: disabled = "disabled" required = "required"

2) No attribute value: disabled, required, but the review element is: disabled = "required = ""

File Name:

1) All file names must be in lower case to facilitate visitor access.

2) use-to separate file names. Do not use _, because _ does not support search engine optimization as well-

3) the folder names are all in lower case.

Advantages of using Semantics

1) Improve accessibility and interoperability

2) improved search engine optimization

3) it is easier to maintain and add styles.

4) less code and faster loading

Disable Chrome Cache

Developer tool. In the lower right corner, the gear icon. Settings. General. Disable Cache

If you do not close the developer tool, the cache will be disabled.

Title

The core content is placed in the first 60 characters (including spaces)

Role increases accessibility

1) page-level header role = "banner"

2) nav role = "navigation"

3) main role = "main"

4) aside role = "complementary"

5) page-level footer role = "contentinfo"

Html5 new elements (Part)

1) <time> the property datatime = "" can be added for the machine.

It can be used to display the expected date, time, and time range

2) meter indicates the score value and measurement within a known range

If IE9 is not supported, the text is displayed.

The low, high, and optimum attributes are used to set the low, medium, and high levels.

Min, max, 0/1. 0 by default.

3) SS

Supports value, max, and form (if the progress bar is not nested in the form element and you need to associate it, you can add the form attribute to set its value to the form id)

In js, you can directly set its value, myProgress. value = 45;

SVG

Not supported by IE8, but similar effects can be achieved using JavaScript such as SVG Web.

PNG

Supports index color transparency and alpha transparency (PNG-8, PNG-32 ).

Create an anchor and a connection anchor

<H2 id = "myTitle">

1) same document

Use href = "# myTitle"

2) another document

Href = "home.html # myTitle"

3) Another Server

Href = "http://www.xx.com/myProject/home.html # myTitle"

If wildcard * is used, the matching range becomes larger, which slows down page loading by the browser.

Low-specificity selector makes it easier to reuse

Delimiter

+ Directly following the specified Element

~ It appears after the specified Element and does not need to appear directly

Pseudo element

: First-child IE8 + supported

: Last-child IE9 + supported

: After the first-letter IE8 + operator, the punctuation marks and the first word are not used as the first letter.

Pseudo class

: Not supported before IE9

Attribute Selector

[Attribute ~ = "Value"] is the exact match between classes separated by spaces.

[Attribute | = "value"] finds the first entry starting with value -.

^ Starts with $ and ends *.

Em

The font size is relative to the font size of its parent element (1em = font size of the parent element)

Rem

The font size is relative to the font size of its root element (1em = font size of the root element) IE9 + supported

Line-height

Is relative to its font, refers to the magnification

Web font

When the font memory is large, loading is slow, so you need to reduce the page weight

. Eof <= IE8 only supports this embedded font

. Ttf and. otf IE9 +, Firefox 3.5 +, Opera 10 +, Safari 3.1 +, Chrome 4.0 +

. Woff IE9 +, Firefox 3.6 +, Opera 11.1 +, Safari 5.1 +, Chrome 6.0 +

Attribute compatibility

Generally, prefix is placed at the front, and prefix is not put at the back, because the priority after prefix is higher.

Tabindex = "0/num"

After this attribute is added, you can use the TAB key to move it without using the mouse.

Ul sets margin-left: 0

It is mainly used for the first version of IE7 and earlier li to the left