HTML學習 一個例子 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>第一個頁面</title> 6 </head> 7 <body> 8 <h1>我的第一個標題</h1> 9 <p>我的第一個段落。</p ...
HTML學習
一個例子
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>第一個頁面</title> 6 </head> 7 <body> 8 <h1>我的第一個標題</h1> 9 <p>我的第一個段落。</p> 10 </body> 11 </html>
基本語法規範
1.標簽：<html>
2雙標簽：<html> </html>
3.單標簽：<br />
標簽關係
1.包含關係:
1 <head> 2 <title> </title> 3 </head>
2.併列關係：
1 <head> </head> 2 <body> </body>
※：
1.<!DOCTYPE>聲明位於文檔中的最前面的位置，處於<html>標簽之前
2.<!DOCTYPE>不是一個HTML標簽，它就是文檔類型聲明標簽。
開發工具：
宇宙第一編輯器VScode、Sublime Text、DW、Webstrom，都是很優秀的HTML編輯器。
HTML文本：
1 <h1>這是一個標題。</h1> 2 <h2>這是一個標題。</h2> 3 <h3>這是一個標題。</h3> 4 <p>這是一個段落。</p> 5 <hr> 標簽在HTML頁面中創建水平線 6 <hr style="width:60%;height:16px;color:Red"/> 7 <p>這是一個段落。</p> 8 <hr> 9 <p>這是一個段落。</p> 10 <!-- 這是一個註釋 --> 11 <p>這個<br>段落<br>演示了分行的效果</p> 12 <br>可以在不產生一個新段落的情況下進行換行 13 xhtml中為<br/><hr/> 14 <b>加粗文本</b> 15 <i>斜體文本</i> 16 <big>大字體<big> 17 <small>小字體<small> 18 空格標記" "
HTML列表：
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>---表格行標記 2 <th>...</th>---表格表頭標記 3 <td>...</td>---表格單元格標記 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">訪問嗶哩嗶哩</a>
鏈接到其他網頁：
1 <a href="url">錨點</a>
鏈接到圖像上：
1 <a href="image_name.jpg">錨點</a>
鏈接到電子郵件：
1 <a href="mailto:電子郵件地址">錨點</a>
圖片超鏈接：
1 <a href="url"><img src="圖片文件名"/></a>
頁內鏈接：
1 <a id="錨點名稱">預被鏈接後顯示的首部分</a> 2 <a href="#錨點名稱">錨點</a> 3 <!--先使用id屬性定義一個錨點，然後再使用href屬性指向該錨點，“#”表示鏈接目標與a標記屬於同一個頁面。-->
HTML框架：
1 <iframe src="url"></iframe> 2 設置高度和寬度 3 <iframe src="demo_iframe.htm" width="250" height="100"></iframe> 4 frameborder屬性用於定義iframe表示是否顯示邊框 5 設置屬性值為“0”移除iframe的邊框： 6 <iframe src="demo_iframe.htm" frameborder="0"></iframe> 7 使用iframe來顯示目標鏈接頁面 8 iframe可以顯示一個目標鏈接的頁面，目標鏈接的屬性須使用iframe的屬性，如: 9 <iframe src="demo_iframe.htm" name="iframe_a"></iframe> 10 <p><a href="http://www.bilibili.com" target="iframe_a">一個學習網站</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 密碼：(不會明文顯示，而是以星號和圓點替代) 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 覆選框： 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 函數定義</title> 6 </head> 7 <body> 8 <script> 9 <!--定義一個無參函數--> 10 function Hello() 11 { 12 return("Hello! Every One!"); 13 } 14 <!--定義一個有參函數--> 15 function Add(a,b) 16 { 17 return (a+b); 18 } 19 <!--調用無參函數，在頁面中顯示函數的返回值--> 20 document.write(Hello()); 21 <!--調用有參函數，並顯示--> 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輸出流：直接寫入HTML輸出流
e.g.：
1 document.write("<h1>這是一個標題</h1>"); 2 document.write("<p>這是一個段落。</p>"); 3 <!--只能在 HTML 輸出中使用 document.write。如果在文檔載入後使用該方法，會覆蓋整個文檔。-->
本隨筆是自己學習過程中的筆記，有不對的地方歡迎批評指正，勿擾，侵刪。
