《HTML5+CSS3任務(wù)驅(qū)動(dòng)教程(第2版)（微課版）》課件 模塊3 文本與段落_第1頁(yè)
《HTML5+CSS3任務(wù)驅(qū)動(dòng)教程(第2版)（微課版）》課件 模塊3 文本與段落_第2頁(yè)
《HTML5+CSS3任務(wù)驅(qū)動(dòng)教程(第2版)（微課版）》課件 模塊3 文本與段落_第3頁(yè)
《HTML5+CSS3任務(wù)驅(qū)動(dòng)教程(第2版)（微課版）》課件 模塊3 文本與段落_第4頁(yè)
《HTML5+CSS3任務(wù)驅(qū)動(dòng)教程(第2版)（微課版）》課件 模塊3 文本與段落_第5頁(yè)
已閱讀5頁(yè)，還剩40頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

模塊三文本與段落目錄任務(wù)一任務(wù)二任務(wù)三文字的基本排版對(duì)文字進(jìn)行加強(qiáng)描述使用塊級(jí)元素和行內(nèi)元素制作專(zhuān)業(yè)信息頁(yè)面任務(wù)四任務(wù)五特殊符號(hào)的使用添加注釋引入知識(shí)點(diǎn)任務(wù)1文字的基本排版3.2換行3.3預(yù)格式化3.4水平線(xiàn)3.5各級(jí)標(biāo)題3.1段落3.1段落在將頁(yè)面中的文字標(biāo)記為段落時(shí)，通常會(huì)使用<p>…</p>對(duì)文字進(jìn)行標(biāo)記，瀏覽器會(huì)自動(dòng)地在段落的前后添加空行。并且這個(gè)標(biāo)記必須要成對(duì)出現(xiàn)，在段落開(kāi)始處添加<p>，結(jié)束處添加</p>。例如：任務(wù)1文字的基本排版<p>這是一個(gè)段落</p>3.2換行任務(wù)1文字的基本排版在對(duì)HTML文檔進(jìn)行編輯時(shí)，回車(chē)鍵是不能實(shí)現(xiàn)換行功能的，若要實(shí)現(xiàn)換行，則需要使用<br/>標(biāo)記，在需要換行的位置添加<br/>即可。一個(gè)<br/>標(biāo)記表示換一行，要實(shí)現(xiàn)換多行需要使用多個(gè)<br/>。雖然兩個(gè)<br/>標(biāo)記效果上和<p>標(biāo)記類(lèi)似，但是從文檔結(jié)構(gòu)上分析還是有所不同的，換行標(biāo)記不能視為描述文檔結(jié)構(gòu)的行為，若要實(shí)現(xiàn)段落，還應(yīng)使用<p>標(biāo)記。例如，對(duì)一段文字強(qiáng)制換行的代碼如下：<p>截止到2023年12月，圖書(shū)館館藏圖書(shū)總量達(dá)155.28萬(wàn)冊(cè)，其中紙質(zhì)圖書(shū)120.38萬(wàn)冊(cè)，電子圖書(shū)34.90萬(wàn)冊(cè)；中外文報(bào)刊4433種，其中紙質(zhì)報(bào)刊111種，電子報(bào)刊4322種。<br/>隨著學(xué)院規(guī)模的發(fā)展，根據(jù)《普通高等學(xué)校基本辦學(xué)條件指標(biāo)(試行)》中規(guī)定的生均圖書(shū)冊(cè)數(shù)的相關(guān)指標(biāo)要求，我們將繼續(xù)逐步分階段地進(jìn)行館藏資源建設(shè)。同時(shí)圖書(shū)館正著手建設(shè)各種數(shù)據(jù)庫(kù)資源，并探求館際合作，為學(xué)院教學(xué)以及科研提供良好的信息資源保障。</p>3.3預(yù)格式化任務(wù)1文字的基本排版在對(duì)HTML文檔進(jìn)行編輯時(shí)，有時(shí)會(huì)希望一些文本在瀏覽器中顯示的效果就是在HTML文檔中編輯的格式，這個(gè)時(shí)候我們可以使用<pre>來(lái)進(jìn)行標(biāo)記，這個(gè)標(biāo)記也是成對(duì)出現(xiàn)的<pre></pre>，被這對(duì)標(biāo)簽括起來(lái)的文本通常會(huì)保留其空格及一些換行等格式。我們以一段文字為例，具體使用方法如下：<pre>9月7日—8日，廣東創(chuàng)新科技職業(yè)學(xué)院迎來(lái)了近7000名2023級(jí)高職新生，錄取報(bào)到人數(shù)再創(chuàng)新高（因受天氣影響，報(bào)到將延續(xù)至9月11日）。同學(xué)們從五湖四海如約而至，在青春洋溢的創(chuàng)新學(xué)院開(kāi)啟嶄新的人生篇章和探索之旅。為了順利保障2023級(jí)新生平安入學(xué)、有序報(bào)到，做到讓學(xué)生滿(mǎn)意，家長(zhǎng)放心，學(xué)校專(zhuān)門(mén)成立迎新工作專(zhuān)項(xiàng)領(lǐng)導(dǎo)小組，多次召開(kāi)專(zhuān)項(xiàng)工作會(huì)議，制定《2023年新生工作方案》，針對(duì)迎新工作統(tǒng)籌規(guī)劃、統(tǒng)一部署，各職能部門(mén)和二級(jí)學(xué)院迅速響應(yīng)、分工協(xié)作，用實(shí)際行動(dòng)做好各項(xiàng)準(zhǔn)備工作和應(yīng)急預(yù)案迎接新生入校。</pre>3.4水平線(xiàn)任務(wù)1文字的基本排版在瀏覽網(wǎng)頁(yè)時(shí)會(huì)經(jīng)常看到用水平線(xiàn)來(lái)分割文字類(lèi)別或內(nèi)容，在編輯HTML文檔時(shí)我們可以使用<hr>來(lái)標(biāo)記出一條橫線(xiàn)，它和<br>一樣是一個(gè)空標(biāo)記。我們以信工學(xué)院簡(jiǎn)介的樣式為例來(lái)看一下橫線(xiàn)標(biāo)記的用法：<pre>信息工程學(xué)院簡(jiǎn)介</pre><hr/><pre>廣東創(chuàng)新科技職業(yè)學(xué)院信息工程學(xué)院經(jīng)過(guò)十二年的發(fā)展，現(xiàn)有在校學(xué)生近4050名，已開(kāi)設(shè)計(jì)算機(jī)應(yīng)用技術(shù)（省級(jí)重點(diǎn)專(zhuān)業(yè)）、通信技術(shù)、計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)(華為信息與網(wǎng)絡(luò)技術(shù)學(xué)院)、軟件技術(shù)、電子信息工程技術(shù)、動(dòng)漫制作技術(shù)、物聯(lián)網(wǎng)應(yīng)用技術(shù)、大數(shù)據(jù)技術(shù)、云計(jì)算技術(shù)應(yīng)用、人工智能技術(shù)應(yīng)用、應(yīng)急救援技術(shù)、安全智能監(jiān)測(cè)技術(shù)、信息安全技術(shù)應(yīng)用（籌）等13個(gè)專(zhuān)業(yè)。2021年由計(jì)算機(jī)應(yīng)用技術(shù)牽頭，聯(lián)合計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)、軟件技術(shù)、物聯(lián)網(wǎng)應(yīng)用技術(shù)、大數(shù)據(jù)技術(shù)等專(zhuān)業(yè)，申報(bào)省高職院校高水平專(zhuān)業(yè)群，獲教育廳立項(xiàng)。</pre>3.5各級(jí)標(biāo)題任務(wù)1文字的基本排版在使用Word軟件編輯文檔時(shí)，經(jīng)常會(huì)使用標(biāo)題樣式直接創(chuàng)建不同樣式的標(biāo)題。在一段文字中，最基本的文本結(jié)構(gòu)通常會(huì)分為不同等級(jí)的標(biāo)題和正文，利用不同等級(jí)的標(biāo)題使文字的結(jié)構(gòu)更加清晰。HTML文檔中包含6級(jí)標(biāo)題，分別用<h1>~<h6>來(lái)標(biāo)記，數(shù)字越大，字號(hào)越小，即<h1>標(biāo)記字號(hào)最大的標(biāo)題，<h6>標(biāo)記字號(hào)最小的標(biāo)題。設(shè)置這幾個(gè)級(jí)別的標(biāo)題的代碼如下：<h1>一級(jí)標(biāo)題</h1><h2>二級(jí)標(biāo)題</h2><h3>三級(jí)標(biāo)題</h3><h4>四級(jí)標(biāo)題</h4><h5>五級(jí)標(biāo)題</h5><h6>六級(jí)標(biāo)題</h6>具體任務(wù)任務(wù)1文字的基本排版（1）創(chuàng)建一個(gè)HTML5頁(yè)面，為文檔各個(gè)標(biāo)題添加不同級(jí)別的標(biāo)題標(biāo)記；（2）添加水平線(xiàn)分隔題目和主體內(nèi)容；（3）使內(nèi)容保留文檔原有格式。任務(wù)實(shí)現(xiàn)任務(wù)1文字的基本排版（1）在HBuilderX中創(chuàng)建一個(gè)空白HTML5頁(yè)面，保存為test.html，文檔中包含<head>、<body>等基本的HTML結(jié)構(gòu)。代碼如下：<!doctypehtml><html><head><metacharset="utf-8"/><title>文字基本樣式設(shè)計(jì)</title></head><body></body></html>任務(wù)實(shí)現(xiàn)任務(wù)1文字的基本排版（2）在<body>標(biāo)記中，使用標(biāo)題標(biāo)記<h1>將標(biāo)題名設(shè)置為一級(jí)標(biāo)題，并利用<h3>將作者名等信息設(shè)置為三級(jí)標(biāo)題：<h1align="center">報(bào)刊資源建設(shè)</h1><h3align="center"><b>時(shí)間：2023-12-12來(lái)源：作者：點(diǎn)擊量：</b></h3>任務(wù)實(shí)現(xiàn)任務(wù)1文字的基本排版（3）添加一條水平線(xiàn)，使用<pre>標(biāo)記添加原有格式的內(nèi)（4）運(yùn)行代碼，得到如圖所示的效果。<hr/><pre>目前我館征訂有中外文報(bào)刊達(dá)520種，其中紙質(zhì)報(bào)刊170余種，電子報(bào)刊350余種，免費(fèi)報(bào)刊1307種。 配置有觸摸屏閱報(bào)機(jī)，同時(shí)開(kāi)通試用博看期刊數(shù)據(jù)庫(kù)，該數(shù)據(jù)庫(kù)收錄有3600多種40000多本人文類(lèi)暢銷(xiāo)報(bào)刊,每天更新期刊80-200種,可以較大程度地滿(mǎn)足我院師生的相關(guān)信息需求。</pre>3.6強(qiáng)調(diào)文本任務(wù)2對(duì)文字進(jìn)行加強(qiáng)描述在對(duì)文本信息進(jìn)行強(qiáng)調(diào)時(shí)，可以使用<b>、<strong>、<i>和<em>標(biāo)記，其中<b>和<strong>對(duì)文本進(jìn)行加粗處理，<i>和<em>對(duì)文本進(jìn)行傾斜處理。1．<b>標(biāo)記<b>標(biāo)記能對(duì)文字進(jìn)行加粗處理，用來(lái)突出文字。此標(biāo)記也是成對(duì)出現(xiàn)的，中間的文本即為要加粗處理的文本，其語(yǔ)法格式如下：<b>加粗突出文本</b>2．<strong>標(biāo)記<strong>標(biāo)記在HTML4.0中為加強(qiáng)強(qiáng)調(diào)文本（strongemphasizedtext），在HTML5中變?yōu)橹匾谋荆╥mportanttext）。其語(yǔ)法格式如下：<strong>重要文本</strong>3.6強(qiáng)調(diào)文本任務(wù)2對(duì)文字進(jìn)行加強(qiáng)描述3．<i>標(biāo)記<i>標(biāo)記原本用于使文本傾斜，現(xiàn)在主要用其來(lái)表示一些與文本不同的部分內(nèi)容。例如，外文及一些專(zhuān)業(yè)術(shù)語(yǔ)等，其語(yǔ)法格式如下：<i>斜體文本</i>4．<em>標(biāo)記<em>標(biāo)記在HTML5中表示強(qiáng)調(diào)文本（emphasizedtext），其語(yǔ)法格式如下<em>強(qiáng)調(diào)文本</em>這4個(gè)突出文檔內(nèi)容的標(biāo)記，從視覺(jué)上看，<b>和<strong>呈現(xiàn)出了文字加粗的效果，<em>和<i>呈現(xiàn)出了文字傾斜的效果，但從定義上看，四者存在著一定的區(qū)別。3.7作品標(biāo)題任務(wù)2對(duì)文字進(jìn)行加強(qiáng)描述在一段文字中有時(shí)會(huì)涉及一些作品名、書(shū)籍名、歌曲名及電視節(jié)目名等標(biāo)題，這時(shí)可以使用<cite>標(biāo)記來(lái)處理。其語(yǔ)法格式如下：<p><cite>《高等數(shù)學(xué)》</cite>是大學(xué)生的必修課。</p>3.8小型文本任務(wù)2對(duì)文字進(jìn)行加強(qiáng)描述在瀏覽網(wǎng)頁(yè)時(shí)，會(huì)發(fā)現(xiàn)在有的網(wǎng)頁(yè)下方有一些注解或者版權(quán)等信息用小型文本進(jìn)行呈現(xiàn)，一般使用<small>來(lái)標(biāo)記小型文本，小型文本不會(huì)忽略文本的強(qiáng)調(diào)也不會(huì)降低重要性。其語(yǔ)法格式如下：<small>舉報(bào)電話(huà)：010-XXXXXXX</small>3.9標(biāo)記文本的更改任務(wù)2對(duì)文字進(jìn)行加強(qiáng)描述在編輯HTML文檔時(shí)，可以使用<ins>和<del>標(biāo)記來(lái)描述文檔的更新和修正。通常情況下兩者會(huì)一起使用，<del>表示刪除的文本，呈現(xiàn)出刪除線(xiàn)，<ins>表示更改的文本，呈現(xiàn)出下畫(huà)線(xiàn)。其語(yǔ)法格式如下：<del>刪除的文本</del><ins>插入的更改文本</ins>3.10文本的上下標(biāo)任務(wù)2對(duì)文字進(jìn)行加強(qiáng)描述在對(duì)HTML文本編輯時(shí)，會(huì)遇到設(shè)置文本上下標(biāo)的情況。當(dāng)然，上下標(biāo)的設(shè)置在數(shù)學(xué)相關(guān)公式的編輯上比較常用，一般使用<sub>來(lái)標(biāo)記文本下標(biāo)，<sup>來(lái)標(biāo)記文本上標(biāo)。其語(yǔ)法格式如下：<sub>文本下標(biāo)</sub><sup>文本上標(biāo)</sup>3.11時(shí)間和日期任務(wù)2對(duì)文字進(jìn)行加強(qiáng)描述日期標(biāo)記是HTML5的新增標(biāo)記，網(wǎng)頁(yè)中會(huì)經(jīng)常出現(xiàn)關(guān)于日期的信息，但是一直沒(méi)有標(biāo)準(zhǔn)的方式去標(biāo)記，<time>標(biāo)記就是用來(lái)解決這個(gè)問(wèn)題的，這個(gè)標(biāo)記可以使其他搜索引擎較快、較便捷地獲取到相關(guān)的時(shí)間信息。其語(yǔ)法格式如下：<timedatetime=""pubdate="">元素內(nèi)容</time>其中，datetime屬性用來(lái)定義元素的日期和時(shí)間，如果沒(méi)有定義此屬性，那么就要在元素內(nèi)容中給出時(shí)間信息。pubdate屬性是一個(gè)邏輯值，表示<time>元素中的日期和時(shí)間是否就是文檔的發(fā)布時(shí)間。此標(biāo)記不會(huì)使不同的日期和時(shí)間元素有不同的顯示形式，僅是方便其他搜索引擎獲取相關(guān)的日期和時(shí)間信息。3.12其他相關(guān)元素任務(wù)2對(duì)文字進(jìn)行加強(qiáng)描述除了上面提到的相關(guān)強(qiáng)調(diào)文本標(biāo)記，還有一些標(biāo)記可以使文本信息產(chǎn)生一定的效果，如表所示。標(biāo)記功能描述<dfn>定義一個(gè)定義項(xiàng)目<code>定義計(jì)算機(jī)代碼文本<samp>定義樣本文本<kbd>定義鍵盤(pán)文本<var>定義變量<blockquote>定義另一個(gè)源的塊引用<q>定義一個(gè)短引用<address>定義文檔作者或者作者的聯(lián)系信息<abbr>定義縮寫(xiě)形式<mark>定義帶記號(hào)文本<m>定義突出顯示文本具體任務(wù)任務(wù)2對(duì)文字進(jìn)行加強(qiáng)描述（1）創(chuàng)建一個(gè)HTML頁(yè)面，添加特定文章中的相關(guān)文本內(nèi)容；（2）對(duì)簡(jiǎn)介中的不同內(nèi)容添加不同的強(qiáng)調(diào)標(biāo)記以達(dá)到突出的效果。任務(wù)實(shí)現(xiàn)任務(wù)2對(duì)文字進(jìn)行加強(qiáng)描述（1）在HBuilderX中創(chuàng)建一個(gè)空白的HTML5頁(yè)面，保存為test.html，文檔中包含<head>、<body>等基本的HTML結(jié)構(gòu)，并添加相關(guān)文本內(nèi)容。<!doctypehtml><html><head><metacharset="utf-8"/><title>文本強(qiáng)調(diào)</title></head><body><palign="center">在大學(xué)有個(gè)明確的目標(biāo)很重要</p><palign="center">期次：第1期</p><p>大學(xué)是一個(gè)能鍛煉自己、培養(yǎng)自己、證明自己的地方。但并非每個(gè)人都能得償所愿，在大學(xué)里，我們會(huì)遇到來(lái)自五湖四海的老師和同學(xué)。大學(xué)里也充滿(mǎn)了許多誘惑，一不小心就會(huì)墮落和迷失自己，在大學(xué)里，有個(gè)明確的目標(biāo)很重要！在平時(shí)看《時(shí)代》雜志時(shí)會(huì)希望自己也可以有個(gè)美麗的未來(lái)。</p></body></html>任務(wù)實(shí)現(xiàn)任務(wù)2對(duì)文字進(jìn)行加強(qiáng)描述（2）對(duì)正文段落中的文本信息進(jìn)行不同形式的突出，具體實(shí)現(xiàn)如下：<body><palign="center"><b>在大學(xué)有個(gè)明確的目標(biāo)很重要</b></p><palign="center"><em>期次：第1期</em></p><small><strong>大學(xué)</strong><i>是一個(gè)能鍛煉自己、培養(yǎng)自己、證明自己的地方。</i>但并非每個(gè)人都能得償所愿，在大學(xué)里，我們會(huì)遇到來(lái)自五湖四海的老師和同學(xué)。大學(xué)里也充滿(mǎn)了許多誘惑，一不小心就會(huì)墮落和迷失自己，在大學(xué)里，有個(gè)明確的目標(biāo)很重要！在平時(shí)看<cite>《時(shí)代》</cite>雜志時(shí)會(huì)希望自己也可以有個(gè)美麗的未來(lái)。</small></body>其中，<b>和<strong>為文本加粗突出，<i>和<em>為文本傾斜突出，<cite>表示作品名稱(chēng)，<small>表示小型文本。任務(wù)實(shí)現(xiàn)任務(wù)2對(duì)文字進(jìn)行加強(qiáng)描述（3）運(yùn)行代碼，最終得到如圖所示的效果。3.13塊級(jí)元素任務(wù)3使用塊級(jí)元素和行內(nèi)元素制作專(zhuān)業(yè)信息頁(yè)面塊級(jí)（block）元素在瀏覽器中的顯示就像在其首尾部都有一個(gè)換行符一樣，常見(jiàn)的塊級(jí)元素如表所示。文檔節(jié)div段落p圍繞元素邊框fieldset表格行tr視頻video文檔節(jié)section無(wú)序列表ul邊框上標(biāo)題legend表格單元格th媒介源source導(dǎo)航nav有序列表ol選擇列表select表格單元td文本軌道track頁(yè)眉header項(xiàng)目li組合選擇列表optgroup表格列屬性col聲音內(nèi)容audio文章article列表dl選擇列表選項(xiàng)option表格格式化列組colgroup換行br文章側(cè)欄aside列表項(xiàng)目dt下拉列表datalist內(nèi)聯(lián)框架iframe水平分割線(xiàn)hr頁(yè)腳footer項(xiàng)目描述dd表格table媒介內(nèi)容分組figure格式文本pre元素的細(xì)節(jié)details命令菜單menu表格標(biāo)題captionfigure標(biāo)題figcaption塊引用blockquotedetails元素可見(jiàn)標(biāo)題summary菜單項(xiàng)目menuitem組合表內(nèi)容thead圖像映射map文檔聯(lián)系信息address對(duì)話(huà)窗口dialog命令按鈕command組合主題內(nèi)容tbody圖像區(qū)域area居中文本center標(biāo)題h1~h6表單form組合表注內(nèi)容tfoot圖形容器canvas水平垂直方向插入空間spacer3.13塊級(jí)元素任務(wù)3使用塊級(jí)元素和行內(nèi)元素制作專(zhuān)業(yè)信息頁(yè)面塊級(jí)元素的特點(diǎn)如下：（1）總是在新行上開(kāi)始；（2）高度、行高及外邊距和內(nèi)邊距都可控制；（3）寬度默認(rèn)是其容器的全部（除非設(shè)定一個(gè)寬度）；（4）可以容納行內(nèi)元素和其他塊元素。HTML5新增的塊級(jí)元素包括：header、section、footer、aside、nav、article、figure。3.14行內(nèi)元素任務(wù)3使用塊級(jí)元素和行內(nèi)元素制作專(zhuān)業(yè)信息頁(yè)面行內(nèi)元素（inline，又稱(chēng)內(nèi)聯(lián)元素）可以出現(xiàn)在某一行句子中，并且不用新起一行，常見(jiàn)的行內(nèi)元素如表所示。內(nèi)聯(lián)容器span大字體big禁止換行nobr錨點(diǎn)a注音rt縮寫(xiě)abbr小字體small單詞換行時(shí)機(jī)wbr圖片img進(jìn)度條progress強(qiáng)調(diào)em上標(biāo)sup打字機(jī)文本tt內(nèi)嵌embed度量meter粗體強(qiáng)調(diào)strong下標(biāo)sub鍵盤(pán)文本kbdinput標(biāo)記label定義變量var突出顯示的文本mark刪除文本del時(shí)間日期time輸入框input計(jì)算機(jī)代碼文本code加粗b刪除線(xiàn)strike引用cite按鈕button計(jì)算機(jī)代碼樣本samp斜體i刪除線(xiàn)s短引用q生成密鑰keygen字段dfn文本方向bdi插入更改的文本ins字體設(shè)置font多行文本輸入框textarea輸出結(jié)果output文字方向bdo下劃線(xiàn)u

