網(wǎng)頁設計與制作項目教程（廖麗）課件全套 任務1-12 網(wǎng)頁制作入門- 首頁其他板塊的設計與制作_第1頁
網(wǎng)頁設計與制作項目教程（廖麗）課件全套 任務1-12 網(wǎng)頁制作入門- 首頁其他板塊的設計與制作_第2頁
網(wǎng)頁設計與制作項目教程（廖麗）課件全套 任務1-12 網(wǎng)頁制作入門- 首頁其他板塊的設計與制作_第3頁
網(wǎng)頁設計與制作項目教程（廖麗）課件全套 任務1-12 網(wǎng)頁制作入門- 首頁其他板塊的設計與制作_第4頁
網(wǎng)頁設計與制作項目教程（廖麗）課件全套 任務1-12 網(wǎng)頁制作入門- 首頁其他板塊的設計與制作_第5頁
已閱讀5頁，還剩323頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

網(wǎng)頁設計與制作HTML5+CSS3任務1

制作第一個HTML頁面第1章網(wǎng)頁制作入門知識目標技能目標素質目標（1）了解網(wǎng)頁相關的概念與術語（2）熟悉HTML的發(fā)展歷史（3）掌握HTML文檔的結構（1）掌握SublimeText的基本操作（2）能夠創(chuàng)建簡單的網(wǎng)頁（1）培養(yǎng)勤奮學習的態(tài)度（2）培養(yǎng)邏輯思維能力及實訓操作能力（3）通過課前課中課后的行為規(guī)范，使學生養(yǎng)成良好的行為習慣網(wǎng)頁相關知識常用的開發(fā)工具——SublimeTextHTML5基礎任務實現(xiàn)第1章網(wǎng)頁制作入門1.網(wǎng)頁相關知識1.1網(wǎng)頁與網(wǎng)站的相關概念1.2網(wǎng)頁分類第1章網(wǎng)頁制作入門1.1網(wǎng)頁與網(wǎng)站的相關概念網(wǎng)

頁1.網(wǎng)頁相關知識網(wǎng)頁究竟是什么？瀏覽新聞（信息）查詢信息網(wǎng)上購物1.1網(wǎng)頁與網(wǎng)站的相關概念以江西工業(yè)工程職業(yè)技術學院一個頁面為例認識網(wǎng)頁：1.網(wǎng)頁相關知識打開谷歌瀏覽器，在地址欄輸入/info/1031/11291.htm/info/1031/11291.htm文本圖片文本超鏈接為了快速了解網(wǎng)頁是如何形成的，在谷歌瀏覽器中按下F12，即可看到網(wǎng)頁的源碼1.1網(wǎng)頁與網(wǎng)站的相關概念網(wǎng)頁通常由文字、圖像、鏈接、音頻、視頻等元素構成，通常是HTML文件。常見的網(wǎng)頁文件是以.html或.htm為擴展名的，因此俗稱為THML文件。網(wǎng)頁是構成網(wǎng)站的基本元素1.網(wǎng)頁相關知識網(wǎng)站是萬維網(wǎng)上一組相關網(wǎng)頁和有關文件的集合（本質是文件夾），實行分類管理，即用不同的文件夾管理。網(wǎng)頁（WebPage）是網(wǎng)站中的一個頁面，通常是HTML文件，它要通過瀏覽器來閱讀。網(wǎng)站中一般有一個特殊的網(wǎng)頁作為瀏覽的起始點，稱為主頁（或首頁）。主頁的文件名為index.html，其它頁面稱為內面或子頁。1.2網(wǎng)頁分類依據(jù)網(wǎng)頁的位置：1.主頁2.內頁1.網(wǎng)頁相關知識依據(jù)表現(xiàn)形式：1.靜態(tài)網(wǎng)頁2.動態(tài)網(wǎng)頁網(wǎng)頁相關知識常用的開發(fā)工具——SublimeTextHTML5基礎任務實現(xiàn)第1章網(wǎng)頁制作入門2.常用的開發(fā)工具——SublimeTextHTML5文檔實質是一個文本文件，擴展名為.htm或者.html，常用的工具有Sublimetext、Hbuilder、Dreamweaver、NotePad++等等。2.1下載并安裝2.2中文設置第1章網(wǎng)頁制作入門2.1下載并安裝2.常用的開發(fā)工具——SublimeTextWindows32位操作系統(tǒng)選擇“Windows”64位操作系統(tǒng)選擇“Windows64bit”下載安裝包

官網(wǎng)下載鏈接：/32.1下載并安裝2.常用的開發(fā)工具——SublimeText安裝

雙擊安裝包，點擊next，注意勾選“Addtoexplorercontextmenu”，即添加右鍵菜單的選項，后續(xù)文檔都可以使用SublimeText打開。點擊“install”安裝，直到“Finish”。2.2中文設置2.常用的開發(fā)工具——SublimeTextSublimeText操作界面默認的語言是全英文，根據(jù)需求可選擇性地將sublimetext設置成中文。打開軟件，點擊Preference，選擇最底部的PackageControl搜索框中輸入關鍵字Install，選擇PackageControl:InstallPackage2.2中文設置2.常用的開發(fā)工具——SublimeText等待插件列表加載完成，在搜索框中輸入chinese，選擇下拉框中的ChineseLocalizations，完成安裝。網(wǎng)頁相關知識常用的開發(fā)工具——SublimeTextHTML5基礎任務實現(xiàn)第1章網(wǎng)頁制作入門3.HTML5基礎用戶瀏覽網(wǎng)頁時看到的內容原本都是HTML格式的，在瀏覽器中通過一些技術處理將其轉換成為了可識別的信息。3.1HTML5文檔基本格式3.2HTML5標簽及屬性3.3代碼的注釋第1章網(wǎng)頁制作入門3.1HTML5文檔基本格式3.HTML5基礎HTML5文檔的基本格式如下：<!DOCTYPEhtml><html>

<head>

<metacharset="UTF-8"/>

<title>Document</title>

</head>

<body>

</body></html>文檔類型聲明根標記頭部標記主體標記3.1HTML5文檔基本格式3.HTML5基礎<!DOCTYPE>標簽位于文檔的最前面，用于向瀏覽器說明當前文檔使用哪種HTML標準規(guī)范。<html>標簽<!DOCTYPE>標簽之后，也被稱為根標簽，用于告知瀏覽器其自身是一個HTML文檔，<html>標志HTML文檔的開始，</html>標志著HTML文檔的結束。<head>標簽用于定義HTML文檔的頭部信息，也被稱為頭部標簽，緊跟在<html>標簽之后。<body>標簽用于定義HTML文檔所要顯示的內容，也成為主體標簽。瀏覽器中顯示的所有文本、圖像、表單與多媒體元素等信息都必須位于<body>標簽內。3.2HTML5標簽及屬性3.HTML5基礎

HTML標簽是由尖括號括起來的關鍵詞，也稱為HTML元素。分為兩大類，分別是“雙標簽”與“單標簽”。雙標簽

