day14_html和css

最新推荐文章于 2024-04-16 08:28:02 发布

Ali--

最新推荐文章于 2024-04-16 08:28:02 发布

阅读量248

点赞数

分类专栏： python_web前端

本文链接：https://blog.csdn.net/liyanan8514/article/details/79478604

版权

python_web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Html的本质以及在Web程序中的作用

概述

众所周知，对于所有的Web应用，本质上其实就是一个socket服务端，用户的浏览器其实就是一个socket客户端。

import socket

def handle_request(client):
    buf = client.recv(1024)
    client.send("HTTP/1.1 200 OK\r\n\r\n".encode())
    client.send("<h1>Hello,123</h1>".encode())

def main():
    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind(('localhost',8000))
    sock.listen(5)

    while True:
        connection, address = sock.accept()
        handle_request(connection)
        connection.close()
if __name__ == '__main__':
    main()

上述通过socket来实现了其本质，而对于真实开发中的python web程序来说，一般会分为两部分：服务器程序和应用程序。服务器程序负责对socket服务器进行封装，并在请求到来时，对请求的各种数据进行整理。应用程序则负责具体的逻辑处理。为了方便应用程序的开发，就出现了众多的Web框架，例如：Django、Flask、web.py 等。不同的框架有不同的开发方式，但是无论如何，开发出的应用程序都要和服务器程序配合，才能为用户提供服务。这样，服务器程序就需要为不同的框架提供不同的支持。这样混乱的局面无论对于服务器还是框架，都是不好的。对服务器来说，需要支持各种不同框架，对框架来说，只有支持它的服务器才能被开发出的应用使用。这时候，标准化就变得尤为重要。我们可以设立一个标准，只要服务器程序支持这个标准，框架也支持这个标准，那么他们就可以配合使用。一旦标准确定，双方各自实现。这样，服务器可以支持更多支持标准的框架，框架也可以使用更多支持标准的服务器。

HTML的本质

