∠角络

目的：搜索引擎看不到社觉效果，只能看到代码，通过标签判断内容的语义。通过语义化能让搜索引擎更好识别网页内容。

制作页面步骤：先确定HTML，确定语义的标签，再来选用合适的CSS。

如何确定网页语义是否良好？
去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。

 

语义化几个关键点：
1.每张网页都必须有一个h1来表示大标题，且一张网页里面只存在一个h1标记。
2.标题与内容
注：只有当页面内标签无法满足设计需要时，才会适当添加div和span等无语义标签来辅助实现。
(1).单标题内容

<div id="gy" class="mod">
<div class="hd clearfix">
<h2 class="mod-title">网易公司新闻</h2>
</div>
<div class="bd">
<ul class="mod-list sub-list dotline">
<li class="title"><a href="http://tech.163.com/11/1103/11/7HUD3AVS000915BF.html">网易企业邮获最高级安全认证</a></li>
…
</ul>
<ul class="mod-list sub-list">
<li><a href="http://media.163.com/">[传媒]</a> <a target="_blank" href="http://media.163.com/11/1104/10/7I0PG0JM00762H91.html">电视节目生存的底线</a></li>…
</ul>
</div>
</div>

(2).多标题内容

 

<h2 class="tab-hd tab-u-9 clearfix">
<span class="tab-u current"><a href="http://book.163.com/special/vip_book/">原创</a></span>
<span class="tab-u"><a href="http://book.163.com/special/vip_book/">全本</a></span>
</h2>
<div class="bd tab-bd display-control">
<div class="tab-con current">
<div class="imgText-temp-1 dotline clearfix">
<div class="mod-img main-img">
<a href="http://data.book.163.com/book/home/009200260003/000BNZFL.html?wangshou1"><img src="http://img3.cache.netease.com/book/2011/11/5/20111105085539de923.jpg" alt="天书：神秘家族的字符" title="天书：神秘家族的字符" height="90" width="120" /><cite>天书：神秘家族的字符</cite></a>
</div>
<h3 class="main-title"><a href="http://data.book.163.com/book/home/009200260001/000BNYbZ.html?wangshou1">无法呼吸：精神病院里的杀手</a></h3>
<ul class="mod-list main-list">
<li><a href="http://data.book.163.com/book/home/009200260002/000BNZAV.html?wangshou1">[悬疑]诡闻档案：解密731部队</a></li>…
</ul>
</div>
<ul class="mod-list main-list">
<li><a href="http://book.163.com/special/vip_book/?wangshou1">[网易原创]</a> <a target="_blank" href="http://data.book.163.com/book/home/009200260001/000BNYeO.html">冥间阴乐:民国农家棺中女尸离奇蒸发</a></li>…
</ul>
<ul class="mod-list specialTopic-list">
<li><a href="http://book.163.com/special/minghun/?wangshou1"><em class='fB'>微活动</em></a> | <a target="_blank" href="http://book.163.com/special/minghun/">周德东《冥婚》拍电影 你来选主角</a></li>…
</ul>
</div>
<div class="tab-con">
<div class="imgText-temp-1 dotline clearfix">
<div class="mod-img main-img">
<a href="http://data.book.163.com/book/home/009200010002/000BIUGA.html"><img src="http://img6.cache.netease.com/book/2011/11/5/201111050939467f195.jpg" alt="罂粟美人的致命诱惑" title="罂粟美人的致命诱惑" height="90" width="120" /><cite>罂粟美人的致命诱惑</cite></a>
</div>
<h3 class="main-title"><a href="http://data.book.163.com/book/home/009200010009/000BHVZQ.html">大禁地：凶杀案引出帝王陵寝</a></h3>
<ul class="mod-list main-list">
<li><a href="http://data.book.163.com/book/home/009200010013/000BEKaV.html">权色：副省长对女色失去兴趣</a></li>…
</ul>
</div>
<ul class="mod-list main-list">

