python html基本构成(3.背景布置及页面优化)

最新推荐文章于 2024-03-18 09:49:45 发布
最新推荐文章于 2024-03-18 09:49:45 发布
阅读量531 收藏 1
点赞数 1
分类专栏： 笔记 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZENGshuihai/article/details/125358587
版权

一.html基本总结:

html网页的总结:
  基本架构:
    <!doctype html>                                                                     #声明文档类型
    <html lang="en">                                                                    #网页整体
    <head>                                                                              #网页头部元素
        <meta charset="UTF-8">                                                          #网页编码格式
        <meta name="viewport"                                                           #移动端优先,视口设置
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>                                                         #网页命名
        #css外接样式引用:
        <link rel="stylesheet"  href="引用的css文件">                                   #设计浏览页面的显示;
        #内接样式,在本地网页设计:
        <style type="text/css">
        #标签设置:
        h1~h6(p、img、a、span、ul、li、ol、dl、div）{
        *****；
        }
        #类名设置：
        .class{
        *****;
        }
        #id设置:
        #id名{
        ***;
        }
        
        </style>
        
    </head>
    <body>                                                                              #网页显示浏览内容;
    <div>
    
    <h1></h1>
    
    <p>
    <a href="">
    <img src="">
    </a>
    </p>
    
    <ul> 
    <li></li>
    </ul>
    
    </div>
    </body>
    </html>
    示例:
        <!doctype html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport"
                  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Document</title>
            <style type="text/css">
                h3{
                color:red;
                }
                p{
                color:green;
                }
                a{
                font-size:18px;
                type:strong;
                color:purple;
                }
                img{
                width:100px;
                height:200px;
                }
                span{
                color:orange;
                }
                ul{
                color:red;
                }
                li{
                color:green;
                }
                ol{
                color:orange;
                }
                dl{
                color:purple;
                }
                div{
                width:100px;
                height:100px;
                background-color:red;
                }
                .box1{
                width:100px;
                height:100px;
                background-color:green;
                color:orange;
                }
                #p1{
                color:red;
                }
            </style>
        </head>
        <body>
            <h3>你好</h3>
            <p>hello</p>
            <p id="p1">hello</p>
            <a>baidu一下</a>
            <img src="./图片 (100).jpg" alt="渲染图片">
            <span>设计</span>
            <ul>网页列表
                <li>网页列表</li>
            </ul>
            <ol>网页列表</ol>
            <dl>网页列表</dl>
            <div class="box">分割页面</div>
            <div class="box1">分割页面</div>

        </body>
        </html>
  页面背景设置:
    
                    <span class="icon-fire" style="display: none;"></span>
                    <input id="toolbar-search-input" autocomplete="off" type="text" value="" placeholder="线程与进程的区别" style="text-indent: 12px;">
                    <button id="toolbar-search-button"><i></i><span>搜索</span></button>
                    <input type="password" autocomplete="new-password" readonly="" disabled="true" style="display: none; position:absolute;left:-9999999px;width:0;height:0;">

二.示例:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 页面设计</title>
    <link rel="stylesheet" href="./HTML index.css">
    <style type="text/css">

    </style>
