初识 HTML5

阅读量：3941 次

发布时间：2019-05-24

本文共 5956 字，大约阅读时间需要 19 分钟。

初识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>标签来显示最上层的标题。

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

文本内容
文本内容
文本内容
文本内容
文本内容
文本内容

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

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


   
   
   	程序猿的笑话	
   	程序猿的笑话
	
   	发布时间: 19:20 03/241发布者: 程序源|阅读数: 156次
	
    	甲:《C++面向对象程序设计》这本书怎么比《c程序设计语言》厚了好几倍? 
	乙:当然了，有“对象”后肯定麻烦呀!

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

常见错误

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


   
   
   	程序猿的笑话    
       程序猿的笑话
    
        发布时间: 19:20 03/24 |发布者:程序源|阅读数: 156次    
        
甲:《C++面向对象程序设计》这本书怎么比《C程序设计语言》厚了好几倍? 
    乙:当然了，有“对象”后肯定麻烦呀!

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

标题的对齐方式

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

语法格式如下:

文本内容

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

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

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

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

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

    
       
       
       介绍图书商品    
       
    
       书名：《Java从入门到精通》
    
       作者：ooxx
    
       出版社：人民邮电出版社
    
       出版时间：2020年8月
    
       页数：492页
    
       价格：52.00元

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

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

文字

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

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

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

语法格式如下:

斜体内容带下画线的文字
   
    带删除线的文字

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

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

    
       
       
       斜体、下划线、删除线    
           
       书名：《JavaScript从入门到精通》
    
       作者：ooxx
    
       出版社：人民邮电出版社
    
       出版时间：2020年10月
    
       页数：492页
    
       原价：
    
     45.00
    元  促销价格：52.00元

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

文字的上标与下标

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

语法格式如下:

^{上标标签内容}_{下标标签内容}

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

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

    
       
       
       上标和下标	
   	上标和下标标签
	在数字计算中:
	
   	上标：X³+9X²-3=0
	
   	下标：3X₁+2X₂=10

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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页面”。利用字符画的趣味表现手法，可以进一步提高用户体验。

    
       
       
       特殊文字符号
   汪汪！你想找的页面让我吃喽！
   .----._.'__    `..--($)($$)---/#\.' @          /###\:         ,   #####`-..__.-' _.-\###/`;_:    `"'.'"""""`./,  hi ,\\//  你好!  \\`-._______.-'___`. | .'___(______|______)

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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>标签来划分段落。

段落标签

╭═════════┤ 学院，专注编程教育十八年 ├══════════╮

║ 学院，是吉林省明日科技有限公司倾力打造的在线实用 ║

║ 技能学习平台，该平台于2020年正式上线，主要为学习者提供海 ║

║ 量、优质的课程，课程结构严谨，用户可以根据自身的学习程度, ║

║ 自主安排学习进度。我们的宗旨是，为编程学习者提供一站式服 ║

║ 务，培养用户的编程思维，小白手册，视频教程，一学就会。 ║

╰═════════┤网址:http://www.a.com ├══════════╯

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

段落的换行标签

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

语法格式如下:

一段文字

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

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

段落的换行标签

《望庐山瀑布》李白

日照香炉生紫烟，遥看瀑布挂前川。

飞流直下三千尺，疑是银河落九天。

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

常见错误

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

段落的换行标签

《望庐山瀑布》李白
日照香炉生紫烟，遥看瀑布挂前川。

飞流直下三千尺，疑是银河落九天。

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

段落的原始排版标签

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

语法如下:

	文本内容

接下来，使用

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

    
       
       
       原始排版标签原始排版标签--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

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