小白IT：炫彩的页面是怎么做的，前端？？？Python前端基础&CSS 效果渲染

import socket
sock=socket.socket(socket.AF_INET,socket.SOCK_STREAM)
sock.bind(("127.0.0.1",8800))
sock.listen(5)
while 1:
    print("waiting........")
    conn,addr=sock.accept()
    data=conn.recv(1024)
    print("data",data.decode("utf8"))
    with open("index.html","r") as f:
        response=f.read()  #可以吧html放在一个文档里面读出来
    conn.send(("HTTP/1.1 201 OK\r\n\r\n%s"%response).encode("utf8"))

web应用流程：

浏览器发请求 --> 遵循HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面

2.HTML是什么？

超文本标记语言（Hypertext Markup Language，HTML）通过标签语言来标记要显示的网页中的各个部分。html就是一套规则，浏览器认识的规则。

浏览器按顺序渲染网页文件，然后根据标记符解释和显示内容。但需要注意的是，对于不同的浏览器，对同一标签可能会有不完全相同的解释（兼容性）

静态网页文件扩展名：.html 或 .htm

HTML 不是一种编程语言，而是一种标记语言 (markup language) HTML 使用标记标签来描述网页，这种标记语言没有任何逻辑。

[ 小白IT：炫彩的页面是怎么做的，前端？？？Python前端基础&CSS 效果渲染

3.html文档格式

基本的HTML文档模式

<!DOCTYPE html> 
<html lang="zh-CN">   #这个lang表示语言，zh-CN是中文的意思，就是说，你整个文档的内容以中文为主，如果以英文为主，就写成lang='en'

<head> 
  <meta charset="UTF-8">
  <title>css样式优先级</title>
</head>
<body> 

</body>
</html>

告诉浏览器使用什么样的html或者xhtml来解析html文档
... 是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部和主体。
... 元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
... 定义网页标题，在浏览器标题栏显示。
... 之间的文本是可见的网页主体内容

注意：对于中文网页需要使用声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为。

pycharm中创建一个html文件，你就会发现，整个结构都给你直接生成好了，因为不管什么浏览器，这个文档结构都是这样的。

4.html标签格式

标签严格封闭，也就是要成对，但有一些标签是自封闭的。

标签的语法

<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />

注意：有些属性是没有特殊的效果的，而有些属性是有效果的。

几个重要的属性

id：定义标签的唯一ID，HTML文档树中唯一，区分页面中标签的唯一标识
class：为html元素定义一个或多个类名（classname）(CSS样式类名)
class：为html元素定义一个或多个类名（classname）(CSS样式类名)

HTML注释

<!--注释内容-->  #找到一行内容ctrl+/就能注释，注释的内容不会在网页上显示出来

二、常用标签

1.！DOCTYPE标签

声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

document.compatMode：

BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat。

2.head内常用标签

meta标签

1.meta介绍

meta元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词。 meta标签位于文档的头部，不包含任何内容。 meta提供的信息是用户不可见的

2.meta标签组成

meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

name属性：主要用于描述网页，与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> #如果把URL和后面的内容去掉，就是2秒钟刷新一次，这些内容了解一下就行
<!--指定文档的编码类型--> 
<meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以*模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge"> #edge是微软的一个全新的浏览器,其实就是告诉IE浏览器，你按照最高标准来渲染我的页面，了解一下就可以啦

http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">  # 关键字，也就是别人是可以通过这些关键字搜索到我的这个文章的，搜索引擎就是能够这个content内容来帮别人搜索到你的这个文档的
#SEO就是做这个的，就是怎么让你们公司的网站在别人搜索的时候能够靠前显示，不算那个花钱的，百度是充值的，你冲个20w，别人可能一天就给你点击完了，特别的贵

<meta name="description" content="xxxxxpythonxxx学习">  # 是对这个文档的描述，在百度一些内容的页面上，f12打开看看

[ 小白IT：炫彩的页面是怎么做的，前端？？？Python前端基础&CSS 效果渲染

3非meta标签

<link rel="icon" href="http://www.jd.com/favicon.ico">  <!--设置头部图标，，就像我们打开百度网址上会有百度的小图标-->
<link rel="stylesheet" href="css.css">    #加载css
<script src="hello.js"></script>　#加载js

PS：「浏览器内核」也就是浏览器所采用的「渲染引擎」，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。渲染引擎是兼容性问题出现的根本原因。

3.body内常用标签

基本标签

不加标签的纯文字也是可以在body中写的
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>段落标签</p> #独占一个段落
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<br>：换行
<hr>：#就是单独个一个水平线
<sup>和<sub>: 上角标 和 下角表.
<em>: 文字变成斜体.
<strike>: 为文字加上一条中线.

"""
大于号：&gt;
小于号：&lt;
and符号：&amp;
人民币符号：&yen;
版权标识：&copy;
注册符：&reg;
"""

两个重要标签：div和span

这两个标签是没有特别的样式的。

xxxx

，但是这是两个标签最大的特点，可以通过CSS来控制。

：
只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
：表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.

块级元素与行内元素的区别：所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。

注意

关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。div是可以包含div的

p标签比较特殊，不能包含块级标签，p标签也不能包含p标签。可以试一下p标签套p标签，f12你会发现三个p标签

几个概念

闭合标签：成对出现，封闭的标签

非闭合标签：不需要成对出现，内部实现了自闭和

块级标签：也称块元素，就是独占一行，可以自行设置宽高！如：先学到的 div,p,h1-h6

内联标签：也称行内元素，按内容占位，高度和广度是由自己的内容填充的如： a,br,img

判断块级标签和内联标签的方法：

是否独占一行（可以通过设置背景颜色去判断）
是否可以单独为元素设置高度和宽度。

图形标签：img

<img src="图片的路径" 
alt="图片未加载成功时的提示" 
title="鼠标悬浮时提示信息" 
width="宽" 
height="高(宽高两个属性只用一个会自动等比缩放)">

src的路径又分为两种：网上的一个图片路径和本地的一个相对图片路径

超链接标签（锚标签a）

所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

什么是URL？
URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html

URL地址由4部分组成
第1部分：为协议：http://、ftp://等 
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。

<a href="" target="_blank" >click</a>

href：指定目标网页地址。该地址可以有几种类型：

绝对 URL - 指向另一个站点（比如 href="http://www.jd.com）
相对 URL - 指当前站点中确切的路径（href=“index.htm”）
锚 URL - 指向页面中的锚（href="#top"）博客的目录经常用到，还可以跳转到 name属性为p1的a标签上，xxx

target：指定跳转网页的创建方式

_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页

列表标签：list

1.无序列表

<ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
</ul>

type属性：

disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式

2.有序列表

<ol type="1" start="2">
  <li>第一项</li>
  <li>第二项</li>
</ol>

type属性：start是从数字几开始

1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马

标题标签

<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

表格标签：table

表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。

表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。

表格的基本结构：

'''
table:表格标签
thead:表头
tbody:内容
tr:表格行
th:表头单元格
td:内容单元格
'''

表格标签实例

<table border='1'>
  <thead> #标题部分
  <tr> #一行
    <th>序号</th> #一个单元格
    <th>姓名</th>
    <th>爱好</th>
  </tr>
  </thead>
  <tbody> #内容部分
  <tr> #一行
    <td>1</td> #一个单元格
    <td>Egon</td>
    <td>杠娘</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Yuan</td>
    <td>日天</td>
  </tr>
  </tbody>
</table>

属性

border: 表格边框.注意写在内联属性，可以设置内框，写在CSS中只能设置table标签的外框，无法设置内框
cellpadding: 内边距（内边框和内容的距离）
cellspacing: 外边距.（内外边框的距离）
width: 像素百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）

<table class="tb" border="1">  写在这里设置的是单元格之间的边框
        <thead>
        <tr>
            <th>select</th>
            <th>name</th>
            <th>hobby</th>
            <th>status</th>
            <th>delete</th>
        </tr>
        </thead>
</table>

.tb{
    border: 1px solid black;  写在这里是设置table标签的外边框样式
}

其实标签又可以分为两类：

展示给用户看的
获取用户输入内容的标签，刚才前面的这些标签都是展示内容用的，下面要学的标签是捕获用户输入的标签。

三、HTML表单

1.HTML表单概念

什么是表单

HTML表单用于收集用户数据并向服务器传输数据，从而实现用户与Web服务器的交互

HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。

表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等，还可以包含textarea、select、fieldset和 label标签。这些标签也称为HTML表单的表单元素。

form表单标签属性

action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web

method: 表单的提交方式 post/get默认取值就是get

注意啦！！！！

from表单：实现用户与web服务器的交互
以键值对的形式发过去{"":"haiyan","":"123"}
如果没有name属性，你的数据是不过去的
name:键名


请求server端的方式：
    get:请求会放在url后面 username=yaun&password =123
    post:请求会放在请求体里

    
关于 url的内容    
    url: https://www.baidu.com(协议：域名（也是ip+端口))
    url: http:127.0.0.1:8800/blog/addBlog（协议：ip:端口/）
    url: http:127.0.0.1:8800/blog/addBlog？username = yuan


    http:协议
    127.0.0.1:8800：ip地址与端口
    blog/addBlog：url的路径（path）
    username = yuan:get请求数据

请求协议：
    浏览器发给服务器（get请求,post请求）
    格式：
        请求首行
        请求头：就是一组组键值对
        换行 \n,\n\r
        请求数据：有两种方式
        if get :
            url?data
        if post :
            请求数据
            
        get请求：安全性差，数据量有限（当设计到查询的时候会用到get请求）
        那些是get请求（一般都是查询数据库操作）：
            1.url访问server端
            2.超链接访问，即a标签
        post请求：相对于get安全点，，但是没有绝对的安全（修删改可以用post）

表单工作原理

访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。

2.表单元素

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等，以及textarea、select、fieldset和 label标签。

3.input类型标签

input标签输入类型

text 文本输入框

<form>
    User name:<br>
    <input type="text" name="username">
</form>

password 密码输入框

<form>
    User name:<br>
    <input type="password" name="password">
</form>

radio 单选框

<form>
    <input type="radio" name="sex" value="male" checked>Male
    <br>
    <input type="radio" name="sex" value="female">Female
</form>

checkbox 多选框

<form>
    <input type="checkbox" name="vehicle" value="Bike">I have a bike
    <br>
    <input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

submit 提交按钮

<form>
    User name:<br>
    <input type="password" name="password">
    <input type="submit" value="Submit">
</form>

button 按钮(需要配合js使用.) button和submit的区别？

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

file 提交文件：form表单需要加上属性enctype=“multipart/form-data”

<input type="file" value="comments">

上传文件注意两点：

请求方式必须是post
enctype=“multipart/form-data”

input标签输入属性

name属性

表单提交项的键。

注意和id属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的。

value属性

表单提交项的值。

对于不同的输入类型，value 属性的用法也不同：

type=“button”, “reset”, “submit” - 定义按钮上的显示的文本
type=“text”, “password”, “hidden” - 定义输入字段的初始值
type=“checkbox”, “radio”, “image” - 定义与输入相关联的值

<form action="">
    First name:<br>
    <input type="text" name="firstname" value="John">
    <br>
    Last name:<br>
    <input type="text" name="lastname">
</form>

checked属性

设置radio 和 checkbox 默认被选中的项

<form>
    <p>
        爱好:
        <input type="checkbox" name="hobbies" value="basketball">篮球
        <input type="checkbox" name="hobbies" value="football" checked>足球
    </p>
</form>

readonly属性

<form action="">
　　First name:<br>
　　<input type="text" name="firstname" value="John" readonly>
　　<br>
 　Last name:<br>
　　<input type="text" name="lastname">
</form>

disabled

<form action="">
　　First name:<br>
　　<input type="text" name="firstname" value="John" disabled>
　　<br>
　　Last name:<br>
　　<input type="text" name="lastname">
</form>

placeholder属性

placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）

<input type="text" name="fname" placeholder="First name">

multiple属性

multiple 属性是布尔属性。如果设置，则规定允许用户在元素中输入一个以上的值，适用于email和file类型的input标签。

Select images: <input type="file" name="img" multiple>

4.select标签

select标签

元素定义下拉列表

name属性：表单提交项的键
size属性：下拉框选项个数
mulitple属性：multiple设置可多选

optgroup标签

为每一项加上分组

option标签

元素定义待选择的选项。

value属性：表单提交项的值
selected属性：设置下拉框的默认选中项

使用实例！

<select name="city" id="" style="width: 200px">
    <optgroup label="一线城市">
        <option value="BJ">北京</option>
        <option value="SH">上海</option>
        <option value="SZ" selected="selected">深圳</option>
        <option value="GZ">广州</option>
    </optgroup>
    <optgroup label="二线城市">
        <option value="BJ">济南</option>
        <option value="SH">苏州</option>
        <option value="SZ" selected="selected">南京</option>
        <option value="GZ">成都</option>
    </optgroup>
</select>

5.textarea 多行文本框

textarea元素定义多行输入字段（文本域）

<form id="form1" name="form1" method="post" action="">
　　<textarea cols=“宽度” rows=“高度” name=“名称”>
　　　　文本域内容
　　</textarea>
</form>

6.label标签

定义：标签为 input 元素定义标注（标记）。说明

label 元素不会向用户呈现任何特殊效果。
标签的 for 属性值应当与相关元素的 id 属性值相同。

<form method="post" action="">
　　<label for=“username”>用户名</label>
　　<input type=“text” name=“username” id=“username” size=“20” />
</form>

7.fieldset标签

<fieldset>
    <legend>登录吧</legend>
    <input type="text">
</fieldset>

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="https://www.baidu.com" method="get">
   <fieldset>
       <legend>注册页面</legend>
        <p>
            用户名：
            <input type="text" name="username">
            密码：
            <input type="password" name="password">
        </p>
        <p>
            性别：
            <input type="radio" name="gender" value="male" id="ml"><label for="ml">男</label>
            <input type="radio" name="gender" value="female" id="fl"><label for="fl">女</label>
        </p>
        <p>
            爱好:
            <input type="checkbox" name="hobbies" value="basketball" id="bb"><label for="bb">篮球</label>
            <input type="checkbox" name="hobbies" value="football" checked id="fb"><label for="fb">足球</label>
            <input type="checkbox" name="hobbies" value="pingpang" checked id="pp"><label for="pp">乒乓球</label>
        </p>
        <p>
            城市：
            <select name="city" id="" style="width: 200px">
                <optgroup label="一线城市">
                    <option value="BJ">北京</option>
                    <option value="SH">上海</option>
                    <option value="SZ" selected="selected">深圳</option>
                    <option value="GZ">广州</option>
                </optgroup>
                <optgroup label="二线城市">
                    <option value="BJ">济南</option>
                    <option value="SH">苏州</option>
                    <option value="SZ" selected="selected">南京</option>
                    <option value="GZ">成都</option>
                </optgroup>

            </select>
        </p>
        <p>
            <input type="submit" value="注册">
        </p>
   </fieldset>
    
</form>

</body>
</html>

一、初识CSS

1.CSS介绍

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，给HTML设置样式，让它更加美观。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

2.CSS语法

CSS实例

h1 {color:red; font-size:14px;}

selector {
     property: value;
     property: value;
...  property: value
}

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

CSS注释

/*这是注释*/

3.CSS的几种引入方式

1.行内样式

行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。

<p style="color: red">Hello world.</p>

2.嵌入式

嵌入式是将CSS样式集中写在网页的标签对的标签对中。格式如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

3.链接式

将一个.css文件引入到HTML文件中

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

4.导入式

将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，

<style type="text/css">
          @import"mystyle.css"; 此处要注意.css文件的路径
</style>

注意：

导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。

二、CSS选择器

1.基本选择器

元素选择器：找到页面中所有的p标签

p {color: "red";}

ID选择器：根据id查找页面中的标签

#i1 {#号表示id属性，后面的i1表示id属性的值
  background-color: red;  #背景色，color:red是字体颜色
}

标签中的id是不能重复的。

类选择器：根据类名选择页面中的标签

.c1 {  .表示class属性，c1表示class的值
  font-size: 14px;
}
p.c1 {  找到所有p标签里面含有class属性的值为c1的p标签，注意他俩之间没有空格昂
  color: red;
}

注意：

样式类名不要用数字开头（有的浏览器不认）。

标签中的class属性如果有多个，要用空格分隔。

通用选择器：选择多有的标签

* {  *表示所有的标签
  color: white;
}

2.组合选择器

多元素选择器

/*多元素选择器，同时匹配所有div元素或p元素，div和p之间用逗号分隔*/
div,p {
  margin: 5px;
}

后代选择器

/*li内部的a标签设置字体颜色*/
li a {
  color: green;
}

子元素选择器

/*子元素选择器，匹配所有div元素的子元素p */
div>p {
  margin: 5px;
}

毗邻选择器

/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {
  margin: 5px;
}

兄弟选择器

/*i1后面所有的兄弟p标签*/
#i1~p {
  border: 2px solid royalblue;
}

