《HTML+CSS+JavaScript》之第3章基本标签-CSDN博客

本文链接：https://blog.csdn.net/oqqyx1234567/article/details/125551530

《HTML+CSS+JavaScript》之第3章基本标签

第3章基本标签

第3章基本标签

3.1 HTML结构

页面由4部分组成：

文档声明：<!DOCTYPE html>
表示这是一个HTML页面。
html标签对：<html></html>
xmlns=“http://www.w3.org/1999/xhtml”>，W3C的XHTML标准。
head标签对：<head></head>
头部，定义特殊内容，页面标题、定时刷新、外部文件等。
body标签对：
身体。

<!DOCTYPE html>	
<html>
	<head></head>
	<body></body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<title>网页标题</title>
	</head>
	<body>
		<p>网页段落</p>
	</body>
</html>

3.2 head标签

特殊标签放入head标签内，大部分标签放入body标签内。
只有6个标签能放入head标签内：
title、meta、link、style、script、base。

3.2.1 title标签

定义网页标题。

<!DOCTYPE html>
<html>
	<head>
		<title>网页标题</title>
	</head>
	<body>
		<p>网页段落</p>
	</body>
</html>

3.2.2 meta标签

定义页面的特性信息，页面关键字、页面描述等。
这些信息提供给搜索引擎蜘蛛看的。

两个重要属性。

name属性

<!DOCTYPE html>
<html>
<head>
    <!--网页关键字，可以多个-->
    <meta  name="keywords" content="绿叶学习网,前端开发,后端开发"/>
    <!--网页描述-->
    <meta  name="description" content="绿叶学习网是一个最富有活力的Web技术学习网站"/>
    <!--网页作者-->
    <meta  name="author" content="helicopter">
    <!--版权信息->
    <meta  name="copyright" content="本站所有教程均为原创，版权所有，禁止转载。否则必将追究法律责任。"/>
</head>
<body>
</body>
</html>

属性值	说明
keywords	网页关键字，可以多个
description	网页描述
author	网页作者
copyright	版权信息

http-equiv属性
只有两个重要作用：定义网页编码，定义网页自动刷新跳转。

定义网页编码

<!DOCTYPE html>
<html>
<head>
    <meta  http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!--等价于-->
    <meta  charset="utf-8"/>
</head>
<body>
    <p>告诉浏览器页面使用utf-8编码，html5可简化<meta charset="utf-8"/></p>
</body>
</html>

定义网页自动刷新跳转

<!DOCTYPE html>
<html>
<head>
    <meta  http-equiv="refresh" content="6;url=http://www.lvyestudy.com"/>
</head>
<body>
    <p>这个页面在6秒之后自动跳转到http://www.lvyestudy.com页面</p>
</body>
</html>

3.2.3 style标签

定义元素的CSS样式。

<!DOCTYPE html>
<html>
<head>
    <style tpye="text/css">
    	/*这里写CSS样式*/
    </style>
</head>
<body>
</body>
</html>

3.2.4 script标签

定义页面的JavaScript代码，也可以引入外部JavaScript文件。

<!DOCTYPE html>
<html>
<head>
    <script>
    	/*这里写JavaScript代码*/
    </script>
</head>
<body>
</body>
</html>

3.2.5 link标签

引入外部样式文件（CSS文件）。

<!DOCTYPE html>
<html>
<head>
    <link tpye="text/css" rel="stylesheet" href="css/index.css">
</head>
<body>
</body>
</html>

3.2.6 base标签

无意义，直接忽略。

3.3 body标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/> <!--防止页面乱码，放在title和其他meta标签前面-->
    <title>body标签</title>
</head>
<body>
    <h3>静夜思</h3>
    <p>床前明月光，疑是地上霜。</p>
    <p>举头望明月，低头思故乡。</p>
</body>
</html>

3.4 HTML注释

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