整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

CSS3 animation-name 属性

CSS3 animation-name 属性

例

为 @keyframes 动画指定一个名称：：

animation-name:mymove;-webkit-animation-name:mymove; /* Safari 和 Chrome */

浏览器支持

p>表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
animation-name43.04.0 -webkit-10.016.05.0 -moz-9.04.0 -webkit-30.015.0 -webkit-12.0 -o-

标签定义及使用说明

animation-name 属性为 @keyframes 动画指定名称。

默认值:none
继承:no
版本:CSS3
JavaScript 语法:objectobject.style.animationName="mymove"

语法

animation-name: keyframename|none;

值说明
keyframename指定要绑定到选择器的关键帧的名称
none指定有没有动画（可用于覆盖从级联的动画）

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

TML全局属性是所有HTML元素共有的属性。它们可以应用于所有元素，尽管它们可能对某些元素没有影响。

HTML属性

HTML元素可以设置属性

属性可以在元素中添加附加信息

属性一般描述于开始标签

属性总是以名称/值对的形式出现，比如：name="value"。

属性和属性值对大小写不敏感。不过，万维网联盟在其HTML4推荐标准中推荐小写的属性/属性值。而新版本的(X)HTML要求使用小写属性。

大多数HTML元素支持的属性：

class：为html元素定义一个或多个类名（classname）(类名从样式文件引入)

id：定义元素的唯一id

style：规定元素的行内样式（inlinestyle）

title：描述了元素的额外信息(作为工具条使用)

HTML超链接及其属性

HTML使用标签<a>来设置超文本链接。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。

访问过的链接显示为紫色并带有下划线。

点击链接时，链接显示为红色并带有下划线。

如果为这些超链接设置了CSS样式，展示样式会根据CSS的设定而显示。

在标签<a>中使用了href属性来描述链接的地址。

实例

<a href="https://www.kaikeba.com/">访问开课吧</a>1复制代码类型：[html]

上面这行代码显示为：访问开课吧

点击这个超链接会把用户带到开课吧的首页。

使用target属性，你可以定义被链接的文档在何处显示。

实例

<ahref="https://www.kaikeba.com/"target="_blank">访问开课吧</a>  

target="_blank":在新窗口中打开被链接文档。  

target="_self":	默认，在相同的框架中打开被链接文档。  

target="_parent":在父框架集中打开被链接文档。  

target="_top":	在整个窗口中打开被链接文档。  

target=framename:在指定的框架中打开被链接文档。  1234567891011复制代码类型：[html]

HTML图像标签及其属性

在HTML中，图像由<img>标签定义。<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src指"source"。源属性的值是图像的URL地址。

定义图像的语法是：

<imgsrc="url"alt="some_text">  1复制代码类型：[html]

URL指存储图像的位置。

alt属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

height（高度）与width（宽度）属性用于设置图像的高度与宽度。属性值默认单位为像素。

<imgsrc="logo.jpg"alt="kaikeba"width="300"height="120">  1复制代码类型：[html]

提示:指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

开课吧广场-人才学习交流平台

、定义

<meta> 标签提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

2、作用

meta里的数据是供机器解读的，告诉机器该如何解析这个页面，还有一个用途是可以添加服务器发送到浏览器的http头部内容，例如我们为页面中添加如下meta标签：


  2. <meta http-equiv="charset" content="iso-8859-1">
  3. <meta http-equiv="expires" content="31 Dec 2008">

浏览器的头部就会包括这些:


  2. charset:iso-8859-1
  3. expires:31 Dec 2008

只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。

3、meta的必需属性和可选属性

meta的必需属性是content，当然并不是说meta标签里一定要有content，而是当有http-equiv或name属性的时候，一定要有content属性对其进行说明。例如：

必需属性

<meta name="keywords" content="HTML,ASP,PHP,SQL">

这里面content里的属性就是对keywords进行的说明，所以呢也可以理解成一个键值对吧，就是{keywords:"HTML,ASP,PHP,SQL"}。

可选属性

在W3school中，对于meta的可选属性说到了三个，分别是http-equiv、name和scheme。考虑到scheme不是很常用，所以就只说下前两个属性吧。

http-equiv

http-equiv属性是添加http头部内容，对一些自定义的，或者需要额外添加的http头部内容，需要发送到浏览器中，我们就可以是使用这个属性。在上面的meta作用中也有简单的说明，那么现在再举个例子。例如我们不想使用js来重定向，用http头部内容控制，那么就可以这样控制：

<meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />

在页面中加入这个后，5秒钟后就会跳转到指定页面啦，效果可看W3school的例子

name

第二个可选属性是name，这个属性是供浏览器进行解析，对于一些浏览器兼容性问题，name属性是最常用的，当然有个前提就是浏览器能够解析你写进去的name属性才可以，不然就是没有意义的。还是举个例子吧:

<meta name="renderer" content="webkit">

这个meta标签的意思就是告诉浏览器，用webkit内核进行解析，当然前提是浏览器有webkit内核才可以，不然就是没有意义的啦。当然看到这个你可能会有疑问，这个renderer是从哪里冒出来的，我要怎么知道呢？这个就是在对应的浏览器的开发文档里就会有表明的，例如这个renderer是在360浏览器里说明的。360浏览器内核控制Meta标签说明文档

常用meta标签大总结

接下来就是常用的meta标签大总结啦，我会尽可能的做到全

charset

charset是声明文档使用的字符编码，解决乱码问题主要用的就是它，值得一提的是，这个charset一定要写第一行，不然就可能会产生乱码了。

charset有两种写法


  2. <meta charset="utf-8">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

两个都是等效的。

