Web前端開發(fā)任務驅動式教程（HTML5+CSS3+JavaScript）（第2版）（汪嬋嬋微課版）課件全套 任務1、2 搭建開發(fā)環(huán)境、文字與段落排版 - 副本_第1頁
Web前端開發(fā)任務驅動式教程（HTML5+CSS3+JavaScript）（第2版）（汪嬋嬋微課版）課件全套 任務1、2 搭建開發(fā)環(huán)境、文字與段落排版 - 副本_第2頁
Web前端開發(fā)任務驅動式教程（HTML5+CSS3+JavaScript）（第2版）（汪嬋嬋微課版）課件全套 任務1、2 搭建開發(fā)環(huán)境、文字與段落排版 - 副本_第3頁
Web前端開發(fā)任務驅動式教程（HTML5+CSS3+JavaScript）（第2版）（汪嬋嬋微課版）課件全套 任務1、2 搭建開發(fā)環(huán)境、文字與段落排版 - 副本_第4頁
Web前端開發(fā)任務驅動式教程（HTML5+CSS3+JavaScript）（第2版）（汪嬋嬋微課版）課件全套 任務1、2 搭建開發(fā)環(huán)境、文字與段落排版 - 副本_第5頁
已閱讀5頁，還剩391頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

Web前端開發(fā)What？Why？How？線上平臺成績構成線上成績50%線下成績50%過程性考核30%終結性考核20%過程性考核25%終結性考核25%

視頻觀看占5%線上考試課堂考勤占5%期末作品

作業(yè)成績占10%作業(yè)及課堂表現(xiàn)占5%

測驗成績占10%階段性考核占15%

發(fā)帖討論成績占5%

任務1搭建開發(fā)環(huán)境主講老師：汪嬋嬋第一單元 Web基礎知識網(wǎng)頁文件的創(chuàng)建和保存Web的工作原理網(wǎng)頁開發(fā)環(huán)境的搭建站點的創(chuàng)建和管理掌握學習目標Web的類型了解:學習目標實戰(zhàn)演練——搭建開發(fā)環(huán)境強化訓練——創(chuàng)建第一個HTML5頁面任務目標1.什么是Internet？什么是Web？Internet：是一個全球性的計算機互聯(lián)網(wǎng)絡，又稱“因特網(wǎng)”、“互聯(lián)網(wǎng)”，它是世界上規(guī)模最大的計算機網(wǎng)絡。Web：是用戶登錄Internet后最常用的功能。Web頁又稱網(wǎng)頁，一般都包含圖像、文字和超鏈接等元素。知識準備服務器（Server）：監(jiān)聽客戶端連接請求、接收請求，返回響應內(nèi)容通信協(xié)議（Http）：超文本傳輸協(xié)議，定義Web服務器和客戶端的通訊細節(jié)工作模式：瀏覽器/服務器（B/S）2.Web的工作原理瀏覽器（Browser）：客戶端用于訪問網(wǎng)頁的主要軟件知識準備2.Web的工作原理Web服務器知識準備靜態(tài)網(wǎng)頁：標準的HTML文件，采用HTML（超本文標記語言）編寫，通過HTTP（超文本傳輸協(xié)議）在服務器端和客戶端之間傳輸?shù)募兾谋疚募瑪U展名為.html或.htm。知識準備3.Web的類型按技術分：3.Web的類型動態(tài)網(wǎng)頁：指網(wǎng)頁文件里包含了程序代碼，通過后臺數(shù)據(jù)庫與Web服務器的信息交互，由后臺數(shù)據(jù)庫提供實時數(shù)據(jù)更新和數(shù)據(jù)查詢服務。動態(tài)網(wǎng)頁能夠根據(jù)不同時間和不同訪問者而顯示不同內(nèi)容，可由ASP、PHP、JSP等技術編寫。按技術分：知識準備3.Web的類型主頁（HomePage）：訪問網(wǎng)站時看到的第一頁，即首頁。主頁的名稱是特定的，一般為index.html、default.html、default.aspx或index.aspx等。按網(wǎng)頁在網(wǎng)站中的位置分：內(nèi)頁（WebPage）：指與主頁相鏈接的其他頁面，即網(wǎng)站內(nèi)部的頁面。知識準備HTML5：超文本標記語言（HyperTextMarkupLanguage）的第5代版本優(yōu)勢：標準化，解決了跨瀏覽器問題，具備良好的跨平臺性能4.HTML5概述知識準備案例描述：1.安裝網(wǎng)頁編輯軟件2.安裝瀏覽器搭建開發(fā)環(huán)境實戰(zhàn)演練案例描述：1.創(chuàng)建和管理站點2.創(chuàng)建和保存HTML5文檔創(chuàng)建第一個HTML5頁面強化訓練01Web的工作原理02網(wǎng)頁開發(fā)環(huán)境的搭建03站點的創(chuàng)建和管理04網(wǎng)頁文件的創(chuàng)建和保存任務小結用記事本軟件編寫并保存以下代碼，將其后綴名“.txt”改為“.html”，用谷歌瀏覽器瀏覽網(wǎng)頁效果。課后實訓任務2文字與段落排版第二單元HTML5語言基礎學習目標分隔標簽標簽標簽屬性文本標簽掌握序列標簽文字段落排版的基本規(guī)則了解:學習目標實戰(zhàn)演練——制作科技館參觀須知頁面強化訓練——制作“我家菜館”點菜單頁面任務目標1.HTML5文檔格式<!doctypehtml><html><head><metacharset="utf-8"><title>我的網(wǎng)頁</title></head><body>我的第一張網(wǎng)頁。</body></html>向瀏覽器聲明當前文檔使用哪種HTML標準規(guī)范標志HTML文檔的開始標志HTML文檔的結束頭部標簽一般用于描述瀏覽器所需的信息定義網(wǎng)頁顯示的內(nèi)容定義HTML文檔的標題知識準備2.標簽的屬性語法格式：<標簽名屬性1=”屬性值1”屬性2=”屬性值2”…>內(nèi)容</標簽名><body>標簽的常用屬性：屬性描述屬性描述alink鼠標點擊超鏈接時的顏色bgcolor網(wǎng)頁的背景顏色link未訪問過的超鏈接顏色background網(wǎng)頁的背景圖像vlink已訪問過的超鏈接顏色leftmargin網(wǎng)頁的左邊距text所有文本的顏色topmargin網(wǎng)頁的上邊距知識準備示例：利用body的屬性設置網(wǎng)頁效果<!doctypehtml><html><head><metacharset="utf-8"><title>利用body的屬性設置網(wǎng)頁效果</title></head><bodyleftmargin="80"topmargin="50"text="green"bgcolor="#CCCCFF">利用body的屬性設置網(wǎng)頁效果：頁面左邊距為80像素，上邊距為50像素，文本顏色為綠色，背景顏色值為“#CCCCFF”。</body></html>知識準備3.文本標簽標題標簽：網(wǎng)頁內(nèi)的文字標題，在頁面中可以使用<h1>到<h6>標簽設置各級標題。從1級到6級，標題字體大小依次遞減，同時文字加粗。align（對齊）屬性：屬性描述屬性描述left左對齊（默認值）right右對齊center水平居中justify兩端對齊知識準備示例：標題標簽的使用<!doctypehtml><html><head><metacharset="utf-8"><title>設置各級標題標簽</title></head><body><h1>一級標題文字</h1><h2>二級標題文字</h2><h3>三級標題文字</h3><h4>四級標題文字</h4><h5>五級標題文字</h5><h6>六級標題文字</h6></body></html><h1align="center">一級標題文字</h1><h2align="left">二級標題文字</h2><h3align="right">三級標題文字</h3>知識準備3.文本標簽文字修飾標簽：為文字添加修飾，使得文字的格式能有多種樣式的變化。如為文字設置粗體，就可以使用B標簽，語法格式為：<B>被修飾文字</B>常用的文字修飾標簽：標簽呈現(xiàn)結果標簽呈現(xiàn)結果<B>粗體<STRONG>強調(diào)文本<INS>下畫線<I>斜體<SUP>上標<SUB>下標<DEL>刪除線

