-
- 素材大。
- 1.05 MB
- 素材授權(quán):
- 免費下載
- 素材格式:
- .ppt
- 素材上傳:
- chenrong
- 上傳時間:
- 2018-07-14
- 素材編號:
- 201914
- 素材類別:
- 課件PPT
-
素材預覽
這是html基本結(jié)構(gòu)ppt,包括了HTML代碼基本知識,HTML初步,HTML語言基礎(chǔ),HTML文檔中的標記,HTML文檔的基本結(jié)構(gòu)等內(nèi)容,歡迎點擊下載。
html基本結(jié)構(gòu)ppt是由紅軟PPT免費下載網(wǎng)推薦的一款課件PPT類型的PowerPoint.
項目三
HTML代碼基本知識
項目三 HTML代碼基本知識
HTML文檔的基本結(jié)構(gòu)
文字和段落
超級鏈接標志
圖像、背景與顏色標志
表格標志
動態(tài)HTML
HTML初步
超文本標記語言HTML是生成WWW網(wǎng)頁文件的語言,用以生成超文本文檔。在文檔中,可以加入任何元素(文本、圖像、動畫和聲音等)的鏈接
使用瀏覽器瀏覽的網(wǎng)頁就是HTML文檔
通常是使用記事本作為HTML文檔的編輯器,利用瀏覽器瀏覽文檔效果
HTML語言基礎(chǔ)
HTML只是標記語言,基本上只要明白了各種標記的用法,就學懂了HTML
標記的寫法:
標記由:<> 括號包圍的元素組成,如<TITLE>
標記的表示:起始標記<TITLE>,結(jié)束標記</TITLE>
標記中加屬性和參數(shù)
參數(shù)只能加在起始標記中
<font size="5">Hello</font>
標記字母大小寫無關(guān)
HTML文檔中的標記
大多數(shù)標志都是成對出現(xiàn)的,
起始標志(如<HEAD>)和結(jié)束標記(如</HEAD>)
在起始標記和結(jié)束標記之間,放入網(wǎng)頁元素
如:文本、圖片、超級鏈接等
<p> welcome to you </p>
所有的HTML文檔內(nèi)容都是由
起始標記<HTML>和結(jié)束標記</HTML>包圍起來的
HTML文檔的基本結(jié)構(gòu)
<HTML>
<HEAD>
<TITLE>文檔標題</TITLE>
</HEAD>
<BODY>
文檔的正文內(nèi)容
</BODY>
</HTML>
簡單的HTML文檔
<HTML>
<HEAD>
<TITLE>李小龍的主頁</TITLE>
<!– version number=“1.0” -->
</HEAD>
<BODY>
歡迎訪問我的主頁!
</BODY>
</HTML>
輸入和保存HTML文檔
打開“記事本”編輯器,輸入要編輯的HTML語言代碼
輸入完畢后,保存HTML文檔
菜單[文件]→[保存]/[另存為]
“保存類型”選擇“所有文件”
在“文件名”框中輸入:myhtml.htm,注意:擴展名(.htm)一定不能省略
用IE打開網(wǎng)頁文件:myhtml.htm
打開HTML文檔
記事本中選擇“所有文件”類型,打開文件
瀏覽器中選擇菜單[查看]→[源文件]
BODY中的標記和屬性
<BODY>標記中放置要在瀏覽器中所顯示信息的所有標記和屬性
標記中間可以放置:文字、段落、圖像、表格、超級鏈接、框架等
在標記中設置屬性,主要是對標記進行補充說明
文字標題標記
標題能分隔大段文字,使得網(wǎng)頁顯示的內(nèi)容結(jié)構(gòu)清晰。
共有六級標題:H1~H6,從大到小。
<H1></H1> , … , <H6></H6>
對齊方式:設置標題的對齊屬性。三個屬性:
ALIGN=Left、ALIGN=Center、ALIGN=right
文字段落<P>及換行<BR>
文字段落標記:<P>…</p>
換行標記:<BR> 不成對出現(xiàn),不用結(jié)束標記
在指定位置分行,但不另起段落
分隔符標志
水平分隔線標記<HR>
屬性:size、color、width、align
不用結(jié)束標記
關(guān)于顏色
顏色:由紅R、綠G、藍B三原色組成,每一色由兩位十六進制數(shù)表示(簡稱RGB數(shù))。
如下表
顏色
RGB數(shù)的設置:三種顏色組合起來
RGB數(shù)設置為000000,顏色為黑色
RGB數(shù)設置為CCCCCC,顏色為灰色
RGB數(shù)設置為FFFFFF,顏色為白色
英文單詞表示顏色
Black(黑),Olive(橄欖色),Teal(青色),Red(紅色),Blue(藍色),Navy(深藍色), Maroon( 栗色的),Gray(灰色), Lime(綠黃色),F(xiàn)uchsia(桃紅色),White(白色), Green(綠色), Purple(紫色),Silver(銀色), Yellow(黃色),Aqua(淺綠色)
設置顏色組合時,前面加“#”符號。使用英文單詞表示顏色時,不加#號
頁面背景色、文本顏色
在<BODY>標記中指定頁面的背景顏色
屬性:BGCOLOR=#…
在<BODY>標記中指定整個文檔中文本的顏色
屬性:TEXT=#…
字體、字號、文字顏色
用<FONT>標記指定字體、字號和文本顏色
字體
屬性:<FONT FACE=“…”> 指定字體
字號
屬性:<FONT SIZE=…> 字號1到7號,默認是3
字體、字號、文字顏色
文本顏色
屬性:<FONT COLOR=#…> 指定字體
粗體、斜體
粗體標志<B>…</B>
斜體標志<I>…</I>
建立超級鏈接
超級鏈接標記<A>…</A>
HREF屬性:
指向鏈接的網(wǎng)址和文件(URL)
超級鏈接
NAME屬性:
設置書簽位置點,超級鏈接指向書簽p,154
TARGET屬性:
在新的窗口中顯示鏈接的內(nèi)容
超級鏈接
TITLE屬性:
在超級鏈接中加上鏈接的說明,當將鼠標移到鏈接上時,說明會自動彈出到光標的尾巴上
插入E-mail鏈接:
加進圖形圖像
圖形圖像標記<IMG>
圖片格式常見有GIF和JPG
主要屬性SRC,稱為引用圖形的“源(source)”
圖片文件和HTML文檔在同一文件夾中,直接用文件名
圖片文件和HTML文檔不在同一文件夾中,指定路徑時用相對路徑
其它屬性:ALT、BORDER、ALIGN、WIDTH
加入影像
直接用鏈接加入
當用戶點擊時才下載播放。如:
嵌入影像
嵌入方式使用<EMBED>標記 方法如下:
表格標志
表格標記<TABLE>…</TABLE>
基本表格標記:<TR>、<TD>、<TH>
</TR>、</TD>、</TH>的結(jié)束標記最好加上
表格標記
<TABLE>標記中的常用屬性,有些屬性同樣適用于<TR>、<TD>、和<TH>標記
表格
<TABLE>屬性實例,整個表格的屬性
說明:表格的寬度占據(jù)整個瀏覽器窗口的50%,表格邊框線5,背景顏色為灰色,并且居中顯示
定義簡單表格
<Table border=5 bgcolor=silver width=50% align=center>
<TR><TH>編號</TH><TH>品牌</TH></TR>
<TR><TD>M1001</TD><TD>長城</TD></TR>
<TR><TD>M1002</TD><TD>方正</TD></TR>
<TR><TD>M1003</TD><TD>聯(lián)想</TD></TR>
<TR><TD>M1004</TD><TD>TCL</TD></TR>
</TABLE>
列表
無序列表標記<UL></UL>
基本列表標記
<LH>表頭標題
<LI>表項標識
列表
有序列表標記<OL></OL>
基本列表標記
<LI>表項標識
框架集、表單
框架集<FRAMESET>
表單<FORM>
滾動字幕
滾動字幕標記<marquee>…</marquee>
Direction屬性
設置文字滾動的方向:Left, right, up, down
Bihavior屬性
設置文字滾動方式:scroll(成卷形), slide(滑動), alternate(輪流)
滾動字幕
Scrollamount屬性
設置文字滾動的速度(像素)
scrolldelay屬性
設置文字滾動延遲時間(秒)
滾動字幕
Align屬性
設置滾動字幕的對齊方式:top, middle, bottom
Bgcolor屬性
設置滾動字幕的背景色
預定義色彩:Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
滾動字幕實例
<P><font color=#FF0000><marquee bgcolor=yellow height="400" width="400" direction=up scrolldelay=150 onmouseover="this.stop()" onmouseout="this.start()">網(wǎng)頁制作的技巧很多,<br>使用滾動字幕,可以使網(wǎng)頁生動起來</P>
<p><A href="http://www.baidu.com">滾動字幕是最常用的</A></p>
<p>這個方向的滾動可以嗎?</marquee></font></P>
自動彈出窗口
實現(xiàn)一進入頁面就會有"歡迎"的頁面出現(xiàn),退出又有"再見"的畫面
在<body>標記中加入下面的屬性:
<body onload=alert("歡迎訪問網(wǎng)絡天地") onunload=alert("謝謝光臨!")>安塞腰鼓結(jié)構(gòu)圖解PPT:這是安塞腰鼓結(jié)構(gòu)圖解PPT,包括了作者簡介,斗虎一樣,是強健的風姿,每一個舞姿都充滿了力量,檢查預習,朗讀指導,品味語言,作業(yè),板書設計等內(nèi)容,歡迎點擊下載。
北京的春節(jié)課文結(jié)構(gòu)圖PPT:這是北京的春節(jié)課文結(jié)構(gòu)圖PPT,包括了課后思考題,給你印象最深的是什么?有感情地朗讀課文,想想課文是按怎樣的順序?qū)懙牡葍?nèi)容,歡迎點擊下載。
城市內(nèi)部空間結(jié)構(gòu)ppt1:這是城市內(nèi)部空間結(jié)構(gòu)ppt1,包括了城市內(nèi)部空間結(jié)構(gòu)的形成和變化,影響因素,補充:風向與城市規(guī)劃等內(nèi)容,歡迎點擊下載。