内容回顾:
标签分类:
(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的更多相关文章

  1. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  5. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  6. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  7. 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  9. 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  10. 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

  1. Mina的IoBuffer改造成Netty的ByteBuff

    背景:部标GPS通讯底层全部改造成基于Netty服务器实现的,现将Mina的依赖移除,修改过程中有用到缓冲区的读写.现做了如下修改: 原有基于Mina的IoBuffer对字节读写封装代码如下: pac ...

  2. 浅谈TCP IP协议栈(四)IP协议解析

    通过之前的网络层基础知识,IP地址以及路由器的简介,大家应该对于TCP/IP有一个大致的了解,在脑海里应该对于网络的几个基础概念有个大概的了解,简单点说整个协议栈就是在做一件事,规定网络报文(网络传输 ...

  3. 网络编程 单纯UDP通信

    网络编程 单纯UDP通信 1,UDP发送端 2,UDP接收端 UDP发送端: #include <stdio.h> #include <unistd.h> #include & ...

  4. Linux 用户关联命令

    在执行useradd命令创建用户时,它首先读取/etc/default/useradd文件的配置参数,然后通过这些参数来配置新创建的用户,如创建名为luser的用户. [root@rhl5 -]# u ...

  5. 详解 CORS跨域的几种不同实现方式

    CORS 定义 CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing),它允许浏览器向跨源服务器,发出XMLHttpRequ ...

  6. 英语口语练习系列-C04-学校生活

    连接到英语口语系列总分类 连接到上一章常用问句 登鹳雀楼 登鹳雀楼 唐代:王之涣 白日依山尽,黄河入海流. 欲穷千里目,更上一层楼. He is a fraternity brother. 他是兄弟会 ...

  7. Docker,Docker Compose,Docker Swarm,Kubernetes之间的区别

    Dcoker Docker 这个东西所扮演的角色,容易理解,它是一个容器引擎,也就是说实际上我们的容器最终是由Docker创建,运行在Docker中,其他相关的容器技术都是以Docker为基础,它是我 ...

  8. 使用superlance插件增强supervisor的监控能力

    supervisor与superlance简介 supervisor是一款用python编写的进程监控.进程守护和进程管理的工具,可以工作在各种UNIX-like的操作系统上,通过简单的配置就可以启动 ...

  9. npm:Fatal error in , line 0 #unreachable code 解决

    是nodejs环境本身的问题,下载nodejs执行repair即可

  10. SQL MID() 函数

    MID() 函数 MID 函数用于从文本字段中提取字符. SQL MID() 语法 SELECT MID(column_name,start[,length]) FROM table_name 参数 ...