从零开始的C1认证：任务三：初探前端

最新推荐文章于 2024-09-27 09:48:47 发布

weixin_44584473

最新推荐文章于 2024-09-27 09:48:47 发布

阅读量354

点赞数

文章标签： HTML 段落表格按钮样式属性

本文链接：https://blog.csdn.net/weixin_44584473/article/details/115714121

版权

文章目录

前言
挑战
任务一
任务二
总结

前言

从零开始的C1系列，更新至任务3，让我们先来了解一下这回的挑战内容

挑战

你做过站长吗？（没做过~~）
你知道则怎样建设和维护属于自己的站点是一种什么样的体验吗？（不知道呀~~）
你开过网店吗？（没开过~~）
你知道琳琅满目的商品和那些经验又高大上的产品详情是怎样呈现在我们面前的吗？（不知道~~）
你在上网时是否发现有些网站禁止用户拷贝内容（或其他烦人的限制）呢？（这个倒是真的烦人~~）
以上所有这些，对于没学过WEB前端技术的小白来说，完全是个巨大的挑战！！！

任务一

我们首先打开Summernote中找到这次会用到的一些HTML标签,毕竟先实现需求才是最重要的

下面需要解决的内容是

1.文字的HTML标签及属性

如图所示：

<p><font color="#ff0000" style="background-color: rgb(255, 255, 255);">csdn能力认证中心</font></p>
这样我们就了解到了两个标签和一个HTML属性

标签	含义
`<p> </p>`	HTML中的一个段落
`<font></font>`	HTML5不支持，不赞成使用。定义文字的字体、尺寸和颜色。

属性	含义
`style=""`	规定元素的行内样式
`color=""`	HTML5 不支持。HTML 4.01 已废弃。规定文本的颜色。

我们会发现许多已经废弃，需要用样式来进行定义，因此此时应改为
<p><span style="color: red;">csdn能力认证中心</span></p>

2.表格的HTML标签及属性

<p>
    <span style="font-family: Helvetica;"><br></span>
</p>
<table class="table table-bordered">
<tbody>
<tr><td>C1</td><td>见习工程师认证</td></tr>
<tr><td>C4</td><td>专项工程师认证</td></tr>
<tr><td>C5</td><td>全栈工程师认证</td></tr>
</tbody>
</table>
<p>
    <span style="font-family: Helvetica;"></span>
</p>

这样我们就了解到另外的5个标签和一个HTML属性

标签	含义
`<br>`	换行
`<table>`	定义表格
`<tbody></tbody>`	定义表格的主体
`<tr></tr>`	定义表格的行
`<td></td>`	定义表格的单元

属性	含义
`class=""`	为html元素定义一个或多个类名（classname）(类名从样式文件引入)

3.按钮

<button type="button" onclick="alert('小哥，买苹果吗！')">点我一下试试，他们又不会打我！！！</button>

这样我们就了解到了按钮这个标签和里面的两个属性：

标签	含义
`<botton></botton>`	定义一个按钮

属性	含义
`type=""`	规定按钮的类型
`onclick=""`	当单击鼠标时运行脚本

4.实现任务一

代码如下：

    <!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>Document</title>
    </head>
    <body>
        <p >
        <span style="color: red;">CSDN能力认证中心</span>
        </p>
        <p>
            <span style="font-family: Helvetica;"><br></span>
        </p>
        <table style="border-collapse: collapse; border: 1px solid #0e0e0e;" border="1">
        <tbody>
        <tr style=" background-color: silver;"><td>C1</td><td>见习工程师认证</td></tr>
        <tr ><td>C4</td><td>专项工程师认证</td></tr>
        <tr style=" background-color: silver;"><td>C5</td><td>全栈工程师认证</td></tr>
        </tbody>
        </table>
        <p>
            <span style="font-family: Helvetica;"></span>
        </p>
        <button type="button" onclick="alert('小哥，买苹果吗！')">点我一下试试，他们又不会打我！！！</button>
    </body>
    </html>