day--43 HTML标签和CSS基本小结
HTML标签和CSS基本小结
一：常用标签
01：块标签 p,h1--h6 ,hr ,div
02：内联标签 b,i,u,s
小提示：块标签可以嵌套内置元素或者某些块级元素，但内联元素不能包含块级元素 ，只能包含其他内联元素
但是div可以包含div
二：input标签
前提：id和name的区别：id是唯一不可重复的，name不是，name主要是客户端发送给服务端的内容的表示，服务端根据这个表示取值
<input type="tex"/> 单行输入文本
<input type="password" /> 密码输入框（不显示明文）
<input type="date" /> 日期输入框
<input type="checkbox" checked="checked" name="x" /> 多选框
<input type="radio" name="x" /> 单选框
<input type="submit" value="提交" /> 向服务端发送填写在浏览器中标签中的内容，配合form标签使用，页面会刷新
<input type="reset" value="重置" /> 页面不会刷新，将所有输入的内容清空
<input type="button" value="普通按钮" />
<input type="hidden" /> 隐藏输入框
<input type="file" /> 在form表单下可以选择本地文件
属性说明：
01：name：表单提交时的“键”，不具有惟一性，id具有惟一性
02：value：表单提交时对应的值
type="button","reset","submit"时，为按钮上显示的文本内容
type="text","password","hidden" 时，为输入框的初始值
type="checkbox","radio","file" 时，为输入的相关的值
03：checkbox：radio和checkbox默认被选中的项
04：readonly：text和password设置为只读
05：disable：input都能用
三：form标签
01：功能：
form表单用于向服务器传输数据，从而实现用户与web服务器的交互
表单能包含textarea ，select，fieldset和label标签
属性 描述
accept-charset： 规定在被提交表单中使用的字符集（默认：页面字符集）。
action： 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete： 规定浏览器应该自动完成表单（默认：开启）。
enctype： 规定被提交数据的编码（默认：url-encoded）。
method： 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name： 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate： 规定浏览器不验证表单。
target： 规定 action 属性中地址的目标（默认：_self）。
表单的使用例子：
<form action="" method="post" >
<div>
<label>用户名: </label>
<input id="yonghuming" type="text" placeholder="请输入用户名" name="username" >
</div> <div>
<lable> 密码: </lable>
<input id="mima" type="password" placeholder="请输入密码" name="pwd">
</div> <div>
<lable for="m"> 请选择性别： </lable>
<input id="m" type="radio" name="sex" value="a"> 男 <lable for="w"> </lable>
<input id="w" type="radio" name="sex" value="b"> 女
   
<select name="city" id="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select> </div> <div>验证码
<input type="text" name="yzm">
</div> <div>提交时间：
<input type="datetime-local" name="tm">
</div> <div>
<input type="submit" value="提交"> <!-- submit 在网页显示是提交，value改的是submit显示的内容 -->
   <input type="reset" value="重置"> <!-- 将输入的内容清空 -->
