前端學習筆記（一）HTML入門

時間 2021-04-27

標籤 php css html 前端 web 正則表達式編程瀏覽器安全服務器欄目 HTML 简体版

原文原文鏈接

我從昨天開始學習前端技術。想要以博客的形式，記錄一下本身的學習內容，而且把本身認爲有用的部分記錄下來，以便於本身之後查詢，同時也但願可以幫助到其餘學習者。php

個人前端學習路徑參考了知乎Web 前端怎樣入門？問題下汪小黑的回答。學習資料目前主要使用w3school。按照汪小黑的學習路徑，我目前花費一天半時間學習了w3school上面的HTML教程，包括「HTML基礎教程」的「HTML教程」到「HTML列表」部分，以及「HTML表單」部分。其中大部分代碼示例，我都照着打了一遍，以加深記憶和使用理解。css

編輯器方面，我根據知乎上面的測評，選擇了bracket。由於這款編輯器開源免費，而且有實時預覽功能（雖然有些HTML表單內容彷佛並不能實時預覽），調試起來方便直觀。並且能夠在HTML中間編輯CSS。下圖是實時預覽界面，很是方便。
下文主要是我在HTML入門學習中的一些簡單理解和記憶點。更多完整的示例代碼在w3school上所有搜索獲得，因此只貼了一點點。部分標籤會影響到markdown格式編寫的博客的格式，因此我加了空格，例如< a/ >。html

1.HTML（超文本標記語言）不是編程語言，而是標記語言，用標記標籤來描述網頁。HTML文檔就是網頁，包括HTML標籤和純文本。前端

2.HTML標題經過< h1 >-< h6 >標籤訂義。
HTML段落經過< p >標籤訂義。
HTML連接經過< a >標籤訂義。在href中指定連接的地址。URL意爲同一資源定位符，即網絡地址。
HTML圖像經過< img >標籤訂義。圖像的名稱和尺寸以屬性形式提供。web

3.HTML文檔由HTML元素定義。大多數HTML元素可擁有屬性。
大多數HTML元素能夠嵌套。（元素的內容能夠是元素）
沒有內容的HTML元素是空元素，< br />是關閉空元素的正確方法。正則表達式

4.HTML標籤有屬性，在start tag中規定。
例：連接的地址在href屬性中指定。
align for h1, bgcolor for body, border for table.（前二者其實如今都被style取代了，慎用）。
Style屬性用於改變HTML元素的樣式。
屬性值在雙引號內，若是屬性值中有雙引號，則用單引號。
適用於大多數元素的屬性：class，id，style，title編程

5.HTML標題：只用於標題，不能用於粗體or大字！！
搜索引擎使用標題爲網頁的結構和內容編制索引。瀏覽器

6.< hr />用於建立水平線。
< !-- This is a comment -->爲註釋，能夠用條件註釋，定義只有Internet Explorer執行的HTML標籤。
用< br / >插入空行，不要< p >< p/ >
< br / >能夠不產生新段落換行。
不要省略結束標籤，可能致使錯誤。
顯示頁面時，瀏覽器會移除源代碼中多餘的空格和空行。（看起來通常只保留一個空格，回車也視做一個空格）安全

前幾部分的示例代碼以下：服務器

<html>
<body style = "background-color: powderblue">
    
<h1 style = "background-color: yellow">This is a heading</h1>
<h2 style = "text-align: center">This is a heading</h2>
<h3>This is a heading</h3>

<a href="#tips">跳到Tips</a>
    
<p>This is a paragraph.<p/>
<hr />
<p>This is another paragraph.</p>
    
<p>This is <br /> another paragraph.</p>

<p>This is        another
paragraph.</p>
    
<a href = "http://www.w3school.com.cn" target="_blank">This is a link</a>
<br />
<br />
<img src = "w3school.jpg" width = "104" height = "142" alt="w3school"/>
    
<!-- This is a comment-->

<br />

<a name="tips">Tips:</a>
    
<p style = "font-family: verdana; color: red">
This text is in Verdana and red</p>
    
<p style = "font-family: times; color: green">
This text is in Times and green</p>
    
<p style = "font-size: 30px">
This text is 30 pixels high</p>
    
</body>
</html>

7.文本格式化：HTML可定義不少供文本格式化輸出的元素，包括粗體、大字、小字、斜體、刪除線、下劃線、長引用、短引用、縮寫、文字方向，等等。示例代碼以下：

<html>
<body>

<b>This text is bold</b>
<br />

<strong>This text is strong</strong>
<br />

<big>This text is big</big>
<br />

<em>This text is emphasized</em>
<br />

<small>This text is small</small>
<br />

This text contains
<sub>subscript</sub>
<br />

This text contains
<sup>superscript</sup>
    
</body>
</html>

