前端css html

今日内容

前端与后端的概念

前端

任何与用户直接打交道的操作界面都可以称之为前端

后端

不直接与用户打交道主要负责内部真正的业务逻辑的执行

前端三剑客

HTML 网页的骨架>>>:光着身子

CSS 网页的样式>>>:穿上衣服

JavaScript 网页的动态>>>:做动作

前端前戏

1.编写服务端

2.浏览器充当客户端访问服务端

3.浏览器无法正常展示服务端内容（因为服务端的数据没有遵循标准）

4.HTTP协议>>>:最主要的内容就是规定了浏览器与服务端之间数据交互的格式

HTTP2协议

1.四大特性

1.基于请求相应
	客户端发送请求 服务端回应相应
2.基于TCP、IP作用于应用层之上的协议
	该协议属于应用层
3.无状态
	服务端不会保存客户端的状态
4.无连接
	客户端与服务端不会长久的保持连接
	如果想长连接就不能用HTTP协议

2.数据模式

1.请求格式
	请求首行(请求方式（有很多种）协议版本)
	请求头(一大堆k:v键值对)
	换行
	请求体(存放敏感信息 并不是所有的请求方式都有请求体)
2.响应格式
	响应首行(状态码(有很多种)协议版本)
	响应头(一大堆k:v键值对)
	换行
	响应体(存放给浏览器展示的数据)

3.响应状态码

用数字来表达一些文字意义（类似于暗号）
1xx：服务端已经接收到了你的请求正在处理 客服端可以继续发送或者等待（比较短暂）
2xx：200 ok 请求成功 服务端发送了对应的响应
3xx：302（临时） 304（永久）重定向（想访问网页A但是自动跳到了网页B）
4xx：403 访问权限不够 404请求资源不存在
5xx：服务端内部错误

HTML简介

1.直接发送手写数据

2.转为发送文件里面的数据

3.编写HTML出现特殊的现象

超文本标记语言：所见即所得

HTML概括

1.HTML注释语法
	<!--注释内容-->
	
2.HTML文档结构
	<html>	固定格式 html包裹
		<head>	
			主要放跟浏览器交互的配置
		</head>
		<body>
			主要放给用户查看的花里胡哨的内容
		</body>
	</html>
3.HTML标签分类
	单标签（自闭和标签）
		<img/>
	双标签
		<h1></h1>

预备知识

1.网页信息数据一般也会存放于文件中

html

2.pycharm支持前端所有类型的文件编写

内置有自动补全的功能我们只需要专注于标签名的编写即可

3.html文件的打开

内置有自动调用浏览器的功能

head内常见标签

1.title 网页小标题
2.meta 定义网页源信息（很多配置）
	<meta name="keywords" content="查询关键字">
	<meta name="description" content="网页简介">
3.style内部支持编写css代码
	<style>
            h1{
                color: deeppink;
            }
        </style>
    </head>
    <body>
        <h1>Hi i'm joyce!</h1>
    </body>
    更改h1中标题的颜色
4.link引入外部css文件
	新建一个css文件 
	<head>
		<link rel="stylesheet" href="创建的css文件名">
	</head>
5.script支持内部编写js代码也可以引入外部js文件
	    <script>
            prompt('joyce好看吗','当然啦')
        </script>
        弹窗 
        建一个js文件
        console.log('hello joyce!')
		alert('hi!')
		
		<head>
		<script src="3.js"></script>
		</head>

body内基本标签

1.标题系列标签
	h1-h6

2.段落标签
	p

3.其他标签
	u 下划线
	i 斜体
	s 删除线
	b 加粗

4.换行与分割线
	br 换行
	hr 分割

标签的分类
	行内标签 
		u i s b
		内部文本多大就占多大
	块儿级标签
		h系列 p
		独占一行

常见符号

1.&nbsp;  空格
2.&gt；   大于
3.&lt；   小于
4.&amp；  &符
5.&yen；   ￥
6.&copy；  © 
7.&reg；   ®

