初识 HTML5

最新推荐文章于 2022-08-27 18:47:12 发布

Blank memory

最新推荐文章于 2022-08-27 18:47:12 发布

阅读量1.2k

点赞数 2

分类专栏： HTML web

本文链接：https://blog.csdn.net/qq_43395428/article/details/105314353

版权

web 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

HTML

5 篇文章 1 订阅

订阅专栏

初识HTML5

标题

标题是对一段文字内容的概括和总结。书籍文本少不了标题，网页文本也不能没有标题。一篇文档的好坏，标题起到重要的作用。在越来越追求“视觉美感”的今天，一个好标题的设计对用户的留存尤为关键。例如，图2.1和图2.2所示的界面效果，同样的标题内容，却使用了不同的页面标签，显示的效果则大相径庭。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RLAvHzp3-1585995207198)(C:\Users\Jsck\Desktop\Web+Html+Css+JavaScript\第 1 篇：HTML 5 篇\2.初识 HTML5\web1.png)]$

标题标签

标题标签共有6个，分别是< hl>、< h2>、< h3>、 < h4>、 < h5>和< h6>,每个标签在字体大小上都有明显的区别,从< h1>标签到< h6>标签字体依次变小。< h1>标签表示最大的标题，< h6>标签表示最小的标题。一般使用< h1>标签来表示网页中最上层的标题，而且有些浏览器会默认把< h1>标签显示为非常大的字体，所以一些开发者会使用< h2>标签代替< h1>标签来显示最上层的标题。

标题标签的语法格式如下:

<h1>文本内容</h1>
<h2>文本内容</h2>
<h3>文本内容</h3>
<h4>文本内容</h4>
<h5>文本内容</h5>
<h6>文本内容</h6>

说明: 在HTML5中，标签大都是由起始标签和结束标签组成的。例如，< h1>标签在编码使用时，首先编写< hl>起始标签和< /hl>结束标签，然后将文本内容放入两个标签之间。

接下来通过一个实例，巧用< h1>、 < h4>和< h5>标签，实现一则关于程序员笑话的对话内容。把“程序猿的笑话”放入< h1>标签中，代表文章的标题，把发布时间、发布者和阅读数等内容放入较小字号的< h5>标签中，把笑话的对话内容放入字号适中的< h4>标签中。

<!DOCTYPE html>
<html>
<head>
<!--指定页面编码格式-->
<meta charset="UTF-8">
<!--指定页头信息-->
	<title>程序猿的笑话</title>
</head>
<body>
	<!--表示文章标题-->
	<h1>程序猿的笑话</h1>
	<!--表示相关发布信息-->
	<h5>发布时间: 19:20 03/241发布者: 程序源|阅读数: 156次</h5>
	<!--表示对话内容--> 
	<h4>甲:《C++面向对象程序设计》这本书怎么比《c程序设计语言》厚了好几倍? </h4>
	<h4>乙:当然了，有“对象”后肯定麻烦呀! </h4>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SGSj2CwK-1585995207199)(C:\Users\Jsck\Desktop\Web+Html+Css+JavaScript\第 1 篇：HTML 5 篇\2.初识 HTML5\web2.png)]$

常见错误

如果结束标签漏加“/”，比如把< /h1>写成< h1>,则会导致浏览器认为是新标题标签的开始，从而导致页面布局错乱。例如，在下面代码的第2行就将< /h1>结束标签写成了< hl>开始标签。

<!DOCTYPE html>
<html>
<head>
<!--指定页面编码格式-->
<meta charset="UTF-8">
<!--指定页头信息-->
	<title>程序猿的笑话</title>
</head>
<body>
    <!--表示文章标题-->
    <h1>程序猿的笑话<h1>
    <!--表示相关发布信息-->
    发布时间: 19:20 03/24 |发布者:程序源|阅读数: 156次
    <!--表示对话内容-->
    <h4>甲:《C++面向对象程序设计》这本书怎么比《C程序设计语言》厚了好几倍? </h4>
    <h4>乙:当然了，有“对象”后肯定麻烦呀! </h4>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SOALsP65-1585995207200)(C:\Users\Jsck\Desktop\Web+Html+Css+JavaScript\第 1 篇：HTML 5 篇\2.初识 HTML5\web3.png)]$

标题的对齐方式

在默认情况下，标题文字是左对齐的。而在网页的制作过程中，可以实现标题文字的编排设置。最常用的就是关于对齐方式的设置，可以为标题标签添加align 属性进行设置。

