HTML快捷键及综合案例（简历的展示与填写）

没事学习去

已于 2024-07-26 19:37:22 修改

阅读量968

点赞数 37

分类专栏： Web 文章标签： html 前端 web

于 2024-07-26 19:30:40 首次发布

本文链接：https://blog.csdn.net/wrrtx/article/details/140723026

版权

Web 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

文章目录

Emmet快捷键
HTML 特殊字符
综合案例
- 展示简历
- 填写简历信息
结语

Emmet快捷键

快速输入标签

input[tab]

input

快速输入多个标签

div*3[tab]

在这里插入图片描述

标签带id

div#sex[tab]

divid

标签带类名

div.sex[tab]

divsex

标签带子元素

ul>li*3[tab]

ulli3

标签带兄弟元素

span+span

spansapn

标签带内容

div{hello}[tab]

divhello

标签带内容(带编号)

div{$.hello}

在这里插入图片描述

以上是快捷键的部分展示，快捷键还有很多，可以在使用中积累

HTML 特殊字符

有些特殊的字符在 html 文件中是不能直接表示的, 使用时需要用特殊字符

<body>
    <p>
        <!-- 
        空格: &nbsp;
        小于号: &lt;
        大于号: &gt;
        按位与: &amp; -->
        这是一些空格:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;, 一共5个<br/>
        这是小于号: &lt;<br/>
        这是大于号: &gt;<br/>
        这是按位与: &amp;
    </p>
</body>

在这里插入图片描述

更多的特殊字符可以通过以下链接进行查询：HTML特殊字符编码对照表

综合案例

展示简历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简历</title>
</head>
<body>
    <h1>没事学习去</h1>
    <h2>基本信息</h2>
    <img src="https://profile-avatar.csdnimg.cn/5b5f321676534367b87b35ed9169a743_wrrtx.jpg!1" width="200px" height="200px">
    <div>
        <span><p>求职意向：Java开发工程师</p></span>
        <span><p>联系电话：13366998888</p></span>
        <span><p>邮箱：xxxxxx@163.com</p></span>
        <span><p><a href="https://gitee.com/wrrtx" target="_blank">我的gitee</a></p></span>
        <span><p><a href="https://blog.csdn.net/wrrtx?spm=1018.2226.3001.5343" target="_blank">我的博客</a></p></span>
    </div>
    <div>
        <h2>教育背景</h2>
        <ol>
            <li>2010-2016 Web小学 小学</li>
            <li>2016-2019 Web中学 初中</li>
            <li>2019-2022 Web中学 高中</li>
            <li>20122-至今 Web大学 本科</li>
        </ol>
    </div>
    <div>
        <h2>专业技能</h2>
        <ul>
            <li>掌握 Java 编程, Java 基础语法扎实；</li>
            <li>常见数据结构都可以独立实现并熟练应用；</li>
            <li>熟知计算机网络理论，并且可以独立排查常见问题；</li>
            <li>掌握 Web 开发能力，并且独立开发了学校的留言墙功能。</li>
        </ul>
    </div>
    <div>
        <h2>个人项目</h2>
        <ol>
            <li><h3>留言墙</h3></li>
            <p>开发时间: 2024年6月26日-2024年7月16日</p>
            <p>功能介绍: </p>
            <ul>
                <li>支持留言发布</li>
                <li>支持匿名发布</li>
            </ul>
        </ol>
        <ol>
            <li><h3>学习小助手</h3></li>
            <p>开发时间: 2024年7月16日-2024年7月26日</p>
            <p>功能介绍: </p>
            <ul>
                <li>错题查找</li>
                <li>支持同学讨论</li>
            </ul>
        </ol>
    </div>
    <div>
        <h2>个人评价</h2>
        <p>在校期间学习成绩优良, 获得奖学金, 竞赛中取得一定成绩</p>
    </div>
</body>
</html>

展示1

展示2

填写简历信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>填写简历</title>
</head>
<body>
    <table>
        <h3>填写简历信息</h3>
        <tr>
            <td>
                <label for="name">姓名</label>
            </td>
            <td>
                <input type="text" id="name">
            </td>
        </tr>
        <tr>
            <td>
                性别
            </td>
            <td>
                <input type="radio" name="sex" id="male">
                <label for="male">
                    <img src="male.png" id="male" width="18" height="18">男
                </label>
                <input type="radio" name="sex" id="female">
                <label for="female">
                    <img src="female.png" id="male" width="18" height="18">女
                </label>
            </td>
        </tr>
        <tr>
            <td>
                出生日期
            </td>
            <td>
                <select>
                    <option value="">请选择年份</option>
                    <option value="">2000</option>
                    <option value="">2001</option>
                    <option value="">2002</option>
                    <option value="">2003</option>
                    <option value="">2004</option>
                    <option value="">2005</option>
                    <option value="">2006</option>
                    <option value="">2007</option>
                    <option value="">2008</option>
                </select>
                <select>
                    <option>--请选择月份--</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                    <option value="">4</option>
                    <option value="">5</option>
                    <option value="">6</option>
                    <option value="">7</option>
                    <option value="">8</option>
                    <option value="">9</option>
                    <option value="">10</option>
                    <option value="">11</option>
                    <option value="">12</option>
                </select>
                <select>
                    <option>--请选择日期--</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                    <option value="">4</option>
                    <option value="">5</option>
                    <option value="">6</option>
                    <option value="">7</option>
                    <option value="">8</option>
                    <option value="">9</option>
                    <option value="">10</option>
                    <option value="">11</option>
                    <option value="">12</option>
                    <option value="">13</option>
                    <option value="">14</option>
                    <option value="">15</option>
                    <option value="">16</option>
                    <option value="">17</option>
                    <option value="">18</option>
                    <option value="">19</option>
                    <option value="">20</option>
                    <option value="">21</option>
                    <option value="">22</option>
                    <option value="">23</option>
                    <option value="">24</option>
                    <option value="">25</option>
                    <option value="">26</option>
                    <option value="">27</option>
                    <option value="">28</option>
                    <option value="">29</option>
                    <option value="">30</option>
                    <option value="">31</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <label for="school">就读学校</label>
            </td>
            <td>
                <input type="text" id="school">
            </td>
        </tr>
        <tr>
            <td>
                应聘岗位
            </td>
            <td>
                <input type="checkbox" id="qianduan">
                <label for="qianduan">前端开发</label>
                <input type="checkbox" id="houduan">
                <label for="houduan">后端开发</label>
                <input type="checkbox" id="test">
                <label for="test">测试开发</label>
                <input type="checkbox" id="yunwei">
                <label for="yunwei">运维开发</label>
            </td>
        </tr>
        <tr>
            <td>
                掌握的技能
            </td>
            <td>
                <textarea cols="30" rows="10"></textarea>
            </td>
        </tr>
        <tr>
            <td>
                项目经历
            </td>
            <td>
                <textarea cols="30" rows="10"></textarea>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox">我已仔细阅读过公司的招聘要求
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <a href="#">查看我的状态</a>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <h3>请应聘者确认：</h3>
                <ul>
                    <li>以上信息真实有效</li>
                    <li>能够尽早去公司实习</li>
                    <li>能接受公司的加班文化</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>