網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)（HTML5+CSS3）課件 第2章 HTML5基礎(chǔ)_第1頁
網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)（HTML5+CSS3）課件 第2章 HTML5基礎(chǔ)_第2頁
網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)（HTML5+CSS3）課件 第2章 HTML5基礎(chǔ)_第3頁
網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)（HTML5+CSS3）課件 第2章 HTML5基礎(chǔ)_第4頁
網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)（HTML5+CSS3）課件 第2章 HTML5基礎(chǔ)_第5頁
已閱讀5頁，還剩20頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第2章HTML5基礎(chǔ)目錄HTML文檔基本組成01常用的HTML標(biāo)簽02HTML5新增元素032.1.html文檔結(jié)構(gòu)HTML標(biāo)記：<html></html>，標(biāo)明是一個(gè)HTML文檔。首部標(biāo)記：<head></head>，提供與網(wǎng)頁相關(guān)的信息，比如網(wǎng)頁標(biāo)題等等。正文標(biāo)記：<body></body>，里面包含文檔主要內(nèi)容，例如文本、圖象、動(dòng)畫、超鏈接等。<head>標(biāo)記<head>元素用于定義文檔的頭部，它是所有頭部元素的容器。這些頭部元素包含元信息、樣式表定義及引用外部樣式表、腳本語言定義等，具體主要包含以下幾部分：title：定義文檔標(biāo)題，它的內(nèi)容將在瀏覽器的標(biāo)題欄出現(xiàn)。meta:可提供有關(guān)頁面的元信息(meta-information)，比如針對(duì)搜索引擎和更新頻度的描述和關(guān)鍵詞。例如<matacharset=”utf-8”>聲明此頁面使用”utf-8”字符編碼格式，支持中文顯示。例如＜metaname=“viewport”content=“width=device-width,initial-scale=1,maximum-scale=1“＞聲明頁面寬度和設(shè)備寬度一致，縮放比例為1，保證了移動(dòng)端的頁面在不同的手機(jī)上以同樣的大小來顯示。<head>標(biāo)記style:定義文檔的樣式，也可以用link鏈接外部樣式表。例如標(biāo)簽<styletype="text/css"link="st1.css"></style>將樣式表文件st1.css導(dǎo)入文檔中。Script:定義腳本語言。既可以包含腳本語言，也可以通過src屬性指向外部腳本。base:定義頁面中的所有鏈接的基準(zhǔn)URL。2.2HTML標(biāo)簽2.2.1HTML結(jié)構(gòu)標(biāo)記<html></html>:html文檔標(biāo)記<head></head>:html頭部標(biāo)記<body></body>:html主體部分標(biāo)記2.2.1HTML內(nèi)容標(biāo)簽<p></p>:段落標(biāo)記。用于分段，段落之間有固定的間距。<span></span>:用來組合文檔中的行內(nèi)元素,以便通過樣式來格式化它們。<br/>:換行標(biāo)記，此標(biāo)記為單標(biāo)記。<hr/>:水平線標(biāo)記，一般用于分隔內(nèi)容。<table></table>:表格,包含行<tr>和列<td>。<h1></h1>:小標(biāo)題標(biāo)記。在html中，小標(biāo)題樣式除了h1，還有h2,h3,h4,h5,h6共6種小標(biāo)題樣式。<ahref=””></a>:超鏈接，表示對(duì)文字設(shè)置超鏈接，<ahref=“”>浙江師范大學(xué)</a>，<div></div>：層布局。<img/>：圖片，例如<imgsrc=“img/p1.jpg”/><ul><li></li><ul>無序列表，用于將相關(guān)內(nèi)容以條目的方式呈現(xiàn)，使內(nèi)容看起來更加簡(jiǎn)潔明了。<ul><li>富強(qiáng)、民主、文明、和諧</li><li>自由、平等、公正、法治</li><li>愛國、敬業(yè)、誠信、友善</li></ul><ul><li>的列表默認(rèn)為項(xiàng)目符號(hào)列表<ol><li></li></ol>有序列表，<ol><li>的列表默認(rèn)為為數(shù)字列表，<ol><li>富強(qiáng)、民主、文明、和諧</li><li>自由、平等、公正、法治</li><li>愛國、敬業(yè)、誠信、友善</li></ol>