语法格式如下:

<h1 align="对齐方式">文本内容</h1>

在该语法中,align属性需要设置在标题标签的后面,具体的对齐方式属性值

属性值	含义
left	文字左对齐
center	文字居中对齐
right	文字右对齐

**注意:**在编写代码的过程中，请注意添加双引号。

接下来，使用标题标签中的align属性,实现图书商品介绍的文字展示。首先将图书名称、图书作者、出版社等介绍内容放入

标签内，然后在每个标题标签中添加align属性，属性值设为center。具体代码如下。

<!DOCTYPE html>
<html>
<head>
    <!--指定页面编码格式-->
    <meta charset="UTF-8">
    <!--指定页头信息-->
    <title>介绍图书商品</title>
</head>
<body>
    <!--显示商品图标-->
    <h1 align="center"><img src="java.jpg"/></h1>
    <!--显示图书名称-->
    <h5 align="center">书名：《Java从入门到精通》</h5>
    <!--显示图书作者-->
    <h5 align="center">作者：ooxx</h5>
    <!--显示出版社-->
    <h5 align="center">出版社：人民邮电出版社</h5>
    <!--显示图书出版时间-->
    <h5 align="center">出版时间：2020年8月</h5>
    <!--显示图书页数-->
    <h5 align="center">页数：492页</h5>
    <!--显示图书价格-->
    <h5 align="center">价格：52.00元</h5>
</body>
</html>

**注意:**在代码第11 行使用了图像标签。图像标签可以将外部图片引入当前网页内。有关图像标签的具体使用方法。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8jJCS0GP-1585995207201)(C:\Users\Jsck\Desktop\Web+Html+Css+JavaScript\第 1 篇：HTML 5 篇\2.初识 HTML5\web4.png)]$

文字

除标题文字外，在网页中普通的文字信息也不可缺少，而多种多样的文字装饰效果更可以让用户眼前一亮，记忆深刻。在网页的编码中，可以直接在< body>和< /body>标签之间输入文字，这些文字可以显示在页面中，同时可以为这些文字添加具有装饰效果的标签，如斜体、下画线等。下面将详细讲解这些文字装饰标签。

文字的斜体、下画线、删除线

在浏览网页时，常常可以看到一些特殊效果的文字，如斜体字、带下画线的文字和带删除线的文字，而这些文字效果也可以通过设置HTML语言的标签来实现。

语法格式如下:

<em>斜体内容</em>
<u>带下画线的文字</u>
<strike>带删除线的文字</strike>

这几种文字装饰效果的语法类似，只是标签不同。其中，斜体字也可以使用标签或标识。

接下来，使用< em>文字斜体标签、< u>文字下画线标签和< strike>文字删除线标签，为图书商品的推荐内容增添更多的文字特效，可以让读者眼前一亮，提高商品购买率。例如，如果商品打折，则可以为商品原来价格的文字添加< strike>删除线标签，表示不再以原来价格进行销售。

<!DOCTYPE html>
<html>
<head>
    <!--指定页面编码格式-->
    <meta charset="UTF-8">
    <!--指定页头信息-->
    <title>斜体、下划线、删除线</title>
</head>
<body>
    <!--显示商品图片-->
    <img src="JavaScript.jpg"/>
    <!--显示图书名称，书名文字用斜体效果-->
    <h3>书名：<em>《JavaScript从入门到精通》</em></h3>
    <!--显示图书作者-->
    <h3>作者：ooxx</h3>
    <!--显示出版社-->
    <h3>出版社：人民邮电出版社</h3>
    <!--显示出版时间，文字用下划线效果-->
    <h3>出版时间：<u>2020年10月</u></h3>
    <!--显示页数-->
    <h3>页数：492页</h3>
    <!--显示图书价格，文字使用删除线效果-->
    <h3>原价：<strike>45.00</strike>元  促销价格：52.00元</h3>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RJhJdtGI-1585995207201)(C:\Users\Jsck\Desktop\Web+Html+Css+JavaScript\第 1 篇：HTML 5 篇\2.初识 HTML5\web5.png)]$

文字的上标与下标

除设置不同的文字装饰效果外,有时还需要设置一种特殊的文字装饰效果,即上标和下标。上标和下标经常会在数学公式或方程式中出现。

语法格式如下:

