html: 如何阻止点击a标签自动刷新当前页面

<a href="javascript:void(0)">这是超链接文本</a>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
一 Jeecms安装过程 将解压后得到的jeecms-3.0.2-final文件夹下的root文件夹更名为jeecms拷贝到tomcat 安装目录下的webapps 文件夹下(例如: D:\Tomcat 6.0\webapps\),启动tomcat,在地址栏中输入http://localhost:8080/jeecms, 您将看到第一步安装过程中的《用户许可协议》,勾选“我已经阅读并同意此 协议”,点击下一步, 接下来第二步安装过程中设置系统参数,系统会自动检测出一些配置项,请根据您的实际情 况填写,数据库密码不能为空。 点击提交后进入第三步进入最后的系统安装过程,安装过程可能需要十几秒的等待时间。安 装成功后将提示信息,请再重启Tomcat 完成安装。 Tomcat重启完毕之后,在浏览器的地址栏中输入http://localhost:8080/jeecms, 若系统正常显示默认的站点首页则表示JEECMS 已经顺利安装完成. 附: 系统管理后台登录:http://localhost:8080/jeecms/jeeadmin/jeecms/index.do 用户名:admin 密 码:password 图文安装步骤如下: 将解压后得到的ROOT文件夹拷贝到tomcat安装目录下的webapps文件夹下(例如:D:\Tomcat 6.0\webapps\),启动tomcat,在地址栏中输入http://localhost:8080,您将看到第一步安装过程中的《用户许可协议》,如图一所示,勾选“我已经阅读并同意此协议”,点击下一步, 图一:用户许可协议 接下来第二步安装过程中设置系统参数,系统会自动检测出一些配置项,请根据您的实际情况填写,如图二所示,数据库密码不能为空。 图二:系统参数设置 点击提交后进入第三步进入最后的系统安装过程,安装过程可能需要十几秒的等待时间。安装成功后将提示如图三所示的页面信息,请再重启Tomcat完成安装。 图三:系统安装完成 三、完成安装 Tomcat重启完毕之后,在浏览器的地址栏中输入http://localhost:8080,若系统正常显示默认的站点首页则表示JEECMS已经顺利安装完成.,如图四所示: 图四 站点首页 二 Jeecms项目导入myeclipse 1.在myeclipse中新建一个项目jeecms,将服务器中jeecms项目下web-inf文件夹下内容拷到新建项目中 解压缩jeecms-3.0.2-final-src,在src文件夹下会看到有三个压缩文件,如果只想进行普通的二次开发,可以只导入cms这个源码,删除jeecms-cms-identity-3.0.2-final.jar即可,如果想进行深入的二次开发,需要导入common和core源码,另导入common-lib下的jar包,删除jeecms-cms- identity-3.0.2-final.jar,jeecms-common-3.0.2-final.jar ,jeecms-core- identity-3.0.2-final.jar这三个jar包,切记:务必进行build path 3.修改jdbc链接,自己导入数据库。 4.把服务器下install\config下的web.xml复制出来覆盖掉新建项目WEB-INF下的web.xml 5.classes下有四个文件,手动烤到myeclipse项目src根目录下中 6.将服务器上jeecms项目删掉,发布新建的jeecms项目。 三 首页的加载过程 在浏览器中输入http://localhost:8080/jeecms,回车 首先进入配置文件web.xml, <context-param> <param-name>contextConfigLocation</param-name> <!----> <param-value> /WEB-INF/config/application-context.xml /WEB-INF/config/cache-context.xml /WEB-INF/config/captcha-context.xml /WEB-INF/config/jeecore-context.xml /WEB-INF/config/jeecms-context.xml </param-value> </context-param> 应用范围内的初始化参数 其中jeecms-context.xml是对标签的初始化 <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.shtml</welcome-file> <welcome-file>index.jhtml</welcome-file> </welcome-file-list> 通过以上标签找到应该加载哪一个页面 <servlet> <servlet-name>JeeCmsFront</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>/WEB-INF/config/jeecms-servlet-front.xml</param-value> </init-param> <load-on-startup>2</load-on-startup> </servlet> <servlet-mapping> <servlet-name>JeeCmsFront</servlet-name> <url-pattern>*.jhtml</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>JeeCmsFront</servlet-name> <url-pattern>*.jspx</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>JeeCmsFront</servlet-name> <url-pattern>*.jsp</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>JeeCmsFront</servlet-name> <url-pattern>*.htm</url-pattern> </servlet-mapping> 通过servlet配置,可以找到jeecms-servlet-front.xml,在此配置文件的最后有 <import resource="jeecms-servlet-front-action.xml"/>代码 找到jeecms-servlet-front-action.xml,在此配置文件中有 <bean id="dynamicAct" class="com.jeecms.cms.action.front.DynamicPageAct"/> 可以找到类DynamicPageAct,此类是首页模板。 在类DynamicPageAct中有 public static final String TPL_INDEX = "tpl.index"; 找到WEB-INF\languages\jeecms_front下messages_zh_CN.properties配置文件,可以找到对应的首页面 tpl.index=首页(工程中的首页.html文件) 四 标签的配置流程 以cms_content_list为例,首先,每一个标签的声明都是在jeecms-context.xml中进行的, <?xml version="1.0" encoding="UTF-8"?> <beans xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd" default-lazy-init="true"> …… <bean id="cms_content_list" class="com.jeecms.cms.action.directive.ContentListDirective"/>(声明标签对应的类) <bean id="staticPageSvc" class="com.jeecms.cms.staticpage.StaticPageSvcImpl"> <property name="freeMarkerConfigurer"> <bean class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer"> <property name="freemarkerVariables"> <map> …… <entry key="cms_content_list" value-ref="cms_content_list"/> …… </map> </property> <property name="templateLoaderPath" value=""/> …… </bean> </property> </bean> </beans> 此外,在配置文件jeecms-servlet-front.xml中,还有一段对标签的配置 <bean id="freemarkerConfig" class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer"> <property name="freemarkerVariables"> <map> …… <entry key="cms_content_list" value-ref="cms_content_list"/> …… </map> </property> …… </bean> </bean> 类ContentListDirective继承自AbstractContentDirective,最主要的是execute方法 public class ContentListDirective extends AbstractContentDirective { /** * 模板名称 */ public static final String TPL_NAME = "content_list"; /** * 输入参数,文章ID。允许多个文章ID,用","分开。排斥其他所有筛选参数。 */ public static final String PARAM_IDS = "ids"; @SuppressWarnings("unchecked") public void execute(Environment env, Map params, TemplateModel[] loopVars, TemplateDirectiveBody body) throws TemplateException, IOException { //获取站点 CmsSite site = FrontUtils.getSite(env); //获取内容列表,可以通过此处进行更改,获取自己数据库中的数据 List<Content> list = getList(params, env); Map<String, TemplateModel> paramWrap = new HashMap<String, TemplateModel>( params); //OUT_LIST值为tag_list,在类DirectiveUtils中声明,将内容列表放入其中 paramWrap.put(OUT_LIST, DEFAULT_WRAPPER.wrap(list)); //将params的值复制到variable中 Map<String, TemplateModel> origMap = DirectiveUtils .addParamsToVariable(env, paramWrap); //获取的是参数PARAM_TPL,是否调用模板以及调用的模板类型 InvokeType type = DirectiveUtils.getInvokeType(params); //获取传入参数,列表样式,根据不同的参数获取不同的样式列表 String listStyle = DirectiveUtils.getString(PARAM_STYLE_LIST, params); if (InvokeType.sysDefined == type) { if (StringUtils.isBlank(listStyle)) { throw new ParamsRequiredException(PARAM_STYLE_LIST); } //列表样式模板 env.include(TPL_STYLE_LIST + listStyle + TPL_SUFFIX, UTF8, true); } else if (InvokeType.userDefined == type) { if (StringUtils.isBlank(listStyle)) { throw new ParamsRequiredException(PARAM_STYLE_LIST); } //列表样式模板路径 WEB-INF\t\cms_sys_defined\style_list\style_2-1.html FrontUtils.includeTpl(TPL_STYLE_LIST, site, env); } else if (InvokeType.custom == type) { //这个模板就是自己声明的,即content_list.html,如果采用自定义模板的话,页面中可以只写上标签,并添加上标签内需要的几个参数,不需要写标签体的内容,会去自动调用模板中的标签体。 FrontUtils.includeTpl(TPL_NAME, site, params, env); } else if (InvokeType.body == type) { body.render(env.getOut()); } else { throw new RuntimeException("invoke type not handled: " + type); } //将variable中的params值移除 DirectiveUtils.removeParamsFromVariable(env, paramWrap, origMap); } @SuppressWarnings("unchecked") protected List<Content> getList(Map<String, TemplateModel> params, Environment env) throws TemplateException { Integer[] ids = DirectiveUtils.getIntArray(PARAM_IDS, params); if (ids != null) { //根据内容ID数组获取文章列表 return contentMng.getListByIdsForTag(ids, getOrderBy(params)); } else { return (List<Content>) super.getData(params, env); } } @Override protected boolean isPage() { return false; } } Content_list.html中的内容 [#list tag_list as a] <li><a href="${a.url}" target="_blank">${a.title}</a></li> [/#list] 就是简单的将tag_list中的内容,即“paramWrap.put(OUT_LIST, DEFAULT_WRAPPER.wrap(list));”中放入的数据遍历出来 style_2-1.html中的内容 主要是对图文列表或标题列表向上滚动的样式的,其中包含两个同样为样式的文件 style_2-1_core.html(图文列表或标题列表向上滚动)和style_1-1_core.html(图文列表或标题列表向上滚动),在此就不做赘述了。 Jeecms是基于Spring注解,在自定义标签时对于实体类和dao service等注意注解的问题。 五 自定义标签及使用自己创建的表的实现过程 下面是我自己定义的标签mycontent_list 首先,在数据库里创建了一个jc_mycontent的表,其中有id,title,content三个字段 其次,创建了一个实体类 public class MyContent { private static final long serialVersionUID = 1L; private Integer id; private String title; private String content; public MyContent () { super(); } ……get set方法 } 接下来是配置hibernate中jc_mycontent表的配置文件 <?xml version="1.0"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD//EN" "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd"> <hibernate-mapping package="com.jeecms.cms.entity.main"> <class name="MyContent" table="jc_mycontent"> <meta attribute="sync-DAO">false</meta> <cache usage="read-write"/> <id name="id" type="java.lang.Integer" column="id"><generator class="identity"/></id> <property name="title" column="title" type="java.lang.String" not-null="true" /> <property name="content" column="content" type="java.lang.String" not-null="true" /> </class> </hibernate-mapping> 与数据库交互的持久层接口 public interface MyContentDao { public List<MyContent> getList(); } 持久层实现类 @Repository//持久层 public class MyContentDaoImpl extends HibernateBaseDao<MyContent, Integer> implements MyContentDao { @SuppressWarnings("unchecked") public List<MyContent> getList(){ return find(byNothing()); } private Finder byNothing(){ Finder f = Finder.create(); f.append("from MyContent");//可以在此处添加查询条件或者添加各种方法进行动态查询 f.setCacheable(true); return f; } @Override protected Class<MyContent> getEntityClass() { return MyContent.class; } } 业务层接口 public interface MyContentMng { public List<MyContent> getList(); } 业务层实现类 @Service//业务层 @Transactional public class MyContentMngImpl implements MyContentMng { @Transactional(readOnly = true)//配置事务为只读 public List<MyContent> getList(){ return myContentDao.getList(); } private MyContentDao myContentDao; @Autowired//自动绑定 public void setMyContentDao(MyContentDao myContentDao) { this.myContentDao = myContentDao; } private List<ContentListener> listenerList; @Autowired public void setListenerList(List<ContentListener> listenerList) { this.listenerList = listenerList; } } 标签类的抽象类,最主要的就是getData这个方法,以及绑定业务层,其中可以添加多种查询方法。可参考类AbstractContentDirective public abstract class AbstractMyContentDirective implements TemplateDirectiveModel { protected Object getData(Map<String, TemplateModel> params, Environment env) throws TemplateException { return myContentMng.getList(); } @Autowired protected MyContentMng myContentMng; } 自定义标签中最重要的类继承上边的抽象类 public class MyContentListDirective extends AbstractMyContentDirective { /** * 模板名称 */ public static final String TPL_NAME = "mycontent_list"; @SuppressWarnings("unchecked") public void execute(Environment env, Map params, TemplateModel[] loopVars, TemplateDirectiveBody body) throws TemplateException, IOException { //获取站点 CmsSite site = FrontUtils.getSite(env); //获取内容列表 List<MyContent> list = getList(params, env); Map<String, TemplateModel> paramWrap = new HashMap<String, TemplateModel>(params); //OUT_LIST值为tag_list,将内容列表放入其中 paramWrap.put(MYOUT_LIST, DEFAULT_WRAPPER.wrap(list)); //将params的值复制到variable中 Map<String, TemplateModel> origMap = DirectiveUtils.addParamsToVariable(env, paramWrap); //没有采用默认的模板,直接采用自己写的简单的模板(mycontent_list.html) FrontUtils.includeTpl(TPL_NAME, site, params, env); //将variable中的params值移除 DirectiveUtils.removeParamsFromVariable(env, paramWrap, origMap); } protected List<MyContent> getList(Map<String, TemplateModel> params, Environment env) throws TemplateException { return myContentMng.getList(); } } 样式模板mycontent_list.html内容,里边可以自己添加一些样式,可参考\t\cms_sys_defined\style_list下样式文件 [#list mytag_list as a] <li><a href="${a.title}"><font color='blue'>"${a.content}"</font></a></li> [/#list] 首页里加入如下代码 [@cms_mycontent_list] <ul class="topnews"> </ul> [/@cms_mycontent_list] 通过以上这些代码,可以实现将自己的表jc_mycontent中的数据查询并显示在页面上 六 标签使用和模板的制作 1模板规划 1.1资源文件 资源文件就是网页中用到的图片、CSS、JS等元素,在CMS系统中所有的资源文件在网站的根目录中的 /res_base/所属网站定义资源目录/TEMPLEATE/WEB /res_base/所属网站定义资源目录/TEMPLEATE/WAP 解释:网站定义资源 在CMS系统中可以同时管理多个网站,也就是多个网站可以同时使用一套CMS系统,但是每一个网站都已属于自己独立的资源文件及模板文件目录。 1.2模板文件 定义了页面显示的主体框架,它的位置位于网站根目录下的/WEB_INF/user_base/所属网站模板目录; 模板规则: 1、以index前缀命名的为首页模板 2、以channel前缀命名的为栏目模板 3、以content前缀命名的为内容模板 4、以alone前缀命名的为栏目单页模板 1.3使用方式 1、使用dw建立站点 2、将网页中用到的资源文件分类分别放置到网站相关资源目录中 3、将模板文件放置按照命名规则分别放置到网站相关模板目录中。 4、将头部、底部等等具有通用元素的模板文件放置到模板目录中的include目录中 5、将模板文件中所有资源引用改为绝对路径链接至资源目录中 6、在栏目管理中将模板文件与栏目进行关联设置 7、在模板文件中需要提取数据的位置放置相应的标签 1.4标签调用样式 调用"JEECMS标签"的三种代码样式如下:   A、${标签名称}   B、[@cms.标签名称 属性='值'/]   C、[@cms.标签名称 属性='值'; 标签别名] 自定义样式模板 [/@cms.标签名称]   例如: a、${web.name}标签用于调用网站名称 b、[@cms.ArtiList chnlId='' count='10' sysContent='1-1' /]标签用于调用 10篇文章的列表 C、[@cms.ChnlList id='' inner='1';c]|<a >>${c.name}</a> [/@cms.ChnlList]标签用于调用栏目列表,可用于网站导航条。   注意:abc实例是与上面ABC三种形式相对应的。大家可以逐个测试,举一反三 2 Include标签 2.1功能简介 做过网站设计经验的朋友可能都知道,我们可以将页面中经常要引用的公共部分(比如页头和页脚)独立开来,单独存放在一个页面中。这样做的好处就是可以在各个需要用到该部分的页面中用一个简单的包含语句就能把它引入进来,大大简化了工作量。 2.2标记说明 【标签名】:[@cms.Include 属性='值' /] 【作 用】:包含公用页面(如页头,页脚) 【参 数】: name:包含模板的文件名 solution:模板方案名 【示 例】: 包含页头:[@cms.Include name='head.html' solution='default'/] 【备 注】:调用此标签前必须先建立相应的包含模板 2.3 明确标签的使用范围   我们在使用任何标签的之前,都必须明确其使用的范围,否则可能无法正常使用该标签。   【Include 标签】的使用范围是:首页模板,栏目页模板,内容页模板,即对应\WEB-INF\user_base\jeecms_com_www\template\article\default\文件夹下的index_××.html模板、channel_××.html模板、content_××.html模板 2.4调试标签了解其使用方法   在使用【Include 标签】之前我们必须保证有可供此标签调用的包含模板,本实例只是起演示作用,为方便起见,这里就不再另外创建被包含的模板了,标签调用的是系统默认模板方案中的的head.html模板。 登录JEECMS后台,进入“模板管理->template->article->default”,点击修改开始时建立的index_demo.html模板(如果没有此模板则按照本文开头的说明创建),进入模板代码模式,填写如下标签代码(为了演示效果美观,本处代码中加入了css,可去除): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Include标签测试</title> <link href="${sysResRoot}/front.css" type="text/css" rel="stylesheet" /> <link href="${root}/default/article/css/whole.css" type="text/css" rel="stylesheet" /> <link href="${root}/default/article/css/layout.css" type="text/css" rel="stylesheet" /> </head> <body> [@cms.Include name='head.html' solution='default'/] </body> </html>   点保存按钮,然后返回前台站点首页刷新,得到如下效果: 3 ArtiList标签 3.1功能简介 【ArtiList 标签】在CMS中使用的频率可以说是最高的,通过这个标签,你不仅可以得到一个文章列表,而且可以通过不同的参数组合得到不同的显示效果。比如文章图文列表、文字或图片跑马灯、文字或图片上下循环滚动等等。 使用方式: [@cms.ArtiList chnlId='' count='5' sysContent='1-1' titLen='25' lineHeight='1' dateFormat='4' datePosition='2' headMark='2' target='1'/] 3.2标记说明 【标签名】:[@cms. ArtiList 属性='值' /] 【作 用】:获取文章列表数据 【参 数】: 属性名称 属性说明 默认值 可选值 chnlId 栏目ID,栏目页中可不设置,系统会自动获取当前栏目ID 当前栏目ID 空:显示全站文章列表; 栏目ID:指定栏目文章 attr 文章属性ID 空 1:普通 2:图文 3:焦点 4:头条 5:滚动 sysContent 列表显示方式 1-1 1-1:普通标题列表 1-2:图文列表 2-1:标题列表翻滚 2-2:图文列表翻滚 3-1:焦点图 orderBy 排序方式 0 0:发布时间降序; 1:发布时间升序; 2:固顶降序; 3:置顶降序; 4:日点击降序; 5:周点击降序; 6:月点击降序; 7:季点击降序; 8:年点击降序; 9:总点击降序 recommend 是否推荐 0 0:所有文章 1:推荐文章 titLen 标题长度 20 自定义 target 链接打开目标 0 0:原窗口打开 1:新窗口打开 headMark 文章标题图标 0 0:无图标 1:黑色小圆点 2:红色小圆点 3:蓝色单箭头 4:蓝色双箭头 自定义图标:填写图标路 lineHeight 文章列表每行的行高 空 自定义 bottomLine 每行标题下是否带下划分隔线 0 0:无分隔线 1:默认分隔线 自定义样式:css中定义的样式名称 ctgForm 文章类别形式 0 0:不显示文章类别 1:显示栏目类别 2:显示站点名称 ctgClass 文章类别的css-class 空 自定义css样式的class名 dateFormat 文章发布日期显示格式 0 0:不显示日期 1:”年-月-日 时-分-秒” 格式 2:”年-月-日” 格式 3:”月-日 时-分” 格式 4:”月-日” 格式 datePosition 日期排列位置 1 1:紧跟标题之后 2:右对齐 3:左对齐 isPage 是否显示分页 0 0:否;1:是 count 每页列表显示数量 20 自定义 cssStyle 连接的样式 空 自定义 仅当sysContent='1-2'(图文列表)时,以下标签属性才有效 picWidth 按百分比显示图片宽度 25(即每个图片占总宽度的25%,每行可放四张图片) 自定义 picHeight 每行图片显示高度 110 自定义 仅当sysContent='3-×'(焦点图)时,以下标签属性才有效 flashWidth 焦点图宽度 296(px) 自定义 flashHeight 焦点图总高度 200(px) 自定义 textHeight 焦点图文本高度 20(px) 自定义 仅当sysContent='2-×'(特效显示)时,以下标签属性才有效 rollDisplayHeight 显示区高度 28 自定义 rollLineHeight 行高 28 自定义 rollCols 列数(一行中包含几列) 1 自定义 rollSpeed 滚动速度,值越小越快,最小为1 1 自定义 isSleep 是否停顿 1 0:不停顿; 1:停顿 rollSleepTime 停顿时间,值越大停顿越久 50 自定义 rollCount 一次滚动的行数 1 自定义 rollSpan 一次滚动的像素 1 自定义 其它高级标签属性(用于用户个性设置) searchKey 在标题、tags和描述中搜索指定关键字的文章列表,用于搜索页模板 空 自定义关键字 style 标签内部样式,如果指定sysContent或userContent,则该项无效 1 1:普通列表 sysTpl 指定系统模板 1 自定义 sysContent 系统内容样式 0 自定义 userContent 用户内容样式,当sysContent=1时有效 空 自定义 sysPage 系统分页样式 0 自定义 userPage 用户分页样式,当sysPage=1时有效 空 自定义 upSolution 指定其它模板方案样式 空 自定义 upWebRes 指定其它站点样式 空 自定义 pageClass 分页栏css样式的class名称 空 自定义 pageStyle 分页栏css自定义style样式 空 自定义 3.3 明确标签使用范围   我们在使用任何标签的之前,都必须明确其使用的范围,否则可能无法正常使用该标签。 【ArtiList 标签】的使用范围是:首页模板,栏目页模板,内容页模板, 即对应\WEB-INF\user_base\jeecms_com_www\template\article\default\文件夹下的index_××.html模板、channel_××.html模板、content_××.html模板 3.4 调试标签了解其使用方法   登录JEECMS后台,进入“模板管理->template->article->default”,点击修改开始时建立的index_demo.html模板(如果没有此模板则按照本文开头的说明创建),在模板内容处填写如下标签代码(为了演示效果美观,本处代码中引入了系统默认css,可去除):(1).文章列表 <link href="${sysResRoot}/front.css" type="text/css" rel="stylesheet" /> [@cms.ArtiList chnlId='' count='5' sysContent='1-1' titLen='25' lineHeight='1' dateFormat='4' datePosition='2' headMark='2 target='1'/]  点保存按钮,然后返回前台站点首页刷新,得到如下效果: (2).图文列表 <link href="${sysResRoot}/front.css" type="text/css" rel="stylesheet/> [@cms.ArtiList chnlId='' attr='2' count='5' sysContent='1-2' titLen='25' target='1' picWidth='25' picHeight='110'/]   点保存按钮,然后返回前台站点首页刷新,得到如下效果: 4 Position标签 4.1功能简介 在网站页面中我们经常要显示当前页面的位置,例如:当前位置:首页 > 无线城市> 城市要闻 > 正文。在CMS标签中提供了一个显示页面当前位置调用标签,只需将该标签放到页面的相应地方,设置好调用参数即可,简单方便。 4.2标记说明 【标签名】:[@cms.Position 属性='值' /] 【作 用】:显示页面当前位置  【参 数】:   homepage —-首页显示方式。【1:站点简称;自定义】(默认:首页)   title ---内容页显示方式。【0:不显示;1:显示内容标题;自定义】(默认:正文)   split ---分割符号。(默认:“>”)   target ---是否原窗口打开。【0:原窗口打开;1:新窗口打开】(默认:原窗口打开)   class ---链接外部样式,等同于html中的class属性   style ---自定义标签样式,等同于html中的style属性  【示 例】:   [@cms.Position homepage='1' split='|' target='1' /] 【作 用】:显示各栏目列表 【参 数】: 属性名称 属性说明 默认值 可选值 id 父栏目ID 默认为空:自动获取当前栏目ID 空:当前栏目ID; 栏目ID:指定父栏目id orderBy 排序方式 0 0:优先级升序; 1:优先级降序; 2:点击次数升序;3:点击次数降序 isDisplay 是否只获取显示的栏目 1 0:获取所有; 1:只获取显示的栏目 hasContent 是否只获取可以有内容的栏目 0 0:获取所有; 1:只获取可以有内容的栏目 linkClass 链接class样式 空 linkTarget 链接打开方式 0 0:当前窗口; 1:新窗口 sysPage 系统分页样式 0 0:不分页; 1:样式一; 2:样式二 userPage 自定义分页样式。如果指定了系统分页样式,则该项无效 0 0:不分页; 1:样式一; 2:样式二 5.3明确标签的使用范围   我们在使用任何标签的之前,都必须明确其使用的范围,否则可能无法正常使用该标签。 [@cms.ChnlList /]标签的使用范围是:首页模板,栏目页模板,即对应\\WEB-INF\\user_base\\jeecms_com_www\\template\\article\\default\\文件夹下的index_××.html模板、channel_××.html模板 5.4调试标签了解其使用方法 1、单独标签调用示例: [@cms.ChnlList/] 2、自定义标签调用示例:    [@cms.ChnlList id='' inner='1';c,i]     <a href="${c.url}">${c.name}</a>[#if (i+1)%2==0]<br/>[/#if]    [/@cms.ChnlList] 3、配合其它标签嵌套调用示例: [@cms.ChnlList id='' sysType='article' hasContent='1' inner='1';c] <table width="300" border="0" cellpadding="0" cellspacing="1" bgcolor="#eee"> <tr> <td height="30" bgcolor="#EEEEEE"><a target="_blank" href="${c.url}">${c.name}</a></td> </tr> <tr> <td bgcolor="#FFFFFF">[@cms.ArtiList chnlId=c.id sysContent='1-1' titLen='20' count='6' /]</td> </tr> </table> [/@cms.ChnlList] 6内容页常用标签 6.1标记说明 【文章导航】:[@cms.Position /] 【文章标题】:${arti.title} 【简短标题】:${arti.shortTitle} 【文章作者】:${arti.author} 【发布日期】:${arti.releaseDate} 【查看次数】:${arti.visitTotal} 【文章来源】:${arti.origin} 【文章摘要】:${arti.description} 【文章内容】:${arti.content}
JavaScript:定义行为和动作 (基于对象和事件驱动的客户端脚本语言;也是一种广泛应用于客户端Web开发的脚本语言) 基于对象:网页中的一切元素都是假象!不需要new,即可直接使用 事件驱动:JavaScript的执行都是由事件引发 解释执行:先读到的先执行,后读到的会替代先读的 可以使用任何文本编辑工具编写 JavaScript 代码,然后由浏览器解释执行。 JavaScript常用于实现如下功能: |--控制文档的外观和内容; |--对浏览器的控制; |--与 HTML 表单的交互; |--与用户的交互; |--执行计算等。 1.单击事件:定义在按钮的开始标签中 语法:onclick="js语句" 弹出警告:alert(‘字符串’) 强调:1.js区分大小写 2.字符串单双引号不区分 [removed]标签页面中专门集中编写JavaScript的区域 js的方法定义:function方法名([参数列表]){ 方法体 [return 返回值] } 注意:js中的方法可以直接写在代码中,不需要“类”包裹 使用方法:方法名()-->方法调用-->立即执行 2.js文件:网页外专门保存js脚本的文件--推荐 强调:HTML、CSS、JS都要使用UTF-8编码保存(window系统) 使用js文件引入网页:[removed][removed] 强调:一旦定义src属性则其中的代码失效 解释执行:语句也可以直接写在js文件中,边解释边执行 3.***调试*** |--①.只有在执行时,才会报错 |--②.错误信息,浏览器页面看不到--没效果 | 解决:控制台--(工具-->JavaScript控制台或F12) | 包含错误信息;指向错误位置的超链接 |--③.打桩:在指定变量位置输出变量或对象的内容 console.log(内容);-->出现在控制台-->日志 4.变量:js中的变量不需要提前指定类型,由赋值时动态决定 所有的变量都用var声明 5.数据类型: |--String(字符串类型) |--Number(数字类型) |--Boolean(布尔类型)0、-0、null、""、false/undefined或NaN,则该对象设置为false。其余都可以当true 6.数据类型的隐式转换: |--数字 + 字符串:数字转换为字符串 |--数字 + 布尔值:true转换为1,false转换为0 |--字符串 + 布尔值:布尔值转换为字符串true或false |--布尔值 + 布尔值:布尔值转换为数值1或0 7.数据类型转换函数 :(方法前不需要对象调用的:全局函数) |--toString():转换成字符串。所有数据类型均可转换为 string 类型; |--parseInt():强制转换成整数。如果不能转换,则返回 NaN(not a number); |--parseFloat():强制转换成浮点数。如果不能转换,则返回 NaN(Not a Number) |--typeof():查询数值当前类型。 |--isNaN():判断是否为数字。返回 true:不是数字/false:是数字 | |--isNan(""):对空字符串不验证,直接返回false | |--如果输入的是字符串类型的数字,返回false--不能判断数据类型,只判断内容 | |--如果输入的是boolean,返回false。因为boolean可以和number类型直接做计算 | |--和任何数字计算都得NaN;和任何数字作比较都得false |--注:[removed]();节点输出,即在当前位置输出括号里的内容 *凡是从页面上进入js的都是字符串类型 8.查找元素:抓住根节点,就等于抓住整棵树 网页的根节点:document对象 要找元素,必须利用document对象(当前网页文件) 精确查找某个ID的元素:document.getElementById(id名); 9.null和undefined: |--null:一个特殊的值,表示“无值”--空对象。数据类型为Object |--undefined:表示声明了变量但从未赋值或者对象属性不存在 10.双等号(==)和全等号(===): |--“==”为确定两个运算数是否相等,“==”运算符会进行类型转换。转换后运算数相等就返回true,否则返回false |--“===”不执行类型转换,即,只有在无需类型转换运算数就相等的情况下,才返回true,否则返回false |--附:if(null)、if(defined)、if(NaN)都相当于if(false) -----猜数字游戏----- 失去焦点时,判断猜对猜错 获得焦点:onfocus 失去焦点:onblur 当事件就发生在获得内容的当前元素上: this直接获得当前内容对象。可以代替当前对象完成一切操作,拥有当前对象的所有属性 前端优化:js中最好用三目运算代替if else 11.String: |--查找:x.indexOf(‘关键字’[,开始位置下标]) | 每次只查找第一次出现的位置 |--替换:x.replace(‘关键字’[,‘替换内容’])--不会修改原x字符串 | 每次只替换第一次找到的 |--查找和替换所有:while循环 | |--String 对象的常用方法有: |--x.toLowerCase()、x.toUpperCase():大小写转换方法; |--x.charAt(index):返回指定位置的字符; |--x.charCodeAt(index):返回指定位置字符的Unicode编码; |--x.indexOf(findstr,index)、x.lastIndexOf(findstr,index): 获取指定字符; |--x.substring(start, end): 获取子字符串; |--x.replace(findstr,tostr):替换子字符串; |--x.split(bystr): 拆分子字符串。 |--String与正则表达式 |--str.match(regExp);--查找str中匹配正则表达式的关键字 | 返回:如果没找到,返回null。若找到,返回1个数组,数组的每个元素是每个找到的匹配关键 | |--str.replace(regExp,"替换值")--替换str中所有匹配的关键字 | 强调:replace方法不改变元字符串,只能返回新字符串。必须用变量接收新字符串 | |--js中正则表达式语法:/正则表达式/[属性后缀]--其中属性后缀,g:全局匹配 i:忽略大小写(仅英文有效) 如果不适用模式匹配方式,将执行原文匹配 结果:如果正则表达式写错,也将执行原文匹配 12.Array笔试题:js中数组声明方式: A new Array(7) B new Array(7,‘a’,true) C [7,'a',true]--js中所有[]都表示数组 D []--实例化一个空数组对象 实例化空数组:var arr=[]; 特点:元素个数不限定,元素类型不限制 13.Array 对象的常用方法: |--1.join()方法--用于把数组中的所有元素放入一个字符串   | eparato表示要使用的分隔符。如果省略该参数,则使用逗号作为分隔符 |--2.toString()方法--可把数组转换为字符串,并返回结果 |--3.concat()方法--用于连接两个或多个数组,该方法不会改变现有的数组 |--4.slice()方法--截取元素。根据给定的范围可从已有的数组中返回选定的元素 14.Function:js中一切都是对象,连方法都是1个对象!! 笔试题:js中方法定义集中方式: A:function compare(a,b){return a-b;}---*可以任意地方声明方法* B:var compare=function(a,b){return a-b;} ---| --其实方法名也是方法对象的变量名;等号右边其实就是1个匿名方法对象 |--*必须在传递之前声明方法对象* C:var compare=new Function('a','b','return a-b') ---| --其实js底层就是new Function;构造函数中的参数都是字符串 结论:所有的方法都是function类型的。 15.JavaScript中的所有事物都是对象,分为三类: |--简单对象:String、Number、Boolean |--组合对象:Array、Math、Date |--复杂对象:Function、Regex、Object等 16.Array排序: |--升序:function compare(a,b){return a-b;} |--降序:function compare(a,b){return b-a;} 比较器用法:arr.sort(比较器方法名); 遍历:for(var i=0;i<arr.length;i++)--等同Java Array倒转:arr.reverse();用于颠倒数组中元素的顺序 17.Array元素操作: |--arr.push(x);向数组增加1个新元素x(位于数组最后位置) |--arr.splice(开始位置,删除几个[,x1,x2,x3...]) |--arr.indexOf(x) 返回x在数组中的下标---经常用于判断元素是否存在。如返回-1,x则不在数组中 18.Number对象: |--x.toFixed(num):可把Number四舍五入为指定小数位数(num:0-20)的数字 |--x.toString():用于把一个 Number 对象转换为一个字符串,并返回结果 19.正则表达式对象:(专门用于查找和验证) reg.test(‘要验证的完整字符串’)匹配返回true,否则返回false 强调:如果正则表达式使用了^和$,必须完整匹配才行。反之则部分匹配 20.Date对象:(计算方法:先get,再计算,最后set回去) |--1.每个分量上都有一对get/set方法 |--2.命名:get|set年月日,单数;get|set时分秒,复数(s) |--3.除了日期从1开始到31结束外,其余都从0开始到-1结束 |--Date对象的常用方法 |--1.获取日期数据 getDate()、getDay()、getFullYear()等 |--2.修改日期数据 setDate()、setDay()、setFullYear()等 |--3.获取日期格式的字符串 toString()、toLocaleTimeString()、toLocaleDateString()等 21.argument参数:所有方法都隐藏的一个数组对象 作用:不设置任何的形参的情况下,自动接收所有传入参数 arguments.length:获得参数个数 arguments[i]:获得每个参数--都要判断和类型转换 22.全局函数:不用任何对象点(.)就可以调用--可用于所有的 JavaScript 对象 常用的全局函数有:parseInt/parseFloat、isNaN、eval、decodeURI/encodeURI等。 encodeURI和decodeURI: |--encodeURI:可把字符串作为 URI 进行编码 |--decodeURI:decodeURI()函数可对encodeURI()函数编码过的 URI 进行解码 eval() 函数可计算某个字符串,并执行其中的的JavaScript代码 23.BOM:操作浏览器窗口的对象模型。 --即浏览器对象模型 ,用来访问和操纵浏览器窗口,使 JavaScript 有能力与浏览器“对话” DOM:操作网页中元素对象的对象模型--即文档对象模型,用来操作文档 window对象的常用属性: |--document:窗口中显示的 HTML 文档对象 |--history:本次浏览过窗口的历史记录 | --前进:history.go(1);后退:history.go(-1);刷新:history.go(0); |--location:窗口文件地址对象(地址栏) |--event:事件对象 |--screen:屏幕对象 |--name:窗口名称 |--opener:打开当前窗口的 window 对象 |--navigator:有关浏览器的信息 |--cookieEnable:判断当前浏览器是否启用cookie |--userAgent:获得浏览器的名称和版本号 window 对象的常用方法有: |--alert();--警告框--只能点确认 |--confirm();确认框--可以选择确认或取消 |--prompt();对话框--用于显示可提示用户进行输入 |--window.open('url'[,'name']):打开1个选项卡 |--window.close():关闭当前选项卡 24.定时器:凡是网页中自动动态的效果都是用计时器实现的 |--周期性定时器:每隔一个时间段自动执行一次,循环执行 | |--setInterval() 启动-->用于启动一个周期性定时器 | 语法:timer=setInterval(方法名,间隔毫秒数) |--clearInterval() 停止-->用于停止一个周期性定时器 语法:timer=clearInterval(timer) |--1次性定时器:先等待一段时间,再自动执行一次,自动结束 |--setTimeout() 启动-->用于启动一个一次性定时器 |--clearTimeout() 停止-->用于停止一个一次性定时器 附: |--表单控件,读写内容:.value |--普通html元素,要想读写开始标签和结束标签之间的内容:[removed] 计时器:1.做什么事:方法; 2.一个变量:存计时器的线程号 3.何时启动计时器:事件 25.document:1.代表当前网页文档; 2.所有网页元素的根元素; 3.查找和操作元素,都要依靠document; 节点:nodeName--标签名或属性名 DOM操作样式:对象.className属性 等效于<标签class=""> DOM树:当前节点向上:txtObj[removed]() 向下:txtObj.getElementByTagName() 26.表单中查找控件对象:document.getElementsByName('name属性') DOM增加新节点:两种方法 创建新节点:document.creatElement('标签名') --此时新元素对象仅在内存中游离,页面看不见! 添加新节点:找到父元素! |--appendChild() 方法只能将新节点作为某节点的最后一个子节点 | --此时新元素追加到了父元素的末尾 |--parentNode.insertBefore()(新元素对象,A)--其中A为新元素要插入位置的后一位元素 DOM删除元素:node.removeChild(childNode)--node为父节点,childNode为要删除的节点 27.HTML DOM Select和Option对象: select对象:代表HTML表单中的一个下拉列表,每个<select> 标签即表示一个 Select 对象 |--属性: |--options:返回包含<select>元素中所有<option>的一个数组,每个元素对应一个<option>标签,索引从0开始 |--selectedIndex:设置或返回下拉列表中被选选项的索引号 |--size:设置或返回下拉列表中一次显示显示的选项数 |--方法: |--add(option):用于向<select>添加一个<option>元素。 |--remove(index):从下拉列表删除选项 Select对象有事件onChange当改变选择时调用的事件句柄。Select对象的onChange属性引用了一个事件句柄函数。当用户选 中一个选项,或者取消了对一个选项的选定时,就会调用该句柄。这个事件不会指定新的选项是什么,必须通过Select对象的 selectedIndex属性,或者各个Option对象的selected属性来确定这一点。 option对象:代表HTML表单中下拉列表中的一个选项,每个<option>标签表示一个Option对象 |--创建:var o = new Option(text,value); |--属性: |--index:返回下拉列表中选项的索引位置 |--text:设置或返回选项的文本值; |--value:设置或返回选项的值; |--selected:设置或返回选项的 selected 属性的值,该属性设置选项的当前状态,如果为 true,则该选项被选中 28.table对象: rows数组:表中所有行对象 方法:var row=table.iusertRow(i);--返回刚添加的新行 table.deleteRow(i); --i:行的下标。如果i取-1,即在表格末尾追加一行 tableRow对象: cells数组:当前行中所有单元格的对象 方法:var 刚添加的新单元格=tr.iusertCell(i); tr.deleteCell(i); tableCell对象:取单元格内容--td[removed] 29.事件冒泡: |--1.由外向内,捕获事件:记录哪级元素有什么事件 |--2.由内向外,冒泡执行:按记录的顺序由内向外执行 取消冒泡: |--1.获得事件对象!--event onclick="func(event)"--其中event和this都是关键字,表示事件对象 func(e)--此时e就是事件对象 |--2.取消冒泡:e.cancelBubble=true; 何时用:如果大量子元素拥有相同事件,应将相同事件统一定义在1个父元素上1次即可
第1章 HTML基本语法 §教学目的 通过本章的学习使学生掌握HTML的基本语法,学会制作简单的静态网页。 §知识要点 ★HTML文件的基本标记 ★文本内容格式 ☆标题 ☆字体 ☆段落 ☆文字滚动 ★列表 ☆无序列表 ☆有序列表 ☆嵌套列表 ★网页中使用多媒体 ☆图像 ☆音乐 ★网页中使用超链接 ☆基本超链接 ☆锚点链接 ★表格 ☆表格的行属性 ☆表格的单元格属性 ☆嵌套表格 ☆表格的结构 ★表单的应用 ☆form标记 ☆input标记 ☆列表与文本区 ★框架 ☆框架集与框架 ☆浮动框架 ☆框架链接 HTML的英文全称是Hyper Text Markup Language,即网页超文本标记语言,它是Internet上用于编写网页的主要语言。 1.1 HTML文件的基本结构 下面是一个HTML文件的基本结构。 <html> <head> …… </head> <body> …… </body> </html> 从上面的代码段可以看出,HTML文件的基本结构分为3部分,其中各部分含义如下。 <html>……</html>:表示HTML文件开始和结束的位置,里面包括<head>和<body>等标记。HTML文件中所有的内容都应该在这两个标记之间。 <head>……</head>:HTML文件的头部标记,在其中可以放置页面的标题以及文件信息等内容,习惯将这两个标签之间的内容统称为HTML的头部。 <body>……</body>:用来指明文档的主体区域,网页所要显示的内容都要放置在这个 标记内。习惯将这两个标签之间的内容统称为HTML的主体。 1.2 HTML文件的基本标记 在任何一个完整的网页中应该包含头部和主体两部分。头部部分,它主要包括一些基本的描述语句及当前HTML文件的有关信息。主体部分,它主要页面的主体内容,如文字、图像和表格等。 1.2.1 head和title标记 在HTML程序文件的头部标记中,一般需要包括标题和元信息。头标记包含的是与页面相关的信息,而不是页面本身所展现的内容。例如它包含的title标记,就是用来告诉浏览器要在页面标题栏上显示什么内容。 1.head标记 head标记的格式如下: <head> …… </head> head标记定义在HTML程序文件头部的内容不会直接显示在网页上。 2.title标记 title标记的格式如下: <title> …… </title> <title>和</title>标记位于HTML程序文件的头部,即位于<head>和</head>标记之间。<title>和</title>标记中间的内容就是标题内容,它可以帮助用户更方便地识别页面。 1.2.2 使用meta标记定义编码方式、定时跳转 在head标记里还可以有任意数量的meta标记,它的主要功能是定义页面的信息,这些信息并不显示在浏览器中。在网页中使用meta标记有许多不同的原因。有些需要向浏览器或搜索引擎提供的信息并不需要显示在页面上,例如页面作者的名字、关键字及描述等。 1.定义页面关键字 定义页面关键字格式如下: <meta name="keywords" content="具体的关键字" > 其中,name为属性名称,这里是keywords代表网页的关键字属性,在content属性中则定义具体的关键字。关键字可以提高被搜索引擎搜索到的概率,多个关键字时,关键字之间使用逗号隔开。 2.定义网页的编码方式 meta标记可以用来告诉浏览器使用什么字符集显示网页内容。这样浏览器就可以正确地选择字符集,而不需要人工选择。定义网页的编码方式格式如下: <meta http-equiv="Content-Type" content="text/html; charset=字符集类型"> 其中,http-equiv表示传送HTTP通信协议的头,而在content中是具体的属性值。每个属性都是由name和value两部分组成的,并且其格式总是name="value"。charset用于设置网页的字符编码类型,简体中文设置为gb2312,英文设置为ISO-8859-1,此外,还有其他的字符集,如utf-8(网页不管使用什么语言都适用)。 3.定义网页的定时跳转 有些情况下,一个网页需要自动跳转到其他网页中,这就是网页的定时跳转。定义网页的定时跳转格式如下: <meta http-equiv="refresh" content="跳转时间;URL=跳转的页面地址"> 其中,refresh设置网页的刷新,content中给出了刷新的时间和刷新后的页面地址,时间和地址之间用分号隔开。默认情况下,跳转时间以秒为单位。 【例1-1】编写2个网页:first.html和second.html。将2个网页放在同一目录下,运行效果如图1-1和1-2所示。网页编写要求如下: (1)first.html页面的字符编码是utf-8,second.html网页的字符编码是gb2312。 (2)打开first.html页面5秒钟后自动跳转到sencond.html页面。 图1-1 first.html页面运行效果 图1-2 second.html页面运行效果 first.html页面的代码如下: <html> <head> <title>first.html</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_38969618

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值