HTML5 基礎:
1、聲明:
1、HTML5 ------ <!DOCTYPE>
2、HTML4.01 ------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
3、XHTML 1.0 ------ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2、<head> 標籤內容:
1、編碼格式 : <meta charset="UTF-8">
2、標題 : <title></title>
3、問題的顯示形式(en/zh) :<head lang="en">
3、<body> 標籤可包含更多的標籤內容:
4、<h1~h6> 標題(大->小)5、<p> 段落
6、<a href="http://www.baidu.com">百度</a> 超鏈接
7、<img src="/images/html5.png" alt="html5"> 圖片
------------------------------------------------------------------------
HTML5 的元素、屬性、格式化
1、HTML 元素
開始標籤 元素內容 結束標籤
<p> 段落 </p>
<br/>
2、HTML 屬性
1、標籤可以擁有屬性爲元素提供更多的信息
------------------------------------------------------------------------
HTML 5樣式的使用
1、標籤:
<style> :樣式定義
<link>:資源引用
2、屬性:
rel="stylesheet":外部樣式表
type="text/csss":引入文檔的類型
margin-left:邊距
3、引入方式:
3.1 外部樣式表:
<link rel="stylesheet" type="text/css" href="mystyle.css">
3.2 內部樣式表:
<style type="text/css">
body{backgroud-color:red}
p{margin-left:200px}
</style>
3.3 內聯樣式表:
<p style="color:red>
------------------------------------------------------------------------
HTML 5 鏈接
1、鏈接數據:
1.1、文本鏈接
1.2、圖片鏈接
2、屬性:
2.1、href屬性:指向另一個文檔的鏈接
2.2、name屬性:創建文檔內的鏈接
3、img標籤屬性:
3.1、alt屬性:替換圖片顯示
------------------------------------------------------------------------
HTML 5的表格
1、標籤:
<table> 定義表格
<caption> 定義表格標題
<th> 定義表格表頭
<tr> 定義表格的行
<td> 定義表格的列
<thead> 定義表格的頁眉
<tbody> 定義表格的主題
<tfoot> 定義表格的頁腳
<col> 定義表格的列屬性
<row> 定義表格的行屬性
2、屬性:
<table> :cellpadding 指定單元格內容的內邊距
<table> :border 指定邊框
<table> :cellspacing 指定單元格間距
<table> :bgcolor 指定表格背景色
------------------------------------------------------------------------
HTML 5的列表、塊、佈局
1、HTML 5的列表
<ol> 有序列表
<ul> 無序列表
<li> 列表項
<dl> 自定義列表
<dt> 自定義列表項
<dd> 描述
2、列表的分類:
2.1、無序列表:
使用標籤:<ul> <li>
屬性:disc circle square (type=圓點、圓圈、方塊)
2.2、有序列表:
使用標籤:<ol> <li>
屬性:A a I i start (type= start=)
2.3、嵌套列表:
使用標籤:<ul> <ol> <li>
2.4、自定義列表:
使用標籤:<dl> <dt> <dd>
2、HTML 5的塊
2.1、HTML塊元素:
塊元素在顯示是,通常會以新行開始,如:<h1> <p> <ul>
2.2、HTML內聯元素:
內聯元素通常不會以新行開始,如:<b> <a> <img>
2.3、HTML<div>元素
<div>元素也被稱爲塊元素,其主要是組合HTML元素的容器
2.4、HTML<span>元素是內聯元素,可作爲文本的容器