傳智播客-張鵬-html+css課件筆記_第1頁
傳智播客-張鵬-html+css課件筆記_第2頁
傳智播客-張鵬-html+css課件筆記_第3頁
傳智播客-張鵬-html+css課件筆記_第4頁
傳智播客-張鵬-html+css課件筆記_第5頁
已閱讀5頁，還剩64頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第一部分:輕松學習HTML

第二部分:Div+Css網(wǎng)頁布局主講：張鵬

郵箱：seo100@126.com本文摘自傳智播客-張鵬老師的課件，只為大家更好學習傳智播客課程，若有不當或涉及到您的利益時，請及時聯(lián)系本人，本人會及時更正。輕松學習HTML第一課

HTML語言基礎主講：張鵬

郵箱：seo100@126.com網(wǎng)站設計師精品就業(yè)班課程體系北京傳智播客教育網(wǎng)站設計師設計PS網(wǎng)頁效果圖設計Flash網(wǎng)頁動畫設計HtmlXhtmlDIV+CSSJavascriptJQuery制作網(wǎng)站設計師行業(yè)職位需求分析北京傳智播客教育網(wǎng)站美工網(wǎng)站編輯網(wǎng)頁設計師網(wǎng)頁制作網(wǎng)站前端工程師FLASH動畫設計師總結——職位多，選擇多，機會多！網(wǎng)站設計師行業(yè)職位薪水北京傳智播客教育目標認識什么是HTML標記的語法掌握常用的HTML標記的應用網(wǎng)頁是用什么制作出來的HTML簡介HTML（HyperTextMark-upLanguage超文本標記語言）的縮寫，標記：就是用來描述網(wǎng)頁內容的一些特定符號。HTML不是編程語言，而是一種描述性的標記語言，用于描述網(wǎng)頁中內容的顯示方式，比如文字以什么顏色、大小來顯示，這些都是利用html標記來實現(xiàn)。Html文檔的創(chuàng)建方式：用html語言創(chuàng)建的文檔手工直接編寫（例如記事本）。通過圖形化的HTML開發(fā)軟件Dreamweaver。由Web服務器上的動態(tài)網(wǎng)頁程序生成。HTML標記的語法html最基本的語法就是<標記符>內容</標記符>，標記符通常都是成對使用的，有一個開頭標記和一個結束標記。結束標記只是在開頭標記的前面加一個斜杠“/”當瀏覽器打開html文件后，就會理解里面的標記符，然后把標記符對應的功能表達出來。如：<hrwidth=”80%”/>例如：<fontsize=”7”>文字內容

</font>HTML標記的語法HTML標記的類型：單標記與雙標記一、單標記(1).<標記名稱>

單一型,無屬性值。如：<br/>(2).<標記名稱屬性=”屬性值”>單一型，有屬性值。如：<hrwidth=”80%”/>HTML標記的語法二、雙標記(3).<標記名稱>…</標記名稱>

沒有屬性值。如：<title>…</title>(4).<標記名稱屬性=”屬性值”>…</標記名稱>

有屬性值。如：<bodybgcolor=”red”>…</body><fontsize=”7”>…</font>HTML標記的語法HTML標記語法總結：1、雙標記：<開始標記>內容</結束標記>2、單標記：<標記>3、標記的屬性：<標記屬性1=參數(shù)1

屬性2=參數(shù)2…>內容</標記>說明：A、標記與屬性、屬性之間以空格分隔B、屬性不區(qū)分先后順序；且屬性不是必需的重點強調：雖然在HTML中標記不區(qū)別大小寫，但在XHTML中所有標記都必須小寫，所以建議從現(xiàn)在開始，所有標記都采用小寫。html文檔結構1、文檔結構所有的網(wǎng)頁文件,通常由四對標記來構成,文檔的骨架，它們是：<html> <head> <title>

標題 </title> </head> <body>

