科研动力

看代码时看到hCard，不知道啥意思， Google 一下hCard原来如此。hCard是微格式的一种。 说到“ 微格式 ”，有人力捧，有人质疑。归根结底，我觉得还是浏览器和终端设备的支持没有跟上，没有形成一个完整的应用流程。尽管如此，Yahoo、Google 等行业巨头已经开始在各自的主流产品中应用微格式。而作为网站开发者和个人站长，你对“微格式”的应用仍在观望之中吗？ 其实，微格式并不复杂，它离我们也并不遥远。不妨现在就行动起来，试试在网页中添加微格式吧！ 在我看来，微格式最主打的应用非 hCard 莫属。所以本文将着重介绍一些 hCard 的应用经验。 vCard/VCF 在讨论 hCard 之前，有必要先介绍一下 vCard。 vCard 是电子名片的文件格式标准，它可以存储联系人的姓名、公司名称、职位、电话、地址、电子信箱、网站等信息。vCard 的文件扩展名通常为 .VCF ，一个简单的 VCF 文件看起来通常是这个样子的： BEGIN:VCARD VERSION:2.1 N:Michael;Jackson TEL:13912345678 END:VCARD 虽然对普通网友来说，VCF 文件似乎并不常见，但事实上它已经在众多领域得到了广泛的支持和应用。 我第一次接触到 VCF 文件是在整理手机通讯录时。当时我需要将手机中的通讯录转移到新手机中，我下载并试用了一些相关的工具软件，比如 PC 端手机管理软件 NOKIA PC Suite 与 Oxygen Phone Manager、通讯录管理软件 Outlook/Outlook Express、手机端通讯录备份工具 SmartVCard 等等。我发现所有这些软件都“不约而同”地支持 VCF 格式，NOKIA 智能手机甚至原生支持在手机端导入/导出 VCF 文件。 hCard 再来看看 hCard。我们知道 hCard 是一种微格式，通常应用在 HTML 等语言中，主要用于组织并标记网页中的联络信息。hCard 直接采用 vCard 的属性名称作为自身的标记规则，这意味 hCard 与 vCard 有着天生的兼容性。这些特性令它成为最受关注的微格式应用。 和其它微格式一样，hCard 对网页的浏览者是完全透明的。hCard 使用 HTML 标签的 class 属性来对...

看代码时看到hCard，不知道啥意思， Google 一下hCard原来如此。hCard是微格式的一种。 说到“ 微格式 ”，有人力捧，有人质疑。归根结底，我觉得还是浏览器和终端设备的支持没有跟上，没有形成一个完整的应用流程。尽管如此，Yahoo、Google 等行业巨头已经开始在各自的主流产品中应用微格式。而作为网站开发者和个人站长，你对“微格式”的应用仍在观望之中吗？ 其实，微格式并不复杂，它离我们也并不遥远。不妨现在就行动起来，试试在网页中添加微格式吧！ 在我看来，微格式最主打的应用非 hCard 莫属。所以本文将着重介绍一些 hCard 的应用经验。 vCard/VCF 在讨论 hCard 之前，有必要先介绍一下 vCard。 vCard 是电子名片的文件格式标准，它可以存储联系人的姓名、公司名称、职位、电话、地址、电子信箱、网站等信息。vCard 的文件扩展名通常为 .VCF ，一个简单的 VCF 文件看起来通常是这个样子的： BEGIN:VCARD VERSION:2.1 N:Michael;Jackson TEL:13912345678 END:VCARD 虽然对普通网友来说，VCF 文件似乎并不常见，但事实上它已经在众多领域得到了广泛的支持和应用。 我第一次接触到 VCF 文件是在整理手机通讯录时。当时我需要将手机中的通讯录转移到新手机中，我下载并试用了一些相关的工具软件，比如 PC 端手机管理软件 NOKIA PC Suite 与 Oxygen Phone Manager、通讯录管理软件 Outlook/Outlook Express、手机端通讯录备份工具 SmartVCard 等等。我发现所有这些软件都“不约而同”地支持 VCF 格式，NOKIA 智能手机甚至原生支持在手机端导入/导出 VCF 文件。 hCard 再来看看 hCard。我们知道 hCard 是一种微格式，通常应用在 HTML 等语言中，主要用于组织并标记网页中的联络信息。hCard 直接采用 vCard 的属性名称作为自身的标记规则，这意味 hCard 与 vCard 有着天生的兼容性。这些特性令它成为最受关注的微格式应用。 和其它微格式一样，hCard 对网页的浏览者是完全透明的。hCard 使用 HTML 标签的 class 属性来对...

