网页基础（二）head属性介绍及应用

首先介绍下html版本现在用的比较多的html5诞生于2012年

Html的通用声明

页面头部元素head

title
meta
style
link

script

<!DOCTYPE html>
<html>
	<head>
		<!--
        	作者：[email protected]
        	时间：2020-02-18
        	描述：设置网页编码格式
        -->
		<meta charset="UTF-8">
		<!--
        	作者：[email protected]
        	时间：2020-02-18
        	描述：设置网页的简单描述
        -->
		<meta name = "keywords" content="html,css,js,java" />
		<!--
        	作者：[email protected]
        	时间：2020-02-18
        	描述：设置网站的作者
        -->
        <meta name="author" content="yangfan" />
		<title>网页标题</title>
		<!--
        	作者：[email protected]
        	时间：2020-02-18
        	描述：定义内部样式 写css样式
        -->
		<style>
			h1{
				color: red;
				
			}
		</style>
		<!--
        	作者：[email protected]
        	时间：2020-02-18
        	描述：引用外部样式表
        	../返回上一层目录
        	./当前目录
        	
        -->
        <link rel="stylesheet" type="text/css" href="../css/index.css" />
		<!--
        	作者：[email protected]
        	时间：2020-02-18
        	描述：定义js脚本
        -->
		<script>
			//文档加载事件
			window.onload = function(){
				alert("欢迎光临");
			}
		</script>
	
	</head>
	<body>
		<h1>哈哈</h1>
	</body>
</html>

以上为几大属性在head中的用法强调一下link的链接属性首先外部要编写css文件通过路径来进行使用外部链接

h1{
	background-color: #0000FF;
}
在index.css中写入以上代码表示背景为蓝色

这是css层次的属性在body中介绍属性在以下代码中有注释可查看其中还有body背景图片的设计代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--
    	作者：[email protected]
    	时间：2020-02-18
    	描述：background 设置body的背景图片 默认平铺
    	style="background-repeat: repeat-x;"水平平铺
    -->
	<body background="../img/2.gif" >
	
	<!--
    	作者：[email protected]
    	时间：2020-02-18
    	描述：p代表一个段落 独占一行 中间不管空格多少只空一格
    	所以用&nbsp; 代表空格
    	&gt 大于号
    	&lt 小于号
    	版权号码 &copy
    -->
    <p>
    	唱&nbsp;跳&nbsp;rap&nbsp;篮球
    </p>
    <p>如果3&gt;2是正确的</p>
    <p>如果3&lt;2是错误的</p>
    <p>&copy;山东交通学院</p>
	</body>
</html>

下面简单介绍下js的简单实用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>外部js文件</title>
		<!--
        	作者：[email protected]
        	时间：2020-02-18
        	描述：src="js文件路径"
        -->
		<script type="text/javascript" src="../js/index.js" ></script>
	</head>
	<body>
		<!--
        	作者：[email protected]
        	时间：2020-02-18
        	描述：onclick:js点击事件 当点击相关按钮时
        	执行该事件的方法
        -->
        <button onclick="login()">登陆</button>
	</body>
	
</html>

同样js使用在点击button后触发时间应该提前新建index.js文件 src设置为新建的js文件文件内容如下

function login(){
	alert("hello world");

}

这样就能建立连接使用外部js文件了

@大娱乐家

发布了13 篇原创文章 · 获赞 0 · 访问量 119

私信关注

网页基础（二）head属性介绍及应用

猜你喜欢