Table of Contents
什么是HTML5和CSS3" >什么是HTML5和CSS3
HTML 5的新特新" >HTML 5的新特新
1. 新的内容标签" >1. 新的内容标签
2. 更好的表格体系" >2. 更好的表格体系
3. 音频、视频API" >3. 音频、视频API
4. 画布(Canvas) API" >4. 画布(Canvas) API
5. 地理(Geolocation) API" >5. 地理(Geolocation) API
6. 网页存储(Web storage) API" >6. 网页存储(Web storage) API
7. 拖拽释放(Drag and drop) API" >7. 拖拽释放(Drag and drop) API
CSS3 新特性" >CSS3 新特性
1. RGBa" >1. RGBa
2. Multi-column layout" >2. Multi-column layout
3. Round corners" >3. Round corners
Home Web Front-end H5 Tutorial HTML 5 & CSS 3的新交互特性

HTML 5 & CSS 3的新交互特性

May 17, 2016 am 09:09 AM
admin h

HTML 5 & CSS 3的新交互特性

本文标题的这副图片,是用Phosotshop制作的。但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字。并且由于图片的体积不算太小,可能网速慢的网友在浏览的时候不得不耐心的等待图片的刷新。那么,有没有一种新的方法可以避免这些缺点呢?

有的,HTML5和CSS3就可以满足你的需求。甚至,它可以做的更多,更好。作为一名设计师,我们应当了解它们是什么东西,有什么特性,从而进一步思考通过HTML5和CSS3我们能做些什么。

 

什么是HTML5和CSS3

 

HTML和CSS并不难理解。HTML为构成网页的主要语言。通过这种语言,我们可以向计算机说明网页格式、内容、显示效果等等。而CSS则是专门用来控制网页显示效果的语言。这时候问题出来了,为什么我们要单独使用CSS呢,HTML不是一样可以控制Web页面的显示效果么?为了回答这个问题,我举个简单的例子:

HTML 5 & CSS 3的新交互特性

有没有发现如果一旦形容的事情过多,想要把事情描述清楚的时候,我们不得不重复大量的信息?页面语言也是一样,在这种情况下显得杂乱无章,非常难以理出头绪。通过将控制显示效果的语言集成到CSS里,我们不但可以保证页面语言主体部分的简洁,而且可以非常方便的复用各种语言集合。

HTML5和CSS3是HTML和CSS的最新版本,它们目前均未确定标准,但是已经公布的新特征已经让我们心动不已。


 

HTML 5的新特新

 

1. 新的内容标签

HTML 5 & CSS 3的新交互特性

HTML4中的内容标签级别相同,无法区分各部分内容。而HTML5中的内容标签互相独立,级别不同,搜索引擎以及统计软件等均可快速识别各部分内容。

 

2. 更好的表格体系

HTML 5 & CSS 3的新交互特性

现在,你可以抛弃JavaScript或者是PHP,只通过HTML5来定义表格。你可以定义每个表格单元的输入格式,也可以定义这个单元是否是必填的等等。

 

3. 音频、视频API

HTML 5 & CSS 3的新交互特性

HTML 5 & CSS 3的新交互特性

HTML5不但允许你在网页中直接整合视频、音频,同时更提供了一套功能丰富的API用来控制媒体播放,而这些用来控制媒体播放的元素也都是可以被编辑的。因此,HTML5在视频以及音频层面上实际已经可以替代常用的flash插件了。

 

4. 画布(Canvas) API

HTML 5 & CSS 3的新交互特性

在网页中绘制图形一直是个大难题,我们不得不借助flash、silverlight等插件。然而HTML5允许你直接在网页上进行绘图,甚至允许你与网页生成更多的交互,例如绘制图形、放大缩小,等等。图例是一个用HTML5制作的小游戏。

 

5. 地理(Geolocation) API

HTML 5 & CSS 3的新交互特性

HTML5提供了地理信息的应用接口Geolocation API。通过这个API,网页可以通过IP,GPS等方式来获得用户的地理信息;同时用户也可以选择是否关闭这个功能。

 

6. 网页存储(Web storage) API

HTML 5 & CSS 3的新交互特性

HTML5提供了网页存储的API,方便Web应用的离线使用。除此之外,新的API相对于cookie也有着高安全性,高效率,更大空间等优点。

 

7. 拖拽释放(Drag and drop) API

HTML 5 & CSS 3的新交互特性

我们可以通过HTML5的Drag and drop API来完成网页中的拖拽释放效果,避免了以往的网页在拖拽释放过程中需要不停修改元素的位置,代码繁多的弊端。

 

CSS3 新特性

 

1. RGBa

HTML 5 & CSS 3的新交互特性

CSS3的RGBa新特性允许你对每个元素进行色彩以及透明度的设置。而原来常用的opacity命令只能对元素及其子元素进行设置。

 

2. Multi-column layout

HTML 5 & CSS 3的新交互特性

CSS3新提供的多栏布局选择器无需HTML布局标签即可生成多栏布局,同时‘栏数’、‘栏宽’以及‘栏间距’都是可以定义的。

 

3. Round corners

 

