HTML基础

Dear 丶 2024-03-26 11:50 5阅读 0赞

#### HTML ####

*  Web
 *   *  常用快捷键
 *  文本相关标签
 *  图片标签
 *   *  img 标签
 *  a 标签(超链接)
 *  table(表格标签)
 *  form(表单)
 *  分区标签

## Web ##

![在这里插入图片描述][09a8523397ba49db9fe41200d2cb176f.png]  
![在这里插入图片描述][3576816d6dad4d17aee05ea93b6a9f3e.png]

### 常用快捷键 ###

![在这里插入图片描述][64b9881aeae34cf5907a6db69d89ba53.png]

## 文本相关标签 ##

![在这里插入图片描述][6c4c45413fb3498698616709a047d4fc.png]  
![在这里插入图片描述][fbfbb0650bf84ef7a32ca4e3c2dcf52b.png]  
![在这里插入图片描述][48a7a8a42700483cbf155ab4fce5cc80.png]  
![在这里插入图片描述][dc2b01603a914286a07b10f318c2cab2.png]  
![在这里插入图片描述][f1da559b52054779a8a570fef8e2a901.png]

## 图片标签 ##

### img 标签 ###

![在这里插入图片描述][80600a6199474facb68700310908d0d6.png]

## a 标签(超链接) ##

![在这里插入图片描述][3d1636f97a0a449f8c28c8d06104626c.png]

## table(表格标签) ##

![在这里插入图片描述][dd16a43a958a450ba5b5469f2921adc1.png]

## form(表单) ##

![在这里插入图片描述][9961656e340348d5b20be2979eabd83a.png]  
![在这里插入图片描述][dc2861d103f54ab0a25274c3cb8c5cd7.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <form action="http://www.tmooc.cn">
        <input type="text" name="username" placeholder="用户名" maxlength="5" value="abc" readonly> <br>
        <input type="password" name="password" placeholder="密码">  <br>
        性别：
        <input type="radio" name="gender" value="m" id="r1"> <label for="r1">男</label>
        <input type="radio" name="gender" value="w" checked id="r2"> <label for="r2">女</label>  <br>
        兴趣爱好：
        <input type="checkbox" name="hobby" value="cy"> 抽烟
        <input type="checkbox" name="hobby" value="hj"> 喝酒
        <input type="checkbox" name="hobby" value="tt"> 烫头 <br>
        所在地：
        <select name="city">
            <option value="bj">北京</option>
            <option value="sh" selected>上海</option>
            <option value="gz">广州</option>
        </select> <br>
    
        靓照：
        <input type="file" name="pic"><br>
    
        生日：
        <input type="date" name="birthday"> <br>
        <input type="submit" value="注册">
        <input type="reset" value="重置">
        <input type="button" value="自定义">
    
        <hr>
        <button type="submit">注册</button>
        <button type="reset">重置</button>
        <button type="button">自定义</button>
    </form>
    </body>
    </html>

## 分区标签 ##

![在这里插入图片描述][fe674fbe945f40b38da9ee4e9ef71fe0.png]  
![在这里插入图片描述][47d9dc5665de44a1aed3caa825412c50.png]  
![在这里插入图片描述][215390c39ebc4b269f4d7795f7217af5.png]  
![在这里插入图片描述][272303a2b8014a6181c9266026a9836a.png]

[09a8523397ba49db9fe41200d2cb176f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/d0a6c517d1874e128dcddb4b92192448.png
[3576816d6dad4d17aee05ea93b6a9f3e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/44389c356e6e4ceda383d424a214ac6a.png
[64b9881aeae34cf5907a6db69d89ba53.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/31a59853ae054fc4857ae93b788c1a2b.png
[6c4c45413fb3498698616709a047d4fc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1c724796792543a397e3a74a4f021e4e.png
[fbfbb0650bf84ef7a32ca4e3c2dcf52b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/792eb64d5135487f9fd6ac039b657690.png
[48a7a8a42700483cbf155ab4fce5cc80.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/38f1028c849640dabd2c49a91c5b3f6d.png
[dc2b01603a914286a07b10f318c2cab2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f821cdabc6c64c929cb52a5df14c7f54.png
[f1da559b52054779a8a570fef8e2a901.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/8829e4154dd94714a2dad938a634f8b7.png
[80600a6199474facb68700310908d0d6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/df75c6a6c51a474e935490ea695f2efd.png
[3d1636f97a0a449f8c28c8d06104626c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c19d1d2c61ad4b1c88a5c20dcc638045.png
[dd16a43a958a450ba5b5469f2921adc1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/82ca30720fce43108acdfd921817644b.png
[9961656e340348d5b20be2979eabd83a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/43a93fbfe20449eab92a822e1b020f65.png
[dc2861d103f54ab0a25274c3cb8c5cd7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/797462ab6a2e42db884548c5dec58a3b.png
[fe674fbe945f40b38da9ee4e9ef71fe0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/da2dc581688d4c4099f32ba3b2551e28.png
[47d9dc5665de44a1aed3caa825412c50.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/a78df6d634a94fd695bb69479ae88d91.png
[215390c39ebc4b269f4d7795f7217af5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/513bf1224eff44d3bb53889c06137f4d.png
[272303a2b8014a6181c9266026a9836a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/5fb135f0ca2d4352aefa120ac74757ab.png