3.属性选择器

/*用于选取带有指定属性的元素。*/
p[title] {
  color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
  color: green;
}

通过属性或者属性的值来查找，这个属性是我们自己定义的，不是id啊class啊这种html自带的属性。

属性选择器扩展：不常用，了解

/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
  color: red;
}

/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
  color: yellow;
}

/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
  color: red;
}

/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {
  color: green;
}

4.伪类选择器

/* 未访问的链接 */
a:link {
  color: #FF0000
}

/* 已访问的链接 */
a:visited {
  color: #00FF00
} 

/* 鼠标移动到链接上 */  这个用的比较多
a:hover {
  color: #FF00FF
} 

/* 选定的链接 */ 就是鼠标点下去还没有抬起来的那个瞬间，可以让它变颜色
a:active {
  color: #0000FF
}

/*input输入框获取焦点时样式*/
input:focus {   #input默认的有个样式，鼠标点进去的时候，input框会变浅蓝色的那么个感觉
  #outline: none;
  background-color: #eee; #框里面的背景色
}

5.伪元素选择器

first-letter

常用来给首字母设置特殊样式.

#将p标签中的文本的第一个字变颜色变大小
p:first-letter { 
  font-size: 48px;
  color: red;
}

before

在某个标签元素之前插入内容

/*在每个<p>元素之后插入内容*/
p:before {
  content:"*";
  color:red;
}