知識準備示例：文字修飾綜合范例<!doctypehtml><html><head><metacharset="utf-8"><title>文字修飾綜合范例</title></head><body><p>默認的格式</p>

<!--<p></p>標簽表示段落標簽--><p><B>此行文字顯示為粗體</B></p><p><STRONG>此行文字為強調(diào)文本</STRONG></p><p><INS>此行文字有下劃線</INS></p><p><I>此行文字顯示為斜體</I></p><p>此處2為上標：3<SUP>2</SUP></p><p>此處2為下標：S<SUB>2</SUB></p><p><DEL>此行文字有刪除線</DEL></p></body></html>注釋標記。用于標注一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字。知識準備3.文本標簽特殊字符：在代碼中有特殊用途的符號，如需在網(wǎng)頁中顯示該類符號，是需要在代碼中通過特殊編碼來實現(xiàn)的。常用的特殊字符：標簽呈現(xiàn)結果標簽呈現(xiàn)結果

代表一個不斷行空白<<

>>

&&""

知識準備4.分隔標簽段落標簽<p>…</p>：在段落前后加上額外的空行?；靖袷剑?lt;palign="left|center|right|justify">文字</p>

屬性align用來設置段落文字在網(wǎng)頁上的對齊方式：left（左對齊）、center（居中）、right（右對齊）和justify（兩端對齊），默認為left。格式中的“|”表示“或者”，即多項選其一。知識準備示例：段落標簽應用案例<!doctypehtml><html><head><metacharset="utf-8"><title>段落標簽應用案例</title></head><body><p>文字如需分段，可使用段落標簽。</p><palign="left">段落標簽中可設置左對齊的屬性。</p><palign="center">段落標簽中可設置居中對齊的屬性。</p><palign="right">段落標簽中可設置右對齊的屬性。</p><palign="justify">段落標簽中可設置兩端對齊的屬性。</p></body></html>知識準備4.分隔標簽換行標簽<br>：強制文本換行（但不會在行與行之間留下空行）。一個換行使用一個<br>，多個換行可以連續(xù)使用多個<br>標簽?；靖袷剑何淖?lt;br>提示：HTML標簽分為兩大類，一類是雙標簽，由開始和結束兩個標簽符組成的標簽，如<body></body>；另一類是單標簽，是指用一個標簽符號即可完整的描述某個功能的標簽，如<br>。在HTML5中，單標簽不再要求自閉合。知識準備示例：換行標簽應用案例<!doctypehtml><html><head><metacharset="utf-8"><title>換行標簽應用案例</title></head><body><p>靜夜思</p><p>作者：李白</p>床前明月光，<br>疑是地上霜。<br>舉頭望明月，<br>低頭思故鄉(xiāng)。</body></html>知識準備4.分隔標簽水平線標簽<hr>：可以作為段落與段落之間的分隔線?；靖袷剑?lt;hralign=

"left|center|right"size="分隔線粗細"

width=

"分隔線長度"

color=

"分隔線顏色">

屬性size設定分隔線的粗細，默認值為2像素。屬性width設定水平線的長度，可以是絕對值（以像素為單位）或相對值（相對于窗口的百分比）。屬性color設定水平線的顏色，以“#”引導的十六進制代碼，或色彩的英文名稱。知識準備示例：水平線標簽應用案例<!doctypehtml><html><head><metacharset="utf-8"><title>水平線標簽應用案例</title></head><body><p>靜夜思</p><hrwidth="100px"size="3px"color="#FF0000"align="left"><p>作者：李白</p>床前明月光，<br>疑是地上霜。<br>舉頭望明月，<br>低頭思故鄉(xiāng)。</body></html>