雙標簽是指由開始和結束兩個標簽符號組成的標簽。語法：<標簽名>內容</標簽名>解釋：<標簽名>表示標簽作用開始，一般稱作“開始標簽”。</標簽名>表示標簽作用結束，一般稱作“結束標簽”。例如：<h1>學院介紹</h1>3.2HTML5標簽及屬性3.HTML5基礎單標簽

單標簽也稱空標簽，是指用一個標簽符號即可完整的描述某個功能的標簽。語法：<標簽名/>例如：<br/> 用于實現(xiàn)換行。3.2HTML5標簽及屬性3.HTML5基礎屬性

使用HTML標簽的屬性來給HTML提供更多的信息語法：<標簽名屬性1="屬性值1"屬性2="屬性值2"…/>內容</標簽名>注意：一個標簽可以擁有多個屬性，必須寫在開始標簽中，位于標簽名后面。屬性之間不分先后順序，標簽名與屬性，屬性與屬性之間均以空格分開。任何標簽的屬性都有默認值，省略該屬性則取默認值。例如：單標簽<hr/>表示在文檔當前位置畫一條水平線。3.3代碼的注釋3.HTML5基礎注釋HTML5代碼注釋采用<!--...-->標簽。例如:<!--這是一段注釋。注釋不會在瀏覽器中顯示。--><p>這是一段普通的段落。</p>網(wǎng)頁相關知識常用的開發(fā)工具——SublimeTextHTML5基礎任務實現(xiàn)第1章網(wǎng)頁制作入門4.任務實現(xiàn)本節(jié)對前面所學知識點進行檢測，引導學生獨立自主完成任務1：制作第一個HTML網(wǎng)頁。第1章網(wǎng)頁制作入門網(wǎng)頁設計與制作HTML5+CSS3任務2美化第一個HTML頁面第1章網(wǎng)頁制作入門知識目標技能目標素質目標（1）掌握CSS的概念并了解CSS的發(fā)展史。（2）熟悉網(wǎng)頁CSS樣式的創(chuàng)建流程。（3）掌握網(wǎng)頁設計過程中的結構和表現(xiàn)的概念。（1）掌握使用SublimeText編寫簡單的CSS樣式。（2）能夠對網(wǎng)頁進行簡單的美化。（1）遵循WEB開發(fā)規(guī)范。（2）培養(yǎng)分析和解決問題的能力。（3）培養(yǎng)自學能力。初識CSS3WEB標準任務實現(xiàn)第1章網(wǎng)頁制作入門1.初識CSS31.1CSS概念1.2CSS發(fā)展史第1章網(wǎng)頁制作入門1.1CSS概念CSS(CascadingStyleSheet)層疊樣式表，通常被稱為CSS樣式或樣式表。1.初識CSS3控制網(wǎng)頁的外觀:設置HTML頁面中的文本內容(字體、大小、對齊方式等)；圖片的外形(寬高、邊框樣式、邊距等)；版面的布局等外觀顯示樣式。1.1CSS概念CSS(CascadingStyleSheet)層疊樣式表，通常被稱為CSS樣式或樣式表。1.初識CSS3CSS非常靈活:既可以嵌入在HTML文檔中;也可以是一個單獨的外部文件，如果是獨立的文件，則必須以.css為后綴名。W3C鼓勵使用HTML來定義網(wǎng)頁的結構，而使用CSS來控制網(wǎng)頁的外觀，功能明確，語義清晰。1.2CSS發(fā)展史1.初識CSS3CSS規(guī)范的第一版本CSS1.0CSS2CSS31996年12月1997年1998年2005年12月

初識CSS3WEB標準任務實現(xiàn)第1章網(wǎng)頁制作入門2WEB標準WEB標準的優(yōu)點2.WEB標準（1）讓Web的發(fā)展前景更廣闊。（2）內容能被更廣泛的設備訪問。（3）更容易被搜尋引擎搜索。（4）降低網(wǎng)站流量費用。（5）使網(wǎng)站更易于維護。（6）提高頁面瀏覽速度。2WEB標準WEB標準最核心的思想：結構、表現(xiàn)、行為分離2.WEB標準（1）結構用于對網(wǎng)頁元素進行整理和分類，主要包括XML和XHTML兩個部分。HTML的主要功能是定義網(wǎng)頁的結構。（2）表現(xiàn)用于設置網(wǎng)頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS。CSS主要功能是定義網(wǎng)頁的外觀。（3）行為是指網(wǎng)頁模型的定義及交互的編寫，主要包括DOM和ECMAScript兩個部分。JavaScript腳本的主要功能是定義網(wǎng)頁的行為。初識CSS3WEB標準任務實現(xiàn)第1章網(wǎng)頁制作入門3.任務實現(xiàn)本節(jié)對前面所學知識點進行檢測，引導學生獨立自主完成任務2：美化第一個HTML網(wǎng)頁。第1章網(wǎng)頁制作入門網(wǎng)頁設計與制作HTML5+CSS3任務3制作“學習資料”子頁面第2章網(wǎng)頁的基本結構實現(xiàn)知識目標技能目標素質目標（1）掌握HTML基本的結構元素。（2）掌握HTML元素的分類。（3）掌握HTML注釋標簽與文檔類型標簽的用法。（1）能夠正確使用基本的結構元素。（2）能夠正確使用注釋標簽進行注釋。（3）能夠正確使用文檔類型標簽對文檔進行聲明。（1）掌握并遵循Web開發(fā)并標準。（2）培養(yǎng)勤奮學習的態(tài)度。（3）培養(yǎng)嚴謹?shù)木幊塘晳T。HTML基本結構元素HTML元素類型任務實現(xiàn)第2章網(wǎng)頁的基本結構實現(xiàn)1.HTML基本結構元素1.1html元素1.2head元素1.3body元素第2章網(wǎng)頁的基本結構實現(xiàn)1.1html元素1.HTML基本結構元素HTML元素是構成HTML文檔的基本對象，是通過HTML標簽進行定義的，是從開始標簽起始，以結束標簽終止，元素的內容是開始標簽與結束標簽之間的內容；每個HTML網(wǎng)頁文檔都包含html、head和body元素這三個元素，并且只能出現(xiàn)一次。HTML基本結構元素包括html、head、title、body、meta、link、style、script等;1.1html元素1.HTML基本結構元素

html元素是網(wǎng)頁文件的根元素，網(wǎng)頁文件內容都要放置在html的起始標簽和結束標簽內，它告訴瀏覽器整個文件是HTML格式，按照HTML規(guī)范解析并顯示HTML文件。1.2head元素1.HTML基本結構元素head元素包含網(wǎng)頁的頭部信息，用于定義文檔的頭部，它是所有頭部元素的容器。主要包括網(wǎng)頁的標題、網(wǎng)頁介紹、關鍵詞、樣式文件、腳本文件、字符編碼等內容。head常用元素如下：1）title元素

