項(xiàng)目3 掌握HTML5 基礎(chǔ)知識_第1頁
項(xiàng)目3 掌握HTML5 基礎(chǔ)知識_第2頁
項(xiàng)目3 掌握HTML5 基礎(chǔ)知識_第3頁
項(xiàng)目3 掌握HTML5 基礎(chǔ)知識_第4頁
項(xiàng)目3 掌握HTML5 基礎(chǔ)知識_第5頁
已閱讀5頁，還剩64頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

項(xiàng)目三掌握HTML5基礎(chǔ)認(rèn)識HTML及其常用的編輯工具學(xué)會使用HTML常用標(biāo)簽學(xué)會使用新增的HTML5標(biāo)簽學(xué)習(xí)目標(biāo)Contents目錄任務(wù)1初識HTML任務(wù)2HTML的編輯工具任務(wù)3HTML的常用標(biāo)簽任務(wù)4HTML5的新增標(biāo)簽的使用1.1HTML特殊字符1.2任務(wù)1初識HTMLHTML文檔基本格式、標(biāo)記及其屬性1.1.1HTML基本格式1.1.1HTML基本格式HTML文檔的基本格式其中主要包括<!doctype>文檔類型聲明,<html>根標(biāo)記、<head>頭部標(biāo)記、<body>主體標(biāo)記。1.1.2HTML標(biāo)簽雙標(biāo)簽格式：<標(biāo)簽名></標(biāo)簽名>例如：<p>這是一個段落</p>2單標(biāo)簽

格式：<標(biāo)簽名/>如：<br/>1注釋標(biāo)簽格式：<!--注釋內(nèi)容-->3任務(wù)1認(rèn)識網(wǎng)頁與網(wǎng)站1.2HTML特殊字符

字符實(shí)體表1.2.1特殊字符描述實(shí)體名稱實(shí)體編號特殊字符描述實(shí)體名稱實(shí)體編號空格

 ￥人民幣/日元¥¥<

小于號<<€歐元€€>

大于號>>§小節(jié)§§&和號&&?版權(quán)©©"引號""?注冊商標(biāo)®®'撇號'(IE不支持)'?商標(biāo)™™￠分¢¢×乘號××￡鎊££÷除號÷÷2.1SublimeText2.2任務(wù)2HTML常用編輯器VSCode2.3Dreamweaver任務(wù)1認(rèn)識網(wǎng)頁與網(wǎng)站2.1VSCode2.2SublimeText2.3DreameweaverCC2017技能拓展1.從官網(wǎng)下載安裝VSCode或者Sublimetext,并安裝。2.啟動VSCode或者Sublimetext或者DreamweaverCC2017制作一個龍?zhí)ь^介紹網(wǎng)頁，效果圖如下圖所示，并對以上內(nèi)容進(jìn)行綜合總結(jié)。3.1超鏈接3.2任務(wù)3HTML常用標(biāo)簽文本格式3.3圖像表格3.43.1.1段落格式P與br1標(biāo)題標(biāo)記符h1-h62水平線標(biāo)記符<hr>3屬性功能值實(shí)例align對齊方式Center、left、right,默認(rèn)是居中對齊<hralign=”left”>noshade陰影樣式Noshade(省略，表示有陰影)<hrnoshade>size高度（厚度）pixels<hrsize=”50”>width長度Pixels、%<hrwidth="50%">或<hr

