網頁課程內容回顧(HTML),課程內容回顧
今天和大家分享我這段時間以來學習html的總結,以此來鞏固,也希望對初學者能有所協助。
開發工具:Sublime Text2或HBuilder
首先學習的當然是html的標籤語言,其實w3cschool中都有。
<meta> 元素可提供有關頁面的元資訊(meta-information),比如針對搜尋引擎和更新頻度的描述和關鍵詞 <meta charset="UIF-8"> <meta name="keyword" content="html5,css3"> <meta name="author" content="whqet"> <meta name="generater" content="sublime taxt2">
<title> 網頁標題 <title>Document</title>
<style> 指定標籤的行內樣式,頁面內部的css <style> p{ font-size: 12px; 字型大小 font-weight:bold; 字型變粗 font-style:italic; 字型變斜 color:red; 字型顏色 text-indent: 2em; 首行縮排 line-height: 1.5em; 行高 } </style>
<link> 連結外部的css <link rel="shortcut icon" type="image/x-icon" herf="favicon.ico">
<script>指令碼,頁內的指令碼,連結外部的js <script> var a="hello world"; alert(a); </script> <script src="1.js"></script> <script type="text/javascript"></script> document.write("<h1>Hello World!</h1>") </script>
<body> 顯示網頁裡面的內容 <body> 網頁內容 </body>
ol, ordered List (數字) 定義有序列表ul, unordered List (小圓點) 定義無序列表 li, list item <ol style="list-style-type:lower-alpha"> a,b,c <ul style="list-style-type:square"> 小方塊 ol: decimal 1阿拉伯數字(預設) lower-alpha a英文小寫 upper-alpha A英文大寫 lower-roman i羅馬小寫數字 upper-roman I羅馬大寫數字 ul: sc 實心圓(預設) circle 空心圓 square 實心正方形 none 不顯示任何標記
普通連結 普通連結最重要的兩個屬性,href指定連結地址,target指定方式開啟 <a href="<a target=_blank href="http://www.baidu.com">http://www.baidu.com</a>" target="-blank">百度一下</a> <a href="<a target=_blank href="http://www.w3cschool.com.cn/">http://www.w3cschool.com.cn/</a>" target="-blank">使用w3cschool學習網頁</a> 郵件連結 郵件連結可以調用本地的郵件用戶端發送郵件,用的不多(現在一般用網頁方式發送郵件) <a href="<a target=_blank href="mailto:whqet@qq.com?subject=Hello%20again">mailto:whqet@qq.com?subject=Hello%20again</a>">給慶哥發個郵件</a> 頁內連結,建立一個在網頁內部的導航 步驟:1、建立目標 <a name="abc"> </a> 2、跳轉到該頁 <a href="#abc"> </a> 菜單架構 我們經常使用ul、li、a的方式事件菜單 <ul> <li><a href="#abc">ASP</a></li> <li><a href="#abc">PHP</a></li> <li><a href="#abc">JSP</a></li> <li><a href="#abc">DELPHI</a></li> <li><a href="#abc">VS</a></li> <li><a href="#abc">AJAX</a></li> <li><a href="#abc">JQUERY</a></li> </ul>
<table>標籤定義HTML表格 簡單的HTML表格由table元素以及一個或多個tr、th或td元素組成。 tr元素定義表格行,th元素定義表頭,td元素定義表格單元。 更複雜的HTML表格也可能包括caption、col、colgroup、thead、tfoot以及tbody元素。 col, column 列,欄目,通常表示一個列 row, row 行,通常表示一個行 span 跨度 span 標籤,行內的容器 colspan td的屬性,該td跨列數 cell 細胞,單間,儲存格 space 空格 spacing 空間,間隔 cellspacing 儲存格間隔 padding 填充 cellpadding 儲存格的內填充 <table border="1"> <caption>資訊表</caption> <tr> <th>姓名</th> <th>性別</th> <th>年齡</th> </tr> <tr> <td>張三</td> <td>男</td> <td>30</td> </tr> <tr> <td>李四</td> <td>男</td> <td>45</td> </tr> <tr> <td>李倩</td> <td>女</td> <td>18</td> </tr> <tr> <td colspan="3">有些屬實,有些瞎編</td> </tr> </table> <img src="http://img.blog.csdn.net/20150328143849037?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSEVSTzA2MDc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
<figure> 標籤規定獨立的流內容(映像、圖表、照片、代碼等等)。 <figure> <figcaption>映像標題</figcaption> <img src="abcd.jpg" width="350" height="234" alt="" usemap="#abc"> </figure> 使用<map>標籤定義地圖,<map裡>面使用<area>標籤定義熱區 area裡面的shape shape="circle" coords="x,y,r"地區為圓形 圓心座標和半徑 shape="polygon" coords="x1,y1,x2,y2,x3,y3,..."地區為多邊形 多邊形所有頂點的座標 shape="rectangle" coords="x1,y1,x2,y2"地區為矩形 矩形的左上右下兩點的座標 熱區連結在<img>標籤裡面使用<usemap>屬性調用<map> <map name="#abc"> <area shape="circle" coords="95,115,80" href="<a target=_blank href="http://www.baidu.com">http://www.baidu.com</a>" alt=""> <area shape="polygon" coords="183,110,200,110,200,90,213,90,217,110,237,110" href="<a target=_blank href="http://www.csdn.net">http://www.csdn.net</a>" alt=""> <area shape="rectangle" coords="502,48,613,185" href="<a target=_blank href="http://www.sohu.com">http://www.sohu.com</a>" alt=""> </map>