</head>
<body>
<div class="top"></div>
<div class="top-bar">
    <div class="top-left">
        <span id="left-0"><img title="蜗牛家" src="./素材图/90.jpg" width="100px" height="30px"></span>
        <ul class="left">
            <li class="left-1">
                <a href="JavaScript:void(0);">华夏栖息港</a>
                <div class="children">
                    <ul class="sublist">
                        <li class="l1">
                            <a href="JavaScript:void(0);">何为人</a>
                        </li>
                        <li class="l2">
                            <a href="JavaScript:void(0);">何为华夏</a>
                        </li>
                        <li class="l3">
                            <a href="JavaScript:void(0);">学古今用</a>
                        </li>
                    </ul>
                </div>
            </li>

            <li class="left-2"><a href="JavaScript:void(0);">立德</a>
            <div class="children-1">
                    <ul class="sublist-1">
                        <li class="l1-1">
                            <a href="JavaScript:void(0);">什么是立德</a>
                            <p>
                                <span><strong>&nbsp;《左传》：太上有立德，其次有立功，其次有立言，虽久不废，此之谓不朽。</strong></span>
                                <br>
                                <strong>&nbsp;&nbsp;立德:</strong><br>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                建立一个恩泽子孙后代,可以让子孙后代模仿、承袭的生存方法、法则,比如:人伦制度、药石裹腹、保民安家.
                            </p>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="left-3"><a href="JavaScript:void(0);">立功</a>
            <div class="children-2">
                    <ul class="sublist-2">
                        <li class="l1-2">
                            <a href="JavaScript:void(0);">什么是立功</a>
                            <p>
                                <span><strong>&nbsp;《左传》：太上有立德，其次有立功，其次有立言，虽久不废，此之谓不朽。</strong></span>
                                <br>
                                <strong>&nbsp;&nbsp;立功:</strong><br>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;功业,民积累家业恩泽后代,官稳定社会、沥青吏治,诸侯开荒拓地,
                                帝王统御域内、让民富国强,调节阴阳.
                            </p>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="left-4"><a href="JavaScript:void(0);">立言</a>
              <div class="children-3">
                    <ul class="sublist-3">
                        <li class="l1-3">
                            <a href="JavaScript:void(0);">什么是立言</a>
                            <p>
                                <span><strong>&nbsp;《左传》：太上有立德，其次有立功，其次有立言，虽久不废，此之谓不朽。</strong></span>
                                <br>
                                <strong>&nbsp;&nbsp;立言:</strong><br>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;著书立说、一家见解,在不同领域形成自己的技术、学说、生存规则.
                            </p>
                        </li>
                    </ul>
                </div>
            </li>
            <li id="left-5"><a href="JavaScript:void(0);">社区</a>

            </li>
            <li id="left-6"><a href="JavaScript:void(0);">留言板</a></li>
            <li id="left-7"><a href="JavaScript:void(0);">服务</a></li>
        </ul>

    </div>
    <div class="top-right">
        <div class="right">
            <div id="right-1"><a href="JavaScript:void(0);">编写</a></div>
            <div id="right-2"><a href="JavaScript:void(0);">动态</a></div>
            <div id="right-3"><a href="JavaScript:void(0);">历史记录</a></div>
            <div id="right-4"><a href="JavaScript:void(0);">备注</a></div>
            <form action="https://www.baidu.com/s"  target="_blank">
                <input  id="r-1" type="text" style="text-indent:12px;" name="wd" value="" placeholder="请输入搜索的命令">
                <input  id="r-2" type="submit" value="百度一下">
            </form>
        </div>
    </div>
</div>
<div class="container">
    <div class="container-left">
        <h4 class="cl">项目导航</h4>
        <ul class="cl-top">
        <li id="cl-1" title="冒雨前行的博客">
            <a href="https://blog.csdn.net/ZENGshuihai?spm=1001.2101.3001.5343">CSDN 博客</a>
        </li>
        <li id="cl-2" title="简书">
            <a href="https://www.jianshu.com/u/14d80253ada2">简书</a>
        </li>
        <li id="cl-3" title="太阳的耀斑">
            <a href="https://www.toutiao.com/c/user/token/MS4wLjABAAAAfE06VwHK_jL4bIfpU5YOir-ddr4uRo6Frk7BM7k0tQ0/?
            source=mine_home&log_from=180f27d974643_1654901756295" >今日头条</a>
        </li>
        <li id="cl-4" title="稀土掘金">
            <a href="https://juejin.cn/post/6880323150312112135">稀土掘金</a>
        </li>
        <li id="cl-5">
            <a href="http://drops.2xss.cc/#!/" title="Wooyun Drops">Wooyun Drops</a>
        </li>
        </ul>
    </div>
    <div class="container-right">
        <h4 class="cr">展示栏</h4>
        <ul class="cr-top">
            <li id="cr-1">
                <a href="JavaScript:void(0);">年度十大风景图</a>
                    <ul class="sublist-cr">
                        <li class="c1">
                            <a id="a1" href="http://img.ewebweb.com/uploads/20190506/14/1557123090-iNGphydnPr.jpeg">锦绣河山</a>
                        </li>
                        <li class="c2">
                            <a id="a2" href="http://seopic.699pic.com/photo/50064/7115.jpg_wh1200.jpg">山河壮丽
                            </a>
                        </li>
                        <li class="c3">
                            <a id="a3" href="https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/05/ChMkJlbKydeIHFTTAATXJ9y8LSUAALITQIfsIsABNc_865.jpg;">秀丽山河
                            </a>
                        </li>
                        <li class="c4">
                            <a id="a4" href="http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/01/ChMkJlbKxSyIHfPeAAX2uSD8IFkAALHSAA1wS0ABfbR943.jpg">锦绣山川
                            </a>
                        </li>
                        <li class="c5">
                            <a id="a5" href="https://img.phb123.com/uploads/allimg/151104/7-151104111554.jpg">明媚阳光
                            </a>
                        </li>
                        <li class="c6">
                            <a id="a6" href="https://mingtu-cover-1305179485.cos.ap-guangzhou.myqcloud.com/cover/bd0a5c0c-d27d-4a20-821b-efa94ac4fc19.jpg">涓涓流水
                            </a>
                        </li>
                        <li class="c7">
                            <a id="a7" href="http://www.pp3.cn/uploads/allimg/200826/14-200R6091643.jpg">填仓丰收
                            </a>
                        </li>
                        <li class="c8">
                            <a id="a8" href="http://img.ewebweb.com/uploads/20191006/18/1570356842-BdnXQjIMGA.jpg;">学古今用
                            </a>
                        </li>
                        <li class="c9">
                            <a id="a9" href="https://www.yulumi.cn/gl/uploads/allimg/201128/1622555P9-7.jpg">白雪皑皑
                            </a>
                        </li>
                        <li class="c10">
                            <a id="a10" href="https://img.zcool.cn/community/012dd25c4ddd9ca801213f26d4a634.jpg@1280w_1l_2o_100sh.jpg">收工回家
                            </a>
                        </li>
                    </ul>
            </li>
            <li id="cr-2">
                <a href="JavaScript:void(0);">年度十大动漫</a>
            </li>
            <li id="cr-3">
                <a href="JavaScript:void(0);">年度十代影视</a>
            </li>
            <li id="cr-4">
                <a href="JavaScript:void(0);">十大纪年电视剧</a>
            </li>
            <li id="cr-5">
                <a href="JavaScript:void(0);">资源网</a>
            </li>
            <li id="cr-6">
                <a href="JavaScript:void(0);">评论栏</a>
            </li>

        </ul>
    </div>