after

在每个标签元素之后插入内容

/*在每个<p>元素之后插入内容*/
p:after {
  content:"[?]";
  color:blue;
}

注：上面的这些前后添加的文本内容在页面上是无法选中的，正常的标签或者文字是可以选中的。

before和after多用于清除浮动。

三、CSS三个特性（重难点）

1.层叠性

层叠性是指当一个标签被设置了多个重复的样式的时候，一个属性会覆盖另外一个属性。

层叠性主要遵循的原则是就近原则，在不考虑优先级的情况下，在多个样式中最终生效的样式是离标签最近的样式。

注意：层叠性只有在多个选择器选中了同一个标签，然后设置了相同的属性，才会发生层叠性。

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        div{
            background-color: red;
        }
        div{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>123</div>  <!-- 最终背景颜色是蓝色 -->
    <div style="background-color: green;">123</div>  <!-- 最终背景颜色是绿色 -->
</body>
</html>

2.CSS继承

页面渲染是根据代码顺序来加载的，所以写在代码下面的效果会覆盖前面的效果。

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。

总结：当选择器相同的时候，按照顺序来看css样式，谁最后就按照谁渲染。那如果是不同的选择器的时候呢？就要学习我们下面的优先级了

/*例如一个body定义了的字体颜色值也会应用到段落的文本中。*/
body {
  color: red;
}

此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的，他的权重是0。

我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。

p {
  color: green;
}

继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。

3.选择器优先级

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。

样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：

注：内联样式的意思是把css样式写在标签里面：

其他的权重：但是有一点说一下，就是上面那个权重计算永不进位的意思是：我们看上面知道class的权重是10，但是即便是11个class相加起来大于id的100权重，也还是id生效，也就是说，不会进位，class组合起来也无法超过id的权重。

除此之外还可以通过添加 !important方式来强制让样式生效，不讲道理的操作，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护，使用方法：

p {
  color: green !important;
}

四、CSS属性操作

1.宽高属性

width属性可以为元素设置宽度。

height属性可以为元素设置高度。

注意：块级标签才能设置宽度，内联标签的宽度由内容来决定。

p {
  width:30px;
  height:50px;  
}

2.文本属性text

字体属性

# 字体类型
body {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

# 字体大小
p {
  font-size: 14px;
}

# 字重（粗细）
p {
  font-weight: bold;
}

# normal    默认值，标准粗细
# bold            粗体
# bolder    更粗
# lighter    更细
# 100~900    设置具体粗细，400等同于normal，而700等同于bold
# inherit    继承父元素字体的粗细值

文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如: **＃**FF0000
一个RGB值 - 如: RGB(255,0,0)，还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
颜色的名称 - 如: red

p { color: rebeccapurple;  }

文字对齐

text-align 属性规定元素中的文本的水平对齐方式。

left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。

letter-spacing 设置文字间隔

text-indent 设置首行缩进

文字装饰

text-decoration 属性用来给文字添加特殊效果。

none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。

3.背景属性

background-color 背景颜色
background-image 背景图片
background-repeat 背景重复
background-position 背景位置

/*背景颜色*/
background-color: red;

/*背景图片*/
background-image: url('1.jpg');  #url里面是图片路径，如果和你的html文件在一个目录下，使用这种相对路径就行了，来个葫芦娃图片试一下

/*背景重复*/
background-repeat: no-repeat; 
　　repeat(默认):背景图片沿着x轴和y轴重复平铺，铺满整个包裹它的标签
　　repeat-x：背景图片只在水平方向上平铺
　　repeat-y：背景图片只在垂直方向上平铺
　　no-repeat：背景图片不平铺

/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/ #200px 200px 是距离父级标签的左边和上边的距离

简写模式：

background:#ffffff url('1.png') no-repeat right top;

4.边框属性

属性介绍

border-width 宽度
border-style 样式
border-color 颜色

#i1 {
  border-width: 2px;  
  border-style: solid;
  border-color: red;
}

简写方式：

#i1 {
  border: 2px solid red;
}