body内布局标签

div 
	块级标签
span
	行内标签

'''
标签之间可以互相嵌套 并且理论上可以无线套娃
	块级标签内部可以嵌套块级标签和行内标签
		p标签虽然是块儿级标签 但是他的内部也不能嵌套块儿级标签
	行内标签内部只能嵌套行内标签
'''

bady内常用标签

'''
标签括号内填写的 什么=什么 称之为标签的属性
1.默认属性
	标签自带的 编写的时候有自动提示
2.自定义属性
	用户自定义 编写不会有提示甚至会飘颜色
'''

a标签链接标签

href 
	1.填写网址   具备跳转功能
		href ='url'
	2.填写其他标签的id值 具备锚点功能
		href = '#id'
target
	默认_self原网页跳转
	_blank新建网页跳转

img标签图片标签

src 
	1.填写图片地址
tittle
	鼠标悬浮在图片上 自动展示的文本
alt
	图片加载失败提示信息
width\height
	图片尺寸 两者调整一个即可 等比例缩放

列表标签

无序列表

<ul>
   <li>手机</li>
   <li>衣服</li>
</ul>
ps:页面上所有有规律排列的横向或者竖向的数据 一般使用的都是无序列表

有序列表

<ol type="a">
    <li>111</li>
    <li>222</li>
</ol>
ps:还可以通过type竖向切换数字

标题列表

<dl>
   <dt>大标题</dt>
       <dd>小标题</dd>
   <dt>大标题</dt>
       <dd>小标题</dd>
</dl>

表格标签

1.先写基本骨架
<table>
   <thead></thead>
   <tbody></tbody>
</table>
2.再写表头及表单数据
<tr>             一个tr标签就代表一行
  <th>编号</th>   th主要用于表头字段中 用来加粗显示
  <th>姓名</th>
  <th>年龄</th>
</tr>
<tr>
  <td>1</td>      td主要用于表达式中
  <td>jason</td>
  <td>18</td>
</tr>
<tr>
  <td>2</td>
  <td>kevin</td>
  <td>22</td>
</tr>

表单标签

可以获取到用户的数据并发送给服务端

form标签

action 控制数据的提交地址
method 控制数据的提交方法

input标签

type属性
	text      普通文本
	password  密文展示
	date      日期选项
	email     电子邮件
	radio     单选
	checkbox  多选
	file      文件
	submit    提交按钮
	reset     重置表单
	button    暂无功能

select标签下拉框

option  一个个选项

texearea标签获取大段文本

input 标签应该有name属性

name属性相当于字典的键 input标签获取道德用户数据相当与字典的值

点击发送就会组织成字典的形式发送给服务端这样才具有明确意义

表单标签的补充说明

基于form表单发送数据

1.用于获取用户数据的标签至少应该含有name属性

name属性相当于字典的键

用户输入的数据会被保存到标签的values属性中

values属性相当于字典的值

2.如果不需要用户填写数据只需要选择那么我们需要自己填写values

<input type="radio" name="gender" value="male">

微信截图_20221201145240

ps:没有name属性的标签 form表单会直接忽略不会发送

3.针对input标签理论上应该配一个label标签绑定但是也可以不写

<form action="">
  <label for="d1">
  username: <input type="text" id="d1">
</label>

4.标签的属性如果和属性值相等那么可以简写

<input type="file" multiple="multiple">
<input type="file" multiple>
写和不写效果是一样的

5.针对选择类型的标签可以提前设置默认选项

单选（checked）：
    <input type="radio" name="gender" checked>男
    <input type="radio" name="gender" >女
多选（checked）：
    <input type="checkbox" name="gender" checked> basketball
    <input type="checkbox" name="gender" checked> football
    <input type="checkbox" name="gender" >run

6.下拉框与文件上传可以复选

下拉框(selected)：
   	<select name="" id=""> multiple
       <option value="">111</option>
       <option value="" selected>222</option>
       <option value="">333</option>
	</select>
