首页 前端知识 2.1HTML5基本结构

2.1HTML5基本结构

2024-05-08 10:05:25 前端知识 前端哥 767 763 我要收藏

    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>

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

    网页实际上有多种浏览模式,例如兼容模式,标准模式等。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引入了新的特性和元素,同时也取消了对部分过期元素的支持,因此如果在HTML5DOCTYPE声明下使用了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地址或目标targetHTML5文档中使用了相对路径时,浏览器会用<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) 字符集声明

    CharsetCharacter 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>标签中的namecontent属性来索引网页。

样式标签<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 GroupJPEG)格式,是第一个国际图像压缩标准。该格式的图像文件后缀名是.jpg.JPG两种形式。

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

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

 GIF格式

GIF格式指的是图像交换格式(Graphics Interchange FormatGIF),该格式的图像文件后缀名是.gif.GIF两种形式。

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

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

PNG格式

PNG格式指的是图像交换格式(Portable Network Graphic FormatPNG),该格式的图像文件后缀名是.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>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/7541.html
标签
评论
发布的文章

Unity读取Json的几种方法

2024-05-12 17:05:57

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!