任務(wù)1制作第一個HTML

頁面0第1章網(wǎng)頁制作入門(1)了解網(wǎng)頁相關(guān)的概念與術(shù)語知

識

目

標(biāo)

(2)熟悉HTML的發(fā)展歷史(3)掌握HTML

文檔的結(jié)構(gòu)(1)掌握SublimeText的基本操作技能目標(biāo)(2)能夠創(chuàng)建簡單的網(wǎng)頁(1)培養(yǎng)勤奮學(xué)習(xí)的態(tài)度素質(zhì)目標(biāo)(2)培養(yǎng)邏輯思維能力及實(shí)訓(xùn)操作能力(3)通過課前課中課后的行為規(guī)范，使學(xué)生養(yǎng)成良好的行為習(xí)慣第1章網(wǎng)頁制作入門1.

網(wǎng)頁相關(guān)知識2.

常用的開發(fā)工具——SublimeText3.HTML5基礎(chǔ)4.

任務(wù)實(shí)現(xiàn)1.

網(wǎng)頁相關(guān)知識1.1網(wǎng)頁與網(wǎng)站的相關(guān)概念1.2網(wǎng)頁分類第1章網(wǎng)頁制作入門1.1網(wǎng)頁與網(wǎng)站的相關(guān)概念厚攜預(yù)技跟足到斷查詢信息瀏覽新聞(信息)網(wǎng)

頁網(wǎng)頁究竟是什么?1.

網(wǎng)頁相關(guān)知識TMALL好禮9.9元起圖開年巾喜全場直降網(wǎng)上購物1.

網(wǎng)頁相關(guān)知識1.1網(wǎng)頁與網(wǎng)站的相關(guān)概念以江西工業(yè)工程職業(yè)技術(shù)學(xué)院一個頁面為例認(rèn)識網(wǎng)頁：打開谷歌瀏覽器，在地址欄輸入https://www.jxvcie.edu.cn/info/1031/11291.htm當(dāng)前位票：首頁>新聞中心>學(xué)院費(fèi)網(wǎng)>正文人人成才技興江西——江西省第一屆職業(yè)技能大賽增材制造賽項(xiàng)比賽在我院舉辦發(fā)布時間：2022-11-28新來源：技能新時代。工匠展風(fēng)采，11月27—28日，江西當(dāng)?shù)谝粚寐殬I(yè)技能大賽增材制造賽項(xiàng)比賽在我院汽車實(shí)訓(xùn)中心舉辦，本次大賽由江西當(dāng)人民

政府主辦，江西當(dāng)人力資源和社會保廳承辦，江西省國有資產(chǎn)監(jiān)督管理委員會、江西省總工會、共青團(tuán)江西省委員會、江西當(dāng)婦女聯(lián)合會協(xié)辦。

江西工業(yè)工程膽業(yè)技術(shù)學(xué)院提供技術(shù)支持。書

記

信

地

8

院

長

信

軸日

手

機(jī)

版江西工也工移職業(yè)按術(shù)學(xué)倪學(xué)就觀頂若站門戶a厚德強(qiáng)技求是創(chuàng)新學(xué)校概見款學(xué)在線

陜系設(shè)盟

學(xué)面之窗

掃生就業(yè)

新調(diào)中心

內(nèi)郵辦公

思政建設(shè)

黨的建設(shè)圖書館蓄禁校園

數(shù)務(wù)系統(tǒng)超鏈接當(dāng)前位置：首頁>新聞中心>學(xué)院要聞>正文人人成才技興江西——江西省第一屆職業(yè)技能大賽增材制造賽項(xiàng)比賽在我院舉辦發(fā)布時間：2022-11-28新聞來源：

→

文

本圖片https://www.jxvcie.edu.cn/info/1031/11291.htm書記信

箱區(qū)院

長

信

箱□

手

機(jī)

版江西工也工程職業(yè)技術(shù)學(xué)院JANGXIVOCATIONALCOLLEGEOFINDUSTRY&ENGINEERING教學(xué)在線

院系設(shè)置

學(xué)

團(tuán)

之

窗厚德強(qiáng)技求是創(chuàng)新文本←一?<div

id="nav"class="cainter"style="

background-color:#fff">…</div><!--裝飾圖-->Y<div

class="drawing"><img

src="..1../images/banner01.jpg"></div><!--內(nèi)容開始start-->V<div

class

="

content">V<div

class

="

middle

clearfix">?

<div

class="house">…</div><script

language="javascript"src=",.1../_dwr/interface/NewsvoteDWR.js">

</script><script

