前端开发--HTML页面练习

时间：2023-09-29 12:00:01 | 来源：网站运营

时间：2023-09-29 12:00:01 来源：网站运营

前端开发--HTML页面练习：又又又到了和笙囧一起学习编程的时间，大家是不是满怀期待哈哈哈，这篇文章咱们做一个关于HTML页面的基本练习去巩固一下基本知识点，话不多说，让我们开始吧！

1，基本应用

1.1 定义段落文本

让我们来回想一下，如果我们在网页想要输入段落文本的时候，我们应该使用什么去让他表现出来

这里笙囧希望大家可以达到不假思索吐口而出的境界。

对了，是p元素

下面让我们来看看一个实例

咳咳，这是一个灰常简单的页面布局，考验的是大家的基础知识·，小伙伴们可以敲一下代码，来试试自己的基础知识是否扎实哦。

好了让我们来康康范例代码

<article> <h1>枫桥夜泊</h1> <h2>唐代：张继</h2> <p>月落乌啼霜满天，江枫渔火对愁眠。</p> <p>姑苏城外寒山寺，夜半钟声到客船。</p></article>1.2 定义旁注文本

很多时候，网页中有一些信息想要旁注去帮助理解，或者是了解更多信息，这个时候就想要我们去定义旁注文本，比如下面这个例子

这个时候，我们第一时间想到用什么元素去编程呢？

对了，是small元素

来，和笙囧一起重复几遍，HTML5使用small元素表示细则一类的旁注。记清楚了哦。

他的代码是这个样子

<dl> <dt>单人间</dt> <dd>399 元 <small>含早餐，不含税</small></dd> <dt>双人间</dt> <dd>599 元 <small>含早餐，不含税</small></dd></dl>1.3 定义强调文本

我们平时会在购物软件上看到很多加粗加重的文字，这种表示强调好吸引消费者购买的文字就是强调文本的一种，

当我们想要去突出文案中的某个点时，一般都会使用到强调文本，比如下面这个界面

这个网页我们可以看到是用了斜体来表示不同

那么大家是否还记得在HTML5中，那几个元素可以去定义强调文本呢？

笙囧这里来敲一下重点

在HTML5中，strong元素表示内容的重要性，而em 则表示内容的着重点，b元素表示出于实用目的提醒注意，i元素表示一块不同于其他文字的文字，具有不同的语态或语气。

他的示例代码如下

<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p><p>The term <i>prose content</i> is defined above.</p><p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>1.4 定义流

这里笙囧先来科普一下，什么是流

这里的流是流媒体

流媒体(Streaming Media)技术是指将一连串的媒体数据压缩后，以流的方式在网络中分段传送，实现在网络上实时传输影音以供观赏的一种技术。

流媒体实际指的是一种新的媒体传送方式，有声音流、视频流、文本流、图像流、动画流等，而非一种新的媒体。

流媒体文件格式是支持采用流式传输及播放的媒体格式。常用格式有：RA：实时声音；RM：实时视频或音频的实时媒体；RT：实时文本；RP：实时图像；SMII.：同步的多重数据类型综合设计文件；SWF：real flash和shockwavc flash动面文件；RPM: HTMI。文件的插件；RAM:流媒体的源文件，是包含RA、RM、SMIIJ文件地址（URL地址）的文本文件；CSF:一种类似媒体容器的文件格式，可以将非常多的媒体格式包含在其中，而不仅仅限于音、视频。quicktime，mov，asf，wmv，wma，avi，mpeg，mpg，dat，mts； aam多媒体教学课件格式，可将authorware生成的文件压缩为aam和aas流式文件播放。

咳咳，是不是顿时感觉笙囧这篇文章的格调上来了，变成了一个严谨认真知识渊博的大佬哈哈哈。

然鹅其实只是笙囧复制百度词条哈哈哈。

知识点太抽象，让我们来举个例子


这就是一个网页应用流的例子，大家来敲敲他的代码试试

