body内标签之超链接,图片与表格

1、超链接<a></a>

当href的值为一个地址时,点击百度字样可以调整到该地址;

<body>
  <a href="http://www,baidu.com" target="_blank">百度</a>
<!--  target="_blank",跳转到一个新页面打开百度页面-->
  <a href="#1">第一章</a>
  <a href="#2">第二章</a>
  <a href="#3">第三章</a>
<!--  #3,3是第三章内容的id,#3是相当于锚,当点击第三章时,会跳转到第三章的内容;href='#某个标签的ID'    标签的ID不允许重复-->

  <div id="1" style="height:700px">第一章的内容</div>
<!--  style设置div的高度为700像素-->
  <div id="2">第二章的内容</div>
  <div id="3">第三章的内容</div>
</body>

执行结果如下:

为了更清晰的看到href锚的作用,可以将div的像素调整的高一些;当点击“第二章”字样时,界面会跳转到“第二章的内容”这里;

注意:href='#某个标签的ID' 标签的ID不允许重复

2、图片<img>

title为图片的标题,当鼠标放置图片上面时,显示“易烊千玺”字样;

当src的后缀jpg不完整时,该图片不显示,显示“易烊”字样;

可以将图片加上a标签设为超链接,这时点击图片会跳转到百度页面。

<a href="http://www.baidu.com">
        <img src="1.jpg" title="易烊千玺" style="height:200px;width=200px" alt="易烊">
<!--    style="height:600px;width=300px"调整图片的像素;当src="1.jp"即图片后缀不完整时,显示alt;当鼠标放置图片上时,显示title>-->
</a>

执行结果如下:

当src的后缀jpg不完整时,执行结果如下:

3、列表

<ul>以点排列;<ol>以数字排序

  <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>

    <ol>
        <li>a</li>
        <li>b</li>
    </ol>

    <dl>
        <dt>标题</dt>
        <dd>neirong1</dd>
        <dd>neirong2</dd>
    </dl>

执行结果如下:

4、表格:

<table>表示一个表;<tr>表示某行,<td>表示某行的某列

<body>
    <table border="1">
<!--        border为给表格加上边框-->
        <tr>
            <td>学号</td>
<!--            第一行第一列-->
            <td>姓名</td>
<!--            第一行第二列-->
            <td>班级</td>
        </tr>

        <tr>
            <td>1</td>
            <td></td>
            <td>
                <a href="input2.html">查看选择框</a>
            </td>
        </tr>

        <tr>
            <td>2</td>
            <td></td>
            <td>
                <a href="#">更新</a>
            </td>
        </tr>
    </table>
</body>

input2.html的代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <div>
            <textarea name="meno">123456</textarea>
<!--            textarea的默认值放在标签中间-->
            <select name="city" size="5" multiple="multiple">
                <!--                默认select的size为1,设置为10可以将下拉框展示;multiple可以多选-->
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3" selected="selected">广州</option>
<!--        selected="selected默认选择该项   -->
                <option value="4">南京</option>
            </select>

            <input type="text" name="user"/>
            <p>请选择性别:</p>
            男:<input type="radio" name="gender" value="1"/>
            女:<input type="radio" name="gender" value="2"/>
            <p>爱好:</p>
            篮球:<input type="checkbox" name="favor" value="1"/>
            足球:<input type="checkbox" name="favor" value="2"/>
            网球:<input type="checkbox" name="favor" value="3"/>
            台球:<input type="checkbox" name="favor" value="4"/>
            <p>特长:</p>
            画画:<input type="checkbox" name="skill" checked="checked"/>
<!--            checked="checked"是默认值,默认选-->
            游泳:<input type="checkbox" name="skill"/>
            <p>上传文件</p>
            <input type="file" name="fname"/>
<!--            依赖from表单的enctype="multipart/form-data"-->
        </div>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    </form>
</body>
</html>

 

执行结果如下:

 

posted @ 2020-02-18 20:26  凸凸yolotheway  阅读(306)  评论(0编辑  收藏  举报