1.2-JavaScript的三种写法
1-复习CSS代码的三种写法
- 1.外联样式:写在css文件中,使用link导入
<link rel="stylesheet" href="路径/01-css外联样式.css">
- css外联样式的本质其实就是字符串替换 将下方这行代码替换成对应文件的所有代码
- 2.内联样式:写在style标签中,如果界面css样式比较简单可以使用,复杂的话不推荐
<style>.div{background: green;}</style>
- 3.行内样式:不推荐,因为不便于维护
<h1 style="background: green">你认真学习的样子真帅</h1>
2-JS代码三种写法
- JavaScript也有三种书写方式,并且与CSS的三种书写方式几乎一致
- 1.外联样式:写在js文件中,使用script的src属性导入
<script src="./01-JS外联写法.js"></script>
- 2.内联样式:写在script标签中,如果界面js代码较少可以使用,复杂的话不推荐
<script >alert("这是JS内联样式")</script >
- 3.行内样式:不推荐,因为不便于维护
<button onclick="window.alert('马云')">点我就告诉你黑马谁最帅</button>
3-细节注意点
- 1.无论是CSS还是JS的三种写法,当一个html文件存在多种写法时要记住HTML的代码是从上往下解析的
- 2.如果script标签没有src属性则表示内联样式,如果有src属性则表示外联样式,外联样式JS代码只能写在
js文件中而不能写在script标签中
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="路径/01-js外联写法.js"></script>
<script>
alert('js内联')
</script>
</head>
<body>
<div onclick="alert('js行内')">div</div>
</body>
</html>