W3school学习日记2

HTML中表、图片、列表的编写

  • 表格在网页中如何来写，一个表由标题，表头和内容构成，表格样式和背景可以根据自己的喜好来修改。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCUTYPE html>
<html>
<body>
<table border="1"cellpadding="10" cellspacing="10" bgcolor="red"  frame="box">
<!-- 定义表格，表的边框、单元格边距、单元格间距 、背景颜色、框架属性-->
<caption>我的标题</caption><!-- 定义标题-->
<tr><!-- 定义行-->
<th>表</th><!-- 定义表头-->
<th colspan="2">电话</th><!-- 定义表头,跨两列-->
</tr>
<tr>
<td background="/i/eg_bg_07.gif">张</td><!-- 定义单元格内容和背景-->
<td>123</td>
<td>456</td>
<td>&nbsp;</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
    <html>
    <body>
    <p>
    您也可以把图像作为链接来使用：
    <a href="/example/html/lastpage.html"><!--定义锚、定义链接-->
    <img border="0"align ="right" src="/i/eg_buttonnext.gif" width="50" height="50" alt="下一页"/><!--定义图片、图片边框、分布位置、图片来源url、图像尺寸、图片显示替代文本-->
    </a>
    </p>

    <p>请点击图像上的星球，把它们放大。</p>
    <img src="/i/eg_planets.jpg"
    border="0" usemap="#planetmap"
    alt="Planets" />
    <map name="planetmap" id="planetmap"><!--定义图像地图-->
    <area
    shape="circle"
    coords="180,139,14"
    href ="/example/html/venus.html"
    target ="_blank"
    alt="Venus" /><!--定义图像地图中的可点击区域-->
    </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
    <html>
    <body>
    <div style="color:#ff0000"><!--定义文档中的分区或节，style设置属性-->
    <h4>无序列表：</h4>
    </div>
    <ul type="disc"><!--无序列表，类型可以为circle、square等-->
      <li>咖啡</li><!--定义列表项-->
      <li>茶</li>
      <li>牛奶</li>
    </ul>
    <h4>有序列表：</h4>
    <ol type="A"> <!--有序列表，类型可以为小写a、罗马字母I、i等-->
     <li>苹果</li>
     <li>香蕉</li>
     <li>柠檬</li>
     <li>桔子</li>
    </ol>  
    <h4>一个定义列表：</h4>
    <dl>
       <dt>计算机</dt>
       <dd>用来计算的仪器</dd>
       <dd>CPU</dd>
       <dt>显示器</dt>
       <dd>以视觉方式显示信息的装置</dd>
    </dl>
    </body>
    </html>