python第五十天 (HTML, CSS)

妖狐艹你老母 2021-11-05 12:06 240阅读 0赞

# 1. HTML #

## 1.1 前端： ##

所有用户能看到的界面  
网页、pc端的应用exe、移动端应用app、微信小程序、手环的时间界面  
html5为基础的前端：网页、app、微信小程序

## 1.2 前端三剑客： ##

1、html5：页面结构框架  
　　标签 => 学会标签的嵌套结构

2、css3：页面布局与样式

3、javaScript：页面的交互逻辑

## 1.3 html知识 ##

标签：由<>包裹字母开头，可以结合数字和合法字符的能被浏览器解析的标记 -- 字母 数字 -  
标签有语义：<br> 换行  
标签有作用范围：<h1>中间就是标签的作用范围，由标签来控制，具有默认样式</h1>  
标签可以修改内容样式：<xyz style="color: red">000</xyz>

转义字符：由 &与;包裹，可以使10进制数字组合，也可以使特殊单词缩写组合  
> => >  
< => <

指令：<>包裹由!开头  
文档类型指令：<!doctype html>  
注释：

## 1.4 标签 ##

单双标签之分：单标签无需内容，主功能，可以省略结束符/；双标签主内容，需要有作用域，必须明确结束标签<a></a>

常用标签：  
h1~h6  
p  
b  
i  
a  
img  
ul>li  
table>tr>th|td  
form>input|button|textarea|select>option

span：无语义，同行显示（不带换行）  
div：无语义，换行显示（自带换行）

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>a标签:链接标签</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>可以通过href跳转到指定的网址</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>锚点功能:回到顶部</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>a</code>&nbsp; 
      <code>href="" id="a1"&gt;top&lt;/</code> 
      <code>a</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>a</code>&nbsp; 
      <code>href="#a1"&gt;bottom&lt;/</code> 
      <code>a</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ps：target属性用来控制是否在当前页面跳转 </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>默认是_self当前页</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>也可以指定成_blank新建页面跳转</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>所有的html标签都应该有一个id属性，用来唯一标识当前标签 为后续的DOM操作提供基础</code> 
     </div> 
     <div> 
      <code>也就意味着同一份html中标签的id不能重复，不写id属性也是可以的</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>img标签</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>src图片路径:即可以是网络上的图片地址也可以是本地的图片地址</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>alt当图片加载失败之后自动展示的提示信息</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>title鼠标悬停在图片上时显示的文本</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>图片调节长宽的时候只需要调节一个 另外一个参数自动等比例缩放</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>列表标签</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ul:无序列表</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ol：有序列表</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>dl：标题列表</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>表单标签</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>固定就以下面的格式书写</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>table</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>thead</code> 
      <code>&gt;&lt;/</code> 
      <code>thead</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>tbody</code> 
      <code>&gt;&lt;/</code> 
      <code>tbody</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>table</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>tr 一个tr表示一行</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border调整列表的边框</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>cellspacing 调单元格与外边框之间的距离</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>cellpadding 调文本与单元格之间的距离</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>rowspan&nbsp; 垂直方向合并</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>colspan&nbsp; 水平方向合并</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>form表单</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>功能:获取用户输入(手动输入/选择/默认值)，并将获取到的用户信息发送给后端</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>form表单中只有input的type类型为submit才会触发提交信息的动作</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>如果不想通过input标签来触发提交动作 那么可以直接写一个&lt;</code> 
      <code>button</code> 
      <code>&gt;button按钮&lt;/</code> 
      <code>button</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>input</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>通过控制type的类型从而实现不同的获取用户输入的标签样式</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>text&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 普通文本</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>password&nbsp;&nbsp;&nbsp; 密文</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>date&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 日历</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>radio&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 单选框</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>checkbox&nbsp;&nbsp;&nbsp; 多选框</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>file&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 获取文件</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>submit&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 触发提交数据的行为</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>button&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 普通的按钮</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>reset&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 重置form表单内容</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>select</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>选择框&nbsp; 默认是单选的 可以通过multiple参数将单选变为多选</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>一个option就是一个选项</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>textarea</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>获取用户大段文本值</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>form表单中几个重要的属性</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>action:用来控制数据到底提交给谁&nbsp; 写url来指定提交给谁</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>form表单默认是get请求&nbsp; 可以通过method属性修改提交方法</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>form表单中需要给每一个获取用户输入的标签加上name属性用来标识当前数据的类型</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>你可以将name属性当做字典的key 用户输入的当做字典的value 并且你可以手动设置value值</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>form表单发送文件 需要修改enctype属性的值</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>默认是urlencoded不支持传输文件</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>需要将其修改为multipart/form-data</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>GET请求与POST请求</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>get请求:获取想要的数据</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>post请求:提交数据</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## 1.5 具体标签功能 ##

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    
    <html lang="zh">
    <head>
        
        <meta charset="UTF-8">
        
        <title>day50页面标签标题</title>
        
        <style></style>
        
        <script></script>
    </head>
    
    
    <body>
    
    <hr>
    <h1 >一级标题</h1>  
    <h6 >六级标题</h6>
    
    
    <p>段落</p>
    
    
    <span>span标签</span>
    
    <br>
    <b>加粗标签</b>
    <strong>以加粗方式强调的标签</strong>
    <br>
    <i>斜体标签</i>
    <em>以斜体方式强调的标签</em>
    <br>
    <sup>上角标</sup>
    <sub>下角标</sub>
    
    
    
    <a href="https://www.baidu.com" target="_self">前往百度</a>
    <a href="https://www.baidu.com" target="_blank">前往百度</a>
    <a href="预习/a.html" target="_blank">超链接到自定义界面</a>
    
    
    
    <img title="新垣结衣" alt="新垣结衣" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1416784794,1465922537&fm=26&gp=0.jpg" >
    
    
    
    
    
    <ul>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>
    
    
    <ol>
        <li>第1项</li>
        <li>第2项</li>
        <li>第3项</li>
    </ol>
    
    
    
    
    <table border="2" width="500" height="300" cellpadding="10" cellspacing="10">
        <thead>
            <tr style="height: 50px">
                <th>标题</th>
                <th>标题</th>
                <th>标题</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                
                
                <td colspan="2">单元格</td>
                <td rowspan="2">单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </tbody>
        <tfoot>
            <tr style="height: 10px">
                <td >单元格</td>
    
                <td colspan="2">单元格</td>
            </tr>
        </tfoot>
    </table>
    
    
    
    <form action="" method="get">
        <input type="text" name="user" placeholder="默认显示文本占位符">
        <input type="password" placeholder="密码">
        <input type="color" placeholder="背景颜色">
        <input type="number" placeholder="数字">
        <input type="file">   
        <hr>
         
        男 <input type="radio" name="sex" checked>
        女 <input type="radio" name="sex">
        
        1 <input type="checkbox" value="m" name="like" checked>
        2 <input type="checkbox" value="f" name="like" checked>
        人妖 <input type="checkbox" value="mf" name="like">
    
        <br>
        <br>
    
        
        <select name="subject" multiple>
            <option value="python">python</option>
            <option value="linux">linux</option>
            <option value="go">go</option>
        </select>
    
        
        <textarea name="123" id="123" cols="30" rows="10"></textarea>
    
        
        <button type="button">无用</button>
        <button type="reset">重置</button>
        <button type="submit">提交</button>
    
    
    </form>
    
    
    
    <script></script>
    </body>
    </html>

