HTML学习日志以及实例

最新推荐文章于 2023-09-06 10:27:33 发布

阿飞不修电脑

最新推荐文章于 2023-09-06 10:27:33 发布

阅读量236

点赞数

分类专栏： HTML 文章标签： html5 python

本文链接：https://blog.csdn.net/qq_53481873/article/details/119210288

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

span标签：它是用来改变一句话中某个字的样式
div标签：相当于微信小程序中的块标签
br标签：换行符
&nbsp：表示打出一个空格
p标签：表示一个段落
a标签：表示超链接标志，style="text-decoration:none"可用于去除超链接下面的横线
table标签：表单
另外table还可以调用一下标签：tr表示行标签；td表示列标签；th表示表单头部标签
以上知识在以下代码中应用
HTML


<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="../csssss.css" rel="stylesheet" type="text/css">
    <title>My_info</title>
</head>
<body>
<p class="text2">
<a href="http://news.baidu.com/" class="text1" style="text-decoration:none;">&nbsp&nbsp&nbsp 新闻</a>
<a href="https://www.hao123.com/" class="text1" style="text-decoration:none;">&nbsp&nbsp&nbsp hao123</a>
<a href="https://map.baidu.com/@12665449,4103636,13z" class="text1" style="text-decoration:none;">&nbsp&nbsp&nbsp 地图</a>
<a href="https://live.baidu.com/" class="text1" style="text-decoration:none;">&nbsp&nbsp&nbsp 直播</a>
<a href="https://haokan.baidu.com/?sfrom=baidu-top" class="text1" style="text-decoration:none;">&nbsp&nbsp&nbsp 视频</a>
<a href="https://tieba.baidu.com/index.html" class="text1" style="text-decoration:none;">&nbsp&nbsp&nbsp 贴吧</a>
<a href="https://xueshu.baidu.com/" class="text1" style="text-decoration:none;">&nbsp&nbsp&nbsp 学术</a>
<a href="https://www.baidu.com/more/" class="text1" style="text-decoration:none;">&nbsp&nbsp&nbsp 更多资讯</a>
<img class="p1" src="../BD.jpg"
     width="360px" height="100px"
>
</p>
<form action="https://www.baidu.com/s">
  <input type="text" name="wd" class="in1"><input type="submit" class="in2" value="百度一下">
</form>
<p>&nbsp <br></p>
<p>&nbsp <br></p>
<p>&nbsp <br></p>
<p>&nbsp <br></p>
<p class="pp1">百度热搜</p>
<div class="kk1">

<a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%23%E5%BC%A0%E9%9B%A8%E
9%9C%8F%E5%A4%BA%E5%BE%97200%E7%B1%B3%E8%9D%B6%E6%B
3%B3%E5%86%A0%E5%86%9B%23&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1" class="pp1" style="text-decoration:none"> <span class="tt1">1</span> &nbsp #张雨霏夺得200米蝶泳冠军#</a>
    <a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%23%E5%BC%A0%E9%9B%A8%E
9%9C%8F%E5%A4%BA%E5%BE%97200%E7%B1%B3%E8%9D%B6%E6%B
3%B3%E5%86%A0%E5%86%9B%23&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1" class="pp2" style="text-decoration:none"> <span class="tt2">4</span> &nbsp 北京新增一例新冠病例</a>

    </div>

<div class="kk2">

<a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%23%E4%B8%AD%E5%9B%BD%E5%A5%
B3%E5%AD%904x200%E8%87%AA%E7%94%B1%E6%B3%B3%E5%A4%BA%E9%87%91%23&rsv_idx=2&rsv_dl=fyb_n_homepage
&hisfilter=1" class="pp1" style="text-decoration:none"> <span class="tt1">2</span> &nbsp #中国女子4*200自由泳夺金#</a>
    <a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E4%BB%8E%E5%8D%97%E4%BA%AC%E5%88%B0%E5%BC
    %A0%E5%AE%B6%E7%95%8C+%E7%96%AB%E6%83%85%E4%BC%A0%E6%92%AD%E4%B8%BA%E4%BD%95%E5%A4%B1%E5%AE%88&r
    sv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1" class="pp2" style="text-decoration:none"> <span class="tt2">5</span> &nbsp 从南京到张家界&nbsp疫情为何失守</a>

    </div>
<div class="kk2">

<a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E6%89%93%E5%93%AD%E4%BC%8A%E8%97%A4%21%E5%AD%99%E9
%A2%96%E8%8E%8E%3A%E8%BF%87%E7%98%BE&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1"
   class="pp1" style="text-decoration:none"> <span class="tt1">3</span> &nbsp 打哭伊藤！孙颖莎.过瘾</a>
    <a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E4%B8%AD%E5%9B%BD%E6%8F%90%E5%89%8D%E9%94%81%E5%AE%9A%E7
    %BE%BD%E6%AF%9B%E7%90%83%E6%B7%B7%E5%8F%8C%E9%87%91%E9%93%B6%E7%89%8C&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfi
    lter=1" class="pp2" style="text-decoration:none"> <span class="tt2">6</span> &nbsp 中国提前锁定羽毛球混双金银牌</a>
    </div>
</body>
</html>

CSS

.p1{margin-left:200px;margin-top: 60px}
.in1{margin-left: 400px;width: 600px;height: 35px;border-radius: 10px}
.in2{height: 35px;width: 100;border-radius: 10px;background-color: rgb(78,110,242);color: aliceblue}
.text1{font-size: 10px;margin-top: 0px;}
.text2{display: flex}
.pp1{margin-left: 400px;width: 260px}
.pp2{margin-left: 200px}
.kk1{display: flex}
.kk2{display: flex;margin-top: 10px}
.tt1{color: rgb(254,45,70)}
.tt2{color: rgb(145,149,163)}

看效果
在这里插入图片描述