HTML學(xué)習(xí)日志
01.HTML簡(jiǎn)介
HTML(Hyper Text Mark-up Language超文本標(biāo)記語言)，標(biāo)記就是用來描述網(wǎng)頁內(nèi)容的一些特定符號(hào)，HTML不是編程語言，而是一種描述性的標(biāo)記語言，用于描述網(wǎng)頁中內(nèi)容的顯示方式，比如文字以什么顏色、大小來顯示，這些都是利用HTML標(biāo)記來實(shí)現(xiàn)的.HTML文檔的創(chuàng)建方式: 用HTML語言創(chuàng)建的文檔 ·手工直接編寫(例如記事本)·通過圖形化的HTML開發(fā)軟件Dreamweaver ·由Web服務(wù)器上的動(dòng)態(tài)網(wǎng)頁程序生成 標(biāo)記也稱為標(biāo)簽或元素.02.HTML語法
HTML最基本的語法是: <標(biāo)記符>內(nèi)容 標(biāo)記符通常都是成對(duì)出現(xiàn)的，有一個(gè)開頭標(biāo)記和結(jié)束標(biāo)記，結(jié)束標(biāo)記只是在開頭標(biāo)記的前面加一個(gè)斜杠“/”，當(dāng)瀏覽器打開html文件后，就會(huì)理解里面的標(biāo)記符，然后把標(biāo)記符對(duì)應(yīng)的功能表達(dá)出來。例如:
文字內(nèi)容 制作一個(gè)html網(wǎng)頁文件: ·新建一個(gè)記事本的文件，命名為 *.html ·在文件里面輸入內(nèi)容
HTML標(biāo)記的類型: 單標(biāo)記與雙標(biāo)記 ·單標(biāo)記: <標(biāo)記名稱> ·單一型，無屬性值: 如:
·雙標(biāo)記
·無屬性值: <標(biāo)記名稱>...如:
... ·有屬性值: <標(biāo)記名稱屬性=“屬性值”>...如:
... 說明: ·標(biāo)記與屬性、屬性之間以空格分隔
·屬性不區(qū)分先后順序，且屬性不是必需的.·雖然在HTML中標(biāo)記不區(qū)分大小寫，但在XHTML中所有標(biāo)記都必須小寫，所以建議所有標(biāo)記都采用小寫.03.HTML文檔結(jié)構(gòu)
所有的網(wǎng)頁文件，通常由四對(duì)標(biāo)記來構(gòu)成文檔的骨架:
標(biāo)題 <title> </head> <body> 正文</p><h2><a name="2" >第二篇：html學(xué)習(xí)筆記小結(jié)2</a></h2><p>4.3<tr><th><td>標(biāo)簽下的常用屬性</p><p>屬性名稱屬性值說明widthheight</p><p>align(水平方向)rightleftcenter</p><p>valign(垂直方向)top數(shù)據(jù)靠上middle數(shù)據(jù)居中buttombgcolor</p><p>4.4拆分與合并單元格 <td>里面的屬性</p><p>屬性名稱屬性值colspan數(shù)字rowspan數(shù)字先刪掉不要的空格再合并需要的空格 4.5表格的標(biāo)題<table></p><p><caption>....</caption></table></p><p>屬性有：</p><p>屬性名稱屬性值aligntopbuttom 5.1背景圖片設(shè)置</p><p><body background=“url”></p><p>5.2將圖片插入網(wǎng)頁中</p><p>格式:<img src=“url”></p><p>功能：將圖片插入網(wǎng)頁中 單一標(biāo)簽</p><p>屬性名稱屬性值srcurlwidth像素/百分比height像素/百分比alt字符串border數(shù)字5.3文字圖像的排列</p><p>屬性名稱屬性值alignleftrighttopmiddlebuttom間隙設(shè)置</p><p>數(shù)據(jù)靠下 說明</p><p>向兩邊擴(kuò)展 向上下擴(kuò)展 說明</p><p>圖片的路徑</p><p>圖片的寬度(絕對(duì)和相對(duì))圖片的高度(絕對(duì)和相對(duì))給圖片做注解 圖片邊框 說明</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=“選取區(qū)塊的形狀” coords=“坐標(biāo)” href=“url” alt=“文字說明”></map></p><p>說明：</p><p><map>聲明整張圖使用地圖連接方式進(jìn)行連接</p><p><area>表示需要連接的某個(gè)區(qū)塊</p><p><shape>表示我們所選擇的形狀 如：rect矩形 circle圓形poly 多邊形coords 表示地圖的坐標(biāo)位置</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=“">網(wǎng)易</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/“>進(jìn)入</a></p><p>4.mailto<a href=mailto:bnbbs@163.com>E-MAIL</a></p><p>6.3 相對(duì)鏈接和絕對(duì)鏈接</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文件夾再進(jìn)images文件夾</p><p>../images/index.html</p><p><a href=”../images/index.html“>index.html</a></p><p>6.4 書簽鏈接</p><p>先在需要跳轉(zhuǎn)的文本地方創(chuàng)建書簽點(diǎn)</p><p>再進(jìn)行連接</p><p><a>下的屬性</p><p>屬性名稱屬性值</p><p>name字符串</p><p>格式：</p><p>錨點(diǎn):<a name=”音樂“>..</a></p><p>連接點(diǎn)<a href=”#音樂“>..</a></p><p>連接到別的網(wǎng)頁的書簽項(xiàng)目</p><p>基本格式：</p><p>錨點(diǎn)：<a name=”音樂“>...</a></p><p>連接點(diǎn)：<a href=”index.html#音樂“>...</a></p><p>先連接到需要連接的網(wǎng)頁 再連接到書簽</p><p>6.5基準(zhǔn)參考點(diǎn)</p><p>基本格式:</p><p><head></p><p><base href="http://004km.cn/"/></p><p></head></p><p>作用:所有的html都會(huì)在前面加上這個(gè)域名http://.cn/ 防止跳到別的網(wǎng)站</p><p>注意：最后“/”必須要打 錯(cuò)誤 ：http://.cn</p><p>6.6超鏈接事件</p><p>link 顏色的設(shè)置</p><p>基本格式: <body link=”顏色“ alink=”顏色“ vlink=”顏色“></p><p>link超鏈接尚未選中的文字</p><p>alink 超鏈接選中但是為放開的顏色</p><p>vlink 超鏈接已被選中過的顏色</p><p>7.1表單是提供給用戶輸入，選取，勾選數(shù)據(jù)，以便提交給服務(wù)器數(shù)據(jù)庫的工具表單的功能結(jié)構(gòu)：</p><p>主標(biāo)記結(jié)構(gòu)：<from>...</from></p><p>屬性值值說明</p><p>name字符串給這個(gè)表單起的名字</p><p>methodget/post表單的傳輸方式 post有利于信息的保護(hù) 不會(huì)顯示在域名傳輸?shù)刂窓谥?get會(huì)在域名傳輸?shù)刂分酗@示所有的信息 不利于信息安全 所以一般設(shè)置為post</p><p>actionurl傳輸?shù)哪繕?biāo) 意為將表單中所有的信息傳輸?shù)侥骋粋€(gè)地址去，若是沒有指定傳輸?shù)刂?則會(huì)傳給自己</p><p>7.2 文本欄、密碼欄、input是一個(gè)單標(biāo)簽 屬于插入一個(gè)東西 而雙標(biāo)簽相當(dāng)于一個(gè)容器 包含一些東西表單一般是要起名字 因?yàn)橐院笠褂胘avascript進(jìn)行激活 使它做一些事件</p><p>文本欄：<input type=”text“ name=”欄位名稱“ value=”欄位設(shè)置默認(rèn)值“ size=”欄位顯示的寬度“ maxlength=”欄位輸入數(shù)據(jù)的最大長(zhǎng)度“ ></p><p>姓名:<input type=”text“ name=”usename“ value=”小張“ size=”30“ maxlength=”10“></p><p>密碼欄： <input type=”password“ name=”欄位名稱“ value=”欄位設(shè)置默認(rèn)值“ size=”欄位顯示的寬度“ maxlength=”欄位輸入數(shù)據(jù)的最大長(zhǎng)度“ ></p><p>密碼:<input type=”password“ name=”usepassword“ size=”30“></p><p>7.3復(fù)選框 單選框</p><p>復(fù)選框：<input type=”checkbox“ name=”欄位名稱“ checked disable></p><p>checked 表示已經(jīng)選定不容修改disable 表示已經(jīng)選定不容修改</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窗體欄和區(qū)塊</p><p>窗體欄就是下拉菜單</p><p><select name=”欄位名稱“></p><p><option value=”欄位設(shè)置值“>欄位設(shè)置值</p><p><option value=”欄位設(shè)置值“>欄位設(shè)置值</p><p><option value=”欄位設(shè)置值“>欄位設(shè)置值</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=”普陀區(qū)“>普陀區(qū)</p><p><option value=”寶山區(qū)“>寶山區(qū)</p><p></optgroup></p><p><optgroup lable=”南京“></p><p><option value=”下關(guān)“>下關(guān)</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文字區(qū)塊的設(shè)置</p><p><textarea cols=”設(shè)置長(zhǎng)度“ rows=”設(shè)置寬度“></p><p>.....</textarea></p><p>請(qǐng)留下您的建議和意見：</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外邊框和標(biāo)題</p><p>外邊框：<fielset>...</fielset></p><p>標(biāo)題:<legend>...</legend></p><p><from name=”reg“ method=”post“ action=”http://baidu.com“><fielset></p><p><legend>注冊(cè)表</legend></p><p>.....</fielset></p><p></from></p><p>總結(jié)實(shí)例：</p><p><from></p><p><head></p><p><title>注冊(cè)表
注冊(cè)表
姓名:
密碼:
QQ:
聯(lián)系電話:
愛好:
性別:
地址:
鶴城區(qū)
溆浦
石鼓區(qū) 雁峰區(qū)
雨花區(qū) 長(zhǎng)沙縣
HTML學(xué)習(xí)心得
一、HTML簡(jiǎn)介
全寫： HyperText Mark-up Language，譯名： 超文件注標(biāo)式語言（譯名之一），簡(jiǎn)釋：一種為普通文件中某些字句加上標(biāo)示的語言，其目的在于運(yùn)用標(biāo)記（tag）使文件達(dá)到預(yù)期的顯示效果。
HTML 是在 SGML 定義下的一個(gè)描述性語言，SGML(Standard Generalized Markup Language,標(biāo)準(zhǔn)通用標(biāo)記語言)，是一種定義電子文檔結(jié)構(gòu)和描述其內(nèi)容的國(guó)際標(biāo)準(zhǔn)語言，是所有電子文檔標(biāo)記語言的起源，早在Web發(fā)明之前SGML就已存在。HTML 不是程式語言，如 C++ 和 Java 之類，它只是標(biāo)示語言，基本上你只要明白了各種標(biāo)記的用法便算學(xué)懂了 HTML，它的格式非常簡(jiǎn)單，只是由文字及標(biāo)記組合而成，在編輯方面，任何文字編輯器都可以，只要能將文件另存成 ASCII 純文字格式即可，當(dāng)然以專業(yè)的網(wǎng)頁編輯軟件為佳。
1.優(yōu)點(diǎn)
HTML文檔制作不是很復(fù)雜，且功能強(qiáng)大，支持不同數(shù)據(jù)格式的文件鑲?cè)耄@也是WWW盛行的原因之一，其主要特點(diǎn)如下：1 簡(jiǎn)易性，HTML版本升級(jí)采用超集方式，從而更加靈活方便。2 可擴(kuò)展性，HTML語言的廣泛應(yīng)用帶來了加強(qiáng)功能，增加標(biāo)識(shí)符等要求，HTML采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來保證。3平臺(tái)無關(guān)性。雖然PC機(jī)大行其道，但使用MAC等其他機(jī)器的大有人在，HTML可以使用在廣泛的平臺(tái)上，這也是WWW盛行的另一個(gè)原因。
二、HTML標(biāo)記
任何標(biāo)記皆由“<”與“>”圍住，如
標(biāo)記名與小于號(hào)之間不能留有空白字符。某些標(biāo)記要加上參數(shù)，某些則不必。如 Hello 參數(shù)只可加于起始標(biāo)記中。在起始標(biāo)記名前加上符號(hào)“/”便是其終結(jié)標(biāo)記，如 ，標(biāo)記字母大小寫皆可。
1.標(biāo)記種類
標(biāo)記種類分為兩種：圍堵標(biāo)記和空標(biāo)記。圍堵標(biāo)記是以起始標(biāo)記及終結(jié)標(biāo)記將文字圍住，令其達(dá)到預(yù)期顯示效果。也就是說，標(biāo)記是成對(duì)出現(xiàn)的，例如 Creation of Webpage ，其中及終結(jié)標(biāo)記 標(biāo)示文字 Creation of webpage，令其顯示成粗體，兩者失其一都會(huì)發(fā)生錯(cuò)誤顯示?？諛?biāo)記是指標(biāo)記單獨(dú)出現(xiàn)，只有起始標(biāo)記沒有終結(jié)標(biāo)記。例如
2.標(biāo)記類型
標(biāo)記類型按用途可以分為：文件標(biāo)記(如：、
)、排版標(biāo)記(如：
、
)、字體標(biāo)記(如：
、)、清單標(biāo)記(如：、 