width="1000">3.1.1段落格式-示例效果3.1.2文本格式文本格式化1標(biāo)簽功能標(biāo)簽功能<b>定義粗體文本<sub>定義下標(biāo)字<em>定義著重文字<sup>定義上標(biāo)字<i>定義斜體字<ins>定義插入字<small>定義小號字<del>定義刪除字<strong>定義加重語氣<u>下劃線3.1.2文本格式“計(jì)算機(jī)輸出”標(biāo)簽2標(biāo)簽功能<code>表示計(jì)算機(jī)源代碼或者其他機(jī)器可以閱讀的文本內(nèi)容。<kbd>定義鍵盤碼。<samp>定義計(jì)算機(jī)代碼樣本。<tt>定義打字機(jī)代碼。<var>定義變量。<pre>定義預(yù)格式文本。3.1.3列表格式有序列表1<ol><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li></ol>3.1.3列表格式無序列表2<ul><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li></ul>3.1.3列表格式自定義列表3<dl><dt>水果類</dt><dd>車?yán)遄?lt;/dd><dd>橙子</dd><dt>蔬菜類</dt><dd>蘿卜</dd><dd>青菜</dd></dl>3.2超鏈接鏈接語法4絕對路徑2相對路徑3網(wǎng)頁鏈接路徑1空鏈接5錨點(diǎn)鏈接63.3圖像圖像的寬度和高度2示例3圖像的插入13.4表格表格標(biāo)簽2表格示例3表格的插入1表格在網(wǎng)頁中除了有合理顯示文本數(shù)據(jù)的內(nèi)容以外，更重要的是還有布局網(wǎng)頁的功能。表格的插入1表格由<table>標(biāo)簽來定義。

<table>行：<tr>單元格<td>表格標(biāo)簽2標(biāo)簽功能標(biāo)簽功能<table>定義表格<thead>定義表格的頁眉<caption>定義表格標(biāo)題<tbody>定義表格的主體<th>定義表格的表頭<tfoot>定義表格的頁腳<tr>定義表格的行<col>定義用于表格列的屬性<td>定義表格單元格<colgroup>定義表格列的組屬性名屬性值功能alignleft、center、right、justify、char規(guī)定表格相對周圍元素的對齊方式。（不推薦使用，用樣式代替）bgcolor顏色名字或顏色二進(jìn)制代碼規(guī)定表格的背景顏色。（不推薦使用，用樣式代替）border1或者其他值，默認(rèn)是""規(guī)定表格單元是否擁有邊框，默認(rèn)為""，表示沒有邊框cellpadding像素值規(guī)定單元邊沿與其內(nèi)容之間的空白，默認(rèn)1像素cellspacing像素值規(guī)定單元格之間的空白，默認(rèn)為2像素。width像素值或百分比規(guī)定表格的寬度。framevoid、above、below、hsides、lhs、rhs、vsides、box、border規(guī)定外側(cè)邊框的哪個部分是可見的。rulesnone、groups、rows、cols、all規(guī)定內(nèi)側(cè)邊框的哪個部分是可見的。summarytext規(guī)定表格的摘要。border-collapsecollapse設(shè)置表格的邊框是否被折疊成一個單一的邊框或隔開表格標(biāo)簽屬性2表格frame屬性2frame屬性值

功能void（默認(rèn)值）無邊框above顯示上部的外側(cè)邊框。below顯示下部的外側(cè)邊框。hsides顯示上部和下部的外側(cè)邊框。vsides顯示左右兩邊的外側(cè)邊框。lhs顯示左邊的外側(cè)邊框。rhs顯示右邊的外側(cè)邊框。box在所有四個邊上顯示外側(cè)邊框。border在所有邊上顯示外側(cè)邊框。表格中<tr>標(biāo)簽屬性值設(shè)置2屬性值功能alignright、left、center、justify、char定義表格行的內(nèi)容對齊方式bgcolor顏色名字或顏色二進(jìn)制代碼設(shè)置表格行的背景顏色（一般不使用，用樣式取而代之）charcharacter規(guī)定根據(jù)哪個字符來進(jìn)行文本對齊charoffnumber規(guī)定第一個對齊字符的偏移量valigntop、middle、bottom、baseline規(guī)定表格行中內(nèi)容的垂直對齊方式表格中<td>標(biāo)簽屬性值設(shè)置2屬性值描述alignleft、right、center、justify、char規(guī)定單元格內(nèi)容的水平對齊方式nowspannowrap規(guī)定單元格中內(nèi)容是否自動換行（不贊成使用，一般使用樣式取而代之）rowspannumber規(guī)定單元格橫跨的行數(shù)colspannumber規(guī)定單元格橫跨的列數(shù)3.5表單Input元素2基本語法1示例3表單是用戶和后臺交互的重要紐帶，我們常見的注冊、登錄、問卷調(diào)查等都離不開表單。基本語法1<formaction="URL"name=""method="get|post"enctype="MIME"target"">input元素……</form>表單的幾個基本屬性name:給表單命名。action:表單中的數(shù)據(jù)將會提交到該地址進(jìn)行處理。method:數(shù)據(jù)提交到后臺使用哪種HTTP提交的方式。提交方式有兩種，post和getencytype:（encodetype）就是編碼類型的意思。3.5.2input元素密碼域password2普通按鈕button3文本框text1單選按鈕radio4復(fù)選按鈕checkbox5提交按鈕submit6重置按鈕reset7圖像按鈕image8文件域file9菜單和列表select10其它新增的元素12文本域textarea11<inputtype=“”name="控件名稱"……>Input元素的語法格式