啥你问定义流的标签

不是吧不是吧真的有人连这个都不知道呀

咳咳，来跟着笙囧一起把下面的知识点读3遍

在HTML5中，figure 和figcaption配合定义流媒体信息。figcaption 是figure 的标题，可选，出现在figure 内容的开头或结尾处。

这个是参考代码

<figure> <figcaption><b>12月份</b>全球浏览器市场份额</figcaption> <img src="images/1.png" style="width:100%" /></figure>1.5 定义引用

我们来举个例子，如果在网页文章中出现类似专业性等作者想要表现解释的关键词，一般都会创建引用，让我们来看看下面这个页面。

可以看到，这里的斜体红楼梦就是被定义的引用，大家可以试试把这个·页面做一下哦。

再次复习一下知识点

在HTML5中，cite元素可以指明对某内容源的引用或参考。

好了，相信大家已经编好了，让笙囧来发一下参考答案

<p>他正在看<cite>红楼梦</cite></p>1.6 定义引述

在HTML5中，blockquote元素表示单独存在的引述（通常很长），它默认显示在新的一行。而q元素则用于短的引述，如句子里面的引述。




<p>世界自然基金会的目标是 : <q cite="http://www.wwf.org"> 建设一个与自然和谐相处的未来 </q>我们希望他们成功。</p>1.7 定义时间

<p>我们在每天早上 <time>9:00</time> 开始营业。</p><p>我在 <time datetime="2021-02-14">情人节</time> 有个约会。</p>在HTML5中，使用time元素标记时间、日期或时间段。




定义缩写

在HTML5中，使用abbr元素标记缩写词并解释其含义

<p><abbr title=" HyperText Markup Language">HTML</abbr> 是一门标识语言。</p>定义术语

在HTML5中，使用dfn元素定义特殊语义的专业词汇。

<p><dfn id="def-internet">Internet</dfn>是一个全球互联网络系统，使用因特网协议套件（TCP/IP）为全球数十亿用户提供服务。</p>定义文献标注

在HTML5中，使用sup和sub元素可以创建上标和下标。

<article> <h1>王维</h1> <p>王维参禅悟理，学庄信道，精通诗、书、画、音乐等，以诗名盛于开元、天宝间，尤长五言，多咏山水田园，与孟浩然合称“王孟”，有“诗佛”之称<a href="#footnote-1" title="参考注释"><sup>[1]</sup></a> 。</p> <footer> <h2>参考资料</h2> <p id="footnote-1"><sup>[1]</sup>孙昌武·《佛教与中国文学》第二章：“王维的诗歌受佛教影响是很显著的。因此早在生前，就得到‘当代诗匠，又精禅理’的赞誉。后来，更得到‘诗佛’的称号。”</p> </footer></article>定义联系信息

在HTML5中，address元素是用以定义与HTML 页面或页面一部分（如一篇报告或新文章）有关的作者、相关人士或组织的联系信息。

<footer role="contentinfo"> <p><small>© 2018 baidu, Inc.</small></p> <address> 杭州王府井<a href="index.html">首页</a> </address></footer>定义标记文本

在HTML5中，ins元素标记添加内容，del 元素标记已删除内容。




<ul> <li><del>删除项目</del></li> <li>列表项目</li> <li><del>删除项目</del></li> <li><ins>插入项目</ins></li></ul>





作业

设计自我介绍页面

【设计目标】

在HTML5中，正确使用各种语义元素，表情达意，确保机器能够正确检索正文信息。

• 在网页标题栏中显示“自我介绍”文本信息。
• 以1级标题的形式显示“自我介绍”文本信息。
• 以定义列表的形式介绍个人基本情况，包括姓名、性别、住址、兴趣或爱好。
• 在信息列表下面以图像的形式插入个人的头像，如果图像太大，使用width属性适当缩小图像大小。
• 以段落文本的形式显示个人简历，文本内容可酌情输入。
• 比如下面这个界面

好了大家加油