1、技術部新人培訓HTML培訓教程 根底篇一、HTML培訓教程 根底篇HTML簡介 文件構造的格式標志 文字格式與頁面 超鏈接、列表和表格4123外媒體5表單和框架61.1 HTML是什么 HTML(Hyper Text Markup Language，超文本標志言語) 是用來描畫網(wǎng)頁的一種言語。是Web最根本的構成元素。 用HTML的語法規(guī)那么建立的文檔可以在不同操作系統(tǒng)的平臺上運轉。 HTML 指的是超文本標志言語 (Hyper Text Markup Language) HTML 不是一種編程言語，而是一種標志言語 (markup language) 標志言語是一套標志標簽 (markup

2、tag) HTML 運用標志標簽來描畫網(wǎng)頁 1. HTML 簡介1.2 HTML標簽 HTML 文檔和 HTML 元素是經過 HTML 標簽進展標志的 HTML 標簽由開場標簽和終了標簽組成 開場標簽是被括號包圍的元素名 終了標簽是被括號包圍的斜杠和元素名 某些 HTML 元素沒有終了標簽，比如 注釋：開場標簽的英文翻譯是 start tag 或 opening tag，終了標簽的英文翻譯是 end tag 或 closing tag。1. HTML 簡介1.3 HTML能做什么格式化文本：如設置標題、字體、字號、顏色；設置文本的段落、對齊方式等。 建立超鏈接。只需用鼠標單擊，就可達任何一處。

3、創(chuàng)建列表。把信息用一種易讀的方式表現(xiàn)出來。插入圖像。使網(wǎng)頁圖文并茂，還可設置圖像的各種屬性，如大小、邊框、規(guī)劃等。建立表格。表格為閱讀者提供快速找到需求信息的顯示方式，還可以用表格來設定整個網(wǎng)頁的規(guī)劃。參與多媒體。可在網(wǎng)頁中參與音頻、視頻、動畫，還能設定播放的時間和次數(shù)。交互式表單、計數(shù)器等。 1. HTML 簡介1. HTML 簡介1.4 HTML編輯環(huán)境任何文本編輯器都可用來制造網(wǎng)頁，包括記事本、寫字板、Word、WPS等編輯程序。專業(yè)設計人員會有專業(yè)的網(wǎng)頁編輯器，如：dreamweaver、frontpage等。完成以后用.htm 或 .html 為文件擴展名保管。 假設要看到用戶本人設

4、計的網(wǎng)頁效果，就需求安裝一個閱讀器，如 Internet Explorer，Netscape Navigator等 2. HTML 根本構造一個HTML文件應具有下面的構造HTML文件以開頭，以結尾。HTML文件包括頭部和主體 ，用來闡明文件命名和與文件本身的相關信息，主體定義閱讀器中顯示的網(wǎng)頁內容。 網(wǎng)頁標題 網(wǎng)頁內容 2. HTML 根本構造HTML文件是由標志和文本組成 。標志Tag可以產生所需的各種效果。就像一個排版程序，可將網(wǎng)頁排成理想的效果。格式：收標志影響的文本單一標志：只需一個標志就能完成所要表示的功能，如可以顯示一條程度的分隔線。成對標志：需求兩個標志組合才干完成所需功能，如

5、及、及。HTML的元素有以下三種表達方式對象對象 標志需求經過屬性制造各種效果。2. HTML 根本構造留意：運用時屬性之間沒有順序。對同一段文本，可以用多個標志來共同作用，產生一定的效果。HTML也有注釋標志。“之間的部分為注釋內容,可以插入文本的任何地方。標志和屬性不區(qū)分大小寫。2. HTML 根本構造【例2-1】簡單的HTML文件 網(wǎng)頁設計 我的第一個網(wǎng)頁！2.2.1 文件構造的格式標志1、HTML文檔標志 HTML文檔標志的格式為: HTML文檔內容 處于文檔的最前面，表示HTML文檔的開場，即閱讀器從開場解釋，直到遇到為止。每個HTML文件均以開場，以終了。2.2.1 文件構造的格式

6、標志2、HTML文件頭標志 HTML文件頭標志的格式為： 頭部內容 文件頭部在文件標志之后，其內容可以是標題名，文本文件地址、創(chuàng)作信息等網(wǎng)頁信息闡明，對應于相應的標志。如標題標志。本標志在HTML文件中不是必需的，假設沒有，閱讀器也會照常解讀文件。2.2.1 文件構造的格式標志3、HTML文件標題標志 HTML文件標題標志的格式為： 標題名標題內容不在閱讀器窗口中顯示，而是在閱讀器的標題欄中顯示。為什么要給網(wǎng)頁加上標題呢？標題概括了網(wǎng)頁的內容，可以迅速了解網(wǎng)頁的大意；假設閱讀者喜歡該網(wǎng)頁，將它參與書簽或保管到磁盤上，標題就作為改頁面的標志和文件名；運用搜索引擎時顯示的結果也是頁面的標題。2.2