2.2.1HTML內(nèi)容標(biāo)簽<form></form>：表單,主要包含以下元素：<input>元素，根據(jù)不同的type屬性，<input>元素又可以分為：<inputtype="text">

定義供文本輸入的單行輸入字段；<inputtype="password">

定義密碼字段；<inputtype="radio">定義單選按鈕；<inputtype="checkbox">定義復(fù)選框；<inputtype="submit">

定義提交表單數(shù)據(jù)至表單處理程序的按鈕；<inputtype="button”>

定義按鈕；<select>元素（下拉列表）<selectname="pc"><optionvalue="聯(lián)想">聯(lián)想筆記本</option><optionvalue="惠普">惠普筆記本</option><optionvalue="神州">神州筆記本</option><optionvalue="方正">方正筆記本</option></select>2.2.1HTML內(nèi)容標(biāo)簽2.2.2HTML字符格式標(biāo)記<b></b>:標(biāo)識(shí)強(qiáng)調(diào)文本，以加粗顯示。<i></i>:標(biāo)識(shí)引用文本，以斜體顯示。<big></big>:標(biāo)識(shí)放大文本，以放大效果顯示。<small></small>:標(biāo)識(shí)縮小文本，以縮小效果顯示。<cite></cite>：標(biāo)識(shí)引用文本，以引用效果顯示。<blink></blink>:標(biāo)識(shí)閃爍文本，以閃爍效果顯示（IE不支持）。<sup></sup>:標(biāo)識(shí)上標(biāo)文本，以上標(biāo)效果顯示。<sub></sub>:標(biāo)識(shí)下標(biāo)文本，以下標(biāo)效果顯示。HTML5引入了多個(gè)新的語義元素用來更加細(xì)致地描述頁面及文檔結(jié)構(gòu)。他們用于明確web頁面的不同部分，<header>:為<article>元素定義文章“頭部”信息。<nav>:“導(dǎo)航條”。<section>:分塊。<article>:頁面上獨(dú)立、完整的一篇文章。<aside>:用于定義當(dāng)前頁面或當(dāng)前文章的附屬信息。<figcaption>:用于定義"圖片區(qū)域"的標(biāo)題。<figure>:可包含一個(gè)或多個(gè)<img>元素所代表的圖片。<footer>:“腳注”部分。2.3HTML5語義元素使用語義元素設(shè)置個(gè)人博客語義元素應(yīng)用例子2.4HTML5功能元素2.4.1hgroup元素hgroup元素用于將多個(gè)標(biāo)題組成一個(gè)標(biāo)題組，通常它與h1~h6元素使用。hgroup元素一般放在header元素中，要注意的是，<hgroup>標(biāo)簽只是對(duì)標(biāo)題進(jìn)行組合，而對(duì)標(biāo)題的樣式?jīng)]有影響。2.4.2<video>視頻以下HTML代碼會(huì)顯示一段嵌入網(wǎng)頁的ogg、mp4或webm格式的視頻：<videowidth="320"height="240"controls="controls">

<sourcesrc="m1.mp4"type="video/mp4"/>

<sourcesrc="m1.ogg"type="video/ogg"/>

<sourcesrc="m1.webm"type="video/webm"/></video><source>為媒介元素（比如<video>和<audio>）定義資源出處，允許用戶設(shè)置可替換的視頻文件供瀏覽器選擇。也可以使用<embed>標(biāo)簽在HTML頁面中嵌入多媒體元素。例如執(zhí)行下面的代碼將在頁面上播放flash文件m1.swf。2.4.3audio音頻<audio>標(biāo)簽定義聲音，比如音樂或其他音頻流。下面的代碼實(shí)現(xiàn)播放一段音樂，如果瀏覽器不支持audio，則會(huì)提示“您的瀏覽器不支持audio標(biāo)簽”。<audiosrc="someaudio.wav">您的瀏覽器不支持audio標(biāo)簽。</audio>2.4.4embed元素embed元素用于插入各種多媒體，格式可以是Midi、Wav、AIFF、AU、MP3等。例如：<embedsrc="run.wav"/>2.4.5mark元素mark元素主要用來在視覺上向用戶呈現(xiàn)那些需要突出顯示或高亮顯示的文字。mark元素主要功能是在文本中高亮顯示某些字符，以引起用戶注意。例如下面的例子：<body><h3>優(yōu)秀團(tuán)隊(duì)領(lǐng)導(dǎo)者的<mark>素質(zhì)</mark></h3>

