網(wǎng)站設計與制作ch02_第1頁
網(wǎng)站設計與制作ch02_第2頁
網(wǎng)站設計與制作ch02_第3頁
網(wǎng)站設計與制作ch02_第4頁
網(wǎng)站設計與制作ch02_第5頁
已閱讀5頁，還剩26頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

網(wǎng)站設計與制作第二課楊曉亮2016年2月1HTML5文檔結(jié)構(gòu)2HTML5常用標記本節(jié)大綱HTML5文件的基本結(jié)構(gòu)<!DOCTYPEhtml>文檔類型申明<html>文件開始的標記<head>文件頭部開始的標記…文件頭部的內(nèi)容</head>文件頭部結(jié)束的標記<body>文件主體開始的標記…文件主體的內(nèi)容</body>文件主體結(jié)束的標記</html>文件結(jié)束的標記完整的HTML文件包括標題、段落、列表、表格、繪制的圖形以及各種嵌入對象，這些對象統(tǒng)稱為HTML元素。文檔類型說明<!DOCTYPEhtml>申明需要出現(xiàn)在HTML5文件的第一行不屬于html標記他是一條指令，目的：告訴瀏覽器編寫頁面所用標記的版本化繁為簡<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">HTML標記<html>…</html>以<html>開頭，以</html>結(jié)尾文檔的所有內(nèi)容書寫在開頭和結(jié)尾的中間可以省略，但不建議省略書寫統(tǒng)一保持小寫頭標記head<head>…</head>用于說明文檔頭部的相關信息，一般包括：標題信息、元信息、css樣式、腳本代碼內(nèi)容不會在網(wǎng)頁上直接顯示頭標記head之title標記<title>…</title>放在head標記之間網(wǎng)頁的標題顯示在瀏覽器的標題欄中頁面的標題只有一個頭標記head之meta元信息標記<meta>放在head標記之間提供頁面相關的元信息，比如：針對搜索引擎和更新頻度的描述和關鍵詞。字符集charset屬性<metacharset=“UTF-8“/>搜索引擎的關鍵詞<metaname="keywords"content="HTML,CSS,JavaScript"/>頁面描述<metaname="description"content="網(wǎng)站設計與制作實踐"

/>頁面定時跳轉(zhuǎn)<metahttp-equiv="refresh"content="1"/>meta標記的屬性及取值屬性值描述charsetcharacterencoding定義文檔的字符編碼contentsome_text定義與http-equiv或name屬性相關的元信息http-equivcontent-type把content屬性關聯(lián)到HTTP頭部。expiresrefreshset-cookienameauthor把content屬性關聯(lián)到一個名稱。descriptionkeywordsgeneratorrevisedothers主體標記body<body>…</body>網(wǎng)頁索要顯示的內(nèi)容都要放在網(wǎng)頁的主體標記內(nèi)它是HTML文件的重點所在不僅僅是一個形式上的標記，它本身也可以控制網(wǎng)頁的背景顏色或背景圖像在構(gòu)建HTML結(jié)構(gòu)時，標記不允許交錯出現(xiàn)，否則會造成錯誤頁面注釋標記<!--><!--注釋的內(nèi)容-->注釋只出現(xiàn)在代碼中，瀏覽器對注釋代碼不進行解釋注釋內(nèi)容在瀏覽器的頁面中不顯示是一種非常好的編碼習慣有助于代碼日后的修改和維護工作課堂動手實踐一動手寫一個完整的html文件，要求：1、文件完整，有標題、有內(nèi)容；2、有2個以上的注釋；3、有一條元信息標題標記在瀏覽網(wǎng)頁時，常看到一些標題文字，用于對文本中的章節(jié)進行劃分，他們以固定的字號顯示。HTML提供了六級標題，<h1>最大，<h6>最小，用戶只需把文字放入這些標記內(nèi)，瀏覽器負責顯示。<h1>這是一級標題</h1><h2>這是二級標題</h2><h3>這是三級標題</h3><h4>這是四級標題</h4><h5>這是五級標題</h5><h6>這是六級標題</h6>要注意的是，每個標題獨占一行，也就是說一行文字里只能有一種標題。段落標記<p><p></p>標記對用來創(chuàng)建一個段落，此標記對之間加入的文本將按照段落的格式顯示在瀏覽器上。標記格式：<palign=“center”>內(nèi)容<p>其align用來說明對齊方式，屬性值有3種left（左對齊）center（居中對齊）right（右對齊）換行標記<br>換行標記<br>是個單標記，它沒有結(jié)束標記。一個<br>標記代表一個換行，連續(xù)的多個標記可以實現(xiàn)多次換行。使用換行標記時，在需要換行的位置添加<br>標記即可。文本格式化標記<b>該文本將以粗體顯示</b><i>該文本將以斜體顯示</i><u>帶下劃線的文本</u>文字<sup>上標</sup>文字<sub>下標</sub>特殊字符 某些字符在HTML中有特殊的含義，例如“<”，“>”等，如果我們想在網(wǎng)頁上顯示這些符號，不能很簡單的就些“<”，“>”，因為它們會被解釋為標簽的開始和結(jié)束。這時候我們就要使用他們的轉(zhuǎn)義碼例如要在網(wǎng)頁中顯示<html>，則用<來表示“<”,否則就會被瀏覽器認為是標簽。對于被瀏覽器忽略的空格，也需要使用