提示：水平線的顏色效果需要在瀏覽器中瀏覽才能顯示，在Dreamweaver編輯器的設計視圖中無法顯示。知識準備5.序列標簽無序列表：各個列表項之間沒有順序級別之分，通常是并列的。基本格式：<ul><li>列表項1</li><li>列表項2</li><li>列表項3</li>……</ul>知識準備示例：無序列表應用案例<!doctypehtml><html><head><metacharset="utf-8"><title>無序列表應用案例</title></head><body><ul><li>進口食品</li><li>美容洗護</li><li>家具家電</li><li>母嬰用品</li></ul></body></html>提示：在HTML5中不再支持<ul>的type屬性。知識準備5.序列標簽有序列表：有排序順序的列表，其各個列表項按照一定的順序排列。基本格式：<ol><li>列表項1</li><li>列表項2</li><li>列表項3</li>……</ol><ol>屬性：start屬性用于更改列表編號的起始值，reversed屬性表示是否對列表進行反向排序。知識準備示例：有序列表應用案例<!doctypehtml><html><head><metacharset="utf-8"><title>有序列表應用案例</title></head><body><ol><li>第一章</li><li>第二章</li><li>第三章</li><li>第四章</li></ol></body></html><olstart="2"><olstart="5"reversed>知識準備案例描述：設計并制作科技館參觀須知頁面，網(wǎng)頁效果如下。制作科技館參觀須知頁面實戰(zhàn)演練案例描述：設計并制作“我家菜館”點菜單頁面，網(wǎng)頁效果如下。制作“我家菜館”點菜單頁面強化訓練01HTML5文檔格式02標簽的屬性03文本標簽04分隔標簽05序列標簽任務小結設計并制作古詩欣賞網(wǎng)頁，效果如圖所示。課后實訓任務3圖像和超鏈接第二單元HTML5語言基礎錨點標簽圖像標簽絕對路徑和相對路徑超鏈接標簽掌握學習目標網(wǎng)頁中常用的圖片格式了解:學習目標實戰(zhàn)演練——制作網(wǎng)頁技術介紹頁面任務目標強化訓練——制作“文章故事網(wǎng)”頁面任務目標1.圖像標簽語法格式：<imgsrc="url"alt="some_text">圖像標簽的屬性：屬性描述屬性描述src規(guī)定顯示圖像的URL。alt圖像不能顯示時的替換文本。align規(guī)定如何根據(jù)周圍的文本來排列圖像。（不推薦使用）border定義圖像周圍的邊框。（不推薦使用）height定義圖像的高度。width設置圖像的寬度。hspace定義圖像左側和右側的空白。（不推薦使用）vspace定義圖像頂部和底部的空白。（不推薦使用）title光標停留在圖像上時，顯示提示文字。知識準備示例：在網(wǎng)頁中插入圖像<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>無標題文檔</title></head><body><center><imgsrc="images/1.gif"alt="女孩"title="女孩"><imgsrc="images/2.gif"width="240"height="320"><imgsrc="images/3.gif"border="1"><imgsrc="images/4.gif"></center></body></html>知識準備2.絕對路徑和相對路徑絕對路徑：指文件或目錄在硬盤上真正的路徑。比如，圖像top.jpg存放在c盤的images文件夾下，那么該圖像的絕對路徑表示方法為c:\images\top.jpg。相對路徑：相對于當前文件的路徑。網(wǎng)頁中的圖片、超鏈接等一般都使用相對路徑來表示。知識準備2.絕對路徑和相對路徑相對路徑常見的表示方法Html文檔的位置圖像的位置相對路徑情形說明c:\democ:\demo<imgsrc="top.jpg">圖文均在同一目錄c:\democ:\demo\images<imgsrc="images/top.jpg">圖在網(wǎng)頁下一層目錄c:\democ:\<imgsrc="../top.jpg">圖在網(wǎng)頁上一層c:\democ:\images<imgsrc="../images/top.jpg">圖文在同一層但不同目錄提示：“../”指回到上一層目錄，“images/”指進入下一層目錄images，“../images/”指回到上一層目錄，然后再進入目錄images中。知識準備示例：絕對路徑和相對路徑<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>無標題文檔</title></head><body><center><imgsrc="../images/1.gif"title="圖片1"alt="圖片1"><imgsrc="2.gif"title="圖片2"alt="圖片2"width="240"height="320"border="1"><imgsrc="../3.gif"title="圖片3"alt="圖片3"><imgsrc="images/4.gif"alt="圖片4"title="圖片4"></center></body></html>知識準備3.超鏈接標簽語法格式：<ahref="url"target="目標窗口的彈出方式">鏈接文本</a>href屬性：描述鏈接的地址target屬性：描述鏈接頁面的打開方式_self：默認值，表示在原網(wǎng)頁窗口中打開鏈接_blank：在新窗口中打開鏈接知識準備示例：在網(wǎng)頁中插入超鏈接<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>無標題文檔</title></head><body><ahref=""target="_self">百度主頁，原窗口打開</a><br><ahref=""target="_blank">新浪主頁，新窗口打開</a><br><ahref=""title="百度"target="_blank"><imgsrc="images/baidu.png"width="270"height="129"></a></body></html>提示：href屬性的內(nèi)容可以是站點內(nèi)網(wǎng)頁文件的相對路徑，也可以是網(wǎng)頁的網(wǎng)址等。知識準備4.錨點標簽錨點鏈接：可以幫助瀏覽者快速定位網(wǎng)頁內(nèi)的目標內(nèi)容，實現(xiàn)網(wǎng)頁內(nèi)的鏈接跳轉。創(chuàng)建方法：第一步：使用<aname="錨點名稱"></a>創(chuàng)建目標位置的錨點名稱第二步：使用<ahref="#錨點名稱">鏈接文本</a>創(chuàng)建錨點鏈接這樣，鼠標點擊鏈接文本，網(wǎng)頁窗口即可定位到目標位置。知識準備示例：在網(wǎng)頁中插入錨點鏈接（因篇幅有限，僅列出部分代碼和效果截圖）…………<p><aname="menu"></a><ahref="#item1">節(jié)氣謠諺詩歌</a><br><ahref="#item2">節(jié)氣分類</a><br><ahref="#item3">節(jié)氣的安排及含義</a><br><ahref="#item4">二十四番花信風</a><br><ahref="#item5">各地有關節(jié)氣的諺語</a><br></p>…………<aname="item1">節(jié)氣謠諺詩歌</a>…………<palign="right"><ahref="#menu">回到菜單</a></p>創(chuàng)建錨點鏈接創(chuàng)建目標位置的錨點名稱創(chuàng)建目標位置的錨點名稱創(chuàng)建錨點鏈接知識準備案例描述：設計并制作網(wǎng)頁技術介紹頁面，單擊index.html頁面中的圖片時，跳轉顯示page1.html頁面，網(wǎng)頁效果如下。制作網(wǎng)頁技術介紹頁面index.htmlpage1.htmlpage2.html實戰(zhàn)演練案例描述：設計并制作“文章故事網(wǎng)”頁面，網(wǎng)頁效果如下。制作“文章故事網(wǎng)”頁面強化訓練01圖像標簽02絕對路徑和相對路徑03超鏈接標簽04錨點標簽任務小結設計并制作旅游景點網(wǎng)頁面，效果如圖所示。課后實訓任務4結構標簽和分組標簽第三單元HTML5新增標簽及屬性結構標簽分組標簽掌握學習目標HTML5網(wǎng)頁結構的定義方法了解:學習目標任務目標實戰(zhàn)演練——制作唐詩欣賞頁面強化訓練——制作“溫州地標性建筑”網(wǎng)頁知識準備1.結構標簽<header>標簽：定義文檔或者文檔一部分區(qū)域的頁眉，它可以作為介紹內(nèi)容或者導航鏈接欄的容器。在一個文檔中，可以定義多個<header>標簽，也可以為每一個獨立內(nèi)容塊添加<header>標簽。知識準備示例：<header>標簽的使用<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title><header>標簽的使用</title></head><body>