文件复选：
	 <input type="file" multiple>

CSS层叠样式表

主要用来调节html标签的各种样式

思考：页面都是由HTML构成的并且页面上有很多相同的HTML标签但是相同的HTML标签在不同的位置可能有不同的样式我们如何区分标签

标签的两大重要属性>>>:区分标签

1.class属性

分门别类主要用于批量查找

2.id属性

精确查找主要用于点对点

学习css的流程

1.先学习如何让查找标签

2.在学习如何调整样式

1.css语法结构

选择器 {
    样式名1：样式值1；
    样式名2：样式值2
}

2.css注释语法

/*注释内容*/

3.引入css的多种方式

1.head内style标签内部编写（学习的时候使用）
2.head内link标签引入（标准的方式）
3.标签内部通过style属性直接编写（不推荐）

CSS选择器

1.css基本选择器

1.标签选择器（直接按照标签名查找标签>>>:范围查询）

    <style>
        div{
            color: blue;
        }
    </style>

2.类选择器（按照标签的class值查找标签）.是重点

    <style>
        .c1{
            color: blue;
        }
    </style>

3.id选择器（根据标签的id值精确查找）

    <style>		
		#d1{
            color: blue;
        }
    </style>

4.通用选择器（直接选择页面所有的标签）

    <style>
        *{
            color: blue;
        }
    </style>

2.css组合器选择

预知知识点我们对标签的嵌套有另外一套说辞

ppp

ppp

div

divdiv

divdivp
divdivpspan

divp

divspan

ppp

spanspan
针对标签的上下层级以及嵌套有另外的说法
父标签后代标签子标签弟弟标签哥哥标签祖先标签

1.后代选择器（空格）

    <style>
        div span {
            color: deeppink;
        }
    </style>

2.儿子选择器（大于）

	<style>
        div>span {
            color: deeppink;
        }
    </style>

3.毗邻选择器

	<style>
        div+span {
            color: deeppink;
        }
    </style>

4.弟弟选择器

	<style>
        div~span {
            color: deeppink;
        }
    </style>

3.分组与嵌套

多个选择器合并查找
	div,p,span {  
            color: yellow;
        }

 	#d1,.c1,span {
            color: green;
        }
查找class里含有c1的div
	div.c1 {   
            color: red;
        }
查找id是d1的div
	div#d1 {                         
            color: red;
        }
查找含有c1样式值里面含有c2样式值的p标签
	.c1 p.c2 {  
           color: antiquewhite; 
        }

4.属性选择器

按照属性名查找
	<style>
        [username]{
            color: deeppink;
        }
    </style>
按照属性名等于属性值查找
    <style>
        [username='jason']{
            color: deeppink;
        }
    </style>
查找属性名是username属性值是jason的div标签
    <style>
        div[username='jason']{
            color: deeppink;
        }
    </style>

5.伪类选择器

a标签补充说明针对没有点击过的网址默认是蓝色点击过是紫色

鼠标碰到变颜色

a:hover {
       color: orange;
   }

鼠标点击之后变颜色

    	color: chartreuse;
    }

鼠标点击跳转结束变颜色

a:visited{
        color: darkmagenta;
     }

6.伪元素选择器

	     p:first-letter {
            font-size: 48px;
            color: red;
        }
        p:before {		css添加文本无法正常选中
            content: '嘿嘿嘿';
            color: blue;
        }
        p:after {		css添加文本无法正常选中
            content: '呵呵呵';
            color: red;
        }

选择器优先级

1.选择器相同导入方式不同

就近原则

2.选择器不同导入方式相同

内联样式>id选择器>类选择器>标签选择器

CSS样式调节

字体样式

字体代码    
	font-size:14px 24px 28px 36px	
字体粗细
    font-weight: lighter;     	  
color:三种模式
        color: red;
        color: #3d3d3d;
        color: rgb(186,11,98);
    rgba()最后一个参数还可以控制透明度 0~1
文本居中   	
    text-align: center		
