前端開發(fā)--HTML頁面練習(xí)

時(shí)間：2023-09-29 12:00:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-29 12:00:01 來源：網(wǎng)站運(yùn)營(yíng)

前端開發(fā)--HTML頁面練習(xí)：又又又到了和笙囧一起學(xué)習(xí)編程的時(shí)間，大家是不是滿懷期待哈哈哈，這篇文章咱們做一個(gè)關(guān)于HTML頁面的基本練習(xí)去鞏固一下基本知識(shí)點(diǎn)，話不多說，讓我們開始吧！

1，基本應(yīng)用

1.1 定義段落文本

讓我們來回想一下，如果我們?cè)诰W(wǎng)頁想要輸入段落文本的時(shí)候，我們應(yīng)該使用什么去讓他表現(xiàn)出來

這里笙囧希望大家可以達(dá)到不假思索吐口而出的境界。

對(duì)了，是p元素

下面讓我們來看看一個(gè)實(shí)例

咳咳，這是一個(gè)灰常簡(jiǎn)單的頁面布局，考驗(yàn)的是大家的基礎(chǔ)知識(shí)·，小伙伴們可以敲一下代碼，來試試自己的基礎(chǔ)知識(shí)是否扎實(shí)哦。

好了讓我們來康康范例代碼

<article> <h1>楓橋夜泊</h1> <h2>唐代：張繼</h2> <p>月落烏啼霜滿天，江楓漁火對(duì)愁眠。</p> <p>姑蘇城外寒山寺，夜半鐘聲到客船。</p></article>1.2 定義旁注文本

很多時(shí)候，網(wǎng)頁中有一些信息想要旁注去幫助理解，或者是了解更多信息，這個(gè)時(shí)候就想要我們?nèi)ザx旁注文本，比如下面這個(gè)例子

這個(gè)時(shí)候，我們第一時(shí)間想到用什么元素去編程呢？

對(duì)了，是small元素

來，和笙囧一起重復(fù)幾遍，HTML5使用small元素表示細(xì)則一類的旁注。記清楚了哦。

他的代碼是這個(gè)樣子

<dl> <dt>單人間</dt> <dd>399 元 <small>含早餐，不含稅</small></dd> <dt>雙人間</dt> <dd>599 元 <small>含早餐，不含稅</small></dd></dl>1.3 定義強(qiáng)調(diào)文本

我們平時(shí)會(huì)在購(gòu)物軟件上看到很多加粗加重的文字，這種表示強(qiáng)調(diào)好吸引消費(fèi)者購(gòu)買的文字就是強(qiáng)調(diào)文本的一種，

當(dāng)我們想要去突出文案中的某個(gè)點(diǎn)時(shí)，一般都會(huì)使用到強(qiáng)調(diào)文本，比如下面這個(gè)界面

這個(gè)網(wǎng)頁我們可以看到是用了斜體來表示不同

那么大家是否還記得在HTML5中，那幾個(gè)元素可以去定義強(qiáng)調(diào)文本呢？

笙囧這里來敲一下重點(diǎn)

在HTML5中，strong元素表示內(nèi)容的重要性，而em 則表示內(nèi)容的著重點(diǎn)，b元素表示出于實(shí)用目的提醒注意，i元素表示一塊不同于其他文字的文字，具有不同的語態(tà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)技術(shù)是指將一連串的媒體數(shù)據(jù)壓縮后，以流的方式在網(wǎng)絡(luò)中分段傳送，實(shí)現(xiàn)在網(wǎng)絡(luò)上實(shí)時(shí)傳輸影音以供觀賞的一種技術(shù)。

流媒體實(shí)際指的是一種新的媒體傳送方式，有聲音流、視頻流、文本流、圖像流、動(dòng)畫流等，而非一種新的媒體。

流媒體文件格式是支持采用流式傳輸及播放的媒體格式。常用格式有：RA：實(shí)時(shí)聲音；RM：實(shí)時(shí)視頻或音頻的實(shí)時(shí)媒體；RT：實(shí)時(shí)文本；RP：實(shí)時(shí)圖像；SMII.：同步的多重?cái)?shù)據(jù)類型綜合設(shè)計(jì)文件；SWF：real flash和shockwavc flash動(dòng)面文件；RPM: HTMI。文件的插件；RAM:流媒體的源文件，是包含RA、RM、SMIIJ文件地址（URL地址）的文本文件；CSF:一種類似媒體容器的文件格式，可以將非常多的媒體格式包含在其中，而不僅僅限于音、視頻。quicktime，mov，asf，wmv，wma，avi，mpeg，mpg，dat，mts； aam多媒體教學(xué)課件格式，可將authorware生成的文件壓縮為aam和aas流式文件播放。

咳咳，是不是頓時(shí)感覺笙囧這篇文章的格調(diào)上來了，變成了一個(gè)嚴(yán)謹(jǐn)認(rèn)真知識(shí)淵博的大佬哈哈哈。

然鵝其實(shí)只是笙囧復(fù)制百度詞條哈哈哈。

知識(shí)點(diǎn)太抽象，讓我們來舉個(gè)例子


這就是一個(gè)網(wǎng)頁應(yīng)用流的例子，大家來敲敲他的代碼試試

啥你問定義流的標(biāo)簽

不是吧不是吧真的有人連這個(gè)都不知道呀