2）link元素3）script元素 4）meta元素1.2head元素1.HTML基本結構元素title元素：網(wǎng)頁的標題，應盡可能地短，并具有可描述性。例如：<title>學習資料</title>link元素：引入外部樣式文件。例如：<linkrel="stylesheet"type="text/css"href="style.css">script元素：引入外部腳本文件和內置腳本。例如：<script>document.write("HelloWorld!");</script>meta元素：設置網(wǎng)頁關鍵詞、描述、作者等信息，與SEO優(yōu)化有關。例如：<metaname="keywords"content="江西工業(yè)工程職業(yè)技術學院"/>1.3body元素1.HTML基本結構元素body元素包含網(wǎng)頁文檔的所有內容，是網(wǎng)頁文檔的主體元素。具體標簽包括：1）段落p 2）標題h1~h63）超鏈接a 4）圖像img5）表單form 6）列表ul元素HTML基本結構元素HTML元素類型任務實現(xiàn)第2章網(wǎng)頁的基本結構實現(xiàn)2.HTML元素類型2.1行內元素、塊狀元素和行內塊狀元素2.2替換元素與不可替換元素2.3注釋標簽和文檔類型標簽第2章網(wǎng)頁的基本結構實現(xiàn)2.1行內元素、塊狀元素和行內塊狀元素2.HTML元素類型根據(jù)元素的顯示（能不能在同一行顯示）類型，HTML元素分為行內元素、塊狀元素和行內塊狀元素。1.行內元素(也稱內聯(lián)元素)，具有以下特點：（1）和其他元素都在一行上。（2）元素的高度、寬度、行高及頂部和底部邊距不可設置，左右邊距可以設置。（3）元素的寬度就是它包含的文字或圖片的寬度，不可改變。（4）只可以容納行內元素。常用的內聯(lián)元素有:a、span、br、i、em、strong、label、q、textarea等。其中a、span是最典型的行內元素。2.1行內元素、塊狀元素和行內塊狀元素2.HTML元素類型2.塊狀元素(也稱塊級元素)，具有以下特點：（1）總是在新行上開始，獨立占一行，兩個相鄰塊狀元素不會出現(xiàn)并列顯示的現(xiàn)象，會按順序自上而下排列。（2）高度、高度、行高以及邊距都可控制。（3）元素寬度在不設置的情況下，是它本身容器的100%。（4）它可以包含內聯(lián)元素和部分塊元素。常見的塊狀元素有div、p、h1、h2、h3、h4、h5、h6、ul、li、ol、dl、form、table等；其中div是最典型的塊狀元素，被廣泛地應用到了網(wǎng)頁布局中。2.1行內元素、塊狀元素和行內塊狀元素2.HTML元素類型3.行內塊狀元素(也稱內聯(lián)塊級元素)，本質上是行內元素，具有以下特點：（1）默認寬度是它本身內容的寬度，但是可以設置寬度、高度和內外邊距。（2）可以與其他行內元素、內聯(lián)元素共處一行，但是之間會有空白縫隙。常見的行內塊元素有img、input、td。2.2替換元素與不可替換元素2.HTML元素類型1.替換元素(也稱置換元素)，瀏覽器會根據(jù)元素的標簽和屬性，來決定元素的具體顯示內容。常見的替換元素有img、input、textarea、select、object等。例如：瀏覽器會根據(jù)img標簽的src屬性的值來讀取圖片信息并顯示出來。<inputtype="text"/>2.不可替換元素(也稱非置換元素)，其內容直接表現(xiàn)在瀏覽器。例如：段落P就是一個不可替換元素，文字段落的內容全部被顯示。2.3注釋標簽和文檔類型標簽2.HTML元素類型1.注釋標簽：可以在HTML文檔中添加注釋，增加代碼的可讀性，便于維護和修改。在瀏覽器中對用戶透明，只有在用代碼編輯器打開文檔源代碼時才可見。格式：<!--注釋內容-->例如：<p>這是一段普通的段落。</p><!--這是一段注釋，不會在瀏覽器中顯示。-->2.文檔類型標簽：正確聲明HTML的版本，使瀏覽器就能正確顯示網(wǎng)頁內容，可以使用的是文檔類型標簽<!DOCTYPE>。HTML基本結構元素HTML元素類型任務實現(xiàn)第2章網(wǎng)頁的基本結構實現(xiàn)3.任務實現(xiàn)本節(jié)對前面所學知識點進行檢測，引導學生獨立自主完成任務3：制作“學習資料”子頁面。第2章網(wǎng)頁的基本結構實現(xiàn)網(wǎng)頁設計與制作HTML5+CSS3任務4制作“學習動態(tài)”子頁面第2章網(wǎng)頁的基本結構實現(xiàn)知識目標技能目標素質目標（1）掌握常用塊元素的用法。（2）掌握常用行元素的用法。（1）能夠熟練使用段落、標題、列表、通用塊標簽。（2）能夠熟練使用超級鏈接、圖像、通用行標簽。（3）能夠使用合適的HTML標簽創(chuàng)建圖文并茂的網(wǎng)頁。（1）培養(yǎng)自主學習能力。（2）培養(yǎng)具一反三的能力和吃苦耐勞的精神。（3）培養(yǎng)學生從知識到實踐的的程序思維。常用的塊元素常用的行元素任務實現(xiàn)第2章網(wǎng)頁的基本結構實現(xiàn)1.常用的塊元素1.1段落與標題1.2通用塊元素1.3常用列表塊元素1.4語義塊元素第2章網(wǎng)頁的基本結構實現(xiàn)1.1段落與標題1.常用的塊元素HTML網(wǎng)頁中一篇文章要結構清晰，就需要有標題和段落。段落標簽：<P>格式：<palign="對齊方式">段落文本</p>注：align屬性規(guī)定段落中文本的對齊方式。屬性值有l(wèi)eft，right，center，justify。但不建議使用，建議使用樣式取代。段落標簽：<pre>與<p>標簽用法基本相同，區(qū)別是<pre>內文本內容將保留空格和換行符。1.1段落與標題1.常用的塊元素<body><p>這是段落文字這是段落文字這是段落文字這是段落文字</p><hr><pre>這是段落文字這是段落文字這是段落文字這是段落文字</pre></body>1.1段落與標題1.常用的塊元素HTML網(wǎng)頁中一篇文章要結構清晰，就需要有標題和段落。標題標簽：<h1>~<h6>標簽可定義標題元素。注：<h1>定義最大的標題。<h6>定義最小的標題。1.2通用塊元素1.常用的塊元素<div>標簽：<div>標簽用來定義文檔中的分區(qū)或節(jié)（division/section），把文檔分割為獨立的、不同的部分。<div>標簽是一個容器標簽，其中的內容可以是任何HTML元素。id和class是div標簽最重要的兩個屬性，區(qū)別在于class用于元素組（某一類元素），而id用于標識單獨的唯一的元素1.3常用列表塊元素1.常用的塊元素HTML支持有序、無序和定義列表，本質是組織文本的一種方式。有序列表：特定順序的列表項集合格式：<ol

type=編號類型