<header><h2align="center">我院通過教育部第二批國家現(xiàn)代學徒制試點單位評審認定</h2><palign="center">發(fā)表時間：2017-09-09  來源：信息工程系

編輯：黨院辦

瀏覽量：483次</p><hr/>

</header></body></html>知識準備1.結構標簽<nav>標簽：定義導航鏈接的部分。并不是所有的HTML文檔都要使用到<nav>元素。<nav>元素只是作為標注一個導航鏈接的區(qū)域。在不同設備上（手機或者PC）可以制定導航鏈接是否顯示，以適應不同屏幕的需求。知識準備示例：<nav>標簽的使用<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title><nav>標簽的使用</title></head><body>

<nav><ul><li><ahref="#">學院首頁</a></li><li><ahref="#">學院概況</a></li><li><ahref="#">新聞中心</a></li><li><ahref="#">招生就業(yè)</a></li></ul>

</nav></body></html>知識準備1.結構標簽<article>標簽：用于定義獨立的內(nèi)容，標簽定義的內(nèi)容本身必須是有意義的且必須是獨立于文檔的其余部分。其內(nèi)可以用多個<section>進行內(nèi)容劃分。<article>標簽的潛在來源：論壇帖子、博客文章、新聞故事、評論等。知識準備示例：<article>標簽的使用<article></article><header></header><section></section><article></article><header></header><section></section><section></section><header></header><section></section><section></section><header></header><article></article><header></header><section></section>知識準備1.結構標簽<aside>標簽：定義<article>標簽外的內(nèi)容。aside的內(nèi)容應該與附近的內(nèi)容相關，用于定義頁面或者文章的附屬信息部分，如頁面內(nèi)容相關的引用、側邊欄、廣告等有別于主要內(nèi)容的部分。知識準備示例：<aside>標簽的使用<article></article><header></header><section></section><aside></aside><article></article><header></header><section></section><section></section><aside></aside><article></article><header></header><section></section><aside></aside><aside></aside>知識準備1.結構標簽<section>標簽：定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁眉、頁腳或文檔中的其他部分。如果article標簽、aside標簽、nav標簽更符合使用條件，那不要使用section標簽。沒有標題的內(nèi)容區(qū)塊不要使用section定義。知識準備1.結構標簽<footer>標簽：定義文檔或者文檔的一部分區(qū)域的頁腳。頁腳通常包含文檔的作者、版權信息、使用條款鏈接、聯(lián)系信息等等。可以在一個文檔中使用多個<footer>元素。知識準備示例：<footer>標簽的使用<article></article><footer></footer><article></article><footer></footer>知識準備2.分組標簽<figure>標簽：規(guī)定獨立的流內(nèi)容（圖像、圖表、照片、代碼等）。<figcaption>標簽：定義figure元素的標題（caption）。<figcaption>標簽應該被置于figure元素的第一個或最后一個子元素的位置。知識準備示例：<figure>標簽和<figcaption>標簽的使用<body><p>浙江安防職業(yè)技術學院是經(jīng)教育部批準建立的公辦全日制高等職業(yè)技術學院，由溫州市人民政府聯(lián)合浙江省公安廳和公安部第一研究所舉辦。學院是浙江省內(nèi)唯一一所重點培養(yǎng)具有安防科技應用與推廣能力，能夠從事公共安全管理、安防工程建設、民航安全管理等高素質(zhì)技術技能人才的高職院校。</p>

<figure><center><imgsrc="images/zjaf.jpg">

<figcaption>

校園規(guī)劃圖

</figcaption></center>

