版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
項目一網(wǎng)頁開發(fā)基礎(chǔ)1.1
HTML基礎(chǔ)HTML（HypertextMarkupLanguage，超文本標(biāo)記語言）是由WWW（WorldWideWeb，萬維網(wǎng)）的發(fā)明者蒂姆·伯納斯-李（TimBerners-Lee）和丹尼爾·W.康諾利（DanielW.Connolly）于1990年共同開發(fā)的一種標(biāo)記語言，它是SGML（StandardGeneralMarkupLanguage，標(biāo)準(zhǔn)通用標(biāo)記語言）的應(yīng)用。使用HTML編寫的文件稱為HTML文件，這類文件具有跨平臺特性，適用于各種操作系統(tǒng)（如UNIX、Windows等）。瀏覽器的主要功能是讀取HTML文件中的標(biāo)記代碼，并將這些HTML文件“翻譯”成用戶可交互的可視化網(wǎng)頁內(nèi)?容。1.1
HTML基礎(chǔ)萬維網(wǎng)上的一個HTML文件稱為一個網(wǎng)頁（Page）。組織或者個人在萬維網(wǎng)上放置的網(wǎng)頁面稱為主頁（Homepage）或首頁，主頁中通常包括指向其他相關(guān)頁面或其他節(jié)點的超鏈接，超鏈接本質(zhì)上是一種統(tǒng)一資源定位符（UniformResourceLocator，URL），通過激活（單擊）超鏈接，可使瀏覽器訪問并顯示新的網(wǎng)頁。這種便捷的網(wǎng)頁跳轉(zhuǎn)機(jī)制是HTML被廣泛應(yīng)用的最重要的原因之?一。HTTP（HypertextTransferProtocol，超文本傳送協(xié)議）為瀏覽器在訪問超文本時提供了統(tǒng)一的標(biāo)準(zhǔn)規(guī)?范。HTML文件本質(zhì)上是文本文件，通過在其中嵌入特定的標(biāo)記（也稱為標(biāo)簽），開發(fā)者能夠指示瀏覽器渲染和展示HTML文件的內(nèi)容，包括文字樣式、頁面布局及多媒體元素的展示方式?等。1.1.1
HTML簡介1.1
HTML基礎(chǔ)萬維網(wǎng)上的一個HTML文件稱為一個網(wǎng)頁（Page）。組織或者個人在萬維網(wǎng)上放置的網(wǎng)頁面稱為主頁（Homepage）或首頁，主頁中通常包括指向其他相關(guān)頁面或其他節(jié)點的超鏈接，超鏈接本質(zhì)上是一種統(tǒng)一資源定位符（UniformResourceLocator，URL），通過激活（單擊）超鏈接，可使瀏覽器訪問并顯示新的網(wǎng)頁。這種便捷的網(wǎng)頁跳轉(zhuǎn)機(jī)制是HTML被廣泛應(yīng)用的最重要的原因之?一。HTTP（HypertextTransferProtocol，超文本傳送協(xié)議）為瀏覽器在訪問超文本時提供了統(tǒng)一的標(biāo)準(zhǔn)規(guī)?范。HTML文件本質(zhì)上是文本文件，通過在其中嵌入特定的標(biāo)記（也稱為標(biāo)簽），開發(fā)者能夠指示瀏覽器渲染和展示HTML文件的內(nèi)容，包括文字樣式、頁面布局及多媒體元素的展示方式?等。1.1.1
HTML簡介1.1
HTML基礎(chǔ)1．HTML的發(fā)展歷程1.1.1
HTML簡介HTML4.0：1997年12月18日發(fā)布，屬于W3C推薦標(biāo)?準(zhǔn)。HTML2.0：1995年11月，作為RFC1866發(fā)布，在RFC2854于2000年6月發(fā)布之后，HTML2.0被宣布已經(jīng)過?時。HTML5：HTML5是公認(rèn)的下一代Web語言，極大地提升了Web在富媒體、富內(nèi)容和富應(yīng)用等方面的能力，被譽(yù)為改變移動互聯(lián)網(wǎng)的重要推手。HTML1.0：1993年6月，作為互聯(lián)網(wǎng)工程任務(wù)組（InternetEngineeringTaskForce，IETF）工作草案發(fā)?布。HTML3.2：1997年1月14日發(fā)布，屬于W3C（WorldWideWebConsortium，萬維網(wǎng)聯(lián)盟）推薦標(biāo)?準(zhǔn)。HTML4.01（是對HTML4.0的微小改進(jìn)）：1999年12月24日發(fā)布，屬于W3C推薦標(biāo)?準(zhǔn)。1.1
HTML基礎(chǔ)2．HTML的特點1.1.1
HTML簡介HTML的版本升級采用超集方式，更加靈活方便。HTML采取子類元素的方式，實現(xiàn)功能的擴(kuò)展，滿足標(biāo)識符增加等需?求?？梢訵indows、macOS等多種操作上使?用。HTML是網(wǎng)絡(luò)的通用標(biāo)記語言。它允許網(wǎng)頁開發(fā)者創(chuàng)建包含文本與圖片相結(jié)合的復(fù)雜頁面，這些頁面可以被任何設(shè)備或瀏覽器訪?問。01020304簡易性可擴(kuò)展性跨平臺性通用性1.1
HTML基礎(chǔ)3．HTML的基本格式1.1.1
HTML簡介<!DOCTYPE>聲明：聲明必須是HTML文件的第一行，位于<html>標(biāo)簽之前。<!DOCTYPE>聲明和瀏覽器的兼容性相關(guān)。<html>標(biāo)簽：位于<!DOCTYPE>聲明之后，被稱為根標(biāo)簽。根標(biāo)簽的主要作用是告知瀏覽器該文檔是一個HTML文件。<head>標(biāo)簽：用于定義HTML文件的頭部內(nèi)容，也被稱為頭部標(biāo)簽。<body>標(biāo)簽：用于定義HTML文件所要顯示的主體內(nèi)容，也被稱為主體標(biāo)簽。網(wǎng)頁中的所有文本、圖像、音頻和視頻等信息都必須位于<body>標(biāo)簽內(nèi)，才能最終展示給用?戶。案例
HTML文件（資源位置：項目1\源文件\htmlDemo01.html）<!DOCTYPE><html><head><title>htmlDemo01</title></head></html>1.1
HTML基礎(chǔ)3．HTML的基本格式1.1.1
HTML簡介htmlDemo02.html介紹完案例中的HTML標(biāo)簽后，下面以htmlDemo02.html文件為例講解HTML文件的創(chuàng)建和運?行。創(chuàng)建一個空白文件夾，然后在該文件夾中新建一個文本文件（擴(kuò)展名為.txt），將htmlDemo01.html的內(nèi)容寫入該文件中并保存，最后將文件的名稱更改為htmlDemo02，擴(kuò)展名更改為.html。更改之后該文件便是一個HTML文件，如圖所?示。1.1
HTML基礎(chǔ)3．HTML的基本格式1.1.1
HTML簡介案例第一個HTML文件（資源位置：…項目1\源文件\htmlDemo02.html）<!DOCTYPE><html><head><title>htmlDemo02</title></head><body>這是我的第一個HTML</body></html>添加完成后，保存文件，使用瀏覽器再次打開htmlDemo02.html文件，瀏覽器中的顯示結(jié)果如圖所?示。第一個HTML文件1.1
HTML基礎(chǔ)1．單標(biāo)簽1.1.2
HTML標(biāo)簽分類單標(biāo)簽也被稱為“空標(biāo)簽”，是指用一個“<>”符號就可以完整地描述某個功能的標(biāo)簽。單標(biāo)簽的基本語法格式如下：<標(biāo)簽名/>2．雙標(biāo)簽雙標(biāo)簽也被稱為體標(biāo)簽，是指由開始標(biāo)簽和結(jié)束標(biāo)簽組成的標(biāo)簽對。雙標(biāo)簽的基本語法格式如下：<標(biāo)簽名>內(nèi)容</標(biāo)簽名>3．注釋標(biāo)簽在HTML中還有一種特殊的標(biāo)簽—注釋標(biāo)簽，如果需要在HTML文件中添加一些便于閱讀和理解，但又不需要顯示在頁面中的注釋文字，就需要使用注釋標(biāo)簽。注釋標(biāo)簽的基本語法格式如下：<!--注釋語句-->1.1
HTML基礎(chǔ)1．文本標(biāo)簽1.1.3
HTML常用標(biāo)簽在HTML中，文本的顯示格式（如字體、字號、顏色）可通過<font>標(biāo)簽控制，<font>標(biāo)簽的基本語法格式如下：<font屬性="屬性值">文本內(nèi)容</font>下面通過一個案例演示<font>標(biāo)簽的使用，在文件夾中創(chuàng)建名稱為htmlDemo03.html的HTML文件，其<body>標(biāo)簽代碼如下所?示。<body>我是默認(rèn)樣式的文本<br/><fontface="微軟雅黑"size="6"color="green"><br/>我是6號綠色文本，我的字體是微軟雅黑哦</font></body>案例
<font>標(biāo)簽的使用（資源位置：項目1\源文件\htmlDemo03.html）<font>標(biāo)簽的使用1.1
HTML基礎(chǔ)2．圖像標(biāo)簽1.1.3
HTML常用標(biāo)簽圖像標(biāo)簽<img>用于在HTML網(wǎng)頁中顯示圖像。<img>標(biāo)簽的基本語法格式如下：<imgsrc="圖像URL"/>下面通過一個案例演示<img>標(biāo)簽的使用，在文件夾中添加一個名稱為demoImg01.png的圖像文件，然后創(chuàng)建一個名稱為htmlDemo04.html的HTML文件，其<body>標(biāo)簽代碼如下所?示。<body>
顯示圖片：<imgsrc="demoImg01.png"width="160px"
height="130px"border="0"/></body>案例
<img>標(biāo)簽的使用（資源位置：項目1\源文件\htmlDemo04.html）<img>標(biāo)簽的使用1.1
HTML基礎(chǔ)3．表格標(biāo)簽1.1.3
HTML常用標(biāo)簽在HTML網(wǎng)頁中創(chuàng)建表格的基本語法格式如下所?示。<table><tr><td>單元格內(nèi)的文字</td></tr></table>上述語法格式包含3對HTML標(biāo)簽，分別是<table></table>、<tr></tr>和<td></td>，它們是創(chuàng)建表格的基本標(biāo)簽，缺一不可。下面通過一個案例演示表格標(biāo)簽的使用。在文件夾中創(chuàng)建一個名稱為htmlDemo05.html的HTML文件，其<body>標(biāo)簽代碼如下所?示。1.1
HTML基礎(chǔ)<body><tableborder="1px"><tr><td>姓名</td><td>語文</td><td>數(shù)學(xué)</td><td>英語</td></tr><tr><td>小明</td><td>95</td><td>80</td><td>90</td></tr></table></body>案例
表格標(biāo)簽的使用（資源位置：項目1\源文件\htmlDemo05.html）表格標(biāo)簽的使用無邊框的表格1.1
HTML基礎(chǔ)4．表單標(biāo)簽1.1.3
HTML常用標(biāo)簽表單就是在網(wǎng)頁上用于輸入信息的區(qū)域，它的主要功能是收集信息，并將這些信息傳遞給后臺的信息處理模塊。表單主要由3部分構(gòu)成：表單域相當(dāng)于一個容器，用來容納所有的表單控件和提示信?息。表單控件包含具體的表單功能項，如單行文本輸入框、密碼輸入框、復(fù)選框、提交按鈕?等。提示信息表單通常還需要包含一些說明性的文字，即表單控件前的文字說明，用于提示用戶進(jìn)行操?作。1.1
HTML基礎(chǔ)1.1.3
HTML常用標(biāo)簽<form>標(biāo)簽在HTML中，<form>標(biāo)簽用于定義表單域，即創(chuàng)建一個表單。<form>標(biāo)簽的基本語法格式如下所?示。<formaction="URL"method="提交方式"name="表單名稱">各種表單控件</form><input>標(biāo)簽<input>標(biāo)簽的基本語法格式：<inputtype="控件類型">案例
<input>標(biāo)簽的使用（資源位置：項目1\源文件\htmlDemo06.html）<body><fieldset><legend>注冊新用戶</legend><formaction="#"method="post"><tablecellpadding="2"align="center"><tr><tdalign="right">用戶名:</td><td><!--1.單行文本輸入框--><inputtype="text"name="username"></td></tr>1.1
HTML基礎(chǔ)<tr><tdalign="right">密碼:</td><!--2.密碼輸入框--><td><inputtype="password"name="password"></td></tr><tr><tdalign="right">性別:</td><td><inputtype="radio"name="gender"value="male">男
<inputtype="radio"name="gender"value="female">女
</td></tr><tr><tdalign="right">喜愛的運動:</td><td><inputtype="checkbox"name="interest"value="swimming">游泳<inputtype="checkbox"name="interest"value="fitness">健身<inputtype="checkbox"name="interest"value="hiking">爬山</td></tr><tr><tdalign="right">頭像:</td><td><inputtype="file"name="photo"/></td></tr><tr><tdcolspan="2"align="center"><inputtype="submit"value="注冊"/><inputtype="reset"value="重填"/></td></tr></table></form></fieldset></body>1.1
HTML基礎(chǔ)使用瀏覽器打開htmlDemo06.html，顯示結(jié)果如圖所?示。下面通過一個案例演示<textarea>標(biāo)簽的使用。在文件夾中創(chuàng)建一個名稱為htmlDemo07.html的HTML文件，其<body>標(biāo)簽代碼如下所?示。<input>標(biāo)簽的使用填寫表單數(shù)據(jù)<textarea>標(biāo)簽的基本語法格式如下：<textareacols="每行的字符數(shù)"rows="顯示的行數(shù)">文本內(nèi)容</textarea>1.1
HTML基礎(chǔ)<body><formaction="#"method="post">
評論：<br/><textareacols="60"rows="5">
評論時，請注意文明用語，友善交?友。</textarea>
<br/><br/><inputtype="submit"value="提交"/></form></body>案例
<textarea>標(biāo)簽
的使用（資源位置：項目1\源文件\htmlDemo07.html）使用瀏覽器打開文件htmlDemo07.html，顯示結(jié)果如圖所?示。<textarea>標(biāo)簽的使用1.1
HTML基礎(chǔ)5．列表標(biāo)簽1.1.3
HTML常用標(biāo)簽無序列表無序列表是一種不排序的列表，各個列表項之間沒有順序或級別之分，通常是并列的。語法格式如下：有序列表有序列表是一種強(qiáng)調(diào)列表項之間順序的列表，使用<ol>標(biāo)簽定義，內(nèi)部可以嵌套多個<li>標(biāo)簽。語法格式如下：定義列表定義列表與有序列表、無序列表不同，它包含3個標(biāo)簽，即<dl>、<dt>、<dd>。語法格式如下：<d1><dt>名詞1</dt><dd>名詞1的描述信息1</dd><dd>名詞1的描述信息2</dd><dt>名詞2</dt><dd>名詞2的描述信息1</dd><dd>名詞2的描述信息2</dd></dl><ol><li>列表項1</li><li>列表項2</li>...</ol><ul><li>列表項1</li><li>列表項2</li>...</ul>1.1
HTML基礎(chǔ)<body> <fontsize="5">大學(xué)專業(yè)</font><br/> <ul> <li>計算機(jī)科學(xué)與技術(shù)</li>
<!--指定type屬性值，disc為默認(rèn)值-->
<litype="disc">軟件工程</li>
<litype="square">網(wǎng)絡(luò)工程</li>
<litype="circle">信息安全</li> </ul></body>案例
無序列表標(biāo)簽的使用（資源位置：項目1\源文件\htmlDemo08.html）使用瀏覽器打開文件htmlDemo08.html，顯示結(jié)果如圖所?示。下面通過一個案例演示無序列表標(biāo)簽的使用。在文件夾中創(chuàng)建一個名稱為htmlDemo08.html的HTML文件，其<body>標(biāo)簽代碼如下所?示。無序列表標(biāo)簽1.1
HTML基礎(chǔ)<body><dl><dt>五顏六色</dt><dd>聯(lián)合式成語，作謂語、定?語。
形容色彩繁多。引申為各式各樣。</dd><dd>五顏六色的近義詞有五光十色</dd><dt>五彩繽紛</dt><dd>形容色彩繁多而艷麗。</dd><dd>五彩繽紛的近義詞有五顏六色</dd></dl></body>案例
定義列表標(biāo)簽的使用（資源位置：項目1\源文件\htmlDemo09.html）使用瀏覽器打開文件htmlDemo09.html，顯示結(jié)果如圖所?示。下面通過一個案例演示定義列表標(biāo)簽的使用。在文件夾中創(chuàng)建一個名稱為htmlDemo09.html的HTML文件，其<body>標(biāo)簽代碼如下所?示。定義列表標(biāo)簽的使用1.1
HTML基礎(chǔ)6．超鏈接標(biāo)簽1.1.3
HTML常用標(biāo)簽使用<a></a>標(biāo)簽創(chuàng)建超鏈接的基本語法格式如下所?示。<ahref="跳轉(zhuǎn)目標(biāo)"target="目標(biāo)窗口的彈出方式">文本或圖像</a>href屬性：用于指定鏈接指向的頁面的URL，當(dāng)<a>標(biāo)簽在用href屬性時，該標(biāo)簽就具有了鏈接的功?能。target屬性：用于指定鏈接的打開方式，其值有_self、_blank、_parent和_top。<body>在新窗口打開：<ahref="/"target="_blank">必應(yīng)</a><br/>
在原窗口打開：<ahref="/"target="_self">百度</a></body>案例
<a>標(biāo)簽的使用（資源位置：項目1\源文件\htmlDemo10.html）1.1
HTML基礎(chǔ)使用瀏覽器打開文件htmlDemo10.html，顯示結(jié)果如圖所?示。<a>標(biāo)簽的使用單擊“必應(yīng)”鏈接后的頁面跳轉(zhuǎn)結(jié)果單擊“百度”鏈接后的頁面跳轉(zhuǎn)結(jié)果1.1
HTML基礎(chǔ)7．<div>標(biāo)簽1.1.3
HTML常用標(biāo)簽<div>標(biāo)簽也稱為區(qū)隔標(biāo)記，是HTML中用于定義文檔區(qū)塊的塊級元素，主要功能是為網(wǎng)頁內(nèi)容提供結(jié)構(gòu)和布局框架。該標(biāo)簽可以將文字、圖像、表格等內(nèi)容組織到獨立的區(qū)塊中，便于通過CSS進(jìn)行樣式控制和而已調(diào)?整。<div>標(biāo)簽的基本語法格式如下：<div>內(nèi)容區(qū)塊</div>作為容器元素，<div>標(biāo)簽用于組織HTML文件中的大塊內(nèi)容。起始標(biāo)簽<div>和結(jié)束標(biāo)簽<div>之間所有的內(nèi)容構(gòu)成一個獨立區(qū)?塊。1.2
CSS基礎(chǔ)1.2.1
CSS簡介CSS是網(wǎng)頁設(shè)計的重要組成部分，它允許開發(fā)者將樣式信息與網(wǎng)頁內(nèi)容分離，使得網(wǎng)頁的樣式更易于維護(hù)和修改。CSS提供了強(qiáng)大的格式化功能，可以控制網(wǎng)頁中的字體、顏色、背景、布局等各個方?面。如果希望頁面美觀大方、代碼維護(hù)方便，就需要使用CSS實現(xiàn)結(jié)構(gòu)與表現(xiàn)的分離。結(jié)構(gòu)與表現(xiàn)的分離是指在頁面設(shè)計中，只使用HTML標(biāo)簽搭建網(wǎng)頁的基礎(chǔ)結(jié)構(gòu)，不使用標(biāo)簽的屬性設(shè)置網(wǎng)頁的樣式，所有的樣式交由CSS來設(shè)?置。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言（如JavaScript）動態(tài)地對網(wǎng)頁元素進(jìn)行格式化。這使得網(wǎng)頁的樣式可以根據(jù)用戶的交互行為或其他條件進(jìn)行動態(tài)調(diào)整，增強(qiáng)了網(wǎng)頁的交互性和靈活?性。1.2
CSS基礎(chǔ)CSS是一種用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的樣式表語?言。CSS能夠精確控制網(wǎng)頁中元素的排版，支持幾乎所有的字體樣式，并且擁有對網(wǎng)頁對象和模型樣式進(jìn)行編輯的能?力。CSS決定瀏覽器如何呈現(xiàn)HTML元素。換言之，CSS就是描述HTML元素樣式設(shè)置的規(guī)則，可以控制網(wǎng)頁內(nèi)容的外觀。使用CSS設(shè)置頁面格式時，可以將內(nèi)容與表現(xiàn)形式分開。1.2.2
CSS概述1.2
CSS基礎(chǔ)CSS規(guī)則具體如下：1.2.3
CSS規(guī)則及引用方式選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;…}選擇器用于指定CSS樣式作用的HTML元素，花括號內(nèi)的屬性是對該對象設(shè)置的具體樣式。屬性和屬性值之間用“:”連接，多個“鍵值對”之間用“;”進(jìn)行分?隔。為了讓網(wǎng)頁的色彩表現(xiàn)更出色，我們很有必要系統(tǒng)梳理CSS中顏色的表示方式，具體有以下3種。如red、green、blue等如#FF0000、#FF6600、#29D794等。[CT)]如紅色可以用rgb(255,0,0)或rgb(100%,0%,0%)來表示。預(yù)定義的顏色值十六進(jìn)制顏色值[CT(]RGB代碼1.2
CSS基礎(chǔ)CSS樣式有4種引入方式：1.2.3
CSS規(guī)則及引用方式行內(nèi)式也被稱為內(nèi)聯(lián)式，它通過標(biāo)簽的style屬性設(shè)置標(biāo)簽的樣式。行內(nèi)式的基本語法格式如下：
<標(biāo)簽名style="屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;"…>內(nèi)容</標(biāo)簽名>行內(nèi)式01內(nèi)嵌式是將CSS代碼集中寫在HTML文件的<head>標(biāo)簽中，并用<style>標(biāo)簽定義。內(nèi)嵌式的基本語法格式如下：內(nèi)嵌式02<head><styletype="text/css">選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;…}</style></head>1.2
CSS基礎(chǔ)<h1style="font-size:20px;color:red;">使用CSS行內(nèi)式修飾一級標(biāo)題的字體大小和顏色
</h1>案例
行內(nèi)式的使用（資源位置：項目1\源文件\cssDemo01.html）使用瀏覽器打開文件cssDemo01.html，顯示結(jié)果如圖所?示。<head><title>內(nèi)嵌式</title> <styletype="text/css"> h2{text-align:center;} div{border:1pxsolid#CCC;width:300px;height:80px;color:purple;text-align:center;} </style></head><body> <h2>內(nèi)嵌式CSS樣式</h2> <div>使用style標(biāo)簽可定義內(nèi)嵌式CSS樣式表，style標(biāo)簽一般位于head頭部標(biāo)簽中，title標(biāo)簽之?后。</div></body>案例
內(nèi)嵌式的使用（資源位置：項目1\源文件\cssDemo02.html）行內(nèi)式的使用1.2
CSS基礎(chǔ)使用瀏覽器打開文件cssDemo02.html，顯示結(jié)果如圖所?示。內(nèi)嵌式的使用鏈入式也叫外鏈?zhǔn)?，它將所有的樣式放在一個或多個以.css為擴(kuò)展名的外部樣式文件中，通過<link>標(biāo)簽將外部CSS文件鏈接到HTML文件中。鏈入式的基本語法格式如下：鏈入式03<head><linkhref="CSS文件的路徑"type="text/css"rel="stylesheet"/></head>下面通過一個案例演示鏈入式的使?用。1.2
CSS基礎(chǔ)創(chuàng)建CSS文件。在文件夾中創(chuàng)建一個名稱為cssDemo03.css的樣式文件，使用記事本打開該文件后，在文件中編寫如下代?碼。<styletype="text/css">/*定義<h2>標(biāo)簽居中對齊*/h2{text-align:center;}/*定義<div>標(biāo)簽樣式*/div{border:1pxsolid#CCC;width:300px;height:80px;color:purple;text-align:center;}</style>創(chuàng)建HTML文件<head><title>使用鏈入式</title><linkhref="cssDemo03.css"type="text/css"rel="stylesheet"/></head><body><h2>鏈入式CSS樣式</h2><div>鏈入式也叫外鏈?zhǔn)?，外鏈?zhǔn)绞菍⑺械臉邮椒旁谝粋€或多個以.css為擴(kuò)展名的外部樣式表文件?中。</div></body>鏈入式的使用1.2
CSS基礎(chǔ)導(dǎo)入式與鏈入式相同，都是針對外部CSS文件的引入方式。在HTML文件的<head>標(biāo)簽中添加<style>標(biāo)簽，并在<style>標(biāo)簽內(nèi)的開頭處使用@import語句，即可導(dǎo)入外部CSS文件。導(dǎo)入式的基本語法格式如下：導(dǎo)入式04<styletype="text/css">@import"CSS文件路徑";或@importurl(CSS文件路徑);/*在此還可以存放其他CSS樣式*/</style>如果想在上個案例中使用導(dǎo)入式，只需要把HTML文件的<link>標(biāo)簽替換?成。<styletype="text/css">@import"cssDemo03.css";</style><styletype="text/css">@importurl(cssDemo03.css);</style>或者1.2
CSS基礎(chǔ)1.2.4CSS選擇器標(biāo)簽選擇器將HTML標(biāo)簽名作為選擇依據(jù)，按標(biāo)簽名分類，為頁面中某一類標(biāo)簽指定統(tǒng)一的樣式。標(biāo)簽選擇器的基本語法格式：標(biāo)簽名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;…}標(biāo)簽選擇器01類選擇器使用“.”進(jìn)行標(biāo)識，后面緊跟類名。類選擇器的基本語法格式：
.類名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;…}類選擇器02id選擇器使用“#”進(jìn)行標(biāo)識，后面緊跟id名。id選擇器的基本語法格式：
#id名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;…}id選擇器031.2
CSS基礎(chǔ)通配符選擇器使用“*”進(jìn)行標(biāo)識，它是4種選擇器中作用范圍最廣的，能匹配頁面中所有的元素。通配符選擇器的基本語法格式如下：*{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;…}通配符選擇器04下面通過一個案例演示選擇器的使用。在文件夾中創(chuàng)建一個名稱為cssDemo04.html的HTML文件，其<head>、<body>標(biāo)簽代碼如下所?示。<head> <title>選擇器</title> <styletype="text/css"> /*類選擇器*/ .red{color:red;} .green{color:green;} .font18{font-size:18px;} /*id選擇器*/ #bold{font-weight:bold;} #font24{font-size:24px;} </style></head>案例
選擇器的使用（資源位置：項目1\源文件\cssDemo04.html）<body> <!--類選擇器的使用--> <h1class="red">標(biāo)題一：class="red"，設(shè)置文字為紅色。</h1> <pclass="greenfont18">段落一:class="greenfont18",設(shè)置文字為綠色，字號為18px。</p> <pclass="redfont18">段落二:class="redfont18",設(shè)置文字為紅色，字號為18px。</p> <!--id選擇器的使用--> <pid="bold">段落1：id="bold"，設(shè)置粗體文字。</p> <pid="font24">段落2：id="font24"，設(shè)置字號為24px。</p> <pid="font24">段落3：id="font24"，設(shè)置字號為24px。</p> <pid="boldfont24">段落4：id="boldfont24"，同時設(shè)置粗體文字和字號為24px。</p></body>1.2
CSS基礎(chǔ)使用瀏覽器打開文件cssDemo04.html，顯示結(jié)果如圖所示?？梢园l(fā)現(xiàn)“段落4”的文字內(nèi)容并沒有被加粗，字號也沒有調(diào)整為24px。這是因為id不支持多個值，代碼中的boldfont24會被視為一個整體id。選擇器的使用屬性功能描述margin用于指定元素的外邊距，也就是元素與元素之間的距離。該屬性可指定1~4個屬性值，各屬性值之間以空格分隔padding用于指定元素的內(nèi)邊距，也就是元素的內(nèi)容與元素之間的邊框之間的距離。該屬性可指定1~4個屬性值，各屬性值之間以空格分隔background用于指定背景顏色、背景圖片、背景圖片的排列方式、是否固定背景圖片和背景圖片的位置。該屬性可指定多個屬性值，各屬性值之間以空格分隔，沒有先后順序font-family用于指定字體border用于指定邊框的寬度、邊框的樣式和邊框的顏色。該屬性可以指定多個屬性值，各屬性值之間以空格分隔，沒有先后順序font用于指定字體樣式、小型的大寫字體、字體粗細(xì)、文字的大小、行間距和文字的字體表CSS常用屬性1.2
CSS基礎(chǔ)屬性功能描述height用于指定對象的高度line-height用于指定行間距，所謂行間距就是行與行之間的距離，即字符的垂直間距，也稱為行高color用于指定文本的顏色text-align用于指定文本的對齊方式text-decoration用于指定文本的裝飾樣式，其屬性值包括line-through（刪除線）、overline（上畫線）、underline（下畫線）、blink（閃爍效果，使用Firefox和Opera瀏覽器可以看到效果）和none（無效果）等vertical-align用于指定元素的垂直對齊方式。僅適用于行內(nèi)元素和表格單元格display用于指定元素的顯示形式續(xù)表1.3JavaScript基礎(chǔ)1．JavaScript的組成1.3.1JavaScript概述JavaScript由ECMAScript、DOM（DocumentObjectModel，文檔對象模型）、BOM（BrowserObjectModel，瀏覽器對象模型）3部分組成。下面對這3個部分進(jìn)行簡單講?解。ECMAScriptECMAScript規(guī)定了JavaScript的編程語法和核心內(nèi)容，是所有瀏覽器廠商共同遵守的一套JavaScript語法標(biāo)?準(zhǔn)。DOM是W3C推薦的處理可擴(kuò)展標(biāo)簽語言的標(biāo)準(zhǔn)編程接口，通過DOM接口，可以對頁面中的各種元素進(jìn)行操作（如調(diào)整元素的大小、位置、顏色等）。BOM提供了獨立于內(nèi)容的、可以與瀏覽器窗口進(jìn)行互動的對象結(jié)構(gòu)。
通過BOM可以對瀏覽器窗口進(jìn)行操作（如彈出對話框、控制瀏覽器頁面跳轉(zhuǎn)等）。1.3JavaScript基礎(chǔ)2．JavaScript代碼的引入方式1.3.1JavaScript概述行內(nèi)式是指將單行或少量的JavaScript代碼寫在HTML標(biāo)簽的事件屬性中。行內(nèi)式01內(nèi)嵌式是指在HTML文件中，可以通過<script>標(biāo)簽以及其相關(guān)屬性引入JavaScript代碼。當(dāng)瀏覽器讀取到<script>標(biāo)簽時，就會去解釋并執(zhí)行其中的JavaScript代碼。內(nèi)嵌式02外鏈?zhǔn)绞侵笇avaScript代碼寫在一個單獨的文件中，一般使用“.js”作為文件的擴(kuò)展名，在HTML文件中使用<script>標(biāo)簽引入該文件。<scripttype="text/javascript"src="JavaScript文件的路徑"></script>外鏈?zhǔn)?31.3JavaScript基礎(chǔ)案例JavaScript行內(nèi)式的使用（資源位置：項目1\源文件\JavaScriptDemo01.html）<head><title>JavaScript行內(nèi)式</title></head><body><inputtype="button"value="點我"onclick="alert('行內(nèi)式')"/></body>使用瀏覽器打開文件JavaScriptDemo01.html，顯示結(jié)果如圖所?示。單擊“點我”按鈕后會彈出一個提示框，如圖所?示。JavaScript行內(nèi)式的使用單擊“點我”按鈕后彈出的對話框1.3JavaScript基礎(chǔ)案例JavaScript內(nèi)嵌式的使用（資源位置：項目1\源文件\JavaScriptDemo02.html）<head><title>JavaScript內(nèi)嵌式</title><scripttype="text/javascript">alert('內(nèi)嵌式');</script></head><body></body>下面通過一個案例演示JavaScript外鏈?zhǔn)降氖?用。JavaScript內(nèi)嵌式的使用
在文件夾中創(chuàng)建一個名稱為JavaScriptDemo03.js的JavaScript文件，其代碼如下所?示。alert('外鏈?zhǔn)?);案例JavaScript外鏈?zhǔn)降氖褂茫ㄙY源位置：項目1\源文件\JavaScriptDemo03.js）在文件夾中創(chuàng)建一個名稱為JavaScriptDemo03.html的HTML文件，其代碼如下所?示。1.3JavaScript基礎(chǔ)<head><title>JavaScript外鏈?zhǔn)?lt;/title><scripttype="text/javascript"src="JavaScriptDemo03.js"></script></head><body></body>JavaScript外鏈?zhǔn)降氖褂?．JavaScript數(shù)據(jù)類型類型含義說明Number數(shù)值型數(shù)值型數(shù)據(jù)不區(qū)分整型數(shù)據(jù)和浮點型數(shù)據(jù)，數(shù)值型數(shù)據(jù)不用引號標(biāo)識String字符串類型字符串是用單引號或雙引號標(biāo)識的一個或多個字符Boolean布爾類型只有true或false兩個值Object對象類型一組數(shù)據(jù)和功能的鍵值對集合Null空類型沒有任何值Undefined未定義類型指變量被創(chuàng)建，但未賦值時所具有的類型1.3JavaScript基礎(chǔ)4．JavaScript變量聲明變量的語法格式如下所?示。varnumber=30;varstr="百度一下";5．JavaScript運算符在JavaScript中，運算符也稱為操作符，是用于實現(xiàn)賦值、比較和執(zhí)行算術(shù)運算等操作的符號。算術(shù)運算符算術(shù)運算符描述+加運算符，實現(xiàn)加法運算-減運算符，實現(xiàn)減法運算*乘運算符，實現(xiàn)乘法運算/除運算符，實現(xiàn)除法運算++自增運算符，該運算符有i++（在使用i之后，使i的值加1）和++i（在使用i之前，先使i的值加1）兩種使用方式--自減運算符，該運算符有i--（在使用i之后，使i的值減1）和--i（在使用i之前，先使i的值減1）兩種使用方式1.3JavaScript基礎(chǔ)比較運算符比較運算符描述示例結(jié)果<小于3<3false>大于3>3false<=小于或等于3<=3true>=大于或等于3>=3true==等于，只根據(jù)表面值進(jìn)行判斷，不涉及數(shù)據(jù)類型3==2false!=不等于，只根據(jù)表面值進(jìn)行判斷，不涉及數(shù)據(jù)類型3!=2true邏輯運算符邏輯運算符描述&&邏輯與，只有當(dāng)數(shù)a、b的值都為true時，a&&b的值才為true；否則為false||邏輯或，只有當(dāng)數(shù)a、b的值都為false時，a||b的值才為false；否則為true!邏輯非，!true的值為false，而!false的值為true1.3JavaScript基礎(chǔ)賦值運算符賦值運算符描述=實現(xiàn)賦值運算，例如，username="name"+=實現(xiàn)加等于運算，例如，a+=b相當(dāng)于a=a+b-=實現(xiàn)減等于運算，例如，a-=b相當(dāng)于a=a-b*=實現(xiàn)乘等于運算，例如，a*=b相當(dāng)于a=a*b/=實現(xiàn)除等于運算，例如，a/=b相當(dāng)于a=a/b%=實現(xiàn)余等于運算，例如，a%=b相當(dāng)于a=a%b三元運算符三元運算符又叫三目運算符。三元運算符的語法格式：條件表達(dá)式?表達(dá)式1:表達(dá)式2下面通過一個案例演示JavaScript三元運算符的使用。在文件夾中創(chuàng)建一個名稱為JavaScriptDemo04.html的HTML文件，其代碼如下所?示。<scripttype="text/javascript">vara=5;varb=5;alert((a==b)?true:false);</script>1.3JavaScript基礎(chǔ)6．if條件語句條件語句是對語句中不同的條件進(jìn)行判斷，進(jìn)而執(zhí)行不同的操作的語句。條件語句中較為常用的是if判斷語句，它與Java語言中的if判斷語句相似，通過判斷條件表達(dá)式的值為true或者false來確定是否執(zhí)行某一條語句。單向判斷語句是結(jié)構(gòu)最簡單的if條件語句，如果程序中存在絕對不執(zhí)行某些指令的情況，就可以使用單向判斷語句，其語法格式如下：（1）單向判斷語句雙向判斷語句是if條件語句的基礎(chǔ)形式，其語法格式如下：（2）雙向判斷語句多向判斷語句是根據(jù)不同條件表達(dá)式的結(jié)果執(zhí)行相應(yīng)的語句，其語法格式如下：（3）多向判斷語句if(條件表達(dá)示){執(zhí)行語句}if(條件表達(dá)式1){執(zhí)行語句1}else{執(zhí)行語句2}if(條件表達(dá)式1){執(zhí)行語句1}elseif(條件表達(dá)式2){執(zhí)行語句2}elseif(條件表達(dá)式3){執(zhí)行語句3}...1.3JavaScript基礎(chǔ)1.3.2JavaScript主要特點JavaScript在客戶端運行，這意味著它是在用戶的計算機(jī)上運行的，而不是在服務(wù)器上運行的。這使得網(wǎng)頁可以快速響應(yīng)用戶的操作，而不需要等待服務(wù)器響?應(yīng)。JavaScript是動態(tài)類型的語言，這意味著我們不需要提前聲明變量的類型。例如，可以將字符串賦給變量，然后程序運行的過程，將該變量更改為數(shù)值型變?量。JavaScript是一種面向?qū)ο蟮恼Z言，這意味著我們可以使用面向?qū)ο缶幊碳夹g(shù)（如繼承和封裝）。JavaScript是事件驅(qū)動的語言，這意味著它能對用戶的操作（如單擊或移動鼠標(biāo)指針）等事件做出響應(yīng)，從而使得網(wǎng)頁可以根據(jù)用戶的操作進(jìn)行動態(tài)更?改。JavaScript是一種解釋型語言，它在運行時解釋代碼，不需要預(yù)先編譯。這意味著我們可以方便地更改和運行代?碼。JavaScript不僅用能于Web開發(fā)，還能用于創(chuàng)建復(fù)雜的單頁應(yīng)用程序、游戲等。它與HTML、CSS并稱Web開發(fā)的三大核心技?術(shù)。JavaScript可以與多種技術(shù)集成，如HTML、CSS、DOM、XML（ExtensibleMarkupLanguage，可擴(kuò)展標(biāo)記語言）、Ajax（AsynchronousJavaScriptandXML，異步JavaScript和XML）等，這使得它成為Web開發(fā)中最常用的語言之?一。1.3JavaScript基礎(chǔ)1.3.3DOM相關(guān)知識W3C將DOM標(biāo)準(zhǔn)分為3`個部分：核心DOM、XMLDOM和HTMLDOM。其中，核心DOM是針對任何結(jié)構(gòu)化文件的標(biāo)準(zhǔn)模型，XMLDOM是針對XML文件的標(biāo)準(zhǔn)模型，而HTMLDOM是針對HTML文件的標(biāo)準(zhǔn)模?型。HTMLDOM以樹形結(jié)構(gòu)呈現(xiàn)樹的根節(jié)點是文件（Document）對象，該對象通過名為documentElement的屬性引用，表示文件根元素的Element對象。在HTML文件中，文件根元素的Element對象對應(yīng)html元素，head和body元素可以看作樹的枝?干。HTMLDOM樹結(jié)構(gòu)1.3JavaScript基礎(chǔ)1.3.3DOM相關(guān)知識文檔節(jié)點之間的關(guān)系分為3種，具體如?下。直接位于某一個節(jié)點之下的節(jié)點被稱為該節(jié)點的子節(jié)點（childNode）。例如，元素title位于元素head之下，所以元素head就是元素title的子節(jié)?點。01直接位于某一個節(jié)點之上的節(jié)點被稱為該節(jié)點的父節(jié)點（parentNode）。例如，元素head位于元素title之上，所以元素head就是元素title的父節(jié)?點。02具有相同父節(jié)點的兩個節(jié)點被稱為兄弟節(jié)點（siblingNode）。例如，元素h1和元素a就是兄弟節(jié)?點。031.3JavaScript基礎(chǔ)訪問節(jié)點在DOM中，HTML文件的各個節(jié)點被視為各種類型的Node對?象。屬性返回值的類型描述parentNodeNode返回節(jié)點的父節(jié)點，沒有父節(jié)點則返回nullchildNodesNodeList返回節(jié)點的所有子節(jié)點的集合firstChildNode返回節(jié)點的首個子節(jié)點，沒有則返回nulllastChildNode返回節(jié)點的最后一個子節(jié)點，沒有則返回null獲取文檔中的指定元素可以通過元素的id屬性獲取元素。Document的getElementById()方法可以通過元素的id屬性獲取元素。例如，獲取id屬性值為memberId的元素的代碼如下所?示。document.getElementById("memberId");1.3JavaScript基礎(chǔ)1.3.4
BOM相關(guān)知識BOM的核心對象為Window對象。Window對象有很多內(nèi)置對象，這些對象用于訪問瀏覽器。常用的BOM對象包含以下幾?個。Window對象：頂層對象，表示瀏覽器窗?口。Navigator對象：包含瀏覽器的信?息。History對象：包含訪問過的
URL信?息。Location對象：包含當(dāng)前
URL
的信?息。Screen對象：包含客戶端顯示屏的信?息。1.3JavaScript基礎(chǔ)Window對象的常用屬性屬性名稱描述Closed返回窗口是否已被關(guān)閉document對
Document
對象的只讀引用history對
History
對象的只讀引用innerHeight返回窗口的文檔顯示區(qū)的高度innerWidth返回窗口的文檔顯示區(qū)的寬度length返回窗口中的框架數(shù)量location控制URL導(dǎo)航的對象onload加載事件有兩種注冊方式，分別如下所?示。//方式1window.onload=function(){};//方式2window.addEventListener('load',function(){});1.4
Bootstrap基礎(chǔ)1.4.1
Bootstrap框架簡介Bootstrap是由Twitter（現(xiàn)已更名為X）公司的設(shè)計師馬克·奧托（MarkOtto）和雅各布·
桑頓（JacobThornton）等人合作開發(fā)的開源框架，該框架基于HTML、CSS和JavaScript語言編寫，于2011年8月在GitHub上發(fā)布，一經(jīng)推出就頗受歡迎，并成為GitHub上的熱門開源項目。Bootstrap具有簡單、靈活的特性，能夠幫助開發(fā)人員快速搭建前端頁面，常用于開發(fā)響應(yīng)式布局和移動設(shè)備優(yōu)先的Web項目。Bootstrap框架與HTML、CSS和JavaScript技術(shù)結(jié)合，可以構(gòu)建出非常優(yōu)雅的前端頁面，而且占用的資源較少。1.4
Bootstrap基礎(chǔ)1.4.2
Bootstrap優(yōu)點易于使用：Bootstrap提供了簡潔明了的API（ApplicationProgramInterface，應(yīng)用程序接口），使開發(fā)人員可以快速地構(gòu)建響應(yīng)式布局和移動設(shè)備優(yōu)先的網(wǎng)站。響應(yīng)式布局：Bootstrap的響應(yīng)式布局設(shè)計使得網(wǎng)站能夠自適應(yīng)不同設(shè)備的屏幕尺寸，為用戶提供良好的體?驗。豐富的組件：Bootstrap提供了許多內(nèi)置的組件（如導(dǎo)航、下拉菜單、警告框、彈出框等），這些組件易于使用，并且具有一致的樣式，使得開發(fā)人員可以快速構(gòu)建出美觀的界?面。完善的官方文檔：Bootstrap的官方文檔非常完善，提供了詳細(xì)的示例和教程，旨在幫助開發(fā)人員快速上?手。高度定制性：雖然Bootstrap提供了許多內(nèi)置的組件和樣式，但它也允許開發(fā)人員進(jìn)行高度定制，以滿足項目的特定需?求。社區(qū)支持：Bootstrap擁有龐大的社區(qū)，開發(fā)人員可以在社區(qū)中尋求幫助，或者分享自己的開發(fā)經(jīng)驗和技?巧。兼容性：采用Bootstrap編寫的代碼兼容性好，能在多種瀏覽器中良好地運?行。1.4
Bootstrap基礎(chǔ)1.4.3
Bootstrap框架下載與引入要使用Bootstrap框架進(jìn)行開發(fā)，需要先對Bootstrap進(jìn)行下載與引入，下面介紹Bootstrap框架的下載步驟以及引入方?式。step01打開瀏覽器，訪問Bootstrap的官網(wǎng)，如圖所?示。step02單擊“下載Bootstrap”按鈕，進(jìn)入下載頁面，如圖所?示。Bootstrap框架官網(wǎng)Bootstrap框架下載頁面1.4
Bootstrap基礎(chǔ)1.4.3
Bootstrap框架下載與引入下載完成后，解壓文件，將圖所示的兩個文件放到項目所在的目錄?中。Bootstrap源碼位置（資源位置：項目1\源文件\bootstrap.min.css；項目1\源文件\bootstrap.min.js）Bootstrap源代碼step03引入Bootstrap的實例代碼如?下。<!--引入BootstrapCSS文件--><linkrel="stylesheet"href="bootstrap.min.css"><!--引入BootstrapJavaScript文件--><linkhref="bootstrap.min.js">1.4
Bootstrap基礎(chǔ)1.4.4
Bootstrap常用組件1．按鈕下面通過一個案例演示Bootstrap按鈕的使用。在文件夾中創(chuàng)建一個名稱為BootstrapDemo01.html的HTML文件，其<head>、<body>代碼如下所?示。案例
Bootstrap按鈕的使用（資源位置：項目1\源文件\BootstrapDemo01.html）<head> <title>Bootstrap按鈕</title> <!--引入BootstrapCSS文件--> <linkrel="stylesheet"href="bootstrap.min.css"> <!--引入BootstrapJavaScript文件--> <linkhref="bootstrap.min.js"></head><body> <buttontype="button"class="btnbtn-primary">主按鈕</button></body>Bootstrap按鈕1.4
Bootstrap基礎(chǔ)實現(xiàn)Bootstrap按鈕中的文本內(nèi)容不換行（資源位置：項目
1\源文件\BootstrapDemo02.html）<head><style>button{width:120px;}</style><title>Bootstrap按鈕中的文本內(nèi)容不換行</title><linkrel="stylesheet"href="bootstrap.min.css"></head><body><button
type="button"
class="btn
btn-primarytext-nowrap">
主按鈕主按鈕主按鈕</button></body>Bootstrap按鈕中的文本內(nèi)容不換行
1.4
Bootstrap基礎(chǔ)調(diào)節(jié)Bootstrap按鈕的大?。ㄙY源位置：項目1\源文件\BootstrapDemo03.html）<head><style>button{width:120px;}</style><title>調(diào)節(jié)Bootstrap按鈕的大小</title><linkrel="stylesheet"href="bootstrap.min.css"></head><body><buttontype="button"class="btnbtn-primarybtn-lg">主按鈕</button><buttontype="button"class="btnbtn-primarybtn-sm">主按鈕</button></body>調(diào)節(jié)Bootstrap按鈕的大小1.4
Bootstrap基礎(chǔ)1.4.4
Bootstrap常用組件2．導(dǎo)航普通導(dǎo)航案例
Bootstrap普通導(dǎo)航的使用（資源位置：項目1\源文件\BootstrapDemo04.html）<head><title>Bootstrap普通導(dǎo)航</title><linkrel="stylesheet"href="bootstrap.min.css"></head><body><!--普通導(dǎo)航--><ulclass="nav"><liclass="nav-item"><aclass="nav-link"href="#">首頁</a></li><liclass="nav-item"><aclass="nav-link"href="#">簡介</a></li><liclass="nav-item"><aclass="nav-link"href="#">商務(wù)</a></li><liclass="nav-item"><aclass="nav-link"href="#">關(guān)于我們</a></li></ul></body>Bootstrap普通導(dǎo)航在文件夾中創(chuàng)建一個名稱為BootstrapDemo04.html的HTML文件，其<head>、<body>標(biāo)簽代碼如下所?示。1.4
Bootstrap基礎(chǔ)面包屑導(dǎo)航案例
Bootstrap面包屑導(dǎo)航的使用（資源位置：項目1\源文件\BootstrapDemo05.html）<head><title>Bootstrap面包屑導(dǎo)航</title><linkrel="stylesheet"href="bootstrap.min.css"></head><body><!--面包屑導(dǎo)航--><navaria-label="breadcrumb"><olclass="breadcrumb"><liclass="breadcrumb-item"><ahref="#">首頁</a></li><liclass="breadcrumb-item"><ahref="#">簡介</a></li><liclass="breadcrumb-item"><ahref="#">商務(wù)</a></li><liclass="breadcrumb-item"><ahref="#">關(guān)于我們</a></li></ol></nav></body>Bootstrap面包屑導(dǎo)航下面通過一個案例演示Bootstrap面包屑導(dǎo)航的使用。在文件夾中創(chuàng)建一個名稱為BootstrapDemo05.html的HTML文件，其<head>、<body>標(biāo)簽代碼如下所?示。1.4
Bootstrap基礎(chǔ)1.4.4
Bootstrap常用組件3．列表下面通過一個案例演示Bootstrap列表的使用。在文件夾中創(chuàng)建一個名稱為BootstrapDemo06.html的HTML文件，其<head>、<body>標(biāo)簽代碼如下所?示。案例
Bootstrap列表的使用（資源位置：項目1\源文件\BootstrapDemo06.html）<head><title>Bootstrap列表</title><linkrel="stylesheet"href="bootstrap.min.css"></head><body><!--列表組--><ulclass="list-group"><liclass="list-group-itemactive">列表1</li><liclass="list-group-item">列表2</li><liclass="list-group-item">列表3</li><liclass="list-group-item">列表4</li><liclass="list-group-item">列表5</li></ul></body>Bootstrap列表1.4
Bootstrap基礎(chǔ)1.4.4
Bootstrap常用組件4．表單下面通過一個案例演示Bootstrap表單的使用。在文件夾中創(chuàng)建一個名稱為BootstrapDemo07.html的HTML文件，其<head>、<body>標(biāo)簽代碼如下所?示。案例
Bootstrap表單的使用（資源位置：項目1\源文件\BootstrapDemo07.html）<head><title>Bootstrap表單</title><linkrel="stylesheet"href="bootstrap.min.css"></head><body><!--表單--><formaction="#"><divclass="form-group"><labelfor="User">用戶名</label><inputtype="text"class="form-control"id="User"><labelfor="Password">密碼</label><inputtype="password"class="form-control"id="Password"> <labelfor="Phone1">手機(jī)號碼</label><inputtype="phone"class="form-control"id="phone"><labelfor="Email1">郵箱地址</label><inputtype="email"class="form-control"id="Email1"></div><buttontype="submit"class="btnbtn-primary">提交</button></form></body>1.4
Bootstrap基礎(chǔ)Bootstrap表單【商業(yè)實例】仿公司OA管理系統(tǒng)，使用HTML、CSS技術(shù)完成登錄頁面設(shè)計任務(wù)一創(chuàng)建登錄頁面（1）在文件夾中，創(chuàng)建名為login.html的文?件。（2）引入Bootstrap框架的css文件。具體代碼如下：任務(wù)二使用本單元相關(guān)知識，實現(xiàn)登錄頁面功能實現(xiàn)登錄頁面功能需要編寫<body>標(biāo)簽的內(nèi)容，主要分為以下幾個步驟。（資源位置：項目1\擴(kuò)展訓(xùn)練\商業(yè)實例\login.html）<linkrel="stylesheet"href="bootstrap.min.css">【商業(yè)實例】仿公司OA管理系統(tǒng)，使用HTML、CSS技術(shù)完成登錄頁面設(shè)計<!--面包屑導(dǎo)航--><navaria-label="breadcrumb"> <olclass="breadcrumb"> <liclass="breadcrumb-item"><ahref="#">注冊</a></li> <liclass="breadcrumb-itemactive"aria-current="page">登錄</li> <liclass="breadcrumb-item"><ahref="#">首頁</a></li> <liclass="breadcrumb-item"><ahref="#">簡介</a></li> <liclass="breadcrumb-item"><ahref="#">商務(wù)</a></li> <liclass="breadcrumb-item"><ahref="#">關(guān)于我們</a></li> </ol></nav>step01使用Bootstrap面包屑導(dǎo)航實現(xiàn)導(dǎo)航功能【商業(yè)實例】仿公司OA管理系統(tǒng)，使用HTML、CSS技術(shù)完成登錄頁面設(shè)計step02使用Bootstrap表單實現(xiàn)用戶名輸入框、密碼輸入框和登錄按鈕<h1>XXX公司OA登錄頁面</h1><!--表單--><formaction="#"> <divclass="form-group"> <labelfor="User">用戶名</label> <inputtype="text"class="form-control"id="User"style="width:20%;"> <labelfor="Password">密碼</label> <inputtype="password"class="form-control"id="Password"style="width:20%;"> </div> <buttontype="submit"class="btnbtn-primary"id="login">登錄</button></form>項目小結(jié)本項目深入介紹了網(wǎng)頁開發(fā)會用到的基礎(chǔ)知識。首先介紹了HTML的發(fā)展歷程和特點。隨后，深入介紹了HTML標(biāo)簽，并通過多個案例引導(dǎo)讀者獨立實現(xiàn)HTML頁?面。在CSS基礎(chǔ)部分詳細(xì)介紹了CSS規(guī)則（尤其是，CSS的引入方式）和CSS選擇器，從而使讀者掌握通過CSS優(yōu)化頁面樣式的方?法。在JavaScript基礎(chǔ)部分詳細(xì)介紹了JavaScript的組成和JavaScript代碼的引入方式等知識，并通過多個案例幫助讀者快速入?門。Bootstrap基礎(chǔ)是本項目重點介紹的部分，通過Bootstrap可以很快地構(gòu)建一個頁面，從Bootstrap框架下載與引入，到Bootstrap常用組件，通過多個案例詳細(xì)地為讀者介紹了該框?架。商業(yè)實例和綜合實訓(xùn)展示了本項目所學(xué)知識的應(yīng)用場景，通過創(chuàng)建登錄頁面和實現(xiàn)登錄頁面功能，讀者可以在實際項目中學(xué)習(xí)組件的使
溫馨提示
- 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)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 社區(qū)書記基層治理黨課
- 2025年重慶備考題庫與智慧醫(yī)學(xué)研究院聘用人員招聘備考題庫及答案詳解一套
- 牽引護(hù)理的重要性
- 2025年國家空間科學(xué)中心復(fù)雜航天系統(tǒng)電子備考題庫技術(shù)重點實驗室復(fù)雜系統(tǒng)研制與開發(fā)人員招聘備考題庫完整參考答案詳解
- 2025年湘科研究院招聘專業(yè)技術(shù)人員5名備考題庫及答案詳解一套
- 2026屆云南省景東縣二中高二數(shù)學(xué)第一學(xué)期期末質(zhì)量跟蹤監(jiān)視模擬試題含解析
- 環(huán)保話題下的我們議論文探討環(huán)保重要性（10篇）
- 國土三調(diào)合同范本
- 固體廢物合同范本
- 搬運儀器合同范本
- 2025年居家養(yǎng)老助餐合同協(xié)議
- 石材行業(yè)合同范本
- 生產(chǎn)性采購管理制度(3篇)
- 2026年遠(yuǎn)程超聲診斷系統(tǒng)服務(wù)合同
- 中醫(yī)藥轉(zhuǎn)化研究中的專利布局策略
- COPD巨噬細(xì)胞精準(zhǔn)調(diào)控策略
- 網(wǎng)店代發(fā)合作合同范本
- 心源性休克的液體復(fù)蘇挑戰(zhàn)與個體化方案
- 基礎(chǔ)部分6se70變頻柜-整流單元
- GB∕T 37092-2018 信息安全技術(shù)密碼模塊安全要求
- 2022年《內(nèi)蒙古自治區(qū)建設(shè)工程費用定額》取費說明
評論
0/150
提交評論