</div>
 <div class="container-foot">
        <ul class="cf">
            <li id="f-1">
                <a href="JavaScript:void(0);">初春<img src="./素材图/RC.jpg" alt="春天来了" width="320px" height="150px">
                </a>
            </li>
            <li id="f-2">
                <a href="JavaScript:void(0);">盛夏<img src="./素材图/1dfcf30.png" alt="躺着舒服"  width="320px" height="150px"></a>
            </li>
            <li id="f-3">
                <a href="JavaScript:void(0);">硕秋<img src="./素材图/75b535.jpg" alt="锁果累累"   width="320px" height="150px"></a>
            </li>
            <li id="f-4">
                <a href="JavaScript:void(0);">眠冬<img src="./素材图/201382.jpg" alt="银装上阵"   width="320px" height="150px"></a>
            </li>
        </ul>
    </div>
<div class="bottom">
        <h5>附属栏</h5>
        <ul class="b-top">
            <li id="b-1">
                <a href="JavaScript:void(0);">构建网页</a>
            </li>
            <li id="b-2">
                <a href="JavaScript:void(0);">知识汇总</a>
            </li>
            <li id="b-3">
                <a href="JavaScript:void(0);">学习规划</a>
            </li>
            <li id="b-4">
                <a href="JavaScript:void(0);">构择业目标</a>
            </li>
            <li id="b-5">
                <a href="JavaScript:void(0);">就业实例</a>
            </li>
            <li id="b-6">
                <a href="JavaScript:void(0);">补充</a>
            </li>
        </ul>
    </div>

</body>
</html>

三.效果:
在这里插入图片描述