咳咳，來跟著笙囧一起把下面的知識(shí)點(diǎn)讀3遍

在HTML5中，figure 和figcaption配合定義流媒體信息。figcaption 是figure 的標(biāo)題，可選，出現(xiàn)在figure 內(nèi)容的開頭或結(jié)尾處。

這個(gè)是參考代碼

<figure> <figcaption><b>12月份</b>全球?yàn)g覽器市場(chǎng)份額</figcaption> <img src="images/1.png" style="width:100%" /></figure>1.5 定義引用

我們來舉個(gè)例子，如果在網(wǎng)頁文章中出現(xiàn)類似專業(yè)性等作者想要表現(xiàn)解釋的關(guān)鍵詞，一般都會(huì)創(chuàng)建引用，讓我們來看看下面這個(gè)頁面。

可以看到，這里的斜體紅樓夢(mèng)就是被定義的引用，大家可以試試把這個(gè)·頁面做一下哦。

再次復(fù)習(xí)一下知識(shí)點(diǎn)

在HTML5中，cite元素可以指明對(duì)某內(nèi)容源的引用或參考。

好了，相信大家已經(jīng)編好了，讓笙囧來發(fā)一下參考答案

<p>他正在看<cite>紅樓夢(mèng)</cite></p>1.6 定義引述

在HTML5中，blockquote元素表示單獨(dú)存在的引述（通常很長(zhǎng)），它默認(rèn)顯示在新的一行。而q元素則用于短的引述，如句子里面的引述。




<p>世界自然基金會(huì)的目標(biāo)是 : <q cite="http://www.wwf.org"> 建設(shè)一個(gè)與自然和諧相處的未來 </q>我們希望他們成功。</p>1.7 定義時(shí)間

<p>我們?cè)诿刻煸缟?<time>9:00</time> 開始營(yíng)業(yè)。</p><p>我在 <time datetime="2021-02-14">情人節(jié)</time> 有個(gè)約會(huì)。</p>在HTML5中，使用time元素標(biāo)記時(shí)間、日期或時(shí)間段。




定義縮寫

在HTML5中，使用abbr元素標(biāo)記縮寫詞并解釋其含義

<p><abbr title=" HyperText Markup Language">HTML</abbr> 是一門標(biāo)識(shí)語言。</p>定義術(shù)語

在HTML5中，使用dfn元素定義特殊語義的專業(yè)詞匯。

<p><dfn id="def-internet">Internet</dfn>是一個(gè)全球互聯(lián)網(wǎng)絡(luò)系統(tǒng)，使用因特網(wǎng)協(xié)議套件（TCP/IP）為全球數(shù)十億用戶提供服務(wù)。</p>定義文獻(xiàn)標(biāo)注

在HTML5中，使用sup和sub元素可以創(chuàng)建上標(biāo)和下標(biāo)。

<article> <h1>王維</h1> <p>王維參禪悟理，學(xué)莊信道，精通詩(shī)、書、畫、音樂等，以詩(shī)名盛于開元、天寶間，尤長(zhǎng)五言，多詠山水田園，與孟浩然合稱“王孟”，有“詩(shī)佛”之稱<a href="#footnote-1" title="參考注釋"><sup>[1]</sup></a> 。</p> <footer> <h2>參考資料</h2> <p id="footnote-1"><sup>[1]</sup>孫昌武·《佛教與中國(guó)文學(xué)》第二章：“王維的詩(shī)歌受佛教影響是很顯著的。因此早在生前，就得到‘當(dāng)代詩(shī)匠，又精禪理’的贊譽(yù)。后來，更得到‘詩(shī)佛’的稱號(hào)?！?span ></p> </footer></article>定義聯(lián)系信息

在HTML5中，address元素是用以定義與HTML 頁面或頁面一部分（如一篇報(bào)告或新文章）有關(guān)的作者、相關(guān)人士或組織的聯(lián)系信息。

<footer role="contentinfo"> <p><small>? 2018 baidu, Inc.</small></p> <address> 杭州王府井<a href="index.html">首頁</a> </address></footer>定義標(biāo)記文本

在HTML5中，ins元素標(biāo)記添加內(nèi)容，del 元素標(biāo)記已刪除內(nèi)容。




<ul> <li><del>刪除項(xiàng)目</del></li> <li>列表項(xiàng)目</li> <li><del>刪除項(xiàng)目</del></li> <li><ins>插入項(xiàng)目</ins></li></ul>





作業(yè)

設(shè)計(jì)自我介紹頁面

【設(shè)計(jì)目標(biāo)】

在HTML5中，正確使用各種語義元素，表情達(dá)意，確保機(jī)器能夠正確檢索正文信息。

• 在網(wǎng)頁標(biāo)題欄中顯示“自我介紹”文本信息。
• 以1級(jí)標(biāo)題的形式顯示“自我介紹”文本信息。
• 以定義列表的形式介紹個(gè)人基本情況，包括姓名、性別、住址、興趣或愛好。
• 在信息列表下面以圖像的形式插入個(gè)人的頭像，如果圖像太大，使用width屬性適當(dāng)縮小圖像大小。
• 以段落文本的形式顯示個(gè)人簡(jiǎn)歷，文本內(nèi)容可酌情輸入。
• 比如下面這個(gè)界面

好了大家加油