language

="

javascript"src="./../dwr/engine.js"></script><script

language

="

javascript

"src

="Lsystem/resource/js/news/newscontent.

js"></script><link

href

="

Lsystem/resource/js/photoswipe/3.0.5.1/photoswipe.css"type=

"text/css"rel="stylesheet"><script

language="javascript"src="Lsystem/resource/js/photoswipe/3.0.5.1/klass.min.js"></script><linkhref="Lsystem/resource/style/component/news/content/format501.css"

type="text/css"rel="stylesheet"><script

language

="

javascript"src

="

Lsystem/resource/js/ajax.js

"></script>Styles

Computed

Layout

Event

Listeners》》Filter

:hov

.cls

十

甲

4element.style

{h1,h2,h3,h4,h5,h6{

reset.css:29font-size

:100%;font-weight

:normal;}body,div,dl,dt,dd,u1,ol,li,h1,h2,

reset.css:5

h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:?

0;padding:

?0;}h1[Attributes

Style]{text-align:center;}h1{

user

agent

stylesheetdisplay:block;font-size:2em;margin-block-start:0.67em;margin-block-end:0.67em;margin-inline-start:θpx;html

body

div#wrap

div.content

div.middle.clearfix

form

div

h1為了快速了解網(wǎng)頁是如何形成的，在谷歌瀏覽器中按下F12,

即可看到網(wǎng)頁的源碼RElementsConsoleSourcesNetworkPerformanceMemoryApplicationSecurityLighthouse》×:Console

What's

New×Issues

×1.

網(wǎng)頁相關(guān)知識1.1網(wǎng)頁與網(wǎng)站的相關(guān)概念網(wǎng)頁通常由文字、圖像、鏈接、音頻、視頻等元素構(gòu)成，通常是HTML

文件。常見的網(wǎng)頁文件是以.html或.htm為擴(kuò)展名的，因此俗稱為THML

文件。網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素網(wǎng)

頁(Web

Page)是網(wǎng)站中的一個頁面，通常是HTML文件，它要通過瀏覽器來閱

讀

。網(wǎng)站是萬維網(wǎng)上一組相關(guān)網(wǎng)頁和有關(guān)文件的集合(本質(zhì)是文件夾)

,

實(shí)

行分類管理，

即用不同的文件夾管理。網(wǎng)站中一般有一個特殊的網(wǎng)頁作為瀏覽的起始點(diǎn)，稱為主頁(或首頁)。主頁的文件名為index.html,其它頁面稱為內(nèi)面或子頁。1.

網(wǎng)頁相關(guān)知識1.2網(wǎng)頁分類·

依據(jù)網(wǎng)

頁的

位

置

：1.主頁2.內(nèi)頁·

依據(jù)表現(xiàn)形式：1.靜態(tài)網(wǎng)頁2.動態(tài)網(wǎng)頁第1章網(wǎng)頁制作入門1.

網(wǎng)頁相關(guān)知識2.

常用的開發(fā)工具——Sublime

Text3.

HTML5

基礎(chǔ)4.

任務(wù)實(shí)現(xiàn)第1章網(wǎng)頁制作入門2.常用的開發(fā)工具——Sublime

TextHTML5

文檔實(shí)質(zhì)是一個文本文件，擴(kuò)展名為.htm或者.html,

常用的工具有Sublime

text

、Hbuilder

、Dreamweaver

、NotePad++等等。2.1下載并安裝2.2中文設(shè)置2.1下載并安裝下載安裝包

官網(wǎng)下載鏈接：/3Windows32

位操作系統(tǒng)選擇“Windows”64位操作系統(tǒng)選擇“Windows64bit”Versior:Bulld3211。OSX(10.7orlater

is

requlred)MinOMalsoavallableafaD□

wndows64DcalsoLinuxrepoS-alsoavailableas:64bit.deb-sig,key64bit.rpm

-signed,key64bitpkgtar.xZ-sig,key64bit.tar.bz2-sig,key32bit.tar.bz2-sig,keySublimeTextmaybedownloadedandevaluatedforfree,howeveralicensemustbepurchased

for

continueduse.There

iscurrentlynoenforcedtimelimitfortheevaluation.S

Sublime

TextSublimeText4hasbeenreleased,and

contains

signifcant

improvements

over

this

version.2.常用的開發(fā)工具一—SublimeTextDownload安裝雙擊安裝包，點(diǎn)擊

next,注意勾選“Add

to

explorer

contextmenu”,即添加右鍵菜單的選項(xiàng)，后續(xù)文檔都可以使用Sublime

Text

打開。調(diào)

Setup-SublimeText

3Select

Additional

TasksWhichadditionaltasksshouldbe

performed?SelecttheadditionaltasksyouwouldlikeSetupto

performwhile

installing

SubimeText3,then

dick

Next.?

Addtoexplorercontext

menu點(diǎn)擊“install”安裝，直到“Finish”。2.1下載并安裝2.常用的開發(fā)工具一—SublimeText<Back

Install

CancelSublime

Text操作界面默認(rèn)的語言是全英文，根據(jù)需求可選擇性地將sublimetext

設(shè)置成中文。打開軟件，點(diǎn)擊

Preference,選擇最底部的

搜索框中輸入關(guān)鍵字Install,選擇Package

Control:Package

Control

InstallFile

Edit

Selection

Find

View

Goto

Tools

ProjectPreferencesHelpBrowse

Packages…1SettingsSettings-SyntaxSpecific

Settings-Distraction

Free

KeyBindingsColor

Scheme…Theme.…FontPackageSettingsPackageControlPackage

Control:Install

Local

DependencyPackage

Control:AdvancedInstallPackage2.2中文設(shè)置Package

Control:Install

Package2.常用的開發(fā)工具一—SublimeTextInstall2.2中文設(shè)置等待插件列表加載完成，在搜索框中輸入chinese,

選擇下拉框中的ChineseLocalizations,完成安裝。chineseChineseLocalizationsLocalizationforSublimeText,support簡體中文繁體中文日本語

Chine..wedishandFrench

install

v1.11.7;/rexdf/ChineseLocalizationChinese

Words

CutterSublimeText3的

jieba分詞庫綁定，支持對中文更精確地選詞、刪詞和按詞移動光標(biāo)installv0.0.2;/absop/ChineseTokenizer2.常用的開發(fā)工具一—SublimeText第1章網(wǎng)頁制作入門1.

網(wǎng)頁相關(guān)知識2.

常用的開發(fā)工具——SublimeText3.HTML5基礎(chǔ)4.

任務(wù)實(shí)現(xiàn)用戶瀏覽網(wǎng)頁時看到的內(nèi)容原本都是HTML

格式的，在瀏覽器中通過一些技術(shù)處理將其轉(zhuǎn)換成為了可識別的信息。3.1

HTML5文檔基本格式3.2

HTML5標(biāo)簽及屬性3.3代碼的注釋3.HTML5

基礎(chǔ)第1章網(wǎng)頁制作入門3.1HTML5

文檔基本格式HTML5

文檔的基本格式如下：DOCTYPE

html><head><meta

charset="UTF-8"/><title>Document</title>

</head><body></body></html>3.HTML5

基礎(chǔ)文檔類型聲明→根標(biāo)記頭部標(biāo)記主體標(biāo)記3.

HTML5

基礎(chǔ)3.1

HTML5

文檔基本格式<!DOCTYPE>標(biāo)簽位于文檔的最前面，用于向?yàn)g覽器說明當(dāng)前文檔使用哪種

