HTML學習日志
01.HTML簡介
HTML(Hyper Text Mark-up Language超文本標記語言)，標記就是用來描述網頁內容的一些特定符號，HTML不是編程語言，而是一種描述性的標記語言，用于描述網頁中內容的顯示方式，比如文字以什么顏色、大小來顯示，這些都是利用HTML標記來實現的.HTML文檔的創建方式: 用HTML語言創建的文檔 ·手工直接編寫(例如記事本)·通過圖形化的HTML開發軟件Dreamweaver ·由Web服務器上的動態網頁程序生成 標記也稱為標簽或元素.02.HTML語法
HTML最基本的語法是: <標記符>內容 標記符通常都是成對出現的，有一個開頭標記和結束標記，結束標記只是在開頭標記的前面加一個斜杠“/”，當瀏覽器打開html文件后，就會理解里面的標記符，然后把標記符對應的功能表達出來。例如:
文字內容 制作一個html網頁文件: ·新建一個記事本的文件，命名為 *.html ·在文件里面輸入內容
HTML標記的類型: 單標記與雙標記 ·單標記: <標記名稱> ·單一型，無屬性值: 如:
·雙標記
·無屬性值: <標記名稱>...如:
... ·有屬性值: <標記名稱屬性=“屬性值”>...如:
... 說明: ·標記與屬性、屬性之間以空格分隔
·屬性不區分先后順序，且屬性不是必需的.·雖然在HTML中標記不區分大小寫，但在XHTML中所有標記都必須小寫，所以建議所有標記都采用小寫.03.HTML文檔結構
所有的網頁文件，通常由四對標記來構成文檔的骨架:
標題 <title> </head> <body> 正文</p><h2><a name="2" >第二篇：html學習筆記小結2</a></h2><p>4.3<tr><th><td>標簽下的常用屬性</p><p>屬性名稱屬性值說明widthheight</p><p>align(水平方向)rightleftcenter</p><p>valign(垂直方向)top數據靠上middle數據居中buttombgcolor</p><p>4.4拆分與合并單元格 <td>里面的屬性</p><p>屬性名稱屬性值colspan數字rowspan數字先刪掉不要的空格再合并需要的空格 4.5表格的標題<table></p><p><caption>....</caption></table></p><p>屬性有：</p><p>屬性名稱屬性值aligntopbuttom 5.1背景圖片設置</p><p><body background=“url”></p><p>5.2將圖片插入網頁中</p><p>格式:<img src=“url”></p><p>功能：將圖片插入網頁中 單一標簽</p><p>屬性名稱屬性值srcurlwidth像素/百分比height像素/百分比alt字符串border數字5.3文字圖像的排列</p><p>屬性名稱屬性值alignleftrighttopmiddlebuttom間隙設置</p><p>數據靠下 說明</p><p>向兩邊擴展 向上下擴展 說明</p><p>圖片的路徑</p><p>圖片的寬度(絕對和相對)圖片的高度(絕對和相對)給圖片做注解 圖片邊框 說明</p><p>圖像靠左 文字靠右 圖像靠右 文字靠左 文字靠上 文字居中 文字靠下</p><p>vspace像素垂直上下兩端與物件的距離hspace像素水平左右兩端與物件的距離</p><p>5.4 圖片超鏈接</p><p><a href=“url”><img src=“url”></a></p><p>注意邊框問題</p><p>5.5地圖索引</p><p>格式：<img src=“url” usemap=“#圖像名稱”></p><p><map name=“圖片名稱” id=“圖片名稱”></p><p><area shape=“選取區塊的形狀” coords=“坐標” href=“url” alt=“文字說明”></map></p><p>說明：</p><p><map>聲明整張圖使用地圖連接方式進行連接</p><p><area>表示需要連接的某個區塊</p><p><shape>表示我們所選擇的形狀 如：rect矩形 circle圓形poly 多邊形coords 表示地圖的坐標位置</p><p>舉例：</p><p><img src=“bg.jpg” border=“0” usemap=“#Map”></p><p><map name=“Map”></p><p><area shape=“rect” coords=“136,36,202,102” href=“">網易</a></p><p>2.file連接本地的文件</p><p>聲明<a href=file:///e/images/pic.jpg>圖片</a></p><p>3.ftp</p><p>聲明<a href=”ftp://192.168.4.21/“>進入</a></p><p>4.mailto<a href=mailto:bnbbs@163.com>E-MAIL</a></p><p>6.3 相對鏈接和絕對鏈接</p><p>1.若是6.html和index.html文件在同一目錄下</p><p>使用 index.html(index.html為連接文件)</p><p><a href=”index.html“>index.html</a></p><p>2.若index.html文件在6.html文件目錄下的文件夾page里面</p><p>則使用 page/index.html</p><p><a href=”page/index.html“>index.html</a></p><p>3.如果index.html在 page文件下page2中</p><p>page/page2/index.html2、3為往后查找文件路徑</p><p>4.若6.html文件在page文件夾中 則查找index.html</p><p>需要向上翻一層查找</p><p>../index.html</p><p><a href=”../index.html“>index.html</a></p><p>5.若是6.html文件在page文件夾里面的page2文件夾里面</p><p>則查找連接index.html 使用</p><p>../../index.html4、5為往前查找</p><p>5.若6.html在page文件夾中 而index.html在images文件夾中</p><p>則6.html要查找連接index.html文件需要</p><p>先出page文件夾再進images文件夾</p><p>../images/index.html</p><p><a href=”../images/index.html“>index.html</a></p><p>6.4 書簽鏈接</p><p>先在需要跳轉的文本地方創建書簽點</p><p>再進行連接</p><p><a>下的屬性</p><p>屬性名稱屬性值</p><p>name字符串</p><p>格式：</p><p>錨點:<a name=”音樂“>..</a></p><p>連接點<a href=”#音樂“>..</a></p><p>連接到別的網頁的書簽項目</p><p>基本格式：</p><p>錨點：<a name=”音樂“>...</a></p><p>連接點：<a href=”index.html#音樂“>...</a></p><p>先連接到需要連接的網頁 再連接到書簽</p><p>6.5基準參考點</p><p>基本格式:</p><p><head></p><p><base href="http://www.tmdps.cn/"/></p><p></head></p><p>作用:所有的html都會在前面加上這個域名http://.cn/ 防止跳到別的網站</p><p>注意：最后“/”必須要打 錯誤 ：http://.cn</p><p>6.6超鏈接事件</p><p>link 顏色的設置</p><p>基本格式: <body link=”顏色“ alink=”顏色“ vlink=”顏色“></p><p>link超鏈接尚未選中的文字</p><p>alink 超鏈接選中但是為放開的顏色</p><p>vlink 超鏈接已被選中過的顏色</p><p>7.1表單是提供給用戶輸入，選取，勾選數據，以便提交給服務器數據庫的工具表單的功能結構：</p><p>主標記結構：<from>...</from></p><p>屬性值值說明</p><p>name字符串給這個表單起的名字</p><p>methodget/post表單的傳輸方式 post有利于信息的保護 不會顯示在域名傳輸地址欄中 get會在域名傳輸地址中顯示所有的信息 不利于信息安全 所以一般設置為post</p><p>actionurl傳輸的目標 意為將表單中所有的信息傳輸到某一個地址去，若是沒有指定傳輸地址 則會傳給自己</p><p>7.2 文本欄、密碼欄、input是一個單標簽 屬于插入一個東西 而雙標簽相當于一個容器 包含一些東西表單一般是要起名字 因為以后要使用javascript進行激活 使它做一些事件</p><p>文本欄：<input type=”text“ name=”欄位名稱“ value=”欄位設置默認值“ size=”欄位顯示的寬度“ maxlength=”欄位輸入數據的最大長度“ ></p><p>姓名:<input type=”text“ name=”usename“ value=”小張“ size=”30“ maxlength=”10“></p><p>密碼欄： <input type=”password“ name=”欄位名稱“ value=”欄位設置默認值“ size=”欄位顯示的寬度“ maxlength=”欄位輸入數據的最大長度“ ></p><p>密碼:<input type=”password“ name=”usepassword“ size=”30“></p><p>7.3復選框 單選框</p><p>復選框：<input type=”checkbox“ name=”欄位名稱“ checked disable></p><p>checked 表示已經選定不容修改disable 表示已經選定不容修改</p><p>愛好:<input type=”checkbox“ name=”love“>體育<input type=”checkbox“</p><p>name=”love“>音樂</p><p>單選框:<input type=”radio“ name=”欄位名稱“ checked disable></p><p>性別:<input type=”radio“ name=”sex“>男<input type=”radio“ name=”sex“>女</p><p>7.4窗體欄和區塊</p><p>窗體欄就是下拉菜單</p><p><select name=”欄位名稱“></p><p><option value=”欄位設置值“>欄位設置值</p><p><option value=”欄位設置值“>欄位設置值</p><p><option value=”欄位設置值“>欄位設置值</p><p></select></p><p>舉例：地址：<select name=”address“></p><p><option value=”上海“>上海</p><p><option value=”南京“>南京</p><p><option value=”鹽城“>鹽城</p><p></select></p><p>//分組<optgroup label=”分組名稱“><option>...<option></optgroup>舉例：</p><p>address:<select name=”address“></p><p><optgroup lable=”上海“></p><p><option value=”普陀區“>普陀區</p><p><option value=”寶山區“>寶山區</p><p></optgroup></p><p><optgroup lable=”南京“></p><p><option value=”下關“>下關</p><p><option value=”浦口“>浦口</p><p></optgroup></p><p><optgroup lable=”鹽城“></p><p><option value=”亭湖“>亭湖</p><p><option value=”鹽都“>鹽都</p><p></optgroup></p><p></select></p><p>7.5文字區塊的設置</p><p><textarea cols=”設置長度“ rows=”設置寬度“></p><p>.....</textarea></p><p>請留下您的建議和意見：</p><p><textarea name=”content“ cols=”200“ rows=”50“></p><p></textarea></p><p>7.6按鈕和圖像按鈕</p><p>提交:<input type=”submit“ value=”提交“></p><p>重置<input type=”reset“ value=”重置“></p><p>按鈕圖像</p><p><button type=”submit“ name=”提交“></p><p><img src=”url“></p><p></button></p><p>7.7 上傳文件</p><p><input type=”file“ name=”file“></p><p>7.8外邊框和標題</p><p>外邊框：<fielset>...</fielset></p><p>標題:<legend>...</legend></p><p><from name=”reg“ method=”post“ action=”http://baidu.com“><fielset></p><p><legend>注冊表</legend></p><p>.....</fielset></p><p></from></p><p>總結實例：</p><p><from></p><p><head></p><p><title>注冊表
注冊表
姓名:
密碼:
QQ:
聯系電話:
愛好:
性別:
地址:
鶴城區
溆浦
石鼓區 雁峰區
雨花區 長沙縣
HTML學習心得
一、HTML簡介
全寫： HyperText Mark-up Language，譯名： 超文件注標式語言（譯名之一），簡釋：一種為普通文件中某些字句加上標示的語言，其目的在于運用標記（tag）使文件達到預期的顯示效果。
HTML 是在 SGML 定義下的一個描述性語言，SGML(Standard Generalized Markup Language,標準通用標記語言)，是一種定義電子文檔結構和描述其內容的國際標準語言，是所有電子文檔標記語言的起源，早在Web發明之前SGML就已存在。HTML 不是程式語言，如 C++ 和 Java 之類，它只是標示語言，基本上你只要明白了各種標記的用法便算學懂了 HTML，它的格式非常簡單，只是由文字及標記組合而成，在編輯方面，任何文字編輯器都可以，只要能將文件另存成 ASCII 純文字格式即可，當然以專業的網頁編輯軟件為佳。
1.優點
HTML文檔制作不是很復雜，且功能強大，支持不同數據格式的文件鑲入，這也是WWW盛行的原因之一，其主要特點如下：1 簡易性，HTML版本升級采用超集方式，從而更加靈活方便。2 可擴展性，HTML語言的廣泛應用帶來了加強功能，增加標識符等要求，HTML采取子類元素的方式，為系統擴展帶來保證。3平臺無關性。雖然PC機大行其道，但使用MAC等其他機器的大有人在，HTML可以使用在廣泛的平臺上，這也是WWW盛行的另一個原因。
二、HTML標記
任何標記皆由“<”與“>”圍住，如
標記名與小于號之間不能留有空白字符。某些標記要加上參數，某些則不必。如 Hello 參數只可加于起始標記中。在起始標記名前加上符號“/”便是其終結標記，如 ，標記字母大小寫皆可。
1.標記種類
標記種類分為兩種：圍堵標記和空標記。圍堵標記是以起始標記及終結標記將文字圍住，令其達到預期顯示效果。也就是說，標記是成對出現的，例如 Creation of Webpage ，其中及終結標記 標示文字 Creation of webpage，令其顯示成粗體，兩者失其一都會發生錯誤顯示。空標記是指標記單獨出現，只有起始標記沒有終結標記。例如
2.標記類型
標記類型按用途可以分為：文件標記(如：、
)、排版標記(如：
、
