初识HTML5

橘猫吃不胖～

已于 2022-05-07 11:49:08 修改

阅读量521

点赞数 2

分类专栏： HTML 文章标签： html5 html

于 2021-10-02 23:14:16 首次发布

本文链接：https://blog.csdn.net/m0_46612221/article/details/120577617

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

初识HTML5

1 HTML5的优势
2 HTML5的结构
3 标签概述
4 HTML5文档头部相关标签
5 文本控制标签
6 图像标签

1 HTML5的优势

HTML5作为HTML的最新版本，是HTML的传递和延续。经历HTML4.0、XHTML再到HTML5从某种意义上讲，这是HTML超文本标签语言的更新与规范过程。因此，HTML5并没有给用户带来多大的冲击，大部分标签在HTML5版本中依然适用。

HTML5的优势主要体现在兼容、合理、易用三个方面。

兼容：HTML5并不是对之前HTML语言颠覆性的革新，它的核心理念就是要保持与过去技术的完美衔接，因此HTML5有很好的兼容性。

具体表现：
①HTML5定义了一些可以省略结束标签的元素。
②HTML5中又恢复了对大写标签的支持。
③HTML5制定了一个通用的标准。

合理：HTML5中增加和删除的标签都是对现有的网页和用户习惯进行分析、概括而推出的。

易用：作为当下流行的标签语言，HTML5严格遵循 “简单至上”的原则。

具体表现：
①简化的字符集声明。
②简化的DOCTYPE。
③以浏览器原生能力（浏览器自身特性功能）替代复杂的JavaScript代码。

2 HTML5的结构

<!DOCTYPE>标签：位于文档的最前面，用于向浏览器说明当前文档使用的 HTML 或 XHTML 标准规范。
<html>标签：位于<!DOCTYPE>标签之后，也称为根标签，用于告知浏览器其自身是一个 HTML 文档。
<head>标签：用于定义HTML文档的头部信息，也称为头部标签，是所有头部元素的容器，紧跟在<html>标签之后，主要用来封装其他位于文档头部的标签。
<body>标签用于定义HTML文档所要显示的内容，也称为主体标签。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标签内。
请添加图片描述
<!DOCTYPE html>表示当前的网页支持html5标准
<html lang="en">表示语言为英文
<meta charset="UTF-8"> 指定页面的编码格式（字符集）
<meta name="viewport" content="width=device-width, initial-scale=1.0">表示自适应终端的窗口
<title>Document</title>表示网页标题

网页文件的扩展名必须是.html或.htm，一个网页的基本结构如下：

<html>
    <head>
    </head>
    <body>
    <!--网页主体-->
    </body>
</html>

如果要给网页添加背景颜色，则在body标签中添加bgcolor属性，如果要给网页添加背景图片，则在body标签中添加background属性。

格式为：

<body bgcolor="背景颜色" background="背景图片位置"></body>

3 标签概述

在HTML页面中，带有“<>”符号的元素被称为HTML标签，如上面提到的<html>、<head>、<body>都是HTML标签。所谓标签就是放在“<>”符号中表示某个功能的编码命令，也称为HTML标签或HTML元素，统一称作HTML标签。

3.1 标签的分类

类别	概述	形式
双标签	也称体标签，是指由开始和结束两个标签符组成的标签。	`<标签名>内容</标签名>`
单标签	单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。	`<标签名/>`

为什么要有单标签？

HTML标签的作用原理就是选择网页内容，从而进行描述，也就是说需要描述哪个元素，就选择哪个元素，所以才会有双标签的出现，用于定义标签作用的开始与结束。而单标签本身就可以描述一个功能，不需要选择。
例如，水平线标签<hr/>，按照双标签的语法，它应该写成“<hr></hr>”，但是水平线标签不需要选择，本身就代表一条水平线，此时写成双标签就显得有点多余，但是又不能没有结束符号，所以在标签名称后面加一个关闭符，即<标签名 />。

3.2 标签的关系

①嵌套关系。下面代码中，标签中包含font标签，标签中又包含了一个标签。这就是标签的嵌套关系。

    <p align="center">
        <font color="#979797" size="2">
            更新时间：2021年10月2日
            <font color="blue">
                橘猫吃不胖~
            </font>
        </font>
    </p>

