html的简单学习

最新推荐文章于 2024-10-12 06:14:00 发布

Crazy1214

最新推荐文章于 2024-10-12 06:14:00 发布

阅读量141

点赞数

分类专栏：学生自学文章标签： html python

本文链接：https://blog.csdn.net/Crazy1214/article/details/99982061

版权

学生同时被 2 个专栏收录

10 篇文章 1 订阅

订阅专栏

自学

7 篇文章 0 订阅

订阅专栏

这个不属于我这个假期python的一部分，只是突然看到了，大概学习了一下，感觉自己后期也不会太用到，毕竟不是专业的计算机科班的，学习python是为了我自己专业的学习，这篇就介绍我学习的两个例子吧，一个是html的简单知识，一个是模仿百度界面写的一个html。
这是html的6个基本元素，整体就是这些构成的
1、注释：ctrl+/ 2、a:链接标签 3、img：图片展示 4、input：输入框 5、p：段落标签
6、div：块标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>我的第一个标题111</h1>
    <h2>我的第二个标题111</h2>
<a href="https://www.boxuegu.com/#teacher-team">a标签是一个链接标签，起着跳转的作用,到前面所输入的网址位置</a>
    <p></p>
    <img src="https://www.nwnu.edu.cn/_upload/tpl/00/b2/178/template178/htmlRes/nwnu.jpg">
<img width="100px" src="https://www.nwnu.edu.cn/_upload/tpl/00/b2/178/template178/htmlRes/nwnu.jpg">
<!--只需要调整一个形状参数，图形会自适应，避免变形-->

<!--输入框-->
<input type="text" placeholder="提示文字">
<input type="submit" value="登录">

<!--段落标签-->
<p>p标签也叫段落标签，在使用的时候，会独占一行，不会和其他标签凑在一起，而其他的标签是按照顺序进行排放的</p>
<h1>h1标签也会独占一行</h1>
<div>div本身没有什么效果，负责圈起来一块内容</div>
    <!--div设置的大小，还是一行的内容，不过大小和纯碎的p不一样-->
<div style="width: 100px;height: 100px;color: #00FF00">
    <p>一行内容一行内容一行内容一行内容一行内容一行内容一行内容一行内容</p>
</div>
</body>
</html>

以下这张图是在浏览器中实现的效果
在这里插入图片描述
然后，再来一个模仿百度的界面代码吧，这儿不仅仅用到html，而且涉及到cs，这个不怎么了解。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模仿百度</title>
</head>
<body style="margin:0;padding:0">
    <!--上面部分-->
    <div style="text-align:right;margin:21px 8px 50px 0px;font-siza:13px;font-weight:bold">
        <a href="#" style="color: #333; margin:0 7px">新闻</a>
        <a href="#" style="color: #333; margin:0 7px；text-decoration:none">hao123</a>
        <a href="#" style="color: #333; margin:0 7px；text-decoration:none">地图</a>
        <a href="#" style="color: #333; margin:0 7px；text-decoration:none">视频</a>
        <a href="#" style="color: #333; margin:0 7px；text-decoration:none;font-weight:normal">登录</a>
        <a href="#" style="color: #333; margin:0 7px；text-decoration:none;font-weight:normal">设置</a>
        <input type="button" style="background:#38f;padding:5px 5px;margin-left:5px;color:white" value="更多产品">
    </div>
    <!--主要部分-->
    <div style="width:655px;height:488px;margin:0 auto">
        <div style="text-align:center;margin-bottom:19px">
            <img src="https://www.baidu.com/img/bd_logo1.png" width="270px">
        </div>
        <div>
            <input type="text" style=" width:540px; height:32px；margin:0;padding:0；border:1px solid #BBB">
            <input type="button" value="百度一下" style="width:100px height:36px;background:#38f;color:white;padding:0;margin-left:-5px">
        </div>
    </div>
    <!--下面部分-->
    <div style="font-size:12px;text-align:center">
        <p>
            <a href="#" style="margin;0 6px;color:Blue">把百度设为首页</a>
            <a href="#" style="margin;0 6px;color:Blue">关于百度</a>
            <a href="#" style="margin;0 6px;color:Blue">About Baidu</a>
        </p>
        <p style="color:#666">
            ©2019 Baidu 使用百度前必读 意见反馈 京ICP证030173号  京公网安备11000002000001号
        </p>
    </div>
</body>
</html>

实现效果如下
在这里插入图片描述
这篇没啥好写头，有些水，需要学习，自己复制代码去研究吧。