HTML5

CSS3

JavaScript網(wǎng)頁設計基礎與實戰(zhàn)配套課件初心至善匠心育人目錄第1章初識Web前端第2章HTML構(gòu)建基本網(wǎng)頁

第3章使用列表與表格布局第4章設計網(wǎng)頁頁面第5章表單與表單效果設計第6章實現(xiàn)CSS3動畫第7章JavaScript基礎應用第8章實現(xiàn)HTML5應用第9章JavaScript特效第10章移動端布局和響應式開發(fā)第1章

初識Web前端1.1

Web前端發(fā)展歷程1.2

Web開發(fā)的核心技術1.3

Web開發(fā)工具學習目標LEARNING

OBJECTIVES了解Web前端發(fā)展歷程理解Web前端開發(fā)的3個核心技術的概念掌握HTML5、CSS3和JavaScript的基礎知識熟練使用Web前端開發(fā)工具初心至善匠心育人引言初心至善匠心育人1994年蒂姆·伯納斯·李（Tim·Berners·Lee）創(chuàng)建萬維網(wǎng)聯(lián)盟（WorldWide

Web

Consortium，簡稱W3C），這是Web技術領域最具權(quán)威和影響力的國際中立性技術標準機構(gòu)，它最重要的工作是制定Web規(guī)范，這些規(guī)范描述了Web的通信協(xié)議（比如HTML和XHTML）和其他的構(gòu)建模塊，有效促進了Web技術的互相兼容。Web前端因其開發(fā)效率高，網(wǎng)頁效果美觀，用戶體驗感好，現(xiàn)已被廣泛應用。在學習Web前端之前，應該“知己知彼”了解其發(fā)展歷程。在學習中需要掌握Web前端開發(fā)的3個核心技術HTML5、CSS3和JavaScript，這是Web前端必學的知識體系。在開發(fā)過程中熟練使用Web前端開發(fā)工具，可以快速且方便的編寫網(wǎng)頁代碼。目錄Contents1.1初心至善匠心育人Web前端發(fā)展歷程Web前端概述Web前端發(fā)展簡史1.1

Web前端發(fā)展歷程初心至善匠心育人1.1.1

Web前端概述萬維網(wǎng)（World

Wide

Web，亦作Web、WWW、W3），是一種基于超文本和超文本傳輸協(xié)議（HyperText

Transfer

Protocol，簡稱HTTP）的，全球性的，動態(tài)交互的，跨平臺的分布式圖形信息系統(tǒng)。在這個系統(tǒng)中，每個有價值的事物被稱為“資源”，并且由一個全局“統(tǒng)一資源標識符（Uniform

Resource

Locator，簡稱URL）”標識，這些資源由超文本輸協(xié)議傳送給用戶，而用戶通過點擊鏈接來獲得資源。前端開發(fā)是創(chuàng)建Web頁面或APP等前端界面呈現(xiàn)給用戶的過程，通過HTML（Hyper

Text

Mark-up

Language，超文本標記語言）、CSS（Cascading

Style

Sheets，層疊樣式表）和JavaScript以及衍生出來的各種技術、框架、解決方案來實現(xiàn)互聯(lián)網(wǎng)產(chǎn)品的用戶界面交互。1.1

Web前端發(fā)展歷程初心至善匠心育人Web前端概述在互聯(lián)網(wǎng)的發(fā)展過程中，Web前端發(fā)展初期HTML技術只能展示簡單的網(wǎng)頁，當時被稱為網(wǎng)頁制作，十分不易于開發(fā)者維護與更新網(wǎng)站。

Web1.0：網(wǎng)頁制作是Web

1.0時代的產(chǎn)物，那時網(wǎng)站的主要內(nèi)容都是靜態(tài)的，用戶使用網(wǎng)站的行為也以瀏覽為主Web2.0：互聯(lián)網(wǎng)進入Web

2.0時代以后，涌現(xiàn)出大量的類似于桌面軟件的Web應用，用戶不僅能瀏覽網(wǎng)頁，還能對網(wǎng)頁上的內(nèi)容進行操作。網(wǎng)站的前端因此發(fā)生變化，網(wǎng)頁不再只是單一的承載文字和圖片，各種媒體的應用使網(wǎng)頁內(nèi)容變得更豐富多彩，同時也提升了用戶體驗感1.1

Web前端發(fā)展歷程1.1.2

Web前端發(fā)展簡史靜態(tài)頁面階段1994年12月，W3C在伯納斯·李的主持下成立，標志著萬維網(wǎng)進入了標準化發(fā)展的階段。這個階段的網(wǎng)頁還非常地原始，主要以HTML為主，是純靜態(tài)的只讀網(wǎng)頁，被稱為Web1.0時代。JavaScript誕生1995年，網(wǎng)景通信公司（Netscape

Communications

Corporation，亦稱Netscape）設計了JavaScript腳本語言，并集成到Navigator2.0版本中。JavaScript主導了W3C的官方標準，成功實現(xiàn)JavaScript的標準走向國際。初心至善匠心育人1.1

Web前端發(fā)展歷程1.1.2

Web前端發(fā)展簡史3.動態(tài)頁面的發(fā)展JavaScript興起以后，網(wǎng)頁可以顯示出浮動廣告之類的動態(tài)效果，但這不是動態(tài)網(wǎng)頁。以PHP、JSP和ASP為代表的后端動態(tài)頁面技術的應用才實現(xiàn)動態(tài)交互。4.Ajax開啟Web2.0時代2004年以前的動態(tài)頁面是由后端技術驅(qū)動的，但頻繁的頁面刷新給用戶帶來極差的體驗感。Ajax技術實現(xiàn)了異步HTTP請求，用戶不用專門去等待請求的響應，就可以繼續(xù)瀏覽或操作網(wǎng)頁。Ajax技術開啟了web2.0的時代。初心至善匠心育人1.1

Web前端發(fā)展歷程1.1.2

Web前端發(fā)展簡史前端兼容性框架的出現(xiàn)不同的瀏覽器之間，技術標準會有差異，這樣不利于兼容開發(fā)，于是催生了Dojo、Mooltools、YUIExtJS、JQuery等前端兼容框架，其中2006年誕生的JQuery的應用最為廣泛。HTML5的出現(xiàn)2007年，W3C采納了HTML5規(guī)范草案，并在2008年1月22日正式發(fā)布草案。在HTML5新規(guī)范的指引下，各個瀏覽器廠商不斷改進瀏覽器。2014年10月28日，

W3C正式發(fā)布HTML5.0標準。初心至善匠心育人1.1

Web前端發(fā)展歷程1.1.2

Web前端發(fā)展簡史前端三大框架前端3大主流框架是Angular、Rect和Vue。Angular是一個比較完善的前端框架，包含服務，模板，數(shù)據(jù)雙向綁定，模塊化，路由，過濾器，依賴注入等所有功能。2011年，React誕生，于1013年5月開源，是一個用于構(gòu)建用戶界面的

JavaScript框架，核心思想是封裝組件。2014年，尤雨溪開發(fā)出一套用于構(gòu)建用戶界面的漸進式框架Vue，它能減少不必要的DOM操作和提高渲染效率。ECMAScript6的發(fā)布2015年6月，ECMAScript

6.0發(fā)布，這個版本增加了很多新的語法，更加提升了JavaScript的開發(fā)潛力初心至善匠心育人目錄Contents1.2初心至善匠心育人Web開發(fā)的核心技術HTML5JavaScriptCSS31.2