冒雨前行的蜗牛
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
chatgpt赋能python：Python如何设置背景图片
qq_45562973的博客
06-17 956
本文由chatgpt生成，文章没有在chatgpt生成的基础上进行任何的修改。以上只是chatgpt能力的冰山一角。作为通用的Aigc大模型，只是展现它原本的实力。对于颠覆工作方式的ChatGPT，应该选择拥抱而不是抗拒，未来属于“会用”AI的人。🧡AI职场汇报智能办公文案写作效率提升教程 🧡专注于AI+职场+办公方向。下图是课程的整体大纲下图是AI职场汇报智能办公文案写作效率提升教程中用到的ai工具。
html css的参考文献,网页制作论文参考文献大全 网页制作参考文献有哪些
weixin_26937243的博客
06-18 6686
【100个】关于网页制作论文参考文献大全汇总,作为大学生的毕业生应该明白了网页制作参考文献有哪些,收集好参考文献后的网页制作论文写作起来会更轻松！一、网页制作论文参考文献范文[1]开展电脑社团活动培养学生信息素养——中学生网页制作社团活动报告.童宇阳，2009第九届中国教育信息化创新与发展论坛[2]项目教学法在《网页制作基础》课程中的应用.胡永刚，20072007无锡职教教师论坛[3]基于SVG的...
通过Python实现一个简单的html页面
09-16
主要介绍了通过Python写一个简单的html页面,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
使用pycharm+flask创建一个html网页
03-25
使用pycharm+flask创建一个html网页
Python + Html 实现文件快速访问
11-28
使用 python pyqt5 以及 Html 设计界面，利用 python 与 html 交互的技术实现个人电脑资源管理的程序，能够自定义快速访问的程序和文件夹。
pycharm主题.jar
11-12
pycharm第三方主题
PYTHON和html页面
04-02
python技术PDF介绍。成品网页介绍。python技术PDF介绍。成品网页介绍。python技术PDF介绍。成品网页介绍。
HTMLBeautify - 让你的HTML代码更加整洁美观
最新发布
gitblog_00004的博客
03-18 474
HTMLBeautify - 让你的HTML代码更加整洁美观 项目简介 HTMLBeautify 是一个在线工具，可以帮助你快速整理并美化你的HTML代码，让其更易读、易懂。通过简洁的操作界面和强大的功能，你可以轻松地对HTML代码进行缩进、排序、注释等操作。 功能特性 自动缩进：HTMLBeautify可以根据你的选择进行智能缩进，使得代码层次清晰。 标签排序：它会按照一定的顺序重新排列你的H...
使用Python进行网站页面开发——HTML
热门推荐
weixin_63994459的博客
07-13 1万+
目录一、HTML基础语法1.HTML是什么？2.HTML基本结构3.HTML注释二、HTML常用标签介绍1.文本标签2.格式化标签3.图片标签4.超级链接标签5.表格标签（用来显示数据）6.表单标签（用来接收数据）7.行内框架标签8.多媒体标签●HTML是HyperText Mark-up Language的首字母简写，即超文本标记语言。 ●HTML不是一种编程语言，而是一种标记语言。 ●超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成。 ●用这种语言制作的文件保存的
＜body＞标签以及界面设置
zcjh_的博客
10-24 1795
1.超链接改变颜色（这个属性只能放在body上） 一般形式 <body text(可替换)="颜色"> link——超链接文本的颜色（显示超链接时的颜色） vlink——访问过后链接文本的颜色（点击后的颜色） alink——激活链接时文本的颜色(相当于点击链接时的颜色) 2.页面设置 1.文本颜色 <body text="颜色"> 2.文本字体 font标签（持续补充...）（一个font后面可以并列多个） ①<fontsize="数值"&gt...
Python语言实现将图片转化为html页面
09-21
Python语言实现将图片转化为HTML页面是一项常见的图像处理任务，它涉及到Python的图像处理库PIL（Python Imaging Library）以及网络访问模块。PIL是Python的标准图像处理库，但已不再支持Python3，取而代之的是...
python3中HTMLTestRunner.py下载
01-12
将下载后的文件放在python目录Lib文件夹下即可使用
Python游戏开发笔记3.md
08-30
然后讲解了优化游戏性能的技巧以及使用Pyinstaller工具将Python游戏打包成exe文件的方法。最后以贪吃蛇游戏作为案例,阐述了游戏规则和设计思路,并给出了实现蛇移动、吃食物、碰撞检测等功能的详细代码示例。整个课程...
python-2.7.5-90.el7.x86_64.rpm
02-25
python-2.7.5-90.el7.x86_64.rpm
Anaconda-python3.7-Win64.rar
01-10
这就是清华镜像的python3.7的版本 原名：Anaconda3-5.3.1-Windows-x86_64.exe
用Python解析HTML页面
No_Name_Cao_Ni_Mei的博客
10-20 480
下面我们对三种解析方式做一个简单比较。解析方式对应的模块速度使用难度正则表达式解析re快困难XPath 解析lxml快一般CSS 选择器解析bs4或pyquery不确定简单。
pycharm indent rainbow插件
简单记录生活、学习
01-06 736
前两位为4D，后面4位为RGB颜色表中的字。
Pyhton 使用浏览器打开本地 html（打开指定页面、新建标签栏 ....）
卡尔特斯
08-09 2207
【代码】Pyhton 使用浏览器打开本地 html（打开指定页面、新建标签栏 ....）
PyCharm 设置背景图片
weixin_45743799的博客
05-04 2327
好看的编译器能使我们愉快的完成编码工作，那么我们能不能给我们的编译器设置一个背景图片的呢？？？ 详细步骤 1 . 打开我们的PyCharm, File --> Settings。 2 . Apperence --> Background Image …。 3 . 选择背景图片的路径，点击下方灰色的方块调整背景图片透明度，点击Ok, 点击Ok。 4 . 设置成功。 ...
python2020.3.7安装包
07-04
3. 在Python 2020.3.7的下载页面中，我们可以看到不同操作系统的安装包。根据你的操作系统，选择相应的安装包进行下载。例如，如果你是Windows用户，选择Windows Installer安装包进行下载。 4. 下载完安装包后，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值