正文 </body></html><html>……</html>標識網(wǎng)頁文件的開始與結束，所有的html元素都要放在這對標記中<head>……</head>標識網(wǎng)頁文件的頭部信息，如標題、搜索引擎關鍵字等<title>……</title>標識網(wǎng)頁文件的標題<body>……</body>標識網(wǎng)頁文件的主體部分Meta標記用于定義文件信息Meta標記用于定義文件信息，對網(wǎng)頁文件進行說明，便于搜索引擎查找。放置于<head></head>之間設置關鍵字：<metaname=”keywords”content=”value”>多個關鍵字內容之間可以用“，”分隔設置描述：<metaname=”description”content=”value”>設置作者：<metaname=”author”content=”作者名”>設置字符集：<metahttp-equiv=”content-type”content=”text/html;charset=gb2312”>設置頁面定時跳轉：<metahttp-equiv="Refresh"content="2;URL="/>（1）、注釋<!--注釋內容-->（2）、body屬性<bodybgcolor=“背景顏色”background=“背景圖像”text=“文本顏色”link=“鏈接文本顏色”vlink=“訪問過的文本顏色”alink=“激活的鏈接文本顏色”leftmargin=“左邊界”rightmargin=“右邊界”topmargin=“上邊界”bottommargin=“下邊界”>網(wǎng)頁主體標記body字體修飾(1)、<font>標記語法：<fontcolor="文本顏色"size="字號"face="字體">文本</font>注：網(wǎng)頁中的文本字體、字號一般通過CSS修飾顏色英文名稱十六位進制顏色英文名稱十六位進制白色White#FFFFFF黑色Black#000000紅色Red#FF0000綠色Green#00FF00藍色Blue#0000FF灰色Gray#999999(2)、字符格式功能標記加粗<b>文本</b>傾斜<i>文本</i>加強語氣(加粗)<strong>文本</strong>加強語氣(傾斜)<em>文本</em>下劃線<u>文本</u>刪除線<s>文本</s>上標<sup>文本</sup>下標<sub>文本</sub>（3）、段落標記：格式：<palign=”對齊方式“

>…</p>屬性名稱屬性值說明align left 左對齊（默認）center居中 right右對齊段落控制標記（4）、段落標題<hxalign=”對齊方式“

>…</hx>：段落標題

說明：

X取值[1~6]hx內的文本會自動加粗顯示。

hx針對的對象是段落，而font針對的對象的任意文本。（5）、<br/>：換行（換行不換段）段落控制標記修飾標記(6).水平直線<hr/>屬性名稱

屬性值

說明

size 像素絕對設置，以數(shù)字表示，屬性值越大，線越粗

百分比相對設置，以%表示，屬性值越大，線越粗 width 像素絕對設置，長度不會應視窗的改變而改變

百分比相對設置，長度會隨著視窗寬度而改變 noshade="noshade" 實體線

特殊標記定義一個塊引用：使用文本縮進

格式：<blockquote>...</blockquote>

屬性名稱

屬性值

說明

cite url 被引用的地址居中標記<center>內容</center>(被廢棄的標簽)預格式化<pre></pre>顯示已經(jīng)格式化好的文字。不加此標記的話，HTML瀏覽器會忽略所有空格和制表符。在HTML文檔中使用特殊字符特殊字符轉義碼空格

版權號?©注冊商標?®“"&&<<>>網(wǎng)頁中信息的排序顯示-如何實現(xiàn)列表的標記1、列表標記用途：

列表標記可以創(chuàng)建一般的無序列表、編號列表，以及定義列表三種方式。還可以在一種列表中嵌套另一種列表。便于概括顯示一系列相關的內容。[1]、無序列表<ul>…</ul>[2]、有序列表<ol>…</ol>[3]、定義列表<dl>…</dl>2、無序列表語法：<ultype=“項目符號類型”><litype=“項目符號類型”>內容1</li><li>內容2</li>…</ul><li></li>表示一個項目參數(shù)值(必須小寫字母)描述disccirclesquare列表的標記3、有序列表語法：<olstart=“列表起點”

type=“項目符號類型”><li>內容1</li><li>內容2</li>…</ol>