Web開發(fā)的核心技術Web開發(fā)用到的核心技術有HTML、CSS和JavaScript（簡稱JS），隨著用戶體驗需求的提升，目前開發(fā)者在開發(fā)過程中常用的是升級版的HTML5與CSS3。它們是在原有的基礎上增加一些新的標簽與屬性，基本滿足了開發(fā)需求，為開發(fā)者帶來極大的便利。根據(jù)W3C標準，一個網(wǎng)頁主要由3部分組成：結(jié)構(gòu)（HTML）、表現(xiàn)（CSS）和行為（JavaScript），3者和諧地存在于瀏覽器中。初心至善匠心育人1.2

Web開發(fā)的核心技術1.2.1

HTML5HTML是一種“超文本標記語言”，“超文本”指頁面內(nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素?！俺谋緲擞浾Z言”是標準通用標記語言下的一個應用，也是一種規(guī)范和標準。它通過各類標簽來標記想要顯示的網(wǎng)頁中的各個部分。網(wǎng)頁文件本身是一種文本文件，通過在文本文件中添加標簽，可以告訴瀏覽器如何顯示其中的內(nèi)容，例如，文字如何處理、畫面如何安排、圖片如何顯示等。當前，在Web開發(fā)中，普遍使用的是HTML的最新版本HTML5，HTML5是一個網(wǎng)頁的核心，在一些基本標簽內(nèi)添加內(nèi)容便可完成一個簡單的HTML文件，運行之后即可在瀏覽器中顯示網(wǎng)頁。初心至善匠心育人1.2

Web開發(fā)的核心技術1.2.1

HTML5HTML特點特點初心至善匠心育人簡易性。HTML版本升級采用超集方式，從而更加靈活方便。可擴展。HTML語言應用廣泛，同時帶來了加強功能，增加標識符等要求，HTML采取子類元素的方式，為系統(tǒng)擴展帶來保證。平臺無關性。HTML可以使用在多種平臺上，關聯(lián)性不大。通用性。HTML是基于標準通用標記語言，它允許網(wǎng)頁開發(fā)者建立圖片與文本相結(jié)合的復雜頁面，頁面可被網(wǎng)絡上的任何人使用各種類型的電腦或瀏覽器進行瀏覽。1.2

Web開發(fā)的核心技術1.2.1

HTML5HTML5新特性新特性初心至善匠心育人新的語義元素。HTML5提供了新的元素來創(chuàng)建更好的頁面結(jié)構(gòu)，例如<header>、<nav>、<footer>和<section>。新的表單控件。HTML5擁有多個新的表單輸入類型，這些新特性提供了更好的輸入控制和驗證，例如，數(shù)字（number）和日期（date）。強大的圖像支持。HTML5可使用<canvas>和<svg>標簽通過腳本語言(通常是JavaScript)繪制圖形。強大的多媒體支持。HTML5規(guī)定了在網(wǎng)頁上嵌入視頻和音頻元素的標準，即使用<video>和<audio>元素。強大的新API。1.2

Web開發(fā)的核心技術1.2.1

HTML5文件結(jié)構(gòu)文件基本結(jié)構(gòu)主要由文件聲明（<!DOCTYPEhtml>）、HTML文檔（<html>）、文件頭部（<head>）和文件主體（<body>）4部分構(gòu)成。<!--文件聲明--><!DOCTYPE

html><!--HTML文檔--><html

lang="en"><!--文件頭部--><head><meta

charset="UTF-8"><title>HTML文件</title></head><!--文件主體--><body><!--html文件的注釋，在網(wǎng)頁中不會被解析出來-->一個簡單HTML文件的文件結(jié)構(gòu)</body></html>初心至善匠心育人1.2

Web開發(fā)的核心技術1.2.1

HTML5文件結(jié)構(gòu)1.文件聲明<!DOCTYPE>聲明必須在HTML文件的第一行，位于<html>標簽之前。<!DOCTYPE>聲明不是HTML標簽，它用于向瀏覽器說明當前文件屬于哪種HTML或XHTML標準規(guī)范。<!DOCTYPE>聲明與瀏覽器的兼容性有關，如果沒有<!DOCTYPE>，就會由瀏覽器決定如何展示HTML頁面。<!DOCTYPE

html>是HTML5標準網(wǎng)頁聲明，表示向瀏覽器說明當前文件使用HTML5標準規(guī)范。初心至善匠心育人1.2

Web開發(fā)的核心技術1.2.1

HTML5文件結(jié)構(gòu)2.HTML文檔<html></html>是HTML文件的文檔標簽，<html>是HTML文件開始標簽，

也被稱為根標簽，是指文件的最外層，</html>是HTML文件結(jié)束標簽。網(wǎng)頁的所有內(nèi)容都需要寫在<html></html>標簽里面。<htmllang="en">中的lang屬性用來獲取或設置文檔內(nèi)容的基本語言，"en"表示英文（English）。初心至善匠心育人1.2

Web開發(fā)的核心技術1.2.1

HTML5文件結(jié)構(gòu)3.文件頭部<head></head>是HTML文件的頭部標簽，<head>是HTML文件頭標簽，</head>是HTML文件尾標簽。它用于定義文檔的頭部信息，是所有頭部元素的容器，描述了文件的各種屬性和信息。頭部元素有<meta>、<title>、<script>、<style>、<link>等標簽。<meta>是輔助標簽，用于定義頁面的相關信息，例如，描述頁面的作者、摘要、關鍵詞、版權(quán)、自動刷新等頁面信息。<title></title>是標題標簽，用于定義頁面的標題。<script></script>標簽用于定義客戶端腳本語言。<style></style>標簽用于定義HTML文件的樣式文檔。<link>標簽定義文件與外部資源之間的關系。初心至善匠心育人1.2

Web開發(fā)的核心技術1.2.1

HTML5文件結(jié)構(gòu)4.文件主體<body></body>是主體標簽，<body>是正文內(nèi)容開始標記，</body>是正文內(nèi)容結(jié)束標記。它用于定義文件的內(nèi)容，可包含圖片、文本、視頻、音頻、超鏈接、表格、列表等各種內(nèi)容。在HTML文件中，<!--注釋內(nèi)容-->是HTML文件的注釋，用于標注網(wǎng)頁內(nèi)容的注釋部分，它的主要作用是對代碼進行解釋，給開發(fā)人員作參考，不會被瀏覽器解析和執(zhí)行。初心至善匠心育人1.2

Web開發(fā)的核心技術1.2.1

HTML5標簽和元素1.HTML標簽HTML標簽分為單標簽和雙標簽，單標簽是由一個標簽組成的，例如，有<meta>、<img>、<input>等。HTML標簽大多數(shù)為雙標簽，雙標簽由首標簽和尾標簽構(gòu)成，首標簽格式為<標簽名稱>，尾標簽格式為</標簽名稱>。HTML標簽的語法格式如下。<標簽名稱>內(nèi)容</標簽名稱>初心至善匠心育人1.2

Web開發(fā)的核心技術1.2.1

HTML5標簽和元素2.HTML元素HTML5文件由元素和標簽構(gòu)成。HTML元素指的是從開始標簽（StartTag）到結(jié)束標簽（End

Tag）的所有代碼。整個HTML文件就像是一個元素集合，里面包含了許多元素。在HTML文件中某個元素的語法如下。<標簽名稱 屬性值1=”值1”

屬性值2=”值2”

>內(nèi)容</標簽名稱>初心至善匠心育人1.2

Web開發(fā)的核心技術1.2.2

CSS3CSS是層疊樣式表，一種用于(增強)控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的標記性語言，由W3C定義和維護，使用CSS可以實現(xiàn)網(wǎng)頁內(nèi)

容與呈現(xiàn)的分離，不僅可以提升網(wǎng)頁執(zhí)行效率，更方便后期管理和代碼維護。目前最新版本是CSS3，為W3C的推薦標準。CSS定義如何渲染HTML模型和對象，渲染網(wǎng)頁顯示效果。它可以對網(wǎng)頁中各元素進行定位和布局，具有對模型和對象樣式的編輯能力，不僅能靜態(tài)修飾網(wǎng)頁內(nèi)容，也能結(jié)合諸如JS類的腳本動態(tài)修飾網(wǎng)頁。初心至善匠心育人1.2.2

CSS3CSS可以改變HTML元素的樣式。改變元素樣式我們得先弄清楚3件事：“改變的對象是誰”、“改什么類型的樣式”和“具體改成什么樣子”。改變的對象是誰改什么類型的樣式具體改成什么樣子1.2

Web開發(fā)的核心技術初心至善匠心育人在HTML元素中選擇要改變的對象，需要使用到CSS選擇器。CSS選擇器用于指定、控制CSS要作用的HTML元素，例如ID選擇器是通過ID來選擇標簽。選擇改變HTML元素的具體樣式屬性，需要使用CSS屬性。

CSS屬性是指定選擇符所具有的屬性，例如字體屬性、背景屬性、文本屬性、邊框?qū)傩缘?。指定這個樣式屬性的屬性值，例如字體屬性設置字體的大