8.< dfn >元素使用比較複雜，建議直接當作< abbr >用，或者只用< abbr >

9.能夠經過< head >部分的樣式信息（或在其中用< link >標籤連接到外部樣式表）來對HTML進行格式化。
1）當樣式要被應用到不少界面時，使用外部樣式表。這樣能夠經過更改一個文件來更改整個網頁的外觀。
2）當單個文件須要特別樣式時，使用內部樣式表。能夠在head部分經過< style >標籤訂義內部樣式表。
3）當特殊樣式要應用到個別元素時，使用內聯樣式。使用方法是在相關的標籤中使用樣式屬性。樣式屬性能夠包含任何CSS屬性。
示例代碼以下：

<html>

<head>
<style type = "text/css">
    h1{color:red}
    p {color:blue}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
</head>
    
<body>
<h1>header 1</h1>
<p>paragraph</p>
<a href="http://www.w3school.com.cn" style="text-decoration: none">這是一個連接</a>
<p style="color: red; margin-left: 20px">This is a paragraph</p>
</body>
 
</html>

10.超文本的基本特徵就是能夠超連接文檔。
超連接標準叫法叫錨（anchor）。能夠經過它跳到同文檔中的某個主題，或是跳到其餘文檔。
使用< a >的兩種方式：
1） href屬性：指向另外一個文檔的連接
2） name屬性：建立文檔內的書籤（而後能夠經過href=#namexxx來指向該錨）
若是使用target屬性，能夠設定被打開的連接在哪裏顯示。例如，把target設爲「_blank」，則該連接會在新窗口中打開。

11.圖像標籤< img >是空標籤，只包含屬性，而且沒有閉合標籤。必須使用源屬性（src）才能顯示圖像。源屬性的值是圖像的URL地址。
圖像標籤可用alt屬性來定義一串預備的可替換文本。圖片沒法顯示時，會顯示這串文本。
HTML頁面能夠添加背景圖片。
能夠排列圖像位置（默認爲bottom）。能夠將圖片浮動至段落的左邊/右邊。
可使用< map >和< area >定義圖像地圖和其中的可點擊區域。

12.表格中的每一個單元格里面能夠嵌套其餘元素（元素內顯示元素）包括表格、列表、段落等等。示例代碼以下：

<html>
<body>
    
<h4>表頭：</h4>
<table border="1" frame="vsides">
<caption>標題</caption>
<tr>
    <th>姓名</th>
    <th>電話</th>
    <th>電話</th>
</tr>
<tr>
    <td>Bill Gates</td>
    <td>123 123</td>
    <td>123 123</td>
</tr>
</table>

<h4>垂直表頭：</h4>
<table border = "2">
<tr>
    <th>姓名</th>
    <td>Bill Gates</td>
</tr>
<tr>
    <th>電話</th>
    <td>123 123</td>
</tr>
<tr>
    <th>電話</th>
    <td>123 123</td>
</tr>
</table>

<br />
    
<table border="1" cellspacing="10">
<tr>
    <th>姓名</th>
    <th colspan="2">電話</th>
</tr>
<tr>
    <td>Bill Gates</td>
    <td>123 123</td>
    <td>123 123</td>
</tr>
</table>
    
<br />
    
<table border = "2" cellpadding="10">
<tr>
    <th>姓名</th>
    <td>Bill Gates</td>
</tr>
<tr>
    <th rowspan="2">電話</th>
    <td>123 123</td>
</tr>
<tr>
    <td>123 123</td>
</tr>
</table>

</body>
</html>

13.列表包括有序（< ol >）和無序（< ul >）。列表中可嵌套列表。示例代碼以下：

<html>
<body>

<ol start="10">
    <li>Coffee</li>
    <li>Milk</li>
    <li>Tea</li>
</ol>

<ul type="circle">
    <li>Coffee</li>
    <li>Milk</li>
    <li>Tea</li>
</ul>    
    
<dl>
    <dt>計算機</dt>
    <dd>用來計算的機器</dd>
    <dt>顯示器</dt>
    <dd>以視覺方式顯示信息的裝置</dd>
</dl>

</body>
</html>

14.HTML表單用於收集用戶輸入。
< input >元素有不少形態，根據不一樣的type屬性。經常使用的包括text，radio，date，number，submit等。
Chrome、Firefox 或 Internet Explorer 不支持 type="datetime"，不支持輸入類型時，輸入類型會顯示爲text。
url和email類型與普通文本的區別：支持這些功能的瀏覽器會自動對電子郵件地址/url字段進行自動驗證。
Search類型與普通文本相似。Tel類型只有Safari8支持。

