HTML文档中使用JavaScript和css

引入css

  • 内嵌式引入：将css代码写在HTML中的style标签里面

    <!DOCTYPE html>
<html>
<head>
<title>关于渐进增强和平稳退化</title>
<style type="text/css">
    #box {
        width: 500px;
        height: 500px;
        border-radius: 25px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        -ms-border-radius: 25px;
        background: red;
    }
</style>
</head>
<body>
<div id="box">

</div>
</body>
</html>
  • 行内引入：在标签内部有style属性，将各个属性写入其中

    <div id="box" style="width:255px;height:250px;background:red;">
  • 外链式引入：将css代码写入专门的css文件中，通过HTML文档中的link标签引入：

    比如在同一文件木下新建有a.html文件和b.css文件，通过b.css文件来设置a.html文档显示的body背景颜色

  • a.html

    <!DOCTYPE html>
<html>
<head>
<title>aHtml</title>
<link rel="stylesheet" type="text/css" href="b.css" />
</head>
<body>
</body>
</html>

  • b.css

    body {
 background:red;
}

    几种引入方式的对比分析

  • 行内式：标签上属性太过繁多，对于大一些的页面难以管理维护，只限于简单已维护的测试页面
  • 嵌入式：虽说在标签之外，但是任然在HTML文档结构之内，限于少量低缓存的使用

  • 外链式：这是目前常见的css、html、js三者分离，易于管理

引入js

  • 行内写入：类似于css的行内写法

    <a href="#" onclick="window.open('http://www.baidu.com','_blank')">Go baidu</a>
  • 嵌入式引入：包含在HTML文档页面的script标签之中
<!DOCTYPE html>
<html>
<head>
    <title>关于渐进增强和平稳退化</title>
    <style type="text/css">
        #box {
            width: 500px;
            height: 500px;
            border-radius: 25px;
            -webkit-border-radius: 25px;
            -moz-border-radius: 25px;
            -ms-border-radius: 25px;
            background: red;
        }
    </style>

</head>
<body>
    <div id="box">

    </div>
    <script type="text/javascript">
        var oBox = document.getElementById("box")
        oBox.onmouseover = function(){
            this.style.backgroundColor = "black";
        }
        oBox.onmouseout = function(){
            this.style.backgroundColor = "red";
        }
    </script>
</body>
</html>
  • 外链式引入：写在单独的javascript文件中，需要使用的时候在script标签中引入

    比如在同一文件目录下新建有a.html文件和b.js文件，通过b.js文件来操作a.html文档
  • a.html
<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
    <title>关于渐进增强和平稳退化</title>
</head>
<body>
    <div id="box">

    </div>
    <script type="text/javascript" src="b.js"></script>
</body>
</html>
  • b.js文件
var oBox = document.getElementById("box");
        oBox.onmouseover = function(){
            this.style.backgroundColor = "black";
        }
        oBox.onmouseout = function(){
            this.style.backgroundColor = "red";
        }

几种引用方式的比较

  • 行内式：不推荐使用，不容易维护，页面太乱
  • 内嵌式：有风险，js是单线程有阻塞的，可能会影响后面的HTML代码资源加载
  • 外链式：维护性好，不需要修改源HTML文档；可缓存，浏览器能够具体的设置缓存连接的所有javascript文件，也就是说如果两个页面都使用同一个文件，那么这个文件只需要下载一次，最终结果就是能够加快页面加载的速度（每次上新的时候，修改时间戳即可，）

