1》引入js

我们只是写了简单必须的html标签,从未给标签添加点击事件,这次页面添加事件.

》写入html页面,可以在<head>标签内  也可以在<body>标签内

 <!DOCTYPE html>
<html>
<head>
<title>小娜娜</title>
<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script>
</head>
<body>
<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script>
<div>
这是main内容
</div>
</body>
</html>

》写在js文件内

你想啊,当js逻辑过多的时候  html中js代码过多,页面杂乱不说,维护修改起来特别不方便,于是 聪明的人类把 js代码与html代码分离出来了,

把代码写入以.js文件结尾的文件内,html页面引入外部js文件即可

 <!DOCTYPE html>
<html>
<head>
<title>小娜娜</title>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> //引入外部js文件
</head>
<body>
<div>
这是main内容
</div>
</body>
</html>

2》引入css样式【同上js】

不同之处在于,各自所用的标签不一样   css=》</style>标签   js=》<script>标签

 <html>
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head> <body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>
</html>

外部css文件,以.css结尾文件

 <html>
<head>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
......
</body>
</html>

ok

【html】【2】html引入外部文件js css的更多相关文章

  1. 【jsp】怎么在jsp文件中引入静态文件(.js .css)

    如果在jsp文件中引入静态文件比如(.js或.css等等),可以在使用 /项目名称/路径 的方式,但是这种方式如果在修改了项目了名称后就显得比较麻烦了.除了之外还许多方式,比如相对路径等等.一般情况下 ...

  2. Vue项目中引入外部文件(css、js、less)

    例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步 ...

  3. vue3+typescript引入外部文件

    vue3+typescript中引入外部文件有几种方法 (eg:引入echarts) 第一种方法: 1 indext.html中用script引入 <div id="app" ...

  4. 引入外部文件的时候为什么省略http:

    [摘要]相信很多时候大家在使用网上的实例代码的时候,需要引入外部文件,然而它们通常都是省略了http:,这是为什么呢? 先给大家看一个简单的小例子,引入外部jquery文件: <script s ...

  5. nginx 引入外部文件

    http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $ ...

  6. postman通过引入外部文件实现参数化

    postman可通过引入外部文件进行参数化 目录 1.准备好接口信息 2.设置 1.准备好接口信息 这里的usr和psw是要参数化的对象 2.设置 文件准备 添加文件,并设置好循环次数即可

  7. js 引入外部文件之 script 标签

    在我的理解看来,html 就是一个单纯的管显示问题,js就是单纯的管动作问题,css就是单纯的管布局问题,这三个构成了一个网页 在HTML中,经常会用到引入js 文件. 引入js的方法很简单: 1. ...

  8. react如何引入外部文件的整理

    1 引入组件 首先就应该是安装了,安装在环境中后通过 import { Select, Button, Icon, QueueAnim } from 'antd'; 就可以把需要的组件引用进来了~ 2 ...

  9. HTML引入外部文件,解决统一管理导航栏问题。

    1.IFrame引入,看看下面的代码     <IFRAME NAME="content_frame" width=100% height=30 marginwidth=0 ...

随机推荐

  1. java JdbcTemplate源码

    package com.wl.filter; package org.javaresearch.jerch; import java.lang.reflect.Method; import java. ...

  2. WP8模拟器需要BIOS开启虚拟化支持(转载)

    在BIOS里启用hypervisor和virtualization,然后安装WP8 SDK. 如果出现“当前用户未添加到Hyper-V管理组时”, 以管理员身份运行CMD: net localgrou ...

  3. WebSocket学习笔记IE,IOS,Android等设备的兼容性问

    WebSocket学习笔记IE,IOS,Android等设备的兼容性问 一.背景 公司最近准备将一套产品放到Andriod和IOS上面去,为了统一应用的开发方式,决定用各平台APP嵌套一个HTML5浏 ...

  4. [4X]荣耀畅玩4X开箱实录

    http://www.jianshu.com/p/8d171c389ee8 文字都在简书里面啦~~

  5. JavaScript---网络编程(10)--DHTML技术演示(3)-多选框

    这节讲述多选框的使用,当然,肯定是结合css和Javascript一起的. checkbox的使用1: 演示代码: <html> <head> <meta http-eq ...

  6. (DT系列六)devicetree中数据和 struct device有什么关系

    devicetree中数据和structdevice有什么关系 总体来说,devicetree与structdevice的关系应该还是在其生成platformdevice的时候,一直传递的struct ...

  7. php 写一个水仙花数的函数

    判断一个数是不是水仙花数 <?php function is_shuixianhua($i) { $length=strlen($i); $i=(string)$i; $sum=0; for($ ...

  8. Let's Encrypt+Apache+Tomcat实现免费HTTPS

    Let's Encrypt是一个免费SSL证书发行项目,发行的证书已经获得主流浏览器的支持,亲测谷歌浏览器(桌面版).火狐浏览器(桌面版).UC浏览器(手机版).360浏览器(手机版)支持,其它的暂没 ...

  9. 关于PHP程序员解决问题的能力

    这个话题老生长谈了,在面试中必然考核的能力中,我个人认为解决问题能力是排第一位的,比学习能力优先级更高.解决问题的能力既能看出程序员的思维能力,应变能力,探索能力等,又可以看出他的经验.如果解决问题能 ...

  10. ABAP提示信息对话框

     1.   call function 'POPUP_TO_CONFIRM_WITH_MESSAGE'         exporting           diagnosetext1 = '数据为 ...