美文网首页🌏Web前端开发
No.6 CSS、JavaScript引入方式

No.6 CSS、JavaScript引入方式

作者: testleaf | 来源:发表于2019-12-31 14:10 被阅读0次

一、CSS引入方式

1.行内样式表(行内式)

行内样式表(内联样式表)是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式。

<div style="color: red; font-size: 12px;">行内样式表</div>

style 其实就是标签的属性;
在双引号中间,写法要符合 CSS 规范;
可以控制当前的标签设置样式;
由于书写繁琐,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加简单样式的时候,可以考虑使用;
使用行内样式表设定 CSS,通常也被称为行内式引入;

2.内部样式表(嵌入式)

内部样式表(内嵌样式表)是写到html页面内部. 是将所有的 CSS 代码抽取出来,单独放到一个 <style> 标签中。

<style>
    div {
        color: red;
        font-size: 12px;
    }
</style>

<style> 标签理论上可以放在 HTML 文档的任何地方,但一般会放在文档的<head>标签中;
通过此种方式,可以方便控制当前整个页面中的元素样式设置;
代码结构清晰,但是并没有实现结构与样式完全分离;
使用内部样式表设定 CSS,通常也被称为嵌入式引入,这种方式是我们练习时常用的方式;

3.外部样式表(链接式)

实际开发都是外部样式表。适合于样式比较多的情况。核心是:样式单独写到CSS 文件中,之后把CSS文件引入到 HTML 页面中使用。

引入外部样式表分为两步:

  1. 新建一个后缀名为 .css 的样式文件,把所有 CSS 代码都放入此文件中。
  2. 在 HTML 页面中,使用<link> 标签引入这个文件。
<link rel="stylesheet" href="css文件路径">

使用外部样式表设定 CSS,通常也被称为外链式或链接式引入,这种方式是开发中常用的方式。

二、JavaScript引入方式

1.行内式 JS

<input type="button" value="点我试试" onclick="alert('Hello World')" />

可以将单行或少量 JS 代码写在HTML标签的事件属性中(以 on 开头的属性),如:onclick;
注意单双引号的使用:在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号;
可读性差, 在html中编写JS大量代码时,不方便阅读;
引号易错,引号多层嵌套匹配时,非常容易弄混;
特殊情况下使用

2.内嵌 JS

<script>
    alert('Hello  World!');
</script>

可以将多行JS代码写到 <script> 标签中;
内嵌 JS 是学习时常用的方式;

3.外部 JS文件

<script src="my.js"></script>

利于HTML页面代码结构化,把大段 JS代码独立到 HTML 页面之外,既美观,也方便文件级别的复用;
引用外部 JS文件的 script 标签中间不可以写代码;
适合于JS 代码量比较大的情况;

相关文章

  • No.6 CSS、JavaScript引入方式

    一、CSS引入方式 1.行内样式表(行内式) 行内样式表(内联样式表)是在元素标签内部的 style 属性中设定 ...

  • JavaScript之引入方式

    JavaScript的引入方式 JavaScript文件的引入方式与CSS引入方式类似,主要也是分为三种:标签内联...

  • JavaScript的变量,引入,值类型、运算符

    JavaScript的引入方式: 页面引入:JavaScript不同于css 他可以在页面的任意地方嵌入代码块 外...

  • Bootstrap小试牛刀之引入框架

    引入css: 引入javascript: 移动设备优先说明:

  • JavaScript

    JavaScript的引入方式 内部引入方式 外部引入方式 JavaScript的组成: ECMAScript:J...

  • 父子组件/Render/网络连接

    父子组件 引用文件 所谓的CDN方式引入,就是平时我们所说的用链接引入JavaScript和CSS方法 rende...

  • css3基础入门

    前端三层 结构层 HTML样式层 CSS行为层 JavaScript CSS 四种引入方式 行内式在 HTML 中...

  • JS相关概念

    CSS和JS在网页中的放置顺序是怎样的? html文件是自上而下的执行方式,但引入的css和javascript的...

  • Vue中引入css javascript文件

    在vue文件中引入css 以及javascript

  • CSS基础(一)

    1.CSS 的引入方式有哪些? CSS 的引入方式有以下三种: 行内样式使用style属性引入CSS样式。 内部样...

网友评论

    本文标题:No.6 CSS、JavaScript引入方式

    本文链接:https://www.haomeiwen.com/subject/aovboctx.html