# 2. CSS #

## 2.1 CSS的三种引入 ##

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>样式</title>
        <style>
            .dd {
                width: 200px;
                height: 200px;
            }
            .d1 {
                background-color: yellow;
            }
            .dd.d2 {
                background-color: red;
            }
            .d2 {
                background-color: brown;
            }
    
        </style>
    
        <link rel="stylesheet" href="./css/4.样式.css">
    </head>
    <body>
    
    
    <div style="width: 200px; height: 200px; background-color: pink;"></div>
    <div style="width: 300px; height: 200px; background-color: greenyellow;">123</div>
    
    
    <div class="dd d1"></div>
    <div class="dd d2"></div>
    <div></div>
    
    
    <div class="pp p1"></div>
    <div class="pp p2"></div>
    <div></div>
    </body>
    </html>

## 2.2 基础选择器 ##

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>基础选择器</title>
        <style>
            /*优先级：按作用域大小区分，作用域越小优先级越高*/
            /* !important > 行间式 > id > class > 标签 > 统配 */
            /*重点： class选择器 - 单类名 多类名 */
    
            /*1.统配选择器*/
            * {
                font-size: 30px;
                color: brown;
            }
            /*2.标签选择器：标签名*/
            div {
                color: orange;
            }
            span {
                color: darkcyan;
            }
    
            /*3.类选择器：.类名*/
            .aa {
                color: indigo;
            }
    
            /*4.id选择器：#id名*/
            #bb {
          
                color: green;
            }
    
            /*组合使用：找id为bbclass为aa的div*/
            div#bb.aa {
          
                color: red;
            }
    
            .aa {
                color: red!important;
            }
        </style>
    </head>
    <body>
        <div class="aa" id="bb" style="color: gold!important;">d1</div>
        <div class="aa">d2</div>
        <div>d3</div>
        <span class="aa">s1</span>
        <span>s2</span>
        <span>s3</span>
    </body>
    </html>

转载于:https://www.cnblogs.com/liguodeboke/p/11129757.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211105/fc39bfc4feb640e9b1ef6a9521235c1c.png