CSS用于控制HTML标签的样式，可以看作是页面的皮肤。换一个样式，既是换一个皮肤。
1.1 引用外部CSS
在<head>里使用<link>标签引用一个外部的CSS文件，CSS文件应以 .css 结尾。特点：共享，任何网页引用它就能使用；与HTML分离，便于开发维护。
<!DOCTYPE html>
<link rel="stylesheet" href="mystyle.css">
</head>
<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>
<style>
body {
background-color: linen;
color: maroon;
margin-left: 40px;
</style>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
如果一个属性同时在引入的CSS文件和<style>标签里定义了，最后哪一个生效取决于谁后定义，后面定义的会生效。
假设mystyle.css里，把<h1>设置为蓝色，下面的代码<h1>会显示为黄色。
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
color: orange;
</style>
</head>
调换下顺序，则<h1>显示为蓝色。
<style>
color: orange;
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
1.3 内联CSS样式
给HTML标签，添加style属性，样式定义在style属性里。特点：仅对当前元素有效，优先级最高，可以覆盖CSS文件或<style>里的同属性定义。
<!DOCTYPE html>
<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
