2.1HTML5基本结构

超级小狗

已于 2024-03-14 22:23:47 修改

阅读量1.1k

点赞数 29

分类专栏： HTML5网页前端设计文章标签： html5 前端 html

于 2024-03-14 22:19:54 首次发布

本文链接：https://blog.csdn.net/zeyeqianli/article/details/136721982

版权

HTML5网页前端设计专栏收录该内容

13 篇文章 0 订阅

订阅专栏

HTML5实际上不算是一种编程语言，而是一种标记语言。HTML5文件是由一系列成对出现的元素标签嵌套组合而成，这些标签以<元素名>的形式出现，用于标记文本内容的含义。浏览器通过元素标签解析文本内容并将结果显示在网页上，而元素标签本身并不会被浏览器显示出来。

HTML5文档的基本结构如下：

<!DOCTYPE html>
<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    主体内容
  </body>
</html>

HTML5元素的内容一般以起始标签<元素名>开始，以结束标签</元素名>终止。例如首部标签<head>中的<title>标签用于标记网页标题，该标签之间的内容将显示在浏览器窗口的标题栏中。主体标签<body>中的内容显示到网页上。

HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

HTML文档 = 网页

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。

2.1.1 文档类型声明<!DOCTYPE>

DOCTYPE是Document Type的简写，含义为文档类型。HTML5文档基础结构中第一行<!DOCTYPE html>就是HTML5的DOCTYPE声明。

网页实际上有多种浏览模式，例如兼容模式，标准模式等。HTML5用<!DOCTYPE>标签定义文档该基于何种标准在网页中呈现。<!DOCTYPE html>意味着该网页的呈现标准是基于HTML5。当使用该DOCTYPE声明方式时，浏览器会将此页面定义为标准兼容模式。

HTML4.01的文档类型声明较为复杂，常见如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在HTML5中，该声明被大幅度化简：

<!DOCTYPE html>

在浏览器打开的网页页面任意位置右键点击，选择“查看网页源代码”，在页面顶端第一句就是DOCTYPE声明。

HTML5引入了新的特性和元素，同时也取消了对部分过期元素的支持，因此如果在HTML5的DOCTYPE声明下使用了HTML的过期元素，网页可能无法正常显示预期的效果。

2.1.2 根标签<html>

<html>是HTML5文档的根元素标签，除顶部<!DOCTYPE html>文档类型声明以外，所有的HTML5文档都是以<html>标签开始，以</html>标签结束。在<html>和</html>标签内包含了两个重要的元素标签：<head>首部标签和<body>主体标签，分别用于标记文档的首部和主体部分。

2.1.3 首部标签<head>

HTML5文档的首部以<head>标签开始，以</head>标签结束。<head>标签中的内容不会显示在网页的页面中。<head>标签中可包含<title>和<meta>等标签，用于声明页面标题、字符集和关键词等。

网页标题标签<title>

HTML5文档使用<title>和</title>标签标记网页标题，该标题会显示在浏览器窗口的标题栏中，若省略<title>标签则网页标题会显示为“无标题文档”。建议在网页代码中保留该标签，因为<title>标签还能用于当网页被添加到收藏夹时显示标题，以及作为页面标题显示在搜索引擎结果中。

基础地址标签<base>

<base>标签用于为页面上所有的链接设置默认URL地址或目标target。当HTML5文档中使用了相对路径时，浏览器会用<base>标签指定的URL进行补全。例如：

<head>
<base href="http://localhost/images/" />
</head>
 
<body>
<img src="sunflower.jpg" />
</body>

此时在第一个图像标签<img>中src属性填写的是一个相对路径，由于<base>标签的作用，该路径会被浏览器自动补全为：<img src=" http://localhost/images/sunflower.jpg" />。如果没有使用<base>标签来指定URL地址，则浏览器会用当前HTML5文档的URL对图片地址进行补全。

<base>标签也可以为该网页上所有超链接统一设置打开方式。例如：

<head>
<base target="_blank" />
</head>
 
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.163.com">网易</a>
</body>

在<base>标签中的属性target="_blank"指的是该网页文档中所有未指定打开方式的超链接将在新窗口打开。

元数据标签<meta>

<meta>标签用于提供当前HTML文档的元数据，这些数据不会直接显示在网页上，但是对于机器是可读的，适用于搜索引擎索引。通常<meta>标签可用于定义网页的字符集、关键词、描述、作者等信息。

