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）。
表单的使用例子：
1 <form action="" method="post" > 2 <div> 3 <label>用户名: </label> 4 <input id="yonghuming" type="text" placeholder="请输入用户名" name="username" > 5 </div> 6 7 <div> 8 <lable> 密码: </lable> 9 <input id="mima" type="password" placeholder="请输入密码" name="pwd"> 10 </div> 11 12 <div> 13 <lable for="m"> 请选择性别： </lable> 14 <input id="m" type="radio" name="sex" value="a"> 男 15 16 <lable for="w"> </lable> 17 <input id="w" type="radio" name="sex" value="b"> 女 18     19 <select name="city" id="city"> 20 <option value="1">北京</option> 21 <option value="2">上海</option> 22 <option value="3">广州</option> 23 <option value="4">深圳</option> 24 </select> 25 26 </div> 27 28 <div>验证码 29 <input type="text" name="yzm"> 30 </div> 31 32 <div>提交时间： 33 <input type="datetime-local" name="tm"> 34 </div> 35 36 <div> 37 <input type="submit" value="提交"> <!-- submit 在网页显示是提交，value改的是submit显示的内容 --> 38    <input type="reset" value="重置"> <!-- 将输入的内容清空 --> 39 </div> 40 41 <div> 42 <input type="file"> 43 </div> 44 <textarea name="sr" id="s" cols="20" rows="10"></textarea> 45 46 </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）
原来的效果：
1 .left{ 2 20%; 3 height:1000px; 4 5 float:left; 6 } 7 .right{ 8 80%; 9 height:1000px; 10 background-color:green; 11 }
现在的效果：
1 .left{ 2 20%; 3 height:1000px; 4 5 float:left; 6 7 } 8 .right{ 9 80%; 10 height:1000px; 11 background-color:green; 12 float:right; 13 14 }
浮动的副作用：浮动起来后脱离了整个文档，浮动元素会生成一个块级框，而不论它时何种元素
浮动的特点：
01：浮动的框可以向左或则向右移动，直到它的边缘碰到包括框或另外一个浮动框的边框为止
02：由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像是浮动框不存在一样
浮动的三种取值：
left:向左浮动
right:向右浮动
none：默认值，不浮动
十六：浮动和清浮动（clear）
clear 属性规定元素的哪一侧不允许其他浮动元素
left:在左侧不允许浮动元素
right:在右侧不允许浮动元素
both：在左右两侧均不允许浮动元素
none：默认值，允许浮动元素出现在两侧
inherit：规定应该从父元素继承clear 属性的值