屬性名稱屬性值說明type1表示以1,2,3,4來表示a表示以a,b,c,d來表示A表示以A,B,C,D來表示i表示以i,ii,iii來表示I表示以I,II,III來表示列表的標記4、定義列表語法：<dl>

<dt>標題1</dt>

<dd>內容1</dd>

<dd>內容2</dd>

<dt>標題1</dt>

<dd>內容1</dd>

<dd>內容2</dd>

</dl><dl></dl>定義列表<dt></dt>表示一個項目<dd></dd>表示一個項目下的更詳細的內容的解釋定義列表Web上支持的圖片格式GIF（圖形交換格式）：GIF格式文件最多只能保存256種顏色。該格式支持透明色，支持動畫效果。JPEG（聯(lián)合圖像專家組）：該格式不支持透明色及動畫，顏色可達1670萬種PNG（網(wǎng)絡可移植格式）：該格式支持透明色，但不支持動畫，顏色從幾種至1670萬種。圖片標記<imgsrc=“圖片的路徑”/>圖片路徑□絕對路徑：提供目標文檔的完整主機名稱、路徑信息、及文檔全稱□相對路徑:從當前文檔開始的路徑如果當前文檔和目標文檔位置平行，則直接書寫目標文檔全稱如果當前文檔和目標文檔所在文件夾位置平行，則書寫為文件夾名稱/目標文檔全稱如果當前文檔所在文件夾和目標文檔位置平行，則書寫為../目標文檔全稱□根相對路徑:從站點根目錄開始的路徑，以"/"開頭屬性名稱屬性值說明srcURL圖片的路徑alt文本規(guī)定圖片的替代文本[圖片無法顯示時]title文本鼠標懸停時顯示的內容width像素/百分比設置圖片寬height像素/百分比設置圖片高border數(shù)字設置圖象邊框alignleft圖片靠左,文字靠右right圖片靠右,文字靠左top文字垂直居上靠middle文字垂直居中bottom文字垂直居下（默認）vspace像素定義圖像頂部和底部的空白（垂直邊距）hspace像素定義圖像左側和右側的空白（水平邊距）輕松學習HTML第二課

表格與鏈接主講：張鵬

郵箱：seo100@126.com目標表格的應用超級鏈接的使用網(wǎng)頁中內容排版與定位表格表格因為表格中可以包含任何內容，所以在使用DIV+CSS之前，網(wǎng)頁設計師是使用表格對網(wǎng)頁內容進行排版與布局的表格基本結構：

<table>...</table>-定義表格

<tr>...</tr>-定義表行

<td>...</td>-定義表列(單元格) <th>...</th>-定義標題欄(文字加粗)

屬性用途<tablebgcolor=””>設置表格的背景色。<tablebackground=””>設置表格的背景圖片。<tableborder=””>設置邊框的寬度，若不設置此屬性，則邊框寬度默認為0。<tablecellpadding=””>設置表格單元格邊框與其內部內容之間空間的大小。默認為2(表格邊距)<tablecellspacing=””>設置表格單元格之間空間的大小。默認為2(單元格間距)<tablebordercolor=””>設置表格邊框的顏色。<tablebordercolorlight=””>設置邊框亮部分的顏色(當border的值大于等于1時才有用)。<tablebordercolordark=””>設置邊框暗部分的顏色(當border的值大于等于1時才有用)。<tablealign=””>設置表格的對齊方式（left=左，center=居中，right=右）<tablewidth=””>設置表格的寬度，單位用絕對像素值或總寬度的百分比。表格的屬性：<table><table>標簽下的邊框設置屬性名稱

屬性值

說明frame void 不要顯現(xiàn)表格的邊線 above 只要顯現(xiàn)出表格的上邊線 below 只顯現(xiàn)出表格的下邊線 hsides 只顯示表格的上下邊線 vsides 只顯現(xiàn)表格的左右邊線 lhs 只顯現(xiàn)表格的左邊線 rhs 只顯現(xiàn)表格的右邊線 border/box 會顯現(xiàn)出表格的所有邊線rules rows 只顯示出橫行的格框線 cols 只顯示出直行的格框線 all 顯示全部格框線 groups 表示列組合水平部分 none 不顯示任何格框線該屬性必須在border的屬性值不為0的狀態(tài)下!屬性用途<trwidth=””>設置行的寬度<trheight=””>設置行的高度<trbgcolor=””>設置行的背景顏色<trbackground=””>設置行的背景圖片<tralign=””>設置水平對齊方式<tr

