HTML文档中使用JavaScript和css

时间：2022-05-15 00:58:13

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&period;0完全参考手册&lpar;第二版&rpar; 第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下处理文档中的&bsol;r&bsol;n&bsol;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&comma;读取该元素 包含的文本信息

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

  9. &lbrack;译&rsqb;我们应该在HTML文档中何处放script标签

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

随机推荐

  1. 应用商店后台MIS的一些思考

    1.有些签名验证的工作应该在开发者上传APP的时候进行校验: 1)如果是更新新版本(包名packagename一致),那么需要验证两个APK的包的签名是否一致,不一致的,应该限制上传,除非先下架旧的A ...

  2. 谈谈基于OAuth 2&period;0的第三方认证 &lbrack;上篇&rsqb;

    对于目前大部分Web应用来说,用户认证基本上都由应用自身来完成.具体来说,Web应用利用自身存储的用户凭证(基本上是用户名/密码)与用户提供的凭证进行比较进而确认其真实身份.但是这种由Web应用全权负 ...

  3. Eclipse修改编码格式

    ♣修改工作空间默认编码 ♣修改文件的编码 ♣修改某文件类型的编码 ♣修改JSP文件类型的编码 1.修改工作空间默认编码 window -> preferences ->  General ...

  4. flash builder &lpar;fb&rpar; 与flash professional cs6&lpar;fla&rpar; 联合调试

    注意加载的swf名字与项目(fla)名字一致,在fb进行构建,如果fla代码做了修改,保持在fb构建最新.

  5. php curl多线程抓取网页

    PHP 利用 Curl Functions 可以完成各种传送文件操作,比如模拟浏览器发送GET,POST请求等等,受限于php语言本身不支持多线程,所以开发爬虫程序效率并不高,这时候往往需 要借助Cu ...

  6. where can I find source of com&period;android&period;internal&period;R&period;styleable&period;AlertDialog&lowbar;multiChoiceItemLayout&quest;

    I want to modify Alert dialog multi select layout. For my program I want two line multi-select item. ...

  7. android ViewHolder 使用

    android中使用ListView   ExpandableListView  数据适配器adapter很多都是自己定义,自己定义数据适配器时,要重写getView.重写getView为了不让每次调 ...

  8. delete了，析构函数却没有调用

    析构函数在对象的生命结束时,会自动调用,大家所熟知的智能指针就是根据析构函数的这种特性而实现的,包括Qt的内存管理机制,也都是利用了析构函数的这一机制来实现的.c++创始人Bjarne Stroust ...

  9. enote笔记法（2）——why的使用

    章节:why的使用 用法: why 概念|词汇(比概念更一般的形式的keyword)|短语|句子 用法1: why 概念|why keyword([比概念更一般的形式的keyword]) “why 概 ...

  10. textarea高度自适应，随着内容增加高度增加

    $(function(){        $.fn.autoHeight = function(){            function autoHeight(elem){             ...

相关文章