在这里插入图片描述
②并列关系。并列关系也称为兄弟关系，就是两个标签处于同一级别，并且没有包含关系。在HTML标签中，无论是单标签还是双标签，都可以拥有并列关系。下面的代码中标签与标签之间相互并列。

    <p align="center">
        橘猫吃不胖
    </p>
    <P align="center">
        2021年10月2日
    </P>

在这里插入图片描述

3.3 标签属性

标签语法格式：

<标记名 属性1="属性值1" 属性2="属性值2" …> 内容 </标记名>

例如：下面这行代码中，align为属性名，center为属性值，表示这行文字居中对齐。

<h1 align="center">橘猫吃不胖~</h1>

在这里插入图片描述
什么是键值对？

“键值对”可以理解为对“属性”设置“属性值”。键值对有多种表现形式，例如color="red" 、width:200px;等，其中color和width即为“键值对”中的“键”（英文key），red和200px为“键值对”中的“值”（英文value）。“键值对”广泛地应用于编程中，HTML属性的定义形式“属性="属性值"”只是“键值对”中的一种。

4 HTML5文档头部相关标签

1、base标签：为页面上的所有链接规定默认地址或默认目标。

<base href="url" target="属性值">

属性	含义	属性值
href	规定页面上所有相对链接的基准url
target	在何处打开页面中所有的链接	`_blank`、`_parent`、`_self`、`_top`、`framename`

2、title 标签：用于定义HTML页面的标题，即给网页取一个名字。里面的内容可以帮我们提高搜索引擎优化（SEO）。

<title>网页名称</title>

示例代码：

<head>
    <title>橘猫吃不胖</title>
</head>

请添加图片描述
3、link 标签：定义文档与外部资源的关系。如：引入外部样式。

<link rel="类型" href="外部资源地址">
<!-- rel属性值为stylesheet，可以引入CSS样式-->
<!-- rel属性值为shortcut icon，可以引入网页的logo-->

4、style 标签：定义内嵌样式

    <style>
        /* 编写CSS样式 */
    </style>

5、script标签：引入外部脚本，或者定义内嵌脚本等。

<!-- 引入外部的脚本 -->
<script src="外部脚本地址"></script>

<!-- 定义内嵌脚本 -->
<script>
    // 编写JavaScript代码
</script>

6、meta标签：用于定义页面的元信息，不包含任何内容。

属性	含义	属性值
`charset`	定义网页文档的字符集	utf-8等
name+content	定义页面相关的信息	author：作者 website：网页地址 copyright：版权信息 keywords：关键字，用于SEO description：网页描述信息 robots：搜索引擎索引方式，决定页面是否需要索引 viewport：移动端常用视口设置
http-equiv+content	定义请求相关的信息	expires：指定网页过期时间；refresh 网页等待一段时间后跳转到某个url pragma：禁止浏览器从本地缓存读取网页，即没网就不能访问网页 set-cookie：设置cookie，可以指定过期时间

    <!-- 定义网页的字符集 -->
    <meta charset="utf-8">

    <!-- 网页的作者 -->
    <meta name="author" content="橘猫吃不胖">
    <!-- 网页的地址 -->
    <meta name="website" content="网页地址">
    <!-- 网页的版权信息 -->
    <meta name="copyright" content="版权信息">
    <!-- 网页关键字，用于SEO -->
    <meta name="keywords" content="橘猫吃不胖">
    <!-- 网页描述 -->
    <meta name="description" content="一个小网页">
    <!-- 网页索引方式 -->
    <meta name="robots" content="all">
    <!-- 移动端配置 -->
    <!-- width：网页宽度；height：网页高度；initial-scale：初始缩放比例；
        minimum-scale：允许用户缩放到的最小比例；maximum-scale：允许用户缩放到的最大比例；
        user-scalable：用户是否可以手动缩（yes / no） -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 指定网页过期时间，如果过期要从服务器上下载 -->
    <meta http-equiv="expires" content="过期时间">
    <!-- 等待一端时间跳转到url -->
    <meta http-equiv="refresh" content="时间; url=具体url">
    <!-- 禁止浏览器从本地缓存读取网页，即没有网就不能访问到页面 -->
    <meta http-equiv="pragma" content="no-cache">
    <!-- 设置cookie，可以指定过期时间 -->
    <meta http-equiv="set-cookie" content="过期时间">

