從零開始的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。如果在文件載入後使用該方法，會覆蓋整個文件。-->
本隨筆是自己學習過程中的筆記，有不對的地方歡迎批評指正，勿擾，侵刪。<