2016.01.21-------html5第二天-优快云博客

本文深入探讨了网页中图片的链接、大小设置、默认显示图片含义、页面内自动跳转、表格的创建与样式调整、列表的使用及自定义列表展示等关键网页元素与布局技巧。

图片的链接
首先把图片拖到同一目录下

<a href="http://www.jikexueyuan.com">
     <img src="miaomimi.jpg" >
 </a>

</a>
设置图片的大小

<a href="http://www.jikexueyuan.com">
     <img src="miaomimi.jpg" width="100px" height="100px" >
 </a>

在图片无法显示的情况下，默认显示图片的含义

<a href="http://www.jikexueyuan.com">
     <img src="miaommi.jpg" width="200px" height="200px" alt="html5logo">
 </a>

页面内自动跳转
<a name="tips">hello</a>
<br><br>呵呵&呵呵哒
<a href="#tips">跳转到hello</a>

表格
<table border="1"> border 属性是带网格
<th>单元</th>表头
<th>单元</th>
<th>单元</th>
<tr>
<td>单元格1</td>单元格
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
</tr>
</table>

<p>表格</p> 表名
<table border="1" >
<caption>重要表格</caption> 居中的表名，在table里面

<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>

    </td>

<table border="1" cellpadding="10">单元格边距
<table border="1" cellspacing="10">单元格间距
<table border="1" cellpadding="10" bgcolor="#a52a2a" background="miaomimi.jpg">加颜色加背景

列表
无序列表

<ul type="circle">属性 disc实心圆 circle 空心圆 square方形
<li>ios</li>
<li>swift</li>
<li>html5</li>
<li>andriod</li>
</ul>

有序列表
<ol type="a">“a”是a,b,c,d A是A,B,C,D start=“10”，从10开始，“i"是和i,ii,iii 默认是数字
<li>ios</li>
<li>swift</li>
<li>html5</li>
<li>andriod</li>
</ol>

<ul>  <!--无序列表显示-->
    <li>宠物</li>
    <ul>
        <li>猫</li>
        <li>狗</li>
    </ul>
    <li>人类</li>
    <ul>
        <li>英国人</li>
        <li>中国人</li>
    </ul>
    <li>植物</li>
</ul>
<ol>   <!--有序列表显示-->
    <li>宠物</li>
    <ol>
        <li>猫</li>
        <li>狗</li>
    </ol>
    <li>人类</li>
    <ol>
        <li>英国人</li>
        <li>中国人</li>
    </ol>
    <li>植物</li>
</ol>
<dl>   <!--自定义列表显示-->
    <dt>helloworld</dt>
    <dd>都会打印一个helloworld    </dd>
<dt>helloworld</dt>
    <dd>每一门新的语言都会打印一个helloworld   </dd>
   <dt>helloworld</dt>
    <dd>都会打印一个helloworld    </dd>
</dl>