边框-单独设置各边

#i1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}

border-radius

用这个属性能实现圆角边框的效果。

将border-radius设置为长或高的一半即可得到一个圆形。

5.列表属性

list-style-type 设置列表项标志的类型。
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中

ul { list-style-type: square; }
ul {
     list-style-image: url('');
}

6.display属性

用于控制HTML元素的显示效果。

none 隐藏某标签，HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用
block 内联标签设置为块级标签，如果设置了指定宽度，则会用margin填充剩下的部分。
inline 块级标签设置为内联标签
inline-block 使元素同时具有行内元素和块级元素的特点。

none(隐藏某标签)

p{display:none;}

注意与visibility:hidden的区别：

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

# 设置block
span {display:block;}

# 设置inline
li {display:inline;}

# 设置inline-block
#outer{
            border: 3px dashed;
            word-spacing: -5px;
        }

7.外边距(margin)和内边距(padding)

盒子模型

margin： 外边距：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
**padding：**内边距：用于控制内容与边框之间的距离；
Border(边框)：围绕在内边距和内容外的边框。
Content(内容)：盒子的内容，显示文本和图像。

margin外边距

单边外边距属性

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

简写模式：

.margin-test {
  margin: 5px 10px 15px 20px;
}

顺序：上右下左

margin:10px 20px 20px 10px；

        上边距为10px
        右边距为20px
        下边距为20px
        左边距为10px

