2.1HTML5基本结构

news2025/1/8 11:37:27

    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）。

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

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

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

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

    实体名称的出现是为了方便记忆，但是部分实体名称不能完全被所有浏览器支持。例如单引号的实体名称&apos;在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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1517666.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

论文阅读：Taxonomy of Adversarial Attacks on Text-to-Image Generative Models

论文阅读：Taxonomy of Adversarial Attacks on Text-to-Image Generative Models

Taxonomy of Adversarial Attacks on Text-to-Image Generative Models 论文链接 文生图模型因为其强大的生成能力而十分流行。&#xff0c;然而&#xff0c;一些揭示了文生图模型的弱点的对抗攻击引起了广泛地关注。这些对抗攻击会使得模型生成一些不安全的内容&#xff0c;比…
阅读更多...
JavaEE企业开发新技术2

JavaEE企业开发新技术2

目录 2.7 Field类的基本概念 文字性概念描述&#xff1a; Field类 2.8 Field的基本操作-1 2.9 Field的基本操作-2 分析&#xff1a; 2.10 Field 的综合练习 总结&#xff1a; 和equals的区别&#xff1a; 使用 比较 使用equals比较 2.7 Field类的基本概念 文字性…
阅读更多...
Qt之格栅布局(QGridLayout)控件填满整个单元格

Qt之格栅布局(QGridLayout)控件填满整个单元格

Qt专栏&#xff1a;http://t.csdnimg.cn/GQN1M 目录 1.现象1 2.解决方案 3.现象2 4.解决方案 5.总结 1.现象1 今天在用QGridLayout布局的时候&#xff0c;添加到布局的QWidget有文本框、标签、组合框和按钮等等&#xff0c;布局两列&#xff0c;通过下面的方式添加进去的&…
阅读更多...
如何在Windows 10上打开和关闭平板模式？这里提供详细步骤

如何在Windows 10上打开和关闭平板模式？这里提供详细步骤

前言 默认情况下&#xff0c;当你将可翻转PC重新配置为平板模式时&#xff0c;Windows 10会自动切换到平板模式。如果你希望手动打开或关闭平板模式&#xff0c;有几种方法可以实现。​ 自动平板模式在Windows 10上如何工作 如果你使用的是二合一可翻转笔记本电脑&#xff0…
阅读更多...
（008）Unity StateMachineBehaviour的坑

（008）Unity StateMachineBehaviour的坑

文章目录 StateMachineBehaviour同名函数的调用问题StateMachineBehaviour 的 OnState*、OnStateMachine* 的区别 StateMachineBehaviour同名函数的调用问题 1.如果脚本中&#xff0c;两个同名的函数都存在&#xff0c;那么两个函数都会被调用&#xff1b;如果只有其中一个同名…
阅读更多...
20232831 2023-2024-2 《网络攻防实践》第2次作业

20232831 2023-2024-2 《网络攻防实践》第2次作业

目录 20232831 2023-2024-2 《网络攻防实践》第2次作业1.实验内容2.实验过程3.学习中遇到的问题及解决4.学习感悟、思考等参考资料 20232831 2023-2024-2 《网络攻防实践》第2次作业 1.实验内容 &#xff08;1&#xff09;从www.csdn.net、www.163.com等中选择一个DNS域名进行…
阅读更多...
【数学建模】线性规划

【数学建模】线性规划

针对未来可能的数学建模比赛内容&#xff0c;我对学习的内容做了一些调整&#xff0c;所以先跳过灰色关联分析和模糊综合评价的代码&#xff0c;今天先来了解一下运筹规划类——线性规划模型。 背景&#xff1a; 某数学建模游戏有三种题型&#xff0c;分别是A&#xff0c;B&am…
阅读更多...
2024计算机二级4

2024计算机二级4

1. 整数在计算机中使用补码&#xff0c; 机器数有原码、补码和反码 2. 将文件名转化为文件存储地址的结构是文件目录 3. 有可能是最后一个元素或者查找的元素不在表中 4. 不将元素入队时循环队列可能为空也可能为满&#xff0c;可以将元素入队证明不为满&#xff0c;一共将…
阅读更多...
软考77-上午题-【面向对象技术3-设计模式】-创建型设计模式02

软考77-上午题-【面向对象技术3-设计模式】-创建型设计模式02

一、生成器模式 1-1、意图 将一个复杂对象的构建与它的表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。 1-2、结构图 Builder 为创建一个 Product 对象的各个部件指定抽象接口。ConcreteBuilder 实现 Builder 的接口以构造和装配该产品的各个部件&#xff0c;定…
阅读更多...
Acwing-基础算法课笔记之动态规划（背包问题）

Acwing-基础算法课笔记之动态规划（背包问题）

Acwing-基础算法课笔记之动态规划&#xff08;背包问题&#xff09; 一、01背包问题1、概述2、过程模拟 二、完全背包问题1、概述2、闫氏dp分析完全背包问题3、过程模拟代码模板 三、多重背包问题1、概述2、过程模拟3、多重背包问题的优化版本 分组背包问题1、概述2、过程模拟3…
阅读更多...
GCNv2_SLAM-CPU详细安装教程(ubuntu18.04)

