前端基礎入門一（HTML）

智雲程式設計發表於2019-05-19
前端HTML

學習大綱

  • 瞭解常用瀏覽器
  • 掌握WEB標準
  • 理解標籤語義化
  • 掌握常用的排版標籤
  • 掌握常用的文字格式化影像連結等標籤
  • 掌握三種列表標籤
  • 掌握表格標籤
  • 掌握表格標籤
  • 掌握表單標籤

自己是個做了幾年開發的老碼農，希望本文對你有用！ 這裡推薦一下我的前端學習交流圈：767273102 ，裡面都是學習前端的，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴。2019最新技術，與企業需求同步。好友都在裡面學習交流，每天都會有大牛定時講解前端技術!

點選： 加入

HTML 

能夠寫出基本的頁面（裡面包含圖片、各種標籤和連結）

開發工具

我們主要用的開發工具有chrome、hbuilder、Photoshop

瀏覽器顯示

瀏覽器是網頁顯示、執行的平臺，常用的瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我們平時稱為五大瀏覽器。

瀏覽器核心（理解）

瀏覽器核心又可以分成兩部分： 渲染引擎(layout engineer 或者 Rendering Engine) 和  JS 引擎 。
渲染引擎  ：它負責取得網頁的內容（HTML、XML、影像等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，然後會輸出至顯示器或印表機。瀏覽器的核心的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。
JS 引擎  則是解析 Javascript 語言，執行 javascript語言來實現網頁的動態效果。

最開始渲染引擎和 JS 引擎並沒有區分的很明確，後來 JS 引擎越來越獨立，核心就傾向於只指渲染引擎。有一個網頁標準計劃小組製作了一個 ACID 來測試引擎的相容性和效能。核心的種類很多，如加上沒什麼人使用的非商業的免費核心，可能會有10多種，但是常見的瀏覽器核心可以分這四種：Trident、Gecko、Blink、Webkit。

瞭解一點：移動端的瀏覽器核心主要說的是系統內建瀏覽器的核心。
Android手機而言，使用率最高的就是Webkit核心，大部分國產瀏覽器宣稱的自己的核心，基本上也是屬於webkit二次開發。

iOS以及WP7平臺上，由於系統原因，系統大部分自帶瀏覽器核心，一般是Safari或者IE核心Trident的

Web標準

web標準的好處
1、讓Web的發展前景更廣闊

2、內容能被更廣泛的裝置訪問

3、更容易被搜尋引擎搜尋

4、降低網站流量費用

5、使網站更易於維護

6、提高頁面瀏覽速度

web標準的結構

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

HTML初識

HTML（英文Hyper Text Markup Language的縮寫）中文譯為“超文字標籤語言”。是用來描述網頁的一種語言。

所謂超文字，因為它可以加入圖片、聲音、動畫、多媒體等內容，不僅如此，它還可以從一個檔案跳轉到另一個檔案，與世界各地主機的檔案連線。 

<h1> 我是一個大標題 </h1>

注意： 體會 文字 標籤 語言 幾個詞語

  • HTML 指的是超文字標記語言 (Hyper Text Markup Language)
  • HTML 不是一種程式語言，而是一種標記語言 (markup language)
  • 標記語言是一套標記標籤 (markup tag)

總結： HTML 作用就是用標記標籤來描述網頁，把網頁內容在瀏覽器中展示出來。

HTML骨架格式 

<HTML>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</HTML>

骨架結構解析
1 HTML標籤：
作用所有HTML中標籤的一個根節點。 最大的標籤 根標籤
2 head標籤： 文件的頭部
文件的頭部描述了文件的各種屬性和資訊，包括文件的標題、在 Web 中的位置以及和其他文件的關係等。絕大多數文件頭部包含的資料都不會真正作為內容顯示給讀者。

注意在head標籤中我們必須要設定的標籤是title

3.title標籤： 文件的標題
作用：讓頁面擁有一個屬於自己的標題。
4.body標籤：文件的主體 以後我們的頁面內容 基本都是放到body裡面的
body 元素包含文件的所有內容（比如文字、超連結、影像、表格和列表等等。）

HTML標籤分類

在HTML頁面中，帶有“< >”符號的元素被稱為HTML標籤，如上面提到的 HTML、head、body都是HTML骨架結構標籤。所謂標籤就是放在“< >” 標籤符中表示某個功能的編碼命令，也稱為HTML標籤或 HTML元素

