HTML中怎么插入CSS和JS等辅助工具??

HTML中怎么插入CSS和JS等辅助工具??,第1张

1、使用CSS(层叠样式表)

如何使用样式

浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表:

外部样式表

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

<head>

<link rel="stylesheet" type="text/css" href="mystylecss">

</head>

内部样式表

当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

<head>

<style type="text/css">

body {background-color: red}

p {margin-left: 20px}

</style>

</head>

内联样式

当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">

This is a paragraph

</p>

2、使用脚本

HTML script 元素

<script> 标签用于定义客户端脚本,比如 JavaScript。

script 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。

必需的 type 属性规定脚本的 MIME 类型。

JavaScript 最常用于操作、表单验证以及内容动态更新。

下面的脚本会向浏览器输出“Hello World!”:

<script type="text/javascript">

documentwrite("Hello World!")

</script>

提示:如果需要学习更多有关在 HTML 中编写脚本的知识,请访问我们的 JavaScript 教程。

<noscript> 标签

<noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。

noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

只有在浏览器不支持脚本或者禁用脚本时,才会显示 noscript 元素中的内容:

<script type="text/javascript">

documentwrite("Hello World!")

</script>

<noscript>Your browser does not support JavaScript!</noscript>

如何应付老式的浏览器

如果浏览器压根没法识别 <script> 标签,那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生,你应该将脚本隐藏在注释标签当中。那些老的浏览器(无法识别 <script> 标签的浏览器)将忽略这些注释,所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们,即使代码被嵌套在注释标签内。

实例

JavaScript:

<script type="text/javascript"><!--documentwrite("Hello World!")//--></script>VBScript:

<script type="text/vbscript"><!--documentwrite("Hello World!")'--></script>

JSP跟JS其实没有任何关系,全是区别JSP

JSP全名为Java Server Pages,中文名叫java服务器页面,其根本是一个简化的Servlet设计,它[1]  是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术,它是在传统的网页HTML(标准通用标记语言的子集)文件(htm,html)中插入Java程序段(Scriptlet)和JSP标记(tag),从而形成JSP文件,后缀名为(jsp)。 用JSP开发的Web应用是跨平台的,既能在Linux下运行,也能在其他操作系统上运行。

它实现了Html语法中的java扩展(以 <%, %>形式)。JSP与Servlet一样,是在服务器端执行的。通常返回给客户端的就是一个HTML文本,因此客户端只要有浏览器就能浏览。

JSP技术使用Java编程语言编写类XML的tags和scriptlets,来封装产生动态网页的处理逻辑。网页还能通过tags和scriptlets访问存在于服务端的资源的应用逻辑。JSP将网页逻辑与网页设计的显示分离,支持可重用的基于组件的设计,使基于Web的应用程序的开发变得迅速和容易。 JSP(JavaServer Pages)是一种动态页面技术,它的主要目的是将表示逻辑从Servlet中分离出来。

Java Servlet是JSP的技术基础,而且大型的Web应用程序的开发需要Java Servlet和JSP配合才能完成。JSP具备了Java技术的简单易用,完全的面向对象,具有平台无关性且安全可靠,主要面向因特网的所有特点。

JavaScript 

JavaScript是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。[1] 

为了取得技术优势,微软推出了JScript,CEnvi推出ScriptEase,与JavaScript同样可在浏览器上运行。为了统一规格,因为JavaScript兼容于ECMA标准,因此也称为ECMAScript。

所以,除了凑巧缩写有重合之外,JSP和JS并没有实质上的关联,JSP要在服务器端运行的,JS是在客户浏览器执行的。

首先:下载一个JS的日期组件,带封装。

然后:建一个日期类文件CalendarBoxcs代码如下:

using System;

using SystemCollectionsGeneric;

using SystemComponentModel;

using SystemText;

using SystemWeb;

using SystemDrawing;

using SystemWebUI;

using SystemWebUIWebControls;

using SystemWebUIHtmlControls;

[assembly: WebResource("WisesoftWebControlWisesoftCalendarcalendarjs", "application/x-javascript", PerformSubstitution=true)]

namespace WisesoftWebControl