我根据别人的模板改代码光改Style.css，还有诸如index，single，header等，就是对function的功能认识不足，因此有时候形似，但是神却差了很多。比如对着善用佳软的网站改过模板，基本 上看上去一样了，可是有的功能就是用不了。这原因是function的缘故。下面是WordPress主题的功能文件function的学习，资料来源于网络。 在WordPress里，所有 主题 都会有一个叫做functions.php的文件，这个文件负责为主题调用各种PHP函数。functions.php与插件功能类似。此外，每当某个主题被激活，WordPress都会自动加载functions.php文件。使用父/子主题时设置时，则会同时加载父/子主题的functions.php文件。 只要有足够的想象力和PHP技巧，我们可以通过functions.php文件实现自己需要的所有WordPress效果。WordPress支持无限扩展，主题开发者可以在主题中创建核心功能文件functions.php，然后在给文件中添加自定义函数或代码，将个性化功能集成到主题中，从而开发好的主题。WordPress控在折腾时，修改functions.php文件是必不可少的工作。但是functions.php作为WordPress的核心文件，任何错误都会导致站点无法访问。 创建主题功能文件 首先在主题里新建一个空白的functions.php文件。所有的自定义代码都会装入这个文件。新建文件后，在文件里添加下面的代码： <?php /* 自定义代码 */ /* 自定义代码*/ ?> 给函数名称添加前缀 在进行下一步前有一件事需要我们注意：给所有函数添加前缀。 这是一个简单而实际的规则，虽然有很多主题制作者并没有这样的习惯。假设你有一个自定义主题函数comment_output()，它的常见形式通常是： function  comment_output() {      /* 自定义代码 */ } 这段代码存在不安全因素。如果某天WordPress或者某个插件添加了一个同样名为comment_output()的函数，而它们没有为自己使用的函数添加前缀的习惯，那么我们就会遇到致命错误。 假设你的主题名是Brownco...

我根据别人的模板改代码光改Style.css，还有诸如index，single，header等，就是对function的功能认识不足，因此有时候形似，但是神却差了很多。比如对着善用佳软的网站改过模板，基本 上看上去一样了，可是有的功能就是用不了。这原因是function的缘故。下面是WordPress主题的功能文件function的学习，资料来源于网络。 在WordPress里，所有 主题 都会有一个叫做functions.php的文件，这个文件负责为主题调用各种PHP函数。functions.php与插件功能类似。此外，每当某个主题被激活，WordPress都会自动加载functions.php文件。使用父/子主题时设置时，则会同时加载父/子主题的functions.php文件。 只要有足够的想象力和PHP技巧，我们可以通过functions.php文件实现自己需要的所有WordPress效果。WordPress支持无限扩展，主题开发者可以在主题中创建核心功能文件functions.php，然后在给文件中添加自定义函数或代码，将个性化功能集成到主题中，从而开发好的主题。WordPress控在折腾时，修改functions.php文件是必不可少的工作。但是functions.php作为WordPress的核心文件，任何错误都会导致站点无法访问。 创建主题功能文件 首先在主题里新建一个空白的functions.php文件。所有的自定义代码都会装入这个文件。新建文件后，在文件里添加下面的代码： <?php /* 自定义代码 */ /* 自定义代码*/ ?> 给函数名称添加前缀 在进行下一步前有一件事需要我们注意：给所有函数添加前缀。 这是一个简单而实际的规则，虽然有很多主题制作者并没有这样的习惯。假设你有一个自定义主题函数comment_output()，它的常见形式通常是： function  comment_output() {      /* 自定义代码 */ } 这段代码存在不安全因素。如果某天WordPress或者某个插件添加了一个同样名为comment_output()的函数，而它们没有为自己使用的函数添加前缀的习惯，那么我们就会遇到致命错误。 假设你的主题名是Brownco...

在看模板的时候经常看到有的前面啥也没有，有的加点，有的加井号。加与不加原来意思不一样。 「点」和「#号」代表的意思 「点」.对应class 「井号」#对应id 不加对应html 标签 Class与ID的区别 Class是用来根据用户定义的标准对一个或多个元素进行定义的。我个人理解为类，比方说哺乳动物就是一个Class，爬行动物又是一个Class。另外Class可在在文中使用多次。 ID是定义页面上一个仅出现一次的标记。我个人理解ID就是种类，如哺乳动物中的狗或猫，具体到了其的中一个类。通常一个ID在一个文档中只能被使用一次 在实际应用的时候，Class可能对文字的排版等比较有用，而ID则对宏观布局和设计放置各种元素较有用。

