HTML重要知識點

時間 2020-05-18

標籤 html 重要知識欄目 HTML 简体版

原文原文鏈接

一、常見瀏覽器內核（瞭解）

瀏覽器內核，英文叫作：Rendering Engine，中文翻譯不少，排版引擎、解釋引擎、渲染引擎，如今流行稱爲瀏覽器內核.css

負責讀取網頁內容，整理訊息，計算網頁的顯示方式並顯示頁面.html

如今主要流行的就是下面幾個：web

瀏覽器	內核	備註
IE	Trident	IE、獵豹安全、360極速瀏覽器、百度瀏覽器
firefox	Gecko	惋惜這幾年已經沒落了，打開速度慢、升級頻繁、豬同樣的隊友flash、神同樣的對手chrome。
Safari	webkit	如今不少人錯誤地把 webkit 叫作 chrome內核（即便 chrome內核已是 blink 了）。蘋果感受像被別人搶了媳婦，都哭暈再廁所裏面了。
chrome	Chromium/Blink	在 Chromium 項目中研發 Blink 渲染引擎（即瀏覽器核心），內置於 Chrome 瀏覽器之中。Blink 實際上是 WebKit 的分支。大部分國產瀏覽器最新版都採用Blink內核。二次開發
Opera	Presto	Presto（已經廢棄）是挪威產瀏覽器 opera 的 "前任" 內核，爲什麼說是 "前任"，由於最新的 opera 瀏覽器早已將之拋棄從而投入到了谷歌懷抱了。如今用blink內核。

拓展：ajax

移動端的瀏覽器內核主要說的是系統內置瀏覽器的內核。  
  
Android手機而言，使用率最高的就是Webkit內核，大部分國產瀏覽器宣稱的本身的內核，基本上也是屬於webkit二次開發。  
  
iOS以及WP7平臺上，因爲系統緣由，系統大部分自帶瀏覽器內核，通常是Safari或者IE內核Trident的

二、Web標準（重點）

Web標準不是某一個標準，而是由W3C組織和其餘標準化組織制定的一系列標準的集合。chrome

W3C 萬維網聯盟是國際最著名的標準化組織。1994年成立後，至今已發佈近百項相關萬維網的標準，對萬維網發展作出了傑出的貢獻。瀏覽器

w3c就相似於現實世界中的聯合國。安全

2.1 Web 標準的好處

讓Web的發展前景更廣闊
內容能被更普遍的設備訪問
更容易被搜尋引擎搜索
下降網站流量費用
使網站更易於維護
提升頁面瀏覽速度

2.2 Web 標準構成

構成： 主要包括結構（Structure）、表現（Presentation）和行爲（Behavior）三個方面。服務器

結構標準：結構用於對網頁元素進行整理和分類，我們主要學的是HTML。對於網頁來講最重要的一部分
表現標準：表現用於設置網頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS
行爲標準：行爲是指網頁模型的定義及交互的編寫，主要學的是 Javascript

理想狀態咱們的源碼： .HTML .css .jside

三、文檔類型<!DOCTYPE>

用法：佈局

<!DOCTYPE html>

做用：

聲明位於文檔中的最前面的位置，處於標籤以前。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。

四、字符集

<meta charset\="UTF-8" />

字符集(Character set)是多個字符的集合。

計算機要準確的處理各類字符集文字，須要進行字符編碼，以便計算機可以識別和存儲各類文字。

utf-8是目前最經常使用的字符集編碼方式，經常使用的字符集編碼方式還有gbk和gb2312。

gb2312 簡單中文包括6763個漢字
BIG5 繁體中文港澳臺等用
GBK包含所有中文字符是GB2312的擴展，加入對繁體字的支持，兼容GB2312
UTF-8則基本包含全世界全部國家須要用到的字符

這句話是讓 html 文件是以 UTF-8 編碼保存的，瀏覽器根據編碼去解碼對應的html內容。

團隊約定：

通常狀況下統一使用 "UTF-8" 編碼, 請儘可能統一寫成標準的 "UTF-8"，不要寫成 "utf-8" 或 "utf8" 或 "UTF8"。

五、表格

用於展現數據

標籤名	定義	說明
<table></table>	表格標籤	就是一個四方的盒子
<tr></tr>	表格行標籤	行標籤要再table標籤內部纔有意義
<td></td>	單元格標籤	單元格標籤是個容器級元素，能夠聽任何東西
<th></th>	表頭單元格標籤	它仍是一個單元格，可是裏面的文字會居中且加粗
<caption></caption>	表格標題標籤	表格的標題，跟着表格一塊兒走，和表格居中對齊
clospan 和 rowspan	合併屬性	用來合併單元格的

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

總結：

表格的主要目的是用來顯示特殊數據的
一個完整的表格有表格標籤（table），行標籤（tr），單元格標籤（td）組成，沒有列的標籤
<tr></tr>中只能嵌套<td></td> 類的單元格
<td></td>標籤，他就像一個容器，能夠容納全部的元素

表格屬性

表格有部分屬性咱們不經常使用，重點記住 cellspacing 、 cellpadding。

咱們常常有個說法，是三參爲0，平時開發的咱們這三個參數 border cellpadding cellspacing 爲 0

合併單元格

跨行合併：rowspan="合併單元格的個數"--合併的是列
跨列合併：colspan="合併單元格的個數"--合併的是行

合併單元格順序

合併的順序咱們按照先上後下先左後右的順序

合併單元格三步曲