<p>一個(gè)優(yōu)秀的團(tuán)隊(duì)領(lǐng)導(dǎo)者，必須具有<mark>過硬</mark>的技術(shù)與<mark>務(wù)實(shí)</mark>的專業(yè)精神。

</p>2.4.6<time>標(biāo)記time標(biāo)簽定義公歷的時(shí)間（24小時(shí)制）或日期，時(shí)間和時(shí)區(qū)偏移是可選的。time標(biāo)簽的屬性有兩個(gè)，pubdate和datetime，pubdate屬性指示time標(biāo)簽中的日期/時(shí)間是文檔的發(fā)布日期，datetime屬性是規(guī)定日期/時(shí)間的。例如：<p>我們?cè)诿刻煸缟?lt;time>7:30</time>開始晨讀。</p><p>我在<timedatetime="2025-01-01">元旦</time>有一天假期。</p>2.4.7dialog元素dialog元素用于定義對(duì)話窗或窗口，例如<dialogopen>對(duì)話窗口</dialog>。open屬性用以控制元素的顯示，如果不添加，元素不會(huì)顯示。它會(huì)絕對(duì)定位于頁面中，層級(jí)在其他元素之上，并且居中，其寬高也會(huì)根據(jù)內(nèi)容自適應(yīng)。例如下面的代碼，顯示的效果如圖2-13所示：<dialogopen><h2>歡迎光臨！</h2></dialog>2.4.8bdi元素bdi元素用于定義文本的方向，使其脫離其周圍文本的方向設(shè)置。可用于阿拉伯語或希伯來語之類的語言,或者在瀏覽器動(dòng)態(tài)插入某些文本而又不知道文本方向的情況下有用。2.4.9figcaption標(biāo)簽<figcapiton>標(biāo)簽定義figure元素的標(biāo)題，"figcaption"元素應(yīng)該被置于"figure"元素的第一個(gè)或最后一個(gè)子元素的位置。例如下面的html代碼中，為圖片zsd.jpg設(shè)置了標(biāo)題。<figure>

<figcaption>浙師大秋日美景</figcaption>

<imgsrc="zsd.jpg"

width="350"height="234"/></figure>canvas元素用于在網(wǎng)頁上繪制圖形。canvas元素本身沒有行為，只提供一塊畫布，但它會(huì)把繪圖的API展現(xiàn)給客戶端Javascript，由JavaScript將圖形繪制在畫布上。下面的代碼定義了一個(gè)canvas元素。<canvasid="myCanvas"width="200"height="100"></canvas>2.4.10canvas畫布接下來使用javascript來畫圖，其代碼如下：<scripttype="text/javascript">varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);</script>上面的例子中首先使用變量c來獲得前面定義的畫布對(duì)象，getContext("2d")對(duì)象是內(nèi)建的HTML5對(duì)象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。接下來設(shè)置畫筆顏色為紅色，fillRect(0,0,150,75)，是從左上角(0,0)開始，在畫布上繪制150x75的矩形。如圖2-15所示：2.4.10canvas畫布<progress>標(biāo)簽定義運(yùn)行中的進(jìn)度（進(jìn)程）,可以使用<progress>標(biāo)簽來顯示javascript中耗費(fèi)時(shí)間的函數(shù)的進(jìn)度。<progress>表示任務(wù)完成的進(jìn)度，背景為灰色，完成的部分填充為藍(lán)色條（不同的瀏覽器顯示效果不一樣）。例如以下代碼中，value值表示當(dāng)前的進(jìn)度為25，總的大小為100，

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論