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. 大数据全栈式开发语言 – Python

    前段时间,ThoughtWorks在深圳举办一次社区活动上,有一个演讲主题叫做“Fullstack JavaScript”,是关于用JavaScript进行前端.服务器端,甚至数据库(MongoDB) ...

  2. windows(win10)下的mysql解压版安装

    1. 到mysql官网 下载mysql : http://dev.mysql.com/downloads/mysql/   ,会提示登陆,注册一个就行了,公司名什么的随便填. 注意区分32,64位.我 ...

  3. 详解Grunt插件之LiveReload实现页面自动刷新（两种方案）

    http://www.jb51.net/article/70415.htm    含Grunt系列教程 这篇文章主要通过两种方案详解Grunt插件之LiveReload实现页面自动刷新,需要的朋友可以 ...

  4. Repeated Substring Pattern Leetcode

    Given a non-empty string check if it can be constructed by taking a substring of it and appending mu ...

  5. 在Delphi中隐藏程序进程

    在开发某些软件的时候,为了保护程序自身,就需要用到隐藏程序进程.以下通过实例来讲解隐藏程序进程的方法: 1.创建一个新的项目 Project1 选择File,New Application.在表单Fo ...

  6. jpg图片在开发板上显示

    文件IO项目: 在开发板屏幕上循环显示目录里的图片 a.按照一定的间隔循环显示目录里的bmp图片 b.实现手指滑动来显示目录里的图片(bmp,jpg)上一张,下一张 d1: 1.能操控屏幕(查询开发板 ...

  7. firefox-Developer开发者站点——关于Object.create()新方法的介绍

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create Objec ...

  8. js原生继承之——原型式继承实例

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  9. RadioGroup

    获取选中的Text radioGroup1.Properties.Items[radioGroup1.SelectedIndex].Description

  10. C# out的使用 函数例题

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...