</figure></body>知識準備2.分組標簽<hgroup>標簽：將多個標題（主標題、副標題或者子標題）組成一個標題組。該標簽被用來對標題元素進行分組，通常與<h1>~<h6>標簽、<figcaption>標簽配合使用。知識準備示例：<hgroup>標簽的使用<hgroup></hgroup><figcaption></figcaption><figcaption></figcaption><figcaption></figcaption>實戰(zhàn)演練案例描述：設計并制作唐詩欣賞頁面，網(wǎng)頁效果如下。制作唐詩欣賞頁面強化訓練案例描述：設計并制作“溫州地標性建筑”頁面，網(wǎng)頁效果如下。制作“溫州地標性建筑”網(wǎng)頁任務小結01結構標簽02分組標簽03HTML5網(wǎng)頁結構的定義方法課后實訓定義教育網(wǎng)站的主頁結構，效果如圖所示。任務5頁面交互標簽、層次語義標簽和全局屬性第三單元HTML5新增標簽及屬性頁面交互標簽層次語義標簽掌握學習目標全局屬性了解:學習目標任務目標實戰(zhàn)演練——制作書評網(wǎng)任務目標強化訓練——制作“面試應答技巧”網(wǎng)頁知識準備1.頁面交互標簽<details>標簽：<details>標簽用于描述文檔或文檔某個部分的細節(jié)。<summary>標簽：與<details>標簽配合使用，作為<details>的第一個子元素，用于定義<details>標題。標題是可見的，當用戶單擊標題時，會顯示或隱藏<details>標簽中的其他內(nèi)容。知識準備示例：<details>標簽和<summary>標簽的使用<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title><details>標簽和<summary>標簽</title></head><body>

<details>

<summary>details標簽和summary標簽</summary>details標簽用于描述文檔或文檔某個部分的細節(jié)。summary標簽作為details的第一個子元素，用于定義details標題。<u>標題是可見的，當用戶單擊標題時，會顯示或隱藏details中的其他內(nèi)容。</u>

</details></body></html>知識準備1.頁面交互標簽<progress>標簽：用于定義運行中的任務進度（進程）。<progress>標簽的屬性：屬性描述屬性描述max規(guī)定需要完成的值value規(guī)定進程的當前值知識準備示例：<progress>標簽的使用<!doctypehtml><html><head><metacharset="utf-8"><title><progress>標簽的使用</title></head><body>progress標簽用法一：表示任務正在進行

<br>工作進行中：

<progress></progress><br>progress標簽用法二：表示已完成任務量

<br>已修滿學分：

<progressvalue="45"max="100"></progress></body></html>知識準備1.頁面交互標簽<meter>標簽：定義度量衡。僅用于已知最大和最小值的度量。比如：磁盤使用情況，查詢結果的相關性等。<meter>標簽的屬性：屬性描述屬性描述high定義被界定為高的值的范圍low定義被界定為低的值的范圍max定義最大值，默認值是1min定義最小值，默認值是0title光標移到進度條上的提示文字value定義度量的值optimum定義什么樣的度量值是最佳的值。如果該值高于high屬性，則意味著值越高越好。如果該值低于low屬性的值，則意味著值越低越好知識準備示例：<meter>標簽的使用<!doctypehtml><html><head><metacharset="utf-8"><title><meter>標簽的使用</title></head><body>

手機電量顯示：

<br>充足模式：

<metermin="0"max="100"low="10"high="20"optimum="100"value="80"title="80%">80%</meter><br>省電模式：

<metermin="0"max="100"low="10"high="20"optimum="100"value="15"title="15%">15%</meter><br>低電模式：

<metermin="0"max="100"low="10"high="20"optimum="100"value="5"title="5%">5%</meter><br></body></html>知識準備2.層次語義標簽<time>標簽：用于定義時間或日期，它不會在瀏覽器中呈現(xiàn)任何效果，但是該元素能以機器可讀的方式對日期和時間進行編碼，主要給機器識別，這樣用戶可以將事件提醒添加到日程表中，搜索引擎也能夠生成更智能的搜索結果。

<time>標簽的屬性：屬性描述屬性描述datetime定義具體時間（15：00）或日期（2010-10-10），否則，由元素的內(nèi)容給定日期/時間pubdate用于定義time元素中的日期/時間的發(fā)布日期，一般值為pubdate知識準備示例：<time>標簽的使用<!doctypehtml><html><head><metacharset="utf-8"><title><time>標簽的使用</title></head><body><p>我們每天早上<time>9:00</time>開始營業(yè)。</p><p>我在<timedatetime="2018-02-14">情人節(jié)</time>有個約會。</p><p>丫丫記錄于<timedatetime="2017-10-27"pubdate="pubdate">2017-10-27</time></p></body></html>知識準備2.層次語義標簽<mark>標簽：定義帶有記號的文本，它可實現(xiàn)高亮顯示某些字符，以引起用戶的注意。知識準備示例：<mark>標簽的使用……

<mark>一去不復返</mark>呢？——是有人偷了他們罷：那是誰？又藏在何處呢？是他們自己逃走了：現(xiàn)在又到了哪里呢？

……

<mark>從水盆里過去</mark>；吃飯的時候，日子

<mark>從飯碗里過去</mark>；默默時，便

<mark>從凝然的雙眼前過去</mark>。我覺察他去的匆匆了，伸出手遮挽時，他又

<mark>從遮挽著的手邊過去</mark>，天黑時，我躺在床上，他便伶伶俐俐地

<mark>從我身邊垮過</mark>，

<mark>從我腳邊飛去了</mark>。等我睜開眼和太陽再見，這算又

<mark>溜走了一日</mark>。我掩著面嘆息。但是新來的日子的影兒又開始

<mark>在嘆息里閃過</mark>了。

……

<mark>一去不復返</mark>呢？……知識準備2.層次語義標簽<cite>標簽：用于定義作品（比如書籍、歌曲、電影、電視節(jié)目、繪畫、雕塑等等）的標題。人名不屬于作品的標題。<cite>標簽定義的文本將以斜體顯示。知識準備示例：<cite>標簽的使用<!doctypehtml><html><head><metacharset="utf-8"><title><cite>標簽的使用</title></head><body><p>山不在高，有仙則名。水不在深，有龍則靈。</p>