1.雙標籤 

<標籤名> 內容 </標籤名>

該語法中“<標籤名>”表示該標籤的作用開始，一般稱為“開始標籤（start tag）”，“</標籤名>” 表示該標籤的作用結束，一般稱為“結束標籤（end tag）”。和開始標籤相比，結束標籤只是在前面加了一個關閉符“/”。 

比如 <body>我是文字 </body>

2.單標籤 

<標籤名 />

單標籤也稱空標籤，是指用一個標籤符號即可完整地描述某個功能的標籤。 

比如 <br />

HTML標籤關係

標籤的相互關係就分為兩種：

1.巢狀關係 

<head> <title> </title> </head>

2.並列關係 

<head></head>
<body></body>

HTML常用標籤

首先 HTML和CSS是兩種完全不同的語言，我們學的是結構，就只寫HTML標籤，認識標籤就可以了。 不會再給結構標籤指定樣式了。

HTML標籤有很多，這裡我們學習最為常用的，後面有些較少用的，我們可以查下手冊就可以了。

排版標籤

標題標籤（熟記）

單詞縮寫： head 頭部. 標題 title 文件標題

為了使網頁更具有語義化，我們經常會在頁面中用到標題標籤，HTML提供了6個等級的標題，即
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>
其基本語法格式如下： 

<hn> 標題文字 </hn>

段落標籤（熟記） 

<p> 文字內容 </p>

水平線標籤（認識） 

<hr />是單標籤

換行標籤（熟記） 

<br />

div span標籤(重點)

div span 是沒有語義的 是我們網頁佈局主要的2個盒子 css+div

div 就是 division 的縮寫 分割， 分割槽的意思 其實有很多div 來組合網頁。

span, 跨度，跨距；範圍

語法格式： 

<div> 這是頭部 </div> <span>今日價格</span>

文字格式化標籤(熟記)

在網頁中，有時需要為文字設定粗體、斜體或下劃線效果，這時就需要用到HTML中的文字格式化標籤，使文字以特殊的方式顯示。


前端基礎入門一（HTML）

b i s u 只有使用 沒有 強調的意思 strong em del ins 語義更強烈

標籤屬性

使用HTML製作網頁時，如果想讓HTML標籤提供更多的資訊，可以使用HTML標籤的屬性加以設定。其基本語法格式如下： 

<標籤名 屬性1="屬性值1" 屬性2="屬性值2" …> 內容 </標籤名>

在上面的語法中，

1.標籤可以擁有多個屬性，必須寫在開始標籤中，位於標籤名後面。

2.屬性之間不分先後順序，標籤名與屬性、屬性與屬性之間均以空格分開。

3.任何標籤的屬性都有預設值，省略該屬性則取預設值。

採取 鍵值對 的格式 key="value" 的格式

比如: 

<hr width="400" />

屬性 是 寬度

值 是 400

影像標籤img (重點)

單詞縮寫： image 影像

HTML網頁中任何元素的實現都要依靠HTML標籤，要想在網頁中顯示影像就需要使用影像標籤，接下來將詳細介紹影像標籤<img />以及和他相關的屬性。其基本語法格式如下：

該語法中src屬性用於指定影像檔案的路徑和檔名，他是img標籤的必需屬性。 

<img src="影像URL" />
前端基礎入門一（HTML）

連結標籤(重點)

單詞縮寫： anchor 的縮寫 [ˈæŋkə(r)] 。基本解釋 錨, 鐵錨 的

在HTML中建立超連結非常簡單，只需用標籤環繞需要被連結的物件即可，其基本語法格式如下： 

<a href="跳轉目標" target="目標視窗的彈出方式">文字或影像</a>

href：用於指定連結目標的url地址，當為標籤應用href屬性時，它就具有了超連結的功能。 Hypertext Reference的縮寫。意思是超文字引用

target：用於指定連結頁面的開啟方式，其取值有self和blank兩種，其中self為預設值，blank為在新視窗中開啟方式。

注意：

1.外部連結 需要新增 http://  www.baidu.com

2.內部連結 直接連結內部頁面名稱即可 比如 < a href="index.html"> 首頁

3.如果當時沒有確定連結目標時，通常將連結標籤的href屬性值定義為“#”(即href="#")，表示該連結暫時為一個空連結。

