初识HTML5

Posted 橘猫吃不胖~

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了初识HTML5相关的知识,希望对你有一定的参考价值。

学习目标:
(1)了解html和HTML5的基本结构,能够区分两者的结构差异。
(2)熟悉HTML头部相关标签。
(3)掌握HTML文本控制标签的用法,能够使用该标签定义文本。
(4)掌握HTML图像标签的用法,能够自定义图像。

1.1 HTML5的优势

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

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

兼容:HTML5并不是对之前HTML语言颠覆性的革新,它的核心理念就是要保持与过去技术的完美衔接,因此HTML5有很好的兼容性。
具体表现:
①HTML5定义了一些可以省略结束标签的元素。
②HTML5中又恢复了对大写标签的支持。
③HTML5制定了一个通用的标准。

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

易用:作为当下流行的标签语言,HTML5严格遵循 “简单至上”的原则。
具体表现:
①简化的字符集声明。
②简化的DOCTYPE。
③以浏览器原生能力(浏览器自身特性功能)替代复杂的javascript代码。

1.2 HTML5全新的结构

<!DOCTYPE>标签:位于文档的最前面,用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范。
<html>标签:位于<!DDOCTYPE> 标签之后,也称为根标签,用于告知浏览器其自身是一个 HTML 文档。
<head>标签:用于定定义HTML文档的头部信息,也称为头部标签,紧跟在标签之后,主要用来封装其他位于文档头部的标签。
<body>标签用于定定义HTML文档所要显示的内容,也称为主体标签。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于标签内。

<!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>

1.3 标签概述

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

1.3.1 标签的分类

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

为什么要有单标签?

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

1.3.2 标签的关系

嵌套关系
下面代码中,<p>标签中包含font标签,<font>标签中又包含了一个<font>标签。这就是标签的嵌套关系。

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


并列关系
并列关系也称为兄弟关系,就是两个标签处于同一级别,并且没有包含关系。在HTML标签中,无论是单标签还是双标签,都可以拥有并列关系。

下面的代码中<p>标签与<p>标签之间相互并列

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

1.3.3 标签属性

语法格式:<标记名 属性1="属性值1" 属性2="属性值2" …> 内容 </标记名>

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

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


什么是键值对?

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

1.3.4 HTML5文档头部相关标签

<title>标签用于定义HTML页面的标题,即给网页取一个名字,必须位于标签之内。
<meta />标签用于定义页面的元信息,可重复出现在头部标签中。

下面这段代码就是HTML5文档头部的代码:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>橘猫吃不胖</title>
</head>

1.4 文本控制标签

1.4.1 页面格式化标签

(1)标题标签:<hn>文本</hn> , n的取值在1~6之间,数字越大字体越小,可以自动换行。
(2)段落标签:<p>内容</p>,会自动换行。
(3)显示文本标签:<span>内容</span>,不会自动换行.
(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>

1.4.2 文本样式标签

文本样式标签:<font></font>

属性名含义
face设置文字的字体,例如微软雅黑、黑体、宋体等
size设置文字的大小,可以取1到7之间的整数值
color设置文字颜色
<font face="楷体" size="5" color="purple">文本样式标签</font>

1.4.3 文本格式化标签

(1)文字加粗:<b></b><strong></strong>
(2)斜体:<i></i><em></em>
(3)删除线:<s></s><del></del>
(4)下划线:<u></u><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>

1.4.4 文本语义标签

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

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

1.4.5 特殊字符标签

特殊字符描述代码
空格&nbsp;
210上标<sup></sup>
O2下标<sub></sub>
©版权符号&copy;
®注册商标&reg;
°摄氏度&deg;
±正负号&plusmn;
÷除号&divide;
    2<sup>10</sup>&nbsp;O<sub>2</sub>&nbsp;&copy;&nbsp;
    &reg;&nbsp;&deg;&nbsp;&plusmn;&nbsp;&divide;

1.5 图像标签

1.5.1 常见图像格式

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

1.5.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">

1.5.3 相对路径和绝对路径

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

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

以上是关于初识HTML5的主要内容,如果未能解决你的问题,请参考以下文章

初识Spring源码 -- doResolveDependency | findAutowireCandidates | @Order@Priority调用排序 | @Autowired注入(代码片段

十个html5代码片段,超实用,一定要收藏

Java初识方法

初识HTML网页代码的基本结构

初识 HTML5 Video Blob

初识OpenGL 片段着色器(Fragment Shader)