一看网站排版……就感觉是wordpress做的233
<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" prefix="og: http://ogp.me/ns#">
<!--[if IE 8]>
<html class="ie ie8" prefix="og: http://ogp.me/ns#">
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html lang="zh-CN" prefix="og: http://ogp.me/ns#">
<!--<![endif]-->
IE兼容
在<head>前这几行是专程为兼容不同版本的IE写的,也只有IE支持条件注解CSS。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta>
可选属性(表格来自W3C | 值 | 描述 |
http-equiv | content-type/expires/refresh…… | 把content属性关联到HTTP头部 |
name | author/description/keywords/generator…… | 把content属性关联到一个名称 |
scheme | some_text | 定义于用于翻译content属性值的格式 |
Content-Type: WEB 服务器告诉浏览器自己响应的对象的类型。例如:Content-Type:application/xml
关于viewport上一篇博文有详讲。
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="http://www.becomingjenny.net/xmlrpc.php" />
link rel="profile"
这里是microformat的wiki,然后这里有中文的解释,就是一个关系声明(感觉不重要先就这样orz
link rel="PingBack"
是用来通知网志系统文章被引用情况的一种手段,当你发布的文章包含一系列文章链接,WordPress系统会自动从文章中拣出链接并尝试向这些系统发出Pingback。
有必要了解一些ping、pingback以及trackback之间的区别,这里涉及到一些曝光率和垃圾评论的关系。
Ping:当文章发表时,想要通知的服务器地址,简单说就是通知这些服务器你的博客发表了新文章,叫它们有空过来爬一爬,收录一下你的新文章。
Pingback[广播] :当你的文章有引用别人的内容时(通常内容里有加上对方的超链接),一旦文章发表后,就会自动启动Pingback功能,这功能会发送一个Ping给对方,会以评论的方式呈现。
Trackback :根据你文章中自己手动加入的网址,才会发送通知信息到该网站,告知该网站,你参照它网站内容而撰写一篇新的文章。
<link href="/favicon.ico" mce_href="/favicon.ico" rel="bookmark" type="image/x-icon" />
<link href="/favicon.ico" mce_href="/favicon.ico" rel="icon" type="image/x-icon" />
<link href="/favicon.ico" mce_href="/favicon.ico" rel="shortcut icon" />
link href="/favicon.ico"
自定义站点图标,没什么好说的,感觉32×32比较合适。
<!--一些IE的js兼容,就不放代码了-->
<!-- This site is optimized with the Yoast WordPress SEO plugin v2.2.1 - https://yoast.com/wordpress/plugins/seo/ -->
<link rel="canonical" href="http://www.becomingjenny.net/" />
link rel="canonical"
用来解决由于网址形式不同内容相同而造成的内容重复问题。这个标签对搜索引擎作用非常大,简单的说它可以让搜索引擎只抓取你想要强调的内容。这个和之下的一些代码似乎是用Yoast WordPress SEO plugin实现的
<link rel="alternate" type="application/rss+xml" title="JennyStudio » Feed" href="http://www.becomingjenny.net/feed" />
<link rel="alternate" type="application/rss+xml" title="JennyStudio » 评论Feed" href="http://www.becomingjenny.net/comments/feed" />
<link rel="alternate" type="application/rss+xml" title="JennyStudio » Projects评论Feed" href="http://www.becomingjenny.net/home/feed" />
RSS
wordpress中用于RSS的代码,PHP代码如下,(rel="alternate"等属性全解
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="http://xzl52199.blog.163.com/blog/<?php bloginfo('rss2_url'); ?>" />
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/www.becomingjenny.net\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.2.2"}};
!function(a,b,c){function d(a){var c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return d&&d.fillText?(d.textBaseline="top",d.font="600 32px Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g;c.supports={simple:d("simple"),flag:d("flag")},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
<script src="http://www.becomingjenny.net/wp-includes/js/wp-emoji-release.min.js?ver=4.2.2" type="text/javascript"></script>
script type="test/javascript"
JavaScript,JS真的是看着一个头两个大,觉得很奇怪,度娘一下,emoji是wp的表情js脚本……好像还会引起无限加载问题
wordpress需要的php调用
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/xxx.js"></script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link rel="stylesheet" id="twentytwelve-fonts-css" href="http://fonts.useso.com/css?family=Open+Sans:400italic,700italic,400,700&subset=latin,latin-ext" type="text/css" media="all">
<link rel="stylesheet" id="twentytwelve-style-css" href="http://www.becomingjenny.net/wp-content/themes/jennyStudio/style.css?ver=4.2.2" type="text/css" media="all"
link rel="stylesheet"
内嵌css样式表与rel调用外部css样式表。
附上php调用css源码
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
总结
其实,wordpress是基于php的,一直在这儿研究html好像并不……不过,做wordpress的大神说html、css、js……这些不懂个70%~80%,wordpress玩转的可能性为零。
html的<head>,原来只觉得要加个<title>,现在发现自己是多么天真,
代码总有自己的意义
link rel="stylesheet":css必须
http-equiv="Content-Type" http头部关联
name="viewport":响应不同分辨率设备