Basic review (4) | Refactoring HTML5&CSS3

Refactor HTML5&CSS3

H5

Introduction

• The core language of H5 World Wide Web, an application hypertext markup language under the standard universal markup language, is used to replace the new generation of standard versions of H4 and XHTML, so it is called H5

• XHTML Extensible Hypertext Markup Language, enhanced HTML, adapt to more needs of applications

• The design purpose is to support multimedia on mobile devices, adding semantic features, local storage features, device compatibility features, connection features, network multimedia features, three-dimensional, graphics and special effects features, performance and integration features, CSS3 features

• The font, center... element or attribute is abandoned

Advantage

• Improved usability and improved user-friendly experience, better semantic tags

• Bring more multimedia elements to the site, a good alternative to FLASH and Silverlight

• When it comes to the crawling and indexing of the website, it is very SEO friendly and is widely used in mobile programs and games, with good portability

Disadvantage

• Incompatible with IE9 and below

Add semantic tags

header: head tag nav: navigation tag main: body tag footer: tail tag

article: independent content label section: section label aside: sidebar label

Precautions:

• Semantic standards are mainly for search engines and can be used multiple times in the new tab page
• Compatibility issues in IE9, converted to block-level elements, mobile developers prefer

header,nav,article,aside,section,main,footer{display:block}

Add multimedia tags

You can easily embed audio and video in the page instead of using outdated flash and other browser plug-ins

Audio

• It can also natively support audio format files without plug-ins

<audio src="地址" controls="controls"></audio>

H5 stipulates that if the attribute name and the attribute value are the same, you can only write the attribute value

• Audio common tags
  

  google disabled autoplay

• Multiple audio format compatible writing methods, directly load two resources at one time, if still not, directly prompt the user that the version is too low

video

• Realize video playback without using plug-ins

<video src="地址" controls="controls"></video>

• Common attributes of video tags

Google’s video auto-play is only allowed when it is muted

• Multiple video compatible writing methods, still adding more video file formats

Add form label

Learned label type:

New form type:

• number can be set max/min="", step="number of steps" value="default display value"

New input form

<input type="text" list="list01">
<datalist class="list01">
  <option value="广州">gz</option>
  <option value="上海">
</datalist>

The datalist tag specifies the possible option list of the input element, including a set of option elements, which will automatically correspond to the value of the element during the input process, predefined

New form attributes

---

CSS3

Introduction

• Compared with the 7 selectors in CSS2, more other selectors have been added to realize more selection methods
• New selectors: child selector, brother selector, structural pseudo-class selector, pseudo-element selector, attribute selector

Child selector

Parent selector>Child selector

Used to select elements with a specific parent element, if it is not a direct child element, it will not be selected

Brother selector

Adjacent brother choose E1+E2

• Used to select sibling elements immediately after another element, both have the same parent element
• The first E2 immediately following E1 is selected (but E1 can have more than one)

Other brother selectors E1~E2

• All E2s of the same father after the selected E1

Structural pseudo-class selector

• nth-child(n) n can be a number, even (even) odd (odd), or formula (5n)
• nth-of-type(n) will ignore other non-homogeneous elements and only look for it in E

Pseudo element selector

.box::before{ content:"";}

• Pseudo-elements are in-line elements, we can modify them to block elements by display
• The element cannot be seen in the DOM, so it is called a pseudo element

Attribute selector

Used to select tags containing specified attributes

• Choose according to specific attributes

Selector weight

• id selector>class selector>tag selector>*
• The weight of the pseudo-class selector and attribute selector is equal to the class selector
• The weight of the pseudo element selector is equal to the label selector

Box model

box-sizing to specify the box model

Rounded corners

border-radius sets the rounded corners of the border

• The radius can be set by a single attribute

• Border-radius can be abbreviated, three-value, two-value, single-value

• Browsers of IE8 and below do not support the border-radius attribute, other browsers support

Text shadow

text-shadow can apply shadow to text, and can specify horizontal and vertical shadow, blur distance, color