小、粗細等，背景屬性設置

內(nèi)容的背景顏色、背景圖片

等1.2

Web開發(fā)的核心技術1.2.2

CSS3CSS特點CSS以HTML語言為基礎，提供了豐富的格式化功能，如字體、顏色、背景和整體排版等，并且網(wǎng)頁設計者可以針對各種可視化瀏覽器設置不同的樣式風格。特點豐富的樣式定義易于使用和修改多頁面應用層疊頁面壓縮初心至善匠心育人1.2

Web開發(fā)的核心技術1.2.2

CSS3CSS3新特性新特性初心至善匠心育人新增選擇器。CSS3新增了結(jié)構(gòu)偽類選擇器、屬性選擇器等。新的邊框效果。CSS3新增了圓角邊框（border-radius）、邊框陰影（box-shadow）等，豐富了元素的邊框效果。2D轉(zhuǎn)換和3D轉(zhuǎn)換。CSS3增加了位移（translate）、旋轉(zhuǎn)（rotate）、縮放（scale）和傾斜（skew）4種轉(zhuǎn)換。動畫。動畫通過@keyframes規(guī)則指定一個CSS3樣式和動畫將逐步從目前的樣式更改為新的樣式。漸變、過渡、彈性盒模型等。1.2.2

CSS3CSS3引入方式CSS3樣式用于輔助HTML5進行頁面布局，CSS3有三種引入方式，不同的引入方式對于后期的維護難度也不相同。CSS3的三種引入方式為行內(nèi)樣式、內(nèi)嵌樣式和外鏈樣式，樣式的優(yōu)先等級也有劃分，行內(nèi)樣式優(yōu)先于內(nèi)嵌樣式和外部樣式，后兩者是按照就近原則決定優(yōu)先級。樣式的引入方式不同，內(nèi)容與樣式的關聯(lián)性也不同，關聯(lián)性的強弱會影響后期代碼的維護。初心至善匠心育人1.2

Web開發(fā)的核心技術1.2

Web開發(fā)的核心技術1.2.2

CSS3CSS3引入方式行內(nèi)樣式行內(nèi)樣式是使用style屬性引入CSS3樣式，示例代碼如下<div

style="width:100px;height:100px;background:blue"></div>這種方式?jīng)]有將內(nèi)容和樣式分離，關聯(lián)性太強，在開發(fā)中不易于后期代碼維護，不提倡使用。初心至善匠心育人內(nèi)嵌樣式是使用<style>標簽書寫CSS代碼。<style>標簽寫在<head>標簽里面，示例代碼如右所示1.2

Web開發(fā)的核心技術1.2.2

CSS3CSS3引入方式內(nèi)嵌樣式<head>/*在文件頭部以內(nèi)嵌樣式書寫css代碼*/<style>

div{width:100px;}</style></head>這種方式每個頁面都需要定義CSS代碼，后期維護難度大，仍然沒有將內(nèi)容和樣式完全分離，不易于后期代碼維護工作。初心至善匠心育人外鏈樣式是CSS代碼保存在擴展名為.css的樣式表中，在HTML文件中使用<link>標簽引用擴展名為.css的樣式表，示例代碼如下1.2

Web開發(fā)的核心技術1.2.2

CSS3CSS3引入方式外鏈樣式<link

type="text/css"

rel="stylesheet"

href="style.css">這種方式將內(nèi)容和樣式完全分離，易于前期制作和后期代碼的維護。初心至善匠心育人1.2.2

CSS3CSS3選擇器通過選擇器可以定位到CSS樣式需要修飾的目標，CSS3選擇器是在原有的CSS選擇器基礎之上又新增了部分選擇器，大概可分為基本選擇器和高級選擇器，以及新增的結(jié)構(gòu)偽類選擇器、偽元素選擇器、屬性選擇器等。初心至善匠心育人1.2

Web開發(fā)的核心技術1.2

Web開發(fā)的核心技術1.2.2

