html入門學習(一)

語言: CN / TW / HK

常見的瀏覽器及其核心

  • Google瀏覽器:Chromium/Blink,之前用的webkit
  • IE瀏覽器:Trident—“相容模式”
  • Edge瀏覽器:EdgeHTML
  • 火狐瀏覽器:Gecko—程式碼公開
  • Safari瀏覽器:webkit
  • Opera瀏覽器:Presto—“前任核心”,目前使用Blink核心

Web標準

好處:

  1. 讓Web的發展前景更廣闊
  2. 內容能被更廣泛的裝置訪問
  3. 更容易被搜尋引擎搜尋
  4. 降低網站流量費用
  5. 使網站更易於維護
  6. 提高頁面瀏覽速度

構成:

結構標準:結構用於對網頁元素進行整理和分類,主要包括XML和XHTML兩個 部分
樣式標準:表現用於設定網頁元素的版式、顏色、大小等外觀樣式,主要指的 是CSS
行為標準:行為指的是網頁模型的定義及互動的編寫,主要包括DOM和CMAScript兩個部分

理想狀態我們的原始碼:.html .css .js

開發工具

  • Dreamweave
  • Sublime
  • WebStorm
  • HBuilder
  • Visual Studio Code

HTML初識

超文字標記語言,主要通過HTML標籤對網頁中的文字、圖片、聲音等內容進行描述。

HTML 標籤

HTML 標記標籤通常被稱為 HTML 標籤 (HTML tag)。

  • HTML 標籤是由尖括號包圍的關鍵詞
  • HTML 標籤通常是成對出現的
  • 標籤對中的第一個標籤是開始標籤,第二個標籤是結束標籤
  • 開始和結束標籤也被稱為開放標籤和閉合標籤

語法骨架

<html>      根標籤
   <head>   頭標籤
      <title></title>   標題標籤
   </head>
   <body>  主題標籤
   </body>
</html>1234567
  • html標籤:作用:所有html中標籤的一個根節點
  • head標籤:作用:用於存放:title,metal,base,style,script,link 注意在head標籤中必須設定title標籤
  • title標籤 :作用:讓頁面擁有一個屬於自己的標題
  • body標籤:作用:頁面的主體部分,用於存放所有的html標籤:p,h,a,b,u,i,s,em,dei,ins,strong,img
字符集

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

  • gb2312:簡體中文
  • BIG5:繁體中文
  • GBK:包含全部中文字元,相容GB2312
  • UTF-8:包含全世界所有國家需要用到的字元

HTML標籤

排版標籤

標題標籤(熟記)

標題(Heading)是通過&lt;h1&gt;-&lt;h6&gt;等標籤進行定義的。&lt;h1&gt; 定義最大的標題。&lt;h6&gt; 定義最小的標題。

段落標籤(熟記)

段落是通過 &lt;p&gt;標籤定義的。

水平線標籤(認識)

&lt;hr /&gt;標籤在 HTML 頁面中建立水平線。
hr 元素可用於分隔內容。

換行標籤(熟記)

如果希望在不產生一個新段落的情況下進行換行(新行),可以使用 &lt;br /&gt;標籤。
&lt;br /&gt;元素是一個空的 HTML 元素。由於關閉標籤沒有任何意義,因此它沒有結束標籤。
也許發現&lt;br&gt;&lt;br /&gt;很相似。在 XHTML、XML 以及未來的 HTML 版本中,不允許使用沒有結束標籤(閉合標籤)的 HTML 元素。
即使 &lt;br&gt;在所有瀏覽器中的顯示都沒有問題,使用&lt;br /&gt; 也是更長遠的保障。


div span標籤(重點)

div和span是沒有語義的,是我們網頁佈局主要的兩個盒子

