版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)
文檔簡介
1、電子商務(wù)網(wǎng)站建設(shè)與管理 配套課件HTML常用標記常用標記 4.2從HTML到XHTML 4.4CSS樣式樣式 4.3什么是什么是HTML 4.1 HTML的全稱是Hyper Text Markup Language,即“超文本標記語言”,是一種用標記(也可稱為標簽)來描述網(wǎng)頁文檔結(jié)構(gòu)和表現(xiàn)形式的語言 。 HTML語言并不是一種程序語言,只是包含一些標記的文本文件,這些標記告訴瀏覽器如何在網(wǎng)頁頁面上顯示文字、表格、圖片和超級鏈接等。 HTML文件可以使用記事本、FrontPage、Dreamweaver等任何文本編輯器編輯,編輯完畢后,保存為.htm或.html文件 我的第一個網(wǎng)頁文件 我的主頁
2、 歡迎光臨我的主頁。 這是我的第一個網(wǎng)頁文件。 文檔頭部 文檔主體 頭部信息不會顯示在瀏覽器窗口中主體內(nèi)容顯示在瀏覽器窗口中,即網(wǎng)頁的正文內(nèi)容1文檔頭部 在和之間的內(nèi)容,是文檔頭部信息。盡管文檔頭部信息不顯示在頁面中,但仍然是非常重要的,它會告訴瀏覽器如何處理文檔主體內(nèi)的內(nèi)容。 電子商務(wù)教學(xué)網(wǎng)站 用來設(shè)置網(wǎng)頁的標題定義關(guān)鍵字 定義網(wǎng)頁的描述信息 說明文件的內(nèi)容類型和語言編碼方式 設(shè)置網(wǎng)頁自動刷新的時間 有很多屬性,用來設(shè)置網(wǎng)頁背景、文字、頁邊距等。如: 說明: text:用以設(shè)定文字顏色。 background:設(shè)定背景圖片的路徑。路徑可以是絕對路徑或相對路徑。 bgcolor:設(shè)定背景顏色。
3、當設(shè)定背景圖片時,會失去作用。 leftmargin:只適用于IE瀏覽器,設(shè)定頁面左邊距,單位為像素。 topmargin:只適用于IE瀏覽器,設(shè)定頁面上邊距,單位為像素。4.2.1 常用排版標記1分段標記2換行標記 3標題標記和 4文字標記5水平線標記例:最簡單網(wǎng)頁示例 HTML語言的學(xué)習(xí)歡迎光臨我的主頁。今天我們學(xué)習(xí)了標記(標簽)這是我做的第一個網(wǎng)頁。大學(xué)之道,在明明德,在親民,在止于至善。知止而后有定,定而后能靜,靜而后能安,安而后能慮,慮而后能得。物有本末,事有終始,知所先后,則近道矣。瀏覽器中查看?(1)加入背景音樂。 要加入的背景聲音文件的格式可以是wav、au或mid。 播放次數(shù)
4、取-1或Infinite時,聲音將一直播放直到關(guān)閉該網(wǎng)頁為止。(2)加入視頻。 標記可用來插入各種多媒體,格式可以是Wmv、Avi、Midi、Wav、AU、MP3等,文件路徑可以是相對路徑或絕對路徑 用法:滾動文字(或圖片) 具體屬性說明如下。 width:設(shè)置字幕的寬,x為像素數(shù)或相對于窗口寬的百分比。 height:設(shè)置字幕的高,y為像素數(shù)。 behavior:值為scroll時,設(shè)置文字單向流動;值為slide時,設(shè)置流動文字到達邊界停止;值為alternate時,設(shè)置流動文字到達邊界后反向流動。 scrollamount:指定每次移動速度,值越大速度越快。 scrolldelay:移動
5、每步的延時,單位是毫秒,時間越短,速度越快。創(chuàng)建無序列表,格式如下: 第一個列表項 第二個列表項 無序列表 電子商務(wù)項目管理。 電子商務(wù)顧問。 銷售人員。 創(chuàng)建有序列表。通過帶序號的列表可以更清楚地表達信息的順序。使用標記可以建立有序列表,表項的標記仍為。格式如下: 第一個列表項 第二個列表項 1超級鏈接的概念 所謂的超級鏈接是指從一個網(wǎng)頁指向一個目標的連接關(guān)系,這個目標可以是另一個網(wǎng)頁,也可以是同一網(wǎng)頁上的不同位置,還可以是一個圖片、一個電子郵件地址或一個文件。而在一個網(wǎng)頁中用來超級鏈接的對象,可以是文本也可以是一個圖片,甚至可以是圖片的一部分。2用法鏈接主體說明:(1)href:用來定義超
6、級鏈接文件的路徑,可以是相對路徑或絕對路徑。(2)target:指定打開超級鏈接的窗口或框架。取值有以下5種情況。 _blank:在新窗口中打開鏈接。 _self:在當前窗口打開鏈接。默認為_self。 _top:在整個瀏覽器窗口中打開鏈接。 _parent:在當前窗口的父窗口打開鏈接。 框架名稱:在指定名字的框架中打開鏈接。(1)站內(nèi)鏈接。鏈接到本地站點上的某一文件,例如:企業(yè)簡介(2)外部鏈接。鏈接到另一個站點的某一文件,例如:鏈接到當當網(wǎng)(3)錨點鏈接。鏈接到當前頁面的某一位置,例如:這里定義了一個錨點指向同一頁中的錨點first(4)E-mail鏈接。鏈接到一個電子郵箱地址,例如:請與
7、我聯(lián)系 超級鏈接應(yīng)用示例 本文本 是一個指向本網(wǎng)站中的一個頁面的鏈接。 本文本 是一個指向萬維網(wǎng)上的頁面的鏈接。 思考:如何將一個圖片設(shè)置為超級鏈接?1表格 表格是網(wǎng)頁設(shè)計中常用的元素,有兩個常用功能:一是用來顯示文字或圖片內(nèi)容;二是用來進行網(wǎng)頁布局,使網(wǎng)頁更規(guī)范、更美觀。 表格的標記為,使用標記可將一個表格劃分成若干表格行,然后通過標記將每個行劃分成若干列(單元格)。數(shù)據(jù)內(nèi)容放在與之間。單元格中的數(shù)據(jù)信息可以是文字、圖片、列表,還可以是嵌套表格。2語法格式表格的用法如下: 表項1表項 2 表項n 表項1表項 表項n 屬性: border:定義表格邊框的粗細,n取整數(shù),單位是像素。如果省略,則
8、不帶邊框。 bgcolor:設(shè)置背景顏色。 background:設(shè)置背景圖片。 width:定義表格的寬度,單位可以是絕對的像素數(shù)或窗口的百分比。 height:定義表格的高度,單位是像素數(shù)。 cellspacing:定義單元格之間的間隙寬度,單位是像素,默認為2。 cellpadding:定義單元格內(nèi)容與單元格邊界之間的距離,單位是像素,默認為2。 colspan和rowspan:可以分別制作跨多行(合并行)和跨多列(合并列)的表格。 表格的邊框?qū)傩?單元格1 單元格2 表格跨多列屬性值班人員周一周二周三 張三李四王五 1框架的基本結(jié)構(gòu)基本格式如下: 標記屬性 rows:設(shè)定橫向分割的框架
9、數(shù)目。 cols:設(shè)定縱向分割的框架數(shù)目。 border:設(shè)定邊框的寬度。 bordercolor:設(shè)定邊框的顏色。 frameborder:設(shè)定有/無邊框。 framespacing:設(shè)置各窗口間的空白。先認識一下表單:1表單定義要創(chuàng)建一個表單,可以用標記來實現(xiàn)。表單像一個容器,能夠容納各種各樣的控件(即表單元素)。下面介紹表單及構(gòu)成表單的各個控件的用法。格式: 說明:(1)action:表單處理的方式,往往是E-mail地址或網(wǎng)址。(2)method:表單數(shù)據(jù)的傳送方式,可以是get方式,也可以是post方式。get:表示將表單信息附在URL地址后面?zhèn)鬟f給服務(wù)器。post:表示將所有信息當
10、作一個表單傳遞給服務(wù)器。(3)標記主要用來設(shè)計表單中提供給用戶的輸入形式。type:指定要加入表單控件的類型(text、password、checkbox、radio、image、hidden、submit、reset)。name:該表單控件名,主要在處理表單時起作用 文本框:文本框是一種讓訪問者自己輸入內(nèi)容的表單對象,通常被 用來填寫簡短的內(nèi)容或回答,如姓名、地址等。格式:input type=text name=名稱 size=寬度 maxlength=最大長度 value=初始值說明:type:當類型為text時,定義單行文本框。 name:定義文本框的名稱,要保證數(shù)據(jù)的準確采集,必須定
11、義一個獨一無二的名稱。size:定義文本框的寬度,單位是單個字符寬度。maxlength:定義最多輸入的字符數(shù)。value:定義文本框的初始值。密碼框:密碼框是一種特殊的文本框,不同之處是當輸入內(nèi)容時,均以*表示,以保證密碼的安全性。 格式: 按鈕類型:普通按鈕、提交按鈕、重置按鈕。(1)普通按鈕。當type的類型為button時,表示該控件是普通按鈕。 格式:說明:Value:表示顯示在按鈕上面的文字。普通按鈕經(jīng)常和腳本一起使用。 (2)提交按鈕。通過提交按鈕(即type的類型為submit時)可以將表單(Form)中的信息提交給表單中action所指向的文件。例如,。 (3)重置按鈕。當t
12、ype的類型為reset時,表示該控件是重置按鈕。單擊該按鈕后,瀏覽器將清除表單中的輸入信息而恢復(fù)到默認的表單內(nèi)容設(shè)置。格式:單選按鈕和復(fù)選框(1)單選按鈕格式: 說明:checked:表示此項默認選中。 value:表示選中后傳送到服務(wù)器端的值。 name:表示單選按鈕的名稱。如果是一組單選項,name 屬性的值相同,有互斥效果。 (2)復(fù)選框格式: 說明:checked:表示此項默認選中。 value:表示選中后傳送到服務(wù)器端的值。 name:表示復(fù)選框的名稱。如果是一組單選項,即便name屬性的值相同也不會有互斥效果。文件輸入框當type類型為file時,表示該控件是一個文件輸入框,用戶
13、可以在文件輸入框的內(nèi)部填寫自己硬盤中的文件路徑,然后通過表單上傳。格式:下拉列表框 :既可以設(shè)置為單選,也可以設(shè)置為復(fù)選。如: 蘋果 桔子 芒果 如果要變成復(fù)選下拉列表框,只需加multiple即可。用戶用Ctrl鍵來實現(xiàn)多選。用戶還可以設(shè)置size屬性來改變下拉列表框的大小。 多行輸入框 :主要用于輸入較長的文本信息。例如: HTML語言在很多方面存在著不足:(1)維護困難。(2)標記不足。(3)網(wǎng)頁過“胖”。(4)定位困難。如:哀悼日網(wǎng)頁的素裝如何實現(xiàn)?CSS樣式表的概念 CSS是Cascading Style Sheets(層疊樣式表)的縮寫,是一種用于控制網(wǎng)頁樣式的標記性語言。通過使用
14、CSS樣式,可將頁面的內(nèi)容與表現(xiàn)形式分離。CSS樣式表的特點(1)CSS語言是一種標記語言,不需要編譯,直接由瀏覽器解釋執(zhí)行。(2)通過設(shè)置CSS樣式,可以控制網(wǎng)頁中文本的行間距、大小、顏色,統(tǒng)一網(wǎng)站的整體風(fēng)格。(3)CSS文件可以用任何文本工具進行開發(fā)。(4)CSS不是取代HTML語言,而是HTML語言很好的補充,可以彌補HTML在網(wǎng)頁格式化功能上的不足。(5)通過單個CSS樣式表可以控制多個文檔的布局。 行內(nèi)樣式表(style屬性) 行內(nèi)樣式示例 這個頁面是紅色的 內(nèi)部樣式表(style標記) 內(nèi)部樣式示例 body background-color: #FF0000; 這個頁面是紅色的
15、外部樣式表(鏈接外部一個樣式表文件) 鏈接外部樣式表是使用頻率最高也是最為實用的方法。它將HTML頁面本身與CSS樣式風(fēng)格分離為不同文件。外部樣式表就是將一系列CSS樣式放在一個擴展名為.css的外部文件中 。 例如,樣式表文件命名為style.css,并存放于名為style的文件夾中。style.css的內(nèi)容如下:hr color: blue;p margin-left: 20px;body background-image: url(images/back.gif); 在一個HTML文檔中引用外部樣式表文件style.css,具體如下。 格式: 注意:要在href屬性中給出樣式表文件的路徑
16、。這行代碼必須被插入到HTML代碼的頭部和之間。 選擇器的種類 (1)標記選擇器 CSS標記1 CSS標記的正文內(nèi)容1 CSS標記2 CSS標記的正文內(nèi)容2 CSS標記3 CSS標記的正文內(nèi)容3 CSS標記4 CSS標記的正文內(nèi)容4說明:將上面的h2標題改為紅色、幼圓字體 ? 類選擇器。類選擇器是指為一類標記定義樣式。類選擇器允許以一種獨立于文檔元素的方式來指定樣式。該選擇器可以單獨使用,也可以與其他元素結(jié)合使用。 在CSS中,類選擇器以一個點號顯示,例如: .center text-align: center.important color:red;This heading is very
17、important.This paragraph is very important.This is a paragraph.This is a paragraph.This is a paragraph. ID選擇器 #intro font-weight:bold;This is a paragraph of introduction.This is a paragraph.This is a paragraph.1字體屬性(1)font-family:用于為選擇器選擇一組字體,如宋體、黑體等。(2)font-size:用于設(shè)置網(wǎng)頁中文字的大小,如9pt、12px等。(3)font-styl
18、e:設(shè)置字體風(fēng)格。Normal表示普通,italic表示斜體。(4)font-weight:設(shè)置字體粗細,如normal、bold(加粗)等。 顏色和背景屬性(1)color:定義文字的顏色,如red、#00ff3d。(2)background-color:定義元素的背景色。(3)background-image:定義元素的背景圖像。例如,url(back.jpg)。(4)background-repeat:指定圖像的重復(fù)方式。例如,repeat-x,水平平鋪 文本與邊框?qū)傩裕?)text-decoration:文字修飾。例如,underline,下劃線。(2)line-height:行高。(3)text-align:定義對齊方式。(4)letter-spacing:定義字符之間的間隔。(5)border:定義邊框。(6)border-col
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 體驗式藝術(shù)治療-洞察分析
- 2025年滬科版五年級語文上冊階段測試試卷
- 二次函數(shù)的圖象的性質(zhì)課件
- 2025年滬教新版五年級語文下冊階段測試試卷
- 綠色商場綠化養(yǎng)護規(guī)范
- 校園暴力應(yīng)對策略
- 醫(yī)療衛(wèi)生辦公樓施工合同
- 設(shè)備轉(zhuǎn)讓合同稅收問題
- 體育行業(yè)賽事合作管理
- 2024年滬教新版高三地理上冊月考試卷
- 礦業(yè)公司規(guī)章制度匯編
- 《高低壓配電室施工工藝標準》
- 2024年太陽能光伏組件高空清洗作業(yè)人員安全保障合同3篇
- 大學(xué)學(xué)業(yè)規(guī)劃講座
- 《國家課程建設(shè)》課件
- 浙江省衢州市2023-2024學(xué)年高一上學(xué)期1月期末數(shù)學(xué)試題 含解析
- 【課件】Unit+5+Fun+Clubs+Section+B+1a-2b課件人教版(2024)七年級英語上冊++
- 江蘇省南通市海門區(qū)2023-2024學(xué)年三年級上學(xué)期期末語文試題
- 靜脈輸液治療小組工作總結(jié)
- 總磷課件教學(xué)課件
- 2025年護理部工作計劃
評論
0/150
提交評論