HTML

標(biāo)準(zhǔn)規(guī)范。<html>標(biāo)簽<!DOCTYPE>標(biāo)簽之后，也被稱為根標(biāo)簽，用于告知瀏覽器其自身是一個

HTML文

檔

，<html>標(biāo)志HTML

文檔的開始，</html>

標(biāo)志著

HTML

文檔的結(jié)束。<head>

標(biāo)簽用于定義

HTML

文檔的頭部信息，也被稱為頭部標(biāo)簽，緊跟在<html>

標(biāo)簽之后。<body>

標(biāo)簽用于定義

HTML

文檔所要顯示的內(nèi)容，也成為主體標(biāo)簽。瀏覽器中顯示的所有文本、圖像、表單與多媒體元素等信息都必須位于<body>

標(biāo)簽內(nèi)。3.HTML5

基礎(chǔ)3.2

HTML5

標(biāo)簽及屬性HTML

標(biāo)簽是由尖括號括起來的關(guān)鍵詞，也稱為

HTML

元

素。分為兩大

類，分別是

“雙標(biāo)簽”與

“單標(biāo)簽”。雙標(biāo)簽雙標(biāo)簽是指由開始和結(jié)束兩個標(biāo)簽符號組成的標(biāo)簽。語法

：<標(biāo)簽名>內(nèi)容</標(biāo)簽名>解釋

：<標(biāo)簽名>表示標(biāo)簽作用開始，

一般稱作“開始標(biāo)簽”。</標(biāo)簽名>表示