{

[ToolboxBitmap(typeof(CalenderBox), "WisesoftCalendarCalendarBoxico")]

public class CalenderBox : TextBox

{

protected override void OnPreRender(EventArgs e)

{

string calendar = CalenderCSSCSS;

calendar = calendarReplace("$ImaginURL$", thisImaginURL);

if (!PageClientScriptIsClientScriptBlockRegistered("_calendar"))

PageClientScriptRegisterClientScriptBlock(typeof(string), "_calendar", calendar);

thisPagePreRenderComplete += new EventHandler(Page_PreRenderComplete);

thisCssClass = "Wdate";

thisAttributesAdd("onfocus","setday(this)");

thisAttributesAdd("onchange", "checkDate(thisvalue)");

baseOnPreRender(e);

}

void Page_PreRenderComplete(object sender, EventArgs e)

{

PageClientScriptRegisterClientScriptResource(thisGetType(), "WisesoftWebControlWisesoftCalendarcalendarjs");

}

///// <summary>

/// 弹出日期控件小的地址

/// </summary>

[Bindable(true)]

[Category("图标设置")]

[DefaultValue("imagin/calendergif")]

[Localizable(true)]

public string ImaginURL

{

get

{

String s = (String)ViewState["ImaginURL"];

return ((s == null) "imagin/calendergif" : s);

}

set

{

ViewState["ImaginURL"] = value;

}

}

///// <summary>

/// 设置日期,时间的初始格式。

/// </summary>

[Bindable(true)]

[Category("初始化设置")]

[DefaultValue(false)]

[Localizable(true)]

public bool ShowTime

{

get

{

bool s = (bool)ViewState["ShowTime"];

if (ViewState["ShowTime"] != null)

{

return s;

}

return false;

}

set

{

ViewState["ShowTime"] = value;

}

}

///// <summary>

/// 注样式文件

/// </summary>

/// <param name="path"></param>

private void RegisterCssFile(string path)

{

HtmlLink link1 = new HtmlLink();

link1Attributes["type"] = "text/css";

link1Attributes["rel"] = "stylesheet";

link1Attributes["href"] = path;

thisPageHeaderControlsAdd(link1);

}

}

}

注意:[assembly: WebResource("WisesoftWebControlWisesoftCalendarcalendarjs", "application/x-javascript", PerformSubstitution=true)]是用来封装你的JS文件,要使用你项目的名字加上你JS文件的名字,还需要将你的JS文件做一点设置,点右件,选择属性--->然后选择高级,选择生成操作-->选择嵌入的资源,这样才能将JS文件封装进去,当然如果有或者是CSS文件也是一样的。

再看

void Page_PreRenderComplete(object sender, EventArgs e)

{

PageClientScriptRegisterClientScriptResource(thisGetType(), "WisesoftWebControlWisesoftCalendarcalendarjs");

}

是在页面呈现之前将你的JS文件注册到页面上。

[Bindable(true)]

[Category("图标设置")]

[DefaultValue("imagin/calendergif")]

[Localizable(true)]

是利用反射的元数据信息,来设置属性。就是给你的日期控件旁边加上个小图标,把它做成一个属性,可以让程序员自定义设置,也可以把它继承进去。

好了,这样就可以把JS文件封装好了,再来看看CSS文件如何封装并写入客户端。

我们可以看见下面有一个方法,

///// <summary>

/// 注样式文件

/// </summary>

/// <param name="path"></param>

private void RegisterCssFile(string path)

{

HtmlLink link1 = new HtmlLink();

link1Attributes["type"] = "text/css";

link1Attributes["rel"] = "stylesheet";

link1Attributes["href"] = path;

thisPageHeaderControlsAdd(link1);

}

它就是用来注册你的CSS文件的,大家都知道在我们的页面代码里面是<link href="StyleSheetcss" rel="stylesheet" type="text/css" />引入外部样式文件。这个方法就是达到这个目的。那么我们现在还没有样式文件。

因此我们就必须建立一个CSS,然后把它设置一下(和JS的设置方式一样)。再到void Page_PreRenderComplete(object sender, EventArgs e)方法调用就可以了,但是还有其他方法,我们来介绍第二种(对JS文件也可以这样使用),建立一个CalendarCSScs文件,代码如下:

using System;

using SystemCollectionsGeneric;

using SystemText;

namespace WisesoftWebControl

{

public class CalenderCSS

{

public static string CSS = @"<style type=""text/css"">

Wdate{

border:#999 1px solid;

height:18px;

background:url($ImaginURL$) no-repeat right;

}

WdateFmtErr{

font-weight:bold;

color:red;

}

</style>";

}

}