valign=””>設置垂直對齊方式[top、middle、bottom

]行的屬性：<tr>屬性用途<tdwidth=””>設置單元格的寬度<tdheight=””>設置單元格的高度<tdbgcolor=””>設置單元格的背景顏色<tdbackground=””>設置單元格的背景圖片<tdalign=””>設置單元格的水平對齊方式<tdvalign=””>設置單元格的垂直對齊方式<tdrowspan=””>設置行合并的數(shù)目<tdcolspan=””>設置列合并的數(shù)目<tdnowarp=“nowrap”>設置在單元格中不換行列（單元格）的屬性：<td>表格的結構化(1).結構化格式：<table><thead>……</thead>表頭區(qū)<tbody>……</tbody>表體區(qū)………<tfoot>……</tfoot>表尾區(qū)</table>(2).直列化格式：

<colgroup>….</colgroup>屬性名稱

屬性值

說明align left 靠左 center 靠中 right 靠右valign top 靠上 middle 靠中 bottom 靠下span 數(shù)字

直列數(shù)bgcolor 顏色

背景顏色個別直列設置格式:<col>功能完全和<colgroup>一樣(3).表格的標題：<table> <caption>….</caption></table><caption>下的屬性值有:屬性名稱屬性值

說明align top 標題在表格上方 bottom 標題在表格下方超鏈接：HyperLink一個網(wǎng)站是由多個網(wǎng)頁組成的，網(wǎng)頁之間都是通過鏈接實現(xiàn)相互關聯(lián)的。鏈接的概念：實現(xiàn)由當前文檔到目標文檔的一種跳轉鏈接語法:

<ahref=鏈接目標title=”注釋”target=”打開鏈接窗口的形式”>顯示內容</a>

_blank在新窗口中打開

_self在自身窗口中打開(默認值)

_parent在上一級窗口中打開

_top在本窗口中打開鏈接的類型鏈接的類型:

1、內部鏈接：

當前文檔與目標文檔在同一站點內<ahref=目標文檔位置及全稱>

2、外部鏈接：

當前文檔與目標文檔不在同一站點內

<ahref=URL（網(wǎng)址）>3、E-mail鏈接：

并允許訪問者向指定的地址發(fā)送郵件。

<ahref=mailto:電子郵件地址>

4、局部鏈接(錨點)：

跳轉到同一網(wǎng)頁或其他文檔中的指定位置。

創(chuàng)建錨點：

<aname="錨點名稱">顯示內容</a>

鏈接錨點：

<ahref="#錨點名稱">顯示內容</a>

5、空鏈接：

就是沒有目標端點的鏈接。格式<ahref="#">顯示內容</a>鏈接的類型5、空鏈接：

就是沒有目標端點的鏈接。格式<ahref="#">顯示內容</a>例如：設為首頁<ahref="#"onClick="this.style.behavior='url(#default#homepage)';this.sethomepage('')">設為首頁</a>添加收藏<ahref="#"onClick="javascript:window.external.addfavorite('','搜狐')">加入收藏夾</a>鏈接的類型6、腳本鏈接：

是一種特殊的鏈接，當單擊設置腳本鏈接的文本或圖像時，可以運行相應的JavaScript語句。

常用到的腳本鏈接：

例如：<ahref=javascript:window.open(“”)>新浪</a>

關閉窗口：輸入javascript:window.close()

打開窗口：輸入javascript:window.open('文件名')鏈接的類型輕松學習HTML第三課

表單與多媒體標記主講：張鵬

