HTML5+CSS3筆記_第1頁(yè)
HTML5+CSS3筆記_第2頁(yè)
HTML5+CSS3筆記_第3頁(yè)
HTML5+CSS3筆記_第4頁(yè)
HTML5+CSS3筆記_第5頁(yè)
已閱讀5頁(yè)，還剩16頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、HTML51、 HTML5概述2、 HTML5基本格式一.HTML5文檔結(jié)構(gòu)1 .第一步：打開(kāi)SublimeText3,打開(kāi)指定文件夾；2,第二步：保存index.html文件到磁盤(pán)中，.html是網(wǎng)頁(yè)后綴；3.第三步：開(kāi)始編寫(xiě)HTML5的基本格式。<!DOCTYPEhtml>/文檔類型聲明<htmllang="zh-cn">/表示HTML文檔開(kāi)始<head>/包含文檔元數(shù)據(jù)開(kāi)始<metacharset="utf-8">/聲明字符編碼<title>基本Z構(gòu)</title>/設(shè)置文檔標(biāo)

2、題</head>/包含文檔元數(shù)據(jù)結(jié)束<body>/表示HTML文檔內(nèi)容<ahref="">百度</a>/一個(gè)超鏈接元素(標(biāo)簽)</body>/表示HTML</html>/表示HTML文檔結(jié)束二.文檔結(jié)構(gòu)解析1 .Doctype文檔類型聲明(DocumentTypeDeclaration,也稱Doctype)。它主要告訴瀏覽器所查看的文件類型。在以往的HTML4.01和XHTML1.0中，它表示具體的HTML版本和風(fēng)格。而如今HTML5不需要表示版本和風(fēng)格了。<!DOCTYPEhtml>/不分

3、區(qū)大小寫(xiě)2 .html元素首先，元素就是標(biāo)簽的意思，html元素即html標(biāo)簽。html元素是文檔開(kāi)始和結(jié)尾的元素。它是一個(gè)雙標(biāo)簽，頭尾呼應(yīng)，包含內(nèi)容。這個(gè)元素有一個(gè)屬性和值：lang="zh-cn"表示文檔采用語(yǔ)言為：簡(jiǎn)體中文。<htmllang="zh-cn">/如果是英文則為en3 .head元素用來(lái)包含元數(shù)據(jù)內(nèi)容，元數(shù)據(jù)包括：<link>、<meta>、<noscript>、<script>、<style>、<title>。這些內(nèi)容用來(lái)瀏覽器提供信息，比如link

4、提供CSS信息，script提供JavaScript信息，title提供頁(yè)面標(biāo)題等。<head>.</head>/這些信息在頁(yè)面不可見(jiàn)4 .meta元素這個(gè)元素用來(lái)提供關(guān)于文檔的信息，起始結(jié)構(gòu)有一個(gè)屬性為：charset="utf8"。表示告訴瀏覽器頁(yè)面采用的什么編碼，一般來(lái)說(shuō)我們就用utf8。當(dāng)然，文件保存的時(shí)候也是utf8,而瀏覽器也設(shè)置utf8即可正確顯示中文。<metacharset="utf-8">/除了設(shè)置編碼，還有別的5 .title元素這個(gè)元素很簡(jiǎn)單，顧名思義：設(shè)置瀏覽器左上角的標(biāo)題。<title

5、>基本結(jié)構(gòu)</title>6 .body元素用來(lái)包含文檔內(nèi)容的元素，也就是瀏覽器可見(jiàn)區(qū)域部分。所有的可見(jiàn)內(nèi)容，都應(yīng)該在這個(gè)元素內(nèi)部進(jìn)行添加。<body>.</body>7 .a元素一個(gè)超鏈接，后面會(huì)詳細(xì)探討。<ahref="">百度</a>三.元素標(biāo)簽探討HTML是一種標(biāo)記語(yǔ)言，剛才的結(jié)構(gòu)我們已經(jīng)詳細(xì)探討過(guò)。這里，我們?cè)倨饰鲆幌逻@些“標(biāo)記”或者叫“標(biāo)簽”，書(shū)面上經(jīng)常稱作為“元素”的東西是怎么構(gòu)成的。1 .元素元素就是一組告訴瀏覽器如何處理一些內(nèi)容的標(biāo)簽。每個(gè)元素都有一個(gè)關(guān)鍵字，比如<body>、&