先肯定是跨行仍是跨列合併
根據先上後下先左後右的原則找到目標單元格而後寫上合併方式還有要合併的單元格數量好比： <td colspan="3"> </td>
刪除多餘的單元格單元格

複雜表格
對於比較複雜的表格，表格的結構也就相對的複雜了，因此又將表格分割成三個部分：題頭、正文和腳註。而這三部分分別用:thead,tbody,tfoot來標註，這樣更好的分清表格結構

注意：

<thead></thead>：用於定義表格的頭部。用來放標題之類的東西。<thead> 內部必須擁有 <tr> 標籤！
<tbody></tbody>：用於定義表格的主體。放數據本體。
<tfoot></tfoot>放表格的腳註之類。
以上標籤都是放到table標籤中。

六、列表

標籤名	定義	說明
<ul></ul>	無序標籤	裏面只能包含li 沒有順序，咱們之後佈局中最經常使用的列表
<ol></ol>	有序標籤	裏面只能包含li 有順序，使用狀況較少
<dl></dl>	自定義列表	裏面有2個兄弟， dt 和 dd

七、表單

做用：收集用戶信息，與用戶進行交互
構成：一個完整的表單一般由表單控件（也稱爲表單元素）、提示信息和表單域3個部分構成。

表單控件：
包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、複選框、提交按鈕、重置按鈕等。
提示信息：
一個表單中一般還須要包含一些說明性的文字，提示用戶進行填寫和操做。
表單域：
他至關於一個容器，用來容納全部的表單控件和提示信息，能夠經過他定義處理表單數據所用程序的url地址，以及數據提交到服務器的方法。若是不定義表單域，表單中的數據就沒法傳送到後臺服務器。

7.1 input 控件(重點)

語法：
```
<input type="屬性值" value="你好">
```
- input 輸入的意思
- <input />標籤爲單標籤
- type屬性設置不一樣的屬性值用來指定不一樣的控件類型
- 除了type屬性還有別的屬性
經常使用屬性：

1. type 屬性

這個屬性經過改變值，能夠決定了你屬於那種input表單。
好比 type = 'text' 就表示文本框能夠作用戶名，暱稱等。
好比 type = 'password' 就是表示密碼框用戶輸入的內容是不可見的。

用戶名: <input type="text" /> 
密  碼：<input type="password" />

2. value屬性值

用戶名:<input type="text"  name="username" value="請輸入用戶名">

value 默認的文本值。有些表單想剛打開頁面就默認顯示幾個文字，就能夠經過這個value 來設置。

3. name屬性

用戶名:<input type="text"  name=「username」 />

name表單的名字，這樣，後臺能夠經過這個name屬性找到這個表單。頁面中的表單不少，name主要做用就是用於區別不一樣的表單。

name屬性後面的值，是咱們本身定義的。
radio 若是是一組，咱們必須給他們命名相同的名字 name 這樣就能夠多個選其中的一個啦

<input type="radio" name="sex"  />男
<input type="radio" name="sex" />女

name屬性，咱們如今用的較少，可是，當咱們學ajax 和後臺的時候，是必須的。

4. checked屬性

表示默認選中狀態。較常見於單選按鈕和複選按鈕。

性    別:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女

上面這個，表示就默認選中了男這個單選按鈕

5. input 屬性小結

屬性	說明	做用
type	表單類型	用來指定不一樣的控件類型
value	表單值	表單裏面默認顯示的文本
name	表單名字	頁面中的表單不少，name主要做用就是用於區別不一樣的表單。
checked	默認選中	表示那個單選或者複選按鈕一開始就被選中了

八、 label標籤

目標：

label標籤主要目的是爲了提升用戶體驗。爲用戶提升最優秀的服務。

概念：

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

做用：

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

如何綁定元素呢？

第一種用法就是用label直接包括input表單。

<label> 用戶名： <input type="radio" name="usename" value="請輸入用戶名">   </label>

適合單個表單選擇

第二種用法 for 屬性規定 label 與哪一個表單元素綁定。

<label for="sex">男</label>
<input type="radio" name="sex"  id="sex">

當咱們鼠標點擊 label標籤裏面的文字時，光標會定位到指定的表單裏面

九、 textarea控件(文本域)

語法：

<textarea >
  文本內容
</textarea>

做用：
經過textarea控件能夠輕鬆地建立多行文本輸入框.

cols="每行中的字符數" rows="顯示的行數" 咱們實際開發不用

文本框和文本域區別

表單	名稱	區別	默認值顯示	用於場景
input type="text"	文本框	只能顯示一行文本	單標籤，經過value顯示默認值	用戶名、暱稱、密碼等
textarea	文本域	能夠顯示多行文本	雙標籤，默認值寫到標籤中間	留言板

十、 select下拉列表

目的：

若是有多個選項讓用戶選擇，爲了節約空間，咱們可使用select控件定義下拉列表.

語法：

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

注意：

<select> 中至少包含一對 option
在option 中定義selected =" selected "時，當前項即爲默認選中項。
可是咱們實際開發會用的比較少

十一、 form表單域

收集的用戶信息怎麼傳遞給服務器？
經過form表單域
目的：
在HTML中，form標籤被用於定義表單域，以實現用戶信息的收集和傳遞，form中的全部內容都會被提交給服務器。

語法:

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

經常使用屬性：

屬性	屬性值	做用
action	url地址	用於指定接收並處理表單數據的服務器程序的url地址。
method	get/post	用於設置表單數據的提交方式，其取值爲get或post。
name	名稱	用於指定表單的名稱，以區分同一個頁面中的多個表單。