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的动 ...
随机推荐
- Linux内存描述之内存页面page--Linux内存管理(四)
1 Linux如何描述物理内存 Linux把物理内存划分为三个层次来管理 层次 描述 存储节点(Node) CPU被划分为多个节点(node), 内存则被分簇, 每个CPU对应一个本地物理内存, 即一 ...
- 拉勾网爬取全国python职位并数据分析薪资，工作经验，学历等信息
首先前往拉勾网“爬虫”职位相关页面 确定网页的加载方式是JavaScript加载 通过谷歌浏览器开发者工具分析和寻找网页的真实请求,确定真实数据在position.Ajax开头的链接里,请求方式是PO ...
- 4.13Python数据处理篇之Matplotlib系列(十三)---轴的设置
目录 目录 前言 (一)设置轴的范围 1.同时对于x,y轴设置 2.分别对与x,y轴的设置 (二)设置刻度的大小 1.普通的刻度设置 2.添加文本的刻度设置 3.主副刻度的设置 (三)设置轴的数据 1 ...
- docker容器日志收集方案（方案二 filebeat+syslog本地日志收集）
与方案一一样都是把日志输出到本地文件系统使用filebeat进行扫描采集 不同的是输出的位置是不一样的 我们对docker进行如下设置 sudo docker service update --lo ...
- 爬虫系列---scrapy全栈数据爬取框架(Crawlspider)
一 简介 crawlspider 是Spider的一个子类,除了继承spider的功能特性外,还派生了自己更加强大的功能. LinkExtractors链接提取器,Rule规则解析器. 二 强大的链接 ...
- Zookeeper集群为什么要是单数
(原) 在zookeeper集群中,会有三种角色,leader. follower. observer分别对应着总统.议员.观察者. 半数以上投票通过:可以这样理解.客户端的增删改操作无论访问到了哪台 ...
- MySQL之视图、触发器、事务、存储过程、函数
一 视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,可以将该结果集当做表来使用. 使用视图我们可以把查询过程中的 ...
- day15-面向对象基础（二）
今天整理类的组合以及类的三大特性 1.类的组合 2.类的继承 3.类的封装 4.类的多态 开始今日份整理 1.类的组合 类与类之间,并不是独立的,很多的时候在正常使用的时候都是类与类之间互相调用,所以 ...
- 转://诊断 Grid Infrastructure 启动问题 (文档 ID 1623340.1) .
文档内容 用途 适用范围 详细信息 启动顺序: 集群状态 问题 1: OHASD 无法启动 问题 2: OHASD Agents 未启动 问题 3: OCSSD.BI ...
- Golang 入门系列(九) 如何读取YAML,JSON,INI等配置文件
实际项目中,读取相关的系统配置文件是很常见的事情.今天就来说一说,Golang 是如何读取YAML,JSON,INI等配置文件的. 1. json使用 JSON 应该比较熟悉,它是一种轻量级的数据交换 ...