例如：<inputtype="text"name="user"maxlength="30">

例如：<inputtype="password"name="psw"maxlength="30">

例如：<inputtype="button"value="選好了">表單綜合案例—用戶注冊表單綜合案例一般制作方法：1.插入表單2.在表單中插入表格3.根據(jù)表單元素，調(diào)整或合并表格的單元格4.在表格相應(yīng)單元格中插入input元素5.設(shè)置input元素屬性3.6HTML塊級元素和內(nèi)聯(lián)元素內(nèi)聯(lián)元素2塊級元素1<div>標(biāo)簽3<span>標(biāo)簽4塊元素和內(nèi)聯(lián)元素相互轉(zhuǎn)換51.塊元素每個塊元素都會獨(dú)自占據(jù)一行或多行。塊元素可以設(shè)置寬度、高度、對齊等屬性。特點(diǎn)常用于網(wǎng)頁布局和網(wǎng)頁結(jié)構(gòu)的搭建。作用常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li><p>、<nav>、<aside>、<header>、<footer>、<section>、<article>、<ul>、<address>、<form>、<tabe>等等。常見的塊元素塊元素塊級元素11.元素的類型不會獨(dú)自占據(jù)一行。不可以設(shè)置寬度、高度、對齊等屬性特點(diǎn)用于控制頁面中文本的樣式。作用常見的行內(nèi)元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>等常見的內(nèi)聯(lián)元素內(nèi)聯(lián)元素內(nèi)聯(lián)元素（行內(nèi)元素）2知識儲備特殊行內(nèi)元素注意：在行內(nèi)元素中有幾個特殊的標(biāo)簽。例如，<img/>標(biāo)簽和<input/>標(biāo)簽。這些特殊的行內(nèi)元素可以設(shè)置寬度、高度和對齊屬性，因此它們也被稱為行內(nèi)塊元素。內(nèi)聯(lián)元素（行內(nèi)元素）2<div>標(biāo)簽<div>標(biāo)簽屬于塊元素，在網(wǎng)頁布局方面發(fā)揮著重要的作用，使用<div>我們可以定義頁面的各個部分，通過與CSS相結(jié)合可以實(shí)現(xiàn)各種各樣的效果。<div>標(biāo)簽3<span>標(biāo)簽<span>標(biāo)簽屬于行內(nèi)元素，在<span>與</span>之間只能包含文本和各種行內(nèi)標(biāo)簽。<span>標(biāo)簽沒有固定的表現(xiàn)形式，通?？膳浜蟘lass屬性使用。當(dāng)我們對<span>標(biāo)簽應(yīng)用樣式時，該標(biāo)簽才會產(chǎn)生視覺上的變化。在搭建HTML結(jié)構(gòu)時，塊元素能夠嵌套行內(nèi)元素，但行內(nèi)元素不能嵌套塊元素。<span>標(biāo)簽4塊元素和內(nèi)聯(lián)元素相互轉(zhuǎn)換5塊元素和行內(nèi)元素相互轉(zhuǎn)換網(wǎng)頁元素是由多個塊元素和行內(nèi)元素構(gòu)成的盒子排列而成的?？梢杂胐isplay屬性轉(zhuǎn)換塊元素和行元素的類型。

