1. 程式人生 > >從零開始的HTML筆記——初識HTML

從零開始的HTML筆記——初識HTML

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 空格標記"&nbsp;"

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。如果在文件載入後使用該方法,會覆蓋整個文件。-->

本隨筆是自己學習過程中的筆記,有不對的地方歡迎批評指正,勿擾,侵刪。<