7、.1 文件構造的格式標志【例2-2】假設沒有運用標志，而單獨運用，標志仍可設定標題。 網(wǎng)頁設計 無時，標志仍起作用 顯示效果2.2.1 文件構造的格式標志4、HTML文件主體標志 格式為： background 設置網(wǎng)頁的背景圖像：bgcolor 設置網(wǎng)頁的背風光；text 設置文本的顏色：link 設置未被訪問過的超文本鏈接的顏色，默以為藍色；vlink 設置已被訪問過的超文本鏈接的顏色，默以為紅色或紫色alink 設置超文本鏈接在被訪問瞬間的顏色，默以為藍色2.3 HTML文字格式與頁面2.3.1 設置標題格式 設置標題格式的格式為： 標題 屬性align用來設置標題在頁面中的對齊方式：l

8、eft(左對齊)、center(居中)或right(右對齊)。屬性n用來指定標題文字的大小。n可以取16的整數(shù)值，取1時文字最大，6時文字最小，默許時為。這些標志顯示宋體字。標志會自動插入一個空行，不用用標志再加空行。在一個標題行中無法運用不同大小的字體。2.3 HTML文字格式與頁面【例2-3】用設置標題的大小。 運用標題 一級標題 二級標題 三級標題 四級標題 五級標題 六級標題 默許標題 顯示效果2.3 HTML文字格式與頁面2.3.2 設置強迫換行標志www閱讀器忽視超文本文件中的回車符除非用戶指定用標志元素限制按源文件文本格式展現(xiàn)文本內容，而是用專門的標志符號表示回車。放在一行的末尾

9、，可使后面的文字換到下一行，而又不會在行與行之間留下空行。 強迫換行標志的格式為： 文字 換行標志單獨運用，可使頁面明晰、整齊。2.3 HTML文字格式與頁面【例2-4】強迫換行標志的運用， 強迫換行標志的運用歡迎進入牡丹園!新聞影視聊 天 室 顯示效果2.3 HTML文字格式與頁面小技巧：在中文的段落中，往往在段首空兩個的空格符號，可是HTML言語忽略多余的空格，最多只能空一個空格.可用4個延續(xù)的“ ；或者輸入兩個全角中文空格?！?nbsp；為非換行的空格符號，用它可以在文本中參與恣意多個空格。2.3 HTML文字格式與頁面2.3.3 設置文字格式 格式為： 被設置的文字 標志可設定

10、文字的字體、字號和顏色。size用來設置文字的大小。數(shù)字的取值范圍從17，size取1時最小，取7時最大。face用來設置字體。如黑體、宋體、楷體GB2312、仿宋GB2312、隸書、Times New Roman等。color用來設置文字顏色。2.3 HTML文字格式與頁面1、設置文字的字號與的區(qū)別注： 和標志都可以設置文字的大小，當中的size取7時的文字比要大。 標記對象用法文字大小n的取值一段文字、語言、短語等文字n=17,取1時最小，7時最大標題文字n=16,取6時最小,取1時最大2.3 HTML文字格式與頁面【例2-5】用設置文字的大小。用設置文字的大小文字的大小!文字的大小 si

11、ze=1文字的大小 size=2文字的大小 size=3文字的大小 size=4文字的大小 size=5文字的大小 size=6文字的大小 size=72.3 HTML文字格式與頁面2、設置字體 當文字是漢字時，格式中的“字體名可以為：宋體、幼圓、隸書、楷體_GB2312、黑體、仿宋_GB2312等。當文字為英文時，字體名可以為Times New Roman等約50種字體。2.3 HTML文字格式與頁面【例2-6】設置字體 設置字體 幼圓 隸書 黑體 楷體_GB2312 仿宋_GB2312 顯示效果2.3 HTML文字格式與頁面3、設置字型 字形就是文字的風格，如加粗、斜體、帶下劃線、上標、下

12、標等。字型的控制標志見下表標記格式字體結果黑體斜體帶下劃線帶刪除線下標上標大字體小字體或字體傾斜縮小字體（適用于程序代碼和指令）縮小字體+斜體（適用于電子郵件和網(wǎng)址）粗體標準打印機字體2.3 HTML文字格式與頁面【例2-7】設置字型 設置字型 設置字體 黑體 設置字體 斜體 設置字體 帶下劃線 設置字體 帶刪除線 設置字體 上標 設置字體 下標 設置字體大號字體 設置字體小號字體 設置字體傾斜 設置字體傾斜 設置字體減少設置字體減少+斜體 設置字體粗體設置字體規(guī)范打印字體 顯示效果2.3 HTML文字格式與頁面4、設置文字顏色HTML的顏色代碼，由六個字符組成：RRGGBB，每一位都是十六進

