1. 程式人生 > >HTML基礎介紹

HTML基礎介紹

html是java web的一個基礎語言,這篇文章是單純的HTML的介紹以及應用,無關CSS、JS,既然會查到這個那這些行外介紹就不多說,直接開始正題。

可能會有一些囉嗦但這是在兩天對html學習的總結,不是全部之後小編會在更新部落格,基本概括到了每一個點,從點滴開始。

先扯一些題外話,訪問網頁原理可能有些人初識前端都不所瞭解,打個很簡單的比方,瀏覽網頁時當我們輸入網址進去時會有頁面彈出,簡單來說我們電腦在請求訪問時就已經接受了該網頁的相關資訊,包括圖片啊,html檔案啊這些的,那麼簡明來說當我們訪問網路時,伺服器端與自身電腦是有真實的物理資訊傳輸的(通過HTTP協議傳輸),儲存在一個臨時資料夾中(當然這個臨時資料夾不重要)。

一、程式設計軟體

在未接觸工程時sublime這個軟體非常方便簡潔具體下載網路上可以直接查到。

二、HTML骨架

1.HTML:超文字標記語言,唯一的作用以標籤對為純文字增加語義,沒有樣式、沒有互動、沒有行為。

2.最基本的檔案 index.html改檔案預設網站首頁,在訪問時一個網站是沒有細化到那個頁面的話就是現實index頁面

3.HTML

 ·基本骨架可以在sublime中使用快捷鍵顯示 輸入html:xt  +(ctrl+e)顯示 可能在看到這個時最難理解的是head上方的一串程式碼,這是文件頭宣告,再HTML5之前有兩種大規範,而每一個大規範中有3個小規範這些不需死記,我們常用冒號後xt 即為XHTML的普通的規範。

·字符集,meta開頭這段,重點在於charset屬性後的代表字符集,可以理解為一個詞庫像圖中UTF-8就是包含世界上所有語言,既然大那麼索引他們的位元組就大,在UTF-8中一個漢字佔三個位元組,而國內常用的是gb2312這個詞庫只有中文,位元組小自然執行速度會快一點。

meta除了可以設定字符集,還可以設定關鍵字和頁面描述。

<meta name=”” content=”” />

name即名字,content及內容。

三、標籤介紹

1.<title>網頁的標題</title>

2.<h1> 到 <h6> 都是標籤:僅僅到6級就沒有了

  <h1></h1> 一級標題

  <h2></h2> 二級標題

  ……

  <h6></h6> 六級標題

3. p標籤為段落

4.HTML頁面不是直接插入圖片,而是插入圖片的引用地址。

<img src="圖片檔名" alt="當照片無法顯示時邊上新增的註釋" />

然後在說到這個時就會提到一個相對路徑問題當html檔案與圖片檔案在同一目錄下時可直接輸入圖片檔名使其顯示,這邊就不詳細介紹用一個例項來說明:

<img src="../../photo/1.png" />

../   是返回當前目錄上一級

5.超連結

·連線網頁

<a href="網頁名"title="懸停文字" target="_blank">超連結名</a>

這樣就是一個完整的超連結介紹target="_blank"是在點選超連結後跳轉到新的頁面顯示

懸停文字和target可無。

·超連結與圖片插入尋找路徑時都要注意相對路徑。

6.頁面內的錨點

也是超連結的一個應用在同一頁面裡在點選設定的該類連線後會跳轉到所設定的錨點處,

假如網頁後面有一個標題為我的作品欄

<h><a name="wdzp">我的作品</a></h>或者<h><a id="wdzp">我的作品</a></h>

這個操作就將標題我的作品這邊附上了一個錨點,在網頁的其他處可附上<a href="#wdzp">點選我就檢視我的作品</a>

就會出現一個點選我就檢視我的作品這個超連結點選後會直接定位到錨點位置。或者也可以在網頁欄末尾加上#wdzp可以直接訪問到錨點處內容

綜上是單純的HTML介紹也是往後學習CSS,JS的基礎,小編也是初學web,這是自己兩天對於HTML的學習總結。希望能有所幫助,更多的標籤介紹可以檢視之後HTML介紹2