<sup>上标标签内容</sup>
<sub>下标标签内容</sub>

在该语法中,上标标签和下标标签的使用方法基本相同,只需要将文字放在标签中间即可。

接下来，使用< sup> 上标标签和< sub>下标标签，实现数学方程式的网页展示。首先将数学方程式中的数字符号全部输入，比如输入方程式“X3+9X2-3=0",然后将需要置上或置下的数字符号放入上标或下标标签中。

<!DOCTYPE html>
<html>
<head>
    <!--指定页面编码格式-->
    <meta charset="UTF-8">
    <!--指定页头信息-->
    <title>上标和下标</title>
</head>
<body>
	<!--表示文章标题-->
	<h1 align="center">上标和下标标签</h1>
	<h3 align="center">在数字计算中:</h3>
	<!--使用上标标签，将文字至上-->
	<h3 align="center">上标：X<sup>3</sup>+9X<sup>2</sup>-3=0</h3>
	<!--使用下标标签，将文字至下-->
	<h3 align="center">下标：3X<sub>1</sub>+2X<sub>2</sub>=10</h3>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kRwKk9L6-1585995207202)(C:\Users\Jsck\Desktop\Web+Html+Css+JavaScript\第 1 篇：HTML 5 篇\2.初识 HTML5\web6.png)]$

特殊文字符号

在网页的制作过程中，特殊文字符号(如引号、空格等)也需要使用代码进行控制。一般情况下，特殊文字符号的代码由前缀“&”、字符名称和后缀分号“;” 组成。其使用方法与空格符号类似，具体如表所示。

符号	属性值	含义
"	& quot;	引号
<	& It;	左尖括号
>	& gt;	右尖括号
X	& times;	乘号
ｃ	& sect;	小节符号
	& nbsp;	空格占位符

下面巧用特殊文字符号，绘制出一幅可爱小狗的字符画，用来表示未找到的内容,或者错误的页面内容。在真正的网页设计中,需要设计出应对网页出错或未找到网页的解决方案页面，俗称“404页面”。利用字符画的趣味表现手法，可以进一步提高用户体验。

<!DOCTYPE html>
<html>
<head>
    <!--指定页面编码格式-->
    <meta charset="UTF-8">
    <!--指定页头信息-->
    <title>特殊文字符号</title>
</head>
<body>
<!--表示文章标题-->
<h1 align="center">汪汪！你想找的页面让我吃喽！</h1>
<!--绘制可爱小狗的字符号-->
<pre align="center">
.----.
_.'__    `.
.--($)($$)---/#\
.' @          /###\
:         ,   #####
`-..__.-' _.-\###/
`;_:    `"'
.'"""""`.
/,  hi ,\\
//  你好!  \\
`-._______.-'
___`. | .'___
(______|______)
</pre>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xzVG010p-1585995207203)(C:\Users\Jsck\Desktop\Web+Html+Css+JavaScript\第 1 篇：HTML 5 篇\2.初识 HTML5\web7.png)]$

段落

一块块砖瓦组合就建成了高楼大厦，一行行文字组合就形成了段落篇章。在实际的文本编码中，在输入完一段文字后，按下< Enter>键就生成了一个段落，但是在HTML5中需要通过标签来实现段落的效果。下面具体介绍与段落相关的一些标签。

段落标签

在HTML5中，段落效果是通过< p>标签来实现的。< p>标签会自动在其前后创建一些空白，浏览器则会自动添加这些空间。

语法格式如下:

<p>段落文字</p>

其中，可以使用成对的< p>标签来包含段落，也可以使用单独的< p>标签来划分段落。

<!DOCTYPE html>
<html>
<head>
    <!--指定页面编码格式-->
    <meta charset="UTF-8">
    <!--指定页头信息-->
    <title>段落标签</title>
</head>
<body>
<!--使用段落标签，进行创意性排版-->
<p>╭═════════┤   学院，专注编程教育十八年 ├══════════╮</p>
<p>║ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;学院，
    是吉林省明日科技有限公司倾力打造的在线实用&nbsp;&nbsp;║</p>
