学习网页标准:有关web标准化的一些想法

 更新时间:2016年9月20日 19:05  点击:1216
多朋友对我说,她/他有代码洁癖,即,让她/他写XHTML的话,从来不愿意加上额外的标签(tag)。举个简单的例子,相信很多人从很多地方都看到过的:
<div id="nav">
    <ul>
        <li></li>
        <li></li>
        ......
    </ul>
</div>


<

  提示:请把全角状态下的<>改成半角状态下的<>使用

  很多个人网站的站长都希望为自己的网站建立一个站内搜索引擎,但一不熟悉ASP、PHP、JSP等动态开发技术,另外自己建立站内搜索也需要空间支持相应的动态技术,所以常不得已放弃。其实,何不借用Google打造站内搜索引擎,来方便网友对自己网站的内容进行查找。

  若想在某特定网站内搜索特定的内容(如搜索www.cfan.com.cn中包含关键字“网络”的内容),只需要在Google的搜索栏里输入:“网络 site:cfan.com.cn”即可(不含引号)。如果直接在自己站点的网页上建立一个Google的搜索栏,然后让访问者按Google规定的格式进行查询,那不就能实现Google作为自己站内搜索引擎的功能了吗?但是我们当然不能要求使用者还要特地学习Google对特定网站搜索的格式规范。于是笔者立刻联想到是否可以使用JavaScript脚本使得Google接收的查询关键字后自动加上类似“site:cfan.com.cn”的字符串呢?答案当然是肯定的。在你的网站首页需要放置站内搜索引擎页面的<body>标签的范围内放置如下代码:

<script type="text/javascript">
var domainroot="mysite.com"//个人站点域名,替换成你的网站的网址即可
function Gsitesearch(curobj){
curobj.q.value="site:"+domainroot+" "+curobj.qfront.value
}
</script>
<form action="http://www.Google.com/search" method="get" onSubmit="Gsitesearch(this)">
<p>站内搜索:<br />
<input name="q" type="hidden" />
<input name="qfront" type="text" style="width: 180px" /> <input type="submit" value="开始搜索">
</p>
</form>

  脚本的关键部分在于Gsitesearch函数。语句:“curobj.q.value="site:"+domainroot+" "+curobj.qfront.value”的含义为:将“site:”字符串+变  量domainroot、空格、访客填写的关键字依此合并。既使得搜索格式符合Google的语言规范,又使增加了搜索功能的友好性,不需要用户来遵循Google的搜索规则。

  至此,您的专业站内搜索引擎就完成了(见图1 完成的站内引擎)。

  如果我们不但要搜索本站的内容,还要让访客同时能搜索兄弟站点或本类网站的内容,该如何修改呢?接下来我们就对我们刚才的代码做一些推广。

<script type="text/javascript">
function Gsitesearch(curobj){
var domainroot=curobj.domainroot[curobj.domainroot.selectedIndex].value
curobj.q.value="site:"+domainroot+" "+curobj.qfront.value
}  Micrsoft推出IE7已有一段时间了,相信大家已领略到IE7带来的从视觉和功能上的改进了,不过作为Web设计人员可要注意了:在CSS文件中,如:

.text{
color: #ff0000 !important;
color: #000000;
}

    以上代码在IE7中显示的文字颜色是红的。这一意味着新版的IE7认识!important了。大多数WebStandard设计者都用!important解决IE和Firefox对margin的理解问题,如果不用!important分别设margin值,稍微有点布局的符合WebStandard的网页必然在IE或Firefox下有一个是面目全非的。不要认为微软这个激进的做法不会对现有代码造成影响。

    在IE6、IE7过度阶段,使用IE6的用户依然会不理解带!important的CSS,而使用IE7的用户会和使用Firefox的用户一样理解!important,问题是IE7和Firefox对margin和padding的处理还是不同,换句话说现在开始要找别的方法给微软擦屁股了。




鉴于很多朋友问到如何切图这个问题,又鉴于这个问题可大可小,一两句话是绝对讲不清楚的,所以今天有空闲在家里就举一个简单的例子来说明这个问题吧!OK,让我们开始:

  step1:在PhotoShop中打开设计稿,如下图


  选择工具板上的slice切片工具,先大刀阔斧的切上一番!技巧: 大面积的色块单独切成一块,尽可能的保持在水平线上的整齐(这个问题你们在后面的制作页面中深有感触)切好的图如下所示:


  step2:在PhotoShop中选择file-save for web...来输出,这里要注意一些参数的选择:

当当当当~大家请看下面的链接,哈哈,是不是看到是一小淫僧,HOO~
http://www.misuisui.com/google_map.htm
哈哈,好玩吧~是不是也想搞一个呢?Follow Me~ 

第一步
去 http://www.google.com/apis/maps/ 申请一个 Google Maps API key ,当然,你得有顶级域名才行。。。  乱申请的你如果不放到你这个域名下,那这个就根本用不了。。。
Google会给您一段代码,可要保存好哦~

第二步
把 http://www.misuisui.com/google_map.htm 打开,看一看里面的源化码,我已经写好说明了,大家照猫画虎就行了,HOHO~主要代码在最下面~

第三步
把第一步里申请来的 Google Maps API key 改掉代码中的 ABQIAAAAlwlonOoTX0oPrDaRmH_ALBREKWcFDKg74ezPgAUa79EBKj9z1BTjAKcZV51YfdN2n4xhiJ2lKuvBeA 一样的代码。。。 

第四步
代码里的哪个PNG图标不好找,在网上狂搜吧。。。  要不自己做一个  ~
嗯,还有那个坐标不好找,大家请看第四步