4.不僅可以建立文字超連結，在網頁中各種網頁元素，如影像、表格、音訊、視訊等都可以新增超連結。

錨點定位 （難點）

通過建立錨點連結，使用者能夠快速定位到目標內容。

建立錨點連結分為兩步： 

1.使用“a href=”#id名>“連結文字"</a>建立連結文字（被點選的）
  <a href="#two">   
2.使用相應的id名標註跳轉目標的位置。
  <h3 id="two">第2集</h3>

base 標籤 基本的

base 可以設定整體連結的開啟狀態

base 寫到 <head> </head> 之間

把所有的連線 都預設新增 target="_blank"

特殊字元標籤 （理解）

前端基礎入門一（HTML）

註釋標籤

在HTML中還有一種特殊的標籤——註釋標籤。如果需要在HTML文件中新增一些便於閱讀和理解但又不需要顯示在頁面中的註釋文字，就需要使用註釋標籤。其基本語法格式如下： 

<!-- 註釋語句 --> ctrl + / 或者 ctrl +shift + /

註釋內容不會顯示在瀏覽器視窗中，但是作為HTML文件內容的一部分，也會被下載到使用者的計算機上，檢視原始碼時就可以看到。

路徑(重點、難點)

前端基礎入門一（HTML）

實際工作中，通常新建一個資料夾專門用於存放影像檔案，這時再插入影像，就需要採用“路徑”的方式來指定影像檔案的位置。

根目錄 當前目錄

路徑可以分為： 相對路徑和絕對路徑

相對路徑

以引用檔案之網頁所在位置為參考基礎，而建立出的目錄路徑。因此，當儲存於不同目錄的網頁引用同一個檔案時，所使用的路徑將不相同，故稱之為相對路徑。

  1. 影像檔案和HTML檔案位於同一資料夾：只需輸入影像檔案的名稱即可，如img src="logo.gif" /。
  2. 影像檔案位於HTML檔案的下一級資料夾：輸入資料夾名和檔名，之間用“/”隔開，如img src="img/img01/logo.gif" /。
  3. 影像檔案位於HTML檔案的上一級資料夾：在檔名之前加入“../” ，如果是上兩級，則需要使用 “../ ../”，以此類推，如img src="../logo.gif" /。

絕對路徑

絕對路徑以Web站點根目錄為參考基礎的目錄路徑。之所以稱為絕對，意指當所有網頁引用同一個檔案時，所使用的路徑都是一樣的

“D:webimglogo.gif”，或完整的網路地址，例如“ http://www.itcast.cn/images/l... ”。

思路貫穿線

前端基礎入門一（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(會使用)

建立表格

在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>標籤，他就像一個容器，可以容納所有的元素

表格屬性

前端基礎入門一（HTML）

表頭標籤

表頭一般位於表格的第一行或第一列，其文字加粗居中，如下圖所示，即為設定了表頭的表格。設定表頭非常簡單，只需用表頭標籤th</th替代相應的單元格標籤td</td即可。


前端基礎入門一（HTML）

表格結構（瞭解）

在使用表格進行佈局時，可以將表格劃分為頭部、主體和頁尾（頁尾因為有相容性問題，我們不在贅述），具體 如下所示：

<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 的作用。

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

表單標籤(掌握)

表單控制元件： 

   包含了具體的表單功能項，如單行文字輸入框、密碼輸入框、核取方塊、提交按鈕、重置按鈕等。

提示資訊： 

    一個表單中通常還需要包含一些說明性的文字，提示使用者進行填寫和操作。

表單域： 

  他相當於一個容器，用來容納所有的表單控制元件和提示資訊，可以通過他定義處理表單資料所用程式的url地址，以及資料提交到伺服器的方法。如果不定義表單域，表單中的資料就無法傳送到後臺伺服器。

input 控制元件(重點)

在上面的語法中，input /標籤為單標籤，type屬性為其最基本的屬性，其取值有多種，用於指定不同的控制元件型別。除了type屬性之外，input /標籤還可以定義很多其他的屬性，其常用屬性如下表所示。


前端基礎入門一（HTML）

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>
前端基礎入門一（HTML）

下拉選單

使用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
    用於指定表單的名稱，以區分同一個頁面中的多個表單。

注意： 每個表單都應該有自己表單域。


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69901074/viewspace-2644881/，如需轉載，請註明出處，否則將追究法律責任。

相關文章