HTML5+CSS3初級教程
HTML5介紹
html5介紹
html與css的關係
- html+css構成了網頁的基本頁面結構和樣式；
- css用來修飾html樣式；
- html有默認樣式，若需改變，需要藉助css來重寫樣式。
html標籤語法
- 標籤用<和>括起來，如< html>；
- 標籤分開始標籤和結束標籤，一般成對出現;
- 標籤可以嵌套出現；
- 標籤不區分大小寫，但大都小寫。
eg.
<html>
<head>
<title>這是一個例子</title>
</head>
<body>
</body>
</html>
html5文檔結構
文檔結構如圖：
解釋：
- <!DOCTYPE html>：文檔類型聲明。
此聲明必須是html文件的第一行，在<html>前； - <html>和</html>標籤分別用來標識html文檔的開始和結束；
- <head>和</head>標籤對：包含html文檔的信息，可以包含其他輔助性標籤，但瀏覽器中只顯示title標籤的內容。
- <body>和</body>標籤對：html文檔的主體部分。
html文檔註釋
<!-- 註釋文字 -->
HTML5標籤
head標籤
文檔頭部描述文檔的屬性、標題等信息。在文檔頭部包含的絕大多數不會顯示在瀏覽器中。
注意：
- head標籤爲雙標籤;
- 通常嵌套meta、title、style等標籤，具體作用參考上圖代碼註釋。
body標籤
瀏覽器中顯示的信息寫在body標籤間。
語義化標籤
段落標籤<p>
要在網頁上顯示文章時，用<p>標籤。把每個段落分別放到<p>裏；
每個段落前後默認有空白，想要刪除的話，可以用css樣式來刪除或改變，之後講css的文章會提到。
使用<span>標籤自定義文件樣式
<span>屬於無語義標籤，可以用來設置單獨的樣式。
比如把上面段落文字中的數字標紅：
效果:
<hx>製作文章標題
標題標籤分六級，從h1到h6。
<h1>是一級標題，一般用在網站名稱上。
代碼示例：
運行效果：
<div>標籤自定義塊
將一些獨立的邏輯部分（頁面上相互關聯的一組元素）劃分出來，放在一個<div>標籤中。
<header>標籤定義頭部區域
<header>爲H5新增的語義化標籤，代表網頁頂部部分。
<footer>標籤定義底部區域
<footer>爲H5新增的語義化標籤，代表網頁底部部分。
<selection>標籤定義一個區域
<selection>爲H5新增的語義化標籤，用來定義一個區域，如網頁中專欄部分。
作用等同於<div>，只是具備語義化。
<aside>標籤定義一個區域
<aside>爲H5新增的語義化標籤，用來定義側邊欄區域，如網頁中側欄部分。
效果標籤
<br>標籤實現換行效果
在每個需要換行的地方輸入<br />。相當於word中的回車。
<br />是一個空標籤，就是說沒有html內容。
代碼示例：
效果：
特殊字符& nbsp;實現空格
代碼示例：
效果：
<hr />標籤實現水平分割線
<hr />標籤和<br />標籤一樣都是一個空標籤，所以只有一個開始標籤，沒有結束標籤。
<hr />標籤在瀏覽器中的默認樣式是粗灰的線條，這個樣式可以用css修改。
列表標籤
<ul><li>標籤實現無序列表
代碼示例：
效果截圖：
<ol><li>標籤實現有序列表
可以用來在網頁中展示有先後順序的信息列表。
代碼示例：
效果截圖：
圖片、鏈接、表格標籤
<img>標籤添加圖片
代碼舉例：
結果截圖：
- src：標識圖像的位置；
- alt：當圖像下載不成功時，顯示該屬性指定的文本；
- title：提供在圖像可見時對圖像的描述；
- 圖像的格式可以是gif、png、jpeg。
<a>標籤添加超鏈接
代碼舉例：
- href：超鏈接地址，即點擊後將要打開的網頁；
- title：鼠標滑過鏈接時顯示的提示文字；
- target：網頁的打開方式。有兩個值：_self爲在當前窗口打開；_blank爲在新窗口打開。