html5
列表:
http://www.w3school.com.cn/tags/html_ref_byfunc.asp
列表:
-
无序列表:
-
使用标签<ul><li>
-
属性:disc, circle, square
-
-
有序列表:
-
使用标签<ol><li>
-
属性:A,a,I,i,start
-
-
嵌套列表:
-
使用标签:<ul>,<ol>,<li>
-
-
自定义列表:
-
使用标签:<dl>,<dt>,<dd>
-
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<
body
>
<
ul
type
=
"circle"
>
<
li
>apple</
li
>
<
li
>bnana</
li
>
<
li
>orange</
li
>
</
ul
>
<
ul
type
=
"square"
>
<
li
>apple</
li
>
<
li
>bnana</
li
>
<
li
>orange</
li
>
</
ul
>
<
ol
type
=
"a"
>
<
li
>apple</
li
>
<
li
>bnana</
li
>
<
li
>orange</
li
>
</
ol
>
<
ol
type
=
"A"
>
<
li
>apple</
li
>
<
li
>bnana</
li
>
<
li
>orange</
li
>
</
ol
>
<
ol
type
=
"i"
>
<
li
>apple</
li
>
<
li
>bnana</
li
>
<
li
>orange</
li
>
</
ol
>
<
ol
type
=
"I"
>
<
li
>apple</
li
>
<
li
>bnana</
li
>
<
li
>orange</
li
>
</
ol
>
<
ol
start
=
"10"
>
<
li
>apple</
li
>
<
li
>bnana</
li
>
<
li
>orange</
li
>
</
ol
>
<
ul
type
=
"square"
>
<
li
>fruit</
li
>
<
ol
>
<
li
>apple</
li
>
<
li
>bnana</
li
>
<
li
>orange</
li
>
</
ol
>
<
li
>vegetable</
li
>
<
ol
>
<
li
>potato</
li
>
<
li
>tomato</
li
>
<
li
>cabbage</
li
>
</
ol
>
</
ul
>
<
dl
>
<
dt
>helloworld</
dt
>
<
dd
>print helloworld</
dd
>
<
dt
>helloworld</
dt
>
<
dd
>print helloworld</
dd
>
</
dl
>
</
body
>
|
html块
-
html块元素
-
块元素在显示时,通常以新行开始
-
<h1>,<p>.<ul>
-
-
html内联元素:
-
内联元素通常不会以新行开始
-
<b>,<a>,<img>
-
-
html <div>元素:
-
<div>元素也被称为块元素,其主要是组合html元素的容器
-
-
html<span>元素:
-
<span>元素是内联元素,可作为文本的容器
-
<div>和<span>通常一起使用
index.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
28
|
<!DOCTYPE html>
<
html
>
<
head
lang
=
"en"
>
<
meta
charset
=
"UTF-8"
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"divcss.css"
>
<
style
type
=
"text/css"
>
span{
color: crimson;
}
</
style
>
<
title
></
title
>
</
head
>
<
body
>
<
p
>hello world</
p
>
<
h1
>hello world</
h1
>
<
br
/>
<
b
>helloworld</
b
>
<
a
href
=
"hrefht.html"
>hrefht</
a
>
<
br
/>
<
div
id
=
"divid"
>
<
p
>helloworld</
p
>
<
a
>click</
a
>
</
div
>
<
div
id
=
"divspan"
>
<
p
><
span
>hello world</
span
>this is a text</
p
>
</
div
>
</
body
>
</
html
>
|
divcss.css:
1
2
3
|
#divid p{
color : chartreuse;
}
|
html布局:
使用<div>布局
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<!DOCTYPE html>
<
html
>
<
head
lang
=
"en"
>
<
meta
charset
=
"UTF-8"
>
<
style
type
=
"text/css"
>
body{
margin: 0px;
}
div#container{
width: 100%;
height: 950px;
color : gainsboro;
}
div#heading{
width: 100%;
height: 10%;
background-color: cornflowerblue;
}
div#content_menu{
width: 30%;
height: 80%;
background-color: gainsboro;
float: left;
}
div#content_body{
width: 70%;
height: 80%;
background-color: burlywood;
float: right;
}
div#footing{
width: 100%;
height: 10%;
background-color: black;
clear: both;
}
</
style
>
<
title
></
title
>
</
head
>
<
body
>
<
div
id
=
"container"
>
<
div
id
=
"heading"
>头部</
div
>
<
div
id
=
"content_menu"
>内容菜单</
div
>
<
div
id
=
"content_body"
>内容主体</
div
>
<
div
id
=
"footing"
>底部</
div
>
</
div
>
</
body
>
</
html
>
|
使用<table>布局
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
|
<!DOCTYPE html>
<
html
>
<
head
lang
=
"en"
>
<
meta
charset
=
"UTF-8"
>
<
title
></
title
>
</
head
>
<
body
marginheight
=
"0px"
marginwidth
=
"0px"
>
<
table
width
=
"100%"
height
=
"950px"
style
=
"background-color: aliceblue"
>
<
tr
>
<
td
colspan
=
"2"
width
=
"100%"
height
=
"10%"
style
=
"background-color: cornflowerblue"
>头部</
td
>
</
tr
>
<
tr
>
<
td
width
=
"20%"
height
=
"80"
style
=
"background-color: darkgray"
>
<
ul
>
<
li
>ios</
li
>
<
li
>ios</
li
>
<
li
>ios</
li
>
</
ul
>
</
td
>
<
td
width
=
"60%"
height
=
"80%"
style
=
"background-color: azure"
>实体</
td
>
<
td
width
=
"20%"
height
=
"80"
style
=
"background-color: darkgray"
>左菜单</
td
>
</
tr
>
<
tr
>
<
td
colspan
=
"2"
width
=
"100%"
height
=
"10%"
style
=
"background-color: blue"
>底部</
td
>
</
tr
>
</
table
>
</
body
>
</
html
>
|