13、制，從09AF，所以可以產生166種顏色，也就是1677萬多種顏色。2.3 HTML文字格式與頁面【例2-5】用設置文字的大小。用設置文字的大小文字的大小!文字的大小 size=1文字的大小 size=2文字的大小 size=3文字的大小 size=4文字的大小 size=5文字的大小 size=6文字的大小 size=72.3 HTML文字格式與頁面【例2-5】用設置文字的大小。用設置文字的大小文字的大小!文字的大小 size=1文字的大小 size=2文字的大小 size=3文字的大小 size=4文字的大小 size=5文字的大小 size=6文字的大小 size=7Click to e

14、dit title style Add your title in here Add your title in here Add your title in hereThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.ThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.ThemeGallery is a Design Digital Content &

15、 Contents mall developed by Guild Design Inc.Click to add TextClick to add TextClick to add TextClick to add TextClick to edit title style Contents Contents ContentsThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.ThemeGallery is a Design Digital Content & Conte

16、nts mall developed by Guild Design Inc.ThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc. Title in here Title in here Title in here Title in here Title in hereDescription of the contentsClick to edit title styleThemeGallery is a Design Digital Content & Contents

17、mall developed by Guild Design Inc.00 01 02 03 04 05 06 07 50%70%160%230%100%150%380%300%Text in here (unit: %)YearClick to add TextClick to add TextClick to add TextClick to add TextClick to add TextClick to add TextClick to edit title styleAdd your text in hereAdd your text in hereTextTextTextText

18、TextTextTextTextThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.Click to edit title styleTitle in hereDescription of the contentsTitle in hereText in hereText in hereText in hereText in hereText in hereText in hereDescription of the contentsThemeGallery is a De

19、sign Digital Content & Contents mall developed by Guild Design Inc.Click to edit title style2. Describe contents for a Chart Description of the companys sub contents Description of the companys sub contents1. Describe contents for a Chart Description of the companys sub contents Description of the c

20、ompanys sub contentsAdd Your Title in hereClick to edit title styleGrowthStartJump202120072006 200520042003 200220012000 Description of the contents Description of the contents Description of the contents Description of the contents Description of the contents Description of the contents Description

21、 of the contents Description of the contents Description of the contentsClick to edit title style Add your text in hereYour text in here Your text in here Your text in here Add your text in here Your text in here Your text in here Your text in hereThemeGallery is a Design Digital Content & Contents

22、mall developed by Guild Design Inc.ThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.ThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.Click to edit title style Click to add Text Click to add Text Click to add Text Click to ad

23、d TextText in hereText in hereText in hereText in here Click to add Text Click to add Text Click to add Text Click to add Text Click to add Text Click to add Text Click to add Text Click to add Text Click to add Text Click to add Text Click to add Text Click to add TextClick to edit title styleTheme

24、Gallery is a Design Digital Content & Contents mall developed by Guild Design Inc.Click to add TextDescription of the contentsDescription of the contentsThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.ThemeGallery is a Design Digital Content & Contents mall dev

25、eloped by Guild Design Inc.Click to edit title stylePlease write down of contents explanation for Business Area.Business AreaBusiness AreaBusiness AreaBusiness AreaPlease write down of contents explanation for Business Area.Please write down of contents explanation for Business Area.Please write dow

26、n of contents explanation for Business Area.Please write down of contents explanation for Business Area.Click to edit title styleText in hereTitle in hereText in hereText in here2005200620072021 Description of the contents Description of the contents Description of the contents Description of the co

27、ntents Description of the contents Description of the contents Description of the contents Description of the contentsThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.Click to edit title styleContentsContentsContentContentThemeGallery is a Design Digital Content

28、 & Contents mall developed by Guild Design Inc. Click to add Text Click to add Text Click to add Text Click to add TextThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc. Click to add Text Click to add Text Click to add TextThemeGallery is a Design Digital Content

29、 & Contents mall developed by Guild Design Inc.Click to edit title style Title in hereDescription of the contentsText in hereDescription of the contentsDescription of the contentsDescription of the contentsDescription of the contents1. Title2. Title3. Title4. Title* Description of the contents* Desc

30、ription of the contentsClick to edit title styleAdd your text in hereYour text in hereYour text in hereAdd your text in hereYour text in hereYour text in hereAdd your text in hereYour text in hereYour text in hereThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.

31、Click to add TextClick to add TextClick to add TextClick to edit title styleText in hereText in hereText in hereTitleThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.TitleTitleTitleClick to edit title styleContentsThemeGallery is a Design Digital Content & Conte

32、nts mall developed by Guild Design Inc.Your Text HereYour Text HereYour Text HereYour Text HereDescription of the contentsClick to add TextClick to add TextClick to add TextClick to add TextClick to edit title styleThemeGallery is a Design Digital Content & Contents mall developed by Guild Design In

33、c.Title in here2.Description of the companys sub contentsDescribe a vision of company or strategic contents1.Description of the companys sub contentsClick to edit title styleThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.Title in hereTitle in hereTitle in here

34、Title in hereABCDClick to edit title style70%10%5%60%25%ThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.Text in hereText in hereText in hereText in hereClick to edit title styleThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.ThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.ThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.ThemeGallery is a Design Digital Content & Contents mal