來表示。對于鍵盤無法輸入的符號如版權符號?，也需要使用html編碼©來表示。特殊字符可以用數(shù)值碼和引用實體兩種方式表示。常用轉(zhuǎn)義碼及其對應的符號特殊字符轉(zhuǎn)義碼大于(>)>或>小于(<)<或<&&s;&引號(“)"空格

元(￥)¥版權(?)©注冊商標(?)®課堂動手實踐二動手寫一個完整的html文件，要求用到以下標記：1、<hn>…</hn>n表示1-62、<p>…</p>3、<br>4、<b><i><u><sup><sub>列表 列表用于按邏輯方式對數(shù)據(jù)分組。常用的列表有三種：無序列表有序列表自定義列表無序列表<ul>…</ul>ul:unorderedlist相當于word中的項目符號條列間并無順序關系，純粹只是利用條列方式來呈現(xiàn)資料而已，此種無序標簽，在各條列前面均有一符號以示區(qū)隔無序列表使用<ul>標簽來創(chuàng)建，用<li>表示列表中每一項例：<ul><li>咖啡</li><li>茶</li><li>牛奶</li></ul>無序列表無序列表的前面一定要是圓形的嗎？不，我們也可以加入type=“形狀名稱”屬性來改變其符號形狀，共有三個選擇：disc(實心圓)square(小正方形)circle（空心圓）例：<ultype=“square”><li>咖啡</li><li>茶</li><li>牛奶</li></ul>有序列表<ol>…</ol>ol:orderedlist有序列表就是指各條列之間是有順序的，從1，2，3……一直延伸下去。使用<ol>來標記有序列表，每一項用<li>來標記?？梢杂貌煌姆杹盹@示順序，一樣是用type屬性來作更改，一共有5種符號：1（數(shù)字）A（大寫英文字母）a（小寫英文字母）I（大寫羅馬字母）i（小寫羅馬字母）例：<oltype=“a”><li>咖啡</li><li>茶</li><li>牛奶</li></ol>有序列表也可以改變第一行的編號值，需要添加start屬性。<body><h4>一個有序列表：</h4> <oltype=“1”start=“100”> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ol></body>自定義列表<dl>…</dl>dl:definitionlist自定義列表用于對列表條目進行簡短說明的場合用<dl>開始，列表條目用<dt>引導，說明用<dd>引導例：<body><dl><dt>WWW</dt><dd>worldwideweb,萬維網(wǎng)</dd><dt>URL</dt><dd>uniformresourselocations,統(tǒng)一資源定位符</dd></dl></body>課堂動手實踐三動手寫一個完整的html文件，要求用到以下標記：1、無序列表：<ul>…</ul>2、有序列表：<ol>…</ol>3、自定義列表：<dl>…</dl>網(wǎng)頁中的圖象<img>圖象標記<img>是單標記網(wǎng)頁中圖象格式GIF/JPEG/BMP/PNG等，使用最廣泛主要是GIF/JPEG<img>標簽的屬性，簡單表示如下：

<imgsrc=“圖片地址”

height=“圖片高度”

width=“圖片寬度”

alt=“說明文字”

align=“對齊方式”>圖象來源可以是本地文件也可以是網(wǎng)上圖片

<imgsrc=“images/雪景.jpg”>本地圖片

<imgsrc=“/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png”>百度logo圖片圖象標記屬性名稱說明src指出要加入圖片的文件名，即“圖片文件的路徑\圖片文件名”。alt在瀏覽器尚未完全讀入圖片時，在圖片位置顯示的文字。width寬度（像素數(shù)或百分數(shù)）。通常只設為圖片的真實大小以免失真，若需要改變圖片大小最好事先使用圖片編輯工具。height設定圖片的高度（像素數(shù)或百分數(shù)）。hspace設定圖片邊沿空白，以免文字或其它圖片過于貼近。設定圖片左右的空間水平方向空白像素數(shù)。vspace設定圖片上下的空間，空白高度采用像素作單位。Align圖片在頁面中的對齊/布局方式，或圖片與文字的對齊方式。title圖片標題，當鼠標移動到圖片區(qū)域時會顯示。圖片的布局值說明left圖片居左，文本在圖片的右邊right圖片居右，文本在圖片的左邊top圖片的頂部與文本對齊middle圖片的中央與文本對齊bottom圖片的底部與文本對齊所謂布局，就是圖片放在網(wǎng)頁

溫馨提示

  • 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. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論