margin:10px 20px 10px;

        上边距为10px
        左右边距为20px
        下边距为10px

margin:10px 20px;

        上下边距为10px
        左右边距为20px

margin:25px;

        所有的4个边距都是25px

居中应用

.mycenter {
  margin: 0 auto;  #上下0像素，左右自适应，居中的效果
}

padding内边距

单独使用填充属性可以改变上下左右的填充。也就是内容到各个边框的距离。

设置方法同margin

**思考1:**body的外边距

边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），在默认情况下， body距离html会有若干像素的margin，具体数值因各个浏览器不尽相同，所以body中的盒子不会紧贴浏览器窗口的边框了，为了验证这一点，加上：

body{
    border: 1px solid;
    background-color: cadetblue;
}

>>>>解决方法：

body{
    margin: 0;
}

**思考2：**margin collapse（边界塌陷或者说边界重叠）

1、兄弟div：
上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值

2、父子div：
if 父级div中没有border，padding，inlinecontent，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content中的其中一个，然后按此div 进行margin；

<!DOCTYPE html>
<html lang="en" style="padding: 0px">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        body{
            margin: 0px;
        }

        .div1{
            background-color: rebeccapurple;
            width: 300px;
            height: 300px;
            overflow: hidden;

        }
        .div2{
            background-color: green;
            width: 100px;
            height: 100px;
            margin-bottom: 40px;
            margin-top: 20px;
        }
        .div3{
            background-color:teal;
            width: 100px;
            height: 100px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div style="background-color: bisque;width: 300px;height: 300px"></div>

<div class="div1">

   <div class="div2"></div>
   <div class="div3"></div>
</div>

</body>

</html>

>>>>解决方法：

overflow: hidden;

8.float浮动和清除浮动

前引

先来了解一下block元素和inline元素在文档流中的排列方式。

block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效

常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等

所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。

脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

浮动的使用：

float: left; 向左浮动
float: right; 向右浮动
float: none; 默认值，不浮动

关于浮动的两个特点：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
        }

        .r1 {
            width: 300px;
            height: 100px;
            background-color: #7A77C8;
            float: left;
        }

        .r2 {
            width: 200px;
            height: 200px;
            background-color: wheat;
            /*float: left;*/

        }

        .r3 {
            width: 100px;
            height: 200px;
            background-color: darkgreen;
            float: left;
        }
    </style>
