1、HTML基礎學習 知通團隊知通團隊20162016下半下半學期招新學期招新 3 3月月2626日日HTML概念HTML（Hyper Text Markup Language 超文本標識語言）是一種用來制作簡單標記語言。HTML 文件是包含一些超文本文檔的標簽的文本文件。 這些標簽告訴 WEB 瀏覽器如何顯示頁面。 HTML 文件必須使用 htm 或者 html 作為文件擴展名。 HTML 文件可以通過簡單的文本編輯器來創(chuàng)建，使用可視化編輯工具 如Dreamweaver 、 Frontpage 等。 想不想嘗試一下？打開記事本，在其中輸入以下文本： 知通團隊 這是第一個html頁面 文件擴展名W

2、in7 系統(tǒng) 我的電腦 -工具-文件夾及系統(tǒng)選項-查看-點掉隱藏文件擴展名Html標簽HTML標簽用來組成HTML元素。HTML標簽兩端有兩個包括字符：“”,這兩個包括字符被稱為角括號。HTML標簽通常成對出現(xiàn)，比如和。一對標簽的前面一個是開始標簽，第二個是結束標簽,在開始和結束標簽之間的文本是元素內容。HTML標簽是大小寫無關的，跟表示的意思是一樣的。例子解釋HTML文檔中，第一個標簽是。這個標簽告訴瀏覽器這是HTML文檔的開始。HTML文檔的最后一個標簽是，這個標簽告訴瀏覽器這是HTML文檔的終止。在和標簽之間文本的是頭信息。在瀏覽器窗口中，頭信息是不被顯示的。在和標簽之間的文本是文檔標題

3、，它被顯示在瀏覽器窗口的標題欄。在和標簽之間的文本是正文，會被顯示在瀏覽器中。從頭head分析1.用來標記文檔的作者給開發(fā)者看（瀏覽器中不做任何顯示） 2.用來標記頁面的解碼方式（告訴瀏覽器解碼方式，以防出現(xiàn)亂碼問題，瀏覽器中不做任何顯示）Body中的基本標簽（掌握顯示效果）標題格式化段落預先格式化的文本引用的文本, 有序列表，定義列表，無編號列表 文本居中 水平橫線標題元素由標簽到定義。定義了最大的標題元素，定義了最小的這是一個標題這是一個標題這是一個標題這是一個標題這是一個標題這是一個標題段落這是一個段落這是一個段落這是一個段落HTML自動在一個段落前后各添加一個空行塊引用這部分內容是bl

4、ockquote標簽解析出的文本這部分內容是blockquote標簽解析出的文本這部分內容是blockquote標簽解析出的文本這部分內容是blockquote標簽解析出的文本這部分內容是blockquote標簽解析出的文本這部分是q標簽所解析出的文本標簽界定引用的文本塊，將段落縮進。blockquote標簽界定引用的文本塊，將段落縮進，q標簽多了雙引號。換行，線條標簽（換行）標簽（繪制水平線）當需要結束一行，并且不想開始新段落時，使用標簽。標簽不管放在什么位置，都能夠強制換行。標簽是一個空標簽，它沒有結束標記。居中居中效果用align屬性，align并不是一個標簽，它是標簽的一個屬性，放在頭

5、標簽里，格式如下例子。align的屬性值有l(wèi)eft center right，分別能使標簽所解析的文本靠左，居中靠右顯示。（支持align屬性的標簽很多，以下就寫其中兩種標簽）balababala balababala字符標記粗體斜體大號字體小號字體強調字體加粗文本大小，顏色HTML列表有序列表(數(shù)字編號)： 無序列表(圓點編號)： 定義列表(列表項目)： 列表項 項目定義有序列表：第一個選項第二個選項第三個選項有序列表有序列表：有序的列表:CoffeeTeaMilk無序列表示例一個無序列表：一個無序的列表:CoffeeTeaMilk自定義列表自定義列表自定義列表不是一個項目的序列，它是一系列