display屬性常用的屬性值及含義如下。(1)display:inline;轉(zhuǎn)換為行內(nèi)元素。(2)display:block;轉(zhuǎn)換為塊狀元素。(3)display:inline-block;轉(zhuǎn)換為行內(nèi)塊狀元素。(4)display:none:元素被隱藏。7綜合實(shí)例：讀書網(wǎng)站網(wǎng)頁設(shè)計(jì)2網(wǎng)站規(guī)劃1網(wǎng)頁制作34.1HTML5分組元素4.2任務(wù)4HTML5新增標(biāo)簽的使用結(jié)構(gòu)元素標(biāo)簽4.3HTML5交互元素HTML5中新增了幾個結(jié)構(gòu)元素（section元素、article元素、nav元素、aside元素、header元素和footer元素），這些元素的作用與塊元素非常相似，通過運(yùn)用這些結(jié)構(gòu)元素，可以讓網(wǎng)頁的整體結(jié)構(gòu)更加直觀和明確、更加具有語義化和更具有現(xiàn)代風(fēng)格。

4.1HTML5結(jié)構(gòu)元素header元素為頁面或頁面中某一個區(qū)塊的頁眉，通常是一些引導(dǎo)和導(dǎo)航信息。Header元素通常來放置整個頁面或頁面內(nèi)的一個內(nèi)容區(qū)塊的標(biāo)題，它可以包含頁面標(biāo)題、logo圖片，搜索表單等。1、header元素

4.1HTML5結(jié)構(gòu)元素語法格式：<header><h1>標(biāo)題</h1>……</header>1、header元素例如

4.1HTML5結(jié)構(gòu)元素nav元素定義頁面的導(dǎo)航鏈接部分區(qū)域，引用nav元素可以讓頁面元素的語義更加明確。在一個HTML頁面中可以包含多個nav元素，但并不是所有的鏈接都需要包含在nav元素中。通常nav元素用于以下幾種場合：傳統(tǒng)的導(dǎo)航條；側(cè)邊欄導(dǎo)航；內(nèi)頁導(dǎo)航；翻頁導(dǎo)航。2、nav元素

4.1HTML5結(jié)構(gòu)元素例如，常見的首頁、上一頁、下一頁、尾頁鏈接。<nav><ahref="#">首頁</a><ahref="#">上一頁</a><ahref="#">下一頁</a><ahref="#">尾頁</a></nav>學(xué)院網(wǎng)站傳統(tǒng)導(dǎo)航條也可以用nav元素。2、nav元素

4.1HTML5結(jié)構(gòu)元素3、

section元素section元素用于對網(wǎng)站或應(yīng)用程序中頁面的內(nèi)容進(jìn)行分塊，表示一段專題性的內(nèi)容，一般會帶有標(biāo)題。Section元素通常用于文章的章節(jié)、頁眉、頁腳或文檔中的其他部分。

4.1HTML5結(jié)構(gòu)元素3、

section元素section元素用于對網(wǎng)站或應(yīng)用程序中頁面的內(nèi)容進(jìn)行分塊，表示一段專題性的內(nèi)容，一般會帶有標(biāo)題。Section元素通常用于文章的章節(jié)、頁眉、頁腳或文檔中的其他部分。

4.1HTML5結(jié)構(gòu)元素3、section元素使用需注意以下3點(diǎn)：不要使用section元素設(shè)置樣式作為設(shè)置樣式的頁面容器，那是div的工作。如果article元素、aside元素、nav元素更適合我們使用條件，那么我們就不要使用section元素。不要為沒有標(biāo)題的內(nèi)容去使用section元素。沒有標(biāo)題的內(nèi)容區(qū)塊不要使用section元素。溫馨提示