一、一套规则、浏览器认识的规则
二、开发者：
1、学习html的规则
2、开发后台程序：
写html文件(充当模板的作用) *
数据库获取数据，然后替换到html文件的指定位置(WEB框架
3、本地测试
找到文件路径，直接浏览器打开
pycharm打开测试
如果pycharm打开显示不出你想要的效果，试试第一种方式打开
4、编写html文件
doctype 对应关系
html标签，标签内部可以写属性
注释

HTML说明

1、标签都是成对出现，一对称为一个标签

<!DOCTYPE html>
<html lang="en">  <!--html标签,是成对出现的<html>标签内容</html> lang="en"是标签内部的属性-->
<head>
    <meta charset="UTF-8">
    <title>百度网站</title>
</head>
<body>   <!--body标签-->
    <a href="http://www.baidu.com">百度一下</a> <!--a标签-->
</body>
</html>

2 注释

<!DOCTYPE html>
<!--html标签,是成对出现的<html>标签内容</html>
lang="en"是标签内部的属性-->  #多行注释
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度网站</title>
</head>
<body>
    <a href="http://www.baidu.com">百度一下</a>  <!--a标签--> #单行注释
</body>
</html>

Html的Head内标签

之前我们学习html的本质，今天我们就来学习一下html的head信息，其实这个head标签的部分就相当于人的大脑，除了title之外，所有的标签都是看不到，所以我们今天我们就来仔细研究一下这个html的大脑部分，head标签的东西。

标签分类

1、自闭和标签

说明：只有开头没有结尾的，是自动闭合的，所以称为自闭合标签，自闭合标签就那么几个，记住就好

<meta> 标签
<link> 标签

2、主动闭合标签

说明：有开头也有结尾，是主动闭合的，称为主动闭合标签，我们用到的大部分都是主动闭合标签

<title>123</title>
<style></style>
<script></script>

注：自闭和的标签，pycharm没有提示结束符，主动闭合的是有提示主动闭合的

head内标签

1、Meta(metadata information)

提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键字
1.1、页面编码(告诉浏览器是什么编码)

<meta charset="UTF-8">  #pycharm的写法，一般默认这个就可以了

<meta http-equiv="content-type" content="text/html;charset=utf-8"> #第二种写法

1.2、刷新和跳转

<meta http-equiv="Refresh" Content="3">  #网站每3秒刷新一次
<meta http-equiv="Refresh" Content="3; Url=http://www.oldboyedu.com" /> #网站过三秒跳转到另外一个网页

1.3、关键字
说明：在百度网上搜到什么关键字，做搜素引擎的，关键字搜索

<meta name="keywords" content="python" >

1.4、描述

说明：描述你的网站是干嘛的

<meta name="description" content="学习Python" />

1.5、X-UA-Compatible
微软的IE6是通过XP、win2003等操作系统发布出来，作为占统治地位的桌面系统，也使得IE占据了统治地位，许多网站开发的时候，就按照IE6的标准去开发，而IE6自身的标准也是微软公司内部定义的。到了IE7出来的时候，采用了微软公司内部标准以及部分W3C的标准，这个时候许多网站升级到IE7的时候，就比较痛苦，很多代码调整后，才能够正常运行。而到了微软的IE8这个版本，基本上把微软内部自己定义的标准都抛弃了，而全面的支持W3C的标准，由于基于对标准彻底的变化了，使得原先在IE版本上能够访问的网站，在IE8中无法正常的访问，会出现一些排版的错误、文字重叠、显示不全等各种兼容性错误。

与任何早期浏览器版本相比，IE8对行业标准提供了更加紧密的支持。因此，针对旧版本的浏览器设计的站点可能不会按预期显示。为了帮助减轻任何问题，IE8 引入了文档兼容性的概念，从而允许您指定站点所有支持IE的版本。文档兼容性在IE8中添加新的模式，这些模式将告诉浏览器如何解释和呈现网站。如果您的站点在IE8中无法中无法正确的显示，则可以更新改站点以支持最新的WEB的标准(首选方式)，也可以强制IE8按照就版本的浏览器中查看站点方式来显示内容。通过使用meta 元素将X-UA-Compatible 标头添加到网页中，可以实现这一点。

当IE8 遇到未包含X-UA-Compatible 标头的网页时，它将使用指令来确定如何显示网页。如果该指令丢失或未指定基于标准的文档类型，则IE8将以IE5模式（Quicks模式）显示该网页。

<meta http-equiv="X-UA-COMPATIBLE" content="IE=IE9;IE=IE8" /> #按照这种方式先找IE9，再找IE8...

2、Title

网页的头部信息

<title>python学习网</title>

这里写图片描述

3、Link

3.1、css
说明：加载css样式文件

<head>
    <meta charset="UTF-8">
    <title>python学习网</title>
    <link rel="stylesheet" type="text/css" href="css/common.css"> #加载css样式文件
</head>

3.2、icon
说明：在标题前加图标，这边要强调的是，添加的图片的位置image文件夹要跟index.html在同一层目录下。

<head>
    <meta charset="UTF-8">
    <title>python学习网</title>
    <link rel="shortcut icon" href="image/favicon.ico">  #在标题前加图标，rel的内容不能乱改变，就是叫这个名字
</head>

4、Style

在页面中写样式

<head>
    <meta charset="UTF-8">
    <title>123</title>
    <style type="text/css">   #定义css样式
        .bb{
            background: red;  #定义背景色为红色
        }
    </style>
</head>

5、Script

5.1、引进js文件

<script type="text/javascript" src="http://www.baidu.com/tag/js/gpt.js"></script>

5.2、写js代码

<script type="text/javascript">....js代码</script>

Html的body内标签之图标、换行以及其他

我们学完了head标签中的内容，现在我们学习body标签中的一些标签

各种符号

在标签内使用符号

<body>
    <a href="http://www.baidu.com">1&nbsp;&nbsp;&lt;a&gt;2</a>
</body>

ps:在网上能找到很多特殊符号对照表。

p和br

1、p标签

作用：p标签表示段落，默认段落之之间是有间隔的

<body>
     <p>asdf</p>
     <p>asdf</p>
     <p>asdf</p>
</body>

这里写图片描述

2、br标签

作用：换行，这边br标签是自闭合标签，可以直接写br，也可以写成br /，但是最好写成后面一种形式，这样就知道这是自闭合标签，不然搞混淆了

<body>
    <p>as<br/>df</p>  #br标签是换行的
</body>

其他标签

1、h标签

作用：标题标签，h1~h6，字体大小和粗细从大到小

<body>
    <h1>我高兴</h1>
    <h2>我高兴</h2>
    <h3>我高兴</h3>
    <h4>我高兴</h4>
    <h5>我高兴</h5>
    <h6>我高兴</h6>
</body>

这里写图片描述

2、span标签

作用：白板标签，自身什么特性都不带

<body>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
</body>

这里写图片描述
问：为什么会出现这么一个白板标签呢？
答：因为我们以后学css的时候，就可以把这个白板转换自己想要的，因为白板自己想画什么就是什么，学了css之后，可以把白板标签变成任何一个标准。

标签分类

到目前为止，我们把所有标签分为两类：
1、块级标签：H系列标签(默认加大加粗)、p标签(段落与段落之间有间距)
2、行内标签(内联标签)：span(白板)
问：块级标签和行内标签区别是什么？
答：块级标签：只要我写上这么一个标签，即使它的内容特别少，它也把整行都给占了
　　行内标签：你自己有多少内容，就占多少地方

chrome查看html样式基本操作

今天我们就来说说，div标签，标签之前的嵌套，标签存在的意义，以及如何使用chrome浏览器查看元素的使用

div标签

div标签是块级标签，也是属于一个白板标签

<body>
    <div>python</div>
    <div>python</div>
    <div>python</div>
</body>

这里写图片描述
很明显，div属于块级标签，一个div占了一整行。

标签之间嵌套

之前我们都是单行标签，没有做嵌套，其实标签之间是可以作嵌套，通过各种嵌套达到自己想要的效果

<body>
    <div>
        <div>
            <span>dwqjdq</span>   #嵌套span标签
        </div>
    </div>
    <div>
        <p>csdiqwjbdj</p>   #div下嵌套了p标签
    </div>
</body>

问：那标签存在的意义是什么？
答：页面的动态效果出来以后，要对页面上的某个文本进行css和js的操作，标签里面可以写属性，方便我们进行css和js的后期操作。

chrome查看html样式

1、右击选择检查

这里写图片描述

2、定位页面上的某个标签

这里写图片描述

3、查看是块级标签还是行内标签

这里写图片描述

4、查看标签样式

这里写图片描述

Html的body内标签之input系列

我们在页面的使用中经常会遇到登录界面，今天我们就来看看登录界面需要哪些标签，这些标签该如何使用，使用最多的是input标签

input标签

1、input标签类型

说明：input标签是一个自闭和标签，所以在标签最后面最好加上 /，写法也就是input /。

<body>
    <input type="text"/>   #文本input标签
    <input type="password"/> #密码类型的input标签
    <input type="button" value="登录1"/>  #按钮类型的
    <input type="submit" value="登录2"/>   #提交类型的
</body>

这里写图片描述
这边不禁的要问，我这边这样搞也没有办法提交啊，我想要提交数据到后台咋办呐？

2、form表单提交

作用：form标签配合action属性，告诉你提交的数据到哪里。

<body>
    <form action="http:www.baidu.com" method="get">
        <input type="text" name="username"/><br />   #input标签需要加上name这个属性
        <input type="password" name="pwd"/><br />
        <input type="button" value="登录1"/>
        <input type="submit" value="登录2"/> #提交表单，只能type="submit"类型的input标签

    </form>
</body>

form表单中属性的功能：
1、action：指定你需要发送的后台的url
2、method：你提交的表单需要用到什么方法，这边有POST和GET，如果不写method方法，默认请求是get请求
注意：
　　对于一个input标签，如果想向后台提交数据的时候，input标签一定要加上name这个属性，当你点击submit哪个登录按钮的时候，在html里面就会把你输入的数据做一个打包，把包打成一个类似于字典类型的数据类型，
{“user_name”:”li”,”pwd”:”0808”}，然后再提交到后台，我就能拿到这个数据，然后做出相应响应。
问：post和get方法有什么区别？
答：post方法请求的参数是在body中，而get方法的请求参数是在head中

input标签其他类型

1、text类型设置默认值

<input type="text" name="username" value="liyanan"/>

2、单选框radio

<form>
    <div>
        <p>请选择性别</p>
        <span>男</span><input type="radio"/> #type=radio是单选框
        <span>女</span><input type="radio"/>
    </div>
    <input type="submit" value="登录"/>
</form>

这里写图片描述
从上面图片显示，这个可以选择两个，但是我只想选择一个，因为是单选框，所以要加一个name属性，而且Name要相同才能实现单选

<form>
     <div>
         <p>请选择性别</p>
         <span>男</span><input type="radio" name="grander"/>  #要加name属性，而且要name属性的值一样，才能实现单选
         <span>女</span><input type="radio" name="grander"/>
     </div>
     <input type="submit" value="登录"/>
 </form>

但是还是有个疑问，那就是，我怎么想后台发我选中的值呐？所以再加一个value属性

<form>
       <div>
           <p>请选择性别</p>
           <span>男</span><input type="radio" name="grander" value="1"/>  #加value属性，向后台发值
           <span>女</span><input type="radio" name="grander" value="2"/>
       </div>
       <input type="submit" value="登录"/>
   </form>

那如果我还需要搞一个默认值，这里就需要加一个checked属性了

<form>
        <div>
            <p>请选择性别</p>
            <span>男</span><input type="radio" name="grander" value="1" checked="checked"/> #实现默认值
            <span>女</span><input type="radio" name="grander" value="2"/>
        </div>
        <input type="submit" value="登录"/>
    </form>

3、多选框checkbox

<form>
       <div>
           <p>爱好</p>
           足球：<input type="checkbox" name="favor" value="1" checked="checked"/> #checked默认值可以写多个
           篮球：<input type="checkbox" name="favor" value="2"/>
           台球：<input type="checkbox" name="favor" value="3" checked="checked"/>
       </div>
       <input type="submit" value="登录"/>
   </form>

这边要注意了，因为多选框，发过去的值有对个，效果就像如图所示：
这里写图片描述
所以后台一般是这样取的：

favor_list = self.get_arguments('favor')  #后台通过这个方法去拿
favor_list = [1,2,3] #把值存在一个列表中获取到

4、上传文件file

<form>
        <div>
            <input type="file" name="filename"/>   #文件类型为file，表示上传文件，后台根据name，拿到文件
        </div>
        <input type="submit" value="登录"/>
</form>

但是即使你设置了name也不能上传文件，因为上传文件必须依赖form一个属性，这个属性是enctype=”multipart/form-data”

<form enctype="multipart/form-data">  #上传文件必须添加enctype="multipart/form-data"属性
    <div>
        <input type="file" name="filename"/>
    </div>
    <input type="submit" value="登录"/>
</form>

这个属性表示你本地的文件需要一点一点的发送给服务器，服务器接收到，然后写到服务器的磁盘上。

5、重置

作用：可以把所有输入框，恢复初始化状态

<input type="reset" value="重置"/>

这里写图片描述

小结

input系列：
1、input type=’text’ - name属性， value=’liyanan’
2、input type=’password’ - name属性， value=’liyanan’
3、input type=’submit’ - value=’提交’ 提交表单按钮
4、input type=’button’ - value=’登录’ 普通按钮
5、input type=’radio’ - 单选框 value,check=”checked”,name属性(name相同则相互互斥)
6、input type=’checkbox’ - 复选框 value,check=”checked”,name属性(批量获取数据)
7、input type=’file’ - 依赖form表单的一个属性，enctype=”multipart/form-data”
8、input type=’reset’ -重置

Html的body内标签之多行文本以及下拉框

多行文本

1、多行文本标签textarea

作用：多行文本向后台提交时，需要加上name属性，默认值不是在标签内添加value属性，而是在中间添加

<form>
        <div>
            <textarea name="gao">默认值</textarea> #多行文本
        </div>
 </form>

下拉框select标签

1、普通下拉框

作用：普通下拉框，然后selected属性是默认选择哪个值

<body>
    <form>
        <div>
            <select name="city"> #select标签
                <option value="1">上海</option>  #选项用option标签
                <option value="2" selected="selected">南京</option>  #selected属性是默认选中谁
                <option value="3">北京</option>
            </select>
        </div>
        <input type="submit"/>
    </form>
</body>

这里写图片描述

2、有宽度的下拉框

说明：需要在select标签内添加size属性

<body>
    <form>
        <div>
            <select name="city" size="3">  #添加size属性，设置宽度
                <option value="1">上海</option>
                <option value="2" selected="selected">南京</option>
                <option value="3">北京</option>
            </select>
        </div>
        <input type="submit"/>
    </form>
</body>

这里写图片描述

3、多选下拉框中的值

说明：multiple属性来设置下拉框多选，当然你多选的时候需要按住ctrl，才能多选

<body>
    <form>
        <div>
            <select name="city" size="3" multiple="multiple">  #mutiple属性设置多选
                <option value="1">上海</option>
                <option value="2" selected="selected">南京</option>
                <option value="3">北京</option>
            </select>
        </div>
        <input type="submit"/>
    </form>
</body>

这里写图片描述

4、设置分组选项

说明：通过optgroup标签来实现分组选项，但是组名是不可以选择的

<select name="city">
                <optgroup label="江苏省">  #设置分组
                    <option value="1" selected="selected">南京</option>
                </optgroup>
                <optgroup label="浙江省">
                    <option value="2">杭州</option>
                </optgroup>
            </select>

这里写图片描述

小结

1、textarea标签 - name属性，<textarea>默认值</textarea>
2、select标签 -name属性，内部option value,提交到后台，size，muiltiple

Html的body内标签之超链接

之前我们提到过a标签，只是用了一下，百度一下，今天我们就来仔细研究一下这个a标签，首先a标签是行内标签，且不能提交后后台。

a标签的作用

1、跳转

作用：a标签可以作跳转的作用

<body>
    <a href="http://www.baidu.com">百度一下</a>
</body>

以上默认是在当前的tag页面跳转，如果想再新的tag的页面跳转的话，需要加上target=’_blank’标签

<body>
    <a href="http://www.baidu.com" target="_blank">百度一下</a>  #添加target="_blank"，在新的tag的页面跳转
</body>

2、锚

作用：就是在一个页面中，通过点一个标题，直接跳转到你的所想要看到的页面

<body>
    <a href="#i1">第一章</a>
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>
    <div id="i1" style="height: 600px;">第一章的内容</div>
    <div id="i2" style="height: 600px;">第二章的内容</div>
    <div id="i3" style="height: 600px;">第三章的内容</div>
</body>

从上面的代码，我们可以看出，想实现锚的效果，就是在a标签里面 href = “#某个标签的id” ，这样就让这个a标签跟某一个章节关联了。
这里写图片描述
这边注意了：在html里面，id属性是不能重复的，name属性是可以重复的，但是一般不重复。

小结

a标签：
1、跳转
2、锚 href=”#某个标签的ID” 标签的ID不允许重复

Html的body内标签之图片以及表格

图片显示

1、图片标签img

<a href="http://www.baidu.com"  target="_blank">
        <img src="11.jpg" style="height: 200px;">
</a>

如果图片要给图片一个标题，需要加上title属性，就是鼠标放在图片上会显示标题

<a href="http://www.baidu.com"  target="_blank">
        <img src="11.jpg" title="大美女" style="height: 200px;"/>
</a>

那如果图片不存在，则我可以给一个默认值，需要用alt属性

<a href="http://www.baidu.com"  target="_blank">
        <img src="1.jpg" title="大美女" style="height: 200px;" alt="美女"/>
</a>

这里写图片描述
这边要注意的是，只有a 标签可以使用超链接，其他任何标签都不可以使用超链接，想用超链接，只能用 a 标签

列表标签

1、ul标签

说明：ul=>unordered lists 无序列表，跟li标签配合着使用

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

2、ol标签

说明：ol=>ordered lists 有序列表，也是跟li标签配合着使用

<ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>

3、dl标签

说明：dl=>defintion list 定义一个列表配合着dt=>defintion title(定义标题)和dd=>defintion description(描述)两个标签配合使用

<dl>
    <dt>江苏</dt>
    <dd>盐城</dd>
    <dd>苏州</dd>
    <dd>南通</dd>
</dl>

表格标签

1、table标签

说明：table标签是设计表格的，跟tr(行列)和td(列)两个标签结合使用的，加上border属性，显示边框

<body>
    <table border="1">   #border属性显示边框
        <tr>   #一行
            <td>主机名</td>  #表示一列
            <td>端口</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>1.1.1.1</td>
            <td>8080</td>
            <td><a href="h1.html">查看详情</a></td>   #超链接可以是具体的某个页面
        </tr>
    </table>
</body>

这里写图片描述

规范的table标签格式

说明：table标签应该有thead和tbody内容组成，thead内有分为tr和th，tbody里面是tr和td，建议以后使用这种规范的方式写table标签

<body>
    <table border="1">
        <thead>
            <tr>
                <th>主机名</th>
                <th>端口号</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1.1.1.1</td>
                <td>8080</td>
                <td>查看详情</td>
            </tr>
        </tbody>
    </table>
</body>

这里写图片描述

列和行合并

①列合并
这边列合并需要使用到colspan=>colum span属性，表示是列合并

<body>
    <table border="1">
        <thead>
            <tr>
                <th>主机名</th>
                <th>端口号</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1.1.1.1</td>
                <td colspan="2">8080</td>  #colspan='2'表示这个td占2个列
            </tr>
            <tr>
                <td>1.1.1.1</td>
                <td>8080</td>
                <td>查看详情</td>
            </tr>
        </tbody>
    </table>
</body>

这里写图片描述
②行合并
这边行合并需要使用到rowspan=>row span属性，表示是行合并

<body>
    <table border="1">
        <thead>
            <tr>
                <th>主机名</th>
                <th>端口号</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">1.1.1.1</td>  #rowspan='2'表示td上下横跨两个行
                <td colspan="2">8080</td>
            </tr>
            <tr>
                <!--<td>1.1.1.1</td>-->  #这一行需要去掉
                <td>8080</td>
                <td>查看详情</td>
            </tr>
        </tbody>
    </table>
</body>

这里写图片描述

Html的body内标签之fieldset标签和label标签

label标签

作用：用for属性关联input标签的id属性，这样点击文件，使得关联的标签获取光标

<label for="user">用户名:</label>  #for属性关联input标签的id属性
<input id="user" type="text" name="username"/>

这里写图片描述

fieldset标签

这个标签很少用到，作用主要是显示出一个框的，基本用不到，我们看一下效果。

<body>
    <fieldset>  #fieldset配合着legend使用
        <legend>登录</legend>
    </fieldset>
</body>

这里写图片描述

fieldset和label标签配合起来使用

这样的话，我们用户登录的图形可以这样写了

<body>
    <fieldset style="height: 200px;width: 300px;">  #fieldset 标签
        <legend>登录</legend>
        <label for="user">用户名:</label>   #label标签
        <input id="user" type="text" name="username"/>  #input标签
        <br/>
        <label for="pwd">密码:</label>
        <input id="pwd" type="password" name="pass_word"/>
    </fieldset>
</body>

这里写图片描述

css选择器

之前我们写了关于html的博客和知识的总结，今天我们正式进入css的学习，今天来学习css的第一个知识点，css的选择器，看看css在我们前端的如何叱咤风云的使用的。

编写css样式

1、在标签上设置style属性

<body>
    <div style="background-color: red;height: 20px;width: 200px;">
    李亚楠
    </div>
</body>

2、写在head里面

这种css的使用方法又叫css选择器，我们下面重点来说一下，css的注释方法：/* ….. */

<head>
    <style>  #head里面写样式
        #i3{
            background-color: red;
            height: 20px;
            width: 200px;
        }
    </style>
