項目3 掌握HTML5 基礎知識_第1頁
項目3 掌握HTML5 基礎知識_第2頁
項目3 掌握HTML5 基礎知識_第3頁
項目3 掌握HTML5 基礎知識_第4頁
項目3 掌握HTML5 基礎知識_第5頁
已閱讀5頁，還剩64頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

格式：<標簽名/>如：<br/>1注釋標簽格式：<!--注釋內容-->3任務1認識網頁與網站1.2HTML特殊字符

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

 ￥人民幣/日元¥¥<

小于號<<€歐元€€>

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

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

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

功能void（默認值）無邊框above顯示上部的外側邊框。below顯示下部的外側邊框。hsides顯示上部和下部的外側邊框。vsides顯示左右兩邊的外側邊框。lhs顯示左邊的外側邊框。rhs顯示右邊的外側邊框。box在所有四個邊上顯示外側邊框。border在所有邊上顯示外側邊框。表格中<tr>標簽屬性值設置2屬性值功能alignright、left、center、justify、char定義表格行的內容對齊方式bgcolor顏色名字或顏色二進制代碼設置表格行的背景顏色（一般不使用，用樣式取而代之）charcharacter規定根據哪個字符來進行文本對齊charoffnumber規定第一個對齊字符的偏移量valigntop、middle、bottom、baseline規定表格行中內容的垂直對齊方式表格中<td>標簽屬性值設置2屬性值描述alignleft、right、center、justify、char規定單元格內容的水平對齊方式nowspannowrap規定單元格中內容是否自動換行（不贊成使用，一般使用樣式取而代之）rowspannumber規定單元格橫跨的行數colspannumber規定單元格橫跨的列數3.5表單Input元素2基本語法1示例3表單是用戶和后臺交互的重要紐帶，我們常見的注冊、登錄、問卷調查等都離不開表單?；菊Z法1<formaction="URL"name=""method="get|post"enctype="MIME"target"">input元素……</form>表單的幾個基本屬性name:給表單命名。action:表單中的數據將會提交到該地址進行處理。method:數據提交到后臺使用哪種HTTP提交的方式。提交方式有兩種，post和getencytype:（encodetype）就是編碼類型的意思。3.5.2input元素密碼域password2普通按鈕button3文本框text1單選按鈕radio4復選按鈕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.根據表單元素，調整或合并表格的單元格4.在表格相應單元格中插入input元素5.設置input元素屬性3.6HTML塊級元素和內聯元素內聯元素2塊級元素1<div>標簽3<span>標簽4塊元素和內聯元素相互轉換51.塊元素每個塊元素都會獨自占據一行或多行。塊元素可以設置寬度、高度、對齊等屬性。特點常用于網頁布局和網頁結構的搭建。作用常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li><p>、<nav>、<aside>、<header>、<footer>、<section>、<article>、<ul>、<address>、<form>、<tabe>等等。常見的塊元素塊元素塊級元素11.元素的類型不會獨自占據一行。不可以設置寬度、高度、對齊等屬性特點用于控制頁面中文本的樣式。作用常見的行內元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>等常見的內聯元素內聯元素內聯元素（行內元素）2知識儲備特殊行內元素注意：在行內元素中有幾個特殊的標簽。例如，<img/>標簽和<input/>標簽。這些特殊的行內元素可以設置寬度、高度和對齊屬性，因此它們也被稱為行內塊元素。內聯元素（行內元素）2<div>標簽<div>標簽屬于塊元素，在網頁布局方面發揮著重要的作用，使用<div>我們可以定義頁面的各個部分，通過與CSS相結合可以實現各種各樣的效果。<div>標簽3<span>標簽<span>標簽屬于行內元素，在<span>與</span>之間只能包含文本和各種行內標簽。<span>標簽沒有固定的表現形式，通常可配合class屬性使用。當我們對<span>標簽應用樣式時，該標簽才會產生視覺上的變化。在搭建HTML結構時，塊元素能夠嵌套行內元素，但行內元素不能嵌套塊元素。<span>標簽4塊元素和內聯元素相互轉換5塊元素和行內元素相互轉換網頁元素是由多個塊元素和行內元素構成的盒子排列而成的?？梢杂胐isplay屬性轉換塊元素和行元素的類型。

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

