Day040--HTML&CSS
内容回顾：
标签分类：
（1）行内标签
span 小跨度的标签
i
em
a
特点：
（1）在一行内显示
（2）不能设置宽高，如果不设置宽高，默认是内容的宽高
（2）块级标签
h1~h6
h1页面中尽量的只有一个，为了seo和爬虫
div: division 分割 作用：划分网页的区域 如果一旦网页划分之后，这些div就会形成父子关系，同级的关系
文档中 各种标签嵌套会形成‘文档树’
table 表格标签
table 主要是给用户展示的页面
form 表单标签
***********作用：主要是与服务器进行交互**********
input 输入框
type
:
p:
学习的p的第一天，时刻记住 p里面只能放行内标签,img和表单控件，不能放块级标签
ul 无序列表
li
ol 有序列表
li
dl
dt 定义的标题
dd 定义标题的内容
标签嵌套规则：
1.行内标签 尽量不要嵌套块级标签
2.块可以嵌套行内标签
3.p里面只能放行内标签,img和表单控件，不能放块级标签
!+Tab 自动显示移动端定义文档
今日内容：
（1）表单控件
input
type:
radio 单选
name:
如果两个单选的name值一样，会产生互斥效果
value:
单选的值
checkbox 多选
name
value
file 上传文件使用
****注意：如果有文件需要提交给服务器，method必须为POST，enctype必须为multipart/form-data****
button 闭合标签
普通的按钮
submit 提交按钮
reset 重置按钮
select 下拉菜单
name 会被封装到请求体中的key
value D是标签显示的内容,会被封装到请求体中的value
selected 选中
button 普通的标签
textarea
rows 行数
cols 列数
表单控件中所有的值 靠的是value属性
img标签的值靠的是src
其它标签的内容都是文本
<!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> </head> <body> <form action="服务端网址" method="post" enctype="multipart/form-data"> <p class="user"> <label for="user">用户名:</label> <input type="text" name="user" placeholder="请输入用户名" id="user"> </p> <p class="pwd"> <label for="pwd">密码</label> <input type="password" name="pwd" placeholder="请输入密码" id="pwd"> </p> <p> <!--单选框--> 男<input type="radio" name="gender" value="male" checked="checked"> 女<input type="radio" name="gender" value="female" > </p> <p> <!--多选框--> 抽烟<input type="checkbox" name="favourites" value="smoke"> 喝酒<input type="checkbox" name="favourites" value="drink"> 烫头<input type="checkbox" name="favourites" value="hair_cut"> </p> <p> <input type="file"> </p> <p> <input type="submit" value="注册"> <input type="button" value="登录"> <button type="submit"> 按钮</button> <button type="reset">重置</button> </p> <p> <select name="school" id="school"> <option value="1">北京大学</option> <option value="2">清华大学</option> <option value="3">北京外国语大学</option> <option value="4">人民大学</option> </select> </p> <p> <textarea name="self_introduction" id="introduction" cols="30" rows="10" placeholder="请输入自我介绍"></textarea> </p> <p> <button type="submit" >提交</button> </p> </form> </body> </html>
（2）css的三种引入方式
层叠样式表 Cascading Style Sheet
作用： 定义了文档的样式，给页面美化
- 引入css的方式
1.行内样式
<div style='width:200px;'></div>
2.内接样式(一种)
在head标签中 用style标签声明
3.外接式(两种:
在head标签中，用link连接另外的一个css文件（解耦）
@import url("") /*CSS3*/
总结：行内样式的优先级大于内接样式和外接,内接和外接样式以后面设置的为主
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> /*内接式*/ /*找标签 选择器:选中标签*/ div{ color: darkcyan; } p{ color: darkred; font-size: 30px; } .content{ color: blue; } </style> <!--外接式--> <!--<link rel="stylesheet" href="./css/index.css">--> <style type="text/css"> @import url('./css/index.css'); </style> </head> <body> <!--标准文档流下 总结: 行内样式的优先级1000 大于 内接和外接式--> <!--行内样式--> <div class="content" style="color:salmon;"> 你好啊 </div> <p>吃了吗</p> <span>大猪蹄子</span> </body> </html>
把css文件放在css文件夹中
span{
color: greenyellow;
}
p{
background: pink;
font-size: 40px;
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> /*权重问题 数数 数选择器的数量: id, class, 标签*/ /*1 0 0*/ #cat{ color: blue; } /*0 1 0*/ .animal{ color: green; } /*0 1 0*/ .male{ color: yellow; } /*0 0 1*/ div{ color: red; } </style> </head> <body> <div class="animal male" id="cat"> 娃哈哈 <div> <div> 猜猜我的颜色 </div> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*后代选择器*/ /*.box1 p{*/ /*color: red;*/ /*}*/ /*子代*/ .box2 .box3 p{ color: aqua; } .box3 p{ color: purple; } .box2 p{ color: green; } /*组合选择器*/ p, span, a{ font-size: 12px; } *{ font-size: 16px; padding: 0; margin: 0; } /*交集选择器*/ /*.box{*/ /*color: red;*/ /*}*/ p{ font-size: 30px; } p.active{ background: yellow; } </style> </head> <body> <div class="box1" id="wrap1"> <div class="box2" id="wrap2"> 呵呵 <div class="box3 box33" id="wrap3"> <p class="box active">猜测我的颜色</p> </div> <p>哈哈哈</p> </div> </div> <a href="#">百度一下</a> <span>你好啊</span> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*1 2 1*/ .box1 .box2 #wrap3 p{ color: red; } /*1 2 1*/ #wrap1 .box2 div .active{ } /*2 0 2*/ #wrap1 #wrap2 div p{ color: aqua; } </style> </head> <body> <div class="box1" id="wrap1"> <div class="box2" id="wrap2"> <div class="box3" id="wrap3"> <p class="active">猜猜我的颜色</p> </div> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ font-size: 12px; } .box1 #wrap2 div p{ color: red; font-size: 20px; } /*继承来的权重为0, 与选中的标签没有可比性*/ .box1 #wrap2 #wrap3{ color: green; height: 50px; background: yellow; text-align: center; line-height: 50px; /*font-size: 20px;*/ /*background-color: red;*/ /*!*让文本在盒子中心对齐*!*/ /*text-align: right;*/ /*!*行高=盒子的高度 让文本居中*!*/ /*height: 50px;*/ /*line-height: 50px;*/ /*text-decoration: underline;*/ } </style> </head> <body> <div class="box1" id="wrap1"> <div class="box2" id="wrap2"> <div class="box3" id="wrap3"> <p class="active">猜猜我的颜色</p> </div> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #wrap1 #wrap2 .box3{ color: yellow; } .box1 #wrap2 .box3{ color: red; } </style> </head> <body> <div class="box1" id="wrap1"> <div class="box2" id="wrap2"> <div class="box3" id="wrap3"> <p class="active">猜猜我的颜色</p> </div> </div> </div> </body> </html>
（3）css选择器
基础选择器
- 标签选择器
选中所有 找的共性的内容，不管标签藏的多深 都可以选中
语法： p{}
- 类选择器
选中所有，找的有共性 class可以多个重复的类名
<div class='box active' id='box'></div>
p class box
语法：.box{}
- id选择器
选择唯一的标签，因为id是唯一
语法： #box{}
- 通配符选择器
选择所有
语法： *{}
高级选择器
- 后代选择器
选中这个div下面所有的后代（儿子,孙子）
语法：
div p{}
- 子代选择器
选中亲儿子
语法：
div>p{}
- 组合选择器 组合选择器优先级>*
- 交集选择器
伪类选择器 a
伪元素选择器
css3的常用选择器
先找定义到具体标签的样式,如果都定义到了具体标签,就比权重. 如果只有一个定义到定义到了父标签,没有定义到子标签,子标签跟随父标签的样式. 如果两个定义到了父标签,比权重.
结论：当权重一样的时候 是以后来设置的属性为准，前提必须权重一样 。‘后来者居上 ’。
权重问题：
/* 行内权重1000 > id 100 > 类 10 > 标签 1*/
如果权重一样 以后面设置的为主
继承性：
有一些属性能够被继承 color ,font-*,line-height,text-align
有请求必有响应
请求：请求头和请求体
响应：响应头和响应体
