search
HomeWeb Front-endFront-end Q&AWhat are the new features of h5 and css3

h5 new features: drag and drop API, semantic tags, audio and video API, canvas API, geography API, form controls, etc. New features of css3: 1. RGBA and HSLA; 2. text-shadow; 3. border-radius, box-shadow, box-sizing, etc.

What are the new features of h5 and css3

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

html5 is a language description method for constructing web content. HTML5 is the next generation standard for the Internet. css3 is an upgraded version of css (cascading style sheets) technology. Let’s take a look at the new features of HTML5 and CSS3.

New features of CSS3:

1. Color: new RGBA, HSLA mode

2. Text-shadow

3. Border: Rounded corners (border-radius) Border shadow: box-shadow

4. Box model: box-sizing

5. Background: background-size Set background image The size background-origin sets the origin of the background image

background-clip sets the cropping area of ​​the background image, separated by "," you can set multiple backgrounds for adaptive layout

6. Gradient: linear-gradient, radial-gradient

7. Transition: transition, animation can be realized

8. Custom animation

9. The only pseudo pseudo code introduced in CSS3 The elements are: :selection.

10. Media query, multi-column layout

11. border-image

12.2D transformation: transform: translate(x, y) rotate (x, y) skew(x, y) scale(x, y)

13. 3D conversion

CSS3 new pseudo-class:

p:first-of-type selects each

element that is the first

element of its parent.

p:last-of-type selects each

element that is the last

element of its parent element.

p:only-of-type Selects every

element that is the only

element of its parent.

p:only-child Selects each

element that is the only child element of its parent element.

p:nth-child(2) Selects each

element that is the second child of its parent element.

:enabled, :disabled Control the disabled state of the form control.

:checked, the radio button or check box is selected.

html5 new features:

1. Drag and drop API

2. Better semantic content tags (header ,nav,footer,aside,article,section)

3. Audio, video API(audio,video)

4. Canvas API

5. Geography (Geolocation) API

6. Local offline storage localStorage long-term storage data, the data will not be lost after the browser is closed;

7. The sessionStorage data will be automatically deleted after the browser is closed

8. Form controls, calendar, date, time, email, url, search

9. New technologies webworker, websocket, Geolocation

For more programming related knowledge, please visit:Introduction to Programming! !

The above is the detailed content of What are the new features of h5 and css3. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
css怎么隐藏元素但不占空间css怎么隐藏元素但不占空间Jun 01, 2022 pm 07:15 PM

两种方法:1、利用display属性,只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素,只需给元素添加“position:absolute;top:-9999px;”样式。

h5是指什么h5是指什么Aug 02, 2023 pm 01:52 PM

H5是指HTML5,是HTML的最新版本,H5是一个功能强大的标记语言,为开发者提供了更多的选择和创造空间,它的出现推动了Web技术的发展,使得网页的交互和效果更加出色,随着H5技术的逐渐成熟和普及,相信它将会在互联网的世界中发挥越来越重要的作用。

css3如何实现鼠标点击图片放大css3如何实现鼠标点击图片放大Apr 25, 2022 pm 04:52 PM

实现方法:1、使用“:active”选择器选中鼠标点击图片的状态;2、使用transform属性和scale()函数实现图片放大效果,语法“img:active {transform: scale(x轴放大倍数,y轴放大倍数);}”。

如何区分H5,WEB前端,大前端,WEB全栈?如何区分H5,WEB前端,大前端,WEB全栈?Aug 03, 2022 pm 04:00 PM

本文带你快速区分H5、WEB前端、大前端、WEB全栈,希望对需要的朋友有所帮助!

css3动画效果有变形吗css3动画效果有变形吗Apr 28, 2022 pm 02:20 PM

css3中的动画效果有变形;可以利用“animation:动画属性 @keyframes ..{..{transform:变形属性}}”实现变形动画效果,animation属性用于设置动画样式,transform属性用于设置变形样式。

h5如何使用positionh5如何使用positionDec 26, 2023 pm 01:39 PM

在H5中使用position属性可以通过CSS来控制元素的定位方式:1、相对定位relative,语法为“style="position: relative;”;2、绝对定位absolute,语法为“style="position: absolute;”;3、固定定位fixed,语法为“style="position: fixed;”等等。

css3怎么设置动画旋转速度css3怎么设置动画旋转速度Apr 28, 2022 pm 04:32 PM

在css3中,可以利用“animation-timing-function”属性设置动画旋转速度,该属性用于指定动画将如何完成一个周期,设置动画的速度曲线,语法为“元素{animation-timing-function:速度属性值;}”。

h5怎么实现web端向上滑动加载下一页h5怎么实现web端向上滑动加载下一页Mar 11, 2024 am 10:26 AM

实现步骤:1、监听页面的滚动事件;2、判断滚动到页面底部;3、加载下一页数据;4、更新页面滚动位置即可。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

Hot Tools

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.