(1) 字符集声明

Charset是Character Set的简写，含义为字符集设置。浏览器统一默认的字符集是ISO-8859-1西文字符集，如果使用了其他字符集，浏览器需知道使用何种字符集才能正确地显示HTML页面。HTML5文档使用<meta>标签进行字符集声明。万维网初期使用的是ACSII字符集，该字符集支持数字0-9、英文字母大写A-Z和小写a-z，以及部分特殊字符。由于很多国家使用的字符不被ACSII支持，因此浏览器统一默认的字符集是ISO-8859-1西文字符集。

以UTF-8字符集为例，HTML4.01的字符集声明如下：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

在HTML5中，同样的内容声明方式会更为简洁，写法如下：

<meta charset="utf-8">

(2) 关键词声明

使用<meta>标签定义网页关键词（keywords）的用法如下：

<meta name="keywords" content="HTML5, CSS3, jQuery" />

(3) 页面描述声明

使用<meta>标签定义页面描述（description）的用法如下：

<meta name="description" content="This is a tutorial about HTML5, CSS3, jQuery" />

搜索引擎会根据<meta>标签中的name和content属性来索引网页。

样式标签<style>

样式标签<style>可用于定义文档中指定区域的字体风格、背景颜色、对齐方式等各类样式信息。

例如：

<head>
<style>
p {color: red}
</style>
</head>
<body>
<p>这是一个段落。</p>
</body>

这段代码可以将HTML5文档中所有未指定字体颜色的段落显示为红色。

链接标签<link>

<link>标签用于连接外部资源和当前HTML5文档，它只出现在首部标签<head>和</head>中，通常用于连接外部样式表。例如：

<head>
<link rel="stylesheet" href="my.css" />
</head>

这表示将CSS样式文件my.css指定的样式效果应用于当前网页中。

如果需要同时引用多个外部样式表文件，则需要为每一个CSS样式文件单独使用一次<link>标签。例如：

<head>
<link rel="stylesheet" href="my1.css" />
<link rel="stylesheet" href="my2.css" />
<link rel="stylesheet" href="my3.css" />
</head>

这里对于CSS样式文件的引用使用了相对路径，也可以根据实际需要填写URL地址。

脚本标签<script>

<script>标签为可选，取决于当前页面是否需要使用脚本内容，比如JavaScript。该标签可以直接引用外部脚本文件，也可以直接将脚本命令写在<script>和</script>标签中。例如：

<head>
<script src="test.js"></script>
</head>

和引用外部CSS文件类似，如果需要同时引用多个JavaScript文件，则需要为每一个JavaScript文件单独使用一次<script>标签。例如：

<head>
<script src="test1.js"></script>
<script src="test2.js"></script>
<script src="test3.js"></script>
</head>

2.1.4 主体标签<body>

HTML5文档的主体部分以<body>标签开始，以</body>标签结束。<body>标签中的内容将全部显示在网页的页面中。<body>标签中可直接添加文本内容，也可继续嵌套其他元素标签，形成多样化的显示效果。

2.1.5 HTML5文档注释

为增加HTML5文档的可读性，可为其添加注释部分。注释是文档中的说明文字，不会被浏览器执行。HTML5使用标签为文档进行注释，注释标签以“”结束，中间的“...”替换为注释文字内容即可。标签支持单行和多行注释。

2.1.6 HTML5文档规范

1. 文件类型

一般来说，纯HTML5开发推荐使用.html格式。和HTML4.01一样，HTML5支持的常用文件后缀名为.html。在早期的DOS操作系统中，文件扩展名限制为最多3个字符，无法识别4位文件名，因此.htm被用于兼容此类操作系统。目前这两种扩展名方式均被各类浏览器广泛支持，互换后缀名不会引起打开错误，但是通过URL地址访问时需要正确的扩展名。

2. 元素标签格式

元素标签一般情况下是成对出现的，首尾标签的元素名称保持一致，并且尾标签中需要加上斜杠符号。早期的HTML规范中，标签的大小写是不敏感的，因此老版本的网页中可能会存在如下写法：

<HTML>
  <HEAD>
    <TITLE>早期存在的大写标签页面</TITLE>
  </HEAD>
  <BODY>
    ……
  </BODY>
