前端HTML學習心得

     學習最好的效果就是理論加實踐--Hanks!!!（給你們打雞血的哈哈哈）

     前面的學習我教你們怎麼搭建簡單的前端開發環境，如今我教你們怎麼使用工具學習（從入門到放棄哈哈，不不不，這是之前的我，如今我下了很大的決心來學習前端，也是須要很大勇氣的，由於我是已經有工做了，可是工資不怎麼美麗，勉強可以在廣州這個不像一線的一線城市活下來，可是前期仍是依靠父母、朋友的力量下次才完成的，要否則我一我的根本不可能這麼厲害，都怪當初不努力學習，如今終於明白了，出來混老是要還的，因此我要好好學習，努力掙錢。其實此前我有一個偉大的夢想就是成爲全村最富的人，可是當畢業後我才明白我是多麼傻逼，現實把我戰勝，天天我只是空想，並無付出實際行動，跟父母談的時候，父母也不怎麼理會，無奈我只能離開家裏投靠同窗兄弟，勉強在廣州找到一個月薪4500的文職工做，仍是在同窗女友的幫助下找到的，頓時感到本身多麼沒用！！！）

    面對這微薄的工資，我向生活低下了頭，從新開始學習相關專業的技術，爲之後轉崗打下堅實的基礎。我寫博客很大的緣由是爲了記錄本身的學習過程並和你們分享一些個人心路歷程，但願更多的人看到，不努力的人過得多落魄。哈哈哈哈哈哈哈哈哈哈哈！

     好了，話題扯遠了，十頭牛才把我拉回來呢！要否則我大把故事跟你說，迴歸正題。

     HTML簡單來講就是那幾個標籤的事，並非很難，因此我會花點時間跟大家講學習前端的三大基礎。HTML+CSS+JS是前端的三大基礎，HTML就像房子的結構，CSS就像房子的裝飾，JS就像房子的功能是用來居住和生活的。有了HTML\CSS的基礎下才有JS，因此咱們寫前端時先寫結構和修飾，後面加上功能就是完整的前端啦！固然如今前端有不少框架給咱們用，大大減小咱們累代碼的時間，可是我建議你們先打好基礎再去使用框架，循循漸進比較好，一口吃成胖子是不可能的，要否則你會以爲學習起來會很吃力，因此要慢慢來，不用急。

    當咱們打開一個網站首頁時咱們就能夠看到一些咱們最多見的HTML標籤啦，網站頂部是導航欄，有div（盒子）、a（連接）、img（圖片）、ul>li(無序列表）等

 

    網站的主題內容基本上是靠div、img、a、p、span組成的，就像小孩子玩的堆積木同樣，多看幾個網站就會發現就只有幾個是咱們經常使用的標籤而已，因此第一步仍是挺簡單的。

 

   最後底部也是同樣的，多看看人家怎麼寫就好啦！挺簡單的，記得多動手就能夠了！4

 

 

   好啦！幾天的HTML，就到這裏了，如下附一點知識點。

 

列表標籤

什麼是列表？

把…製成表,以表顯示

容器裏面裝載着文字或圖表的一種形式，叫列表。

列表最大的特色就是 整齊 、整潔、 有序

無序列表 ul （重點）

無序列表的各個列表項之間沒有順序級別之分，是並列的。其基本語法格式以下：

<ul>
  <li>列表項1</li>
  <li>列表項2</li>
  <li>列表項3</li>
 ......
</ul>

好比下面這些，新聞是沒有順序的，不用排隊，先到先得，後發佈先顯示。

腳下留心：

 1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標籤中輸入其餘標籤或者文字的作法是不被容許的。
 2. <li>與</li>之間至關於一個容器，能夠容納全部元素。
 3. 無序列表會帶有本身樣式屬性，放下那個樣式，一會讓CSS來！

有序列表 ol （瞭解）

有序列表即爲有排列順序的列表，其各個列表項按照必定的順序排列定義，有序列表的基本語法格式以下：

<ol>
  <li>列表項1</li>
  <li>列表項2</li>
  <li>列表項3</li>
 ......
</ol>

全部特性基本與ul 一致。

可是實際工做中， 較少用 ol img src="media/1.jpg" />

 

自定義列表（理解）

定義列表經常使用於對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號。其基本語法以下：

<dl>
  <dt>名詞1</dt>
  <dd>名詞1解釋1</dd>
  <dd>名詞1解釋2</dd>
 ...
  <dt>名詞2</dt>
  <dd>名詞2解釋1</dd>
  <dd>名詞2解釋2</dd>
 ...
</dl>

 

表格 table(會使用)

 

 

存在便是合理的。 表格的如今仍是較爲經常使用的一種標籤，但不是用來佈局，常見處理、顯示錶格式數據。

ps: 這些地方用表格，你會以爲生活仍是那麼美好。。。。忍不住想說 PPAP i hava a pen

 

建立表格

在HTML網頁中，要想建立表格，就須要使用表格相關的標籤。建立表格的基本語法格式以下：

<table>
  <tr>
    <td>單元格內的文字</td>
   ...
  </tr>
 ...
</table>

在上面的語法中包含三對HTML標籤，分別爲 <table></table>、<tr></tr>、<td></td>，他們是建立表格的基本標籤，缺一不可，下面對他們進行具體地解釋

 

1.table用於定義一個表格。
​
2.tr 用於定義表格中的一行，必須嵌套在 table標籤中，在 table中包含幾對 tr，就有幾行表格。
​
3.td /td：用於定義表格中的單元格，必須嵌套在<tr></tr>標籤中，一對 <tr> </tr>中包含幾對<td></td>，就表示該行中有多少列（或多少個單元格）。

注意：

1. <tr></tr>中只能嵌套<td></td>

2. <td></td>標籤，他就像一個容器，能夠容納全部的元素

 

表格屬性

表頭標籤

表頭通常位於表格的第一行或第一列，其文本加粗居中，以下圖所示，即爲設置了表頭的表格。設置表頭很是簡單，只需用表頭標籤<th></th>替代相應的單元格標籤<td></td>便可。

表格結構（瞭解）

在使用表格進行佈局時，能夠將表格劃分爲頭部、主體和頁腳（頁腳由於有兼容性問題，咱們不在贅述），具體 以下所示：
​
<thead></thead>：用於定義表格的頭部。
​
必須位於<table></table> 標籤中，通常包含網頁的logo和導航等頭部信息。
​
​
<tbody></tbody>：用於定義表格的主體。
​
位於<table></table>標籤中，通常包含網頁中除頭部和底部以外的其餘內容。

 

 

表格標題

表格的標題： caption

定義和用法

caption 元素定義表格標題。

<table>
   <caption>我是表格標題</caption>
</table>

caption 標籤必須緊隨 table 標籤以後。您只能對每一個表格定義一個標題。一般這個標題會被居中於表格之上。

合併單元格(難點)

跨行合併：rowspan 跨列合併：colspan

合併單元格的思想：

將多個內容合併的時候，就會有多餘的東西，把它刪除。 例如 把 3個 td 合併成一個， 那就多餘了2個，須要刪除。

公式： 刪除的個數 = 合併的個數 - 1

合併的順序 先上 先左

總結表格

1. 表格提供了HTML 中定義表格式數據的方法。

2. 表格中由行中的單元格組成。

3. 表格中沒有列元素，列的個數取決於行的單元格個數。

4. 表格不要糾結於外觀，那是CSS 的做用。

    

   表格的學習要求： 能手寫表格結構，而且能合併單元格。

表單標籤(掌握)

現實中的表單，相似咱們去銀行辦理信用卡填寫的單子。 

 

目的是爲了收集用戶信息。

在咱們網頁中， 咱們也須要跟用戶進行交互，收集用戶資料，此時也須要表單。

在HTML中，一個完整的表單一般由表單控件（也稱爲表單元素）、提示信息和表單域3個部分構成。

表單控件：

包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、複選框、提交按鈕、重置按鈕等。

提示信息：

一個表單中一般還須要包含一些說明性的文字，提示用戶進行填寫和操做。

表單域：

他至關於一個容器，用來容納全部的表單控件和提示信息，能夠經過他定義處理表單數據所用程序的url地址，以及數據提交到服務器的方法。若是不定義表單域，表單中的數據就沒法傳送到後臺服務器。

input 控件(重點)

在上面的語法中，<input />標籤爲單標籤，type屬性爲其最基本的屬性，其取值有多種，用於指定不一樣的控件類型。除了type屬性以外，<input />標籤還能夠定義不少其餘的屬性，其經常使用屬性以下表所示。

label標籤(理解)

label 標籤爲 input 元素定義標註（標籤）。

做用： 用於綁定一個表單元素, 當點擊label標籤的時候, 被綁定的表單元素就會得到輸入焦點

如何綁定元素呢？

for 屬性規定 label 與哪一個表單元素綁定。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

textarea控件(文本域)

若是須要輸入大量的信息，就須要用到<textarea></textarea>標籤。經過textarea控件能夠輕鬆地建立多行文本輸入框，其基本語法格式以下：

<textarea cols="每行中的字符數" rows="顯示的行數">
 文本內容
</textarea>

下拉菜單

使用select控件定義下拉菜單的基本語法格式以下

<select>
  <option>選項1</option>
  <option>選項2</option>
  <option>選項3</option>
 ...
</select>

注意：

1. <select></select>中至少應包含一對<option></option>。

2. 在option 中定義selected =" selected "時，當前項即爲默認選中項。

表單域

在HTML中，form標籤被用於定義表單域，即建立一個表單，以實現用戶信息的收集和傳遞，form中的全部內容都會被提交給服務器。建立表單的基本語法格式以下：

<form action="url地址" method="提交方式" name="表單名稱">
 各類表單控件
</form>

經常使用屬性：

1. Action 在表單收集到信息後，須要將信息傳遞給服務器進行處理，action屬性用於指定接收並處理表單數據的服務器程序的url地址。

2. method 用於設置表單數據的提交方式，其取值爲get或post。

3. name 用於指定表單的名稱，以區分同一個頁面中的多個表單。

注意： 每一個表單都應該有本身表單域。

查文檔

常常查閱文檔是一個很是好的學習習慣。

W3C : http://www.w3school.com.cn/

MDN: https://developer.mozilla.org/zh-CN/