版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領
文檔簡介
任務4制作“學習動態(tài)”子頁面0第2章網(wǎng)頁的基本結構實現(xiàn)(1)掌握常用塊元素的用法。知識目標(2)掌握常用行元素的用法。(1)能夠熟練使用段落、標題、列表、通用塊標簽。技能目標
(2)能夠熟練使用超級鏈接、圖像、通用行標簽。(3)能夠使用合適的HTML
標簽創(chuàng)建圖文并茂的網(wǎng)頁。(1)培養(yǎng)自主學習能力。素質(zhì)目標(2)培養(yǎng)具一反三的能力和吃苦耐勞的精神。(3)培養(yǎng)學生從知識到實踐的的程序思維。第2章網(wǎng)頁的基本結構實現(xiàn)1.
常用的塊元素2.
常用的行元素3.
任務實現(xiàn)1.
常用的塊元素1.1
段落與標題1.2通用塊元素1.3常用列表塊元素1.4語義塊元素第2章網(wǎng)頁的基本結構實現(xiàn)1.
常用的塊元素1.1段落與標題HTML
網(wǎng)頁中一篇文章要結構清晰，就需要有標題和段落。段落標簽：<P>格式：<p
align="對齊方式">段落文本</p>注
：align
屬性規(guī)定段落中文本的對齊方式。屬性值有l(wèi)eft,right,center
,justify
。
但不建議使用，建議使用樣式取代。段落標簽：<pre>與
<p>標簽用法基本相同，區(qū)別是<pre>
內(nèi)文本內(nèi)容將保留空格和換行符。1.
常用的塊元素⑤<p>
與<pre>標簽的區(qū)別①文件
|
D:/demo2/example2-1.html這是段落文字這是段落文字這是段落文字這是段落文字這是段落文字這是段落文字這是段落文字這是段落文字1.1段落與標題<body>這是段落文字
這是段落文字這是段落文字這是段落文字
</p><hr><pre>這是段落文字這是段落文字
這是段落文字
這是段落文字</pre></body>1.
常用的塊元素1.1段落與標題HTML
網(wǎng)頁中一篇文章要結構清晰，就需要有標題和段落。標題標簽：<h1>~<h6>標簽可定義標題元素。注
：<h1>
定義最大的標題。<h6>
定義最小的標題。1.
常用的塊元素1.2通用塊元素<div>
標簽：<div>
標簽用來定義文檔中的分區(qū)或節(jié)(division/section)
,
把文檔分割為獨立的、不同的部分。<div>
標簽是一個容器標簽，其中的內(nèi)容可以是任何
HTML
元素。id
和
class
是div標簽最重要的兩個屬性，區(qū)別在于class
用于元素組(某一類元
素
)
,
而
id
用于標識單獨的唯一的元素1.
常用的塊元素1.3常用列表塊元素H
TML
支持有序、無序和定義列表，本質(zhì)是組織文本的一種方式。type值描述1阿拉伯數(shù)字：1、2、3
……A大寫英文字母：A、B、C
……a小寫英文字母：a、b、C
……I大寫羅馬數(shù)字：1、IⅡ、Ⅲ
……I小寫羅馬數(shù)字：i、ii、ii
……有序列表：特定順序的列表項集合格
式
：<oltype=編號類型
start=value>
<li>第一項</li><li>第二項</li><li>第三項</li></ol>表2-1有序列表type屬性取值1.
常用的塊元素有序列表①文件
|D:/demo2/example2-2.html1.蘋果2.香蕉3.菠蘿C.咖啡d.
牛奶e.茶1.3常用列表塊元素<ol><li>蘋果</li><li>
香蕉</li><li>菠蘿</li></ol><ol
type="a"start="3"><li>
咖啡</li><li>牛奶</li><li>茶</li></ol>1.
常用的塊元素1.3常用列表塊元素HTML
支持有序、無序和定義列表，本質(zhì)是組織文本的一種方式。無序列表：列表中列表項的前導符合沒有一定的次序，而是黑點、圓圈、方框等
一些特殊符號標識。type值描述disc表示實心圓(默認)circle表示表示空心圓square表示小方塊格式：<ul
type=編號類型>
<li>第一項</li><li>第二項</li><li>第三項</li>
</ul>表2-2無序列表type屬性取值1.
常用的塊元素無序列表
X①
文
件|
D:/demo2/example2-3.html
應
☆·
首
頁●學校概況●教學在線●院系設置●黨的建設1.3常用列表塊元素<body><ul><li>首頁</li><li>
學校概況</li><li>
教學在線</li><li>院系設置</li><li>黨的建設</li></ul></body>1.
常用的塊元素1.3常用列表塊元素HTML支持有序、無序和定義列表，本質(zhì)是組織文本的一種方式。定義列表：又稱為釋義列表或字典列表，主要用到3個
HTML
標簽：<dl>
標簽、<dt>
和<dd>標簽。格
式
：<dl><dt>
名詞1</dt><dd>
名詞解釋1</dd><dt>
名詞2</dt><dd>
名詞解釋2</dd>●●●</dl>1.3常用列表塊元素<body><dl><dt>Web
前端課程</dt><dd>這里有
html
教程</dd>
<dd>這里有
css
教程</dd>
<dt>Java
課
程
<
/dt><dd>這里有java
開發(fā)教程</dd></dl></body>1.常用的塊元素定義列表
×①文件|
D:/demo2/example2-4.htmlWeb
前端課程這里有html教程這里有cSs教程Java課程這里有java開發(fā)教程標簽名描述<header>表示頁面中一個內(nèi)容區(qū)塊或整個頁面的標題<section>頁面中的一個內(nèi)容區(qū)塊比如章節(jié)、頁眉、頁腳或頁面的其他部分可以
和h1、h2…等元素結合起來使用表示文檔結構<article>表示頁面中一塊與上下文不相關的獨立內(nèi)容比如一篇文章<aside>表示<article>標簽素內(nèi)容之外的、與<article>標簽內(nèi)容相關的輔助信息可用作文章的側(cè)欄<hgroup>表示對整個頁面或頁面中的一個內(nèi)容區(qū)塊的標題進行組合<figure>表示一段獨立的流內(nèi)容一般表示文檔主體流內(nèi)容中的一個獨立單元<figcaption>定義<figure>標簽的標題<nav>表表示頁面中導航鏈接的部分<footer>表示整個頁面或頁面中一個內(nèi)容區(qū)塊的腳注一般來說它會包含創(chuàng)作者的姓名、創(chuàng)作日期以及創(chuàng)作者的聯(lián)系信息1.
常用的塊元素1.4語義塊元素語義元素是擁有語義的元素，它清楚地向瀏覽器和開發(fā)者描述其意義。例如，form、table以及img能清晰地定義其內(nèi)容。表2-3語義塊元素1.常用的塊元素1.4語義塊元素header元
素
：具有引導和導航作用，通常放在頁面頭部。<header><h1>網(wǎng)頁主題</h1></header>nav
元
素
：用于定義導航鏈接，將具有導航性質(zhì)的鏈接歸納在一個區(qū)域中。<nav><ul><li><a
href="#">首頁</li><li><a
href="#">公司概況</li></ul></nav>article元
素
：經(jīng)常被用于定義一篇日志、
一條新聞或用戶評論等。<article><header><h2>第二章</h2></header></article>1.常用的塊元素1.4語義塊元素aside元
素
：定義頁面內(nèi)容以外的某些內(nèi)容。section
元
素
：素定義文檔中的節(jié)，即文檔的各個部分。例如章節(jié)，頁眉。<section><h1>第1節(jié)</h1><p>
第1節(jié)內(nèi)容</p></section><section><h1>
第2節(jié)</h1><p>
第2節(jié)內(nèi)容</p></section>1.
常用的塊元素1.4語義塊元素figure
和
figcaption
元
素
：搭配使用，定義<figure>
標簽的標題。<figure>⑤figure
和figcaption
元素的使用
×<imgsrc="images/img_1.jpg"alt="pic"width="304"height="228">
<figcaption>
學習貫徹黨的二十大精神</figcaption></figure>①文
件
|
D:/demo2/example2-10.htmlfooter
元
素
：定義一個頁面或者區(qū)域的底部，
學習貫徹黨的二十大精神通常包含文檔的作者、版權信息、使用條款鏈接、聯(lián)系信息等等。第2章網(wǎng)頁的基本結構實現(xiàn)1.
常用的塊元素2.
常用的行元素3.
任務實現(xiàn)2.常用的行元素2.1
超鏈接a2.2
通用行內(nèi)元素span2.3圖像img2.4文本格式化元素第2章網(wǎng)頁的基本結構實現(xiàn)超鏈接：點擊超鏈接跳轉(zhuǎn)到新的文檔或者當前文檔中的某個部分，本質(zhì)上是網(wǎng)頁的一部分，通過<a></a>
標簽環(huán)繞鏈接對象創(chuàng)建。格
式：<a
href=""target=""title="">鏈接對象</a>href屬性定義了這個鏈接所指的目標地址；title
屬性定義鏈接提示文字；target
屬性定義指定打開鏈接的目標窗口的方式；表2-5target屬性值值描述_blank表示在新窗口中打開被鏈接的文檔_self默認。在相同的框架中打開被鏈接文檔parent在父框架集中打開被鏈接文檔_top在整個窗口中打開被鏈接文檔framename指定框架中打開被鏈接文檔2.1超鏈接a2.常用的行元素超鏈接的分類：根據(jù)超鏈接目標文件的不同，超鏈接可分為頁面超鏈接、錨點超鏈接和電子郵件超鏈接等
；
根據(jù)超鏈接的對象不同，超鏈接可分為文字超鏈接、圖像超鏈接和圖像映射等。2.1超鏈接a2.常用的行元素<img
src="圖像地址"usemap="#影像地圖名稱"><map
name="影像地圖名稱"><area
shape="熱區(qū)形狀”coords="熱區(qū)坐標"href="鏈接地址
"/></map><a
id="錨點名稱">文字</a><a
href="#錨點的名稱">鏈接的文字</a><a
href="URL">超鏈接文字</a><a
href="鏈接地址"><img
src="源文件地址"></a><a
href="mailto:E-mail地址">超鏈接文本</a>錨點鏈接：先定義錨點，再通過
id名標注跳轉(zhuǎn)到錨點目標的位置。2.1超鏈接a電子郵件鏈接文字超鏈接圖像超鏈接圖像映射2.常用的行元素2.常用的行元素2.2通用行內(nèi)元素
spanspan
元
素
：在網(wǎng)頁的效果上看不出什么意義，但是通過
id屬性、style
屬性、class
屬性設置和JavaScript
可以改變span
元素內(nèi)容的排版布局。格
式
：<span>
文本和其他內(nèi)聯(lián)元素</span>特
點：(1)<span>
標簽沒有特定的含義，可用作文本的容器，用來組合文檔中的行內(nèi)元素。(
2
)
當
與CSS一起使用時，<span>元素可為部分文本設置樣式屬性。(3)<span>
標簽只能包含文本和其他內(nèi)聯(lián)元素，不能將塊級元素放入其中。2.常用的行元素2.3圖像
imgHTML
網(wǎng)頁中經(jīng)常需要插入圖片，使頁面更加美觀，表達更加清晰。格
式：<img
src="被引用圖片的地址"alt="圖片的代替文本">img標簽屬性：屬性屬性值描述srcURL圖像的路徑alt文本圖像不能顯示時的文本title文本鼠標懸停時顯示的內(nèi)容width像素(支持百分比)設置圖像的寬度height像素(支持百分比)設置圖像的高度border數(shù)字不推薦使用。定義圖像周圍的邊框vspace像素不推薦使用。定義圖像頂部和底部的空白hspace像素不推薦使用。定義圖像左側(cè)和右側(cè)的空白alignleft、right、top、middle、bottom不推薦使用。規(guī)定如何根據(jù)周圍的文本來排列圖像2.常用的行元素2.3圖像
img圖像路徑：絕
對
路
徑
是
主
頁
上
的
文
件
或
目
錄
在
硬
盤
上
的
真
正
路
徑
或
網(wǎng)
址
。例如：
“C:/website/img/ph
溫馨提示
- 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. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2026浙江溫州大學國際教育學院招聘1人考試備考試題及答案解析
- 2026江西吉安市吉水縣旅游開發(fā)投資有限公司招聘場館營業(yè)員2人考試參考試題及答案解析
- 樂清市人力資源和社會保障局公開選調(diào)1名下屬事業(yè)單位工作人員考試備考題庫及答案解析
- 2026福建泗華小學編外合同教師自主招聘1人考試備考試題及答案解析
- 2026年普洱市瀾滄縣人民法院招聘院級保障書記員及警務輔助人員（4人）考試備考題庫及答案解析
- 2026福建南平市公路應急保障中心招聘1人考試參考試題及答案解析
- 2026云南迪慶州德欽縣公安局招聘警務輔助人員2人考試參考題庫及答案解析
- 2026內(nèi)蒙古呼和浩特市愛民華瑞醫(yī)院招聘筆試備考試題及答案解析
- 2026年曲靖市師宗縣消防救援大隊招聘政府專職消防員（30人）筆試模擬試題及答案解析
- 2026上海金山法院招錄公務員8人考試備考試題及答案解析
- 人事行政部2026年年度計劃
- 2026年上海市徐匯區(qū)老年大學招聘教務員備考題庫完整參考答案詳解
- 2025貴州貴陽產(chǎn)業(yè)發(fā)展控股集團有限公司招聘27人考試參考題庫附答案
- 2026貴州省法院系統(tǒng)招聘聘用制書記員282人筆試參考題庫及答案解析
- 自然資源部所屬單位2026年度公開招聘工作人員備考題庫（第一批634人）含答案詳解
- 2025內(nèi)蒙古交通集團有限公司社會化招聘168人筆試考試參考試題及答案解析
- 蘇州工業(yè)園區(qū)領軍創(chuàng)業(yè)投資有限公司招聘備考題庫必考題
- 新疆2025新疆師范大學招聘事業(yè)編制人員（專任教師崗與實驗教師崗）總筆試歷年參考題庫典型考點附帶答案詳解(3卷合一)
- 2025廣東東莞市東城街道辦事處2025年招聘23人模擬筆試試題及答案解析
- 青海工程建設監(jiān)理統(tǒng)一用表
評論
0/150
提交評論