GCNv2_SLAM-CPU详细安装教程(ubuntu18.04)

GCNv2_SLAM-CPU详细安装教程-ubuntu18.04 前言一、安装第三方库1.安装Pangolin2.安装OpenCV3.安装Eigen4.安装Pytorch(c) 二、安装以及运行GCNv2_SLAM1.安装编译GCNv2_SLAM2.单目模式运行演示案例 总结 前言 paper:https://arxiv.org/pdf/1902.11046.pdf githup::https://gith…
阅读更多...
mysql事务（MVCC机制：undo日志）（mysql执行过程：redo日志，Buffer Pool缓存池）

mysql事务（MVCC机制：undo日志）（mysql执行过程：redo日志，Buffer Pool缓存池）

事务 目的&#xff1a;保证数据的最终一致性## 事务的目的 事务的4大特性&#xff08;ACID&#xff09; 1.原子性(Atomicity):由undo log日志来保证 2.一致性(Consistency):使用事务的最终目的&#xff0c;由业务代码正确逻辑保证,比如错误的try-catch 3.隔离性(Isolation):…
阅读更多...
若依Vue3图片预览大图遮罩层和表格的border css层级冲突

若依Vue3图片预览大图遮罩层和表格的border css层级冲突

样式层级出现问题&#xff0c;表格的层级高于图片的层级 1.解决方式一&#xff1a;设置此文件的该属性&#xff08;z-index&#xff09;为继承&#xff0c;则显示正常 .el-table .el-table__cell { z-index: inherit; } 2.解决方式二&#xff1a;将此属性设置为true(本人试了…
阅读更多...
Vscode 修改C++版本

Vscode 修改C++版本

1. 首先要检查GCC版本&#xff0c;有的gcc版本过低会导致C版本升级不成功 可以用cmd&#xff0c;用gcc --version命令查看gcc版本 我这里就是gcc版本较低&#xff0c;不支持c17 需要先升级gcc版本 gcc与c对应的版本&#xff0c;大家可以在这位大佬的博客中看&#xff0c;写…
阅读更多...
闯关升级游戏特点,闯关小程序游戏开发

闯关升级游戏特点,闯关小程序游戏开发

闯关升级类游戏一直以来都备受玩家青睐&#xff0c;其独特的游戏性和吸引力让人们乐此不疲。这类游戏以挑战性关卡和角色成长为核心&#xff0c;让玩家在不断的冒险中获得成就感与乐趣。让我们一起深入探讨这类游戏的特点&#xff0c;以及为何它们如此受欢迎。 挑战性关卡设计…
阅读更多...
FPGA - 串口发送多字节数据

FPGA - 串口发送多字节数据

1&#xff0c;任务要求 关于uart串口接收与发送可以参考我的这篇博客&#xff1a;《FPGA-UART串口》。这篇博客实现了单字节发送与接收。 接下来&#xff0c;来使用串口发送多字节数据到电脑。 2&#xff0c;模块框图以及简单时序分析图 串口发送多字节数据的思路是把写入的…
阅读更多...
Windows提示“无法删除文件：无法读源文件或磁盘”怎么办？

Windows提示“无法删除文件：无法读源文件或磁盘”怎么办？

当用户在Mac电脑上创建一个文件&#xff0c;又将文件共享到Windows系统后&#xff0c;该文件可能无法被Windows正常识别和使用&#xff0c;并且在删除时出现“无法删除文件&#xff1a;无法读源文件或磁盘”的提示&#xff0c;这可能和Windows不支持Mac电脑创建的某些文件名有关…
阅读更多...
Jmeter扩展开发--自定义java取样器

Jmeter扩展开发--自定义java取样器

简介 jmeter内置了包括&#xff1a;http、https、tcp等各种协议的支持&#xff0c;通常情况只需要做简单的参数配置即可使用。但在某些特殊情况下&#xff0c;还是希望能做自定义压测处理&#xff0c;此时就涉及Jmeter的扩展开发自定义Java取样器&#xff0c;如下图所示&#…
阅读更多...
基于物联网的智能家居监测与控制系统（全套资料）

基于物联网的智能家居监测与控制系统（全套资料）

项目源码资料下载地址&#xff1a; http://comingit.cn/?id29 易学蔚来全套毕设演示&#xff08;看上哪个选那个&#xff09;&#xff1a; https://www.yuque.com/javagongchengshi/ccadbu/nh92kcpyqodhf07l 毕设服务真实反馈&#xff0c;在线观看&#xff1a; https://www.yu…
阅读更多...
opencv中的图像高斯模糊—GaussianBlur

opencv中的图像高斯模糊—GaussianBlur

高斯模糊&#xff08;Gaussian Blur&#xff09;是一种广泛应用于图像处理的平滑技术&#xff0c;其通过对图像应用高斯函数来减少图像噪声和细节。与简单平均模糊&#xff08;均值滤波&#xff09;不同&#xff0c;高斯模糊给予中心像素更高的权重&#xff0c;而远离中心的像素…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023