HTML5笔记003

第03章 基本标签

3.1 HTML结构

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
	</body>
</html>
<!DOCTYPE html>:是一个文档声明,表示这是一个HTML5页面。
<html></html>:告诉浏览器,这个页面从<html>开始到</html>结束。
<head></head>:网页的头部,定义一些特殊的内容,如页面标题等。
<body></body>:网页的身体,大部分代码都在这个标签对内部编写。

3.2 head标签

在HTML中,一般来说,只有6个标签能放在head标签内。
分别是title、meta、link、style、script、base
1、标题标签:<title></title>
title标签唯一的作用就是定义网页的标题
<!DOCTYPE html>
<html>
	<head>
		<title>好好学习,天天向上</title>
	</head>
	<body>
	</body>
</html>
2、<meta>标签
<meta>标签一般用于定义页面的特殊信息,例如页面关键字、页面描述等。
<meta>标签的两个属性:
name属性:keywords网页的关键字、description网页的描述信息、author网页的作者、copyright版权信息
http-equiv属性:定义网页所使用的编码;定义网页自动刷新跳转时间;
# 使用meta的http-equiv属性实现当前页面在6秒后会自动跳转到指定页面
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="refresh" content="6;url=http://www.baidu.com"/>
	</head>
	<body>
	</body>
</html>
# 避免出现乱码,使用下面代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
	</head>
	<body>
	</body>
</html>
3、style标签:<style></style>
style标签用于定义元素的CSS样式
<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			/*这里写CSS样式*/
		</style>
	</head>
	<body>
	</body>
</html>
4、script标签:<script></script>
在HTML中,script标签用于定义页面的JavaScript代码,也可以从外部导入JavaScript文件。
<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
			/*这里写javascript代码*/
		</script>
	</head>
	<body>
	</body>
</html>
5、link标签:<link>
link标签用于引入外部样式文件(CSS文件)
<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="css/index.css">
	</head>
	<body>
	</body>
</html>

3.3 body标签

body标签:<body>主体内容</body>
# body标签表示页面的身体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>body标签</title>
	</head>
	<body>
		<h3>静夜思</h3>
		<p>床前明月光,疑是地上霜。</p>
		<p>举头望明月,低头思故乡。</p>
	</body>
</html>

分析代码:
<meta charset="utf-8" /> 是防止页面出现乱码,放在<title>标签之前。
<h3></h3> 是一个第3级标题标签
<p></p> 是一个段落标签

3.4 HTML注释

注释标签:<!--注释的内容-->
注释标签:浏览器遇到注释标签会自动跳过,不会显示注释标签中的内容。
语法:
<!--注释的内容-->
<!--表示注释的开始
-->表示注释的结束
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>注释标签</title>
	</head>
	<body>
		<h3>静夜思</h3> <!--标题标签-->
		<p>床前明月光,疑是地上霜。</p> <!--文本标签-->
		<p>举头望明月,低头思故乡。</p> <!--文本标签-->
	</body>
</html>
原文地址:https://www.cnblogs.com/infuture/p/13492110.html