<div> 可定義文件中的分割槽或節(division/section)。
<div> 標籤可以把文件分割為獨立的、不同的部分。它可以用作嚴格的組織工具,並且不使用任何格式與其關聯。如果用 id 或 class 來標記<div>,那麼該標籤的作用會變得更加有效。
<div>是一個塊級元素。這意味著它的內容自動地開始一個新行。實際上,換行是 <div>固有的唯一格式表現。可以通過<div>的 class 或 id 應用額外的樣式。不必為每一個<div>都加上類或 id,雖然這樣做也有一定的好處。
可以對同一個<div> 元素應用 class 或 id 屬性,但是更常見的情況是隻應用其中一種。這兩者的主要差異是,class 用於元素組(類似的元素,或者可以理解為某一類元素),而 id 用於標識單獨的唯一的元素。<span>標籤被用來組合文件中的行內元素。如果不對 span 應用樣式,那麼 span 元素中的文字與其他文字不會任何視覺上的差異。儘管如此,上例中的 span 元素仍然為 p 元素增加了額外的結構。可以為 span 應用 id 或 class 屬性,這樣既可以增加適當的語義,又便於對 span 應用樣式。可以對同一個<span>元素應用 class 或 id 屬性,但是更常見的情況是隻應用其中一種。這兩者的主要差異是,class 用於元素組(類似的元素,或者可以理解為某一類元素),而 id 用於標識單獨的唯一的元素。


文字格式化標籤(熟記)

html入門學習(一)

標籤屬性

HTML 標籤可以擁有屬性。屬性提供了有關 HTML 元素的更多的資訊。
屬性總是以名稱/值對的形式出現,比如:name=”value”。
屬性總是在 HTML 元素的開始標籤中規定。

<標籤名 屬性1="屬性值1" 屬性2="屬性值2" ...> 內容 </標籤名>1
  • 標籤可以擁有多個屬性,必須寫在開始標籤中,位於標籤名後
  • 屬性之間不分先後順序,標籤名和屬性、屬性與屬性之間均以空格分開
  • 任何標籤的屬性都有預設值,省略該屬性則取預設值

影象標籤Img(重點)

在 HTML 中,影象由 &lt;img&gt; 標籤定義。
&lt;img&gt;ooooooo是空標籤,意思是說,它只包含屬性,並且沒有閉合標籤。
要在頁面上顯示影象,你需要使用源屬性(src)。src 指 “source”。源屬性的值是影象的 URL 地址。
定義影象的語法是:


<img src="影象URL" />1

<img />標記屬性:

屬性 屬性值 描述
scr URL 影象的路徑
alt 文字 影象不能顯示時的替換文字
title 文字 滑鼠懸停時顯示的內容
width 畫素 設定影象的寬度
height 畫素 設定影象的高度
border 數字 設定影象邊框的寬度

連結標籤(重點)

HTML 使用超級連結與網路上的另一個文件相連。
幾乎可以在所有的網頁中找到連結。點選連結可以從一張頁面跳轉到另一張頁面。
超連結可以是一個字,一個詞,或者一組詞,也可以是一幅影象,可以點選這些內容來跳轉到新的文件或者當前文件中的某個部分。
當把滑鼠指標移動到網頁中的某個連結上時,箭頭會變為一隻小手。
我們通過使用&lt;a&gt; 標籤在 HTML 中建立連結。
有兩種使用&lt;a&gt;標籤的方式:




  1. 通過使用 href 屬性 - 建立指向另一個文件的連結
  2. 通過使用 name 屬性 - 建立文件內的書籤

基本語法:

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

href 屬性規定連結指向的頁面的 URL。
target屬性規定在何處開啟連結文件。
html入門學習(一)
錨點定位(難點)
通過建立錨點連結,使用者能夠快速定位到目標內容
建立錨點需要兩步:




  1. 使用”a href=”#id名”連線文字/a”建立連結文字
  2. 使用相應的Id名標註跳轉目標的位置

base標籤
base標籤可以設定整體連結的開啟狀態,寫在&lt;head&gt;&lt;/head&gt;之間

特殊字元標籤(理解)

特殊字元 描述 字元的程式碼
空格符
< 小於號 &lt;
> 大於號 &gt;
& 和號 &
¥ 人民幣 ¥
© 版權 ©
® 註冊商標 ®
° 攝氏度 °
± 正負號 ±
× 乘號 ×
÷ 除號 ÷
² 平方2 ²
³ 立方3 ³

註釋標籤

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

<!-- 註釋語句 -->1