百度禁止转码

百度会自动对网页进行转码，这个标签是禁止百度的自动转码

<meta http-equiv="Cache-Control" content="no-siteapp" />

SEO 优化部分


  2. <!-- 页面标题<title>标签(head 头部必须) -->
  3. <title>your title</title>
  4. <!-- 页面关键词 keywords -->
  5. <meta name="keywords" content="your keywords">
  6. <!-- 页面描述内容 description -->
  7. <meta name="description" content="your description">
  8. <!-- 定义网页作者 author -->
  9. <meta name="author" content="author,email address">
  10. <!-- 定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 -->
  11. <meta name="robots" content="index,follow">

viewport

viewport主要是影响移动端页面布局的，例如：


  2. <meta name="viewport" content="width=device-width, initial-scale=1.0">

content 参数：

  • width viewport 宽度(数值/device-width)
  • height viewport 高度(数值/device-height)
  • initial-scale 初始缩放比例
  • maximum-scale 最大缩放比例
  • minimum-scale 最小缩放比例
  • user-scalable 是否允许用户缩放(yes/no)

各浏览器平台

Microsoft Internet Explorer


  2. <!-- 优先使用最新的ie版本 -->
  3. <meta http-equiv="x-ua-compatible" content="ie=edge">
  4. <!-- 是否开启cleartype显示效果 -->
  5. <meta http-equiv="cleartype" content="on">
  6. <meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
  9. <!-- Pinned Site -->
  10. <!-- IE 10 / Windows 8 -->
  11. <meta name="msapplication-TileImage" content="pinned-tile-144.png">
  12. <meta name="msapplication-TileColor" content="#009900">
  13. <!-- IE 11 / Windows 9.1 -->
  14. <meta name="msapplication-config" content="ieconfig.xml">

Google Chrome


  2. <!-- 优先使用最新的chrome版本 -->
  3. <meta http-equiv="X-UA-Compatible" content="chrome=1" />
  4. <!-- 禁止自动翻译 -->
  5. <meta name="google" value="notranslate">

360浏览器


  2. <!-- 选择使用的浏览器解析内核 -->
  3. <meta name="renderer" content="webkit|ie-comp|ie-stand">

UC手机浏览器

UCBrowser_U3_API

QQ手机浏览器


  2. <!-- 锁定屏幕在特定方向 -->
  3. <meta name="x5-orientation" content="landscape/portrait">
  4. <!-- 全屏显示 -->
  5. <meta name="x5-fullscreen" content="true">
  6. <!-- 页面将以应用模式显示 -->
  7. <meta name="x5-page-mode" content="app">

Apple iOS


  2. <!-- Smart App Banner -->
  3. <meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
  6. <!-- 禁止自动探测并格式化手机号码 -->
  7. <meta name="format-detection" content="telephone=no">
  10. <!-- Add to Home Screen添加到主屏 -->
  11. <!-- 是否启用 WebApp 全屏模式 -->
  12. <meta name="apple-mobile-web-app-capable" content="yes">
  13. <!-- 设置状态栏的背景颜色,只有在 “apple-mobile-web-app-capable” content=”yes” 时生效 -->
  14. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  15. <!-- 添加到主屏后的标题 -->
  16. <meta name="apple-mobile-web-app-title" content="App Title">

Google Android


  2. <meta name="theme-color" content="#E64545">
  3. <!-- 添加到主屏 -->
  4. <meta name="mobile-web-app-capable" content="yes">
  5. <!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->

App Links


  2. <!-- iOS -->
  3. <meta property="al:ios:url" content="applinks://docs">
  4. <meta property="al:ios:app_store_id" content="12345">
  5. <meta property="al:ios:app_name" content="App Links">
  6. <!-- Android -->
  7. <meta property="al:android:url" content="applinks://docs">
  8. <meta property="al:android:app_name" content="App Links">
  9. <meta property="al:android:package" content="org.applinks">
  10. <!-- Web Fallback -->
  11. <meta property="al:web:url" content="http://applinks.org/documentation">
  12. <!-- More info: http://applinks.org/documentation/ -->

最后——移动端常用的meta


  2. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  3. <meta name="apple-mobile-web-app-capable" content="yes" />
  4. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  5. <meta name="format-detection"content="telephone=no, email=no" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  7. <meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
  9. <meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话，忽略email识别 -->
  10. <!-- 启用360浏览器的极速模式(webkit) -->
  11. <meta name="renderer" content="webkit">
  12. <!-- 避免IE使用兼容模式 -->
  13. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  14. <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
  15. <meta name="HandheldFriendly" content="true">
  16. <!-- 微软的老式浏览器 -->
  17. <meta name="MobileOptimized" content="320">
  18. <!-- uc强制竖屏 -->
  19. <meta name="screen-orientation" content="portrait">
  20. <!-- QQ强制竖屏 -->
  21. <meta name="x5-orientation" content="portrait">
  22. <!-- UC强制全屏 -->
  23. <meta name="full-screen" content="yes">
  24. <!-- QQ强制全屏 -->
  25. <meta name="x5-fullscreen" content="true">
  26. <!-- UC应用模式 -->
  27. <meta name="browsermode" content="application">
  28. <!-- QQ应用模式 -->
  29. <meta name="x5-page-mode" content="app">
  30. <!-- windows phone 点击无高光 -->
  31. <meta name="msapplication-tap-highlight" content="no">
  32. <!-- 适应移动端end -->

在线咨询
上一篇：中小学排课系统开发方案及功能说明
下一篇：CSS 中几种最常用的水平垂直居中的方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 桐乡市 泉港区 和政县 邵武市 湘潭 上甘岭区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服