</head>
<body>

<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>

</body>
</html>

clear清除浮动

clear语法：
clear : none | left | right | both | inherit

取值：

none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
inherit : 从父元素继承clear属性

但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。

非完全脱离文档流

左右结构div盒子重叠现象，一般是由于相邻两个DIV一个使用浮动一个没有使用浮动。一个使用浮动一个没有导致DIV不是在同个“平面”上，但内容不会造成覆盖现象，只有DIV形成覆盖现象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
        }

        .r1 {
            width: 100px;
            height: 100px;
            background-color: #7A77C8;
            float: left;
        }

        .r2 {
            width: 200px;
            height: 200px;
            background-color: wheat;

        }
    </style>
</head>
<body>

<div class="r1"></div>
<div class="r2">region2</div>

</body>
</html>

>>>>解决方法：要么都不使用浮动；要么都使用float浮动；要么对没有使用float浮动的DIV设置margin样式。

父级塌陷现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            border: 1px solid red;
            width: 300px;
        }

        #box1 {
            background-color: green;
            float: left;
            width: 100px;
            height: 100px;
        }

        #box2 {
            background-color: deeppink;
            float: right;
            width: 100px;
            height: 100px;
        }

        #box3 {
            background-color: pink;
            height: 40px;
        }
    </style>