HTML文档中使用JavaScript和css的更多相关文章

  1. javascrit2.0完全参考手册(第二版) 第1章第1节 在XHTML文档中增加javascript

    通常,向文档中增加script脚本使用<script>元素,在HTML中增加脚本的方式有4中: (1)放到<script></script>块中: (2)<s ...

  2. HTML文档中应用css样式的方法总结

    在HTML文档中应用css样式大致有三种方法:1.link标签链接外部样式表:2.使用style元素包含样式表:3.使用style属性,即内联样式 一.link标签链接外部样式表 先看一条较为标准的l ...

  3. javaScript获取文档中所有元素节点的个数

    HTML+JS 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  4. IT兄弟连 HTML5教程 CSS3揭秘 在HTML文档中放置CSS的几种方式

    有很多方法将样式表加入到HTML中,每种方法都有自己的优点和缺点.新的HTML元素和属性已被加入,以允许样式表与HTML文档更简易地组合起来.将样式表加入到HTML中的常用方法有内联样式表.嵌入一张样 ...

  5. vim下处理文档中的\r\n\t字符

    问题复现 拿到的文档中包含了大量的\r.\n.\t等字符,形如: \r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\ ...

  6. 将HTML字符转换为DOM节点并动态添加到文档中

    将HTML字符转换为DOM节点并动态添加到文档中 将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术. 字符串转换为DOM节点本身并不难,本篇文章主要涉及两个主题: 1 ...

  7. HTML span标签：用来组合文档中的行内元素

    在DIV+CSS切图布局重构技术中,除了常常使用div标签外也常常使用span标签布局,通常也可以通过对span标签对象设置不同样式实现我们要的美化效果.这里主机吧主要讲的是span标签的定义和用法. ...

  8. 使用jQuery匹配文档中所有的li元素，返回一个jQuery对象，然后通过数组下标的方式读取jQuery集合中第1个DOM元素，此时返回的是DOM对象，然后调用DOM属性innerHTML,读取该元素 包含的文本信息

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. [译]我们应该在HTML文档中何处放script标签

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

随机推荐

  1. Html 定位position

    CSS position属性和实例应用   目前几乎所有主流的浏览器都支持position属性("inherit"除外,"inherit"不支持所有包括IE8和 ...

  2. 最近iOS开发遇到的问题

    1)计算器,编辑框键盘: 2)类间参量引用传递: 3)饼状图: 4)折线图: 5)uicollection使用: 6)富文本开发: 7)separatorInset,layoutMargins uit ...

  3. php redis 函数手册

    Redis::__construct构造函数$redis = new Redis();connect, open 链接redis服务参数host: string,服务地址port: int,端口号ti ...

  4. Angular - - ngReadonly、ngSelected、ngDisabled

    ngReadonly 该指令将input,textarea等文本输入设置为只读. HTML规范不允许浏览器保存类似readonly的布尔值属性.如果我们将一个Angular的插入值表达式转换为这样的属 ...

  5. Android测试点

    记录下之前项目测试中涉及到的Android测试点: 1.APP基本功能 按照back log整理测试用例,测试中发现有需求变动.或未考虑完全,及时更新测试用例. 测试用例包括:全功能点用例+重点功能快 ...

  6. AngularJS中$http服务的简单用法

    我们可以使用内置的$http服务直接同外部进行通信.$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象. 1.链式调用 $http服务是只能接受一个参数的函数,这个参数是一个对 ...

  7. EFCore扩展：IQueryable(linq)或sql执行的查询缓存与清理

    前言 上一篇讲述了执行sql和配置的一些功能,这篇说明IQueryable(linq)或执行sql的查询缓存与清理,包括扩展到将缓存存储到Redis中. 扩展类库源码: github:https:// ...

  8. gevent调度流程解析

    gevent是目前应用非常广泛的网络库,高效的轮询IO库libev加上协程(coroutine),使得gevent的性能非常出色,尤其是在web应用中.本文介绍gevent的调度流程,主要包括geve ...

  9. 前端开发在IOS端遇到的一个诡异问题(Delegate 失效)

    一.前言 最近同事问到一个问题,一个前端页面在IOS端真机测试下出现一个比较诡异的问题,如果没有遇到过估计也是一筹莫展.今天特此记录一下,或许能帮到后面遇到这个问题的朋友少绕一些弯路.这是关于JQue ...

  10. Salesforce的Auto Number

    在Salesforce中新建Object的时候,可以对Name选择Auto Number,即自动编号.如果没有仔细阅读说明的话,会有一个很容易让人迷惑的地方. 在选择时候,Salesforce提供的示 ...