6、lt;title>、<meta>都是元素。不同的標(biāo)簽名稱代表不同的意義，后面將會(huì)涉及到段落標(biāo)簽、文本標(biāo)簽、鏈接標(biāo)簽、圖片標(biāo)簽等。元素一般分為兩種：?jiǎn)螛?biāo)簽（空元素）和雙標(biāo)簽。單標(biāo)簽一般用于聲明或者插入某個(gè)元素，比如聲明字符編碼就用<meta>,插入圖片就用<img>；雙標(biāo)簽一般用于設(shè)置一段區(qū)域的內(nèi)容，將其包含起來(lái)，比如段落<p>.</p>。2 .屬性和值元素除了有單雙之分，元素的內(nèi)部還可以設(shè)置屬性和值。這些屬性值用來(lái)改變?cè)啬承┓矫娴男袨?。比如超鏈接?lt;a>中的href屬性，里面替換網(wǎng)址即可鏈接到不同的網(wǎng)站。當(dāng)然一個(gè)元

7、素里面可以設(shè)置多個(gè)屬性，甚至自定義屬性。3、 HTML5文本元素一.文本元素總匯HTML5規(guī)范指出：使用元素應(yīng)該完全從元素的語(yǔ)義出發(fā)。但是由于歷史遺留及用戶至上的原則，這種語(yǔ)義會(huì)寬松許多。元素名稱說(shuō)明a生成超鏈接br強(qiáng)制換行wbr可安全換行b標(biāo)記一段文字但不強(qiáng)調(diào)strong表示重要i表示外文或科學(xué)術(shù)語(yǔ)em表示強(qiáng)調(diào)code表示計(jì)算機(jī)代碼var表示程序輸出samp表示變量kdb表示用戶輸入abbr表示縮寫(xiě)cite表示其他作品的標(biāo)題del表示被刪除的文字s表示文字已不再確認(rèn)dfn表示術(shù)語(yǔ)定義mark表示與另一段上下文有關(guān)的內(nèi)容q表示引自他處的內(nèi)容rp與ruby元素結(jié)合使用，標(biāo)記括號(hào)rt與ruby元素

8、結(jié)合使用，標(biāo)記括號(hào)ruby表示位于表意文字上方或右方的注音符號(hào)bdo控制文字的方向small表示小號(hào)字體內(nèi)容sub表示下標(biāo)字體sup表示上標(biāo)字體time表示時(shí)間或日期u標(biāo)記一段文字但不強(qiáng)調(diào)span通用元素，沒(méi)有任何語(yǔ)義。一般配合CSS修飾。從上面這張表格中，我們發(fā)現(xiàn)文本元素還是非常多的。但實(shí)際上，在現(xiàn)實(shí)應(yīng)用中，真正常用的也就是那么幾個(gè)，絕大部分是針對(duì)英文的。二.文本元素解析1 .<b>表示關(guān)鍵字和產(chǎn)品名稱<b>HTML5</b>解釋：<b>元素實(shí)際作用就是加粗。從語(yǔ)義上來(lái)看，就是標(biāo)記一段文字，但并不是特別強(qiáng)調(diào)或重要性。比如：一段文本中的某些關(guān)鍵字

9、或者產(chǎn)品的名稱。2 .<strong>表示重要的文字<strong>HTML5</strong>解釋：<strong>元素實(shí)際作用和<b>一樣，就是加粗。從語(yǔ)義上來(lái)看，就是強(qiáng)調(diào)一段重要的文本。3 .<br>強(qiáng)制換行、<wbr>安全換行<br>Thisabc<wbr>dkedkslakdj<wbr>fkdlsakdisapple.解釋：在任意文本位置鍵入<br>都會(huì)被換行，而在英文單詞過(guò)長(zhǎng)時(shí)使用<wbr>會(huì)根據(jù)瀏覽器的寬度適當(dāng)?shù)牟们袚Q行。4 .<i

