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>
内接式1,外接式2
把css文件放在css文件夹中
span{
color: greenyellow;
}
p{
background: pink;
font-size: 40px;
}
index.css
<!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 有请求必有响应
请求：请求头和请求体
响应：响应头和响应体
Day040--HTML&CSS的更多相关文章
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
- 理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
- 理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
- 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
- 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
随机推荐
- SQLServer之函数简介
用户定义函数定义 与编程语言中的函数类似,SQL Server 用户定义函数是接受参数.执行操作(例如复杂计算)并将操作结果以值的形式返回的例程. 返回值可以是单个标量值或结果集. 用户定义函数准则 ...
- linux内核数据结构之kfifo【转】
1.前言 最近项目中用到一个环形缓冲区(ring buffer),代码是由linux内核的kfifo改过来的.缓冲区在文件系统中经常用到,通过缓冲区缓解cpu读写内存和读写磁盘的速度.例如一个进程A产 ...
- LeetCode算法题-Perfect Number（Java实现）
这是悦乐书的第249次更新,第262篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第116题(顺位题号是507).我们定义Perfect Number是一个正整数,它等于 ...
- 力扣算法题—079单词搜索【DFS】
给定一个二维网格和一个单词,找出该单词是否存在于网格中. 单词必须按照字母顺序,通过相邻的单元格内的字母构成,其中“相邻”单元格是那些水平相邻或垂直相邻的单元格.同一个单元格内的字母不允许被重复使用. ...
- 同步锁Synchronized与Lock的区别?
synchronized与Lock两者区别: 1:Lock是一个接口,而Synchronized是关键字. 2:Synchronized会自动释放锁,而Lock必须手动释放锁. 3:Lock可以让等待 ...
- PHP奇淫技巧
https://www.jb51.net/list/list_67_1.htm PHP技巧:https://www.jb51.net/list/list_67_13.htm mysql三范式 1NF: ...
- Linux内核入门到放弃-模块-《深入Linux内核架构》笔记
使用模块 依赖关系 modutils标准工具集中的depmod工具可用于计算系统的各个模块之间的依赖关系.每次系统启动时或新模块安装后,通常都会运行该程序.找到的依赖关系保存在一个列表中.默认情况下, ...
- Guava Cache探索及spring项目整合GuavaCache实例
背景 对于高频访问但是低频更新的数据我们一般会做缓存,尤其是在并发量比较高的业务里,原始的手段我们可以使用HashMap或者ConcurrentHashMap来存储. 这样没什么毛病,但是会面临一个问 ...
- go语言-值类型与引用类型
https://www.cnblogs.com/java-zhao/p/9942311.html https://blog.csdn.net/TDCQZD/article/details/826836 ...
- iOS 封装SDK以及封装时bundle文件的处理
这篇教程的主要目的是解释怎么样在你的iOS工程中创建并使用一个SDK,俗称.a文件. 环境:xcode 9.0 创建一个静态库工程 打开Xcode,点击File\New\Project, 选择iOS\ ...