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的动 ...
随机推荐
- ASP.NET Core 入门教程 3、ASP.NET Core MVC路由入门
一.前言 1.本文主要内容 ASP.NET Core MVC路由工作原理概述 ASP.NET Core MVC带路径参数的路由示例 ASP.NET Core MVC固定前/后缀的路由示例 ASP.NE ...
- Clickhouse v18编译记录
简介 ClickHouse是"战斗民族"俄罗斯搜索巨头Yandex公司开源的一个极具"战斗力"的实时数据分析数据库,是面向 OLAP 的分布式列式DBMS,圈内 ...
- 利用ZYNQ SOC快速打开算法验证通路（5）——system generator算法IP导入IP integrator
一.前言 利用FPGA设计算法一直以来都是热点,同样也是难点.将复杂的数学公式 模型通过硬件系统来搭建,在低延时 高并行性等优势背后极大提高了设计难度和开发周期.Xilinx公司的sysGen(sys ...
- apache https配置【转】
博文来源:apache https配置 参考博文:apache.nginx配置自签名证书 1. 确认是否安装ssl模块 是否有mod_ssl.so文件 2. 生成证书和密钥 linux下 步骤1: ...
- SQLServer之创建事务未提交读
未提交读注意事项 使用 SET TRANSACTION ISOLATION LEVEL READ UNCOMMITTED 指定会话的锁定级别. 一次只能设置一个隔离级别选项,而且设置的选项将一直对那个 ...
- Dynamics 365 CRM 开发架构简介
Dynamics 365 CRM提供了多种编程模型,你可以灵活地按需选用最佳模式. 本文是对Dynamics 365 CRM编程模型的综述. 概览 下图表明了Dynamics 365 CRM的主要可编 ...
- vue给不同环境配置不同打包命令
第1步:安装cross-env 1 npm i --save-dev cross-env 第2步:修改各环境下的参数 在config/目录下添加test.env.js.pre.env.js. 修改pr ...
- 一位月薪1.2w的北漂程序员真实生活！
“ 每个人都有一条生活道路.千万人,千万条,各不相同,各有特点.但是并不是好人都有一条好路,坏人都有一坏路.有的时候却恰恰相反.这虽然不是历史的必然,但却是客观社会存在的.今天咱们说的这部书是发生在当 ...
- c++stack类的用法
官方解释: LIFO stack Stacks are a type of container adaptor, specifically designed to operate in a LIFO ...
- 基于SpringBoot搭建应用开发框架(二) —— 登录认证
零.前言 本文基于<基于SpringBoot搭建应用开发框架(一)——基础架构>,通过该文,熟悉了SpringBoot的用法,完成了应用框架底层的搭建. 在开始本文之前,底层这块已经有了很 ...