從零開始的HTML筆記——初識HTML
阿新 • • 發佈:2020-05-14
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。如果在文件載入後使用該方法,會覆蓋整個文件。-->
本隨筆是自己學習過程中的筆記,有不對的地方歡迎批評指正,勿擾,侵刪。<