如何在HTML中使用CSS和Javascript

By | 10月 17, 2021
0 Comment

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