|
HTML學(xué)習(xí) 一個(gè)例子 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>第一個(gè)頁(yè)面</title> 6 </head> 7 <body> 8 <h1>我的第一個(gè)標(biāo)題</h1> 9 <p>我的第一個(gè)段落。</p> 10 </body> 11 </html> 基本語(yǔ)法規(guī)范 1.標(biāo)簽：<html> 標(biāo)簽關(guān)系 1.包含關(guān)系: 1 <head> 2 <title> </title> 3 </head> 2.并列關(guān)系： 1 <head> </head> 2 <body> </body>
※： 開(kāi)發(fā)工具： 宇宙第一編輯器VScode、Sublime Text、DW、Webstrom，都是很優(yōu)秀的HTML編輯器。
HTML文本： 1 <h1>這是一個(gè)標(biāo)題。</h1> 2 <h2>這是一個(gè)標(biāo)題。</h2> 3 <h3>這是一個(gè)標(biāo)題。</h3> 4 <p>這是一個(gè)段落。</p> 5 <hr> 標(biāo)簽在HTML頁(yè)面中創(chuàng)建水平線 6 <hr style="width:60%;height:16px;color:Red"/> 7 <p>這是一個(gè)段落。</p> 8 <hr> 9 <p>這是一個(gè)段落。</p> 10 <!-- 這是一個(gè)注釋 --> 11 <p>這個(gè)<br>段落<br>演示了分行的效果</p> 12 <br>可以在不產(chǎn)生一個(gè)新段落的情況下進(jìn)行換行 13 xhtml中為<br/><hr/> 14 <b>加粗文本</b> 15 <i>斜體文本</i> 16 <big>大字體<big> 17 <small>小字體<small> 18 空格標(biāo)記" " HTML列表： 1 <ul style="list-style-type"> 2 <li>Morning</li> 3 <li>Night</li> 4 </ul> HTML有序列表： 1 <ol style="list-style-type"> 2 <li>Morning</li> 3 <li>Night</li> 4 </ol> HTML表格： 1 <tr>...</tr>---表格行標(biāo)記 2 <th>...</th>---表格表頭標(biāo)記 3 <td>...</td>---表格單元格標(biāo)記 4 <table border="1" align="center" width="250px"> 5 <tr bgcolor="Red"> 6 <th>Header 1</th> 7 <th>Header 2</th> 8 </tr> 9 <tr> 10 <td>row 1, cell 1</td> 11 <td>row 1, cell 2</td> 12 </tr> 13 <tr> 14 <td>row 2, cell 1</td> 15 <td>row 2, cell 2</td> 16 </tr> 17 </table> HTML圖像： 1 <img src="apple.jpg" alt="Pulpit rock" align="right" width="80%" height="80%"> HTML超鏈接： 1 <a href="https://www.bilibili.com/" target="_self">訪問(wèn)嗶哩嗶哩</a> 鏈接到其他網(wǎng)頁(yè)： 1 <a href="url">錨點(diǎn)</a> 鏈接到圖像上： 1 <a href="image_name.jpg">錨點(diǎn)</a> 鏈接到電子郵件： 1 <a href="mailto:電子郵件地址">錨點(diǎn)</a> 圖片超鏈接： 1 <a href="url"><img src="圖片文件名"/></a> 頁(yè)內(nèi)鏈接： 1 <a id="錨點(diǎn)名稱">預(yù)被鏈接后顯示的首部分</a> 2 <a href="#錨點(diǎn)名稱">錨點(diǎn)</a> 3 <!--先使用id屬性定義一個(gè)錨點(diǎn)，然后再使用href屬性指向該錨點(diǎn)，“#”表示鏈接目標(biāo)與a標(biāo)記屬于同一個(gè)頁(yè)面。--> HTML框架： 1 <iframe src="url"></iframe> 2 設(shè)置高度和寬度 3 <iframe src="demo_iframe.htm" width="250" height="100"></iframe> 4 frameborder屬性用于定義iframe表示是否顯示邊框 5 設(shè)置屬性值為“0”移除iframe的邊框： 6 <iframe src="demo_iframe.htm" frameborder="0"></iframe> 7 使用iframe來(lái)顯示目標(biāo)鏈接頁(yè)面 8 iframe可以顯示一個(gè)目標(biāo)鏈接的頁(yè)面，目標(biāo)鏈接的屬性須使用iframe的屬性，如: 9 <iframe src="demo_iframe.htm" name="iframe_a"></iframe> 10 <p><a href="http://www.bilibili.com" target="iframe_a">一個(gè)學(xué)習(xí)網(wǎng)站</a></p> HTML表單： 1 Text Fields: 2 <form> 3 First name: <input type="text" name="firstname"><br> 4 Last name: <input type="text" name="lastname"> 5 </form> 6 密碼：(不會(huì)明文顯示，而是以星號(hào)和圓點(diǎn)替代) 7 <form> 8 Password: <input type="password" name="pwd"> 9 </form> 10 單選按鈕： 11 <form> 12 <input type="radio" name="sex" value="男">男<br> 13 <input type="radio" name="sex" value="女">女14 </form> 15 復(fù)選框： 16 <form> 17 <input type="checkbox" name="vehicle" value="Book">I have a book<br> 18 <input type="checkbox" name="vehicle" value="Cup">I have a cup 19 </form> 20 提交按鈕/重置按鈕/普通按鈕： 21 <form name="input" action="html_form_action.php" method="get"> 22 Username: <input type="text" name="user"> 23 <input type="submit|reset|button" value="按鈕上顯示的字符串"> 24 </form> 25 隱藏域： 26 <input type="hidden" name="控件名" value="值"/> 27 文件域： 28 <input type="file" name="文件域的名稱"> JavaScript 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JavaScript 函數(shù)定義</title> 6 </head> 7 <body> 8 <script> 9 <!--定義一個(gè)無(wú)參函數(shù)--> 10 function Hello() 11 { 12 return("Hello! Every One!"); 13 } 14 <!--定義一個(gè)有參函數(shù)--> 15 function Add(a,b) 16 { 17 return (a+b); 18 } 19 <!--調(diào)用無(wú)參函數(shù)，在頁(yè)面中顯示函數(shù)的返回值--> 20 document.write(Hello()); 21 <!--調(diào)用有參函數(shù)，并顯示--> 22 var a=10,b=5; 23 var result=Add(a,b); 24 document.write("<br>"+a+"+"+b+"="+result); 25 </script> 26 </body> 27 </html> JavaScript輸出流：直接寫(xiě)入HTML輸出流
e.g.：
1 document.write("<h1>這是一個(gè)標(biāo)題</h1>"); 2 document.write("<p>這是一個(gè)段落。</p>"); 3 <!--只能在 HTML 輸出中使用 document.write。如果在文檔加載后使用該方法，會(huì)覆蓋整個(gè)文檔。--> 本隨筆是自己學(xué)習(xí)過(guò)程中的筆記，有不對(duì)的地方歡迎批評(píng)指正，勿擾，侵刪。 |
|
|
