"HTML5 and CSS3 Basic Course" (8th edition) personal notes

HTML5 and CSS3 Basic Tutorials (8th edition) personal notes

Four to six chapters

Small in-line phrases
Copyright symbol: &copy

Can be nested arbitrarily, HTML and HTML5 mean different meanings
Strong important
EM stress

HTML5 in B I

Figure: Diagram
Figcaption can be used to add branding?

Cite in BLOCKQUOTE: provides the location of the quoted text

Many developers avoid using Q, but instead manually add quotation marks or character entities
DateTime can be used to synchronize dates and times between web apps

Yyyy-m-ddthh:mm:ss or Hh:mm.sss
UTC Global Standard Time

The full name of the title abbreviation of ABBR (usually provided at the first occurrence), with parentheses providing a better full name for the abbreviation

Abbr set a dashed underline in the CSS and, if not displayed, set line-height in its parent element
Acronmy (initials) before HTML5, but obsolete in HTML5

DFN: Define terminology. DFN if only nested a ABBR,DFN itself without text, then the Title property can only appear in the abbr

SUP and sub will disrupt line spacing

Address contains only contact information

Ins and Del are less able to surround both phrase content and block-level content

s callout is no longer accurate or not in related content

Code: or file name
&LT and & gt for < and >
KBD SMAP

Font width: Code kbd SMAP Pre

White-space:pre-wrap,pre,nowrap

HCard: Micro-format

In span: dir lang title, span, class and ID are usually applied only one
Non-textual annotations in U:HTML5
WBR: Can be changed at line
Ruby: Side note Mark (RP,RT)
BDI BDO
Meter (Title,optimum,low,high)

JPEG lossy format
png-24 file size is much larger than JPEG
PNG and GIF are lossless formats, GIF has only 256 colors, PNG supports transparency better than GIF, resulting files are smaller, PNG and GIF support transparency, but using PNG is better, each pixel of GIF is either transparent or opaque
Transparent images should use PNG-8 or png-24
WebP: Google developed a picture format designed to speed up the loading of pictures. Image compression volume is about 2/3 of JPEG, and can save a lot of server bandwidth resources and data space. Well-known websites like Facebook and ebay have started testing and using the WEBP format.
But WEBP is a lossy compression. Encoding WEBP files of the same quality requires more computing resources than encoding JPEG files.

The number of printers per inch is usually more than the number of inches per inch of the monitor

SVG: Scalable Vector graphics

Charles and Fiddler are two tools for analog connections

Do not use ALT instead of the caption of the image, put the img into a figure and add figcaption

Changing the image's properties (size) in code is slower than the actual size of the picture, and should be changed with the image editor.

Retina display, each point is replaced with four points. Considering the retina display and other similar displays, the image size is enlarged by twice times and then displayed in half size, otherwise it will blur

tab or tab and shift combine to navigate a Web page (next link, form, image)
Do not overuse block-level links (a bunch of content is wrapped up with a)
Avoid using similar "click here" as a link, lack of context
Anchor with ID
Do not use links to e-mail addresses

Seven to Ten

Using inline style sheets is not recommended
！ Important This method is not recommended unless under special circumstances. If some pages contain some HTML that cannot be modified, such as a third-party newsfeed, you can use it! Important Override These styles
User-created style sheets take precedence over the CSS created by the coder for the site, but above the browser's default style
Inhert: You want to indicate that the value of this property is the same as the value set by the parent element of the corresponding element to the property
REM: Font size relative to HTML elements
RGBA: You can add a transparency at the end
HSL (hue, saturation, brightness)
Hsla similar to Rgba
To link to an external style sheet:
@import (affects the download speed and rendering speed of the page)
Link (the browser will save him in the cache, speeding up the page loading
Link media= "screen" (Print,all) or @media print{}
. class > elements: Direct child elements of class
. class element A + element b:a, b directly adjacent
Pseudo-Class: First-child,:last-child,
Pseudo-elements::: First-line,::first-letter,::before,::after
Define the order of pseudo-classes in a: link, visited, focus, hover, active
Property selector:
~: Match exactly one of the words
|: attribute values begin with value-
^: attribute value starts with value
$: Property value ends with value
*: substring with property value = value
Link to external A, add rel= "Extternal"

The Font-family property is inherited, but input, textarea, and select Do not inherit, and you can force inheritance with inherit
Font-stle:italic Italic Body
If the font itself is not bold, italic, using code force Bold and oblique experience to produce pseudo-bold and pseudo-italic
Font-weight: Range can be normal thickness in 100~900,400
In the responsive design, the font size with EM
font-size:100% equivalent to set to 16PX (the default font size for most systems)
If the color is #aabbcc, it can be simplified to #abc
Background-attachment:fixed/scroll
The background default extends to within the bounding rectangle. Can be changed with Backgrond-clip: Content-box,padding-box,border-box, default value is Border-box
Letter-spacing kerning, word-letter: Word spacing
Set the letter spacing and word spacing to the default: 0 or Normal
When using EM, only the calculated size will be inherited
Text-indent: Indentation, no effect on inline elements
Text-align only works on block elements
Text-transform;capitalize each word with the first letter capitalized
Font-varient:small-caps Small Caps
Text-decoration:line-throuth,underline,overline
HTML5, in link is can not write type= "Text/css"

11 to 14

Box-sizing:border-box, width and height are included within the border (including borders)
. clearfix
Z-index is invalid if the location is static
Vertical-align:baseline,middle,super,sub,text-top,text-bottom,top,bottom
Cursor:pointer,default (arrow), Crosssair (plus), move,wait,help,text,progress,auto,x-resize
The composition of responsive pages: images and media, streaming layouts, media queries
Scalable Image: Do not set width and height, set max-width:100%
Flex layout: Parent element Set Max-width, child element set width to%
Attribute prefix: Google-webkit-
Media Enquiry: <link media= "only screen and (min-width:480px)" href= "" >
<meta name= "Viewpoint" content= "width=device-width,initial-scale=1" > The width of the visual area will be set to the device section
Constructs a subset when a font is introduced
Find Web Fonts:
Self-hosted (@font-face, can only be introduced one at a time, can be renamed), Font-weight:normal,font-style: Based on imported font styles
Web font service, import in link, set corresponding values in Font-family and Font-weight respectively
Vendor Prefix:
-webkit-:webkit/safari/older versions of Chrome
-moz-:firefox
-ms-:ie
-o-: OPERA
Oval fillet: border-radius:x (horizontal radius)/y (vertical radius)
Text-shadow's fuzzy radius is optional
Box-shadow:spread Expanding or shrinking shadows
Inset Inner Shadow
Gradient background:
Linear gradient: background:linear-gradient (to top left/120deg,silver,black)
Radial gradient: Background:radial-gradient (at top/(100px 50px)//(Closest-side)/(Closest-corner) (farthest-side) at 65% 70%, Yellow 70% (percentage setting color is worth it), red)
Sprite: Flatten image (set background-img, then set background-position)

"HTML5 and CSS3 Basic Course" (8th edition) personal notes