10、>表示外文詞匯或科技術(shù)語(yǔ)<i>HTML5</i>解釋：<i>元素實(shí)際作用就是傾斜。從語(yǔ)義上來(lái)看，表示區(qū)分周?chē)鷥?nèi)容，并不是特別強(qiáng)調(diào)或重要性。5 .<em>力口以強(qiáng)調(diào)<em>HTML5</em>解釋：<em>元素實(shí)際作用和<i>一樣，就是傾斜；從語(yǔ)義上來(lái)看，表示對(duì)一段文本的強(qiáng)調(diào)。6 .<s>表示不準(zhǔn)確或校正<s>HTML5</s>解釋：<s>元素實(shí)際作用就是刪除線；從語(yǔ)義上來(lái)看，表示不準(zhǔn)確的刪除。7 .<del>表示刪除文字<del

11、>HTML5</del>解釋：<del>元素實(shí)際作用和<s>一樣，就是刪除線；從語(yǔ)義上來(lái)看，表示刪除相關(guān)文8 .<u>表示給文字加上下劃線<u>HTML5</u>解釋：<u>元素實(shí)際作用就是加一條下劃線；從語(yǔ)義上來(lái)看，并不強(qiáng)調(diào)此段文本。9 .<ins>添加一段文本<ins>HTML5</ins>解釋：<ins>元素實(shí)際作用和<u>一樣，加一條下劃線；從語(yǔ)義上來(lái)看，是添加一段文本，起到強(qiáng)調(diào)的作用。10 .<small>添加小號(hào)字體<

12、;small>HTML5</small>解釋：<small>元素實(shí)際作用就是將文本放小一號(hào)。從語(yǔ)義上來(lái)看，用于免責(zé)聲明和澄清聲明。11 .<sub><sup>添加上標(biāo)和下標(biāo)<sub>5</sub><sup>5</sup>解釋：<sub>和<sup>元素實(shí)際作用就是數(shù)學(xué)的上標(biāo)和下標(biāo)。語(yǔ)義也是如此。12 .<code>等表示輸入和輸出<code>HTML5</code><var>HTML5</var><sam

13、p>HTML5</samp><kdb>HTML5</kdb>解釋：<code>表示計(jì)算機(jī)代碼片段；<var>表示編程語(yǔ)言中的變量；<samp>表示程序或計(jì)算機(jī)的輸出；<kdb>表示用戶的輸入。由于這屬于英文范疇的，必須將lang="en"英語(yǔ)才能體現(xiàn)效果。13 .<abbr>表示縮寫(xiě)<abbr>HTML5</abbr>解釋：<abbr>元素沒(méi)有實(shí)際作用；從語(yǔ)義上看，是一段文本的縮寫(xiě)。14 .<dfn>表示定義術(shù)語(yǔ)<dfn

14、>HTML5</dfn>解釋：<dfn>元素就是一般性的傾斜；從語(yǔ)義上看，表示解釋一個(gè)詞或短語(yǔ)的一段文本。15 .<q>引用來(lái)自他處的內(nèi)容<q>HTML5</q>解釋：<q>元素實(shí)際作用就是加了一對(duì)雙引號(hào)。從語(yǔ)義上來(lái)看，表示引用來(lái)自其他地方的內(nèi)容。16 .<cite>引用其他作品的標(biāo)題<cite>HTML5</cite>解釋：<cite>元素實(shí)際作用就是加粗。從語(yǔ)義上來(lái)看，表示引用其他作品的標(biāo)題。17 .<ruby>語(yǔ)言元素<ruby>饕<

