Html中的小tips

一.关于超链接a的一些问题

1.对于a标签中target属性问题

（1）_blank一般用于开启另一个页面，一般用于跳转到外部链接

（2）_self则不会开启另一个页面，一般用于非单页应用的内部跳转

2.a标签的href属性问题

href的五种不同用处:

（1）用于指向外部链接

（2）用于指向内部链接

（3）一些空链接---一般用于个人测试

（4）用于一些下载的链接

（5）嵌套图片---达到点击图片也能跳转的效果

    <h4>1.外部链接  </h4>
    <a href="http://www.qq.com" target="_blank"> 腾讯 </a>
    <h4>2.内部连接</h4>
    <a href="02学习-图片的路径.html" target="_self"> 02-EZ</a>
    <h4>3.空连接</h4>
    <a href ="#">空连接</a>
    <h4>4.下载连接</h4>
    <a href="EZ.zip">开始下载</a>
    <h4>5.图片连接</h4>
    <a href="https://101.qq.com/?ADTAG=cooperation.glzx.web#/hero-detail?heroid=81&datatype=5v5"> <img src="EZ.jpg" width="300" /></a>
    <a href="https://101.qq.com/?ADTAG=cooperation.glzx.web#/hero-detail?heroid=222&datatype=5v5"> <img src="金克斯.jpg" width="300" /></a>
    <a href="https://101.qq.com/?ADTAG=cooperation.glzx.web#/hero-detail?heroid=268&datatype=5v5"> <img src="沙皇.jpg" width="300" /></a>

二、图片的路径问题（很多同学搞不清楚的路径问题）

1.当前目录----------直接写名称即可

<img src="dog.jpg" alt="">

2.同级路径--------使用 ../

<img src="../images/dog.jpg" alt="">

3.上级路径---------使用 ./

<img src="./images/dog.jpg" alt="">

三、表单的一些常见注意事项

1.所有的表单都具有name和value属性

2.radio单选框的name值必须一致，才能实现单选效果

性别: <input type="radio" name="sex"value="男">男  
      <input type="radio" name="sex"value="女">女

3.一般情况下，前端需要设置每个表单的name和value值，以便于后端人员使用

四、关于表格table的问题

1.设置每个单元格的边框-----table添加border="1"属性

2.单元格之间的间距-------table添加cellspacing属性（一般为0）

3.设置内容距离单元格边框的距离---------table添加cellpadding属性

<table align="center" border="1" cellspacing="0" cellpadding="20">
      <tr> <th>姓名</th><th>班级</th><th>年龄</th> </tr>
        <tr> <td>姓名</td><td>班级</td><td>年龄</td> </tr>
        <tr> <td>小徐</td><td>2021812</td><td>16</td> </tr>
    </table>

4.单元格的列合并-----在td上添加属性colspan-----需要减少td个数

5.单元格的行合并-----在td上添加属性rowspan-----需要减少td个数

<table  border="1" width="500" height="249">
        <tr>
            <td></td>
            <td colspan="2"></td>
            
        </tr>
        <tr>
            <td rowspan= "2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
           
            <td></td>
            <td></td>
        </tr>
    </table>

效果图：

Html中的技术沉淀

Html中的小tips