• Multi-layer shadows, commas separate the attribute values ​​of multiple shadows, write first to cover the shadows written later

Box shadow

box-shadow is used to add shadow to the box border

• The outer border shadow does not need to be set

• Multiple shadows are also needed, just separate multiple attribute values ​​with commas

Excessive attributes

Before the advent of CSS3, flash animation or js was generally used to make animation. Through the realization of frame by frame, CSS3 can realize the transition effect of tween animation through transition . When the current element changes, there will be two states (A and B) ), the switch has a smooth animation transition effect.

transition:过度属性、过渡时间、运动曲线、延时时间；

• transition-property transition properties

  none: no attribute transition all: all changed attributes are transitioned

• transition-duration transition time

  The unit is s, the default is 0 and the unit s needs to be written

• transition-timing-function time curve

  

• Bezier curve can be changed by customization

• Browser compatibility issue: IE9 and earlier versions do not support the transition attribute, Safari needs to use the prefix -webkit-transition to achieve

2D conversion

transform

Move, zoom, rotate, lengthen or stretch elements, with transitions and animations, Kawaii replaces a lot of effects that can only be achieved with Flash before

Attribute value

Translate()

• The attribute value (x, y) represents the distance of the horizontal and vertical displacement, px or percentage (refer to the size of the moving box), distinguish positive and negative
• (X) Only one value represents the displacement in the horizontal direction
• Can achieve centering effect

Scale()

• Attribute value

Rotate rotate()

The number deg, deg means degree, positive number means positive direction, negative number means negative direction

• When the element is rotated, its coordinate axis will also change
• When multiple attribute values ​​are set to transform at the same time, the different writing order results in different effects

Tilt skew()

transform:skew(数字deg，数字deg)

• Two attributes represent the horizontal and vertical tilt angle

Transform-origin

• Set the position of the horizontal and vertical origin of the adjustment element, and adjust the reference point of the element
• Possible values, left, center, right, pixel value, percentage

Card package special effects case

• All six photos are arranged in one place, using the image of son and father, left:0 right:0
• Set different tranform rotation angles for different photos
• Set the animation transition for all photos

3D conversion

One more z-axis attribute than ordinary x and y axes

Perspective

• The presentation of the image 3D effect is actually a visual effect, which is achieved through perspective
• Perspective features: near big and far small
• Set a value to the perspective property

3D rotation

• The attribute value is one more rotateZ (angle) than the 2D rotation

3D displacement

• Displacement can be carried out according to X, Y, Z axis respectively
• After performing the position, the axis of rotation will also change

transform-style

• Set the internal nested child elements to be displayed in 3D space, and the child elements will retain their own 3D transformation axes

• Attribute value: flat: all child elements are rendered in 2D plane

  ​ preserve-3d: preserve 3D space

• The construction of 3D elements is that a certain graphic is composed of multiple elements. You can set this attribute for these elements to make them a real 3D graphic, which is generally set to the parent element.

• Browser compatibility issues, Chrome and Safari need the prefix -webkit-, IE9 needs the prefix -ms-

Animation

Create animation—>Binding animation

Create animation @keyframes

@keyframes{
 0%{transform:translateY(0);}
 100%{transform:translateY(150px)}
}

@keyframes can specify the CSS style, the effect of gradually changing from one style to another style, you can change any number of styles, any number of times.

• Use percentages to specify the event of change, or use the keywords "from" "to" to be equivalent to 0% to 100%

• The use of percentages can make the animation effect more flexible

Binding animation animation

div{
  animation：动画名称、过渡时间、速度曲线、动画次数、延时时间;
}

• Bind the animation created in @keyframes to a selector to produce an animation effect
• You can set the attribute as a single attribute and then add it. The animation name and transition time must be set, and other attributes can be set as needed
  
• Version compatibility issues. IE10, Firefox and Opera all support the @keyframes attribute. Chrome and Safari need the prefix -webkit- prefix, and IE9 and earlier versions do not support it.