</HTML>

万维网联盟（W3C）明确规定了在新版本HTML5中必须使用小写格式，包括元素标签本身和其中可能出现的属性均需要遵守此规范。

在HTML5中，也存在部分标签是独立使用，没有首尾标签成对出现。例如，换行标签<br>和水平线标签<hr>等。由于此类标签单个就已经可以表达足够明确的含义，并且不包含其他文本内容需要放置在其首尾标签之间，因此结束标签没有存在的必要性。

目前这种无结束标签的元素标签有不同的写法存在，例如水平线标签可以写成<hr>或<hr />。HTML4.01以前版本可以直接写成<hr>，但在XML规范中，所有的标签都必须有结束标签，因此必须加上斜杠符号表示完结。虽然目前这两种写法均能被浏览器正确显示，但是从长远来看，加上结束标志即斜杠符号的写法更为标准。

3. 字符实体的使用

在HTML5文档中存在一些特殊字符无法直接使用。例如小于符号（<）和大于符号（>）是无法直接输出的，因为它们会被误认为是元素标签的组成部分；而连续空格也无法正确显示，会被浏览器缩减为单个空格。存在此类情况的一系列特殊字符在HTML5中称为字符实体（Character Entities）。

字符实体可借助其对应的字符名称或数字代码进行输出，其格式如下：

&实体名称;
&#实体数字;

实体名称和实体数字的写法都是以&符号开头，以;符号结尾，其中实体数字前面还加有#符号以示区分。例如大于符号（>）可以使用>或>表示。

常用的字符实体及其对应的表示方式如表所示：

实体名称的出现是为了方便记忆，但是部分实体名称不能完全被所有浏览器支持。例如单引号的实体名称'在IE浏览器中不被支持，在这种情况下可以使用实体数字代替。

4. 图像文件的使用

网页文件常见的图像格式有：

JPEG格式

JPEG格式指的是联合图像专家组（Joint Photographic Experts Group，JPEG）格式，是第一个国际图像压缩标准。该格式的图像文件后缀名是.jpg或.JPG两种形式。

JPEG格式图像文件有以下特点：

支持高级压缩
弹性压缩比
广泛支持互联网标准

GIF格式

GIF格式指的是图像交换格式（Graphics Interchange Format，GIF），该格式的图像文件后缀名是.gif或.GIF两种形式。

GIF格式图像文件有以下特点：

无损性
256种颜色
隔行扫描
动画效果

PNG格式

PNG格式指的是图像交换格式（Portable Network Graphic Format，PNG），该格式的图像文件后缀名是.png或.PNG两种形式。

PNG格式图像文件有以下特点：

文件体积小
支持透明显示
色彩索引模式

2.1.7 HTML4.01转换为HTML5

基于HTML4.01开发的网页可以分成三个步骤转换为HTML5网页。

示例代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>HTML4.01网页转换HTML5</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="test.js"></script>
    <link type="text/css" rel="stylesheet" href="test.css">
  </head>
  <body>
    再见，HTML4.01！
    你好，HTML5！
  </body>
</html>

步骤一：化简DOCTYPE声明方式。

步骤二：化简charset字符集描述方式。

步骤三（可选，取决于需要转换的文件是否包含该内容）：若存在外部css文件或js文件的引用，可以直接省略其中的type描述。

修改后的代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title> HTML4.01网页转换HTML5</title>
    <meta charset="utf-8">
    <script src=”test.js”></script>
    <link rel=”stylesheet” href=”test.css”>
  </head>
  <body>
    再见，HTML4.01！
    你好，HTML5！
  </body>
</html>

超级小狗

关注

29
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
0
评论
2.1HTML5基本结构

HTML5实际上不算是一种编程语言，而是一种标记语言。HTML5文件是由一系列成对出现的元素标签嵌套组合而成，这些标签以的形式出现，用于标记文本内容的含义。浏览器通过元素标签解析文本内容并将结果显示在网页上，而元素标签本身并不会被浏览器显示出来。HTML5文档的基本结构如下：HTML5元素的内容一般以起始标签开始，以结束标签终止。例如首部标签中的标签用于标记网页标题，该标签之间的内容将显示在浏览器窗口的标题栏中。主体标签中的内容显示
复制链接

扫一扫