如何在HTML中使用CSS和Javascript

By | 10月 17, 2021

1. 添加CSS

CSS用于控制HTML标签的样式,可以看作是页面的皮肤。换一个样式,既是换一个皮肤。

1.1 引用外部CSS

在<head>里使用<link>标签引用一个外部的CSS文件,CSS文件应以 .css 结尾。特点:共享,任何网页引用它就能使用;与HTML分离,便于开发维护。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

1.2 内嵌<style>标签

可以在HTML任何位定义<style>标签,<style>标签内部写CSS code,通常<style>标签定义在<head>里。特点:只能对当前页面使用,不能共享。

<style type=”text/css”>,属性type可以省略,默认就是”text/css”。

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    background-color: linen;
  }
  h1 {
    color: maroon;
    margin-left: 40px;
  }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

如果一个属性同时在引入的CSS文件和<style>标签里定义了,最后哪一个生效取决于谁后定义,后面定义的会生效。

假设mystyle.css里,把<h1>设置为蓝色,下面的代码<h1>会显示为黄色。

<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
  <style>
    h1 {
      color: orange;
    }
  </style>
</head>

调换下顺序,则<h1>显示为蓝色。

<head>
  <style>
    h1 {
      color: orange;
    }
  </style>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

1.3 内联CSS样式

给HTML标签,添加style属性,样式定义在style属性里。特点:仅对当前元素有效,优先级最高,可以覆盖CSS文件或<style>里的同属性定义。

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>

2. 添加JavaScript

HTML本身没有逻辑处理能力,JavaScript作为脚本语言,使得网页可以动态显示和具有交互性。常用的操作有:图片控制,用户输入校验,动态修改标签等。

2.1 <script>

<script>
console.log('hello world');
</script>

上面代码嵌入网页,会立即执行。

<script>也可以加载外部脚本,src属性给出外部脚本的地址。下面代码会加载javascript.js脚本文件,并执行。

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

type可以设置成module,表示这是一个ES6模块,而不是一个传统脚本。

<script type="module" src="main.js"></script>

一些其它常用的属性:

  • async:该属性指定 JavaScript 代码为异步执行,不是造成阻塞效果,JavaScript 代码默认是同步执行。
  • defer:该属性指定 JavaScript 代码不是立即执行,而是页面解析完成后执行。
  • crossorigin:如果采用这个属性,就会采用跨域的方式加载外部脚本,即 HTTP 请求的头信息会加上origin字段。
  • integrity:给出外部脚本的哈希值,防止脚本被篡改。只有哈希值相符的外部脚本,才会执行。

2.2 <noscript>

<noscript>标签用于浏览器不支持或关闭 JavaScript 时,所要显示的内容。用户关闭 JavaScript 可能是为了节省带宽,以延长手机电池寿命,或者为了防止追踪,保护隐私。

<noscript>
  您的浏览器不能执行 JavaScript 语言,页面无法正常显示。
</noscript>
Category: SWT