这个类其实是将我们的CSS文件,写为一个字符串形式,然后供主函数调用,以注册到客户端使用。

那么我们再看看CalendarBoxcs文件里的这段代码

string calendar = CalenderCSSCSS;

calendar = calendarReplace("$ImaginURL$", thisImaginURL);

if (!PageClientScriptIsClientScriptBlockRegistered("_calendar"))

PageClientScriptRegisterClientScriptBlock(typeof(string), "_calendar", calendar);

它就是将我们已经写好的一段字符串以快的形式注册到客户端(当然还有更多的注册方式,可以在MSDN看看ClientScript类)。

好了,基本上就可以使用了。

JSP与JavaScript(JavaScript的缩写就是js)之间的一些主要区别:

1、Java Server Pages是一种动态网页技术,而JavaScript是一种脚本语言,可以使静态HTML内容

成为动态。

2、Java Server Pages具有在HTML之间添加Java代码的scriptlet,而JavaScript具有许多内置

函数,可以使用基于面向对象编程模型中基于原型模式的继承的JavaScript对象来修改数据。

3、Java Server Pages具有JSTL支持以处理一些复杂的功能,而JavaScript具有不同的数据类

型,如Boolean,Number,String,Date,Math,HTML DOM和RegExp等,

4、Java Server Pages几乎支持所有Web浏览器,而JavaScript不支持跨浏览器功能,导致在

浏览器更改期间执行少量功能的失败导致不利。

5、Java Server Pages将通过Web服务器从后端呈现和提供,而JavaScript是一种脚本语言,

可以在客户端和服务器端使用,或者在浏览器端或客户端使用,其中代码将由内部编译。 

JavaScript内置编译器称为JIT编译器,然后它将在浏览器中解释,模块的执行稍后在客户端环

境(即浏览器)上发生。

6、Java Server Pages具有JSR规范,这是Oracle的标准,而JavaScript具有最新标准,称为

ES 9(ECMAScript标准),支持其编程模型中的高级功能方面和几个高阶函数。

7、Java Server Pages在开发复杂功能方面存在局限性,而JavaScript有一个标准规范,可以

使用JS强大的函数编程方面来操作复杂模块。

8、Java Server Pages在Web容器中具有JSP隐式对象功能,而JavaScript具有可通过使用let

关键字在ES 6标准中使用的提升功能。

9、Java Server Pages支持表达式语言(EL),它提供对Java对象中的函数和数据的访问,而

JavaScript具有隐式原型引用,用于引用JS对象中的数据。

10、Java Server Pages有JSP编译器,它将JSP转换为Servlet来解释网页内容和显示,而

JavaScript有Javascript解释器来解析称为Javascript引擎的代码。

扩展资料:

JavaScript的优点

1、速度。客户端JavaScript非常快,因为它可以在客户端浏览器中立即运行。除非需要外部资

源,否则JavaScript不会受到后端服务器的网络调用的阻碍。它也没有必要在客户端编译,这

给了它一定的速度优势(授予,增加一些风险取决于所开发代码的质量)。

2、简单。JavaScript的学习和实现相对简单。

3、人气。JavaScript在Web中随处可用。学习JavaScript的资源很多。StackOverflow和

GitHub有许多使用Javascript的项目,并且语言作为一个整体近年来在业界获得了很大的关

注,尤其是。

4、互操作性。JavaScript可以很好地与其他语言一起使用,并且可以在各种各样的应用程序中

使用。与PHP或SSI脚本不同,JavaScript可以插入任何网页,无论文件扩展名如何。

JavaScript也可以在用其他语言编写的脚本中使用,例如Perl和PHP。

5、服务器负载。客户端减少了对网站服务器的需求。

6、丰富的接口。拖放组件或滑块可为您的网站提供丰富的界面。

7、扩展功能。像Greasemonkey这样的第三方附加组件使JavaScript开发人员能够编写可以在

所需网页上执行以扩展其功能的JavaScript代码片段。

8、多功能性。如今,有许多方法可以通过Nodejs服务器使用JavaScript。如果您使用

Express引导nodejs,使用像mongodb这样的文档数据库,并在前端为客户端使用

JavaScript,则可以仅使用JavaScript从前到后开发整个JavaScript应用程序。

DABAN RP主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
网站模板库 » HTML中怎么插入CSS和JS等辅助工具??

0条评论

发表评论

提供最优质的资源集合

立即查看 了解详情