15、rp>(</rp><rt>tB</rt><rp>)</rp>H<rp>(</rp><rt>tie</rt><rp>)</rp></ruby>解釋：<ruby>用來(lái)為非西方語(yǔ)言提供支持。<rp><rt>用來(lái)幫助讀者掌握表意語(yǔ)言文字正確發(fā)音。比如：漢語(yǔ)拼音在文字的上方。但目前Firefox還不支持此特性。18 .<bdo>設(shè)置文字方向<bdodir="rtl">HTML5

16、</bdo>解釋：<bdo>必須使用屬性dir才可以設(shè)置，一共兩個(gè)值：rtl(從右到左)和ltr(從左到右）。一般默認(rèn)是ltr。還有一個(gè)<bdi>元素也是處理方向的，由于是特殊語(yǔ)言的特殊效果，且主流瀏覽器大半不支持，忽略。19 .<mark>突出顯示文本<mark>HTML5</mark>解釋：<mark>實(shí)際作用就是加上一個(gè)黃色的背景，黑色的字；從語(yǔ)義上來(lái)看，與上下文相關(guān)而突出的文本，用于記號(hào)。20 .<time>表示日期和時(shí)間<time>2015-10-10</time>

17、解釋：<time>元素沒(méi)有實(shí)際作用；從語(yǔ)義上來(lái)看，表示日期和時(shí)間。21 .<span>表示一般性文本<span>HTML5</span>解釋：<span>元素沒(méi)有實(shí)際作用；語(yǔ)義上就是表示一段文本，我們經(jīng)常用它來(lái)設(shè)置CSS等操作。4、 HTML5超鏈接和路徑一.超鏈接的屬性<a>元素屬于文本元素，有一些私有屬性或者叫局部屬性。那么，相對(duì)應(yīng)的還有通用屬性或叫做全局屬性。這方面的知識(shí)，后面會(huì)詳細(xì)探討。屬性名稱說(shuō)明href指定<a>元素所指資源的URLhreflang指向的鏈接資源所使用的語(yǔ)言media說(shuō)明所鏈接資源用

18、于哪種設(shè)備rel說(shuō)明文檔與所鏈接資源的關(guān)系類型target指定用以打開(kāi)所鏈接資源的瀏覽環(huán)境type說(shuō)明所鏈接資源的MIME類型（比如text/html）在這幾個(gè)屬性當(dāng)中，只有href和target一般比較常用，而href是必須要用的。其他幾個(gè)屬性，在<a>元素使用較少，將在CSS章節(jié)再探討。1 .href屬性<ahref="">百度</a>解釋：href是必須屬性，否則<a>元素就變成空元素了。如果屬性值是http:/開(kāi)頭的URL,意味著點(diǎn)擊跳轉(zhuǎn)到指定的外部網(wǎng)站。2 .target屬性<ahref=""

19、;target="_blank">百度</a>解釋：target屬性告訴瀏覽器希望將所鏈接的資源顯示在哪里。屬性名稱說(shuō)明blank在新窗口或標(biāo)簽頁(yè)中打開(kāi)文檔parent在父窗中！組（frameset）中打開(kāi)文檔self在當(dāng)前窗口打開(kāi)文檔（默認(rèn)）_top在頂層窗口打開(kāi)文檔這四種最常用的是_blank,新建一個(gè)窗口。而_self是默認(rèn)，當(dāng)前窗口打開(kāi)。_parent和_top是基于框架頁(yè)面的，分別表示在父窗口打開(kāi)和在整個(gè)窗口打開(kāi)。而HTML5中，框架基本被廢棄，只能使用<iframe>元素，且以后大量結(jié)合JavaScript和PHP等語(yǔ)言配合，框架用

20、的就很少了。二.相對(duì)與絕對(duì)路徑所謂相對(duì)路徑，就是相對(duì)于鏈接頁(yè)面而言的另一個(gè)頁(yè)面的路徑。而絕對(duì)路徑，就是直接從file:/磁盤(pán)符開(kāi)始的完整路徑。我們?cè)谕粋€(gè)目錄下做上兩個(gè)頁(yè)面，其中一個(gè)頁(yè)面鏈接到另一個(gè)頁(yè)面。1 .絕對(duì)路徑<ahref="file:/D:/備課/HTML5第一季/code/index2.html">index2</a>解釋：首先是file:/開(kāi)頭，然后是磁盤(pán)符，然后是一個(gè)個(gè)的目錄層次，找到相應(yīng)文件。這種方式最致命的問(wèn)題是，當(dāng)整個(gè)目錄轉(zhuǎn)移到另外的盤(pán)符或其他電腦時(shí)，目錄結(jié)構(gòu)一旦出現(xiàn)任何變化，鏈接當(dāng)即失效。2 .相對(duì)路徑<ahref=&q

