HTML中的css和js的书写样式

weixin_440730502025-12-25 12:13

css书写位置

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

html 复制代码

<!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>

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

test015.css文件内容如下：

div {font-size: 50px;}

html文件内容如下：

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>

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

html 复制代码

<!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书写位置

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

html 复制代码

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

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

alert('who are you') ;

html文件如下：

html 复制代码

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

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

html 复制代码

<!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>