第五步
打开 http://www.google.com/maps
找啊找啊,找到你所在的地方,然后点那个右上角那个“Link to this page”
得到一个这样的链接 http://www.google.com/maps?f=q&hl=en&q=china&ll=35.86166,104.195397&spn=32.116109,88.242188&t=h
注意 35.86166, 104.195397 这一段数字,这就是当前地图中心点的坐标了
把逗号后面的数字放到逗号前面变成这样 104.195397, 35.86166
然后就是把这个数字添加到代码中你想要添加的地方了~ 

第六步
根据代码里的提示,发挥你的想象力,然后做点啥出来~做出啥来了,也告诉我一下,让我也看看啊~
比如我就要做个友情链接的东东,HOHO~和我友链的朋友们麻烦参考第五步把你想要标在我的友情链接地图上的坐标告诉我啊,HOHO~ 

第七步
嗯嗯,希望这几天大家要常来这儿了,因为有一个好东东要给大家告诉大家啦~HOHO~

<div id="map" style="width: 600px; height: 400px; border: 1px solid #979797"></div>
<!-- 把以上代码为地图的宽和高,可修改里面的数值,不要改里面的ID -->

<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAlwlonOoTX0oPrDaRmH_ALBREKWcFDKg74ezPgAUa79EBKj9z1BTjAKcZV51YfdN2n4xhiJ2lKuvBeA" type="text/javascript"></script>
<!-- 此为Google Map API 的验证码,用到自己的网站要去 http://www.google.com/apis/maps/ 审请一个 -->

<script type="text/javascript">
  //<![CDATA[

    function createMarker(point, baseIcon, SyntaxHighlighter.highlight();

[!--infotagslink--]

相关文章

  • Springboot如何实现Web系统License授权认证

    这篇文章主要介绍了Springboot如何实现Web系统License授权认证,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-05-28
  • C#使用Http Post方式传递Json数据字符串调用Web Service

    这篇文章主要为大家详细介绍了C#使用Http Post方式传递Json数据字符串调用Web Service,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
  • PyTorch一小时掌握之迁移学习篇

    这篇文章主要介绍了PyTorch一小时掌握之迁移学习篇,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-08
  • InterlliJ IDEA2020新建java web项目找不到Static Web的解决

    这篇文章主要介绍了InterlliJ IDEA2020新建java web项目找不到Static Web的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-09-02
  • php根据用户语言跳转相应网页

    当来访者浏览器语言是中文就进入中文版面,国外的用户默认浏览器不是中文的就跳转英文页面。 <&#63;php $lan = substr(&#8194;$HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08
  • 腾讯视频怎么放到自己的网页上?

    腾讯视频怎么放到自己的网页上?这个问题是一个基本的问题,要把腾讯视频放到自己的网页有许多的办法,当然一般情况就是直接使用它们的网页代码了,如果你要下载资源再放到...2016-09-20
  • 详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)

    这篇文章主要介绍了在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入),本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11
  • jQuery mobile 移动web(6)

    这篇文章主要介绍了jQuery mobile 移动web(6)的相关资料,需要的朋友可以参考下...2015-12-21
  • 基于JavaScript实现网页倒计时自动跳转代码

    这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
  • 网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别

    我们现在使用的软件都会自动在前面加一个申明了,那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢?下面我们就一起来看看吧. 单...2016-09-20
  • Microsoft Expression Web 简体中文正式版 官方下载地址

    Microsoft Expression Web 简体中文正式版相对于早期的 Microsoft Expression Web Designer CTP1(英文)除了它是正式的中文版外,有进步的地方1.对标签的id名称加上了css的代...2020-06-25
  • Tomcat首次部署web项目流程图解

    这篇文章主要介绍了Tomcat首次部署web项目流程图解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-12-11
  • jQuery UI结合Ajax创建可定制的Web界面

    这篇文章主要为大家详细介绍了jQuery UI结合Ajax创建可定制的Web界面,如何利用Ajax和jQuery UI创建具有各种定制功能的高度可定制的UI,感兴趣的小伙伴们可以参考一下...2016-06-24
  • web项目开发之JS函数防抖与节流示例代码

    这篇文章主要介绍了web项目开发之JS函数防抖与节流实现的示例代码及原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助...2021-09-24
  • 创建一个完整的ASP.NET Web API项目

    ASP.NET Web API具有与ASP.NET MVC类似的编程方式,ASP.NET Web API不仅仅具有一个完全独立的消息处理管道,而且这个管道比为ASP.NET MVC设计的管道更为复杂,功能也更为强大。下面创建一个简单的Web API项目,需要的朋友可以参考下...2021-09-22
  • 学习 Vue.js 遇到的那些坑

    这篇文章主要介绍了学习 Vue.js 遇到的那些坑,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-02-04
  • Web制作验证码功能实例代码

    web开发中,经常会使用验证码功能,例如登录、注册,或其他关键功能之前经常会使用。下面通过实例代码给大家介绍Web制作验证码功能实例代码,感兴趣的朋友一起看看吧...2017-06-24
  • C#实现Winform中打开网页页面的方法

    这篇文章主要介绍了C#实现Winform中打开网页页面的方法,涉及WinForm中WebBrowser的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
  • gateway与spring-boot-starter-web冲突问题的解决

    这篇文章主要介绍了gateway与spring-boot-starter-web冲突问题的解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-07-17
  • 值得分享和收藏的Bootstrap学习教程

    这绝对是一套值得分享和大家收藏的Bootstrap学习教程,完整的知识体系,系统的学习资料,帮助大家开启Bootstrap学习之旅,享受Bootstrap带给大家的奇妙乐趣...2016-05-14