3.14行內(nèi)元素任務(wù)3使用塊級(jí)元素和行內(nèi)元素制作專(zhuān)業(yè)信息頁(yè)面行內(nèi)元素的特點(diǎn)如下：（1）和其他元素都在一行上；（2）高、行高及外邊距和內(nèi)邊距不可改變；（3）寬度就是其文字或圖片的寬度，不可改變；（4）只能容納文本或者其他行內(nèi)元素。3.15<span>標(biāo)記任務(wù)3使用塊級(jí)元素和行內(nèi)元素制作專(zhuān)業(yè)信息頁(yè)面一般使用<span>標(biāo)記來(lái)組合文檔中的行內(nèi)元素，如果不對(duì)<span>應(yīng)用樣式，那么span元素中的文本與其他文本不會(huì)有任何視覺(jué)上的差異。盡管如此，span元素仍然可為p元素增加額外的結(jié)構(gòu)。其語(yǔ)法格式如下：<p><span>文本1</span>文本2</p>具體任務(wù)任務(wù)3使用塊級(jí)元素和行內(nèi)元素制作專(zhuān)業(yè)信息頁(yè)面（1）創(chuàng)建一個(gè)HTML5頁(yè)面，添加關(guān)于計(jì)算機(jī)應(yīng)用專(zhuān)業(yè)的信息文本；（2）利用塊級(jí)元素和行內(nèi)元素對(duì)這些文本信息進(jìn)行修飾。任務(wù)實(shí)現(xiàn)任務(wù)3使用塊級(jí)元素和行內(nèi)元素制作專(zhuān)業(yè)信息頁(yè)面（1）在HBuilderX中創(chuàng)建一個(gè)空白的HTML5頁(yè)面，保存為test.html，文檔中包含<head>、<body>等基本的HTML結(jié)構(gòu)，添加專(zhuān)業(yè)信息文本，代碼如下：任務(wù)實(shí)現(xiàn)任務(wù)3使用塊級(jí)元素和行內(nèi)元素制作專(zhuān)業(yè)信息頁(yè)面<!doctypehtml><html><head><metacharset="utf-8"/><title>招聘信息</title></head><body><h1>計(jì)算機(jī)應(yīng)用技術(shù)</h1> <pre>專(zhuān)業(yè)名稱(chēng)：計(jì)算機(jī)應(yīng)用技術(shù)專(zhuān)業(yè)代碼：610201招生對(duì)象：高中畢業(yè)或3+證書(shū)（文理科） </pre><pre>專(zhuān)業(yè)培養(yǎng)目標(biāo)本專(zhuān)業(yè)以服務(wù)廣東和珠三角地區(qū)經(jīng)濟(jì)社會(huì)發(fā)展為宗旨，面向各類(lèi)企事業(yè)單位，培養(yǎng)德、智、體、美全面發(fā)展，具有良好的綜合素質(zhì)，系統(tǒng)地掌握計(jì)算機(jī)專(zhuān)業(yè)領(lǐng)域必備的基本理論知識(shí)和基本技能，能夠完成職業(yè)典型工作任務(wù)，具備團(tuán)隊(duì)合作能力、溝通能力和社會(huì)責(zé)任感，能夠直接進(jìn)入相應(yīng)工作崗位，熟練運(yùn)用一到兩種程序設(shè)計(jì)語(yǔ)言，掌握網(wǎng)絡(luò)技術(shù)和計(jì)算機(jī)系統(tǒng)維護(hù)技術(shù)；能從事程序設(shè)計(jì)、數(shù)據(jù)庫(kù)應(yīng)用、計(jì)算機(jī)系統(tǒng)維護(hù)、網(wǎng)頁(yè)制作與網(wǎng)站設(shè)計(jì)、技術(shù)支持與IT產(chǎn)品銷(xiāo)售等工作，具有創(chuàng)新精神、實(shí)踐精神和良好職業(yè)道德的的高等應(yīng)用型技術(shù)人才。</pre><pre>專(zhuān)業(yè)核心能力1．具備編程開(kāi)發(fā)能力，掌握PHP+MySQL或Jsp網(wǎng)絡(luò)編程技術(shù)。2．具有使用Photoshop、Flash進(jìn)行網(wǎng)頁(yè)美工UI設(shè)計(jì)開(kāi)發(fā)能力。3．具有使用HTML、Javascript、AJAX、jQuery等技術(shù)進(jìn)行特效網(wǎng)頁(yè)設(shè)計(jì)能力。4．具備移動(dòng)互聯(lián)網(wǎng)HTML5、CSS3響應(yīng)式移動(dòng)互聯(lián)網(wǎng)開(kāi)發(fā)能力。5．具備精通使用PHP+MySQL或Jsp編程技術(shù)進(jìn)行編碼能力。6．具有基于B/S架構(gòu)的系統(tǒng)開(kāi)發(fā)能力。7．具有Windows和Linux操作系統(tǒng)下軟件布署和優(yōu)化能力。</pre><small>學(xué)校地址</small><small>廣東省東莞市厚街鎮(zhèn)教育園區(qū)學(xué)府路</small></body></html>任務(wù)實(shí)現(xiàn)任務(wù)3使用塊級(jí)元素和行內(nèi)元素制作專(zhuān)業(yè)信息頁(yè)面（2）利用塊級(jí)元素和行內(nèi)元素對(duì)文本信息進(jìn)行修飾，使其更有助于用戶(hù)獲取信息，具體實(shí)現(xiàn)如下：其中，<b>為文本加粗突出，<address>表示地址，<br/>表示換行，<h1>表示一級(jí)標(biāo)題。<body><h1>計(jì)算機(jī)應(yīng)用技術(shù)</h1> <pre>專(zhuān)業(yè)名稱(chēng)：計(jì)算機(jī)應(yīng)用技術(shù)專(zhuān)業(yè)代碼：610201招生對(duì)象：高中畢業(yè)或3+證書(shū)（文理科） </pre><pre><b>專(zhuān)業(yè)培養(yǎng)目標(biāo)</b><br/>本專(zhuān)業(yè)以服務(wù)<b>廣東</b>和<b>珠三角地區(qū)</b>經(jīng)濟(jì)社會(huì)發(fā)展為宗旨，面向各類(lèi)企事業(yè)單位，培養(yǎng)德、智、體、美全面發(fā)展，具有良好的綜合素質(zhì)，系統(tǒng)地掌握計(jì)算機(jī)專(zhuān)業(yè)領(lǐng)域必備的基本理論知識(shí)和基本技能，能夠完成職業(yè)典型工作任務(wù)，具備團(tuán)隊(duì)合作能力、溝通能力和社會(huì)責(zé)任感，能夠直接進(jìn)入相應(yīng)工作崗位，熟練運(yùn)用一到兩種程序設(shè)計(jì)語(yǔ)言，掌握網(wǎng)絡(luò)技術(shù)和計(jì)算機(jī)系統(tǒng)維護(hù)技術(shù)；能從事程序設(shè)計(jì)、數(shù)據(jù)庫(kù)應(yīng)用、計(jì)算機(jī)系統(tǒng)維護(hù)、網(wǎng)頁(yè)制作與網(wǎng)站設(shè)計(jì)、技術(shù)支持與IT產(chǎn)品銷(xiāo)售等工作，具有創(chuàng)新精神、實(shí)踐精神和良好職業(yè)道德的的高等應(yīng)用型技術(shù)人才。<br/></pre><pre><b>專(zhuān)業(yè)核心能力</b><br/>1．具備編程開(kāi)發(fā)能力，掌握PHP+MySQL或Jsp網(wǎng)絡(luò)編程技術(shù)。<br/>2．具有使用Photoshop、Flash進(jìn)行網(wǎng)頁(yè)美工UI設(shè)計(jì)開(kāi)發(fā)能力。<br/>3．具有使用HTML、Javascript、AJAX、jQuery等技術(shù)進(jìn)行特效網(wǎng)頁(yè)設(shè)計(jì)能力。<br/>4．具備移動(dòng)互聯(lián)網(wǎng)HTML5、CSS3響應(yīng)式移動(dòng)互聯(lián)網(wǎng)開(kāi)發(fā)能力。<br/>5．具備精通使用PHP+MySQL或Jsp編程技術(shù)進(jìn)行編碼能力。<br/>6．具有基于B/S架構(gòu)的系統(tǒng)開(kāi)發(fā)能力。<br/>7．具有Windows和Linux操作系統(tǒng)下軟件布署和優(yōu)化能力。<br/></pre><small>學(xué)校地址</small><small><address>廣東省東莞市厚街鎮(zhèn)教育園區(qū)學(xué)府路</address></small></body>任務(wù)實(shí)現(xiàn)任務(wù)3使用塊級(jí)元素和行內(nèi)元素制作專(zhuān)業(yè)信息頁(yè)面（3）運(yùn)行代碼，最終得到如圖所示的效果。3.16字符實(shí)體任務(wù)4特殊符號(hào)的使用如果要正確地插入一些特殊符號(hào)，或者在插入多個(gè)空格時(shí)能夠正確顯示，那么就一定要插入字符實(shí)體（characterentities）。字符實(shí)體的語(yǔ)法格式一般如下:&實(shí)體名或者&#實(shí)體號(hào)常用的字符實(shí)體如表所示。3.16字符實(shí)體任務(wù)4特殊符號(hào)的使用顯示結(jié)果描述實(shí)體名稱(chēng)實(shí)體編號(hào)