start=value><li>第一項</li><li>第二項</li><li>第三項</li></ol>type值描述1阿拉伯數(shù)字：1、2、3……A大寫英文字母：A、B、C……a小寫英文字母：a、b、c……I大寫羅馬數(shù)字：I、II、III……i小寫羅馬數(shù)字：i、ii、iii……表2-1有序列表type屬性取值1.3常用列表塊元素1.常用的塊元素...<ol><li>蘋果</li><li>香蕉</li><li>菠蘿</li></ol><oltype="a"start="3"><li>咖啡</li><li>牛奶</li><li>茶</li></ol>...1.3常用列表塊元素1.常用的塊元素HTML支持有序、無序和定義列表，本質是組織文本的一種方式。無序列表：列表中列表項的前導符合沒有一定的次序，而是黑點、圓圈、方框等一些特殊符號標識。格式：<ultype=編號類型><li>第一項</li><li>第二項</li><li>第三項</li></ul>type值描述disc表示實心圓(默認)circle表示表示空心圓square表示小方塊表2-2無序列表type屬性取值1.3常用列表塊元素1.常用的塊元素...<body><ul><li>首頁</li><li>學校概況</li><li>教學在線</li><li>院系設置</li><li>黨的建設</li></ul></body>...1.3常用列表塊元素1.常用的塊元素HTML支持有序、無序和定義列表，本質是組織文本的一種方式。定義列表：又稱為釋義列表或字典列表，主要用到3個HTML標簽：<dl>標簽、<dt>和<dd>標簽。格式：<dl><dt>名詞1</dt><dd>名詞解釋1</dd><dt>名詞2</dt><dd>名詞解釋2</dd>…</dl>1.3常用列表塊元素1.常用的塊元素...<body><dl><dt>Web前端課程</dt><dd>這里有html教程</dd><dd>這里有css教程</dd><dt>Java課程</dt><dd>這里有java開發(fā)教程</dd></dl></body>...1.4語義塊元素1.常用的塊元素語義元素是擁有語義的元素，它清楚地向瀏覽器和開發(fā)者描述其意義。例如，form、table以及img能清晰地定義其內容。標簽名描述<header>表示頁面中一個內容區(qū)塊或整個頁面的標題<section>頁面中的一個內容區(qū)塊比如章節(jié)、頁眉、頁腳或頁面的其他部分可以和h1、h2…等元素結合起來使用表示文檔結構<article>表示頁面中一塊與上下文不相關的獨立內容比如一篇文章<aside>表示<article>標簽素內容之外的、與<article>標簽內容相關的輔助信息可用作文章的側欄<hgroup>表示對整個頁面或頁面中的一個內容區(qū)塊的標題進行組合<figure>表示一段獨立的流內容一般表示文檔主體流內容中的一個獨立單元<figcaption>定義<figure>標簽的標題<nav>表表示頁面中導航鏈接的部分<footer>表示整個頁面或頁面中一個內容區(qū)塊的腳注一般來說它會包含創(chuàng)作者的姓名、創(chuàng)作日期以及創(chuàng)作者的聯(lián)系信息表2-3語義塊元素1.4語義塊元素1.常用的塊元素header元素：具有引導和導航作用，通常放在頁面頭部。<header><h1>網(wǎng)頁主題</h1>…</header>nav元素：用于定義導航鏈接，將具有導航性質的鏈接歸納在一個區(qū)域中。<nav><ul><li><ahref＝"＃">首頁</li><li><ahref＝"＃">公司概況</li></ul></nav>article元素：經(jīng)常被用于定義一篇日志、一條新聞或用戶評論等。<article><header><h2>第二章</h2></header></article>1.4語義塊元素1.常用的塊元素aside元素：定義頁面內容以外的某些內容。section元素：素定義文檔中的節(jié)，即文檔的各個部分。例如章節(jié)，頁眉。<section>

<h1>第1節(jié)</h1>

<p>第1節(jié)內容</p></section><section>

<h1>第2節(jié)</h1>

<p>第2節(jié)內容</p></section>1.4語義塊元素1.常用的塊元素footer元素：定義一個頁面或者區(qū)域的底部，通常包含文檔的作者、版權信息、使用條款鏈接、聯(lián)系信息等等。figure和figcaption元素：搭配使用，定義<figure>標簽的標題。<figure><imgsrc="images/img_1.jpg"alt="pic"width="304"height="228"><figcaption>學習貫徹黨的二十大精神</figcaption></figure>常用的塊元素常用的行元素任務實現(xiàn)第2章網(wǎng)頁的基本結構實現(xiàn)2.常用的行元素2.1超鏈接a2.2通用行內元素span2.3圖像img2.4文本格式化元素第2章網(wǎng)頁的基本結構實現(xiàn)2.1超鏈接a2.常用的行元素超鏈接：點擊超鏈接跳轉到新的文檔或者當前文檔中的某個部分，本質上是網(wǎng)頁的一部分，通過<a></a>標簽環(huán)繞鏈接對象創(chuàng)建。格式：<a

href=""

target=“"

title="">鏈接對象</a>href屬性定義了這個鏈接所指的目標地址；title屬性定義鏈接提示文字；target屬性定義指定打開鏈接的目標窗口的方式；2.1超鏈接a2.常用的行元素超鏈接的分類：根據(jù)超鏈接目標文件的不同，超鏈接可分為頁面超鏈接、錨點超鏈接和電子郵件超鏈接等；根據(jù)超鏈接的對象不同，超鏈接可分為文字超鏈接、圖像超鏈接和圖像映射等。2.1超鏈接a2.常用的行元素<ahref="URL">超鏈接文字</a>文字超鏈接圖像超鏈接<ahref="鏈接地址"><imgsrc="源文件地址"></a>電子郵件鏈接<ahref="mailto:E-mail地址">超鏈接文本</a>錨點鏈接：先定義錨點，再通過id名標注跳轉到錨點目標的位置。<aid="錨點名稱">文字</a><ahref=“#錨點的名稱"＞鏈接的文字</a>圖像映射<imgsrc="圖像地址"usemap=“#影像地圖名稱"><mapname="影像地圖名稱"><areashape="熱區(qū)形狀"coords="熱區(qū)坐標"href="鏈接地址“/></map>2.2通用行內元素span2.常用的行元素span元素：在網(wǎng)頁的效果上看不出什么意義，但是通過id屬性、style屬性、class屬性設置和JavaScript可以改變span元素內容的排版布局。格式:<span>文本和其他內聯(lián)元素</span>特點：（1）<span>標簽沒有特定的含義，可用作文本的容器，用來組合文檔中的行內元素。（2）當與CSS一起使用時，<span>元素可為部分文本設置樣式屬性。（3）<span>標簽只能包含文本和其他內聯(lián)元素，不能將塊級元素放入其中。2.3圖像img2.常用的行元素HTML網(wǎng)頁中經(jīng)常需要插入圖片，使頁面更加美觀，表達更加清晰。格式：<imgsrc="被引用圖片的地址"alt="圖片的代替文本">img標簽屬性：2.3圖像img2.常用的行元素圖像路徑：絕對路徑