在看模板的时候经常看到有的前面啥也没有，有的加点，有的加井号。加与不加原来意思不一样。 「点」和「#号」代表的意思 「点」.对应class 「井号」#对应id 不加对应html 标签 Class与ID的区别 Class是用来根据用户定义的标准对一个或多个元素进行定义的。我个人理解为类，比方说哺乳动物就是一个Class，爬行动物又是一个Class。另外Class可在在文中使用多次。 ID是定义页面上一个仅出现一次的标记。我个人理解ID就是种类，如哺乳动物中的狗或猫，具体到了其的中一个类。通常一个ID在一个文档中只能被使用一次 在实际应用的时候，Class可能对文字的排版等比较有用，而ID则对宏观布局和设计放置各种元素较有用。

在修改 WordPress主题 的时候，经常会看到Margin和Padding，对其属性真是有点头晕，经常查询，现在有点眉目， CSS 中Margin和Padding属性的区别在于margin是指层的边框以外留的空白区域，而Padding是指层的边框到层的内容之间的空白 。 Margin和padding属性的区别 margin：层的边框以外留的空白 background-color：背景颜色 background-image：背景图片 padding：层的边框到层的内容之间的空白 border：边框 content：内容 定义和用法 Margin和Padding 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。 这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。 块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。 Margin和Padding 允许使用负值。 举例说明 以Margin为例说明，Padding类似。 例子 1 margin:10px 5px 15px 20px; 上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px 例子 2 margin:10px 5px 15px; 上外边距是 10px 右外边距和左外边距是 5px 下外边距是 15px 例子 3 margin:10px 5px; 上外边距和下外边距是 10px 右外边距和左外边距是 5px 例子 4 margin:10px; 所有 4 个外边距都是 10px 可以试看一下具体效果： 狠击这里

在修改 WordPress主题 的时候，经常会看到Margin和Padding，对其属性真是有点头晕，经常查询，现在有点眉目， CSS 中Margin和Padding属性的区别在于margin是指层的边框以外留的空白区域，而Padding是指层的边框到层的内容之间的空白 。 Margin和padding属性的区别 margin：层的边框以外留的空白 background-color：背景颜色 background-image：背景图片 padding：层的边框到层的内容之间的空白 border：边框 content：内容 定义和用法 Margin和Padding 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。 这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。 块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。 Margin和Padding 允许使用负值。 举例说明 以Margin为例说明，Padding类似。 例子 1 margin:10px 5px 15px 20px; 上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px 例子 2 margin:10px 5px 15px; 上外边距是 10px 右外边距和左外边距是 5px 下外边距是 15px 例子 3 margin:10px 5px; 上外边距和下外边距是 10px 右外边距和左外边距是 5px 例子 4 margin:10px; 所有 4 个外边距都是 10px 可以试看一下具体效果： 狠击这里

在修改主题时，会遇到字体的设置，对于字体大小的设计，有的用PX，有的用EM，还有的用PEM。 CSS 中PX EM和REM的区别是什么，开始有些混乱，现在记录如下。 PX为单位 PX实际上就是像素，用PX设置字体大小时，比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体。 EM为单位 EM就是根据基准来缩放字体的大小。EM实质是一个相对值，而非具体的数值。这种技术需要一个参考点，一般都是以<body>的“font-size”为基准。如WordPress官方主题Twenntytwelve的基准就是14px=1em。 另外， em是相对于父元素的属性而计算的 ，如果想计算px和em之间的换算，这个网站不错，输入数据就可以px和em相互计算。狠击这里： px和em换算 Rem为单位 EM是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。 而Rem是相对于根元素<html> ，这样就意味着，我们只需要在根元素确定一个参考值。 浏览器的兼容性 除了IE6-IE8r，其它的浏览器都支持em和rem属性，px是所有浏览器都支持。 因此为了浏览器的兼容性，可“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果。 本文参考 W3C

在修改主题时，会遇到字体的设置，对于字体大小的设计，有的用PX，有的用EM，还有的用PEM。 CSS 中PX EM和REM的区别是什么，开始有些混乱，现在记录如下。 PX为单位 PX实际上就是像素，用PX设置字体大小时，比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体。 EM为单位 EM就是根据基准来缩放字体的大小。EM实质是一个相对值，而非具体的数值。这种技术需要一个参考点，一般都是以<body>的“font-size”为基准。如WordPress官方主题Twenntytwelve的基准就是14px=1em。 另外， em是相对于父元素的属性而计算的 ，如果想计算px和em之间的换算，这个网站不错，输入数据就可以px和em相互计算。狠击这里： px和em换算 Rem为单位 EM是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。 而Rem是相对于根元素<html> ，这样就意味着，我们只需要在根元素确定一个参考值。 浏览器的兼容性 除了IE6-IE8r，其它的浏览器都支持em和rem属性，px是所有浏览器都支持。 因此为了浏览器的兼容性，可“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果。 本文参考 W3C