HTML入门1-基本标签

最新推荐文章于 2021-06-20 03:46:45 发布

原创最新推荐文章于 2021-06-20 03:46:45 发布 · 720 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

WEB前端同时被 2 个专栏收录

7 篇文章

订阅专栏

HTML

1 篇文章

订阅专栏

本文深入解析HTML文档结构，包括文档声明、HTML标签、head与body标签的使用，以及title、meta、link、style和script标签的功能与应用实例，是前端开发入门的必备指南。

## 标题@[TOC](1.基本标签)

#1.1 HTML结构

<!DOCTYPE html>	<!--文档声明-->
<html>
	<head>		<!-HTML标签对  页头html标签对-->
	</head>
	<body>		<!-HTML标签对  页身html标签对-->
	</body>
</html>

一个完整的HTML页面，其实就是一对对的标签组成的

1.文档声明

是一个文档声明，表示这是一个HTML页面

2.HTML标签

HTML标签的作用，就是告诉浏览器页面从标签开始的，然后到结束的

3.head标签

标签是网页的“头部”，用于定义一些特殊的内容，如页面标题，定时刷新，外部文件等 ###### 3.body标签标签是网页的“身体”。对于一个网页来说，大部分网页代码都是在这个标签内编写的。例如：

<!DOCTYPE html>
<html>
	<head>
		<title>这是网页的标题</title>
	</head>
	<body>这是网页的内容</body>
</html>

分析：
title标签是head标签的内部标签，其中标签内定义的内容是页面的标题

标签是段落标签，用于定义一段文字

1.2 head标签

在HTML中，一般来说，只有6个标签可以放在head标签内

title标签唯一的作用就是定义网页标题
meta标签一般用于定义网页的特殊信息，比如页面关键字，页面描述等。
link标签
style标签
script标签
base标签
title标签一定要放在meta标签下面，防止出现乱码
在meta标签中，name属性一般用于定义页面的基本信息

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="tuf-8"/>	<!--定义网页的编码-->
		<meta name="keywords" content="这是页面的关键字"/>
		<meta name="description" content="这是页面的描述"/>
		<meta name="author" content="网页的作者"/>
		<meta name="copyright" content="版权信息"/>
		<title>这是网页的标题</title>
	</head>
	<body>这是网页的内容</body>
</html>

定义自动网页刷新跳转

<meta http-equiv="refresh" content="6;url=www.baidu.com"/>

style标签

在HTML中，style标签用于定义元素的CSS样式

<!!DOCTYPE >
<html>
	<head>
		<meta charset="utf-8"/>
		<style>这里写css样式</style>
	</head>
	<body>
	</body>
</html>

script标签

在HTML中，script用于定义页面的JavaScript代码，也可以引入外部JavaScript文件

<!!DOCTYPE >
<html>
	<head>
		<meta charset="utf-8"/>
		<script>这里写JavaScript代码</script>
	</head>
	<body>
	</body>
</html>

link标签

在HTML中，link标签用于引入外部样式文件（css文件）

<link type="text/css" rel="stylesheet" href="css/index.css">

HTML标签

语法：