是主頁上的文件或目錄在硬盤上的真正路徑或網(wǎng)址。例如：“c:/website/img/photo.jpg”相對路徑是以當前文件所在路徑為起點，進行相對文件的查找。例如：2.4文本格式化元素2.常用的行元素在網(wǎng)頁中有時需要為文字設置粗體、斜體或下劃線效果，這時就需要用到HTML中的文本格式化標記使文字以特殊的方式顯示。文本格式化元素包括sup元素、sub元素、b元素、i元素、em元素、strong元素、mark元素和br元素等。<b>：定義粗體文本；<i>：定義斜體文本；<em>：定義強調文本，實際效果與斜體文本差不多；<strong>：定義粗體文本；<sup>：定義上標文本；<sub>：定義下標文本；<mark>：定義帶有記號的文本；常用的塊元素常用的行元素任務實現(xiàn)第2章網(wǎng)頁的基本結構實現(xiàn)3.任務實現(xiàn)本節(jié)對前面所學知識點進行檢測，引導學生獨立自主完成任務4：制作“學習動態(tài)”子頁面。第2章網(wǎng)頁的基本結構實現(xiàn)網(wǎng)頁設計與制作HTML5+CSS3任務5制作“在線留言”子頁面第2章網(wǎng)頁的基本結構實現(xiàn)知識目標技能目標素質目標（1）理解表單的工作原理。（2）掌握表單相關標簽及屬性。（3）掌握表單及表單元素的應用方法。（1）能夠制作出符合網(wǎng)站需求的各種表單頁面。（2）能夠創(chuàng)建具有相應功能的表單元素。（3）能夠靈活運用常用的表單元素。（1）培養(yǎng)自主學習和解決問題的能力。（2）培養(yǎng)精益求精的工匠精神。（3）培養(yǎng)嚴謹?shù)木幊塘晳T。表單及其相關元素任務實現(xiàn)第2章網(wǎng)頁的基本結構實現(xiàn)1.表單及其相關元素1.1表單的基本概念1.2常用的表單元素1.3表單按鈕1.4表單元素的屬性1.5表單元素的分組第2章網(wǎng)頁的基本結構實現(xiàn)1.1表單的基本概念1.表單及其相關元素表單：用于收集用戶的信息和意見，是網(wǎng)站管理者與瀏覽者之間溝通的橋梁。表單的創(chuàng)建：（1）確定表單的目的和內容。需要搜集用戶的哪些數(shù)據(jù)。（2）建立表單。選擇合適的表單元素控件。（3）設計表單處理程序。即接受表單所收到的數(shù)據(jù)并進一步處理數(shù)據(jù)，通常由ASP.NET、JSP、PHP等技術實現(xiàn)）。1.1表單的基本概念1.表單及其相關元素表單基本組成：表單標簽、表單元素、表單按鈕1.1表單的基本概念1.表單及其相關元素表單標簽：<form>表單是一個包含表單元素的容器，可以使用<form>標簽在網(wǎng)頁中創(chuàng)建表單。格式：<formaction="url"method="get|post"name="value">…</form>action屬性：提交的地址；method屬性：提交的方式；name屬性：用于指定表單的名稱，以區(qū)分同一個頁面的多個表單；1.1表單的基本概念1.表單及其相關元素<form

action="http://localhost/action.php"

method="post"><!--表單域-->賬號：

<!--提示信息--><inputtype="text"name="zhanghao"/>

<!--表單控件-->密碼：

<!--提示信息--><inputtype="password"name="pwd"/>

<!--表單控件--><inputtype="submit"value="提交"/>

<!--表單控件--></form>1.2常用表單元素1.表單及其相關元素表單元素：即表單域，也叫表單控件。包括常用的輸入框、文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉菜單、文件上傳框和按鈕等?！癷nput”輸入框：是最重要的表單元素。input有很多種形態(tài)，通過type屬性區(qū)分。（1）單行文本輸入框：允許用戶輸入一些簡短的單行信息，如用戶姓名。格式：<inputtype="text"name="name"maxlength="value"size="value"value="text"/>（2）密碼輸入框：用于保密信息的輸入，如密碼。用戶輸入的時候顯示的是“*”號。格式：<inputtype="password"name="name"maxlength="value"size="value"/>（3）單選按鈕：用于單項選擇，例如問卷調查中的單選，或者選擇性別等。格式：<inputtype="radio"name="field_name"value="value"checked>1.2常用表單元素1.表單及其相關元素（4）復選框：允許用戶在一組選項中選擇多個。例如問卷調查中的多選，或者選擇興趣愛好等。格式：<inputtype="checkbox"name="name"value="value">（5）隱藏域：對于用戶是不可見的，主要用于后臺編程時使用。格式：<inputtype="hidden"name="name"value="value"/>（6）文件域：選擇文件，并上傳文件的表單元素。格式：<inputtype="file"name="name"/>（7）email類型：email類型的input元素是一種專門用于輸入電子郵件地址的文本輸入框，可以用來驗證email輸入框的內容是否符合email郵件地址格式。格式：<inputtype＝"email"/>（8）url類型：url類型的input元素是一種用于輸入URL地址的文本框，如果所輸入的內容是URL地址格式的文本，則會提交數(shù)據(jù)到服務器。格式：<inputtype＝"url"/>1.2常用表單元素1.表單及其相關元素（9）tel類型：tel類型用于提供輸入電話號碼的文本框，由于電話號碼的格式千差萬別，很難實現(xiàn)一個通用的格式，因此，tel類型通常會和pattern屬性配合使用。pattern屬性的值是通過其檢查輸入值的正則表達式。格式：<inputtype＝"tel"pattern="正則表達式"/>（10）search類型：專門用于輸入搜索關鍵詞的文本框它能自動記錄一些字符，例如站點搜索或者Google搜索，在用戶輸入內容后其右側會附帶一個刪除圖標，單擊這個圖標按鈕可以快速清除內容。格式：<inputtype＝"search"/>（11）color類型：用于提供設置顏色的文本框實現(xiàn)一個RGB顏色輸入。格式：<inputtype＝"color"value="value"/>1.2常用表單元素1.表單及其相關元素<formaction="#"method="post">用戶賬號：<inputtype="text"/><br/><br/>用戶密碼：<inputtype="password"/><br/><br/>用戶性別：<inputtype="radio"name="sex"checked="checked"/>男<inputtype="radio"name="sex"/>女<br/><br/>興趣：<inputtype="checkbox"/>唱歌<inputtype="checkbox"/>跳舞<inputtype="checkbox"/>游泳<br/><br/>上傳頭像：<inputtype="file"/><br/><br/><inputtype="hidden"/></form>1.2常用表單元素1.表單及其相關元素<formaction="#"method="get">請輸入您的郵箱：<inputtype="email"name="formmail"/><br/>請輸入個人網(wǎng)址：<inputtype="url"name="user_url"/><br/>請輸入電話號碼：<inputtype="tel"name="telphone"pattern="^\d{11}$"/><br/>輸入搜索關鍵詞：<inputtype="search"name="searchinfo"/><br/>請選取一種顏色：<inputtype="color"name="color1"/><inputtype="color"name="color2"value="#FF3E96"/><inputtype="submit"value="提交"/></form>1.2常用表單元素1.表單及其相關元素“選擇”表單元素：由<select>、<option>標簽來定義的。其中<select>用來定義下拉列表，<option>用來定義列表選項。格式：<selectname="name"size="value"multiple><optionvalue="value"selected>選項1</option><optionvalue="value">選項2</option>…</select>表2-8“選擇”表單元素屬性1.2常用表單元素1.表單及其相關元素<body>出生年月：<selectname="year"size="1"><optionvalue="">請選擇年份</option><optionvalue="2011">2011</option><optionvalue="2012">2012</option><optionvalue="2013">2013</option><optionvalue="2014">2014</option><optionvalue="2015">2015</option><optionvalue="2016">2016</option><optionvalue="2017">2017</option><optionvalue="2018">2018</option><optionvalue="2019">2019</option><optionvalue="2020">2020</option><optionvalue="2021">2021</option><optionvalue="2022">2022</option><optionvalue="2023">2023</option></select>年</body>1.2常用表單元素1.表單及其相關元素“文本域”表單元素：文本域既表示一個文本的區(qū)域，通俗來說就是可以一個區(qū)域內輸入多行文本。格式：<textareaname="textfield_name"cols="value"rows="value"wrap=”soft|hard”>…</textarea>表2-9textarea的屬性1.2常用表單元素1.表單及其相關元素<body>個人簡介：<textareaname="description"cols="30"rows="10">