</div> <div>
<input type="file">
</div>
<textarea name="sr" id="s" cols="20" rows="10"></textarea> </form>
四：css介绍
01：CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，给HTML设置样式，让它更加美观。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
02:css注释 /* 之间的内容被注释 */
03：css语法
css由选择器和申明组成，申明又由属性和值，每个申明之间用 "分号;" 隔开
例子： h1{color:red; background:blue; font-size:10px;} 04：css的三种引入方式
001：行类样式
<p style="color:red"> hello world.</p>
002:内部样式
嵌入式的将css样式集中写在网页的<head> </head>标签对的<style></style>
例子：
<head>
<meta charset="utf-8">
<title>title</title>
<style>
p{
backgrond-color:red;
}
</style>
</head> 003:外部样式
外部样式将css写在一个单独的文件中，然后再在页面中引入即可，推荐
#现在写的这个.css文件是和你的html是一个目录下，如果不是一个目录，href里面记得写上这个.css文件的路径
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
五：css选择器（找到对应的标签）
01：元素选择器（标签名）
例子：
p{color:blue;} #选中所有的p标签，使所有的p标签都具有这个属性
02：（ID选择器）
元素选择器只能选择所有相同的标签，但是当我只需要众多相同标签中德其中一个就需要用到id选择器
例子：
<p>第一个</p>
<p>第二个</p>
<p>第三个</p> 只想给第二个p标签的内容加颜色，就需要给第二个p标签添加一个独有的id，惟一的 <style>
#p1{color:red} #引用id
#p2{color:green}
</style> <p id="p1">第一个</p>
<p id="p2">第二个</p>
<p>第三个</p>
03:类选择器
.c1{ .表示class属性，c1表示class的值
font-size;14px;
}
p.c1{ #找到所有p标签里面含有class 属性的值为c1的p标签，注意它俩之间没有空格
color：red ；
}
04：通用选择器
* { *表示所有的标签
color：white；
}
05：组合选择器
001：后代选择器（子子孙孙）
/* li内部的a标签设置字体颜色 */
li a{
color:green
}
002：儿子选择器（只找儿子）
/* 选择所有父级<div> 元素的<p> 元素 */
div>p{
color:yellow
}
003：毗邻选择器
/* 选择所有紧接着<div> 元素之后的 <p> 元素 */
div+p{
margin:5px;
}
004：弟弟选择器
/* li后面所有的兄弟p标签 */
#i1~p{
border:2px solid royalblue;
}
005：属性选择器
/*用于选取带有指定属性的元素。*/
p[title] {
color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
color: green;
}
006：每个标签里面都可以有一个title属性，这个属性就是鼠标移动到这个标签下，就显示一个title属性的值
/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
color: red;
}
/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
color: yellow;
}
/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
color: red;
}
/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {
color: green;
}
六：分组和嵌套
01：（分组）
多个选择器都好分隔
#对含有d1，c1，a1的标签统一设置为红色
#d1，c1，a1{ color ：red}
02：嵌套
多种选择器可以混合起来使用，比如: .c1类部所有批、标签设置字体为红色
.c1 p{
color: red;
}
03:伪类选择器
/* 未访问的链接 */
a:link {
color: #FF0000
} /* 已访问的链接 */
a:visited {
color: #00FF00
} /* 鼠标移动到链接上 */ 这个用的比较多
a:hover {
color: #FF00FF
} /* 选定的链接 */ 就是鼠标点下去还没有抬起来的那个瞬间，可以让它变颜色
a:active {
color: #0000FF
} /*input输入框获取焦点时样式*/
input:focus { #input默认的有个样式，鼠标点进去的时候，input框会变浅蓝色的那么个感觉
#outline: none;
#框里面的背景色
}
04:伪元素选择器
001：将p标签中的文本的第一个字变颜色，变大小
p:first-letter{
font-size:90px;
color:red
}
002:在每个p元素之前插入内容(添加的元素是无法被选中的)
p.before{
cotent:"*********";
color:red;
}
003:在每个元素之后插入内容(添加的元素是无法被选中的)
p.after{
content:"&&&&&";
color:red;
}
七：选择器的优先级
01：：当选择器相同的时候，按照顺序来看css样式，谁最后就按照谁渲染
02：CSS选择器的优先级
内联样式〉id选择器 〉 类选择器 〉 元素选择器
#内联样式：<p class="c2" id="p1" style="color:purple">
八：CSS属性相关
01：宽和高
width 为元素设置宽度
height 为元素设置高度
02：字体属性
font-family可以把多个字体名称作为一个“回退”系统来保存。
如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
body{
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
03:字体大小
如果设置成inherit 表示继承父元素的字体大小值
p{
font-size:14px;
}
04:字体粗细：(font-weight)
normal :默认值，标准粗细
bold: 粗体
bolder： 更粗
light： 更细
100~90： 设置具体粗细，400等同于normal，700等同于blod
inherit： 继承父元素的字体粗细值
九：文字属性：
01：文字对齐
text-align 属性规定元素的文本的水平对其方式
left： 左对齐默认值
right： 右对齐
center： 居中对齐
justify： 两端对齐
02：文字装饰
text-decoration 属性用来给文 字添加特殊效果
none: 默认，定义标准的文本
underline: 定义文本下的一条线
overine： 定义文本上的一条线
line-through: 定义穿过文本下的一条线
inherit： 继承父元素的text-decoration属性的值
常用：去掉a标签默认的自划线
a{
text-decoration:none;
}
03:首行缩进
将段落的第一行缩进32像素
p{
text-decoration:32px #两个字符
}
十：背景属性
01：背景颜色
backbground-color：red；
02：背景图片
background-image:url("1.jpg"); #url里面是图片路径，如图片和html在同一目录下可以这样使用
03：背景重复
repeat（默认）: 背景图片沿着x轴和y轴重复平铺，铺满整个包裹它的标签
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺 背景位置： ###多余时间了解
background-position：right top；
/*background-position: 200px 200px;*/ #以前大家都用雪碧图，就是将很多的网页上需要的小图片组合成一个大图，
用这个图中哪个位置的小图片，就通过这个参数来调整，看下面的示例操作，现在很少用这个了
十一：边框
01：边框属性：
1：border-width ： 宽度
2：border-style ： 样式
3：border-color ： 颜色
例子：（简写版）
#t{
border: 2px solid red；
}
02：边框样式
none： 无边框
dotted：点状虚线边框
dashed：矩形虚线边框
solid： 实线边框 可以统一设置边框，还可以单独为某一个边框设置样式
#i1{
border-top-style:dotted;
border-top-color:red;
border-right-style:solid;
boder-bottem-style:dotted;
border-left-style:none;
}
03: border-radius
用这个属性能实现圆角边框的效果
将border-radius 设置为长或则高的一半即可得到一个圆形
<style>
.i1{
height:100px;
width:100px;
background-image: url(4.jpg);
border-radius:50%;
}
</style>
十二：display属性
用于控制html 元素的显示效果
01：display:"none" html 文档中元素存在，但是在浏览器中不显示，一般用于配合javascrip代码使用
02：display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin 填充剩下的部分
03：display:"inline" 按行内元素显示，此时再设置元素的width height margin-top margin-bottom和float属性都不会有什么影响
04：display:"inline-block" 使元素同时具有行内元素和块级元素的特点 display：none 隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，该元素
占用的空间也从页面布局中消失了
visibility：hidden 可以隐藏某个元素，但隐藏的元素仍需要占用之前相同的空间，该元素虽然被隐藏了
但是还是会影响布局。
十三：快捷键
01：快捷键：div*3 然后按tab键
得到“ <div></div>
<div></div>
<div></div> 02：
.c1然后按tab键
得到：<div class="c1"></div> 03：
div>a然后按tab键
得到：<div><a href=""></a></div>
十四：css盒子模型(上右下左)
01：margin: 外边距：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的隔离
从视觉上达到互相隔开的目的 02：padding：内边距：控制内容和边框之间的距离 03：border（边框）：围绕在内边距和内容外的边框 04：content（内容）： 盒子的内容，显示文本和图像
十五：浮动（float）
原来的效果：
.left{
width:20%;
height:1000px;
float:left;
}
.right{
width:80%;
height:1000px;
background-color:green;
}
现在的效果：
.left{
width:20%;
height:1000px;
float:left;
}
.right{
width:80%;
height:1000px;
background-color:green;
float:right;
}
浮动的副作用：浮动起来后脱离了整个文档，浮动元素会生成一个块级框，而不论它时何种元素
浮动的特点：
01：浮动的框可以向左或则向右移动，直到它的边缘碰到包括框或另外一个浮动框的边框为止
02：由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像是浮动框不存在一样 浮动的三种取值：
left:向左浮动
right:向右浮动
none：默认值，不浮动
十六：浮动和清浮动（clear）
clear 属性规定元素的哪一侧不允许其他浮动元素
left:在左侧不允许浮动元素
right:在右侧不允许浮动元素
both：在左右两侧均不允许浮动元素
none：默认值，允许浮动元素出现在两侧
inherit：规定应该从父元素继承clear 属性的值
day--43 HTML标签和CSS基本小结的更多相关文章
- 今天我们要说的画一个三角形，恩，画一个三角形，第一种呢是利用我们的html标签结合css来实现；而第二种方法就就是我们的html5新增的一个标签canves,这个canves就是网页画幕，那么顾名思义就是在网页里建造一个画板，用来画画，好，那接下来就和我一起去看看吧！
第一种方法:利用我们的html标签结合css来实现 span{ width:0px; height:0px; border-width:7px; border-style:solid; border- ...
- input标签写CSS时需要注意的几点（先收藏）
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-05-05) 飞鱼的声纳顶部的搜索框让我头疼了很长时间,原因是总不能获得跨浏览器的统一样式.主要的问题有这么两个:一是inpu ...
- Bootstrap入门（三）<p>标签的css样式
Bootstrap入门(三)<p>标签的css样式 前提:引入css文件,内容放在一个class为container的div中 <p>标签属性 1.“ text-left ...
- 【onclick事件】【改变 HTML 内容innerHTML】【图片替换】【改变标签的css】【判断输入是否是数字】
1.onclick事件 <button type="button" onclick="alert('Welcome!')">点击这里</but ...
- PHP使用echo输出标签设置CSS样式问题
使用php是可以输出HTML标签的,这为页面设计带来很大方便. 在此记录php输出标签设置CSS样式的问题: echo可使用''.""或你不用引号,如果想要输出带CSS样式的HTM ...
- 前端基础之CSS的引入+HTML标签选择器+CSS操作属性
clear:left/ringt属性 CSS:语法形式上由选择器+以及一条或多条声明组成:选择器查找到指定的html标签后,使用css属性设置html标签的样式: ...
- 后端数据中含有html标签和css样式，前端如何转译展示样式效果。
后端含有html标签和css样式的数据: domain="<span style='color:red'>www.baidu.com</span>" (vu ...
- 43个实例xHTML+CSS(DIV+CSS)网页及导航布局
在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...
- CSS知识点小结
在网页排版布局中比如文章列表标题排版,无论多少文字均不希望换行显示,需要强制在一行显示完内容.这就可以nobr标签来实现. 一.nobr语法 <nobr>内容</nobr> 不 ...
随机推荐
- A Look at the Razor View Engine in ASP.NET MVC
The biggest architectural difference that exists between ASP.NET MVC and ASP.NET Web Forms is the ne ...
- Effective ObjectiveC 2.0 Note
[Effective ObjectiveC 2.0 Note] 1.The memory for objects is always allocated in heap space and never ...
- java Web 请求servlet绘制验证码简单例子
主要用来了解java代码怎么绘制验证码图片,实际开发中不会这样用 protected void doGet(HttpServletRequest request, HttpServletRespons ...
- Java中long和Long的区别
Java的数据类型分两种: 1.基本类型:long,int,byte,float,double,char,short,boolean 2. 对象类型(类): Long,Integer,Byte,Flo ...
- 六.使用list和tuple
list Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. 比如,列出班里所有同学的名字,就可以用一个list表示: classmates = ...
- 面试题:Java多线程必须掌握的十个问题 背1
一.进程与线程?并行与并发? 进程代表一个运行中的程序,是资源分配与调度的基本单位.进程有三大特性: 1.独立性:独立的资源,私有的地址空间,进程间互不影响. 2.动态性:进程具有生命周期. 3.并发 ...
- linux（2）
- 22.NULL 值
NULL 值是遗漏的未知数据. 默认地,表的列可以存放 NULL 值. 本章讲解 IS NULL 和 IS NOT NULL 操作符. SQL NULL 值 如果表中的某个列是可选的,那么我们可以在不 ...
- Django框架 之 MTV模型、 基本命令、简单配置
浏览目录 MTV模型 Django框架前奏 Django基础必备三件套 Djaogo基本命令 MTV模型 Django的MTV分别代表: Model(模型):负责业务对象与数据库的对象(ORM) Te ...
- spark源码阅读之network（2）
在上节的解读中发现spark的源码中大量使用netty的buffer部分的api,该节将看到netty核心的一些api,比如channel: 在Netty里,Channel是通讯的载体(网络套接字或组 ...