5 文本控制标签

5.1 标题、段落、文本、水平线标签

（1）标题标签：<hn>文本</hn> , n的取值在1~6之间，数字越大字体越小，可以自动换行。
（2）段落标签：内容，会自动换行。
（3）显示文本标签：内容，不会自动换行.
（4）水平线标签: <hr />

属性	含义	属性值
align	设置水平线对齐方式	left（左）、right（右）、center（居中，默认）
size	设置水平线粗细	以像素为单位，默认为2像素
color	设置水平线颜色	可用颜色名称或十六进制#RGB、rgb(r,g,b)。
width	设置水平线的宽度	可以是确定的像素，也可以是浏览器窗口的百分比，默认为100%。

（5）居中标签：<center></center>

    <h1>h1标题标签</h1>
    <p>段落标签，可以自动换行</p>
    <span>显示文本，不会自动换行</span>
    <!--水平线标签-->
    <hr align="center" size="4" color="orange" width="100">
    <center>居中标签</center>

在这里插入图片描述

5.2 文本样式标签font

<font face="楷体" size="5" color="purple">文本样式标签</font>

属性名	含义
face	设置文字的字体，例如微软雅黑、黑体、宋体等
size	设置文字的大小，可以取1到7之间的整数值
color	设置文字颜色

在这里插入图片描述

5.3 加粗、斜体、删除线、下划线标签

（1）文字加粗： 或 
（2）斜体： 或 
（3）删除线：<s></s> 或 <del></del>
（4）下划线： 或 <ins></ins>

    <b>使用b标签文字加粗</b><strong>使用strong标签文字加粗</strong>
    <br>
    <i>使用i标签斜体</i><em>使用em标签斜体</em>
    <br>
    <s>使用s标签删除线</s><del>使用del标签删除线</del>
    <br>
    <u>使用u标签下划线</u><ins>使用ins下划线</ins>

在这里插入图片描述

5.4 高亮、引用标签

（1）mark标签：在文本中高亮显示某些字符
（2）cite标签：引用。通常用于指定内容

    在文本中<mark>高亮</mark>显示某些字符
    <br>
    <cite>橘猫吃不胖</cite>

在这里插入图片描述

5.5 特殊字符标签

特殊字符	描述	代码
	空格	` `
2¹⁰	上标	`<sup></sup>`
O₂	下标	`<sub></sub>`
©	版权符号	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
÷	除号	`÷`

    2<sup>10</sup>&nbsp;O<sub>2</sub>&nbsp;&copy;&nbsp;
    &reg;&nbsp;&deg;&nbsp;&plusmn;&nbsp;&divide;

在这里插入图片描述

6 图像标签

6.1 常见图像格式

常见的图像格式：
GIF：支持动画、采用无损压缩、支持透明处理。通常用来做Logo、色彩相对单一的图像。
PNG：体积小、支持透明、不支持动画、颜色过渡平滑。
JPG(JPEG)：支持的颜色多（超过256种）、体积大、采用有损压缩技术。

6.2 图像标签< img />

图像标签：<img/>

属性	概述
src	用于指定图像文件的路径和文件名
alt	图像的替换文本属性，图片加载异常时的提示信息
width	设置图片的宽度
height	设置图片的高度
border	为图像添加边框、设置边框的宽度。
title	鼠标悬停在图像上的提示信息
vspace	调整垂直边距
hspace	调整水平边距
align	图像的对齐属性align。用于调整图像的位置，属性值有left、right、top、middle

<img src="#" alt="图片加载失败，请重试！">
<img src="./imges/jumao.jfif" width="500" height="400" border="2" title="橘猫的图片" vspace="10" hspace="10" align="right">

请添加图片描述

6.3 相对路径和绝对路径

实际工作中，通常新建一个文件夹专门用于存放图像文件。这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。通过设置“路径”来帮助浏览器找到图像文件。

绝对路径：绝对路径一般是指带有盘符的路径，例如“D:\HTML+CSS网页制作\chapter02\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。
相对路径：相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。
./ ：代表当前文件夹(目录)
…/：代表当前文件夹的上一级文件夹(目录)