此處描述信息</textarea></body>1.3表單按鈕1.表單及其相關元素從本質上講，表單按鈕也是表單元素。提交按鈕用于把表單數(shù)據(jù)發(fā)送到服務器，重置按鈕用于重置整個表單的數(shù)據(jù)，普通按鈕則需要開發(fā)者賦予它功能。提交按鈕：定義提交表單數(shù)據(jù)至表單處理程序的按鈕。格式：<inputtype＝"submit"name=”...”value=”...”/>實例代碼：<inputtype="submit"value="立即購買"/>重置按鈕：填完表單信息后，發(fā)現(xiàn)填寫錯誤，希望將表單數(shù)據(jù)還原為頁面加載時的狀態(tài)。可以在表單上創(chuàng)建一個重置按鈕，可清除表單中的所有數(shù)據(jù)。格式：<inputtype＝"reset"name=”...”value=”...”/>實例代碼：<inputtype="reset"value="取消"/>1.3表單按鈕1.表單及其相關元素圖像按鈕：默認的圖像按鈕不美觀，可以創(chuàng)建一幅漂亮的圖像，再把<input>標簽的type屬性設置為“image”，把src屬性設置為圖像的URL，使用圖像按鈕時，input元素沒有value屬性。格式：<inputtype＝"image"name=”...”src=”...”alt=”...”/>實例代碼：<inputtype="image"src="images/dl.jpg"alt="登錄"/>普通按鈕：定義可單擊按鈕，多數(shù)情況下，用于JavaScript啟動腳本。格式：<inputtype＝"button"name=”...”value=”...”/><button>標簽：用于定義一個按鈕，在標簽內部可以放置內容，比如文本或圖像等。格式：<buttontype＝"button"name=”...”value=”...”/>...</button>實例代碼：<buttontype="button"onclick="alert('歡迎學習！')">點我!</button>1.4表單元素的屬性1.表單及其相關元素表單元素除了type、name屬性之外還定義很多其他的屬性以實現(xiàn)不同的功能。1.value屬性value屬性規(guī)定輸入字段的初始值，也是表單被提交時被發(fā)送到服務器的值。2.autofocus屬性autofocus屬性是布爾屬性，用于指定頁面加載后是否自動獲取焦點，將標記的屬性值所在位置。3.placeholder屬性placeholder屬性用于為input類型的輸入框提供相關提示信息以描述輸入框期待用戶輸入何種內容。placeholder屬性適用于以下輸入類型：text、search、url、tel、email以及password。1.4表單元素的屬性1.表單及其相關元素<formaction="#"method="post"><inputtype="search"name="user_search"placeholder="請輸入你要搜素的內容"/><inputtype="submit"/></form>1.4表單元素的屬性1.表單及其相關元素4.required屬性required屬性是布爾屬性，用于規(guī)定輸入框填寫的內容不能為空。適用于以下輸入類型：text、search、url、tel、email、password、number、checkbox、radio、file。<formaction="#"method="post">用戶名:<inputtype="text"name="usr_name"required="required"/><inputtype="submit"value="提交"/></form>1.4表單元素的屬性1.表單及其相關元素5.readonly屬性readonly屬性規(guī)定輸入字段為只讀（不能修改），readonly只對text、password以及textarea有效。6.disabled屬性disabled屬性規(guī)定輸入字段是禁用的。disabled屬性不需要值。它等同于disabled="disabled"。該屬性對text、password、textarea、select、radio、checkbox、hidden、option等表單元素都有效。7.pattern屬性pattern屬性規(guī)定用于驗證輸入字段的模式。模式指的是正則表達式。pattern屬性適用于的類型是:text、search、url、tel、email和password類型的input元素。1.4表單元素的屬性1.表單及其相關元素<formaction="#"method="get">賬號：<inputtype="text"name="username"pattern="^[a-zA-Z][a-zA-Z0-9_]{4,15}$"/>（以字母開頭，允許5-16字節(jié)，允許字母數(shù)字下劃線）<br/>

密碼：<inputtype="password"name="pwd"pattern="^[a-zA-Z]\w{5,17}$"/>（以字母開頭，長度在6~18之間，只能包含字母、數(shù)字和下劃線）<br/>Email地址：<inputtype="email"name="myemail"pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"/><inputtype="submit"value="提交"/></form>1.5表單元素的分組1.表單及其相關元素4.required屬性表單元素分組可以使用<fieldset>和<legend>標簽定義，它們相當于一個容器，該標簽本身不參與數(shù)據(jù)的交互操作。<fieldset>標簽將表單內容的一部分打包，生成一組相關表單的字段；<legend>標簽用于定義分組的標題；<fieldset>標簽中的第一個元素一般是<legend>標簽。格式：<fieldset><legend>...</legend>...</fieldset>1.5表單元素的分組1.表單及其相關元素<h2>手機移動支付問卷調查</h2><formaction="#"method="post"><fieldset>

<legend>個人信息</legend>

姓名：<inputtype="text"placeholder="請輸入真實姓名"><br>

E-mail郵箱地址：<inputtype="email"placeholder="請輸入完整有效的E-mail地址"><br>

