HTML樣式
- 標籤
<style> 樣式定義
<link>資源引用，比如引入css樣式進入頁面效果中- 屬性
rel = "stylesheet":外部樣式表
type = "text/css":引入文檔的類型
margin-left:邊距- 樣式引入方式
1.外部樣式表
<link rel = "stylesheet" type = "text/css" href = "mystyle.css">
例如：
先定義一個css文件
mystyle.css
h1{
color:red;
}
<!DOCTYPE html>
<html>
<head>
</head>
<meta charset = "UTF-8">
<title>外部樣式</title>
<link rel = "stylesheet" type = "text/css" href = "mystyle.css">
<body>
<h1>外部樣式引用</h1>
</body>
</html>2.內部樣式表
<style type = "text/css">
body{background-color:red}
p{margin-left:40px}
</style>例如：
<!DOCTYPE html>
<html>
<head>
</head>
<meta charset = "UTF-8">
<title>外部樣式</title>
<style type = "text/css">
h1
{
color:black;
}
</style>
<body>
<h1>內部樣式引用</h1>
</body>
</html>3.內聯樣式表
<p style = "color:red">例如：
<!DOCTYPE html>
<html>
<head>
</head>
<meta charset = "UTF-8">
<title>外部樣式</title>
<style type = "text/css">
h1
{
color:black;
}
</style>
<body>
<h1>內部樣式引用</h1>
<p style = "color:blue">綠竹林工作室</p>
</body>
</html>鏈接
鏈接類型
文本鏈接
<a href = "www.baidu.com">百度</a> 圖片鏈接
<a href = "www.hello.com">
<img src = "hello.png" width = "400px" height = "400px"/>
</a>屬性
href屬性: 指向另一個文檔的鏈接
name屬性: 創建文檔內的鏈接img標籤屬性
alt: 替換文本屬性(即圖片不顯示的時候，顯示的文本說明)
<a href = "www.hello.com">
<img src = "hello.png" width = "400px" height = "400px" alt = "hello"/>
</a>總體實例：
<html><head></head><body>
<a href="http://blog.csdn.net/jarlen">
Jarlen</a>
<a href="http://blog.csdn.net/jarlen">
<img src="http://d.hiphotos.baidu.com/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=5e3596ad902397ddc274905638ebd9d2/d31b0ef41bd5ad6ee6c9cba080cb39dbb6fd3c43.jpg"
>
<img src="de1"
alt="DQ">
</a>
</body></html>- name屬性 ，文檔內的鏈接
<a name = "tips">tips</a>
<a href = "tips">點擊跳轉本頁的hello</a>表格
- 沒有邊框的表格
<body>
<table>
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
<td>第1行第3列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
</table>
</body>
- 表格中的表頭
<body>
<capture>表格</capture><table border="1">
<tr>
<th>名字1</th>
<th>名字2</th>
<th>名字3</th>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
</table>
</body>
空單元格
就是將td中的內容值空。
帶有標題的表格
<body>
<capture>表格</capture><table border="1">
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
<td>第1行第3列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
</table>
</body>
- 表格內的標籤
<body>
<capture>表格</capture><table border="1">
<tr>
<th>名字1</th>
<th>名字2</th>
<th>名字3</th>
</tr>
<tr>
<td>第2行第1列</td>
<td>
<ul>
<li>列1</li>
<li>列2</li>
<li>列3</li>
</ul>
</td>
<td>第2行第3列</td>
</tr>
</table>
</body>
單元格邊距
單元格間距
表格內的背景色和圖像
單元格內容排列
自己查吧
跨行和跨列單元格