CSS3CSS3選擇器基本選擇器基本選擇器有4種，分為通用選擇器、標簽選擇器、類選擇器和ID選擇器。名稱說明示例通用選擇器使用通配符“*”，選取所有元素*{margin:0;padding:0;}標簽選擇器選取所有此類標簽的元素p{color:red;}類選擇器按照給定的class屬性的值，選取所有匹配的元素，可多次使用，以“.”定義.first{background-color:#fff;}ID選擇器按照id屬性選取一個與之匹配的元素，每個id屬性是唯一的，以“#”定義#nav{width:100px;height:100px;}初心至善匠心育人CSS選擇器具有權(quán)值，權(quán)值代表著優(yōu)先級，權(quán)值越大，優(yōu)先級越高。同種類型的選擇器權(quán)值相同，后定義的選擇器會覆蓋先定義的選擇器。1.2

Web開發(fā)的核心技術1.2.2

CSS3CSS3選擇器Important：最高（權(quán)值大于1000）；ID選擇器：100；標簽選擇器：1；·行內(nèi)樣式：1000；·類選擇器：10；·通用選擇器：0；基本選擇器說明：選擇器組合使用，權(quán)值會疊加。選擇器優(yōu)先級為：通用選擇器<標簽選擇器<類選擇器<ID選擇器<行內(nèi)樣式<Important初心至善匠心育人高級選擇器有后代選擇器、子代選擇器、并集選擇器等。1.2

Web開發(fā)的核心技術1.2.2

CSS3CSS3選擇器高級選擇器名稱說明示例后代選擇器又稱為包含選擇器，通過空格連接兩個選擇器，前面選擇器表示包含的祖先元素，后面選擇器表示被包含的后代元素header

h3

{color:hotpink;}子代選擇器使用尖角號（>）連接兩個選擇器，前面選擇器表示要匹配的父元素，后面選擇器表示被包含的匹配子對象ul>li{width:80px;}并集選擇器又稱為組合選擇器，使用逗號（,）連接多個選擇器，可同時選擇多個簡單選擇器p,.first,#nav{color:#fff;}初心至善匠心育人1.2

Web開發(fā)的核心技術1.2.2

CSS3CSS3選擇器結(jié)構(gòu)偽類選擇器結(jié)構(gòu)偽類選擇器可根據(jù)文檔結(jié)構(gòu)的關系來匹配特點的元素。名稱說明示例:first-child匹配第一個子元素li:first-child

{color:#fff;}:last-child匹配最后一個子元素li:last-child

{color:#acf;}:nth-child()按正序匹配特定子元素，括號內(nèi)為數(shù)值，表示匹配屬于其父元素的第N個子元素li:last-child(3)

{color:blue;}:nth-last-child()按倒序匹配特定子元素，括號內(nèi)為數(shù)值，表示倒序匹配屬于其父元素的第N個子元素li:last-child(2)

{color:#bde;}初心至善匠心育人偽元素選擇器可用于在文檔中插入假象的元素，在新版本里使用“:”與“::”區(qū)分偽類和偽元素。1.2

Web開發(fā)的核心技術1.2.2

CSS3CSS3選擇器偽元素選擇器名稱說明示例::first-letter選取元素的第一個字符p::first-letter{color:red;}::first-line選取元素的第一行p::first-letter{color:pink;}::selection選取當前選中的字符,但改變文字結(jié)構(gòu)的樣式不會生效，如字號，內(nèi)邊距p::selection{color:blue;}::before在元素內(nèi)容前面添加新內(nèi)容，與content配合使用，content的內(nèi)容可以是圖像和文本p::before

{content:”第一節(jié)”;color:red;}::after在元素內(nèi)容后面添加新內(nèi)容，與content配合使用，content的內(nèi)容可以是圖像和文本p::after{content:url(“image/1.jpg”);}初心至善匠心育人屬性選擇器是根據(jù)標簽的屬性來匹配元素，使用中括號（[]）進行標識。1.2

Web開發(fā)的核心技術1.2.2

CSS3CSS3選擇器屬性選擇器名稱說明示例[屬性名]選中所有具有該屬性的標簽[title]{color:#000}[屬性名=”屬性值”]選中所有符合該條件的標簽[type=”text”]{color:#fff}[class~=”屬性名”]從當前選擇器選擇的元素中，找到具有該屬性名的元素input[class~=”pox”]{background-color:#fff;}[class^=”字符串”]從當前選擇器選擇的元素中，找到class屬性以當前字符串為開頭的元素p[class^=”in”]{font-size:16px;}[class$=”字符串”]從當前選擇器選擇的元素中，找到class屬性以當前字符串為結(jié)尾的元素p[class$=”x”]{font-size:14px;}[class*=”字符串”]從當前選擇器選擇的元素中，找到class屬性中包含當前字符串的元素p[class~=”o”]{color:red;}初心至善匠心育人CSS3中對字體樣式的設置主要有字體風格、字體粗細、字體大小、字體名稱等。1.2

Web開發(fā)的核心技術1.2.2

CSS3CSS3常用屬性字體屬性屬性說明font-style設置字體風格，屬性值有oblique（偏斜體），italic（斜體），normal（正常）font-weight設置字體粗細，屬性值有bold（粗體），bolder（特粗），lighter（細體），normal（正常）font-size設置字體大小，屬性值為數(shù)值，常用單位是像素（px）font-family設置字體名稱，常用屬性值有“宋體”，“楷體”，“Arial”等初心至善匠心育人字體屬性（font）可以進行連寫，連寫順序為字體風格（font-

style）、字體粗細（font-weight）、字體大?。╢ont-size）和字體名稱（font-family），字體連寫的示例代碼如下。1.2

Web開發(fā)的核心技術1.2.2

CSS3CSS3常用屬性font:italic

bold

16px“宋體”;字體屬性初心至善匠心育人CSS3中對背景樣式的設置主要有背景顏色、背景圖像、背景圖像的重復性、背景圖像滾動情況、背景圖像位置等。1.2

Web開發(fā)的核心技術1.2.2

CSS3CSS3常用屬性背景屬性屬性說明background-color設置背景顏色，屬性值可以是顏色的英文單詞或十六進制值或RGB值background-image把圖像設置為背景，屬性值是絕對路徑或相對路徑表示的URLbackground-repeat設置背景圖像是否重復以及如何重復，屬性值有no-repeat（不重復）、repeat-x（橫向平鋪）、repeat-y（縱向平鋪）background-attachment設置背景圖像滾動情況，屬性值有scroll（圖像隨內(nèi)容滾動）、fixed（圖像固定）background-position設置背景圖像位置，屬性值有精確的數(shù)值或top（垂直向上）、bottom（垂直向下）、left（水平向左）、right（水平向右）、center（居中）初心至善匠心育人背景屬性（background）可以進行連寫，連寫順序為背景顏色（background-color）、背景圖像（background-image）、背景圖像的重復性（background-repeat）、背景圖像滾動情況（background-attachment）、背景圖像位置（background-position），背景連寫的示例代碼如下。1.2

Web開發(fā)的核心技術1.2.2

CSS3CSS3常用屬性background:#ccc

url(“image/2.jpg”)

repeat-x

scroll

center;字體屬性初心至善匠心育人CSS3中對文本樣式的設置主要有文本顏色、文本水平對齊方式、行高、文本修飾、文本轉(zhuǎn)換、文本縮進、文本陰影等。1.2

Web開發(fā)的核心技術1.2.2

CSS3CSS3常用屬性文本屬性屬性說明color設置文本顏色，屬性值可以是顏色的英文單詞或十六進制值或RGB值text-align設置文本內(nèi)容水平對齊方式，屬性值有l(wèi)eft（左對齊，默認值）、right（右對齊）、center（居中對齊）、justify（文字相對于圖像對齊）line-height設置行高，屬性值是數(shù)值，單位為像素（px）text-decoration用于修飾文本，屬性值有none（無修飾，默認值）、line-through（刪除線）、underline（下劃線）、overline（上劃線）、blink（閃爍）text-indent設置文本首行縮進，屬性值有數(shù)值或inherit（繼承父元素屬性）text-shadow設置文本陰影，屬性值為數(shù)值初心至善匠心育人1.2

Web開發(fā)的核心技術1.2.3

JavaScriptJavaScript是一種輕量級、解釋型的Web開發(fā)語言，是可與HTML文件相融合的一種腳本語言。它獲得了各種瀏覽器的支持，如谷歌、IE、火狐等，是目前廣泛應用的編程語言之一，可以呈現(xiàn)網(wǎng)頁內(nèi)容的交互式數(shù)據(jù)行為。當用戶在客戶端瀏覽該網(wǎng)頁時，瀏覽器會執(zhí)行JavaScript程序，用戶可通過交

互操作去改變網(wǎng)頁的內(nèi)容。JavaScript可以在<script></script>標簽中直接編寫，也可以通過<script

src='目標文檔的URL'></script>鏈接外部的JS文件。初心至善匠心育人1.2

Web開發(fā)的核心技術1.2.3

JavaScriptJavaScript的語言特性1.解釋型編譯型語言在計算機運行代碼前，先把代碼翻譯成計算機可以理解的文件，如

Java、C++等屬于編譯型語言。而解釋型語言則不同，解釋型語言的程序不需要在運行前編譯，只需在運行程序時編譯即可，如JavaScript、PHP等屬于解釋型語言。解釋型語言的優(yōu)點是可移植性較好，只要有解釋環(huán)境，可在不同的操作系統(tǒng)上運行。代碼修改后即可運行，無須編譯，上手方便、快速。優(yōu)點缺點

缺點是需要解釋環(huán)境，運行起來比編譯型語言慢，占用資源多，代碼效率低。初心至善匠心育人1.2

Web開發(fā)的核心技術1.2.3

JavaScriptJavaScript的語言特性2.弱類型弱類型語言是相對于強類型語言而言的。在強類型語言中，變量類型有很多種，如int、char、float、boolean等，不同的類型相互轉(zhuǎn)換有時需要強制轉(zhuǎn)換。而

JavaScipt只有一種類型var，當其為變量賦值時會自動判斷類型并進行轉(zhuǎn)換。弱類型語言的優(yōu)點是易于學習、語言表達簡單易懂、代碼更優(yōu)雅、開發(fā)周期更短、更加偏向邏輯設計。優(yōu)點缺點

缺點是程序可靠性差、調(diào)試煩瑣、變量不規(guī)范、性能低下。初心至善匠心育人1.2

Web開發(fā)的核心技術1.2.3

JavaScriptJavaScript的語言特性動態(tài)性動態(tài)性語言是指在變量定義時不一定進行賦值操作，只需在使用時作賦值操作即可。這種方式使得代碼更靈活、方便。在JavaScript中有多處會用到動態(tài)性，如

獲取元素、原型等。事件驅(qū)動JavaScript可以直接對用戶或客戶輸入做出響應，無須經(jīng)過Web程序。它對用

戶的響應以事件驅(qū)動的方式進行，即由某種操作動作引起相應的事件響應，如單擊、拖動窗口、選擇菜單等。初心至善匠心育人1.2

Web開發(fā)的核心技術1.2.3

JavaScriptJavaScript的語言特性5.跨平臺JavaScript依賴于瀏覽器本身，與操作環(huán)境無關。只要計算機上可以運行瀏覽器，并且瀏覽器支持JavaScript即可正確執(zhí)行，從而實現(xiàn)“編號一次，走遍天下”。初心至善匠心育人1.2

Web開發(fā)的核心技術1.2.3

JavaScriptJavaScript的構(gòu)成JavaScript分為3部分，分別是ECMAScript（簡稱ES）、DOM（Document

ObjectModel，頁面文檔對象模型）和BOM（Browser

Object

Model，瀏覽器對象模型）。初心至善匠心育人1.2

Web開發(fā)的核心技術1.2.3

JavaScriptJavaScript的構(gòu)成ECMAScriptECMAScript是JavaScript語言的規(guī)范，是JavaScript的核心內(nèi)容。ECMAScript是由ECMA國際（原歐洲計算機制造商協(xié)會）進行標準化的一門編程語言，這種語言在萬維網(wǎng)上應用廣泛，它往往被稱為JavaScript或JScript，但實際上后兩者是ECMAScript語言的擴展。ECMAScript描述了JavaScript語言的基本語法和數(shù)據(jù)類型等，并規(guī)范了JavaScript編碼方式和語言特性，是瀏覽器廠商共同遵守的一套JavaScript語法工業(yè)標準。初心至善匠心育人1.2

Web開發(fā)的核心技術1.2.3

JavaScriptJavaScript的構(gòu)成DOMDOM文檔對象模型是W3C組織推薦的處理可擴展標記語言（HTML或XML）的

標準編程接口（API）。通過DOM提供的接口可以對頁面上的各種元素進行操作。BOMBOM瀏覽器對象模型是對瀏覽器窗口進行訪問和操作的功能接口，例如，彈出新的瀏覽器窗口、獲取瀏覽器信息等。值得注意的是，BOM是作為JavaScript的一部分而不是作為W3C組織的標準，每款瀏覽器都有自己的實現(xiàn)方式，這會導致BOM

代碼的兼容性不如ECMAScript和DOM代碼的兼容性。初心至善匠心育人1.2

Web開發(fā)的核心技術1.2.3

JavaScript變量與數(shù)據(jù)類型1.變量JavaScript變量是存儲數(shù)據(jù)值的容器。變量是編程中最基本的單元，它會暫時引用用戶需要存儲的數(shù)據(jù)。JavaScript變量的語法格式如下。var變量名；

var變量名=初始值；JavaScript變量定義的關鍵字是var，var具有聲明作用，可以聲明變量。例如var

x=1，x是變量，1是變量的初始值，變量的值是可以改變的。初心至善匠心育人1.2

Web開發(fā)的核心技術1.2.3

JavaScript變量與數(shù)據(jù)類型1.變量JavaScript變量必須以唯一的名稱標識，唯一的名稱被稱為標識符。標識符可以是短名稱，例如x、y和z，或者更具描述性的名稱，例如age、sum等。標識符的通用規(guī)則初心至善匠心育人名稱可包含字母、數(shù)字、下劃線和美元符號。名稱必須以字母開頭。名稱也可以“$”和“_”開頭。名稱對大小寫敏感，例如y和Y是不同的變量。保留字（比如JavaScript的關鍵詞）無法用作變量名稱。1.2

Web開發(fā)的核心技術1.2.3

JavaScript變量與數(shù)據(jù)類型2.數(shù)據(jù)類型的分類數(shù)據(jù)類型分為基本數(shù)據(jù)類型和引用數(shù)據(jù)類型?；緮?shù)據(jù)類型指的是簡單的數(shù)據(jù)段。初心至善匠心育人基本數(shù)據(jù)類型說明字符串（String）表示文本數(shù)據(jù)，用引號引。例如，“你好”數(shù)值(Number)表示數(shù)學運算的值。例如，整數(shù)10，浮點數(shù)3.14布爾值(Boolean)表示邏輯運算的值。只有兩個值true和false空值（Null）表示沒有值未定義值（Undefined）表示未賦值的初始化值）1.2

Web開發(fā)的核心技術1.2.3

JavaScript變量與數(shù)據(jù)類型2.數(shù)據(jù)類型的分類引用數(shù)據(jù)類型指的是有多個值構(gòu)成的對象。初心至善匠心育人引用數(shù)據(jù)類型說明對象(Object)表示屬性的無序集合。例如var

obj={age:18}數(shù)組(Array)表示一組數(shù)值。例如，Arr[2,5,13,8]函數(shù)(Function)表示執(zhí)行特定任務的代碼塊。例如，function

show(p1,p2){return

p1*p2;}基本數(shù)據(jù)類型和引用數(shù)據(jù)類型的區(qū)別是基本數(shù)據(jù)類型的值是不可變的，變量存放在棧里面；引用數(shù)據(jù)類型可以擁有屬性和方法，且值是可變的，值是同時保存在棧內(nèi)存和堆內(nèi)存。1.2

Web開發(fā)的核心技術1.2.3

JavaScript變量與數(shù)據(jù)類型3.數(shù)據(jù)類型的轉(zhuǎn)換其他數(shù)據(jù)可以轉(zhuǎn)換為字符串類型，有2種轉(zhuǎn)換方式。第1種是通過toString（）方法進行轉(zhuǎn)換，第2種是使用“+""”進行轉(zhuǎn)換，轉(zhuǎn)換完成之后使用typeof驗證數(shù)據(jù)類型。轉(zhuǎn)換為字符串類型的示例代碼如下。<script>var

a=10;console.log("通過toString將num類型轉(zhuǎn)換為string類型："+a.toString())console.log("轉(zhuǎn)換之后進行驗證："+(typeof

a.toString()))console.log("通過+號將num類型轉(zhuǎn)換為string類型："+(10+''))console.log("轉(zhuǎn)換之后進行驗證："+(typeof

(10+'')))</script>初心至善匠心育人1.2

Web開發(fā)的核心技術1.2.3

JavaScript變量與數(shù)據(jù)類型數(shù)據(jù)類型的轉(zhuǎn)換字符串類型轉(zhuǎn)換為數(shù)字類型，有3種轉(zhuǎn)換方式。第1種方式，ParseInt()方法從字符串的左邊開始解析，遇到非數(shù)字后停止解析，返回的結(jié)果是整數(shù)值。如果首部是非數(shù)字，結(jié)果返回NaN。名稱必須以字母開頭。第2種方式，ParseFloat()方法的用法與ParseInt()方法相似，差別在于

ParseFloat()方法能識別浮點數(shù)，返回的結(jié)果是浮點數(shù)。第3種方式，Nubmber()方法的字符串必須是純數(shù)字序列，才能返回結(jié)果，否則返回NaN。初心至善匠心育人1.2

Web開發(fā)的核心技術1.2.3

JavaScript運算符運算符是用來對變量或數(shù)據(jù)進行操作的符號，也稱作操作符。運算符根據(jù)功能用途可分為算術運算符、比較運算符、邏輯運算符等。初心至善匠心育人1.2

Web開發(fā)的核心技術1.2.3

JavaScript運算符1.算術運算符算數(shù)運算符用于對數(shù)值執(zhí)行算數(shù)運算，包括加、減、乘、除、取余等。初心至善匠心育人1.2

Web開發(fā)的核心技術1.2.3

JavaScript運算符2.比較運算符比較運算符用于對變量或表達式的結(jié)果進行比較，返回值為布爾值true或false。初心至善匠心育人1.2

Web開發(fā)的核心技術1.2.3

JavaScript運算符3.邏輯運算符邏輯運算符用來表示數(shù)學中的“與”“或”“非”運算，其主要作用是連接條件表達式，表示各個條件之間的邏輯關系。在上述圖中，a和b分別為表達式，通常都是使用比較運算符返回的結(jié)果作為邏輯運算符的操作數(shù)，邏輯運算符還經(jīng)常會出現(xiàn)在條件語句和循環(huán)語句中。初心至善匠心育人1.2

Web開發(fā)的核心技術1.2.3

JavaScriptJavaScript的常用事件JavaScript控制頁面的行為是由事件驅(qū)動的。事件就是JavaScript監(jiān)測測到用戶的操作或是頁面上的一些行為。初心至善匠心育人目錄Contents1.3初心至善匠心育人Web開發(fā)工具開發(fā)工具的介紹WebStorm的安裝和使用1.3

Web開發(fā)工具1.3.1開發(fā)工具的介紹WebStormWebStorm是Jetbrains公司旗下一款

JavaScript開發(fā)工具。這是前端開發(fā)中一個比較專業(yè)的軟件，與其他軟件相比，該軟件體積比較大，功能也更復雜。它能支持代碼高亮、智能補全等功能，除此之外，還支持代碼調(diào)試、重構(gòu)等功能，經(jīng)常被應用于項目管理、團隊協(xié)

作開發(fā)中。目前已經(jīng)被廣大前端開發(fā)者譽為

“Web前端開發(fā)神器”、“最強大的HTML5編輯器”等。它還與IntelliJ

IDEA同源，繼承了IntelliJ

IDEA強大的JS部分的功能。初心至善匠心育人1.3

Web開發(fā)工具1.3.1開發(fā)工具的介紹VisualStudio

CodeVisualStudioCode是微軟開發(fā)的一個輕量級代碼編輯器，軟件功能非常強大，界面簡潔明晰，操作方便快捷，設計十分人性化。它

支持常見的語法提示、代碼高亮、Git等功能，具有開源，免費，跨平臺，插件擴展豐富，運行速度快，占用內(nèi)存少，開發(fā)效率高等特點，網(wǎng)頁開發(fā)中經(jīng)常會使用到該軟件，非常靈活方

便。初心至善匠心育人1.3

Web開發(fā)工具1.3.1開發(fā)工具的介紹Sublime

TextSublime

Text是一個輕量級的編輯器，支持各種編程語言，Sublime

Text的主要功能有

拼寫檢查，書簽，完整的Python

API，即時項目切換，多選擇，多窗口等。Sublime

Text所有的強大功能都支持使用插件，快捷鍵發(fā)揮極大作用，有效的減少了開發(fā)的勞動程度。初心至善匠心育人1.3

Web開發(fā)工具1.3.2

WebStorm的安裝和使用WebStorm的安裝（1）打開WebStorm官方網(wǎng)站https:///webstorm/，然后單擊Download按鈕進入下載頁面。初心至善匠心育人1.3

Web開發(fā)工具1.3.2

WebStorm的安裝和使用WebStorm的安裝（2）選擇上一頁圖中的Windows選項，然后單擊Download按鈕下載最新版的

WebStorm，頁面底部是下載進度提示信息。初心至善匠心育人1.3

Web開發(fā)工具1.3.2

WebStorm的安裝和使用WebStorm的安裝（3）下載完成后的文件名為WebStorm-2021.2.exe，雙擊該文件進入安裝界面。初心至善匠心育人1.3

Web開發(fā)工具1.3.2

WebStorm的安裝和使用WebStorm的安裝（4）單擊上一頁圖中的Next按鈕進入選擇安裝路徑窗口，選擇要安裝的路徑。接著單擊圖中的Next按鈕進入選擇安裝選項界面，創(chuàng)建桌面快捷方式。初心至善匠心育人1.3

Web開發(fā)工具1.3.2

WebStorm的安裝和使用WebStorm的安裝（5）單擊上一頁圖中的Next按鈕，進入選擇開始菜單文件夾界面，默認為JetBrains。接著單擊圖中的Install按鈕開始進行安裝。初心至善匠心育人1.3

Web開發(fā)工具1.3.2

WebStorm的安裝和使用WebStorm的安裝（6）安裝進度完成之后，進入結(jié)束界面，單擊Finish按鈕，完成WebStorm的安裝。初心至善匠心育人1.3

Web開發(fā)工具1.3.2

WebStorm的安裝和使用WebStorm的使用（1）安裝完成之后，在桌面單擊WebStorm的快捷方式，打開WebStorm并進入開始窗口。初心至善匠心育人1.3

Web開發(fā)工具1.3.2

WebStorm的安裝和使用WebStorm的使用（2）單擊上一頁圖中NewProject（新工程）的圖標，創(chuàng)建一個新工程，選擇新工程文件的存儲

路徑為D：\WebStorm\Item。初心至善匠心育人1.3

Web開發(fā)工具1.3.2

WebStorm的安裝和使用WebStorm的使用（3）新工程創(chuàng)建成功之后，可以自定義界面背景。設置背景顏色的步驟為，首先單擊左上角的File菜單，單擊Settings進入設置界面，單擊展開Editor選項，選擇Color

Scheme→HTML命令，在右側(cè)窗格的Scheme下拉列表中選擇背景顏色，單擊OK按鈕，即可完成自定義界面

背景。初心至善匠心育人1.3

Web開發(fā)工具1.3.2

WebStorm的安裝和使用WebStorm的使用（4）自定義背景顏色完成之后，還可以自定義字體。在Settings設置界面上，單擊Editor選項，然后單擊選擇Font，在右側(cè)窗格設置自

定義的字體、字號和行高，單擊OK按鈕即可完成設置。初心至善匠心育人1.3

Web開發(fā)工具1.3.2

WebStorm的安裝和使用WebStorm的使用（5）創(chuàng)建一個新的HTML文件，首先單擊File菜單，選擇New→HTML

file命令。初心至善匠心育人1.3

Web開發(fā)工具1.3.2

WebStorm的安裝和使用WebStorm的使用接著輸入新HTML文件名“index”，生成一個新的HTML文件，然后編寫一個簡單的HTML文件。編寫代碼完成后，單擊代碼區(qū)域右上方的“Chrome”圖標，即可在谷歌瀏覽器運行該文件。初心至善匠心育人課后小結(jié)初心至善匠心育人本章介紹了Web前端的發(fā)展歷程、開發(fā)核心技術、開發(fā)工具的安裝與使用，希望讀者能夠?qū)eb前端的發(fā)展與特性有初步了解，掌握HTML5的基本文件結(jié)構(gòu)、標簽和元素的概念，CSS3的3種引入方式、CSS3各種選擇器和CSS3常用屬性，JavaScript的構(gòu)成、JavaScript數(shù)據(jù)類型的分類與轉(zhuǎn)換和JavaScript的常用事件，熟悉WebStorm開發(fā)工具的使用，能快速編寫出一個簡單的程序，為學習Web開發(fā)奠定基礎。第2章

HTML構(gòu)建基本網(wǎng)頁2.1制作簡單文本網(wǎng)頁2.2添加圖片2.3添加超鏈接學習目標LEARNING

OBJECTIVES了解HTML常用的基本標簽了解<div>塊元素的特點掌握<a>標簽的多種跳轉(zhuǎn)功能熟練使用<p>標簽和<img>標簽初心至善匠心育人引言初心至善匠心育人本章重點學習如何去構(gòu)建一個基本HTML網(wǎng)頁。標簽是構(gòu)建HTML網(wǎng)頁的重要元素，而了解并正確使用標簽是十分重要的。HTML網(wǎng)頁常用的標簽有段落標簽、超鏈接標簽、圖片標簽、塊元素等。段落標簽用于顯示網(wǎng)頁中的文本內(nèi)容，超鏈接標簽可以實現(xiàn)網(wǎng)頁之間的跳轉(zhuǎn)，圖片標簽可在網(wǎng)頁中嵌入圖片，塊元素能對網(wǎng)頁內(nèi)容進行分類分組處理，用于網(wǎng)頁的布局。目錄Contents2.1初心至善匠心育人制作簡單文本網(wǎng)頁標題標簽案例—秋天的故事?lián)Q行標簽段落標簽2.1制作簡單文本網(wǎng)頁2.1.1標題標簽標題是由<h1>至<h6>標簽定義，<h1>定義最大的標題，依次遞減，<h6>定義最小的標題，瀏覽器會自動在標題的前后添加空行。標題能夠體現(xiàn)文檔結(jié)構(gòu)，搜索引擎通過標題能為網(wǎng)頁的結(jié)構(gòu)和內(nèi)容編制索引，用戶可通過標題來快速瀏覽網(wǎng)頁。作用<h1>標題文字</h1>語法格式標題標簽的語法格式如下。初心至善匠心育人2.1制作簡單文本網(wǎng)頁2.1.1標題標簽演示說明依次輸出<h1>至<h6>標題標簽，以便更好地看出它們之間的差別。代碼例2.1<body><h1>綠水青山就是金山銀山</h1><h2>綠水青山就是金山銀山</h2><h3>綠水青山就是金山銀山</h3><h4>綠水青山就是金山銀山</h4><h5>綠水青山就是金山銀山</h5><h6>綠水青山就是金山銀山</h6></body>運行效果初心至善匠心育人2.1制作簡單文本網(wǎng)頁2.1.2段落標簽段落是通過<p>標簽來定義的。語法格式段落標簽的語法格式如下。<p>段落文字<p>初心至善匠心育人2.1制作簡單文本網(wǎng)頁<body><p>明月別枝驚鵲，清風半夜鳴蟬。</p><p>稻花香里說豐年，聽取蛙聲一片。</p><p>七八個星天外，兩三點雨山前。</p><p>舊時茅店社林邊，路轉(zhuǎn)溪橋忽見。</p></body>2.1.2段落標簽演示說明在<p>標簽中輸入文本內(nèi)容。代碼例2.2運行效果說明，默認情況下，HTML會自動在塊級元素（段落、標題）前后添加一個額外的空行。初心至善匠心育人2.1制作簡單文本網(wǎng)頁2.1.3換行標簽<br>換行標簽可在文本中生成一個換行（回車）符號，它是一個空元素，也是一個單標簽，不能在里面寫內(nèi)容。在寫詩句文本和地址時，換行是十分適用的。語法格式換行標簽的語法格式如下。<p>內(nèi)容<br>內(nèi)容<p>初心至善匠心育人2.1制作簡單文本網(wǎng)頁<body><p>

春曉</p><p>春眠不覺曉，<br>處處聞啼鳥。<br>夜來風雨聲，<br>花落知多少。</p></body>2.1.3換行標簽演示說明輸入一首古詩《春曉》，在每個小詩句內(nèi)容后面添加換行標簽，查看實現(xiàn)的效果。代碼例2.3運行效果初心至善匠心育人2.1制作簡單文本網(wǎng)頁2.1.4案例—秋天的故事本實例是一篇關于秋天的簡單文本介紹。該頁面主要由文字元素和標簽構(gòu)成，使用<h1>至<h6>標題標簽、<p>段落標簽和<br>換行標簽來實現(xiàn)整個頁面。頁面結(jié)構(gòu)簡圖如圖所示。初心至善匠心育人2.1制作簡單文本網(wǎng)頁2.1.4案例—秋天的故事代碼實現(xiàn)主體代碼例2.4<body><h3>秋天的故事</h3><p>秋天，又稱秋季，一年四季的第三季，由夏季到冬季的過渡季，天文為秋分到冬至。<br>自然景觀最明顯的變化在樹木上面，城市里會開始清掃大量的落葉，山區(qū)則涌進不少觀賞紅葉的游客們。</p><p>進入秋季，北方冷空氣不斷侵入，但勢力不是很強，常在中國北方形成秋高氣爽的天氣，華西常有綿綿秋雨出現(xiàn)。<br>總體來講，進入秋季，太陽高度角漸低，溫度漸降；秋風送爽、炎暑頓消、碩果滿枝、田野金黃。</p></body>初心至善匠心育人本節(jié)小結(jié)初心至善匠心育人本節(jié)內(nèi)容主要講解了<h3>標題標簽、<p>段落標簽和<br>換行標簽的使用。通過本節(jié)的學習，希望讀者可以熟練掌握這些標簽。目錄Contents2.2初心至善匠心育人添加圖片圖片標簽案例—致敬教師節(jié)<div>塊元素水平線標簽2.2添加圖片<img

src=”圖片文件地址”alt=”提示文本”>2.2.1圖片標簽在HTML中圖像是由<img>標簽定義的，圖片標簽屬于單標簽，沒有閉合標簽，并且是一個空元素，只包含屬性，不包含文本內(nèi)容。圖片標簽表示向網(wǎng)頁中嵌入一張圖片，創(chuàng)建的是引用圖像的占位空間。語法格式圖片標簽的語法格式如下。初心至善匠心育人2.2添加圖片<!--第1種：當前頁面和圖片在同一個目錄下--><img

src=”1.jpg”/><!--第2種：圖片在頁面同級的image文件夾中--><img

src=”image/li.png”/><!--第3種：圖片在頁面上一級的image文件夾中--><img

src=”../image/hu.jpg”/><!--第1種：圖片在本地D盤的相應文件下--><img

src=”file:///D|/images/tu.png”/><!--第2種：圖片在網(wǎng)絡中的相應文件下--><img

src=”/it/u=2579539435,3472264569&fm=26&fmt=auto&gp=0.jpg”/>初心至善匠心育人2.2.1圖片標簽標簽屬性1.src屬性src屬性在<img>標簽中是必須存在的，引用要嵌入的圖片的路徑，這個路徑可以是相對路徑，也可以是絕對路徑。相對路徑是被引入的文件相對于當前頁面的路徑；絕對路徑是文件在網(wǎng)絡或本地的絕對路徑。相對路徑的3種使用方式，示例如下。

絕對路徑的2種使用方式，示例如下。2.2添加圖片2.2.1圖片標簽標簽屬性2.alt屬性alt為文本提示屬性，用戶可為圖像定義一串預備的可替換的文本，它的值是對圖片的文字進行描述，用于圖片無法顯示或不能被用戶看到的情況。若圖片正常顯示，則看不到任何效果；若圖片無法顯示或不能被用戶看到，則顯示出提示文本。當圖片只是用于裝飾網(wǎng)頁，而不作為主體重點內(nèi)容的一部分時，可以寫一個空的alt（alt=""），這是一個較佳的處理方法。初心至善匠心育人2.2添加圖片2.2.1圖片標簽標簽屬性3.title屬性title屬性是鼠標移到圖片上的提示文字。設置title屬性后，若鼠標移入到圖片上，則會顯示出title里的提示信息。4.width屬性和height屬性width屬性為寬度屬性，height屬性為高度屬性，可分別用于設置圖片的寬度和高度，屬性值常用單位為像素（px）。初心至善匠心育人2.2添加圖片<body><!--嵌入圖片，并添加title和alt屬性的屬性值，以及設置寬高-->2.2.1圖片標簽演示說明在網(wǎng)頁中嵌入一張細草微風的風景圖片。代碼例2.5圖片正常顯示時的<imgsrc="../image/grass.jpg"title="風輕輕掠過運，行效果一花獨秀"alt="圖片不存在或圖片路徑錯誤"width="540"

height="400"></body>初心至善匠心育人2.2添加圖片2.2.1圖片標簽圖片無法顯示時，一般有2種情況出現(xiàn)。第1種情況為圖片不存在，導致的因素可能是圖片名稱拼寫錯誤，示例代碼如下。<img

src="../image/griss.jpg"title="風輕輕掠過，一花獨秀"alt="圖片不存在或圖片路徑錯誤"width="540"height="400">第2種情況為圖片路徑錯誤，導致的因素可能是圖片路徑漏寫，示例代碼如下。<img

src="grass.jpg"title="風輕輕掠過，一花獨秀"alt="圖片不存在或圖片路徑錯誤"width="540"height="400">圖片不存在或圖片路徑錯誤導致圖片無法顯示時，運行效果如圖所示。初心至善匠心育人2.2添加圖片2.2.2水平線標簽水平線是由<hr>標簽定義的，在HTML文件中使用<hr>標簽創(chuàng)建橫跨網(wǎng)頁的水平線，將段落與段落之間分隔開，使文檔結(jié)構(gòu)更加層次分明。<hr>水平線標簽是一個單標簽，一般添加在兩個段落之間，可以是一個單獨的簡單<hr>標簽，也可以加入它的一些屬性，使設計效果更美觀。<hr

align=”對齊方式”color=”顏色值”size=”粗細值”width=”寬度值”>語法格式水平線標簽的語法格式如下。初心至善匠心育人屬性說明align設置水平線對齊方式，屬性值有center（居中對齊，默認值）、left（左對齊）、right（右對齊）color設置水平線顏色，屬性值可以是顏色的英文單詞或十六進制值或RGB值size設置水平線粗細，屬性值為數(shù)值，以像素（px）為單位，默認值為2pxwidth設置水平線寬度，屬性值為像素值或瀏覽器窗口的百分比（默認為100%）初心至善匠心育人2.2.2水平線標簽常用屬性<hr>水平線標簽常用屬性的具體說明如表所示。2.2添加圖片2.2添加圖片2.2.3<div>塊元素塊元素的概念<div>塊元素也稱為內(nèi)容劃分元素，是一個塊級元素，在HTML中獨占一行，可以設置寬度和高度，支持所有全局屬性。它是一個通用型的流內(nèi)容容器，在不使用CSS的情況下，不設置寬度和高度，其對內(nèi)容或布局沒有任何影響。它作為一個“純粹的”容器，<div>元素在語義上不表示任何特定類型的內(nèi)容，可以使用class或id屬性更方便地定義內(nèi)容的格式，將內(nèi)容分組。由于<div>元素獨自占據(jù)一行的塊級元素特性，要想實現(xiàn)在一行內(nèi)并排放置塊元素，可以使用浮動屬性，但元素浮動的同時也會對頁面布局產(chǎn)生影響。初心至善匠心育人2.2添加圖片2.2.3<div>塊元素塊元素的特點HTML元素大體可分為3大類，分別為塊元素、內(nèi)聯(lián)元素和內(nèi)聯(lián)塊元素。塊元素的特點是可以自定義寬度和高度，并獨占一行，自上而下排列，還可以作為一個容器包含其他的塊元素或內(nèi)聯(lián)元素。常見的塊元素有<div>、<p>、<h1>、<ul>、<table>、<form>、<hr>等。初心至善匠心育人2.2添加圖片2.2.3<div>塊元素拓展內(nèi)聯(lián)元素也稱為行內(nèi)元素，它的特點是不可以自定義寬度和高度，不獨占一行，在一行逐個進行顯示。內(nèi)聯(lián)元素設置與高度相關的一些屬性，例如

margin-top，margin-bottom，padding-top，padding-bottom，line-height等屬性，會顯示無效或顯示不準確。常用的內(nèi)聯(lián)元素有<span>、<a>、<label>、<em>、<strong>等。內(nèi)聯(lián)塊元素也稱為行內(nèi)塊元素，它的特點是可以自定義寬度和高度，可以和其他內(nèi)聯(lián)元素在一行顯示，既具有內(nèi)聯(lián)元素特點，也具有塊元素特點。常用的內(nèi)聯(lián)塊元素有<img>、<input>、<li>、<textarea>等。初心至善匠心育人2.2添加圖片2.2.4案例—致敬教師節(jié)本實例是一篇致敬教師節(jié)的文案頁面。該頁面主要由<p>段落標簽、<hr>水平線標簽、<img>圖片標簽、<div>塊元素等構(gòu)成。頁面結(jié)構(gòu)簡圖如圖所示。初心至善匠心育人2.2添加圖片<body><div

id="teach"><h3>致敬教師節(jié)！老師您辛苦了</h3><!--添加一條水平線--><hr

align="left"

color="#aaa"

size="3"

><div

class="content"><p>一支粉筆兩袖微塵<br>三尺講臺四季耕耘<br>是他們每日腳踏實地堅守在講臺上，勤勉又充滿擔當。教師節(jié)來臨之際，讓我們向老師們說一句：謝謝您！</p><!--在塊元素中嵌入一張圖片--><div

class="photo"><img

src="data:image/png;base64,PCFET0NUWVBFIEhUTUwgUFVCTElDICItLy9XM0MvL0RURCBIVE1MIDQuMDEvL0VOIiJodHRwOi8vd3d3LnczLm9yZy9UU</div>.

<p>教師節(jié)的建立，標志著教師在中國受到全社會的尊敬。