整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
作网页时，经常需要设置页面的基本信息，如页面的标题、作者、和其他文档的关系等。为此HTML提供了一系列的标签，这些标签通常都写在head标签内，因此被称为头部相关标签。本节将具体介绍常用的头部标签。
1.设置页面标题标签<title>
<title>标签用于定义HTML页面的标题，即给网页取一个名字，该标签必须位于<head>标签之内。一个HTML文档只能包含一对<title></title>标签，<title></title>之间的内容将显示在浏览器窗口的标题栏中。例如将页面标题设置为“轻松学习HTML5”，具体代码如下：
<title>轻松学习HTML5</title>上述代码对应的页面标题效果如图1所示。
图 1设置页面标题标签<title>
2.定义页面元信息标签<meta />
<meta />标签用于定义页面的元信息（元信息不会显示在页面中），可重复出现在<head>头部标签中。在HTML中，<meta />标签是一个单标签，本身不包含任何内容，仅仅表示网页的相关信息。通过<meta />标签的两组属性，可以定义页面的相关参数。例如为搜索引擎提供网页的关键字、作者姓名、内容描述，以及定义网页的刷新时间等。下面介绍<meta />标签常用的几组设置，具体如下。
1）<meta name="名称" content="值" />
在<meta />标签中使用name和content属性可以为搜索引擎提供信息，其中name属性用于提供搜索内容的名称，content属性提供对应的搜索内容值，具体应用如下。
●设置网页关键字，例如某图片网站的关键字设置：
<meta name="keywords" content="千图网,免费素材下载,千图网免费素材图库,矢量图,矢量图库,图片素材,网页素材,免费素材,PS素材,网站素材,设计模板,设计素材， 网页模板免费下载,千图,素材中国,素材,免费设计,图片" />其中name属性的值为keywords，用于定义搜索内容名称为网页关键字，content属性的值用于定义关键字的具体内容，多个关键字内容之间可以用“,”分隔。
●设置网页描述，例如某图片网站的描述信息设置：
<meta name="description" content="专注免费设计素材下载的网站！提供矢量图素材,矢量背景图片,矢量图库,还有psd素材,PS素材,设计模板,设计素材,PPT素材,以及网页素材,网站素材,网页图标免费下载" />其中name属性的值为description，用于定义搜索内容名称为网页描述，content属性的值用于定义描述的具体内容。需要注意的是网页描述的文字不必过多，能够描述清晰即可。
●设置网页作者，例如可以为网站增加作者信息：
<meta name="author" content="网络部" />其中name属性的值为author，用于定义搜索内容名称为网页作者，content属性的值用于定义具体的作者信息。
2）<meta http-equiv="名称" content="值" / >
在<meta />标签中使用http-equiv和content属性可以设置服务器发送给浏览器的HTTP头部信息，为浏览器显示该页面提供相关的参数标准。其中，http-equiv属性提供参数类型，content属性提供对应的参数值。默认会发送<meta http-equiv="Content-Type" content="text/html" / >，通知浏览器发送的文件类型是HTML。具体应用如下：
●设置字符集，例如某图片官网字符集的设置：
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />其中http-equiv属性的值为Content-Type，content属性的值为text/html和charset=gbk，两个属性值中间用“;”隔开。这段代码用于说明当前文档类型为HTML，字符集为gbk(中文编码)。目前最常用的国际化字符集编码格式是utf-8，常用的国内中文字符集编码格式主要是gbk和gb2312。当用户使用的字符集编码不匹配当前浏览器时，网页内容就会出现乱码。
值得一提的是，在HTML5中，简化了字符集的写法，变为如下所示代码。
<meta charset="utf-8">●设置页面自动刷新与跳转，例如定义某个页面10秒后跳转至百度：
<meta http-equiv="refresh" content="10; url= https://www.baidu.com/" />其中http-equiv属性的值为refresh，content属性的值为数值和url地址，中间用“;”隔开，用于指定在特定的时间后跳转至目标页面，该时间默认以秒为单位。
量图标是我们日常设计应用程序和网页过程中不可缺少的元素之一。通过小矢量图标，我们可以快速方便地实现视觉指导和功能划分。
但在创作中，设计师往往需要花费大量的时间和精力来寻找不同网站的矢量图标，以满足他们的设计需求，这对项目进度和团队合作有很大的影响。
为您整理了10个设计师必须看到的免费矢量图标网站，并迅速收集！
即时设计是一款免费的在线 UI 设计工具，无系统限制，浏览器打开即可使用，更有丰富的在线素材、云端字体、交互动画等功能满足多种需求，轻松应付移动端、Web端、可视化大屏等设计场景，还可和产品、开发轻松协作，实时在线评审、交付切图、查看代码标注，大幅提高团队工作效率。
复制链接到浏览器体验：https://js.design/community?category=design&classify=icon&source=tt&plan=ystt290
即时设计的资源社区提供丰富的图标、插画、组件、原型等模板资源。
Freepik是一个非常受设计师欢迎的免费矢量图标网站。该网站来自欧洲，提供高质量的免费矢量图标、插图、照片和PSD文件材料。平台材料由设计师上传。经过精心筛选发布的图片材料非常时尚美观，还包括EPS或PSD格式，可用于二次修改。此外，Freepik的矢量图标质量优于大多数其他外国网站，值得收藏。
Flaticon是一个很好的国外矢量图标网站，目前拥有800多万个免费矢量图标，其中包括PNG、SVG、EPS、PSD和CSS格式的免费图标和贴纸有丰富的类型和内容。因此，无论您正在寻找哪种矢量图标，您都可以在这里找到所需的资源，并在搜索时使用英语输入。
Iconfinder提供了6.675万多个先进的矢量图标、插图和3D插图。它是一个强大的矢量图标网站，需要用英语搜索。大多数矢量图标是免费的。在这里，设计师可以快速找到各种矢量图标，无需注册即可直接下载。登录后，您还可以通过浏览器在线调整图标的颜色、大小或文本。界面清洁简单，操作简单。在线矢量图标编辑器可以满足图标编辑的基本需求。
Icon8有1、155、200个免费图标，包括Android、各种风格，包括iOS和Windows。无需连接网络即可下载，只需选择矢量图标并将其拖到网站提供的编辑器中，甚至可以在不登录的情况下直接更改图标的颜色和大小(PNG256和PNG512除外，需要登录才能访问)。
Iconninja是一个提供近百万免费矢量图标的网站，支持英文关键词搜索。所有材料都提供格式、宽度、高度、文件大小等详细信息，非常适合设计师、前端工程师或PPT设计师下载。
Fredesignfile是一个热门网站，可以快速找到矢量设计元素和矢量图像，包括成千上万的免费矢量材料、图标和图片，以及免费的Photoshop笔刷、动作、图案、纹理和风格，以及免费的PSD和字体。大量资源矢量图比送可供个人免费使用，大部分可商业使用，但需要注明来源。
矢量图标网站Vector4Free的资源集合并不多，只有1500多个免费矢量图标，但质量很高，款式很精致，分类清晰，很容易找到所需的材料。所有精选的矢量图标均可免费供个人使用，但在商业使用前应检查许可证规则。
Vecteezy是一个索引网站，拥有丰富的免费矢量图标、照片、PNG和视频。它收集了大量的图片材料，并每天更新。矢量图标由设计师上传和共享，除了那些没有标记的材料外，大部分材料可以免费下载Free“材料需要付费订阅会员才能使用。下载时一定要检查许可证，以确认材料是否可以用于个人或商业用途。
Thenounproject聚集了许多原创图标设计师在这里上传和分享他们的作品，拥有300多万个精选图标。专门提供黑白图标，界面非常简单，从基本的图形元素到生活中常见的图标，以及社交标志，你可以在这里找到令人满意的答案。但需要注意的是，矢量图标网站Thenounproject需要使用英文搜索，并提供SVG格式，因此在使用免费矢量图标之前，还必须安装Adobeilustrator或Draw等工具。
html5 地理定位
html5 Geolocation API用于获得用户的地理位置
鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的
注意:Geolocation(地理定位)对于拥有GPS的设备,地理定位更加精确
Geolocation API的主要方法是gerCurrentPositon,它用来获得用户的位置
下面是一个简答的地理定位实例,可返回用户位置的经度和纬度:
var x=document.getElementById("demo");
function getLocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentLocation(showPositon);}
else{
x.innerHTML="该浏览器不支持获取地理位置."}
}
function showPosition(position){
x.innerHTML="纬度:"+position.coords.latitude+
"<br>经度:"+position.coords.longitude;}
实例解析:
●检测是否支持地理定位
●如果支持,则运行gerCurrentPosition()方法.如果不支持,则向用户显示一段信息
●如果getCurrentPostion()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象
●showPosition()函数获得并显示经度和纬度
上面的例子是一个非常基础的地理定位脚本,不含错误处理
你需要先熟悉JavaScript才能理解和使用API
如果gerCurrentPosition()运行成功,则getCurrentPosition()方法返回对象.始终返回latitude,longtitude以及accuracy属性.如果可用,则会返回其他下面的属性:
●coords.latitude:十进制数的纬度
●coords.longtitude:十进制的经度
●coords.accuracy:位置精度
●coords.altitude:海拔,海平面以上以米计
●coords.altitudeAccuracy:位置的海拔精度
●coords.heading:方向,从正北开始以度计
●coords.speed:速度,以米/每秒计
●timestamp:响应的日期/时间
二 html5 拖放
拖放(Drag和drop)是html5标准的组成部分
拖放是一种常见的特性,即抓取对象以后拖到另一个位置
在html5中,拖放是标准的一部分,任何元素都能够拖放
★设置元素为可拖放
首先,为了使元素可拖动,需要把draggable属性设置为true:
<img draggable="true">
★拖动什么-ondragstart和setData()
然后,规定当元素拖动时,会发生什么
dataTransfer.setData()方法,设置被拖数据的数据类型和值:
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);}
在这个例子中,数据类型是"Text",值是可拖动元素的id("drag1")
★放到何处-ondragover
ondragover时间规定在何处放置被拖动的数据
默认地,无法将数据/元素放置到其他元素中,如果需要设置允许放置,我们必须阻止元素的默认处理方式.
这要通过调用ondragover时间的event.preventDefault()方法:
event.preventDefault()
★进行放置-ondrop
当放置被拖数据时,会发生drop事件
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));}
三 html5 SVG
什么是SVG?
●SVG指可伸缩矢量图形(Scalable Vector Graphics)
●SVG用于定义用于网络的基于矢量的图形
●SVG使用XML格式定义图形
●SVG图像在放大或改变尺寸的情况下其图形质量不会损失
●SVG是万维联盟的标准
在html5中,你能够直接将SVG元素嵌入html页面中
要使用SVG绘制图形,你首先需要创建一个<svg>标签
<svg width="1000" height="1000"></svg>
要创建一个圆形,需要添加一个<circle>标签
下面是SVG代码:
<svg width="1000" height="1000">
<circle cx="100" cy="50" r="40" fill="red" />
</svg>
●cx和cy属性定义圆点的x和y坐标.如果省略cx和cy,圆的中心会被设置为(0,0)
●r属性定义圆的半径
运行效果如下:
*请认真填写需求信息，我们会在24小时内与您取得联系。
