HTML样式
1.标签:
<style> 样式定义
<link> 资源引用
2.属性:
rel = "stylesheet" 外部样式表
type = "text/css" 引用文档的类型
margin-left 边距
外部样式表:
1
|
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"mystyle.css"
>
|
内部样式表:
1
2
3
4
5
6
7
8
|
<
style
>
body{
background-color:red;
}
p{
margin-left:20px;
}
</
style
>
|
内联样式表:
1
|
<
p
style
=
"color:red"
>
|
HTML链接
1.链接数据:
文本链接
1
|
<
a
href
=
"www.baidu.com"
>百度</
a
>
|
图片链接
1
2
3
|
<
a
href="
<img
src
=
"1.jpg"
>
</
a
>
|
2.属性:
href属性:指向另一个文档的链接
name属性:创建文档内的链接
1
2
|
<
a
name
=
"tips"
>hello</
a
>
<
a
href
=
"#tips"
>跳转到hello</
a
> //在百度百科里面使用的非常多
|
3.img标签属性:
alt:替换文本属性(在图片不能正常显示时替换为文本"1.jpg_logo")
1
|
<
img
src
=
"1.jpg"
width
=
"500px"
height
=
"500px"
alt
=
"1.jpg_logo"
>
|
HTML表格
<table> 定义表格
<caption> 定义表格标题
<th> 定义表格表头
<tr> 定义表格的行
<td> 定义表格的单元
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
<col> 定义表格的列属性
1.表格的表头
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>表格的表头</
title
>
</
head
>
<
body
>
<
table
border
=
"1"
>
<
tr
>
<
th
>单元1</
th
>
<
th
>单元2</
th
>
<
th
>单元3</
th
>
</
tr
>
<
tr
>
<
td
>单元格1</
td
>
<
td
>单元格2</
td
>
<
td
>单元格3</
td
>
</
tr
>
<
tr
>
<
td
>单元格1</
td
>
<
td
>单元格2</
td
>
<
td
>单元格3</
td
>
</
tr
>
</
table
>
</
body
>
</
html
>
|
2.没有边框的表格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>没有边框的表格</
title
>
</
head
>
<
body
>
<
table
>
<
tr
>
<
th
>单元1</
th
>
<
th
>单元2</
th
>
<
th
>单元3</
th
>
</
tr
>
<
tr
>
<
td
>单元格1</
td
>
<
td
>单元格2</
td
>
<
td
>单元格3</
td
>
</
tr
>
<
tr
>
<
td
>单元格1</
td
>
<
td
>单元格2</
td
>
<
td
>单元格3</
td
>
</
tr
>
</
table
>
</
body
>
</
html
>
|
3.空单元格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>空单元格</
title
>
</
head
>
<
body
>
<
table
border
=
"1"
>
<
tr
>
<
th
>单元1</
th
>
<
th
>单元2</
th
>
<
th
>单元3</
th
>
</
tr
>
<
tr
>
<
td
></
td
>
<
td
></
td
>
<
td
></
td
>
</
tr
>
<
tr
>
<
td
></
td
>
<
td
></
td
>
<
td
></
td
>
</
tr
>
</
table
>
</
body
>
</
html
>
|
4.带有标题的表格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>带有标题的表格------加p元素</
title
>
</
head
>
<
body
>
<
p
>带标题的表格</
p
>
<
table
border
=
"1"
>
<
tr
>
<
th
>单元1</
th
>
<
th
>单元2</
th
>
<
th
>单元3</
th
>
</
tr
>
<
tr
>
<
td
>单元格1</
td
>
<
td
>单元格2</
td
>
<
td
>单元格3</
td
>
</
tr
>
<
tr
>
<
td
>单元格1</
td
>
<
td
>单元格2</
td
>
<
td
>单元格3</
td
>
</
tr
>
</
table
>
</
body
>
</
html
>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>带有标题的表格------加caption</
title
>
</
head
>
<
body
>
<
table
border
=
"1"
>
<
caption
>带标题的表格</
caption
>
<
tr
>
<
th
>单元1</
th
>
<
th
>单元2</
th
>
<
th
>单元3</
th
>
</
tr
>
<
tr
>
<
td
>单元格1</
td
>
<
td
>单元格2</
td
>
<
td
>单元格3</
td
>
</
tr
>
<
tr
>
<
td
>单元格1</
td
>
<
td
>单元格2</
td
>
<
td
>单元格3</
td
>
</
tr
>
</
table
>
</
body
>
</
html
>
|
5.表格的内标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>表格的内标签</
title
>
</
head
>
<
body
>
<
table
border
=
"1"
>
<
tr
>
<
td
>表格1</
td
>
<
td
>表格2</
td
>
</
tr
>
<
tr
>
<
td
>
<
ul
>
<
li
>苹果</
li
>
<
li
>菠萝</
li
>
<
li
>香蕉</
li
>
</
ul
>
</
td
>
<
td
>
好想吃啊
</
td
>
</
tr
>
</
table
>
</
body
>
</
html
>
|
6.单元格边距(cellpadding)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>单元格边距</
title
>
</
head
>
<
body
>
<
table
border
=
"1"
>
<
tr
>
<
td
>单元格1</
td
>
<
td
>单元格2</
td
>
<
td
>单元格3</
td
>
</
tr
>
<
tr
>
<
td
>单元格4</
td
>
<
td
>单元格5</
td
>
<
td
>单元格6</
td
>
</
tr
><
br
/>
</
table
>
<
table
border
=
"1"
cellpadding
=
"10"
>
<
tr
>
<
td
>单元格1</
td
>
<
td
>单元格2</
td
>
<
td
>单元格3</
td
>
</
tr
>
<
tr
>
<
td
>单元格4</
td
>
<
td
>单元格5</
td
>
<
td
>单元格6</
td
>
</
tr
>
</
table
>
</
body
>
</
html
>
|
7.单元格间距(cellspacing)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>单元格间距</
title
>
</
head
>
<
body
>
<
table
border
=
"1"
>
<
tr
>
<
td
>单元格1</
td
>
<
td
>单元格2</
td
>
<
td
>单元格3</
td
>
</
tr
>
<
tr
>
<
td
>单元格4</
td
>
<
td
>单元格5</
td
>
<
td
>单元格6</
td
>
</
tr
><
br
/>
</
table
>
<
table
border
=
"1"
cellspacing
=
"10"
>
<
tr
>
<
td
>单元格1</
td
>
<
td
>单元格2</
td
>
<
td
>单元格3</
td
>
</
tr
>
<
tr
>
<
td
>单元格4</
td
>
<
td
>单元格5</
td
>
<
td
>单元格6</
td
>
</
tr
>
</
table
>
</
body
>
</
html
>
|
8.表格内的背景颜色和图像
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>表格的背景颜色</
title
>
</
head
>
<
body
>
<
table
border
=
"1"
bgcolor
=
"aqua"
>
<
tr
>
<
td
>单元格1</
td
>
<
td
>单元格2</
td
>
<
td
>单元格3</
td
>
</
tr
>
<
tr
>
<
td
>单元格4</
td
>
<
td
>单元格5</
td
>
<
td
>单元格6</
td
>
</
tr
>
</
table
>
</
body
>
</
html
>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>表格的背景图像</
title
>
</
head
>
<
body
>
<
table
border
=
"1"
background
=
"1.jpg"
cellpadding
=
"100"
>
<
tr
>
<
td
>单元格1</
td
>
<
td
>单元格2</
td
>
<
td
>单元格3</
td
>
</
tr
>
<
tr
>
<
td
>单元格4</
td
>
<
td
>单元格5</
td
>
<
td
>单元格6</
td
>
</
tr
>
</
table
>
</
body
>
</
html
>
|
本文转自yeleven 51CTO博客,原文链接:http://blog.51cto.com/11317783/1771283