<p>║&nbsp;&nbsp;技能学习平台，该平台于2020年正式上线，主要为学习者提供海&nbsp;║</p>
<p>║&nbsp;&nbsp;量、优质的课程，课程结构严谨，用户可以根据自身的学习程度,&nbsp;║</p>
<p>║&nbsp;&nbsp;自主安排学习进度。我们的宗旨是，为编程学习者提供一站式服&nbsp; ║</p>
<p>║&nbsp;&nbsp;务，培养用户的编程思维，小白手册，视频教程，一学就会。&nbsp;&nbsp;&nbsp; ║</p>
<p>╰═════════┤网址:http://www.a.com ├══════════╯</p>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dxa9nZlD-1585995207203)(C:\Users\Jsck\Desktop\Web+Html+Css+JavaScript\第 1 篇：HTML 5 篇\2.初识 HTML5\web8.png)]$

段落的换行标签

段落与段落之间是隔行换行的，这样会导致文字的行间距过大，这时可以使用换行标签来完成文字的紧凑换行显示。

语法格式如下:

<p>
    一段文字<br/>一段文字
</p>

其中，< br/>标签代表换行。如果要多次换行，则可以连续使用多个换行标签。

接下来，巧用< br/>换行标签，实现唐诗《望庐山瀑布》中诗句的页面布局。通常可以使用多个< p>段落标签达到换行的目的，也可以使用< br/>换行标签，在< p> 段落标签内部进行换行。

<!DOCTYPE html>
<html>
<head>
    <!--指定页面编码格式-->
    <meta charset="UTF-8">
    <!--指定页头信息-->
    <title>段落的换行标签</title>
</head>
<body>
    <!--使用段落标签书写古诗-->
    <p align="center">
        <!--使用2个换行标签-->
        《望庐山瀑布》&nbsp;&nbsp;&nbsp;&nbsp;李白<br><br>
        <!--使用1个换行标签-->
        日照香炉生紫烟，遥看瀑布挂前川。<br/>
        <!--使用1个换行标签-->
        飞流直下三千尺，疑是银河落九天。<br/>
    </p>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HWXgKa1E-1585995207204)(C:\Users\Jsck\Desktop\Web+Html+Css+JavaScript\第 1 篇：HTML 5 篇\2.初识 HTML5\web9.png)]$

常见错误

< br/>换行标签的语法比较特殊，它并不是由开始标签和结束标签组成的，所以初学者经常会写错。例如，在下面代码的第4行，就将<b/r> 换行标签错误地写成了<b/r/>。

<!DOCTYPE html>
<html>
<head>
    <!--指定页面编码格式-->
    <meta charset="UTF-8">
    <!--指定页头信息-->
    <title>段落的换行标签</title>
</head>
<body>
    <!--使用段落标签书写古诗-->
    <p align="center">
        <!--使用2个换行标签-->
        《望庐山瀑布》&nbsp;&nbsp;&nbsp;&nbsp;李白<b/r><b/r/>
        <!--使用1个换行标签-->
        日照香炉生紫烟，遥看瀑布挂前川。<br/>
        <!--使用1个换行标签-->
        飞流直下三千尺，疑是银河落九天。<br/>
    </p>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pDUZdada-1585995207204)(C:\Users\Jsck\Desktop\Web+Html+Css+JavaScript\第 1 篇：HTML 5 篇\2.初识 HTML5\web10.png)]$

段落的原始排版标签

在网页的制作过程中，一般是通过各种标签对文字进行排版的。但在实际应用中，往往需要一些特殊的排版效果,这时使用标签控制非常麻烦。解决的方法就是使用原始排版标签< pre>进行排版，如空格、制表符等。

语法如下:

<pre>
	文本内容
</pre>

接下来，使用

 原始排版标签，绘制一幅“元旦快乐”的字符画。原始排版标签会保留代码中的原始文字格式,利用此特性，可以通过键盘上的特殊符号绘制出多种多样的字符画效果。本实例中使用键盘上的键，绘制了一-幅“元旦快乐”的字符画，可爱生动，表现力强。

<!DOCTYPE html>
<html>
<head>
    <!--指定页面编码格式-->
    <meta charset="UTF-8">
    <!--指定页头信息-->
    <title>原始排版标签</title>
</head>
<body>
<h1>原始排版标签--pre</h1>
<!--使用原始排版标签，输入文字字符画-->
<pre>
            oooooooo           ooooooooo       o       o            oooooooo
          oooooooooooo         o       o       o    ooooooo         o   o
              o  o             ooooooooo      oo       o  o         oooooooooo
              o  o             o       o     o oo   ooooooooo           o
             o   o             ooooooooo       o  o    o             o  o o
            o    o     o                       o      o o           o  oo   o
           o     ooooooo     ooooooooooooo     o     o    o        o    o    o