<li><a href="http://t.163.com/zt/book/xyjd06"><em class='cBlack fB'>诡故事</em></a> |<a target="_blank" href="http://t.163.com/zt/book/xyjd06"> 悬疑基地第六期：镜中灵魂的另一面</a></li>…
</ul>
</div>
</div>
</div>

 

结合网易的代码，个人觉得像一般的标题和内容，理想结构应该是：
单标签
<div id=”news”>
<div class=”hd”><h2>标题</h2> 更多>></div>
<div class=”bd”>内容</div>
</div>
多标签
<div id=”news”>
<h2 class=”tab-hd”><span class="tab-u current">体育< span > < span class="tab-u " >娱乐</ span ></h2>
<div class=”hd tab-bd”>内容</div>
</div>

3.表单
(1).表单域要用filedset标签包起来，并用legend标签说明表单的用途。
(2).每个input标签对应的说明文本都需要使用label标签并且通过为input设置id属性，在label标签中设置for=”someid” 说明文本和相应的input关联起来
例：
<form action=”” method=””>
<fieldset>
<legend>登录表单</legend>
<p><label for=”username”>用户名</label><input type=”text” name=”username” id=”username/></p>
…
</filedset>
</form>
4.表格
作用：展示二维数据。
表格标题要用caption,表头要用thead包围，主体部分用tbody包围，尾部要用tfoot包围，表头和一般单无格要区分开，表头用th,一般单元格用td
例：
<table>
<caption>二维数据展示</caption>
<thead>
<th>标题</th> …
</thead>
<tbody>
<td>标题对应的内容</td>
</tbody>
<tfoot>
<td>底部相关信息</td>
</tfoot>
</table>

语义化标签注意的其它问题：
尽可能少地使用无语义标签div和span
在语义不明显的情况下，可用p和div，尽量用p，因为p默认情况 下有上下间距，去样式后的可读性更好，对兼特殊终端有利
不要使用纯样式标签，例如b\font\u改用CSS设置。语义上需要强调的文本可以包在strong或em标签里。
附: 标签语义中英文对照表

标签名	英文全拼	中文翻译
a	anchor	锚
abbr	abbreviation	缩写词
acronym	acronym	取首字母的缩写词
address	address	地址
b	bold	粗体
big	big	变大
blockquote	block quotation	区块引用于
br	break	换行
caption	caption	标题
center	center	居中
dd	definition description	定义描述
del	delete	删除
div	division	分隔
dl	definition list	定义列表
dt	definition term	定义术语
em	emphasized	加重
fieldset	fieldset	域集
font	font	字体
h1~h6	header1~header6	标题1~标题6
hr	horizontal rule	水平尺
i	italic	斜体
ins	inserted	插入
legend	legend	图标
li	list item	列表项目
ol	ordered list	排序列表
p	paragraph	段落
pre	preformatted	预定义格式
s	strikethrough	删除线
small	small	变小
span	span	范围
strong	strong	加重
sub	subscripted	下表
sup	superscripted	上标
u	underlined	下划线
ul	unordered list	不排序列表
var	variable	变量

前阵子在开发排课系统中，遇到了很多难点，一直排不出来，然后项目就一直死在那里了。最近抽了点时间想再拿出来弄弄，可难点依旧，现在遇到的最大问题就是他们的模块化课程的设计。

一、相关定义描述

1.模块化课程：指一个学期内通过一定周数内完成的若干个分阶段模块的课程。

2.模块化课程授课方式：模块化课程通常会有一个实训教室和最多三个教师授课，其中一个是主任老师，其余1-2位是辅助老师，也可以没有辅助老师，但是必须有主任课老师。

3.模块化课程冲突：教师同时上两门课，实训场地只能一个班级上或者是指定几个班级上。

4.排课流程：

1.名单录入（老师、教室、课程、班级）->2.1排课特征录入（老师、教师）                          

                                    ->2.2排课时间限制录入（老师、教室、课程、班级、模块课程）

