HTML标记语言

pan_junbiao

已于 2025-03-31 20:02:02 修改

阅读量6.7k

点赞数 4

分类专栏： HTML5 我の原创文章标签： HTML

于 2019-08-06 17:17:03 首次发布

本文链接：https://blog.csdn.net/pan_junbiao/article/details/98449634

版权

HTML5标记语言，系列文章：

《HTML标记语言》

《HTML中Form表单的使用》

《HTML中Table表格的使用与漂亮的表格模板》

《HTML中的＜fieldset＞标签元素框的使用》

《HTML5使用＜output＞标签：显示一些计算结果》

《HTML5使用＜progress＞进度条、＜meter＞刻度条》

《HTML5使用＜details＞标签：展开/收缩信息》

《HTML5使用＜mark＞标签：高亮显示文本》

《HTML5使用＜blockquote＞标签：段落缩进》

《HTML5使用＜pre＞标签：保留原始排版方式》

《HTML5新增的input元素类型：number、range、email、color、date等》

《HTML5新增的input元素属性：placeholder、required、autofocus、min、max等》

1、HTML标记语言

HTML的全称是 Hyper Text Markup Language，即超文本标记语言。HTML是一种在互联网上常见的网页制作标记性语言，HTML用于描述超文本中内容的显示方式。使用 HTML 可以实现在网页中定义一个标题、文本或者表格等。严格的说，HTML 并不能算作是一种程序设计语言，因为它缺少了程序设计语言所应有的特征。HTML是通过浏览器的翻译，将网页中的内容呈现给用户的。

1.1 创建第一个HTML文件

编写HTML文件可以通过两种方式：一种是手工编写HTML代码，另一种是借助一些开发软件。在 Windows 操作系统中，最简单的文本编辑软件就是记事本。

示例：使用记事本创建一个HTML文件。

（1）创建一个记事本文件。

（2）打开记事本文件，输入以下HTML代码：

<html>
<head>
    <title>创建第一个HTML文件</title>
</head>
<body>
    <b>您好！欢迎访问 pan_junbiao的博客</b><br>
    <b>博客地址：https://blog.csdn.net/pan_junbiao</b><br>
    <b>这是使用记事本编写的HTML文件</b>
</body>
</html>

（3）修改记事本文件名称，将文件的后缀名修改为 .html，如：01.html。

（4）运行文件，执行结果如下：

1.2 HTML文档结构

HTML 文档由4个主要标记组成，这4个标记是<html>、<head>、<title>和<body>。它们构成了HTML页面最基本的元素。

标记	说明
<html>标记	<html>标记是 HTML 文件的开头。所有HTML文件都是以<html>标记开头，以</html>标记结束。HTML 页面的所有标记都要放置在<html>与</html>标记中，<html>标记并没有实质性的功能，但却是HTML文件不可缺少的内容。
<head>标记	<head>标记是 HTML 文件的头标记，作用是放置HTML文件的信息。如定义 CSS 样式代码可放置在<head>与</head>标记中。
<title>标记	<title>标记文标题标记。可将网页的标题定义在<title>与</title>标记中。
<body>标记	<body>标记是 HTML 页面的主体标记。页面中的所有内容都定义在<body>标记中。<body>标记也是成对使用的，以<body>标记开头，以</body>标记结束。<body>标记本身也具有控制页面的一些特性，例如控制页面的背景图片和颜色等。

说明：HTML标记是不区分大小写的。

1.3 <meta>标记

1.3.1 设置网站的作者（author）

示例：在页面中将“pan_junbiao的博客”指定为作者。

<meta name="author" content="pan_junbiao的博客">

1.3.2 设置网站的关键字（keywords）

"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。

示例：设置网站的关键字。

<meta name="keywords" content="Java,C#,Oracle,MySQL">

1.3.3 网页过期（expires）

示例：设置网页过期。

<meta http-equiv="expires"  content="Wed, 26 Feb 2019 08:21:57 GMT">

1.3.4 自动刷新（refresh）

示例：设置网页自动刷新。

<meta http-equiv="refresh" content="30">代表每隔30秒自动刷新本页面
<meta http-equiv="refresh" content="5; url=https://blog.csdn.net/pan_junbiao">代表过5秒自动跳转到新的url网址