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的动 ...
随机推荐
- huffman树即Huffma编码的实现
自己写的Huffman树生成与Huffman编码实现 (实现了核心功能 ,打出了每个字符的huffman编码 其他的懒得实现了,有兴趣的朋友可以自己在我的基础增加功能 ) /* 原创文章 转载请附上原 ...
- jsp 简单下载
<%@ page language="java" import="java.util.*" contentType="text/html;cha ...
- WebRtc编译好的vs2015源码
一直想看webrtc的源码,苦于FQ能力有限且整个编译过程耗时巨大,故求助于互联网.在互联网寻找许久编译好的Webrtc源码,好多版本下载下来总是报各种错误,很是失落. 皇天不负有心人,终于寻得一版可 ...
- LeetCode算法题-Average of Levels in Binary Tree（Java实现）
这是悦乐书的第277次更新,第293篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第145题(顺位题号是637).给定一个非空二叉树,以数组的形式返回每一层节点值之和的平 ...
- 【Python 08】汇率兑换2.0-1（字符串索引）
1.案例描述 设计一个汇率换算程序,其功能是将人民币转换为美元,或者美元转换为人民币. 增加功能:根据输入判断是人民币还是美元,进行相应的转换计算. 2.案例分析 3.字符串 两个双引号或单引号括起 ...
- Python开发【内置模块篇】日志模块
logging配置 import logging logging.basicConfig(level=logging.WARNING, format='%(asctime)s %(filename)s ...
- org.apache.ibatis.builder.IncompleteElementException: Could not find result map com.hp.entity.Emp
错误提示代码: org.apache.ibatis.builder.IncompleteElementException: Could not find result map com.hp.entit ...
- centos7下kubernetes（18。kubernetes-健康检查）
自愈能力是容器的重要特性.自愈的默认方式是自动重启发生故障的容器. 用户还可以通过liveness和readiness探测机制设置更精细的健康检查,进而实现: 1.零停机部署 2.避免部署无效的镜像 ...
- spring中基于注解使用AOP
本文内容:spring中如何使用注解实现面向切面编程,以及如何使用自定义注解. 一个场景 比如用户登录,每个请求发起之前都会判断用户是否登录,如果每个请求都去判断一次,那就重复地做了很多事情,只要是有 ...
- Dubbo-Zookeeper安装
安装zookeeper: 1.拖入tar.gz包,解压 2.建立/usr/zookeeper路径,该路径创建logs文件夹和data文件夹 3.进入conf目录,复制一份zoo_sample.cfg为 ...