->3.安排教学计划（根据班级安排课程、老师、教室）

注：下载模块课程请点击“模块课程示例”，该文件夹中存放的是模块课程的班级课表和教师课表示例。

二、问题描述及现有解决思路

假如有模块课程A,B,C,D,E,F,一学期共有18周，一周上两门模块课程

A课程完成教学周期为：6周，每周上课节数为12节

B课程完成教学周期为：6周，每周上课节数为12节

C课程完成教学周期为：2周，每周上课节数为12节

D课程完成教学周期为：8周，每周上课节数为12节

E课程完成教学周期为：8周，每周上课节数为12节

F课程完成教学周期为：6周，每周上课节数为12节

通过事先设定的名单和教学计划设得再根据现有的算法得到课表,"点击下载"

 

拆分周次算法示意：以下数字代表的是模块化课程的周数

示例1：

2 6 8 8 6 6

8 8(2 6 6 6) 先求一组中相同课时数的课程

2 6-2(4 6 6) 取最小值和最大值拆分

4 6-2 6-2 剩下三个需两两拆分

4 4

 

示例2：

5 6 7 8 10

5 10-5 (6,7,8,5)

5 8-5 (6,7,3)

3 6-1 7-2

5 5

 

示例3：

3 3 4 4 5 5 12        

3 3 (4 4 5 5 12)

4 12-4 (4 5 5 8)

4 8-4 (5 5 4)

4 5-2 5-2

3 3

 

如果不检测老师和教室冲突，那么上述算法正好得到完成拆分周次。但现实中就不得不再去检测老师冲突和实训场地冲突，那么就势必就得把拆分好的课程再回溯拆分了，上例课表中，若：E课程在1-8周存在冲突，若第7周中有冲突（该课程的老师在其它处已经上课），那么就必须再重新安排到另外周次了，此时问题就出现了，拆分比想像中的要难很多，如果回溯将第二次以后课调换，使其后面正好安排没冲突，那么问题也就不会难了，可关键是如果和后面调换课程，又存在了冲突怎么办？是不是得再重新拆分周次了？

上次示例是排课一种，算法上感觉已经很难实现了，事实上在实际中又会遇到其它情况，比如：

 

A课程完成教学周期为：6周，每周上课节数为24节

B课程完成教学周期为：6周，每周上课节数为12节

C课程完成教学周期为：2周，每周上课节数为12节

D课程完成教学周期为：8周，每周上课节数为12节

E课程完成教学周期为：8周，每周上课节数为12节

 

以上24节课的其实就是上两门模块课程一样

 

还有一种更复杂的情况：假如我一周要安排三门模块化课程的时候又怎么处理？问题感觉越来越复杂了！

一、NVelocity使用参数
 示例：
  1.建立宏
   #macro( test $range $arrayList )
    ...
   #end
  2.调用宏
  #test([-9,-1] ["favorite", "color"])
 通过以上示例，你只需要一个为每一个需要传递的参数提供了名称的#macro指令，这些参数用空格进行分隔。如上例中#macro( test $range $arrayList )“test”是宏名，$range $arrayList是参数。用"#"+宏名(参数1 参数2...)来调用宏。
  
  