路徑

HTML有2種路徑的寫法:相對路徑\絕對路徑\

HTML相對路徑(Relative Path)

同一個目錄的檔案引用
如果原始檔和引用檔案在同一個目錄裡,直接寫引用檔名即可。

我們現在建一個原始檔index.html,在index.html裡要引用login.html檔案作為超連結。

假設index.html路徑是:C:\Users\lenovo\Desktop\index.html
假設login.html路徑是:C:\Users\lenovo\Desktop\login.html
在index.html加入login.html超連結的程式碼應該這樣寫:

<a href = "login.html">login.html</a> 1

表示上級目錄
../表示原始檔所在目錄的上一級目錄,../../表示原始檔所在目錄的上上級目錄,以此類推。

假設index.html路徑是:C:\Users\lenovo\Desktop\index.html
假設login.html路徑是:C:\Users\lenovo\login.html
在index.html加入login.html超連結的程式碼應該這樣寫:

<a href = "../login.html">login.html</a> 1

假設index.html路徑是:C:\Users\lenovo\Desktop\index.html
假設login.html路徑是:C:\Users\login.html
在index.html加入login.html超連結的程式碼應該這樣寫:

<a href = "../../login.html">loginx.html</a> 1

假設index.html路徑是:C:\Users\lenovo\Desktop\index.html
假設login.html路徑是:C:\Users\lenovo\Desktop\Dreamweave\login.html
在index.html加入login.html超連結的程式碼應該這樣寫:

<a href = "../Dreamweave/login.html">loginx.html</a> 1

表示下級目錄
引用下級目錄的檔案,直接寫下級目錄檔案的路徑即可。

假設index.html路徑是:C:\Users\lenovo\Desktop\index.html
假設login.html路徑是:C:\Users\lenovo\Desktop\html\login.html
在index.html加入login.html超連結的程式碼應該這樣寫:

<a href = "html/login.html">login.html</a> 1

假設index.html路徑是:C:\Users\lenovo\Desktop\index.html
假設login.html路徑是:C:\Users\lenovo\Desktop\html\student\login.html
在index.html加入login.html超連結的程式碼應該這樣寫:

<a href = "html/student/login.html">login.html</a> 1

HTML絕對路徑(Absolute Path)

HTML絕對路徑(absolute path)指帶域名的檔案的完整路徑。

假設你註冊了域名www.php.cn 並申請了虛擬主機,你的虛擬主機提供商會給你一個目錄,比如www,這個www就是你網站的根目錄。

假設你在www根目錄下放了一個檔案index.html,這個檔案的絕對路徑就是: http:// www .php. cn/index .html 。

假設你在www根目錄下建了一個目錄叫html_student,然後在該目錄下放了一個檔案index.html,這個檔案的絕對路徑就是http ://www . php. cn/html_student/index.html。

列表標籤

HTML 支援有序、無序和自定義列表

無序列表 ul (重點)
無序列表是一個專案的列表,此列專案使用粗體圓點(典型的小黑圓圈)進行標記。
無序列表始於&lt;ul&gt;標籤。每個列表項始於&lt;li&gt;
瀏覽器顯示如下:


<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>1234
  • Coffee
  • Milk

注意:ul標籤只能放li標籤
li標籤中可以存放所有標籤
列表項內部可以使用段落、換行符、圖片、連結以及其他列表等等。

有序列表 ol (瞭解)
同樣,有序列表也是一列專案,列表專案使用數字進行標記。
有序列表始於&lt;ol&gt; 標籤。每個列表項始於&lt;li&gt;標籤。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>1234

瀏覽器顯示如下:

  1. Coffee
  2. Milk

列表項內部可以使用段落、換行符、圖片、連結以及其他列表等等。

自定義列表 (理解)
自定義列表不僅僅是一列專案,而是專案及其註釋的組合。
自定義列表以&lt;dl&gt;標籤開始。每個自定義列表項以&lt;dt&gt;開始。每個自定義列表項的定義以&lt;dd&gt;開始。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>123456

瀏覽器顯示如下:

定義列表的列表項內部可以使用段落、換行符、圖片、連結以及其他列表等等。