libcurl是一个跨平台的网络协议库,支持http, https, ftp, gopher, telnet, dict, file, 和ldap 协议。libcurl同样支持HTTPS证书授权,HTTP POST, HTTP PUT, FTP 上传, HTTP基本表单上传,代理,cookies,和用户认证。libcurl的官网 、库下载。这种库使用的时候就像使用wiringPi库一样,编写完代码需要链接这个库,所以要先下载这个库。
在这里插入图片描述
在这里插入图片描述
调用libcurl库访问百度主页并将数据保存到文件中: 程序代码:
#include <stdio.h>
#include <curl/curl.h>
#define true 1
#define false 0
typedef unsigned int bool;
bool getUrl(char *filename)
{
CURL *curl;
CURLcode res;
FILE *fp;
if ((fp=fopen(filename, "w"))==NULL) // 返回结果用文件存储
return false;
struct curl_slist *headers=NULL;
headers=curl_slist_append(headers, "Accept: Agent-007");
curl=curl_easy_init(); // 初始化
if (curl)
{
//curl_easy_setopt(curl, CURLOPT_PROXY, "10.99.60.201:8080");// 代理
curl_easy_setopt(curl, CURLOPT_HTTPHEADER, headers);// 改协议头
curl_easy_setopt(curl, CURLOPT_URL,"http://www.baidu.com");
curl_easy_setopt(curl, CURLOPT_WRITEDATA, fp); //将返回的http头输出到fp指向的文件
curl_easy_setopt(curl, CURLOPT_HEADERDATA, fp); //将返回的html主体数据输出到fp指向的文件
res=curl_easy_perform(curl); // 执行
if (res !=0) {
curl_slist_free_all(headers);
curl_easy_cleanup(curl);
}
fclose(fp);
return true;
}
}
bool postUrl(char *filename)
{
CURL *curl;
CURLcode res;
FILE *fp;
if ((fp=fopen(filename, "w"))==NULL)
return false;
curl=curl_easy_init();
if (curl)
{
curl_easy_setopt(curl, CURLOPT_COOKIEFILE, "/tmp/cookie.txt"); // 指定cookie文件
curl_easy_setopt(curl, CURLOPT_POSTFIELDS, "&logintype=uid&u=xieyan&psw=xxx86"); // 指定post内容
//curl_easy_setopt(curl, CURLOPT_PROXY, "10.99.60.201:8080");
curl_easy_setopt(curl, CURLOPT_URL, " http://mail.sina.com.cn/cgi-bin/login.cgi "); // 指定url
curl_easy_setopt(curl, CURLOPT_WRITEDATA, fp);
res=curl_easy_perform(curl);
curl_easy_cleanup(curl);
}
fclose(fp);
return true;
}
int main(void)
{
getUrl("/tmp/get.html");
postUrl("/tmp/post.html");
}
大概解读代码: 要用一个是getUrl,一个是postUrl,用get跟post两种方法来请求的一个网页。 getUrl,我们来看一下,是自己封装的这个函数,fopen这个函数去打开了一个文件,放在fp这个流里面。然后curl_easy_init去做初始化,去初始化我们的curl引擎,初始化成功以后curl_easy_setopt去设置curl相关的项, 包括我们要访问的IP地址等等,还有一个CURLOPT_WRITEDATA。访问成功数据返回以后呢会把数据流导入到这个filename这个文件里面,那filename文件是哪里呢?在/tmp/get.html。这文件如果没有的话,他这边fp=fopen(filename, "w")应该会创建啊,去回顾一下文件相关的操作。然后将返回的 html主体数据输出到fp指向的文件 ,**百度的访问的所有结果往文件里面去写**,然后curl_easy_perform执行就是在访问百度,如果res !=0,这个res不等于零是啥意思呢?我们去回顾一下之前提到的这个进行http请求以后的一个返回值,如果请求成功以后啊,我们去释放这相关的curl的这个句柄。并且关闭这个文件,return true;访问成功,这个是相关的步骤
通过以上设置然后再执行程序:可以看到/tmp/get.html这个文件夹里面有从百度网页获取的html代码:
libcurl的使用(其实和socket编程时一样,都需要一定的步骤):
调用curl_global_init()初始化libcurl,(就像初始化套接字)
调用curl_easy_init()函数得到 easy interface型指针(这个指针用来各种配置)
调用curl_easy_setopt()设置传输选项(通过调curl_easy_setopt这个函数来对指针进行各种配置,比如:请求的方式)
根据curl_easy_setopt()设置的传输选项,实现回调函数以完成用户特定任务
调用curl_easy_perform()函数进行访问请求
调用curl_easy_cleanup()释放内存
函数简介
CURLcode curl_global_init(long flags) 功能:初始化libcurl 这个函数只能用一次。(其实在调用curl_global_cleanup 函数后仍然可再用) 如果这个函数在curl_easy_init函数调用时还没调用,它将由libcurl库自动调用 所以多线程下最好主动调用该函数以防止在线程中curl_easy_init时多次调用。
注意:虽然libcurl是线程安全的,但curl_global_init是不能保证线程安全的, 所以不要在每个线程中都调用curl_global_init,应该将该函数的调用放在主线程中。
参数:flags
CURL_GLOBAL_ALL //初始化所有的可能的调用。
CURL_GLOBAL_SSL //初始化支持 安全套接字层。
CURL_GLOBAL_WIN32 //初始化win32套接字库。
CURL_GLOBAL_NOTHING //没有额外的初始化。
CURLcode curl_easy_setopt(CURL * handle, CURLoption option,parameter)函数:
这个函数最重要了.几乎所有的curl 程序都要频繁的使用它.它告诉curl库.程序将有如何的行为. 比如要查看一个网页的html代码等.(这个函数有些像ioctl函数)
参数:
CURL类型的指针
各种CURLoption类型的选项.(都在curl.h库里有定义,man 也可以查看到)
parameter 这个参数 既可以是个函数的指针,也可以是某个对象的指针,也可以是个long型的变量.它用什么这取决于第二个参数. CURLoption 这个参数的取值很多.具体的可以查看man手册.
hrome 126 于近期发布了稳定版本,其中一个比较有意思的更新是给 HTML 带来一个新的元素:<permission> ,它将从这个版本开始试用,并且正在努力走向标准化。
今天我们一起来看下这个 <permission> 元素的用法。
当 Web 应用程序需要访问浏览器的高级功能时,需要向用户主动请求许可。例如,当百度地图使用 Geolocation API 获取用户的地理位置时,浏览器会提示用户申请权限,这是权限规范中定义明确的概念。
申请权限的触发方式一般分为两类,被动隐式触发,或者主动显示触发:
例如,Geolocation API 是一个强大的 API,它的使用依赖于首次使用时隐式询问的方法。例如,当程序调用 navigator.geolocation.getCurrentPosition() 方法时,权限提示框会在第一次调用时自动弹出,还有另外一个例子是 navigator.mediaDevices.getUserMedia()。
一些其他的 API,如 Notification API 或 Device Orientation API,通常有一种显式的方式通过静态方法来请求权限,如 Notification.requestPermission() 或 DeviceMotionEvent.requestPermission()。
网站可以在加载时立即调用诸如 navigator.mediaDevices.getUserMedia() 或 Notification.requestPermission() 等方法。这会导致在用户还没与网站进行交互时就弹出权限提示。这就是明显的权限滥用行为,并且影响到两种方式,既包括首次使用时的隐含询问,也包括提前明确请求。
权限滥用导致浏览器厂商要求有像点击按钮或按下按键这样的用户操作,然后才会显示权限提示。这种方法的问题在于,浏览器很难确定某个特定的用户操作是否应该导致显示权限提示。也许用户只是因为页面加载时间太长而在页面上随意某个地方随便点击,有些网站也变得非常擅长诱骗用户点击内容来触发提示。
另一个问题是权限提示框通常显示的方式:在网站的 “死亡线” 之上(特别是在大屏幕上),也就是说,在应用程序能够绘制到的浏览器窗口区域之外。用户在刚刚点击了窗口底部的一个按钮后,可能会错过浏览器窗口顶部的提示,这种情况还是挺常见的。当浏览器有应对权限滥用的缓解措施时,这个问题往往会更加严重。
另外,用户一旦做出了拒绝某个权限的操作,之后想要改变就不太容易了。他们得找到特定的地方,比如那个网站信息下拉菜单,然后去进行重置或调整权限的操作,而且还得重新加载页面才行。网站也没办法提供很方便的途径让用户快速改变权限状态,还得详细地告诉用户怎么去找到地方改变设置。
如果某个权限是非常重要的,比如视频会议软件要用麦克风权限,那像谷歌会议这类的软件就会弹出很显眼的对话框来告诉用户怎么去把之前阻止的权限给开通。
为了解决上面的这些问题,<permission> 元素诞生了。这个元素允许开发者以声明方式请求使用权限,如下例所示:
<permission type="camera" />
“type” 属性代表你正在请求的权限列表(如果有多个可以以空格分割)。目前,允许的值是 'camera','microphone' 以及 'camera microphone'。默认情况下,这个元素呈现出来的样子类似于具有最简用户代理样式的按钮。
对于某些允许附加参数的权限,type-ext 属性接受以空格分隔的键值对,例如 precise:true 地理位置权限。
当用户与 <permission> 元素交互时,他们可以循环经历各个阶段:
如果他们之前不允许某项功能,他们可以在每次访问时允许该功能,或者在当前访问时允许该功能。
如果他们之前允许该功能,他们可以继续允许,或者停止允许。
如果他们之前不允许某项功能,他们可以继续不允许它,或者这次允许它。
<permission> 元素的文本会根据状态自动更新。例如,如果已授予使用某项功能的权限,则文本会更改为表示允许使用该功能。如果需要先授予权限,则文本会更改为邀请用户使用该功能。将之前的屏幕截图与以下屏幕截图进行比较,以查看这两种状态。
<permission> 元素可以与 Permissions API 一起使用。有许多事件可供监听:
我们可以直接在 HTML 代码中内联注册这些事件的事件监听器(<permission type="…" onpromptdismiss="alert('The prompt was dismissed');" />),或者在 <permission> 元素上使用 addEventListener():
<permission type="camera" />
<script>
const permission=document.querySelector('permission');
permission.addEventListener('promptdismiss', showCameraWarning);
function showCameraWarning() {
// Show warning that the app isn't fully usable
// unless the camera permission is granted.
}
const permissionStatus=await navigator.permissions.query({name: "camera"});
permissionStatus.addEventListener('change', ()=> {
// Run the check when the status changes.
if (permissionStatus.state==="granted") {
useCamera();
}
// Run the initial check.
if (permissionStatus.state==="granted") {
useCamera();
}
});
</script>
参考:https://developer.chrome.com/blog/permission-element-origin-trial
为前端工程师来说,css3的运用无疑是很广泛的,实现的奇妙效果也是丰富多彩。它的优点远不止于能让你的页面酷炫非常,一个好的css3运用能给体验者一种莫名的心旷神怡嘿嘿嘿!
下面来看看百度是怎么使用css3的
这是百度的首页。链接:http://xuanfengge.com/demo/201406/guide/
下面我们说说这是怎么实现的。
首先箭头是一张图片,然后效果其实就是用2个相同的DOM元素利用缩放动画使这两个箭头交叉闪烁。
代码附上:
//两个箭头的html
<a class="s-xguide-down trans" href="http://www.baidu.com/" onclick="return false;" hidefocus=""></a>
<a class="s-xguide-down arrow-1 trans" href="http://www.baidu.com/" onclick="return false;" hidefocus=""></a>
css代码如下
图片样式css
css3缩放动画
css3缩放动画
效果引用
这个效果主要运用到了@keyframes的生成动画,利用css3的scale对两张图片进行缩放、透明度的交叉,最终得到动画的实现。
一个基础的css3教程希望能给刚入门的小伙伴们带来帮助,快动手试试吧!
*请认真填写需求信息,我们会在24小时内与您取得联系。