实例"/>
HTML学习日志以及实例
span标签：它是用来改变一句话中某个字的样式
div标签：相当于微信小程序中的块标签
br标签：换行符
 ：表示打出一个空格
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="/" class="text1" style="text-decoration:none;">    新闻</a>
<a href="/" class="text1" style="text-decoration:none;">    hao123</a>
<a href="/@12665449,4103636,13z" class="text1" style="text-decoration:none;">    地图</a>
<a href="/" class="text1" style="text-decoration:none;">    直播</a>
<a href="/?sfrom=baidu-top" class="text1" style="text-decoration:none;">    视频</a>
<a href=".html" class="text1" style="text-decoration:none;">    贴吧</a>
<a href="/" class="text1" style="text-decoration:none;">    学术</a>
<a href="/" class="text1" style="text-decoration:none;">    更多资讯</a>
<img class="p1" src="../BD.jpg"width="360px" height="100px"
>
</p>
<form action=""><input type="text" name="wd" class="in1"><input type="submit" class="in2" value="百度一下">
</form>
<p>  <br></p>
<p>  <br></p>
<p>  <br></p>
<p>  <br></p>
<p class="pp1">百度热搜</p>
<div class="kk1"><a href="=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>   #张雨霏夺得200米蝶泳冠军#</a><a href="=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>   北京新增一例新冠病例</a></div><div class="kk2"><a href="=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>   #中国女子4*200自由泳夺金#</a><a href="=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&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1" class="pp2" style="text-decoration:none"> <span class="tt2">5</span>   从南京到张家界 疫情为何失守</a></div>
<div class="kk2"><a href="=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>   打哭伊藤！孙颖莎.过瘾</a><a href="=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&hisfilter=1" class="pp2" style="text-decoration:none"> <span class="tt2">6</span>   中国提前锁定羽毛球混双金银牌</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)}
看效果
更多推荐
HTML学习日志以及实例
发布评论