好程式設計師 HTML5培訓教程-html和css基礎知識， Html 是超文字標記語言（英語全稱： HyperText Markup Language ，簡稱： HTML ）是一種用於建立網頁的標準標記語言。
Css 是層疊樣式表 ( 英文全稱： Cascading Style Sheets) 是一種用來 html 和 xml 等檔案樣式的計算機語言， CSS 不僅可以靜態地修飾網頁，還可以配合各種指令碼語言動態地對網頁各元素進行格式化。

一 . 基礎內容：
標記 = 開始標記 + 內容 + 結束標記
標記可以巢狀使用，例如：頁面主體標記中含有標題標記，段落標記。
有些標記有屬性，具體格式，以 a 標記為例， xxxx 其中 make 為標記的屬性。
設計為沒有任何內容的元素稱為 void 元素，需要使用 void 元素時，只需要使用一個開始標記，這是一種方便的簡寫，可以減少 html 中的標記數量
二 . 常用標記的使用與意義：
<!doctype html>html5 的文件型別定義，這一行要寫到 html 檔案開頭
<html></html> 標記 html 頁面的開始和結束
<head></head> 標記頁面的有關資訊
<meta charset="utf-8"> 標記指定字元編碼，這一行要寫到 <head> 元素中所有其他元素上面
<title></title> 為頁面指定一個標題，標記中的內容出現在瀏覽器的頂部
<body></body> 標記頁面的主體內容
 中間 xxx 的內容為註釋的內容
編寫 html 時要把首部和頁面主體分開
<h1></h1> 為主標題，從 <h2> 到 <h6> 依次為副標題，字型由大到小
<p></p> 開始一個段落
<blockquote> </blockquote> 標籤定義塊引用，之間的所有文字都會從常規文字中分離出來，經常會在左、右兩邊進行縮排（增加外邊距），而且有時會使用斜體。也就是說，塊引用擁有它們自己的空間

插入一個換行符
<q> 標籤定義一個短的引用，瀏覽器經常會在這種引用的周圍插入引號
需要了解的內容（一些老版本棄置的元素與不建議使用的元素，做到看見了要明白其含義）
<ol></ol> 定義一個有序列表
<ul> 標籤定義無序列表
<li> 標籤定義列表專案， <li> 標籤可用在有序列表 (<ol>) 和無序列表 (<ul>) 中
<dl> 標籤定義一個描述列表， <dl> 標籤與 <dt> （定義專案 / 名字）和 <dd> （描述每一個專案 / 名字）一起使用
標籤告訴瀏覽器把其中的文字表示為強調的內容，對於所有瀏覽器來說，這意味著要把這段文字用斜體來顯示
<body bgcolor="xxx" text="xxxx">,bgcolor 屬性設定頁面顏色， text 屬性設定文字顏色
<font face="arial">xxxx</font> 利用 font 元素改變字型
<center></center> 對其包圍的文字進行水平居中處理
一些字元實體
< 顯示為 <
> 顯示為 >
©right 顯示為 ©
三 . 一個簡單的 html 框架

<!doctype html>

<html>

<head>

<title> Hello Wrld! </title>

</head>

<body>

<h1> 演示檔案，頁面顯示 hello world ！ </h1>

<p>

Hello Wrld !

</p>

</body>

</html>

四 . 在頁面中插入一個連結
用於建立指向其它頁面的連結，元素中的內容就是連結文字，在瀏覽器中連結文字會顯示有下劃線，指示這是可單擊的，例如：
<a href="( 連結目標檔案的路徑或 url)"
title=" 文字描述 "> （連結文字）
href 屬性指向連結檔案的路徑
rirle 屬性所需連結頁面的文字描述
加入 id 屬性用於具體指向某個連結的某個標題，例如：

<a href = "index.html# 識別符號 " > xxxxx </a>

並同步頁面中的標題 , 連結所使用的識別符號要與標題的識別符號設定一致
<h2 id=" 識別符號 ">xxxxx</h2>
加入 target 屬性，使瀏覽器開啟連結時為單獨的視窗，而不是同一視窗，例如：

<a target = "_blank" href = "xxxxxxxx"

title = "xxxxxxxxx" > xxxxxxxxx </a>

如果不加入 target 屬性，點選連結時瀏覽器會在同一視窗開啟連結，加入此屬性，瀏覽器會在單獨視窗開啟連結
五 . 在頁面中插入影像
<img src="xxxxx"> 標記為在頁面中顯示影像， xxx 為圖片的路徑或 url
alt=“xxx” 屬性為描述這個影像內容的文字，如果影像未能顯示，就會使用這個文字來取代它。
width-"xxx" 屬性告訴瀏覽器在頁面中顯示影像的寬度
height="xxx" 屬性告訴瀏覽器在頁面中顯示影像的高度

未完待續，歡迎繼續關注 好程式設計師 前端教程分享 !

好程式設計師HTML5培訓教程-html和css基礎知識

相關文章