主要用于a标签取消下划线
	 text-decoration: none;  
首行缩进
   	 text-indent: 32px;

背景属性

	div {
            width: 800px;
            height: 800px;
            /*background-color: red;*/
            /*background-image: url("https://img2.baidu.com/it/u=167083063,1652780278&fm=253&fmt=auto&app=138&f=JPEG?w=369&h=472");*/
            /*background-image: url("666.png");*/
            /*background-repeat: no-repeat;*/
            /*background-repeat: repeat-x;*/
            /*background-repeat: repeat-y;*/
            /*background-position: center center;*/
            background:  url("666.png") blue no-repeat center center;
        }
	当多个属性名有相同的前缀 那么可以简写一次性完成

边框

上下左右边框：
		p {
            border-left/right/top/bottom-width: 5px;
            border-left/right/top/bottom-color: black;
            border-left/right/top/bottom-style: solid;
        }
简写：     
		p {
            border: black solid 5px;
        }

画圆

        .c1{
            border: black 5px solid;
            height: 200px;
            width:200px;
            border-radius: 50%;
        }

display

'''行内标签是无法设置长宽 只有块儿级可以设置'''
dispaly：none 彻彻底底的隐藏标签（页面上不会显示 也不会保留标签的位置）
visibility: hidden 隐藏的不彻底 知识内容隐藏 位置会空出来

盒子模型

我们可以将标签看成是一个快递盒

1.快递盒里面的实际物体 content（内容）

2.物体与内部盒子墙的距离 padding（内边距、内填充）

3.快递盒的厚度 dorder（边框）

4.快递盒之间的距离 margin（外边距）

内容盒边框之间的距离

padding: 50px; #上下左右
padding: 50px 40px #上下 左右
padding： 50px 40px 30px #上 左右 下
padding： 50xp 40xp 30xp 40xp #上 下 左 右

margin与padding用法一致

针对标签的嵌套 水平方向可以居中
margin：0 auto；

浮动

浮动就是用来做页面布局的

浮动的现象

float:left/right

浮动带来的影响

浮动的元素是脱离正常文档流的会造成父标签塌陷

如何解决浮动的影响

clear

解决浮动带来的影响终极方法

先提前写好样式类
.clearfix:after{
    content:'';
    display:block;
    clear:both;
}
谁塌陷了 就给谁添加clearfix样式类就可以了

ps:浏览器会优先展示文本内容（如果被挡住）

溢出

overflow：水平和垂直均设置
overflow-x 设置水平方向
overflow-y 设置垂直方向

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

div {
            height: 150px;
            width: 150px;
            border: 5px solid greenyellow;
            border-radius: 50%;
            overflow: hidden;
        }
div img {
            max-width: 100%;
        }

定位

1.静态static

所有的标签默认都是静态的无法改变位置

2.相对定位relative

基于标签原来的位置

3.绝对定位absoiute

基于某个定位给过的父标签坐做定位

4.固定定位fixed

基于浏览器窗口固定不动

        .c1 {
            background-color: red;
            height: 100px;
            width: 100px;
            position: relative;
        }
        .c2 {
            background-color: greenyellow;
            height: 100px;
            width: 200px;
            position: absolute;
            top: 100px;
            left: 100px;
        }
		.c1 {
            border: 5px solid black;
            height: 100px;
            width: 100px;
            position: fixed;
            right: 100px;
            bottom: 200px;
        }

z-index

浏览器界面其实是一个三维坐标系z轴指向用户

1.最底部是正常的颜色（z=0）最远层

2.黑色的透明区（z=99）中间层

3.白色的注册区域（z=100）离用户最近

body {
            margin: 0;
        }
.cover {
            background-color: rgba(127,127,127,0.5);
            position: fixed;
            left: 0;
            bottom: 0;
            right: 0;
            top: 0;
            z-index: 100;
        }
.modal {
            height: 200px;
            width: 400px;
            background-color: white;
            z-index: 101;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -100px;
        }