HTML中使用CSS/JS的三种方法,行内/嵌入式/外链式

使用CSS/JS分为三种方法,

  • 1、行内使用Javascript
  • 2、嵌入式;
  • 3、外联式;
1、行内使用Javascript介绍;

最常用的就是在a标签的href上使用Javascript:;

<a href="javascript:;">链接ZAB</a>

这段代码,就是当点击连接[链接ZAB]的时候,没有任何反应;这是最常用的行内Javascript用法;

如果需要使用点击链接弹窗文字;可以如下的写法;

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
	<div id="div1">
	    <a href="javascript:;">链接ZAB</a>
	    <a href="javascript:;" onclick="alert('这是一段测试代码')">有弹窗的链接</a>
	</div>
  <script>
  function zab(){
    alert("这是一段测试代码")
  }
  </script>
  </body>
</html>

这时候点击连接有弹窗的链接的时候,就会弹窗”这是一段测试代码”的消息提醒;行内使用Javascript的方法,不推荐大家使用,不易维护 ;

2、嵌入式是直接写在HTML页面中的;

下面的,绑定事件的,就是嵌入式的写法;

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<div id="div1">
    <a href="javascript:;" onclick="zab()">222</a>
</div>
<div id="div2">
    <a href="javascript:;">链接ZAB</a>
    <a href="javascript:;">有弹窗的链接</a>
</div>

<script>
    var oDiv=document.getElementById("div2");
    oDiv.onclick=function(){
        zab();
    };
    function zab(){
        alert("这是一段测试代码")
    }
</script>
</body>
</html>
3、外联式;

通过script的src属性引用一个文件;关于script的标签位置,按照传统的做法,是写在head元素中;这种做法的目地是把所有外部文件(CSS,JS)的引用都放在相同的地方;可是如果放在顶部;HTML加载的时候,是从上到下依次解析的;页面加载很多HTL的时候,就会堵塞后面的DOM节点加载;导致页面呈现的内容出现延迟,而延迟期间浏览器窗口将是空白的;为了避免这个问题,现在的WEB一般是全部javascript都放在之前; 还有一点需要注意的,如果放在head中,直接获取元素的时候,是获取不到的;比如获取ID,就是获取不到的;需要做延迟加载才好

  <!doctype html>
  <html>
  <head>
      <meta charset="UTF-8">
      <title>Document</title>
  </head>
  <body>
  <div id="div1">
      <a href="javascript:;">链接ZAB</a>
      <a href="javascript:;">有弹窗的链接</a>
  </div>
  </body>
  <!--嵌入式-->
  <script>
      var oDiv=document.getElementById("div1");
      oDiv.onclick=function(){
          zab();
      };
      function zab(){
          alert("这是一段测试代码")
      }
  </script>
  <!--外链式-->
  < script src="./jquery.js"></script>
  < /html>

所有的javascript会按照它在页面中的顺序来依次解析;一般写在页面内容的后面,推荐放在前,因为放在body前可以通过W3C的校验,如果不为W3C校验,放在后面也是没问题的;

关于行内写JS;

项目中,很少会遇到行内写JS的,工作中我只在给wifi组做支撑的时候见到过这么写的;当时他们的wifi管理页面,用luci lua 一个开源项目修改的,页面的HTML CSS,JS是直接渲染出来的,里面的CSS,JS大都是行内写的,维护起来真的太坑了;我在写JS的时候,把需要我写的JS代码和模块,全部外链式引导页面,把CSS,JS和他们lua代码分开;不和他们的代码掺合在一起,否则以后维护起来就太蛋疼了;

嵌入式与外链式的区别?

在HTML中嵌入javascript代码虽然没有问题,但是一般认为最好的做法还是尽可能使用外部文件来包含javascript代码,不过,并不存在必须使用外链式的规定;但外链式的优点如下

  • 维护性好:JS代码和HTML代码混在一起,维护的时候需要改动HTML页面,而现在为了专注和分工明确,基本都是前后端分离的做法;页面输入都是后端的页面;如果是外链式的,只需要维护自己的JS文件即可,不需要接触HTML文件;

  • 可缓存:浏览器能够具体的设置缓存连接的所有javascript文件,也就是说如果两个页面都使用同一个文件,那么这个文件只需要下载一次,最终结果就是能够加快页面加载的速度(每次上新的时候,修改时间戳即可,);

    a.xxx.com/project/test.js?t=2016101301 (?t=2016101301 就是时间戳)

  • 适用未来:XHTML和HTML文件会出现javascript代码解析方面的差异;因为外链式不需要接触XHTML/HTML所以不存在这些问题; 注意,在使用嵌入式写法的时候,不要标签内任何地方都不要出现< script >的字符串;即使是alert,console.log这些输出;如果需要用,请使用转移字符”/”来解决;

HTML外部资源引入
  • href: hypertext reference
  • src: source

href 用于标示资源和文档关系,src 用于替换标签内容

<img src="xxx.jpg"/>
<script type="text/javascript" src="xxx.js"></script>

<a href="http://www.baidu.com">百度</a>

为什么 style不用src

至于说为什么当初就决定外部样式表用link href来链接,而不是用style src来载入,可能是因为第一批互联网人认为样式表更符合外部链接资源的特征,它更接近附属的资源,而不是内嵌的内容。比如考虑alternate stylesheets,在同一时间只需要链接一组样式表,而不是载入所有。当然你可以简单的归结为历史遗留(也就是当初某个浏览器开发者的一个偶然决定导致)。这是一个扯淡的问题,制作标准的人不是中国人,是老外;

其它的一些意外

有些名词是中国第一批程序员,翻译的问题;最明显的一个名次[上下文],就是代码所在的执行环境,英文

context,这个应该翻译成[代码运行环境] 才更符合语义,但是第一批互联网人翻译成中文书,都这么写,然后我们这些小辈们为了统一,也都这么叫了;

在HTTP协议的知识里,有一个叫HTTP Referer的;属于请求头(header)的一部分,当浏览器向web服务器发送请求的时候,一般会带上Referer,告诉服务器我是从哪个页面链接过来的,服务器籍此可以获得一些信息用于处理。

比如从我的博客链接到一个朋友那里,他的服务器就能够从HTTP Referer中统计出每天有多少用户点击我主页上。链接访问他的网站,以前自己倒腾过网站的朋友,在百度统计,55LA统计之类的,会有这方面的统计信息供查看;

这里的Referer其实应该是英文单词referrer,也不知道是拼错的人太多了导致标准跟着拼错,还是编写标准的人拼错了,开发者讲错纠错,反正现在的情况就都写成HTTP Referer了,只能将错就错的写了。历史遗留问题,无解的;

css中的行内、嵌入式、外链式 下面就是css的各种写法;

css1

他的优缺点和js一样;如果简单的样式,可能感觉差不多,但是如果在项目里,重复利用等各方面考虑,还是外链式是最佳选择;

css2

上面这种可以看出最明显的区别;

  • 行内写,每一个标签都需要重复写N多代码,这当然是不明智的;
  • 嵌入式,相比行内,容易维护,但是不能缓存
  • 外链式,相比嵌入式,不仅容易维护,而且还可以缓存;

~~~

未经允许不得转载:朱邦邦的博客 » HTML中使用CSS/JS的三种方法,行内/嵌入式/外链式

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址