二、NVelocity递归调用

 嵌套，最简单的情况就是在NVelocity 中用到macro里调用另外一个macro，这是在实际代码开发中使用得最频繁的一种。递归，是一种特殊类型的嵌套，它是在NVelocity中的macro里调用自身，但这种情况并不太常见。
 
 #macro( recurs $depth )
  进入第 $depth 层<br/>

  #set( $depth = $depth - 1 )

  #if ( $depth > 0 )

   #recurs( $depth )

  #end

  #set( $depth = $depth + 1 )

  进入第 $depth 层<br/>

 #end
 #recurs( 3 )
 
 执行结果：
   进入第 3 层
   进入第 2 层
   进入第 1 层
   进入第 1 层
   进入第 2 层
   进入第 3 层
 注：在递归调用时，注意通常不要把一个对象的属性传为参数递归调用，上例中，如果$depth是一个对象的话，那么用#recurs( $depth.attribute)话，模板输出时候往往有问题，而且又查不出来，这里记录一下，忘以后不要出现这样的错误。究其原因，我想是由于是object类型，往往在调用时认不出对象的类型吧（暂时只能这样去理解了，没深层次去研究过）。

      最近因为程序中要加日志模块，所以就想用切面方式(AOP)解决这个问题，然而遇到了头痛的问题，就是日志老写两次，也不知道哪里出错了，开始以为框架哪里有问题，调试了很多次都找不到原因。后来索性写了一个测试页面，发现在没有任何html标记的页面居然只写了一次日志，所以排除了程序上的问题，开始找页面的问题了。
 
      页面一行行排查过来，最终发现了是一行“<a href="#"><img src="#" width="100" border="0" height="40" alt="#"/></a>”出了问题，那么为什么这行会出现问题呢？
 
      img标记的src属性规定插入的图像的url地址，也就是含路径的图像文件名。该属性值是和页面一起会向服务器有个请求，那么如果把src="#",页面就会再次请求当前页，导致页面执行两次。
 
      也不知道当初为啥会把src的属性设为#，可能是空链接用惯了，也没多想。在使用img中的src属性，包括css中的url(background-image等属性)请求如果设为#值的话，都会再试请求当前页面。所以在使用“#”值，切忌当心再当心，造成不必要的浪费。

     我们在开发网站时，有很大一部分人采用的是MVC模式，而V是代表视图，关于视图开发的语言，都有语法简单，开发迅速的特点，比如说velocity,jstl等等，而通常用这种语言写成的文件我们通常称其为模板。模板，从名字上可以得出，这是一种通用具有参照性的样板，所有的东西都是按照它的比例剪栽而成的。
 
 在采用MVC方式开发html页时，因为html是普通文本表示的，我们就会用如下形式表html
 

 

 
 
 通过上面的形式，我们程序就可以把以“${var}”形式的替换成我们想要的数据，而且处理起来很方便，页面和逻辑进行区分，但是对于我们的office文件(如excel,word的文件)应该怎么处理呢？因为他们不是文本的，所以通常情况下想要以excel或word文件模板像html一样做模板处理就相当困难了！那么有什么办法处理这种情况呢？
 
 在开发过程中，我们会遇到很多情况是这样的：要导出数据，导出成excel、PDF、word形式的，有的如果想打印，也可以直接导出这几种形式，以方便用户打印。这几种情况在开发中是经常存的，对于开发OA时，这种情况遇到的就更多一些了。
 
 那么有没有把像excel、word文档当成模板处理的呢？
 
 其实有很多方式可以实现这种情况的，我知道的大致有这几种情况。
 
 1.通过操作office类库，在程序中进行操作
  这种情况，得调用office类库，而且还得写不少代码。
 
 2.用openxml代替office的二进制代码
  感觉很复杂，也不知道openxml文件是否支持office早期版本。
 
 3.用office文件另存为xml形式来表示
 
 例：
  我建立doc文件，在文档里面输入“aaaaaaaaaaaaaaaaa”，并别存为“XML文档(*.xml)”，当你直接打开这个xml文件是就是直接打开word文档了，而文档里面就是我输入的数据。用记事本打开刚才保存的xml文件，发现里面就是一个文本格式的。代码如下：
  

而刚才输入的文字"aaaaaaaaaaaaaaaaa",就在其中。如果你需用用变量，那么就可以用变量替换了。

那么程序应该如何处理该文档呢？

其实处理方式和MVC中处理html一样的，只是把这个office的xml文档当作html模板处理并，在程序端另存为文档时也得处理一下，如下列代码：

 

 

通过上面形式，就可以把office文件当作文本模板导出office可以正常显示读取的word或excel文件了。