空格

<小于號(hào)<<>大于號(hào)>>&和號(hào)&&"引號(hào)""'撇號(hào)'(IE不支持)'￠分（cent）￠￠￡鎊（pound）￡￡￥元（yen）￥￥€歐元（euro）€€§小節(jié)§§?版權(quán)（copyright）???注冊(cè)商標(biāo)???商標(biāo)??×乘號(hào)××÷除號(hào)÷÷具體任務(wù)任務(wù)4特殊符號(hào)的使用（1）創(chuàng)建一個(gè)HTML5頁(yè)面，添加反比例函數(shù)單調(diào)區(qū)間文本；（2）對(duì)特殊符號(hào)進(jìn)行修飾。任務(wù)實(shí)現(xiàn)任務(wù)4特殊符號(hào)的使用（1）在HBuilderX中創(chuàng)建一個(gè)空白HTML5頁(yè)面，保存為test.html，文檔中包含<head>、<body>等基本的HTML結(jié)構(gòu)，添加文本信息，并對(duì)其中特殊符號(hào)的書(shū)寫(xiě)進(jìn)行修改：<html><head><metacharset="utf-8"><!--TemplateBeginEditablename="doctitle"--><title>特殊符號(hào)添加</title><!--TemplateEndEditable--><!--TemplateBeginEditablename="head"--><!--TemplateEndEditable--></head><body><p><strong>反比例函數(shù)單調(diào)性</strong><br/>當(dāng)k>0時(shí)，圖象分別位于第一、三象限，每一個(gè)象限內(nèi)，從左往右，y隨x的增大而減小；<br/>當(dāng)k<0時(shí)，圖象分別位于第二、四象限，每一個(gè)象限內(nèi)，從左往右，y隨x的增大而增大。<br/>k>0時(shí)，函數(shù)在x<0上同為減函數(shù)、在x>0上同為減函數(shù)；k<0時(shí)，函數(shù)在x<0上為增函數(shù)、在x>0上同為增函數(shù)。</p></body></html>任務(wù)實(shí)現(xiàn)任務(wù)4特殊符號(hào)的使用（2）運(yùn)行代碼，最終得到如圖所示的效果。3.17旁注任務(wù)5添加注釋HTML5新增了<ruby>、<rt>和<rp>標(biāo)記，<ruby>用來(lái)標(biāo)記需要被旁注的文本，如拼音或解釋。<rt>標(biāo)記定義文本的拼音或解釋?zhuān)€包括可選的<rp>元素，定義當(dāng)瀏覽器不支持<ruby>元素時(shí)顯示的內(nèi)容。

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論