15.Action屬性定義在提交表單（一般是使用submit按鈕）時執行的動做。一般，表單會被提交到web服務器上的網頁。GET爲默認處理方法，適合少許數據的提交，沒有敏感信息。POST適用於表單正在更新數據或包含敏感信息（如密碼）。POST的安全性更好，由於在頁面地址欄中被提交的數據是不可見的。
若是想要正確地被說起，則每一個輸入字段必須設置一個name。
< fieldset >用於組合表單中的相關數據，< lenged >用於爲< fieldset >元素定義標題。

16.表單input的屬性
1） Value：輸入字段的初始值。
2） Readonly：只能讀不能改。readonly不須要值，它等同於readonly=「readonly」。
3） Disabled：禁用該輸入字段。被禁用的元素不可用，不可點擊，不會被提交。也不須要值，同上。
4） Size：輸入字段的尺寸。
5） Maxlength：輸入字段容許的最大長度。
6） Autocomplete：表單和單獨的輸入字段均可以選擇是否開啓/關閉自動補全功能。當開啓時，瀏覽器會基於用戶以前的輸入值自動填寫值。
7） Novalidate：< form >的屬性，設置了的話則提交表單時不對錶單數據進行驗證。
Formovalidate則是用於單個input的屬性，設置了的話則提交表單時不對該input數據進行驗證
8） Target：form的屬性，指示提交表單後在何處顯示接收到的響應。
Formtarget則是單個input的該屬性。
9） Autofocus：自動得到輸入焦點。其實意思是運行網頁時，光標初始會直接落在這個地方。
10） Form：在form有id的狀況下，< input >元素的form決定了它屬於哪一個表單。這樣，輸入字段即便外觀上在某個表單以外，輸入內容卻仍能夠屬於該表單。
11） Formaction：只適用於type爲submit或者image。它的值應爲當提交表單時處理該輸入的文件的url。
12） Formenctype：規定當提交表單數據時如何對其編碼（僅針對method=「post」的表單
13） Formmethod：只適用於type爲submit或者image。和form的method屬性本質同樣，當有多個submit時，可用於規定某單個submit的提交方法。
14） Height和width：image input的尺寸。（必定要規定，不然頁面會在圖像加載時閃爍）
15） List：引用的datalist中包含了input list元素的預約義選項。
16） Min和max：輸入的最大值和最小值。適用於number、range、date、datetime、datetime-local、month、time 以及 week。
17） Multiple：若是設置了該屬性，則容許輸入超過一個input元素。（只適用於email和file）
18） Pattern：用於檢測input元素值的正則表達式。
19） Placeholder：在輸入前的顯示的提示。（最多見的，「請輸入搜索內容」這種。）適用於如下輸入類型：text、search、url、tel、email 以及 password。
20） Required：必須填寫輸入字段才能提交表單。適用於如下輸入類型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.
21） Step：input數字的間隔。適用於number、range、date、datetime、datetime-local、month、time 以及 week。
Date – 缺省是1天
Week – 缺省是1周
Month – 缺省是1月
Time – 缺省是1分鐘
DateTime – 缺省是1分鐘
DateTime –local– 缺省是1分鐘

表單示例代碼以下：

<html>
<body>
<form action = "action_page.php" method = "post">
    
    <fieldset>
    <legend>Personal Information</legend>
    
    First name:
    <br />
    <input type = "text" name = "firstname", value = "Mickey" autofocus>
    <br />
    Last name:
    <br />
    <input type = "text" name = "lastname", value = "Mouse">
    <br />
    
    <input type = "radio" name = "sex" value = "male" checked>Male
    <br />
    <input type = "radio" name = "sex" value = "female">Female
    <br />
        
    <select name = "cars">
    <option value = "volvo">Volvo</option>
    <option value = "saab">Saab</option>
    </select>
    <br />
        
    <textarea name = "message" rows = "10" cols = "60">The cat was playing in the garden.
    </textarea>
    <br />
        
    <button type = "button" onclick = "alert('Hello World')">Click Me!</button>
    <br />
    
    <input list = "browsers">
    <datalist id = "browsers">
        <option value = "IE">
        <option value = "Chrome">
    </datalist>
    <br />
        
    Quantity (between 1 and 5):
    <input type = "number" name = "quantity" min = "1" max = "5">
    <br />
        
    Birthday:
    <input type = "date" name = "bday" step = "2">
    <br />
        
    Favorite color:
    <input type = "color" name = "favcolor">
    <br />
        
    <input type = "range" name = "points" min = "0" max = "20">
    <br />
        
    Time:
    <input type = "datetime-local" name = "usr_time">
    <br />
        
    E-mail:
    <input type = "email" name = "email">
    <br />
        
        
    <br />
    <input type = "submit" value = "Submit">
        
    </fieldset>
</form>
        
</body>
</html>

今天下午開始學習基礎CSS，但願好運！