</head>
<body>
    <div id="i3">李亚楠</div>   #在body里面使用
</body>

css选择器

1、id选择器 *

说明：在head标签的style中设置 #id 设置样式，这个id对应的是标签的id，但是这个一般不用，因为我们的id是默认不重复的

#id{
    .....
}

<标签 id="id"></标签>

实例：

<head>
    <meta charset="UTF-8">
    <title>python学习网</title>
    <style>
        #i3{
            background-color: #DDDDDD;
            height:20px;
            width: 200px;
        }
    </style>
</head>
<body>
    <div id="i3">
    李亚楠
    </div>
</body>

2、class选择器 *

说明：在head标签的style中设置 .名称样式，在标签中直接用class=’名称’的方式使用样式

.名称{
    ....
}

<标签 class="名称"></标签>

实例

<head>
    <meta charset="UTF-8">
    <title>python学习网</title>
    <style>
        .c1{
            background-color: #DDDDDD;
            height:20px;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="c1">
    李亚楠
    </div>
</body>

3、标签选择器 *

说明：利用标签设置样式，这个作用是使此标签都使用这个样式

标签名{
     ..... 
}


<标签名></标签名>

实例

<head>
    <meta charset="UTF-8">
    <title>python学习网</title>
    <style>
        div{
            background-color: #DDDDDD;
            height:20px;
            width: 200px;
        }
    </style>
</head>
<body>
    <div>李亚楠</div>
    <span>李亚楠</span>
</body>

4、层级选择器 *

说明：根据层级关系，选择某个标签下的所有标签使用该样式，层级之间用空格分开

第1层标签    第2层标签名  ....{
        ......
}


<第1层标签>
        <第2层标签>
              ........
        </第2层标签>
</第1层标签>

注意：这里的标签可以是 class(.c1)、id(#id)、标签名(div)
实例

<head>
    <meta charset="UTF-8">
    <title>python学习网</title>
    <style>
        #c2{
            background-color: #DDDDDD;
        }
        span div{    #这边的span div 可以写成  .c1 div  或者 #c1 div
            background-color: red;
            height:20px;
            width: 200px;
        }

    </style>
</head>
<body>
    <div class="c1">李亚楠</div>
    <span id="c2" class="c1">liyanan
        <div>abc</div>
    </span>
    <div class="c1">李亚楠</div>
</body>

5、组合选择器 *

说明：就是多个标签使用一个样式，标签之间用逗号隔开

第1个标签,第2个标签，第3个标签,.....{
             ......
}


<第1个标签></第1个标签>
<第2个标签></第2个标签>
<第3个标签></第3个标签>

注意了：这里的标签跟上面的一样可以是 class(.c1)、id(#id)、标签名(div)
实例

<head>
    <meta charset="UTF-8">
    <title>python学习网</title>
    <style>

        #i1,span{#这边#i1,span 可以是div，span，也可以.c1,span
            background-color: red;
            height:20px;
            width: 200px;
        }

    </style>
</head>
<body>
    <div id="i1">李亚楠</div>
    <span >liyanan
        <div id="i3">abc</div>
    </span>
    <div id="i2">李亚楠</div>
</body>

6、属性选择器 *

说明：根据标签的属性来设置样式

标签[属性名=values]{
            ......
}


<标签 属性名=values></标签>

注意了：这个属性是可以css自定义的，也可以是自己定义的。

<head>
    <meta charset="UTF-8">
    <title>python学习网</title>
    <style>

        input[n='li']{#这边用的是自定义的，也可以用type="text"或者class="c1"
            height:48px;
        }
        .c1{
            background-color: red;
        }

    </style>
</head>
<body>
    <input type="text" n="li" class="cl"/>
    <input type="password"/>
</body>

css的存在形式以及优先级

之前我们写了css选择器，但是我们还是觉得写在head的style里面，重用的效果总觉的还是不太好，还有同一个标签，用了三个样式，优先级又该如何呢？下面我们就来好好研究一下。

css的优先级

1、引入多个样式

说明：我们知道一个标签可以有多个css的样式，就是说一个class属性可以写入多个样式，中间以空格隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>python</title>
    <style>
        .c1{
            background-color: red;
            color:white;
        }
        .c2{
            font-size: 58px;
            color: black;
        }
    </style>
</head>
<body>
    <div class="c1 c2">我要学Python</div>
</body>
</html>

2、多个样式的优先级

说明：标签上的style优先级最高，然后是编写顺序，就近原则，在head的style标签里面越往下的标签，优先级越高。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>python</title>
    <style>
        .c2{
            font-size: 58px;
            color: black;
        }
        .c1{
            background-color: red;
            color:white;
        }

    </style>
</head>
<body>
    <div class="c1 c2" style="color: skyblue">我要学Python</div>
</body>
</html>

这里写图片描述
注意：这边说的优先级高，指的是样式里面有同一个样式，比如上面三个都有color样式，如果他们存在不同的样式，则三种样式不存在优先级，都所有的样式都用上。

3、在chrome中查看样式优先级

说明：其实样式的优先级我们在Chrome浏览器中是可以看得出来的，下面我们就来看看，怎么看这个
这里写图片描述

（通过右边可以看到，先用的是style的属性，再用c1,然后是c2）

css的存在形式

之前我们写的样式都是写在了head的style里面，但是这样只能提供一个html文件使用，其他的html文件就不能很好的重用此样式了，效果如图：
这里写图片描述
那怎么办？我想其他的html文件也想用，所以我们就创建一个css文件，然后通过在head标签里面的link标签去导入就可以了
①创建css文件

②html文件中到入css文件

<head>
    <meta charset="UTF-8">
    <title>python</title>
    <link rel="stylesheet" href="common.css">
</head>

③使用该css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>python</title>
    <link rel="stylesheet" href="common.css">
</head>
<body>
    <div class="c1 c2" style="color: skyblue">我要学Python</div>
</body>
</html>

注意了，这边link标签中的href=”css的路径”，一般情况下会写在css文件夹下。

css边框以及其他常用样式

接下来我们来研究一下css的边框，以及其他的常用的样式

css边框以及其他常用样式

1、css边框

作用：设置标签周围的边框的，具体使用方法：board：宽度样式颜色，一般情况下样式使用 solid实体的，和dotted虚线的

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>python</title>
    <style>

        .c1{
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <div class="c1">我要学Python</div>
</body>
</html>

注：这边不仅有border，还有 border-top,border-left,border-right，border-bottom,分别是边框顶部，边框左边，边框右边，边框底部

2、高度

作用：设置标签的高度的，使用方法：height：高度大小，可以是具体的数字大小比如说：20px，也可以是百分比：50%，但是这个是高度是无限大的，所以只能在某个边框里面再设置百分比，不然就没有意义了。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>python</title>
    <style>

        .c1{
            border: 2px solid red;
            height: 30px;
        }
    </style>
</head>
<body>
    <div class="c1">我要学Python</div>
</body>
</html>

3、宽度

作用：设置标签的宽度，使用方法：width：宽度大小，这个跟上面的height是一样的，可以是具体大小：50px，也可以是整个屏幕宽度的百分比：50%

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>python</title>
    <style>

        .c1{
            border: 2px solid red;
            height: 30px;
            width: 50%;
        }
    </style>
</head>
<body>
    <div class="c1">我要学Python</div>
</body>
</html>

注意了：虽然div有了高度和宽度，但是它仍然是一个块级标签。

4、字体大小

作用：设置标签内的字体大小，使用方法：font-size:字体大小，示例：font-size:20px

<style>

        .c1{
            border: 2px solid red;
            height: 30px;
            width: 50%;
            font-size: 20px;
        }
    </style>

5、水平居中

作用：能把标签内的字体，进行水平居中。使用方法：text-align:center

<style>

        .c1{
            border: 2px solid red;
            height: 30px;
            width: 50%;
            font-size: 20px;
            text-align: center;
        }
    </style>

6、垂直居中

作用：能把标签内的字体，进行水平居中。使用方法：line-height：标签高度值。这个值是根据你的div值有多高，给你居中一下。

<style>

        .c1{
            border: 2px solid red;
            height: 80px;
            width: 50%;
            font-size: 20px;
            text-align: center;
            line-height: 80px;#根据你的高度设置
        }
    </style>

7、字体加粗

作用：给你标签内的字体加粗。使用方式：font-weight：bold

<style>

        .c1{
            border: 2px solid red;
            height: 80px;
            width: 50%;
            font-size: 20px;
            text-align: center;
            line-height: 80px;
            font-weight: bold;
        }
    </style>

css之float样式

这个float样式非常重要，要是不会它，那几乎所有的页面都写不出来，float的意思是浮动的意思，就是让标签都浮动起来，不要受父标签控制，就是脱离了父标签的控制。

float样式

1、float样式

因为float是在某个父块级标签中浮动起来，但是如果父标签没有的话，则父标签就是整个window窗口。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>python</title>
    <style>
        .float-left{
            height: 50px;
            width: 20%;
            background:red;
            float: left;
        }
        .float-right{
            height: 50px;
            width: 80%;
            background:green;
            float: left;
        }
    </style>
</head>
<body>
    <p>python</p>
    <div>
        <div class="float-left">基础</div>
        <div class="float-right">网络编程</div>
    </div>
</body>
</html>

这里写图片描述
在div标签中浮动起来，因为之前两个都是块级标签，现在通过float浮动起来了，互相填补。

float样式的应用

如果我们想做一个如下图片的效果，该如何做呐?如图所示：
这里写图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>python</title>
    <style>
        .pg-header {
            height: 38px;
            background-color: #dddddd;
            line-height: 38px;
        }
    </style>
</head>
<body style="margin: 0 auto;">
<div class="pg-header">
    <div style="float: left">收藏本站</div>
    <div style="float: right">
        <a>登录</a>
        <a>注册</a>
    </div>
</div>
<div style="width: 300px;border: 1px solid red;">
    <div style="width: 98px;height: 30px;border: 1px solid green;float: left"></div>
    <div style="width: 98px;height: 30px;border: 1px solid green;float: left"></div>
    <div style="width: 98px;height: 30px;border: 1px solid green;float: left"></div>
    <div style="width: 98px;height: 30px;border: 1px solid green;float: left"></div>
    <div style="width: 98px;height: 30px;border: 1px solid green;float: left"></div>
    <div style="width: 98px;height: 30px;border: 1px solid green;float: left"></div>
    <div style="width: 98px;height: 30px;border: 1px solid green;float: left"></div>
    <div style="clear: both;"></div> #表示子标签已经浮动起来了，相当于又把子标签管住了
</div>
</body>
</html>

注意：在body标签中有一个margin: 0 auto，这里面这个0表示上线间距为0，auto表示你如果设置成自动的，表示让当前的div居中。

css之display样式

我们之前了解到，说行内标签可以转换成块级标签，块级标签可以转换成行内标签，这个是可以的，因为我们今天要学习display样式，就可以实现这样的效果

display样式

1、display：inline

作用：块级标签转换为行内标签

<div style="background-color: red;height: 50px;display: inline">python</div>

这里写图片描述

注意：行内标签：无法设置高度，宽度，padding，margin

2、display: block

作用：行内标签转换为块级标签

<body>
    <span style="background-color: red;height: 50px;display: block">python</span>
</body>

这里写图片描述
注意：块级标签特性：可以设置高度，宽度，padding，margin

3、display：inline-block

作用：①具有inline属性，默认自己有多少占多少②具有block属性，可以设置高度，宽度，padding，margin。可以称为中性的标签

    <span style="background-color: red;height: 50px;display: inline-block">python</span>

这里写图片描述

4、display: none

作用：使标签消失，这个一般用在我点一个按钮就出现，不点按钮就消失，但是标签实实在在在那边呐，这个以后js会用到

    <span style="background-color: red;height: 50px;display: none">python</span>

css之内外边距

我们来说说标签的内外边距，内边距(padding),外边距(margin)，我们先来看看这个标准的盒子模型吧，如图所示：
这里写图片描述

外边距

说明：我们外边距用margin样式来表示。外边框可以理解为，边框的扩展还需要占用多大的空间，也是上、下、左、右，分别是margin-top，margin-bottom，margin-left，margin-right。当然如果直接用margin的话，那外边距的扩展，上下左右都都会产生变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="border: 1px solid red;height: 40px;width: 80%">
        <div style="background-color: green;height: 20px;">python_python</div>
    </div>
</body>
</html>

这里写图片描述
然后我设置margin-top值之后：

里面的div和外面的div产生了上下产生了边距，随着我的margin-top的值不断扩大，则边距也越来越大，所以说行外边距只的是本身的div没有高度和宽度没有变化，只是离父标签的高度有变化。

margin: 10px;  #上下左右边距都是：10px
margin: 0 10px;   #上下边距：0，左右：10px
margin: 0 10px  0 10px; #上：0 ,右：10px  ,下：0，左：10px

内边距

说明：我们内边距用padding来表示，是内容到边框的距离，可以有上、下、左、右，分别是padding-top，padding-bottom，padding-left，padding-right。当然如果直接用padding的话，那内边距的扩展，上下左右都都会产生变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="border: 1px solid red;height: 40px;width: 80%">
        <div style="background-color: green;height: 20px;">python_python</div>
    </div>
</body>
</html>

然后我设置padding-top值之后：
这里写图片描述
其实div自己本身的高度没有变大：

自己本身的div的高度没有变化，用的是拉长自己的边距。

padding: 10px;  #上下左右边距都是：10px
padding: 0 10px;   #上下边距：0，左右：10px
padding: 0 10px  0 10px; #上：0 ,右：10px  ,下：0，左：10px

Ali--

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day14_html和css

Html的本质以及在Web程序中的作用概述众所周知，对于所有的Web应用，本质上其实就是一个socket服务端，用户的浏览器其实就是一个socket客户端。import socketdef handle_request(client): buf = client.recv(1024) client.send("HTTP/1.1 200 OK\r\n\r\n"...
复制链接

扫一扫

专栏目录