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. 搭建go语言idea开发环境

    1.首先下载golang安装包,并配置好环境变量,此处略去相关操作,可能需要搭梯子. 2.下载idea golang插件,并安装: 下载地址如下: https://plugins.jetbrains. ...

  2. 高尔夫 之 TEE

    黑色:男子职业选手蓝色:男子业余高手.女子职业选手白色:男子初学球手.老年球手.女子业余高手红色:女子选手金色:有的球场做为介于 黑Tee (职业球员)与 蓝Tee (业余高手)之间的Tee 台:有的 ...

  3. idea 15破解方法记录

    So easy! Only one step.     注册时选择 License server ,填 http://idea.lanyus.com  对于Clion等同样适用.

  4. fiddler 路由设置

    REGEX:^http://data.51buy.com/biz/oppmsmobile/web/js/app/(.+)/(.+).js E:\svns\new\dev\webapp\data_ics ...

  5. 一个参数引起的mysql从库宕机血案

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://suifu.blog.51cto.com/9167728/1859252 一个参数 ...

  6. Bootstrap相关的网站

    http://www.bootcss.com/ http://expo.bootcss.com/ http://www.webresourcesdepot.com/20-beautiful-resou ...

  7. 原生javascript实现图片放大镜效果

    当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...

  8. Ubuntu16.04安装GTK3主题:OSX-Arc

    Ubuntu16.04安装GTK3主题:OSX-Arc GTK3主题:OSX-Arc描述: 前几个月,Gnome3.20升3.22的时候,出现了大量主题崩溃的现象,其中包括Arc.Flatabulou ...

  9. 一个web应用的诞生--使用模板

    经过了第一章的内容,已经可以做出一些简单的页面,首先用这种方式做一个登录页面,首先要创建一个login的路由方法: @app.route("/login",methods=[&qu ...

  10. [html5] 学习笔记-SVG

    1.SVG介绍:什么是SVG? 1)SVG指可伸缩矢量图形(Scalable Vector Graphics) 2)SVG用来定义用于网络的基于矢量的图形 3)SVG使用XML格式定义图形 4)SVG ...