21、uot;index2.html">index2</a>解釋：相對(duì)路徑的條件是必須文件都在一個(gè)磁盤(pán)或目錄下，如果是在同一個(gè)目錄下，直接屬性值就是被鏈接的文件名.后綴名。如果在同一個(gè)主目錄下，有多個(gè)子目錄層次，那就需要使用目錄結(jié)構(gòu)語(yǔ)法。3 .目錄語(yǔ)法同一個(gè)目錄：index2.html或./index2.html;在子目錄：xxx/index2.html;在孫子目錄：xxx/xxx/index2.html;在父目錄：./index2.html;在爺爺目錄：././index2.html;三.錨點(diǎn)設(shè)置超鏈接也可用來(lái)將同一個(gè)文檔中的另一個(gè)元素移入視野。通過(guò)屬性id或name實(shí)

22、現(xiàn)錨點(diǎn)定位。/鏈接<ahref="#1">第一章</a><ahref="#2">第二章</a><ahref="#3">第三章</a>/錨點(diǎn)<aname="1"></a><aid="3"></a>5、 HTML5分組元素一.分組元素總匯為了頁(yè)面的排版需要，HTML5提供了幾種語(yǔ)義的分組元素。元素名稱說(shuō)明p表示段落div一個(gè)沒(méi)有任何語(yǔ)義的通用元素，和span是對(duì)應(yīng)元素blockqu

23、ote表示引自他出的大段內(nèi)容pre表示其格式應(yīng)被保留的內(nèi)容hr表示段落級(jí)別的主題轉(zhuǎn)換，即水平線ul,ol表本無(wú)序列表，有序列表li用于ul,ol元素中的列表項(xiàng)dl,dt,dd表示包含一系列術(shù)語(yǔ)和定義說(shuō)明的列表。dt在dl內(nèi)部表示術(shù)語(yǔ)，一般充當(dāng)標(biāo)題；dd在dl內(nèi)部表示定義，一般是內(nèi)容。figure表示圖片figcaption表示figure元素的標(biāo)題二.分組元素解析1 .<p>建立段落<p>這是一個(gè)段落</p><p>這也是一個(gè)段落</p>解釋：<p>元素實(shí)際作用就是將內(nèi)部包含的文本形成一個(gè)段落；而段落和段落之間保持一定量的空

24、隙。2 .<div>通用分組<div>這是一個(gè)通用分組</div><div>這是又一個(gè)通用分組</div>解釋：<div>元素在早期的版本中非常常用，通過(guò)<div>這種一般性分組元素進(jìn)行布局。而在HTML5中，由于語(yǔ)義的緣故，被其他各種文檔元素所代替。和<p>段落的區(qū)別就是，兩段文本的上下空隙是沒(méi)有的，空隙間隔和<br>換行一樣。3 .<blockquote>引用大段他出內(nèi)容<blockquote>這是一個(gè)大段引自他出內(nèi)容</blockquote>&l

25、t;blockquote>這是另一個(gè)大段引自他出內(nèi)容</blockquote>解釋：<blockquote>元素實(shí)際作用除了和<p>元素一樣，有段落空隙的功能，還包含了首尾縮進(jìn)的功能。語(yǔ)義上表示，大段的引用他出的內(nèi)容。4 .<pre>展現(xiàn)格式化內(nèi)容<pre>#</pre>解釋：<pre>元素實(shí)際作用就是編輯器怎么排版的，原封不動(dòng)的展現(xiàn)出來(lái)。當(dāng)然，這種只適合簡(jiǎn)單的排版，復(fù)雜的排版就無(wú)法滿足要求了。5 .<hr>添加分隔<hr>解釋：<hr>元素實(shí)際作用就是添加一條分割線，