</head>
<body>

<div class="container">
    <div id="box1">box1 向左浮动</div>
    <div id="box2">box2 向右浮动</div>
</div>
<div id="box3">box3</div>
</body>
</body>
</html>

例子如上：.container和box3的布局是上下结构，上图发现box3跑到了上面，与.container产生了重叠，但文本内容没有发生覆盖，只有div发生覆盖现象。这个原因是因为第一个大盒子里的子元素使用了浮动，脱离了文档流，导致.container没有被撑开。box3认为.container没有高度（未被撑开），因此跑上去了。

>>>>解决方法：

清除浮动

浮动会造成父级标签塌陷问题，所以要清除浮动，有三种方法：

1.固定高度

给.container设置固定高度，一般情况下文字内容不确定多少就不能设置固定高度，所以一般不能设置“.container”高度(当然能确定内容多高，这种情况下“.container是可以设置一个高度即可解决覆盖问题。

或者给.container加一个固定高度的子div：

<div class="container">
                <div id="box1">box1 向左浮动</div>
                <div id="box2">box2 向右浮动</div>
                <div id="empty" style="height: 100px"></div>
</div>
<div id="box3">box3</div>

但是这样限定固定高度会使页面操作不灵活，不推荐！

2.伪元素清除法（推荐）

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

一般业内约定成俗，都把这个清除浮动的class属性命名为clearfix，而不是cc，如果你在别的网页看到了这个clearfix，这个一定是用来清除浮动的。

3.overflow:hidden

overflow：hidden的含义是超出的部分要裁切隐藏，float的元素虽然不在普通流中，但是他是浮动在普通流之上的，可以把普通流元素+浮动元素想象成一个立方体。

如果没有明确设定包含容器高度的情况下，它要计算内容的全部高度才能确定在什么位置hidden，这样浮动元素的高度就要被计算进去。这样包含容器就会被撑开，清除浮动。

9.overflow属性

标签里写入文本，如果文本内容大小超出标签大小，文字就会溢出。溢出后可以设置溢出的现象。

溢出属性值：

visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

overflow（水平和垂直均设置）

overflow-x（设置水平方向，只出现x轴的滚动条）

overflow-y（设置垂直方向，只出现y轴的滚动条）

10.position(定位)

static：默认值

static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

relative: 相对定位

相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。

有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。

absolute: 绝对定位

定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。

元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。

这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

另外，因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        .outet{
            /*position: relative;*/

        }
        .item{
            width: 200px;
            height:200px ;
        }
        .r1{
            background-color: #7A77C8;
        }
        .r2{
            background-color: wheat;
            /*position: relative;*/
            position: absolute;
            top: 200px;
            left: 200px;
        }
        .r3{
            background-color: darkgreen;
        }
    </style>
</head>
<body>

<div class="item r1"></div>
<div class="outet">

    <div class="item r2"></div>
    <div class="item r3"></div>
</div>


</body>
</html>

总结：参照物用相对定位，子元素用绝对定位，并且保证相对定位参照物不会偏移即可。

fixed:固定位置

fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。

注意点：一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>返回顶部示例</title>
  <style>
    * {
      margin: 0;
    }

    .d1 {
      height: 1000px;
      background-color: #eeee;
    }

    .scrollTop {
      background-color: darkgrey;
      padding: 10px;
      text-align: center;  #水平居中
      position: fixed;
      right: 10px;  #距离窗口右边框的距离
      bottom: 20px; #距离窗口下边框的距离
      /*height：20px；
　　　 line-height：20；当line-height等于height的值的时候，就能实现一个文本居中的效果 */
    }
  </style>
</head>
<body>
<div class="d1">111</div>
<div class="scrollTop">返回顶部</div>
</body>
</html>

11.z-index

设置对象的层叠顺序。一般用在模态对话框上。

#i2 {
  z-index: 999;
}

