part1: HTML-练习

Google 代码风格指南 也明确规定了不要关闭无内容标签。
React里面的元素必须关闭,这是否冲突!


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>创建元素</title>
</head>
<body>
    <!-- 
        使用一级标题h1元素展示诗歌标题,
    每句诗词,使用段落元素p展示
    每句诗词间的换行使用换行元素br实现
    -->
    <!-- 
        断章
        你站在桥上看风景,
        看风景的人在楼上看你。
        
        明月装饰了你的窗子,
        你装饰了别人的梦。
    -->

    <!-- 在下面编写代码 -->
    <h1>断章</h1>
    <p>
        你站在桥上看风景,<br>
        看风景的人在楼上看你。
    </p>
    <p>
        明月装饰了你的窗子,<br>
        你装饰了别人的梦。
    </p>
</body>
</html>

a元素设置邮件链接: 通过mailto:邮箱地址的格式。

<a href="mailto:emailName@foxmail.com”>发送邮件给我</a>

在新窗口中打开链接

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>创建链接</title>
</head>
<body>
    <!-- 
    创建一个链接,点击新窗口打开imweb官网,
    链接地址为”http://imweb.io/“
    链接文字为"IMWeb学院"
    -->
<a href="http://imweb.io/" target="_blank">IMWeb学院</a>
</body>
</html>

html标准的语义化表格


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>五险一金缴纳</title>
    <style type="text/css">
        table {
            width: 500px;
            border-spacing: 0;
            border-collapse: collapse;
        }
        td,
        th {
            border: 1px solid #ccc;
            padding: 5px 10px;
        }
        th {
            text-align: left;
        }
        caption {
            line-height: 50px;
        }
    </style>
</head>
<body>
    <table>
    <caption>五险一金缴纳</caption>
    <thead>
        <!-- 7行3列 -->
        <tr>
            <th>缴纳项目</th>
            <th>个人缴纳</th>
            <th>单位缴纳</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>养老</td>
            <td>8%</td>
            <td>14%</td>
        </tr>
        <tr>
            <td>医疗</td>
            <td>2%</td>
            <td>6.2%</td>
        </tr>
        <tr>
            <td>失业</td>
            <td>1%</td>
            <td>2%</td>
        </tr>
        <tr>
            <td>工伤</td>
            <td>0%</td>
            <td>0.4%</td>
        </tr>
        <tr>
            <td>生育</td>
            <td>0%</td>
            <td>0.5%</td>
        </tr>
        <tr>
            <td>公积金</td>
            <td>14%</td>
            <td>14%</td>
        </tr>
    </tbody>
</table>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,746评论 19 139
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,233评论 1 92
  • 如果不用离线下载,推荐NSURLSessionDownloadTask-delegate实现断点下载。它本身无法实...
    翻这个墙阅读 1,013评论 0 0
  • 我害怕, 我害怕看不见未来的路。 我害怕, 我害怕找不到人生的意义。 我害怕, 我害怕我在你身边,你却不知道我是谁...
    裸鲤阅读 213评论 2 2
  • 宝宝哭闹要喝水,麻麻一顿慌乱,把滚烫的开水洒到手上,痛的麻麻大声尖叫起来,爸爸淡定抱着哭闹的宝宝看了麻麻一眼“哦”...
    常大仙儿阅读 512评论 2 1

友情链接更多精彩内容