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. bzoj2049

    2049: [Sdoi2008]Cave 洞穴勘测 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 7579  Solved: 3548[Submit] ...

  2. UVa 10718 - Bit Mask

    题目大意:给一数N,在区间[L, U]上找到一个数M使得M| N的值最大,如果有M有多个可能值,取最小的那个值. 从最高位开始逐位判断,如果N的该位为0,为使M | N的值最大,M的该位应考虑置为1, ...

  3. fiddler 路由设置

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

  4. tomcat 安全文件夹（Java之负基础实战）

    tomcat 解析网站的时候,会寻找一个文件叫  WEB-INF 这些文件外部无法访问

  5. Java经典案例之-“成绩等级划分”

    /** * 描述:在对话框中输入学习成绩,利用条件运算符的嵌套来完成此题:学习成绩>=90分的同学用A表示,60-89分之间的用B表示, * 60分以下的用C表示. * 分析:可以利用三目运算符 ...

  6. Android4.0新增的网格布局

    网格布局由GridLayout代表,它是Android 4.0新增的布局管理器,因此需要在Android 4.0 之后的版本中才能使用该布局管理器.如果希望在更早的Android平台上使用该布局管理器 ...

  7. Express4.x安装

    1.首先肯定是要安装Node.JS npm install -g expressnpm install -g express-generator 运行express -V输出 4.9.0 2.创建一个 ...

  8. MyBatis 模糊查询

    <!--${}是不进行预编译的,会直接进行sql语句的拼接:{}中的内容必须通过Map或者查询对象中获得--><select id="selectPersonByName& ...

  9. 配置FMS发布/HDS/HLS流

    一.前言 安装完FMS4.5以后就有了apache2.2,由于在FMS安装目录里面,他是对外面已经安装的是没有影响的,默认情况向, FMS监听80端口接收traffic然后传递给Apache的8134 ...

  10. jsp+servlet+javaBean+Dao

    一.Servlet程序各模块介绍1.JSP 用于显示.收集数据的部分.2.Servlet 用于验证数据.实例化JavaBean.调用DAO连接数据库.控制页面跳转3.DAO 用于连接数据库及进行数据库 ...