在HTML文件中引入其他文件的方式_div中引入html文件-优快云博客

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML中引入CSS样式的第一种方式：内联定义方式</title>
	</head>
	<body>
		<div style="width : 300px; height : 300px; background-color : #CCFFFF; display : block;
		border-color : red;border-width : 1px;border-style : solid;"></div>
		<div style="width : 300px; height: 300px;background-color: #CCFFFF;display :block; 
			border: 1px solid black;"></div>
	</body>
</html>

2.在HTML文件中引入ja样式，在标签内的方式叫事件句柄方式

html代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>HTML中引入JavaScript代码的第1种方式</title>
	</head>

	<body>
		<!--
			用户点击以下按钮，弹出消息框。
			1.js是一门事件驱动型编程语言，依靠事件去驱动，然后执行对应程序。
			在js中有很多事件，其中一个事件叫做：鼠标单击，单词：click。并且任何
			事件都会对应一个事件句柄，叫做onclock（事件与事件句柄的区别就是事件句柄
			是在事件单词前面加上一个on）而事件句柄是以HTML标签的属性存在的。
			2.onclick=“js代码”，执行原理是什么？
			页面打开的时候，js代码并不会执行，只是把这段js代码注册到按钮的click事件上了
			等这个按钮发生click事件之后，注册在onclick后面的js代码就会被浏览器调用。
			3怎么在js代码弹出消息框？
			在js中有一个内置的对象叫做window，全部小写，可以直接拿来使用，window代表的是浏览器对象
		-->
		<input type="button" value="hello" onclick="window.alert('消息框弹出')">
		<input type="button" value="连续提示框" onclick="window.alert('消息框弹出')
			                                        window.alert('劳资全球最帅')"/>
		<input type="button" value="大家都认同的一个观点" onclick="alert('消息框弹出')
			                                        alert('劳资全球最帅')
			                                        alert('大家对这个说法表示非常认同')">
			                                        
			                                        
	</body>

</html>

第二种：在页面内，也可以说块引入

1.在HTML文件中引入css样式，在页内面的方式叫做样式块样式

html代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>HTML中引入CSS样式的第二种方式：样式块</title>
		<style type="text/css">
			/*
				这是CSS的注释。
			*/
			/*
				id选择器
				语法格式：
					#id{
						样式名 : 样式值;
						样式名 : 样式值;
						样式名 : 样式值;
						....
					}
			*/
			
			#usernameErrorMsg {
				color: red;
				font-size: 12px;
			}
			/*
				标签选择器
				语法格式：
					标签名 {
						样式名 : 样式值;
						样式名 : 样式值;
						样式名 : 样式值;
						....
					}
				标签选择器作用的范围比id选择器广。
			*/
			
			div {
				background-color: black;
				border: 1px solid red;
				width: 100px;
				height: 100px;
			}
			/*
				类选择器
				语法格式：
					.类名{
						样式名 : 样式值;
						样式名 : 样式值;
						样式名 : 样式值;
						....
					}
			*/			
			.student {
				border: 1px solid red;
				width: 400px;
				height: 30px;
			}
		</style>
	</head>

	<body>
		<!--
			设置样式字体大小12px，颜色为红色！
		-->
		<span id="usernameErrorMsg">对不起，用户名不能为空！</span>

		<div></div>
		<div></div>
		<div></div>

		<!--class相同的标签可以认为是同一类标签。-->
		<br><br><br>
		<input type="text" class="student"/>

		<br><br><br>

		<select class="student">
			<option>专科</option>
			<option>本科</option>
		</select>

	</body>

</html>

2.在HTML文件中引入js代码，在页内面的方式叫做脚本块方式

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML中引入JavaScript代码的第2种方式</title>
	</head>
	<body>
		<!--脚本块方式 -->
		<script type="text/javascript">
			window.alert("helloword")
		</script>
		<input type="button" value="我是一个按钮对象" onclick="window.alert('点我干嘛')"/>
		
	</body>
</html>

第三种：在页面外，也可以说外部引入

1.在HTML文件中引入css样式，在页面内的方式叫做外联样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML中使用CSS样式的第三种方式：引入外部独立的css文件</title>
		<!--引入css-->
		<link rel="stylesheet" type="text/css" href="css/1.css" />
	</head>
	<body>
		<a href="http://www.baidu.com">百度</a>
		<span id="baiduSpan">点击我链接到百度哦！</span>
	</body>
</html>

css代码

a {
	text-decoration: none;
}
/*corsor : 鼠标样式，pointer是小手hand也是，但是hand有浏览器兼容问题，建议使用pointer*/
#baiduSpan{
	text-decoration: underline;
	cursor: pointer;
}

2.在HTML文件中引入js代码，在页面外的方式叫做外部引入

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML中引入JavaScript代码的第3种方式，引入外部独立的js文件</title>
		<!--在需要的位置引入js脚本文件-->
	</head>
	<body>
		<script type="text/javascript" src="js/1.js"></script>
	</body>
</html>

js代码

window.alert("试问天下谁最帅？");
window.alert("在下!");
window.alert("试问天下谁最强？");
window.alert("正是在下!!");
window.alert("试问天下谁最酷？");
window.alert("还是在下!!!");