6、條目和它們的解釋。 計算機 用來計算的儀器 . . 顯示器 以視覺方式顯示信息的裝置 . .注釋標簽標簽（這個標簽是給代碼閱讀者用的，例如有人看你的代碼看不懂某段代碼什么意思，你可以在代碼后面寫上一個注釋標簽，在注釋標簽里寫上一些解釋，是代碼閱讀者更加容易理解代碼，類似于給句子寫批注，注釋標簽里的內容不會被解析顯示給用戶）背景顏色標簽里面有個屬性叫bgcolor，用來顯示網(wǎng)頁的背景顏色。例如下面例子：Look: 背景是黃的 Background!基本注意點有用的技巧HTML將截掉你文本中的多余空格。不管多少個空格，處理起來只當一個。一點附加信息：在HTML里面，一個空行也只被當作一個空格來處理

7、。你也許注意到了段落可以不寫結束標記。別依賴它，HTML的下一個版本將不準你漏掉任何一個結束標簽，務必規(guī)范。HTML格式文字從右向左顯示文字從左向右顯示 刪除文字文字加下劃線（插入文字）標簽This is preformatted text.It preserves both spaces and line breaks.This is preformatted text.It preserves both spaces and line breaks.標簽所解釋的文本，在代碼編輯器中怎么顯示，在瀏覽器中就這么顯示給用戶，這是個好東西！滾動文字啦啦啦，我會移動耶！ 我從左向右移我來回反彈移動方

8、向 #=left, right,up,down方式 #=scroll(一圈一圈的走), slide(只走一次), alternate(來回走)只走 3 趟喲！我走好快我走一步，停一停！ 循環(huán) #=次數(shù)，若未指定則循環(huán)不止(infinite)速度 延時 面積 我會移動耶！Height width的值單位是像素，或者是直接寫想要占用水平或豎直寬度的百分比Html實體有些字符，比如說“”字符，在HTML中有特殊的含義，因此不能在文本中使用。想要在HTML中顯示一個小于號“”，需要用到字符實體。（規(guī)范要求）想要在HTML文檔中顯示一個小于號，我們必須這樣寫：<或者<注意：

9、實體名是大小寫敏感的。最常用的字符實體顯示結果顯示結果描述描述實體名實體名實體號實體號不可拆分的空格  大于&gt>&and符號&&引號""單引號'其他字符實體顯示結果 描述 實體名 實體號 分¢¢英鎊££人民幣元¥¥章節(jié)§§版權©©注冊®&#1

10、74;乘號××除號÷÷HTML表格 表格是用標簽定義的。表格被劃分為行（使用標簽），每行又被劃分為數(shù)據(jù)單元格（使用標簽）。td表示“表格數(shù)據(jù)”（Table Data），即數(shù)據(jù)單元格的內容。數(shù)據(jù)單元格可以包含文本，圖像，列表，段落，表單，水平線，表格等等cellspacing=0表格例子課程表上午下午星期一語文數(shù)學英語物理化學生物自習星期二語文數(shù)學英語物理化學生物星期三語文數(shù)學英語物理化學生物行列演示每一個表格從&lttable&gt標簽開始每一行從&lttr&gt標簽開始每一列從&am

11、p;lttd&gt標簽開始One column 一行一列:100One row and three columns 一行三列:100200300Two rows and three columns兩行三列:100200300400500600邊框演示一個普通的邊框 border:FirstRow 一個稍微大的邊框:FirstRowborder屬性表格和border屬性如果不指定border屬性，表格將不顯示邊框。有時候這很有用，但是多數(shù)時候我們希望顯示邊框。想要顯示一個有邊框的表格，需要使用border屬性。Row 1, cell 1Row 1, cell 2 跨行顯示跨兩列:Name

12、TelephoneBill Gates555 77 854555 77 855跨兩行:First Name:Bill GatesTelephone:555 77 854555 77 855給單元格內容設置對齊方式給單元格內容設置對齊方式：Money spent on.JanuaryFebruaryClothes$241.10$50.20Make-Up$30.00$44.45Food$730.40$650.00Sum$1001.50$744.65表單HTML表單中在用戶代理屏幕上面放置一些用戶輸入數(shù)據(jù)的GUI控件簡單標簽：文本輸入框用來輸入小段文本名稱、地址、搜索關鍵字Size指的是文本框的長度