26、意圖呈現(xiàn)上下文主題的分割。6 .<ul><li>添加無(wú)序列表<ul><li>張三</li><li>李四</li><li>王五</li><li>馬六</li></ul>解釋：<ul>元素表示無(wú)序列表，而<li>元素則是內(nèi)部的列表項(xiàng)。7 .<ol><li>添加有序列表<ol><li>張三</li><li>李四</li><li>王五<

27、/li><li>馬六</li></ol>解釋：<ol>元素表示有序列表，而<li>元素則是內(nèi)部的列表項(xiàng)。<ol>元素目前支持三種屬性。ol元素屬性屬性名稱說(shuō)明start從第幾個(gè)序列開(kāi)始統(tǒng)計(jì)：<olstart="2">reversed是否倒序排列：<olreversed>,一半主流瀏覽器不支持type表示列表的編號(hào)類型，值分別為：1、a、A、i、Ili元素屬性屬性名稱說(shuō)明value強(qiáng)行設(shè)置某個(gè)項(xiàng)目的編號(hào)。<livalue="7">王五</

28、li>8 .<dl><dt><dd>生成說(shuō)明列表<dl><dt>這是一份文件</dt><dd>這里是這份文件的詳細(xì)內(nèi)容1</dd><dd>這里是這份文件的詳細(xì)內(nèi)容2</dd></dl>解釋：這三個(gè)元素是一個(gè)整體，但<dt>或<>并非都必須出現(xiàn)。9 .<figure><figcaption>使用插圖<figure><figcaption>這是一張圖</figcaption>&l

29、t;imgsrc="img.png"></figure>解釋：這兩個(gè)元素一般用于圖片的布局。6、 HTML5表格元素一.表格元素總匯表格的基本構(gòu)成最少需要三個(gè)元素：<table>、<tr>、<td>,其他的一些作為可選輔助存在。元素名稱說(shuō)明table表不'表格thead表示標(biāo)題行tbody表不表格主體tfoot表示表腳tr表示一行單元格th表示標(biāo)題行單元格td表示單元格col表不'一"列colgroup表示一組歹Ucaption表示表格標(biāo)題二.構(gòu)建表格解析1 .<table><

30、tr><td>構(gòu)建基礎(chǔ)表格<tableborder="1"><tr><td>張三</td><td>男</td><td>未婚</td></tr><tr><td>李四</td><td>女<例><td>已婚</td></tr></table>解釋：<table>元素表示一個(gè)表格的聲明，<tr>元素表示表格的一"行，&

31、lt;td>元素表示一個(gè)單元格。默認(rèn)情況下表格是沒(méi)有邊框的，所以，在<table>元素增加一個(gè)border屬性，設(shè)置為1即可顯示邊框。2 .<th>為表格添加標(biāo)題單元格<tableborder="1"style="width:300px;"><tr><th>姓名</th><th>性另1J</th><th>婚姻</th></tr><tr><td>張三</td><td>男&l

32、t;/td><td>未婚</td></tr><tr><td>李四</td><td>女<例><td>已婚</td></tr></table>解釋：<th>元素主要是添加標(biāo)題行的單元格，實(shí)際作用就是將內(nèi)部文字居中且加粗。這里使用了一個(gè)通用屬性style,主要用于CSS樣式設(shè)置，以后會(huì)涉及到。<th><td>均屬于單元格，包含兩個(gè)合并屬性：colspan、rowspan等。3 .<thead>添加表頭&l

