1. 程式人生 > >HTML5學習筆記——day one

HTML5學習筆記——day one

一、HTML5的發展和區別

XML:可擴充套件標記語言,類似HTML語言,設計宗旨是傳輸資料而非顯示資料。1998年2月W3C推薦標準。

HTML:超文字標記語言,描述網頁,包含HTML標籤和純文字。

XHTML:可擴充套件性超文字標記語言,上面兩者的結合,與HTML4.0幾乎相同。2001年1月W3C推薦標準。

HTML4.0:網頁的基礎語言標準。

HTML5:最新HTML標準。正式標準還沒釋出。

DHTML=HTML+DOM+CSS+JAVASCRIPT

SHTML:不是HTML而是一種伺服器 API,SHTML是伺服器動態產成的HTML。

DOM:瀏覽器物件模型指令碼,可通過瀏覽器物件模型來對瀏覽器進行操作。

二、理論概念

1.絕對路徑

<a href="file:///D:/備課/HTML5 第一季/code/index2.html">index2</a>

解釋:首先是 file:///開頭,然後是磁碟符,然後是一個個的目錄層次,找到相應文 件。這種方式最致命的問題是,當整個目錄轉移到另外的碟符或其他電腦時,目錄結構一旦 出現任何變化,連結當即失效

2.相對路徑

<a href="index2.html">index2</a>

解釋:相對路徑的條件是必須檔案都在一個磁碟或目錄下,如果是在同一個目錄下,直 接屬性值就是被連結的檔名.字尾名。如果在同一個主目錄下,有多個子目錄層次,那就 需要使用目錄結構語法。

3.錨點設定

超連結也可用來將同一個文件中的另一個元素移入視野。連結當前頁面的某一部分,如很長的小說。通過屬性 id 或 name 實現錨 點定位,不用href。

//連結 <a href="#1">第一章</a> <a href="#2">第二章</a> <a href="#3">第三章</a>

//錨點 <a name="1"></a> <a id="3"></a>  中間不需要寫內容,只是做個錨點讓你連結到當前位置。

三、部分標籤的使用

1

<!DOCTYPE html> 
<!-- 文件型別宣告 -->

2

<meta charset="utf-8">

<!-- 宣告字元編碼,不同的瀏覽器就不會出現亂碼 -->

3.

<link rel="stylesheet" type="text/css" href="01.css">
	<!-- 連結到外部樣式檔案
	rel必需。定義當前文件與被連結文件之間的關係。
	type規定被連結文件的 MIME 型別。 -->

4.

影象作為連結: <a href="http://www.w3cschool.cn">
<img  alt="w3cschool" src="/statics/images/w3c/logo.png" >
<!-- alt:圖片載入不出來的替代文字 -->
<!-- src連結到本地資源 -->

5.

P段落標籤,標籤之間有一個相當於br的空隙。

div之間無縫隙,後面的div在下一行。

<blockquote>大段的引用內容,與P相比,首尾有縮排。

.<pre>展現格式化內容 ,保留文字格式。編輯器怎麼排,網頁就怎麼顯示。

<br>換行

<hr> 水平線。可規定顏色。寬度,高度。

<ul><li>新增無序列表 。

<ol><li>新增有序列表。

文件元素:

<header>表示首部 。

<footer>表示尾部。

<hgroup>組合標題 。是當多個標題出現,干擾到一對或多個本身需要整合的 標題,這是使用此元素包含群組。

<hgroup>

<h1>標題部分</h1>

<h4>小標題部分</h4>

</hgroup> 

<section>文件主題 。是定義一個文件的主題內容。 <article>新增一個獨立成篇的文件 。

<aside>生成註釋欄 。專門為某一段內容進行註釋使用。 <address>表示文件或 article 元素的聯絡資訊。 

圖解

表單:

<thead>新增表頭 。無論在編輯器裡的位置,包含內容始終在表格第一行。

.<tfoot>新增表腳 。同理。

<tbody>新增表主體 ,<tbody>元素主要是包含住非表頭表腳的主體部分,有助於表格格式的清晰,更 加有助於後續 CSS 和 JavaScript 的控制。

<th colspan="2">Telephone</th>  單元格跨兩格合併。

 <th rowspan="2">Telephone:</th> 單元格跨兩列合併。

6.

<figure> 
<figcaption>這是一張圖</figcaption>
<!-- 圖片上面一行顯示文字 -->
 <img src="D:\圖包\head.jpeg"> 
</figure> 
<!-- 這兩個元素一般用於圖片的佈局。 -->

四、Sublime Text3常用快捷鍵

1,標籤名+Tab  標籤自動補全(單標籤不能用,也不用在前面打尖括號)。

2,ctrl+shift+p 調出Package Control命令。