13、Maxlength表示輸入最多文字的個數(shù)單選按鈕一組小的圓形按鈕，只能選擇一個單選題A單選題B復選按鈕小的方框，彼此之間互不排斥的選項多選題A多選題B多選題C多選題D列表框從列表中選擇一個或多個文本項目123456789密碼輸入框與文本框相似，只是輸入時，顯示“*”按鈕提交按鈕：重置按鈕：HTML圖像示例插入圖像：Img標簽和src屬性在HTML里面，圖像是由標簽定義的。是空標簽，意思是說，它只擁有屬性，而沒有結束標簽。想要在頁面上顯示一個圖像，需要使用src屬性。“src”表示“源”的意思。“src”屬性的值是所要顯示圖像的URL。插入圖像的語法： URL指的圖像存儲的地址。用”子目錄“im

14、ages”中的圖像“boat.gif”的URL如下： “http:/ “alt”屬性在瀏覽器裝載圖像失敗的時候告訴用戶所丟失的信息，此時，瀏覽器顯示這個“交互文本”來代替圖像。給頁面上的圖像都加上alt屬性是一個好習慣，它有助于更好地顯示信息，而且，對純文本瀏覽器很有用。插入聲音 添加背景音樂解釋：width=100 height=40 分別表示播放器的寬度和高度，都選擇0將隱藏播放器（隱藏時一定要選擇自動播放）autostart=true中true或1表示自動播放，false或0表示手動播放loop=true 中的true或1表示重復播放，false或0表示只播放一次volume設置音量的大

15、小(0100)Html鏈接HTML使用超級鏈接來連接到網(wǎng)絡上的其他頁面。示例：連接到本地的頁面 鏈接到百度圖片作為鏈接你可以用圖片作為一個鏈接: 這個例子說明了在html中如何用圖片作為連接Html框架（難點）垂直分欄水平分欄標簽frameset標簽 frame標簽混合框架導航框架使用框架，可以在一個瀏覽器窗口中顯示不止一個HTML文檔。這樣的HTML文檔被稱為框架頁面，它們是相互獨立的。 看示例使用框架的不利因素有：網(wǎng)站開發(fā)者需要關心更多HTML文檔的情況。 打印整個頁面變得困難垂直分欄使用框架可以在一個瀏覽器中顯示不止一個頁面示例 ：垂直分欄這個例子說明了如何創(chuàng)建一個有三個頁面的垂直分欄。

16、水平分欄這個例子說明了如何創(chuàng)建一個有三個頁面的水平分欄。frameset標簽 frame標簽frameset標簽標簽定義了如何將窗口拆分成框架。 每個frameset標簽定義了一組行/列。 行/列的值指明了每個行/列在屏幕上所占的大小。 frame標簽標簽定義了每個框架中放入什么文件。 下面這個例子中，有一個兩列的分欄。第一個被設置成窗口寬度的25，第二個被設置成窗口寬度的75。頁面“frame_a.htm”被放在第一個分欄中，“frame_b.htm”被放在第二個分欄中。 基本注意點有用的技巧假如一個框架有可見邊框，用戶可以拖動邊框來改變它的大小。如果不想讓用戶改變大小，可以在標簽中加入：n

17、oresize=“noresize”。frameborder：指明框架是否有邊框（0沒有，1有）scrolling：控制框是否顯示滾動條，以滾動顯示框架內的內容noresize:在frame上面設置后不允許用戶修改框架的大小混合框架導航框架這個例子說明了如何創(chuàng)建一個導航框架。導航框架包含了一系列鏈接，它們的目標頁面在第二個框架中。文件“frame_links.htm”包含了三個鏈接，鏈接的代碼如下：Frame aFrame bFrame c 第二個框架將顯示鏈接到的頁面。target屬性name屬性（難點）使用target屬性，你可以定義從什么地方打開鏈接地址。下面這段代碼打開一個新的瀏覽器窗口來打開鏈接：Visit W3Schools!target的值：_blank:在新窗口打開_self:在同一個框架中打開_parent:在父框架打開_top:在主窗口打開錨標簽(難點)name屬性用來創(chuàng)建一個命名的錨。使用命名錨以后，可以讓鏈接直接跳轉到一個頁面的某一章節(jié)，而不用用戶打開那一頁，再從上到下慢慢找。下面是命名錨的語法：Text to be displayed你可以為錨隨意指定名字，只要你愿意。下面這行代碼定義了一個命名錨：Useful Tips Section你應該注意到了：命名錨的顯示方式并沒有什么與眾不同的。