4.1HTML5結構元素header元素為頁面或頁面中某一個區塊的頁眉，通常是一些引導和導航信息。Header元素通常來放置整個頁面或頁面內的一個內容區塊的標題，它可以包含頁面標題、logo圖片，搜索表單等。1、header元素

4.1HTML5結構元素語法格式：<header><h1>標題</h1>……</header>1、header元素例如

4.1HTML5結構元素nav元素定義頁面的導航鏈接部分區域，引用nav元素可以讓頁面元素的語義更加明確。在一個HTML頁面中可以包含多個nav元素，但并不是所有的鏈接都需要包含在nav元素中。通常nav元素用于以下幾種場合：傳統的導航條；側邊欄導航；內頁導航；翻頁導航。2、nav元素

4.1HTML5結構元素例如，常見的首頁、上一頁、下一頁、尾頁鏈接。<nav><ahref="#">首頁</a><ahref="#">上一頁</a><ahref="#">下一頁</a><ahref="#">尾頁</a></nav>學院網站傳統導航條也可以用nav元素。2、nav元素

4.1HTML5結構元素3、

section元素section元素用于對網站或應用程序中頁面的內容進行分塊，表示一段專題性的內容，一般會帶有標題。Section元素通常用于文章的章節、頁眉、頁腳或文檔中的其他部分。

4.1HTML5結構元素3、

section元素section元素用于對網站或應用程序中頁面的內容進行分塊，表示一段專題性的內容，一般會帶有標題。Section元素通常用于文章的章節、頁眉、頁腳或文檔中的其他部分。

4.1HTML5結構元素3、section元素使用需注意以下3點：不要使用section元素設置樣式作為設置樣式的頁面容器，那是div的工作。如果article元素、aside元素、nav元素更適合我們使用條件，那么我們就不要使用section元素。不要為沒有標題的內容去使用section元素。沒有標題的內容區塊不要使用section元素。溫馨提示

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

4.1HTML5結構元素544、article元素在HTML5中，article元素可以嵌套使用。article元素可以包含多個section元素，section元素也可以包含多個article元素。article元素可以看成是一種特殊類型的section元素，它比section元素更強調獨立性。即section元素側重分段或分塊，而article側重獨立性。如果一塊內容相對來說比較獨立的、完整

，應該使用article元素，如果你想將一塊內容分成幾段，應該使用section元素。

4.1HTML5結構元素aside元素通常用來表示當前頁面的附屬信息部分，它的內容跟這個頁面的其它內容的關聯性不強，或者是沒有關聯，單獨存在。它可以包含我們當前頁面或者主題內容相關的一些引用，如側邊欄、廣告、目錄、索引、Web應用、鏈接、當前頁內容簡介等，有別與我們主要內容。

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

4.1HTML5結構元素5、aside元素footer元素用于定義頁面或區域的頁腳，可以為網站的版權信息、作者、日期及聯系信息。一個頁面中可以包含多個footer元素，也可以在section元素或article元素中使用footer元素。6、

footer元素

4.1HTML5結構元素58footer元素header元素article元素nav元素aside元素section元素

4.1HTML5結構元素分組元素用于對頁面元素進行分組。我們熟悉的div、p、ol、ul都是分組元素標記。本節學習3個新增的分組元素，分別是figure元素、figcaption元素和hgroup元素。

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

figure元素和figcaption元素

4.2HTML5分組元素hgroup元素用于對網頁或區段（section）的標題進行組合。它常與h1~h6元素組合使用。通常，將hgroup元素放在header元素中。612、hgroup元素

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

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

4

溫馨提示

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

評論

0/150

提交評論