HTML中的css和js的书写样式

css书写位置

1. 内嵌式：样式写在head标签内，title标签下，style标签内。

   <!DOCTYPE html>
   <html>
   	<head>
   		<meta charset="UTF-8">
   		<title>CSS</title>
   		<style type="text/css">
   			div {font-size: 50px;}
   		</style>
   	</head>
   	<body>
   		<div>我是div</div>
   	</body>
   </html>

2. 外联式：样式写在后缀名为.css文件中，使用link标签通过href属性找到文件路径。

   test015.css文件内容如下：

   div {font-size: 50px;}

html文件内容如下：

<!DOCTYPE html>
<html>
	<head>
			<meta charset="UTF-8">
			<title>CSS</title>
			<link rel="stylesheet" type="text/css" href="test015.css"/>
	</head>
	<body>
		<div>我是div</div>
	</body>
</html>

3. 行内式：样式写在body的标签中，样式如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
	</head>
	<body>
		<div>我是div</div>
		<img src="../../test/XXX.png" alt="" height="200px"  width="200px"/>
	</body>
</html>

JS书写位置

1. 内嵌式，html文档中的 script标签内。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS</title>	
	</head>
	<body>
		<div>我是div</div>
	</body>
	<script>alert('who are you');</script>
</html>

2. 外联式：脚本写在.js文件中，需要创建后缀名为.js的文件，在head标签内，title标签下，script标签内且通过属性src的值找到后缀名为.js的文件
   myscript.js文件如下：

   alert('who are you') ;

html文件如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
		<script src="myScript.js"></script>
	</head>
	<body>
		<div>我是div</div>
		</body>
</html>

3. 行内式，脚本写在标签内，如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
		<style type="text/css">
			div {font-size: 50px;}
		</style>
	</head>
	<body>
		<div>我是div</div>
		<input type='button' value=''点击按钮" onclick='alert('请点击')'/>
		</body>
</html>