4.1HTML5結(jié)構(gòu)元素4、article元素article元素定義獨(dú)立的內(nèi)容。該元素定義的內(nèi)容必須是有意義的且必須是獨(dú)立于文檔的其余部分。它可是論壇帖子，博客文章，新聞內(nèi)容，或者是用戶的評論，亦或者其它任何獨(dú)立的內(nèi)容等。一個article元素通常有它自己的標(biāo)題，有時還有它自己頁腳。

4.1HTML5結(jié)構(gòu)元素544、article元素在HTML5中，article元素可以嵌套使用。article元素可以包含多個section元素，section元素也可以包含多個article元素。article元素可以看成是一種特殊類型的section元素，它比section元素更強(qiáng)調(diào)獨(dú)立性。即section元素側(cè)重分段或分塊，而article側(cè)重獨(dú)立性。如果一塊內(nèi)容相對來說比較獨(dú)立的、完整

，應(yīng)該使用article元素，如果你想將一塊內(nèi)容分成幾段，應(yīng)該使用section元素。

4.1HTML5結(jié)構(gòu)元素aside元素通常用來表示當(dāng)前頁面的附屬信息部分，它的內(nèi)容跟這個頁面的其它內(nèi)容的關(guān)聯(lián)性不強(qiáng)，或者是沒有關(guān)聯(lián)，單獨(dú)存在。它可以包含我們當(dāng)前頁面或者主題內(nèi)容相關(guān)的一些引用，如側(cè)邊欄、廣告、目錄、索引、Web應(yīng)用、鏈接、當(dāng)前頁內(nèi)容簡介等，有別與我們主要內(nèi)容。

4.1HTML5結(jié)構(gòu)元素5、aside元素56aside元素主要使用方法有兩種：（1）被包含在article元素中作為主要內(nèi)容的附屬信息部分。比如與我們當(dāng)前文章有關(guān)的參考資料、名詞解釋等等。（2）第二種用法是在article元素之外使用的，作為頁面或者站點(diǎn)全局的附屬信息。比如側(cè)邊欄、廣告、友情鏈接等。

4.1HTML5結(jié)構(gòu)元素5、aside元素footer元素用于定義頁面或區(qū)域的頁腳，可以為網(wǎng)站的版權(quán)信息、作者、日期及聯(lián)系信息。一個頁面中可以包含多個footer元素，也可以在section元素或article元素中使用footer元素。6、

footer元素

4.1HTML5結(jié)構(gòu)元素58footer元素header元素article元素nav元素aside元素section元素

4.1HTML5結(jié)構(gòu)元素分組元素用于對頁面元素進(jìn)行分組。我們熟悉的div、p、ol、ul都是分組元素標(biāo)記。本節(jié)學(xué)習(xí)3個新增的分組元素，分別是figure元素、figcaption元素和hgroup元素。

4.2HTML5分組元素figure元素用來定義一塊獨(dú)立內(nèi)容，該內(nèi)容如果被刪除也不會對周圍的內(nèi)容有影響。它可以用來表示圖片、圖表、音頻、視頻，代碼等。figcaption元素用于為figure元素組添加標(biāo)題，figcaption只能作為figure元素的子元素，一個figure元素內(nèi)最多允許使用一個figcaption元素，該元素應(yīng)該放在figure元素的第一個或者最后一個子元素的位置。1、

figure元素和figcaption元素

4.2HTML5分組元素hgroup元素用于對網(wǎng)頁或區(qū)段（section）的標(biāo)題進(jìn)行組合。它常與h1~h6元素組合使用。通常，將hgroup元素放在header元素中。612、hgroup元素

4.2HTML5分組元素62hgroup元素figure元素figcaption元素

4.2HTML5分組元素63HTML5里增加了頁面交互元素，提高頁面的交互體驗(yàn)。這一部分非常的重要，并且和JS控制的效果不同。本節(jié)將詳細(xì)介紹這些元素。

4

溫馨提示

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

最新文檔

評論

0/150

提交評論