Statement of this Website
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

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

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How uniapp achieves rapid conversion between mini programs and H5 How uniapp achieves rapid conversion between mini programs and H5 Oct 20, 2023 pm 02:12 PM

How uniapp can achieve rapid conversion between mini programs and H5 requires specific code examples. In recent years, with the development of the mobile Internet and the popularity of smartphones, mini programs and H5 have become indispensable application forms. As a cross-platform development framework, uniapp can quickly realize the conversion between small programs and H5 based on a set of codes, greatly improving development efficiency. This article will introduce how uniapp can achieve rapid conversion between mini programs and H5, and give specific code examples. 1. Introduction to uniapp unia

Which version is more stable: win1121h2 or 22h2? Which version is more stable: win1121h2 or 22h2? Jan 04, 2024 am 08:53 AM

Comparing the two versions of win1121h2 and 22h2, the latter 22h2 is more stable, and 22h2 has more functions. Compared with the previous 21h2, many functions have been improved. Let’s take a look. Which one is more stable, win1121h2 or 22h2: Answer: 22h2 is more stable. Comparing win1121h2 and 22h2, 22h2 is more stable. 22h2 adds a lot of features, and the problems of 21h2 have also been improved in 22h2. 22h2 update feature: Applications folder in start menu. Adjustable fixed area in the Start menu. Drag and drop on the taskbar. Focus Assist is integrated with the Notification Center. New "Spotlight" wallpaper feature. new

Which one is better between win101909 and 21h2? Which one is better between win101909 and 21h2? Dec 26, 2023 pm 02:01 PM

Windows 101909 is currently considered one of the most stable and reliable versions. However, unfortunately, service support for this version has ended recently. 21H2 is a relatively stable version. In fact, from the actual situation, both are very good choices. Which one is better, win101909 or 21h2? Answer: 1909 is more stable, and 21h2 will be more secure. In the current environment, 1909 is still generally regarded as one of the most stable and reliable versions. However, the Win101909 version has officially stopped serving on May 11, 2021. WindowsServer21h2 is committed to providing more professional IT function support to the majority of users. 1. After actual testing by many users,

What is the role and usage of springboot admin monitoring What is the role and usage of springboot admin monitoring May 25, 2023 pm 06:52 PM

Applicable scenarios: 1. The project scale is not large. 2. The number of users is not very large, and the concurrency requirements are not strong. 3. There is no dedicated operation and maintenance force. 4. Exquisite team size. For some regular projects, or units where the division of corporate responsibilities is not very clear. explain. Often a system goes from requirements to design, development, testing to final launch, operation and maintenance. Often 80% of the tasks are completed by the development team. Therefore, in addition to implementing the system's functions, developers must also provide customers with consultation and answer questions and solve production problems. Just imagine, after an application is launched, there are no monitoring measures. Just like driving a car without any dashboard, no one feels safe on the road like this. How to balance simplicity and efficiency is something worth thinking about. 1. Springb

Which is the better choice: win1123h2 or 22h2? Which is the better choice: win1123h2 or 22h2? Dec 28, 2023 pm 03:09 PM

The 23h2 version and the 22h2 version in the Windows 11 system will be released in 2023 and 2022 respectively. Generally speaking, system updates are getting better and better. The editor also believes that the 23h2 version is better than the 22h2 version. Which one is better, win1123h2 or 22h2? Answer: win1123h2 is better. According to reports, win1123h2 is a cumulative version update from 22h2 to the next version, and they are all the same platform. This means that there are no compatibility issues between the two versions. It is recommended that you update them in time. The win1123h2 version brings us many practical features, such as the never-merge mode for taskbar window applications. There are more

Solve the problem of not getting Win11 23H2 update Solve the problem of not getting Win11 23H2 update Jan 14, 2024 pm 09:24 PM

Everyone wants to update the 23H2 version of Win11 recently, but a small number of users have not received the update push message yet. It may be that a process in the background update progress is stuck, and it will be fine after a while. What to do if the Win11 update fails to get 23H2. Method 1: Wait patiently. If the user checks the update status of the computer and finds that it is stuck, we can wait for a while and the system will continue to update. Method 2: Clear the updated cache. If the user has updated the system before and has not cleared the more detailed cache, it will affect the normal update of 23h2. You can manually clear it. Method three: Use image installation. It is recommended that you go to Microsoft's official website to download the image file of win1123h2, and then update the file.

You need the permissions provided by admin to make changes to this file. How to solve this problem? You need the permissions provided by admin to make changes to this file. How to solve this problem? Jul 26, 2023 am 10:56 AM

You need the permissions provided by admin to make changes to this file. Solution: 1. After selecting the administrator account on the login interface and entering the password, you can modify the file smoothly; 2. You can right-click the file and select "As Administrator" Solution: 3. Modify file permissions, right-click the file, select "Properties", click the "Security" tab, then click the "Edit" button, select your username, and then check the "Full Control" option ; 4. Use the command prompt to solve the problem; 5. Set UA permissions.

How to write thinkphp admin How to write thinkphp admin May 28, 2023 pm 02:16 PM

thinkphpadmin is written as "

See all articles