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 >