专栏首页畅所欲言记录HTML网页调用引入CSS,JS方式

记录HTML网页调用引入CSS,JS方式

记录html网页调用引入js或css代码或文件,防止以后忘记,如有不对或补充,请在下面留言,谢谢!

CSS方式

内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。

示例:

  1. <div style="background: red"></div>

嵌入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。

示例:

  1. <head>
  2. <style>
  3. .mom1 {
  4. background: red;
  5. }
  6. </style>
  7. </head>
  8. <style type="text/css">
  9. .mom1 {
  10. background: red;
  11. }</style>

链接方式指的是使用 HTML 头部的 <head> 标签引入外部的 CSS 文件。

示例:

  1. <head>
  2. <link rel="stylesheet" type="text/css" href="/style.css">
  3. </head>

导入方式指的是使用 CSS 规则引入外部 CSS 文件。

示例:

  1. <style>
  2. @import url(style.css);
  3. </style>

引入外部的 CSS 文件的方式,下面我们来比较这两种方式,并且说明为什么不推荐使用 @import。

  1. link 属于 HTML,通过 <link> 标签中的 href 属性来引入外部文件,而 @import 属于 CSS,所以导入语句应写在 CSS 中,要注意的是导入语句应写在样式表的开头,否则无法正确导入外部文件;
  2. @import 是 CSS2.1 才出现的概念,所以如果浏览器版本较低,无法正确导入外部样式文件;
  3. 当 HTML 文件被加载时,link 引用的文件会同时被加载,而 @import 引用的文件则会等页面全部下载完毕再被加载;

JavaScript方式

1示例:

  1. <script>
  2. alert("你好!")
  3. </script>

2示例:

  1. <script src="mom1.js"></script>

3示例:

  1. <script type="text/javascript">alert("你好!")</script>

4示例:

  1. <script language=javascript>alert("你好!")</script>

px: 如有不对或补充,请在下面留言,谢谢!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 宝塔面板7.4.2及Windows面板6.8数据库鉴权漏洞 – 官方发布紧急安全更新

    据了解,此次更新是为了修复phpmyadmin未鉴权,可通过特定地址直接登陆数据库的严重Bug。存在安全漏洞的面板据悉为linux面板7.4.2版本,Windo...

    陌涛
  • 41个Web开发者都收藏的实用代码

    在文件的根目录放进去这个图片,后缀修改成ico就可以了         6.可以在收藏夹中显示出你的图标

    陌涛
  • Linux常用配置及硬件检测命令

    一些比较常见的linux命令,主要用于检测服务器的配置和硬件信息,包括:操作系统、CPU、内存、硬盘分区、系统时间、负载、网络相关、进程、用户、开关机、启动等方...

    陌涛
  • ICRA 2018奖项全公布,中国香港大学团队获最佳会议论文

    ICRA 2018 本周于澳大利亚布里斯班举行。随着会议议程的推进,今天也迎来了本次大会的重头戏——ICRA 相关奖项的颁布仪式

    AI科技评论
  • 【DB笔试面试439】以下SQL语句的作用是:()

    SELECT COUNT(*) FROM T_USERS WHERE ID <> 0;

    小麦苗DBA宝典
  • Linux------3

    py3study
  • 2G成"犯罪温床",动态验证码成为安全漏洞,几分钟银行卡被掏空

    但一旦你为了享受便利而交出了你的个人信息,你就要面临你的全部信息随时有可能被不法分子掌握,进而侵害你的利益,这就如同一把双刃剑。

    悲了伤的白犀牛
  • 和MNSIT打个招呼

    作为深度学习的入门数据集,MNIST是个很好的选择,我们可以在官网 http://yann.lecun.com/exdb/mnist/下载。

    代号404
  • 真·降维打击:这篇SIGGRAPH 2020论文帮你「想象」三维生物眼里的四维空间

    四维空间是什么?三个空间维度加一个时间维度?不,那是四维时空,跟四维空间是两个不同的概念。

    机器之心
  • 文件管理工具Zotero入门介绍

    Zotero 是一款开源免费的文献管理软件,作为 Firefox 浏览器插件起家,在浏览器文献智能导入、PDF 元数据抓取方面具有优势。使用一段时间之后,发现用...

    PyStaData

扫码关注云+社区

领取腾讯云代金券