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 属性的值