<cite>——《陋室銘》</cite></body></html>知識準備3.全局屬性draggable屬性：規(guī)定元素是否可拖動。false：默認值，表示該元素選中之后不可以進行拖動操作。true：表示該元素選中之后可以進行拖動操作。知識準備示例：draggable屬性的使用<!doctypehtml><html><head><metacharset="utf-8"><title>draggable屬性的使用</title></head><body><pdraggable="true">元素拖動屬性：在網(wǎng)頁中無法顯示拖動效果，必須與JavaScript結合才能實現(xiàn)拖動功能</p><imgsrc="images/wlw.png"width="460"height="344"draggable="true"></body></html>知識準備3.全局屬性hidden屬性：規(guī)定元素是否可見。不設置：表示該元素顯示。設置：表示該元素被隱藏。知識準備示例：hidden屬性的使用<!doctypehtml><html><head><metacharset="utf-8"><title>hidden屬性的使用</title></head><body>

設置圖片隱藏，不顯示

<imgsrc="images/wlw.png"width="460"height="344"hidden></body></html>知識準備3.全局屬性spellcheck屬性：規(guī)定是否對元素的輸入內(nèi)容進行拼寫和語法檢查。false：不檢測拼寫和語法。true：默認值，檢測拼寫和語法。知識準備示例：spellcheck屬性的使用<!doctypehtml><html><head><metacharset="utf-8"><title>spellcheck屬性的使用</title></head><body>spellcheck屬性值為true：<br><br><textareacols="40"rows="3"spellcheck="true"></textarea><br><br>spellcheck屬性值為false：<br><br><textareacols="40"rows="3"spellcheck="false"></textarea></body></html>知識準備3.全局屬性contenteditable屬性：規(guī)定是否可以編輯元素的內(nèi)容，前提是該元素必須是可獲得鼠標焦點且不是只讀的。false：默認值，表示內(nèi)容不可編輯。true：表示內(nèi)容可編輯。知識準備示例：contenteditable屬性的使用<body><h2>不可編輯的菜單</h2><ul><li>菜單1</li><li>菜單2</li><li>菜單3</li><li>菜單4</li></ul><h2contenteditable="true">可編輯的菜單</h2><ulcontenteditable="true"><li>菜單1</li><li>菜單2</li><li>菜單3</li><li>菜單4</li></ul></body>實戰(zhàn)演練案例描述：設計并制作書評網(wǎng)頁面，網(wǎng)頁效果如下，網(wǎng)頁中間的熱門書籍圖片呈現(xiàn)滾動顯示效果。制作書評網(wǎng)實戰(zhàn)演練鼠標點擊“新書速遞”欄目，網(wǎng)頁效果如圖所示。書籍內(nèi)容介紹文字允許用戶編輯。制作書評網(wǎng)實戰(zhàn)演練制作書評網(wǎng)鼠標點擊“銷售榜單”欄目，網(wǎng)頁效果如圖所示。書籍內(nèi)容介紹文字允許用戶編輯。強化訓練制作“面試應答技巧”網(wǎng)頁案例描述：設計并制作“面試應答技巧”頁面，網(wǎng)頁效果如下。強化訓練制作“面試應答技巧”網(wǎng)頁當鼠標點擊頁面中的分標題文字時，網(wǎng)頁效果如圖所示。任務小結01頁面交互標簽02層次語義標簽03頁面的全局屬性課后實訓設計并制作“北京必玩景點推薦”頁面，效果如圖所示。任務6標記選擇器和類選擇器第四單元CSS3基礎學習目標類選擇器CSS樣式規(guī)則CSS樣式的引用方式標記選擇器掌握CSS樣式的優(yōu)先級了解:學習目標任務目標實戰(zhàn)演練——制作美化文章頁面強化訓練——制作圖文混排網(wǎng)頁知識準備1.CSS簡介HTML5負責網(wǎng)頁結構，CSS3負責網(wǎng)頁樣式CSS的優(yōu)勢：CSS控制網(wǎng)頁的外觀可以實現(xiàn)結構與表現(xiàn)的分離，由CSS樣式設計的網(wǎng)頁，具有條理規(guī)范、布局統(tǒng)一、容易維護等優(yōu)點。CSS的4個版本：CSS1、CSS2、CSS2.1、CSS3知識準備2.CSS樣式規(guī)則一個CSS樣式表由若干樣式規(guī)則組成，每個樣式規(guī)則都可以看作是一條CSS的基本語句，每個規(guī)則都包含一個選擇器（例如body、p等）和寫在花括號里的聲明，這些聲明通常是由幾組用分號分隔的屬性和值組成。格式：選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}例如：設置<p>標簽內(nèi)文字大小為18px，顏色為藍色p{font-size:18px;color:blue;}知識準備3.

CSS樣式的引入行內(nèi)式：通過HTML5標簽的style屬性來設置元素的樣式語法格式：<標簽名style=”屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;”>內(nèi)容</標簽名>知識準備示例：行內(nèi)式樣式的使用<!doctypehtml><html><head><metacharset="utf-8"><title>行內(nèi)式樣式的使用</title></head><body><pstyle="font-size:18px;color:blue;">行內(nèi)式樣式的使用:用CSS對網(wǎng)頁中的<p>標簽進行控制，將其字體大小設置為18px，文字顏色設置為藍色。</p></body></html>知識準備3.

CSS樣式的引入內(nèi)嵌式：將CSS樣式集中寫在HTML文件的<head></head>中，并定義在<style></style>標簽之間。語法格式：<head><styletype=”text/css”>

選擇器{

屬性1:屬性值1;

屬性2:屬性值2;

屬性3:屬性值3;}</style></head>知識準備示例：內(nèi)嵌式樣式的使用<!doctypehtml><html><head><metacharset="utf-8"><title>內(nèi)嵌式樣式的使用</title>