你的電話號碼：<inputtype="tel"name=""value=""placeholder="請輸入電話號碼"></fieldset></form>表單及其相關元素任務實現(xiàn)第2章網(wǎng)頁的基本結構實現(xiàn)3.任務實現(xiàn)本節(jié)對前面所學知識點進行檢測，引導學生獨立自主完成任務5：制作“在線留言”子頁面。第2章網(wǎng)頁的基本結構實現(xiàn)網(wǎng)頁設計與制作HTML5+CSS3任務6設計“學習資料”子頁面第3章網(wǎng)頁的表現(xiàn)標準知識目標技能目標素質目標（1）掌握CSS的相關概念。（2）掌握CSS的定義與使用方法。（3）掌握CSS文本修飾的常用屬性。（1）能夠書寫規(guī)范的CSS樣式,引用CSS樣式。（2）能夠使用CSS設置頁面中不同的文本樣式。（3）能夠靈活運用CSS選擇器（1）掌握并遵循Web開發(fā)標準，培養(yǎng)嚴謹?shù)墓ぷ髯黠L。（2）培養(yǎng)歸納思維能力。（3）加強實踐教育，提升實踐能力。CSS基礎與語法CSS字體、段落與文本修飾設置任務實現(xiàn)第3章網(wǎng)頁的表現(xiàn)標準1.CSS基礎與語法1.1CSS樣式設置規(guī)則1.2引用CSS樣式表1.3CSS選擇器1.4選擇器的優(yōu)先級第3章網(wǎng)頁的表現(xiàn)標準1.1CSS樣式設置規(guī)則1.CSS基礎與語法CSS：是CascadingStyleSheet的縮寫，即層疊樣式表，是用來美化網(wǎng)頁的。通過CSS樣式設置網(wǎng)頁頁面的格式，可以實現(xiàn)結構標準與表現(xiàn)標準的分離，即頁面的內容與頁面的格式分離。只要修改CSS樣式表文件，就可以改變整個網(wǎng)站的風格，使得網(wǎng)站維護格式方便、高效，還可以統(tǒng)一整個網(wǎng)站站點的風格。1.1CSS樣式設置規(guī)則1.CSS基礎與語法樣式表的每個規(guī)則都有兩個主要部分：選擇器和聲明部分。CSS樣式規(guī)則的語法格式如下：選擇器｛屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;……｝選擇器用于指定CSS樣式要應用在哪個對象上。大括號中是具體CSS屬性的設置，用來給指定的元素設置具體的樣式。聲明則用于定義樣式屬性，聲明由屬性和屬性值兩部分組成；屬性是指對指定的對象設置的樣式屬性，如字體大小、文本顏色等；屬性和屬性值以“鍵值對”的形式出現(xiàn)的；屬性和屬性值之間用英冒號“：”連接；多個屬性的設置用英文分號“；”隔開。1.1CSS樣式設置規(guī)則1.CSS基礎與語法書寫CSS樣式時，除了要遵循CSS樣式規(guī)則外，還必須注意以下幾點。（1）CSS樣式中的選擇器嚴格區(qū)分大小寫，但屬性和屬性值不區(qū)分大小寫;建議選擇器、屬性和屬性值都采用小寫的方式。（2）屬性的設置之間用英文逗號隔開，最后一個屬性分號可以省略；建議保留。（3）屬性值由多個單詞組成且中間包含空格，必須為屬性值加上英文引號；例如：h1{font-family:"arialblack";}（4）在編寫CSS代碼時，為了提高代碼的可讀性，通常需要加上CSS注釋。1.2引用CSS樣式表1.CSS基礎與語法要使用CSS修飾網(wǎng)頁，就需要在HTML文件中引入CSS樣式表。通常引用CSS樣式表有3種引用方式。1.行內樣式表也稱為內聯(lián)樣式表，是直接在HTML標簽中添加的style標簽屬性，屬性的內容就是CSS屬性的設置。格式：<標簽名style=”屬性1:屬性值1;屬性2:屬性值2……”>內容</標簽名>例如：<pstyle=”color:red;font-size:24px;”>文本內容</p>行內樣式表用法簡單，效果直觀；但不能做到網(wǎng)頁的結構標準（網(wǎng)頁內容）與表現(xiàn)標準（樣式）的分離，不利于后期網(wǎng)站的維護，不推薦使用。1.2引用CSS樣式表1.CSS基礎與語法2.內部樣式表內部樣式表是將CSS樣式表嵌入到HTML文件的文件頭<head>。格式：<head><styletype="text/css">選擇器{樣式屬性:屬性值;……}</style></head>type的屬性值為"text/css"，讓瀏覽器知道<style>標簽包含的是CSS代碼1.2引用CSS樣式表1.CSS基礎與語法內部樣式表中的所有代碼都集中到head標簽對中，便于查找和修改；看上去好像實現(xiàn)了網(wǎng)頁的結構標準（網(wǎng)頁內容）與表現(xiàn)標準（樣式）的分離；但此方法只適合于單個頁面的制作，若某網(wǎng)站中的網(wǎng)頁頁面數(shù)量龐大，當需要對頁面進行統(tǒng)一改變時，需要一個頁面一個頁面地修改，工作量大，不推薦使用。<styletype="text/css">h1{color:red;text-align:center;}</style><body><h1>這是一個一級標題</h1></body>1.2引用CSS樣式表1.CSS基礎與語法3.外部樣式表將所有的樣式規(guī)則放在一個或多個以“.css”為擴展名的外部樣式表文件中，在HTML文檔中的<head></head>標簽中加入link標簽來引用外部樣式表文件。link標簽的語法格式如下：<linkhref="CSS文件的路徑"rel="stylesheet"type="text/css"/>1.2引用CSS樣式表1.CSS基礎與語法link標簽需要包含在head標簽中使用，它的3個標簽屬性分別為：（1）href：指定CSS文件的路徑，可以使用相對路徑，也可以使用絕對路徑。（2）rel="stylesheet"：指定當前文檔與被鏈接文檔之間的關系，此處stylesheet表示被鏈接的文檔是一個樣式表文件。（3）type="text/css"：用來規(guī)定被鏈接文檔的類型，此處“text/css”表示鏈接的外部文件為CSS樣式表。1.2引用CSS樣式表1.CSS基礎與語法example2.html頁面如下<head><linkrel="stylesheet"type="text/css"href="exampe2.css"></head><body><h1>這是一個一級標題</h1></body>exampe2.css樣式如下h1{color:red;/*設置顏色為紅色*/text-align:center;/*水平居中*/}1.3CSS選擇器1.CSS基礎與語法1.基礎選擇器基礎選擇器有四種:元素選擇器、類選擇器、id選擇器和通用選擇器。（1）元素選擇器：用HTML元素名作為選擇器，其語法格式如下：元素名{屬性1：屬性值1；屬性2：屬性值2；……}將CSS樣式應用于指定的HTML元素，首先需要找到該目標標簽，在CSS中，能夠完成這一任務被稱為選擇器。CSS選擇器分類：基礎選擇器、復合選擇器、偽類選擇器、偽元素選擇器、屬性選擇器。1.3CSS選擇器1.CSS基礎與語法<body><h1>信息工程學院黨總支開展黨的二十大精神宣講暨入黨申請人集體談話</h1><div><p>為學習宣傳貫徹黨的二十大精神，做好入黨申請人的教育培養(yǎng)工作，3月30日晚，信息工程學院黨總支在報告廳開展黨的二十大精神宣講暨入黨申請人集體談話，活動由信息工程學院黨總支組織委員姚玲潔主持。</p></div></body><styletype="text/css">h1{color:red;/*設置顏色為紅色*/text-align:center;/*水平居中*/}div{width:500px;/*寬度500px*/height:500px;/*高度500px*/margin:0auto;/*設置div標記居中*/}p{text-indent:2em;/*設置段落標記的內容首行縮進2字符*/}</style>1.3CSS選擇器1.CSS基礎與語法（2）class類選擇器class類選擇器也稱為自定義選擇器，它能夠把相同元素分類定義成不同的樣式。類選擇器使用“.”(英文點號)開頭，后面緊跟類名，語法格式如下：.類名{屬性1:屬性值1;屬性2:屬性值2;……}要注意以下幾點：1）類選擇器嚴格區(qū)分大小寫，屬性和值不區(qū)分大小寫，一般將“選擇器、屬性和值”都采用小寫的方式。2）盡量使用英文，英文簡寫或者統(tǒng)一使用拼音。不能數(shù)字開頭，建議以字母開頭。3）盡量不要使用縮寫，除非一看就懂的單詞。1.3CSS選擇器1.CSS基礎與語法（3）id選擇器id選擇器是用來對某個單一元素定義單獨的樣式，使用時以“#”開頭，后面緊跟id名稱。語法格式如下：#id名{屬性1:屬性值1;屬性2:屬性值2;……}id選擇器要慎用。由于id是頁面中唯一的，一般會留給頁面里的JavaScript使用；而class選擇器一般用來定義元素公用的規(guī)則，更具有通用性，復用性強，從某種程度上來說，還能減少代碼量，維護起來也方便。1.3CSS選擇器1.CSS基礎與語法（4）通用選擇器通用選擇器是一種特殊的選擇器，用“*”來表示，可以定義頁面上的所有的HTML元素的樣式。語法格式如下：*{屬性1:屬性值1;屬性2:屬性值2;……}例如，通常在制作網(wǎng)頁時首先將頁面中所有元素的外邊距和內邊距設置為0，代碼如下：*{margin:0px;/*外邊距設置為0*/padding:0px;/*內邊距設置為0*/}通用選擇器在實際開發(fā)中很少使用。1.3CSS選擇器1.CSS基礎與語法2.復合選擇器復合選擇器是由基礎選擇器組合形成的，也叫組合選擇器。通常是由兩個或者多個基礎選擇器通過不同的方式組合而成。常用的復合選擇器有：后代選擇器、子選擇器、并集選擇器、交集選擇器、偽類選擇器等等。（1）后代選擇器后代選擇器又稱為包含選擇器，派生選擇器。用來選擇元素或元素組的后代，其寫法就是把外層標簽寫在前面，內層標簽寫在后面，中間使用“空格”分割。語法格式如下：選擇器1選擇器2{屬性1:屬性值1;……}1.3CSS選擇器1.CSS基礎與語法<styletype="text/css">/*使用后代選擇器為div元素里的所有p元素加下劃線*/divp{text-decoration:underline;}</style><body><h1>信息工程學院黨總支開展黨的二十大精神宣講暨入黨申請人集體談話</h1><div><p>為學習宣傳貫徹黨的二十大精神，做好入黨申請人的教育培養(yǎng)工作，3月30日晚，信息工程學院黨總支在報告廳開展黨的二十大精神宣講暨入黨申請人集體談話，活動由信息工程學院黨總支組織委員姚玲潔主持。</p></div></body>1.3CSS選擇器1.CSS基礎與語法（2）子選擇器子選擇器只能選擇某個元素的子元素，使用時用“>”連接。語法格式如下：選擇器1>選擇器2{屬性1:屬性值1;屬性2:屬性值2;……}與后代選擇器相比子選擇器只能選擇作為某元素子元素的元素，如果不希望選擇任意的后代元素，而是希望縮小范圍，只選擇某個元素的子元素，就可以使用子選擇器。1.3CSS選擇器1.CSS基礎與語法<div><divclass="style1">讓我們看看<p><span>子選擇器</span>的使用方法</p></div><divclass="style2">讓我們看看<p><span>子選擇器</span>的使用方法</p></div></div><styletype="text/css">.style1span{font-size:24px;text-decoration:underline;}.style2>span{font-size:24px;text-decoration:underline;}</style>1.3CSS選擇器1.CSS基礎與語法（3）并集選擇器并集選擇器也叫分組選擇器，可以選擇多組標簽（元素）并定義相同的樣式。使用時用英文逗號連接。語法格式如下：選擇器1,選擇器2{屬性1:屬性值1;屬性2:屬性值2;……}例如代碼：h1,.box{color:#f000;font-size:24px;}h1{color:#f000;font-size:24px;}.box{color:#f000;font-size:24px;}等同于1.3CSS選擇器1.CSS基礎與語法（4）交集選擇器交集選擇器是指選中同時符合多個選擇器條件的元素，使用時不用任何符號連接。其中第一個為元素選擇器，第二個為類選擇器或者id選擇器。兩個選擇器之前不能有空格。語法格式如下：選擇器1選擇器2{屬性1:屬性值1;屬性2:屬性值2;……}1.3CSS選擇器1.CSS基礎與語法<styletype="text/css">/*選擇既是span，同時類名又是number的元素*/span.number{text-decoration:underline;}</style><body><p>這是一個普通的段落</p><spanclass="number">45</span><divclass="number">100</div><span>這是普通的span</span></body>1.3CSS選擇器1.CSS基礎與語法（5）相鄰兄弟選擇器相鄰兄弟選擇器選擇緊貼在元素之后的另一個元素，而且它們具有相同的父元素。語法格式如下：選擇器1+選擇器2{屬性1:屬性值1;屬性2:屬性值2;……}1.3CSS選擇器1.CSS基礎與語法<styletype="text/css">div+p{text-decoration:underline;}</style><h1>相鄰兄弟選擇器</h1><p>選擇所有作為指定元素的相鄰的同級元素。</p><div><p>div中的段落1。</p><p>div中的段落2。</p></div><p>段落3。不在div中。</p><p>段落4。不在div中。</p>1.3CSS選擇器1.CSS基礎與語法（6）通用兄弟選擇器通用兄弟選擇器選擇指定元素后面的所有兄弟元素，而且它們具有相同的父元素。語法格式如下：選擇器1~選擇器2{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;……}1.3CSS選擇器1.CSS基礎與語法3.偽類選擇器偽類之所以名字中有個“偽”字，是因為它所指定的對象在文檔中并不存在，它指定的是一個或者與其相關的選擇器的狀態(tài)。為元素添加對應樣式時，這個狀態(tài)是根據(jù)用戶行為而動態(tài)變化的。使用偽類時用英文冒號來表示，偽類的分為狀態(tài)偽類和結構性偽類。狀態(tài)偽類：是基于元素當前狀態(tài)進行選擇的。在與用戶的交互過程中元素的狀態(tài)是動態(tài)變化的，因此該元素會根據(jù)其狀態(tài)呈現(xiàn)不同的樣式。當元素處于某狀態(tài)時會呈現(xiàn)該樣式，而進入另一狀態(tài)后，該樣式也會失去。超級鏈接偽類是最應用最廣泛的狀態(tài)偽類。鏈接能夠以不同的方式顯示。常見的超級鏈接偽類主要包括：（1）:link應用于未訪問過的鏈接狀態(tài)，即超鏈接點擊之前；（2）:visited應用于已訪問過的鏈接狀態(tài)，即超鏈接被訪問過之后；（3）:hover應用于鼠標懸停到鏈接上的狀態(tài)，也就是鼠標放到頁面的某個元素上時或劃過某個元素時；（4）:active應用被激活的鏈接狀態(tài)，即鼠標點擊頁面中的某個鏈接但是不松手時；1.3CSS選擇器1.CSS基礎與語法<styletype="text/css">a:link{color:red;}a:visited{color:green;}a:hover{text-decoration:none;}a:active{color:blue;}</style><body><ahref="#">

溫馨提示

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

評論

0/150

提交評論