前端三件套之——html(1)

最新推荐文章于 2024-11-09 10:31:18 发布

小米米小life

最新推荐文章于 2024-11-09 10:31:18 发布

阅读量436

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/weixin_49977305/article/details/121518025

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

持续更新。。。

html骨架，css美起来，js动起来

一、插入图片

1.src="该目录下的图片名" alt="不显示图片时才显示的文字" title="悬停文字"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html学习</title>
</head>
<body>
    <img src="76fb817de225720565ec0183f49d2d49.jpeg" alt="这是猪猪" width="200" >
    <br>

    <img src="../企鹅.jpeg" title="上级目录">
    <br>
    <img src="./76fb817de225720565ec0183f49d2d49.jpeg" alt="这是猪猪" title="当前目录" width="200" >
    <br>
    <img src="下级/golang.jpeg" title="下级目录">
    <br>
</body>
</html>

2.综合实例：用到<h> <hr> <p> <img > <a >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>招聘网页</title>
</head>

    <h1> 招聘</h1>
    <hr>
    <h2> 职位描述</h2>
    <p> balabala</p><br>
    <h2> 岗位要求</h2>
    <p><strong> balabala</strong></p><br>
    <h2>工作地址 </h2>
    <p>balabala</p>
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww9080.enorth.com.cn%2Fpic%2F0%2F10%2F08%2F78%2F10087826_697944.jpg&refer=http%3A%2F%2Fwww9080.enorth.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640335910&t=ce25339400cd21c51e375006c70664c5" title="地址" width="200">
    <h2>联系方式</h2>
    <p> <address></address></p>
    <p> <a href=" https://join.qq.com/">腾迅校招</a></p>
</body>
</html>

二、列表、表格、表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表表格表单学习</title>
</head>
<body>
          <!--代码插入-->
</body>
</html>

1.列表无序和有序

<body>
    <!--列表无序-->
    <ul>
        <li>g</li>
        <li>h</li>
    </ul>
    <!--列表有序-->
    <ol>
        <li>a</li>
        <li>b</li>
    </ol>
    <!--表格--><!--table 嵌套关系--table含tr，tr含td-->
    <table border="1" width="80"><!--80是两个字的长度-->
        <tr> <td>姓名</td> <td>年纪</td> </tr>
        <tr> <td>张三</td> <td>21</td>   </tr>
        <tr> <td>李四</td> <td>20</td>   </tr>
    </table>
</body>

2、表格

<!--表格--><!--table 嵌套关系--table含tr，tr含td-->
    <table border="1" width="80"><!--80是两个字的长度-->
        <tr> <td>姓名</td> <td>年纪</td> </tr>
        <tr> <td>张三</td> <td>21</td>   </tr>
        <tr> <td>李四</td> <td>20</td>   </tr>
    </table>
    <br>

    <table border="1" width="80"><!--80是两个字的长度-->
        <caption><strong>学生年纪</strong></caption>
        <tr>  <th>姓名</th>  <th>年纪</th>  </tr>
        <tr>  <td>张三</td>  <td>21</td>    </tr>
        <tr>  <td>李四</td>  <td>20</td>    </tr>
    </table>
    <br>

    <table border="1" width="500"><!--80是两个字的长度-->
        <caption><strong>学生年纪</strong></caption><!--大标题-->
        <thead><tr>  <th>姓名</th>  <th>年纪</th>  <th>特长</th>   </tr></thead><!--头-->
        <tbody><tr>  <td>张三</td>  <td>21</td>    <td>b站里面的出名人物</td></tr></tbody><!--主体-->
        <tfoot><tr>  <td>李四</td>  <td>20</td>    <td>被张三带出名的人物</td></tr></tfoot><!--尾巴-->
    </table>
    <!--合并单元格-->
    <table border="1" width="500"><!--80是两个字的长度-->
        <caption><strong>学生年纪</strong></caption><!--大标题-->
        <thead><tr>  <th>姓名</th>  <th>年纪</th>                <th>特长</th>                             </tr></thead><!--头-->
        <tbody><tr>  <td>张三</td>   <td rowspan="2"> 20</td>   <td >b站里面的出名人物</td>               
        <tr>  <td>李四</td>                                       <td>被张三带出名的人物</td>                                    </tr></tbody><!--主体-->
        <tfoot><tr>  <td>总结</td>                               <td colspan="2">都是人</td>               </tr></tfoot><!--尾巴-->
    </table>
    <br>
    <br>

3、表单


    <!--表单--><!--text,radio,button,submit,reset-->
    <input type="text" placeholder="输入账号">
    <br>
    <input type="text" placeholder="输入密码">
    <br>
    <br>
    
    <form action="">
    昵称：<input type="text">
    <br>
    密码：<input type="text">
    <br>
    性别：<input type="radio" name="sex" >男<!--name相同，同为一组-->
        <input type="radio" name="sex" checked >女  <!--记-->
    <br>
    上传照片
    <input type="button" value="不要点我">
    <input type="file" multiple>          <!--记-->
    <input type="reset"value="重置">
        <hr>
        <input type="submit" value="免费注册">
        协定阅读
        <input type="checkbox"  checked>打勾     <!--记-->
    </form>

    <!--比较button和input-->
    <input type="button" value="hhhh">
    <button type="button">hhhh </button>
    <br>
    <input type="submit" value="提交">
    <button type="submit" >提交 </button>
    <br>
    <input type="reset" value="重置">
    <button type="reset">重置 </button>
    <br><br>


    <select name="城市" id="">
            <option value="">深圳</option>
            <option value="">广州</option>
            <option value="">上海</option>
            <option value="">北京</option>
    </select>