</pre>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Su8ogOe0-1585995207204)(C:\Users\Jsck\Desktop\Web+Html+Css+JavaScript\第 1 篇：HTML 5 篇\2.初识 HTML5\web11.png)]$

水平线

水平线用于段落与段落之间的分隔，使文档的结构更清晰、文字的编排更整齐。水平线自身具有很多属性，如宽度、高度、颜色、排列对齐等。在HTML5中经常会用到水平线，合理使用水平线可以获取非常好的页面装饰效果。篇内容繁杂的文档,如果合理放置几条水平线,就会变得层次分明、便于阅读。

水平线标签

在HTML5中使用< hr>标签来创建一条水平线。水平线可以在视觉上将文档分割成各个部分。在网页中输入一个< hr>标签，就添加了-条默认样式的水平线。

语法如下:

<hr>

接下来，使用< hr>水平线标签，制作一个果酱制作原料的列表清单。< hr>水平线标签经常用在段落之间起到提醒分组的作用，也可以使用该标签制作一些简单的列表清单，比如餐厅菜:单、食品原料等

<!DOCTYPE html>
<html>
<head>
    <!--指定页面编码格式-->
    <meta charset="UTF-8">
    <!--指定页头信息-->
    <title>水平线标签</title>
</head>
<body>
<!--表示文章主题-->
<h1 align="center">果酱制作的材料准备</h1>
<!--使用水平线来画表格-->
<hr/>
<p align="center">苹果&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;两颗</p>
<!--使用水平线来画表格-->
<hr/>
<p align="center">方形酥皮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;四片</p>
<!--使用水平线来画表格-->
<hr/>
<p align="center">柠檬汁&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;一匙</p>
<!--使用水平线来画表格-->
<hr/>
<p align="center">砂糖&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;一匙</p>
<!--使用水平线来画表格-->
<hr/>
<p align="center">肉挂粉&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;适量</p>
<!--使用水平线来画表格-->
<hr/>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EwjhSTwf-1585995207205)(C:\Users\Jsck\Desktop\Web+Html+Css+JavaScript\第 1 篇：HTML 5 篇\2.初识 HTML5\web12.png)]$

水平线标签的宽度

在默认情况下，在网页中添加的水平线是100%的宽度，而在实际创建网页时，可以对水平线的宽度进行设置。

语法如下:

<hr width="水平线宽度">

在该语法中，水平线的宽度值既可以是确定的像素值，也可以是窗口宽度值的百分比。

接下来，利用< hr>水平线标签中的宽度属性，实现一则微故事的页面文字装饰效果。首先使用< p>段落标签将“故事是这样开始的:”文本内容放入，然后在< p>标签代码上方添加< hr>水平线标签，并且添加width属性，属性值为120。

<!DOCTYPE html>
<html lang="en">
<head>
    <!--指定页面编码格式-->
    <meta charset="UTF-8">
    <!--指定页头信息-->
    <title>水平线的宽度、高度、颜色</title>
</head>
<body>
<!--设置水平线的宽度，居左-->
<hr width="120" align="left">
<p>故事是这样开始的:</p>
<!--使用段落标签，输入故事内容-->
<p align="center">
    当初看《简爱》的时候，哭得稀里哗啦
</p>
<p align="center">
    泪点在哪里呢？
</p>
<p align="center">
    我喜欢悲伤的故事
</p>
<p align="center">
    不喜欢悲伤的结局
</p>
<!--设置水平线的宽度，居右-->
<hr width="120" align="right">
<p align="right">故事就这样结束的<p>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tUfDxWTh-1585995207205)(C:\Users\Jsck\Desktop\Web+Html+Css+JavaScript\第 1 篇：HTML 5 篇\2.初识 HTML5\web13.png)]$

Blank memory

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初识 HTML5

初识HTML5标题文字段落水平线标题标签标题的对齐方式文字的斜体,下画线,删除线文字的上标与下标特殊文字符号段落标签段落的换行标签段落的原始排版标签水平线标签水平线标签的宽度初识HTML5标题标题是对一段文字内容的概括和总结。书籍文本少不了标题，网页文本也不能没有标题。一篇文档的好坏，标题起到重要的作用。在越来越追求“视觉美感”的今天，一个好标题的设计对用户的留存尤为关键。例如，图2.1和...
复制链接

扫一扫

专栏目录