郵箱：seo100@126.com目標掌握表單的使用學會向網(wǎng)頁中插入多媒體元素框架與嵌入框應用將我們的信息提交給服務器-表單表單的功能表單的作用是從訪問您的Web站點的用戶那里獲得信息。訪問者可以使用諸如文本域、列表框、復選框以及單選按鈕之類的表單元素輸入信息，然后單擊某個按鈕提交這些信息。客戶端與服務器端進行信息交流的途徑表單標記form標記用于創(chuàng)建一個表單，定義表單的開始與結束，它是一個容器，用于包含其他表單元素，例如文本框、單選框等。表單元素必須入在form標記內才有作用。<formaction=url(傳送目標，處理表單信息的服務器端應用程序)

method=處理表單數(shù)據(jù)的方法(POST/GET)如果不寫method則默認提交方式為get，name=表單名稱>

表單元素</form>POST方法可以傳遞大量信息GET方法將值附加到請求該頁的URL中。適合傳遞少量信息(默認方式)單行文本框<inputname=“文本框名稱”type=“text”value=“初始值”size=“顯示字符數(shù)”maxlength=“最多容納字符數(shù)”readonly=”readonly”(設置為只讀)disabled=“disabled”（設置為不可操作）>密碼框<inputname=“文本框名稱”type=“password”value=“初始值”size=“顯示字符數(shù)”/>表單元素標記多行文本框<textareaname=“多行文本框名稱”cols=“每行中的字符數(shù)”rows=“顯示的行數(shù)”>

初始內容</textarea>表單元素標記單選框<inputname=“單選框名稱”type=“radio”value=“提交值”checked=”checked”(是否被選中)/>

復選框<inputname=“復選框名稱”type=“checkbox”value=“提交值”checked=”checked”(是否被選中)>

表單元素標記<label>標注內容</label>標簽為input元素定義標注（標記）。<label>標簽的for屬性應當與相關元素的id屬性相同<labelfor="man">男</label><inputtype=radioname=sexvalue=男id="man">

表單元素標記列表框(A)、菜單式<selectname=“列表框名稱”><optionselected=“selected”(哪個為初始選擇，就添加selected語句[只有一個])value=“提交值”>列表1</option><optionvalue=“提交值”>列表2</option>...</select>分組<optgrouplabel="分組名稱"></optgroup>表單元素標記列表框例如： <selectname=“citys”> <optgrouplabel="北京"> <optionvalue=朝陽selected=“selected”>朝陽</option> <optionvalue=海淀>海淀</option> <optionvalue=東城>東城</option> </optgroup> </select>表單元素標記列表框(B)、列表式<selectname=“列表框名稱”size=“顯示的行數(shù)”multiple(如果允許多選，則有該命令；否則沒有此命令)><optionvalue=“提交值”>列表1</option>...</select>例如： <selectname=targetsize=3multiple=“multiple”> <optionvalue=普通朋友>普通朋友</option> <optionvalue=愛人selected>愛人</option> </select>表單元素標記按鈕<inputtype=“按鈕類型(reset[重置表單]、submit[提交表單]、button[普通按鈕])”name=“按鈕名稱”value=“按鈕顯示文本”/>圖片按鈕<inputname="圖片按鈕名稱"type="image"src="圖片路徑"/>隱藏域<inputname=“名稱”type=“hidden”value=“提交值”/>表單元素標記瀏覽框<inputname=“名稱”type=“file”size=“顯示長度”/>表單外框<fieldset>...</fieldset>定義圍繞表單中元素的邊框<legend>...</legend>legend元素為fieldset元素定義標題

表單元素標記FLASH動畫的插入使用<embed>...</embed>標記插入FLASH動畫屬性

值

說明src url flash路徑width 像素/百分比 flash寬度height 像素/百分比 flash高度wmode transparent 使flash背景部分透明插入多媒體元素標記插入mp3音樂：<objectalign=middleclass=OBJECTclassid=CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95id=MediaPlayerwidth=356height=80><paramname="ShowStatusBar"value="true"><paramname="AutoStart"value="true"><paramname="Filename"value="love.mp3"></obj

溫馨提示

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

評論

0/150

提交評論