<styletype="text/css">h1{font-style:italic;color:#00F;text-decoration:underline;}p{font-size:36px;color:#F00;font-weight:bold;background-color:#FF0;}

</style></head><body>

<h1>用內(nèi)嵌式樣式修改<h1>標簽的樣式</h1><p>內(nèi)嵌式樣式僅限于本文檔使用。</p></body></html>

知識準備3.

CSS樣式的引入鏈接式：將所有的CSS樣式代碼單獨放在樣式文件（擴展名為.CSS）中，通過<link>標簽將樣式文件鏈接到HTML文檔中。<link>標簽可以放置在<head></head>標簽之內(nèi)的任意位置。語法格式：<head><linkhref="style.css"rel="stylesheet"type="text/css"></head>知識準備示例：鏈接式樣式的使用<!doctypehtml><html><head><metacharset="utf-8"><title>鏈接式樣式的使用</title><linkhref="style.css"rel="stylesheet"type="text/css"></head><body><p>鏈接式樣式的優(yōu)勢為能夠使多張網(wǎng)頁共用CSS樣式代碼。</p></body></html>style.css樣式表文件內(nèi)容@charset"utf-8";p{ font-family:"黑體"; font-size:24px; color:#390; text-decoration:underline;}知識準備4.CSS樣式的優(yōu)先級優(yōu)先級關系：行內(nèi)樣式>內(nèi)嵌樣式>鏈接樣式100010010>行內(nèi)樣式id選擇器類選擇器偽類選擇器>10>標記選擇器偽元素選擇器通配符子選擇器相鄰選擇器繼承樣式>復合選擇器權重為基礎選擇器權重的疊加知識準備5.標記選擇器標記選擇器：用HTML標簽名稱作為選擇器，用于更改頁面中某一類標簽的默認樣式語法格式：

標簽名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}知識準備示例：標記選擇器的使用<styletype="text/css">h1{ font-size:16px; font-style:italic; color:#F00;}</style><body><h1>更改<h1>標簽的外觀樣式</h1><h1>網(wǎng)頁中所有<h1>標簽內(nèi)的內(nèi)容都會應用該樣式</h1></body>知識準備6.類選擇器類選擇器：更加自由的定義和使用樣式語法格式：

.類名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}應用方法：

在標簽內(nèi)添加“class=類名”才能應用，如：class=p1（p1為類名）知識準備示例：類選擇器的使用<styletype="text/css">h1{ font-size:16px; font-style:italic;}p{ font-family:"黑體";}.font1{ text-decoration:underline;}.bluefont{ color:#00F;}</style><body><h1>更改<h1>標簽的外觀樣式</h1><h1class="bluefont">此處<h1>標簽設置了類選擇器</h1><p>更改所有<P>標簽的外觀樣式</p><pclass="bluefontfont1">此處<P>標簽設置了兩個類選擇器</p></body>知識準備注意類名的第一個字符不能使用數(shù)字，而且區(qū)分大小寫，一般情況下用小寫字母。類選擇器的優(yōu)先級大于標記選擇器，當某個元素同時滿足上述兩種選擇器且樣式設置有沖突時，將顯示類選擇器中定義的樣式。實戰(zhàn)演練案例描述：設計并制作美化文章頁面，網(wǎng)頁效果如下。制作美化文章頁面強化訓練制作圖文混排網(wǎng)頁案例描述：設計并制作圖文混排網(wǎng)頁，網(wǎng)頁效果如下。任務小結01CSS樣式規(guī)則02CSS樣式的引用方式03CSS樣式的優(yōu)先級04標記選擇器05類選擇器課后實訓設計并制作“頤和園景點介紹”頁面，效果如圖所示。任務7鏈接偽類和CSS樣式面板第四單元CSS3基礎鏈接偽類CSS樣式面板掌握學習目標網(wǎng)頁中常見的超鏈接樣式了解:學習目標任務目標實戰(zhàn)演練——制作散文欣賞網(wǎng)頁任務目標實戰(zhàn)演練——制作熱點新聞列表知識準備1.鏈接偽類默認的超鏈接樣式：鏈接偽類：<a>標簽的偽類超鏈接狀態(tài)a:link未訪問過的超鏈接a:visited已經(jīng)訪問過的超鏈接a:hover鼠標經(jīng)過或懸停在超鏈接上a:active鼠標按下而未放開時的超鏈接定義順序：遵循“愛恨原則”，即“LoVe-HAte”原則知識準備示例：鏈接偽類的使用<styletype="text/css">a:link{color:#F60;text-decoration:none;}a:visited{color:#F60;text-decoration:none;}a:hover{color:#00F;text-decoration:underline;}a:active{color:#690;text-decoration:none;}</style><body><ahref="#">商城首頁</a><ahref="#">潮流飾品</a><ahref="#">母嬰童裝</a><ahref="#">家裝家紡</a><ahref="#">手機數(shù)碼</a></body>知識準備2.CSS樣式面板類別視圖列表視圖設置屬性視圖附加樣式表新建CSS規(guī)則編輯樣式刪除CSS規(guī)則實戰(zhàn)演練制作散文欣賞網(wǎng)頁案例描述：設計并制作散文欣賞網(wǎng)頁，網(wǎng)頁效果如下。其中光標圖標設置成了“help”樣式，錨點鏈接的四種狀態(tài)（a:link、a:visited、a:hover、a:active）均設置了不同的樣式。強化訓練案例描述：設計并制作熱點新聞列表，網(wǎng)頁效果如下（左）。當鼠標懸停在新聞標題上時，樣式效果如圖（右）。制作熱點新聞列表任務小結0102鏈接偽類CSS樣式面板課后實訓設計并制作“幫助中心”頁面，效果如圖所示。默認效果鼠標懸停超鏈接效果鼠標激活超鏈接效果任務8id選擇器、偽選擇器和表格樣式第四單元CSS3基礎id選擇器表格掌握學習目標偽選擇器了解:學習目標任務目標實戰(zhàn)演練——制作鞋子尺碼對照單強化訓練——制作嬰兒身高體重標準表知識準備1.id選擇器id屬性：用于唯一標識某個標簽元素。id屬性值不能重復，它在當前文檔頁面中必須是唯一的。id選擇器：為標有特定id的HTML元素指定特定的樣式。語法格式：

#id名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}知識準備示例：id選擇器的使用<styletype="text/css">#one{color:#FFF;background-color:#06C;}#two{font-size:20px;color:#F00;}</style><body><pid="one">背景顏色為藍色，字顏色為白色</p><pid="two">文字大小為20像素，顏色為紅色</p></body>知識準備元素名示例描述:linka:link選擇所有未訪問的鏈接:visiteda:visited選擇所有訪問過的鏈接:hovera:hover選擇鼠標懸停鏈接上的狀態(tài):activea:active選擇鼠標單擊鏈接時的狀態(tài)2.偽選擇器偽類選擇器知識準備2.偽選擇器偽類選擇器元素名示例描述:rootroot 選擇文檔的根元素，通常是返回html:first-childp:first-child匹配屬于任意元素的第一個子元素的<p>元素:last-child p:last-child選擇所有p元素的最后一個子元素:only-childp:only-child選擇所有僅有一個子元素的p元素:only-of-typep:only-of-type選擇所有僅有一個子元素為p的元素:nth-child(n)p:nth-child(2)選擇所有p元素的父元素的第二個子元素:nth-last-child(n)p:nth-last-child(2)選擇所有p元素倒數(shù)的第二個子元素:nth-of-type(n)p:nth-of-type(2)選擇所有p元素第二個為p的子元素:nth-last-of-type(n)p:nth-last-of-type(2)選擇所有p元素倒數(shù)的第二個為p的子元素知識準備2.偽選擇器偽類選擇器元素名示例描述:focusinput:focus選擇獲得焦點狀態(tài)下的元素:enabled(:disabled)input:enabled(:disabled)選擇啟用（禁用）狀態(tài)的表單元素:checkedinput:checked被選中的單選按鈕或復選框:valid(:invalid)input:valid(:invalid)驗證輸入數(shù)據(jù)，匹配有效（無效）的input元素:notinput:not(.radio)選擇除去應用了radio類之外的所有input元素知識準備2.偽選擇器偽元素選擇器元素名示例描述:first-letterp:first-letter選擇p段落的首字母:first-linep:first-line選擇p元素的首行:beforeh1:before在元素h1的內(nèi)容前面插入新內(nèi)容，必須配合content屬性指定要插入的具體內(nèi)容:afterh2:after在元素h1的內(nèi)容后面插入新內(nèi)容，必須配合content屬性指定要插入的具體內(nèi)容知識準備3.表格新建表格：新建HTML文件，選擇“插入

表格”菜單命令，打開“表格”對話框。知識準備3.表格創(chuàng)建一個3行3列表格。<tablewidth="200"border="1"><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr></table>知識準備3.表格合并單元格：右擊知識準備3.表格設置對齊方式：實戰(zhàn)演練案例描述：設計并制作鞋子尺碼對照單，網(wǎng)頁效果如下。制作鞋子尺碼對照單強化訓練案例描述：設計并制作“嬰兒身高體重標準表”頁面，網(wǎng)頁效果如圖左所示。當鼠標移到不同行時，光標所在行會顯示粉紅背景色，效果如圖右所示。制作嬰兒身高體重標準表任務小結01id選擇器02偽選擇器03表格課后實訓設計并制作表格樣式，效果如圖左所示，鼠標懸停表格內(nèi)容行時，效果如圖右所示。任務9復合選擇器、通配符選擇器第四單元CSS3基礎學習目標通配符選擇器交集選擇器并集選擇器后代選擇器掌握如何同時應用多個樣式了解:學習目標知識回顧CSS樣式的優(yōu)先級優(yōu)先級關系：行內(nèi)樣式>內(nèi)嵌樣式>鏈接樣式100010010>行內(nèi)樣式id選擇器類選擇器偽類選擇器>10>標記選擇器偽元素選擇器通配符子選擇器相鄰選擇器繼承樣式>復合選擇器權重為基礎選擇器權重的疊加任務目標實戰(zhàn)演練——制作寓言故事網(wǎng)頁任務目標強化訓練——制作詩詞欣賞網(wǎng)站知識準備1.復合選擇器交集選擇器：由兩個選擇器直接連接構成，其結果是選中二者各自元素范圍的交集。第1個必須是標記選擇器，第2個必須是類選擇器或ID選擇器。兩個選擇器之間不能有空格，必須連續(xù)書寫。<pid="red">這個段落是紅色。</p><pclass="green">這個段落是綠色。</p>p#redp.green知識準備示例：交集選擇器的使用<styletype="text/css">p{color:#F00;/*紅色*/}.p1{color:#0F0;/*綠色*/}

h2.p1{color:#00F;/*藍色*/}</style><body><p>普通段落文本的樣式（紅色）</p><pclass="p1">指定了.p1類的段落文本樣式（綠色）</p><h2class="p1">指定了.p1類的h2標題文本樣式（藍色）</h2></body>知識準備1.復合選擇器并集選擇器：如果某些選擇器定義的樣式完全相同或者部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式。在并集選擇器中，各個選擇器通過逗號連接而成。知識準備示例：并集選擇器的使用<styletype="text/css">p,h1,h2,h2.special,.one,p#two{text-decoration:underline;font-size:15px;}</style><body><p>并集選擇器的使用</p><h1>并集選擇器的使用</h1><h2>并集選擇器的使用</h2><h2class="special">并集選擇器的使用</h2><spanclass="one">并集選擇器的使用</span><pid="two">并集選擇器的使用</p></body>知識準備1.復合選擇器后代：某標記內(nèi)嵌套的所有子元素，都稱為該標記的后代。后代選擇器：把外層的標記寫在前面，內(nèi)層的標記寫在后面，之間用空格分隔。<h1>熱烈慶祝<span>第三十屆</span>牡丹文化節(jié)召開</h1>h1span知識準備示例：后代選擇器的使用<body><h2>熱烈祝賀<span>第三十屆</span>牡丹文化節(jié)召開</h2><h3><span>牡丹花</span>分三類十二型</h3><olclass="uu"><li>單瓣類

<ul><li>黃花魁</li><li>潑墨紫</li><li>鳳丹</li><li>盤中取果</li></ul></li><li>重瓣類</li><li>重臺類</li></ol></body><styletype="text/css">span{text-decoratio

溫馨提示

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

評論

0/150

提交評論