z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素float不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
从父现象：父亲怂了，儿子再牛逼也没用

#自定义的一个模态对话框示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>自定义模态框</title>
  <style>
    .cover {
      background-color: rgba(0,0,0,0.65); #rgba的最后一个参数就是透明度的意思，所以如果我们这样写，就不需要写下面那个opcity了，但是这个只表示的背景颜色的透明度，opcity是标签的透明度及标签的内容(包括里面的文字)及标签下面的子标签的透明度
      position: fixed;
      top: 0;
      right: 0;  top\right\bottom\left都设置为0，意思就是全屏，这个标签把全屏都覆盖了
      bottom: 0;
      left: 0;
      z-index: 998;
      #opcity:0.4; #设置元素的透明度
    }

    .modal {
      background-color: white;
      position: fixed;
      width: 600px;
      height: 400px;
      left: 50%;  #设置了left：50%和top：50%，你就会发现，你这个标签的左上角相对于页面的左面是50%，上面是50%，所以我们还要移动窗口，往左移动标签宽度的一半，往上移动高度的一半就行了。就是下面的margin设置
      top: 50%;
      margin: -200px 0 0 -300px; #左下右上，别忘了，往左移动要负值，往上移动要负值，因为它的移动是按照自己标签的左上角来移动的。
      z-index: 1000;
    }
  </style>
</head>
<body>

<div class="cover"></div>
<div class="modal"></div>
</body>
</html>

相关标签：入门基础小白IT python css html html5

上一篇：淘宝店铺和产品推广的7个技巧

下一篇：微盟“再下沉”，线下的中小企业营销服务究竟怎么玩？

小白IT：炫彩的页面是怎么做的，前端？？？Python前端基础&CSS 效果渲染

文章目录

一 认识HTML

1.web服务的本质

2.HTML是什么？

3.html文档格式

4.html标签格式

标签的语法

几个重要的属性

HTML注释

二、常用标签

1.！DOCTYPE标签

2.head内常用标签

meta标签

1.meta介绍

2.meta标签组成

3非meta标签

3.body内常用标签

基本标签

两个重要标签：div和span

注意

几个概念

判断块级标签和内联标签的方法：

图形标签：img

超链接标签（锚标签a）

列表标签：list

1.无序列表

2.有序列表

标题标签

表格标签：table

表格标签实例

属性

三、HTML表单

1.HTML表单概念

什么是表单

form表单标签属性

注意啦！！！！

表单工作原理

2.表单元素

3.input类型标签

input标签输入类型

input标签输入属性

name属性

value属性

checked属性

readonly属性

disabled

placeholder属性

multiple属性

4.select标签

select标签

optgroup标签

option标签

5.textarea 多行文本框

6.label标签

7.fieldset标签

实例

一、初识CSS

1.CSS介绍

2.CSS语法

CSS实例

CSS注释

3.CSS的几种引入方式

1.行内样式

2.嵌入式

3.链接式

4.导入式

注意：

二、CSS选择器

1.基本选择器

元素选择器：找到页面中所有的p标签

ID选择器：根据id查找页面中的标签

类选择器：根据类名选择页面中的标签

注意：

通用选择器：选择多有的标签

2.组合选择器

多元素选择器

后代选择器

子元素选择器

毗邻选择器

一认识HTML