1. 简介
WWW(World Wide Web)是我们熟知的Internet中像邮件,文件传输等服务之外的一个重要服务,它是一种基于超文本的分布式信息系统。WWW最重要的特征就是可以通过单击超链接来访问Internet上的其他文档,这些文档被称为超文本文件(HTML文件)。
那么,超文本文件是用什么语言编写的呢?这就要提到HTML(HyperText Markup Language,超文本标记语言),它是一种用于创建超文本页面的标准标记语言。
2. HTML语言的基本结构与标签
2.1 HTML基本结构标签
每个HTML文件都应该包括下面的结构:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
文本、图片、链接等等
</body>
</html>
上述代码描述了一个基本的HTML文件结构:
DOCTYPE:文档类型声明,告诉浏览器使用哪种HTML版本解析页面;
HTML标签:HTML页面的根标签,用于包裹其他所有标签;
head标签:用于定义文档头部;
meta标签:定义一些元数据,比如字符编码、页面关键字等;
title标签:定义页面的标题,一般用于浏览器的标签页显示;
body标签:页面主体部分。
2.2 HTML基本标签
HTML标签分为两种:普通标签和自闭和标签。普通标签包括起始标签和结束标签,其间可以包含其他标签和文本;自闭和标签没有结束标签,语法为 <tagname />,比如 <br />。
下面列举一些HTML中常见的基本标签:
<p>:定义段落
<a>:定义超链接
<img>:定义图片,必须有src属性,即图片的URL
<ul>:定义无序列表
<ol>:定义有序列表
<li>:定义列表中的每一项
<h1>:定义一级标题,<h2>、<h3>、<h4>、<h5>、<h6>定义二至六级标题
<div>:定义一个文档区块,常用于布局,不会对内容进行任何修改
<span>:定义一小段文本,常用于前端样式设定,不会对内容进行修改
3. HTML文件的组成
一个完整的HTML文件包括三个主要部分:head、body和注释。
3.1 head
head部分包含了一些不可见的信息,如网页的标题、关键字等,它主要的作用就是对网页进行描述,告诉浏览器这个页面是做什么的。
下面是一个头部的例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
<meta name="description" content="这是一个简单页面的描述">
<meta name="keywords" content="html, web, 开发">
</head>
<body>
<p>欢迎来到我的网站!</p>
</body>
</html>
上面代码中,meta标签定义了当前页面的编码、描述和关键字。meta标签没有结束标签,而是使用了自闭合标签的形式,其中name
属性表示meta标签的类型,比如description和keywords,而content属性表示内容。
3.2 body
body标签是HTML文档的主体部分,是页面呈现给用户的所有内容,包括文本、图片、链接等等。
下面是一个简单的HTML页面,用于展示body的使用:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例页面</title>
</head>
<body>
<h1>欢迎来到我的网站!</h1>
<p><strong>HTML</strong>(HyperText Markup Language,超文本标记语言)是一种用于创建超文本页面的标准标记语言。</p>
<p>如果您想学习HTML,请访问<a href="http://w3school.com.cn/">W3CSchool</a>学习。</p>
</body>
</html>
上述HTML代码中,h1标签定义了页面的标题,p标签定义了两段段落文本,其中第一个文本使用了标签加粗。
3.3 注释
HTML中可以使用注释来注解HTML代码,注释用<!--
和-->
括起来。
下面是一个HTML代码中的注释:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例页面</title>
</head>
<body>
<h1>欢迎来到我的网站!</h1>
<!--这里是注释-->
<p><strong>HTML</strong>(HyperText Markup Language,超文本标记语言)是一种用于创建超文本页面的标准标记语言。</p>
<p>如果您想学习HTML,请访问<a href="http://w3school.com.cn/">W3CSchool</a>学习。</p>
</body>
</html>
4. 总结
HTML语言是前端技术的基础,用于描述和定位页面结构、布局和内容等。它是Web技术的一部分,经常和CSS和JavaScript结合使用来创建出功能丰富、表现力强的网站和Web应用程序。熟练掌握HTML语言是任何Web开发者的必要技能。