33、t;thead><tr><th>姓名</th><th>性另1J</th><th>婚姻</th></tr></thead>解釋：<thead>元素就是限制和規(guī)范了表格的表頭部分。尤其是以后動(dòng)態(tài)生成表頭，它的位置是不固定的，使用此元素可以限定在開(kāi)頭位置。4 .<tfoot>添加表腳<tfoot><tr><tdcolspan="3">統(tǒng)計(jì)：共兩名</td></tr></tfoot

34、>解釋：<tfoot>元素為表格生成表腳，限制在表格的底部。5 .<tbody>添加表主體<tbody><tr><td>張三</td><td>男</td><td>未婚</td></tr><tr><td>李四</td><td>女<例><td>已婚</td></tr></tbody>解釋：<tbody>元素主要是包含住非表頭表腳的主體部分，有助

35、于表格格式的清晰，更加有助于后續(xù)CSS和JavaScript的控制。6 .<caption>添加表格標(biāo)題<caption>這是一個(gè)人物表</caption>解釋：<caption>元素給表格添加一個(gè)標(biāo)題。7 .<colgroup>設(shè)置歹U<colgroupspan="2"style="background:red;">解釋：<colgroup>元素是為了處理某個(gè)列，span屬性定義處理哪些列。1表示第一列，2表示前兩列。如果要單獨(dú)設(shè)置第二列，那么需要聲明兩個(gè)，先處理第一個(gè)

36、，將列點(diǎn)移入第二位，再處理第二個(gè)即可。8 .<col>更靈活的設(shè)置列<colgroup><col><colstyle="background:red;"span="1"></colgroup>解釋：<col>元素表示單獨(dú)一列，一個(gè)表示一列，控制更加靈活。如果設(shè)置了span則，控制多列。7、 HTML5文檔元素一.文檔元素總匯文檔元素基本沒(méi)有什么實(shí)際作用效果，主要目的是在頁(yè)面布局時(shí)區(qū)分各個(gè)主題和概念。元素名稱說(shuō)明hlh6表不'標(biāo)題header表示首部footer表示尾部nav表

37、示有意集中在一起的導(dǎo)航元素section表示重要概念或主題article表示一段獨(dú)立的內(nèi)容address表示文檔或article的聯(lián)系信息aside表示與周邊內(nèi)容少有牽涉的內(nèi)容hgroup將一組標(biāo)題組織在一起details生成一個(gè)區(qū)域，用戶將其展開(kāi)可以獲得更多細(xì)節(jié)summary用在details元素中，表示該元素內(nèi)容的標(biāo)題或說(shuō)明二.文檔元素解析文檔元素的大部分標(biāo)簽，是沒(méi)有任何效果的，完全是為了配合語(yǔ)義使用，以強(qiáng)調(diào)它的結(jié)構(gòu)性。只有在后面的章節(jié)學(xué)習(xí)CSS,配合使用才能起到布局和樣式的效果。1 .<header>表示首部<header>這里部分一般是頁(yè)面頭部，包括：LOGO標(biāo)

38、題、導(dǎo)航等內(nèi)容</header>解釋：<header>元素主要設(shè)置頁(yè)面的標(biāo)頭部分。2 .<footer>表示尾部<footer>這里是頁(yè)面的尾部，一般包括：版權(quán)聲明、友情鏈接等內(nèi)容</footer>解釋：<footer>元素主要設(shè)置頁(yè)面的尾部。3 .<h1><h6>添加標(biāo)題<h1>標(biāo)題部分</h1><h4>小標(biāo)題部分</h4>解釋：<h1><h6>實(shí)際作用就是加粗并改變字體大小。用于各種標(biāo)題文檔。4 .<hgroup>組合標(biāo)題<hgroup><h1>標(biāo)題部分</h1><h4>小標(biāo)題部分</h4></hgroup>解釋：<hgroup>元素的作用就是當(dāng)多個(gè)標(biāo)題出現(xiàn)，干擾到一對(duì)或多個(gè)本身需要整合的標(biāo)題，這是使用此元素包含群組。5 .<section>文檔主題<sectio

溫馨提示

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

評(píng)論

0/150

提交評(píng)論