注释标签：<!--> <-->
空格符： 
Html5标签：
<!doctype html5>
<html>
<head>
<meta charset="utf-8">
<title> 标题</title>
</head>
<body>
内容
</body>
</html>
文本标签：
标题：h1-h6 段落：p 换行：br 水平线：hr 强调标签：b或者strong
图片标签：<img src=" " width=" " height=" " border=" " title=" "/>
src是路径，分为相对路径和绝对路径
../返回上一级目录
/下一级目录
超链接：<a href=" "> </a>
音频标签：
<audio src=" " autoplay="autoplay" controls="controls" loop="loop"> </audio>
视频标签：
<video src=" " autoplay="autoplay" controls="controls" width=" " height=" " poster=" "> </video>
<source src=" ">解决浏览器与音频或视频文件的兼容问题
poster=" " 视频未播放显示的图片
autoplay="autoplay 自动播放
controls="controls" 显示音频的控件
loop="loop" 音频是否循环播放
列表标签：
无序列表：<ul type=" ">
<li> </li>
<li> </li>
</ul>
type=" "为无序列表显示的符号类型，circle空心圆 ，disc实心圆， squre正方形
有序列表：<ol type=" " start=" ">
<li></li>
<li></li>
</ol>
type=" "为有序列表显示的符号类型，取值1，A，a，i，I
start=" "当前编号的起始值
定义列表：类似于解释一个名词
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
容器标签：可以包含其他的元素
<div></div> 在页面中没有任何显示效果，默认情况下独占一行
<span></span> 文本容器，默认从左到右排列
表格：
<table>……</table> 表格标签
<tr>……</tr> 行标签，可以有多行
<td>……</td> 单元格标签，可以有多个单元格
表格默认情况下，没有边框，要设置border属性
表格可以实现行列合并，只需在td中加入rowspan=" "或colspan=" "表示跨行或跨列的行数
cellspacing 设置单元格和单元格之间的间距
表单：<form name=" 表单名字" action="URL " method=" get/post"></form>
文本框：<input type="text" name="username"/>
密码框：<input type="password" name="userPwd"/>
提交按钮：<input type="submit" value="登录">
取消按钮：<input type="reset" value="取消">
普通按钮：<input type="button" value="普通按钮">
图片按钮：<input type="image" src=" " alt="提交" name=" ">
复选框：<input type="checkbox">
单选框：<input type="radio">
下拉框：<select name="指定列表的名称" size="行数">
<option value="可选的值" selected="selected">显示项的内容</ option>
<option value="可选的值" >显示项的内容</ option>
< / select>
多行文本域：
<textarea name="指定名称" cols="列数" rows="行数">
文本域的内容
< / textarea>
必填选项：<input type="text" name="usr-name" required="required" / >
类型匹配验证：type属性常用值：email，url，number，range，date
控制字符数量：maxlength属性设置输入字符的最大数量
min、max属性是数值类型或日期类型的input标签的专用属性
step属性控制input标签中的值增加或减少的步长（倍数）
自定义错误消息：通过setCustomValidity方法来自定义提示信息
css语法:
<style type="text/css">
选择器{
属性1：属性值1；
属性2：属性值2；
……
}
</style>
样式表分为外部样式表、内嵌样式表以及行内样式表
外部样式表：①链接样式表
<head>
<link rel="stylesheet" type="text/css" href=" neewstyle.css">
</head>
②导入样式表：
<head>
<style type="text/css">
@import "css/newstyle.css"
</style>
</head>
内嵌样式表：
<head>
<style type="text/css">
选择器{
样式属性：属性值；
}
</style>
</head>
行内样式表：<标签名 style="样式属性：属性值；">……</标签名>
选择器分为标签选择器、类选择器（class .）和ID选择器(id #)
css扩展选择器：
组合选择器：也称为并集选择器，将同样的样式规则应用于多个选择符，用逗号（，）分隔
包含选择器：也称后代选择器，主要用于选择元素的后代元素，用空格分隔
交集选择器：由两个选择器的连接构成，其结果是选中两者各自元素访问的交集，其中，第一个必须是标签选择器，第二个必须是类选择器或id选择器。选择器之间连续书写，不能有空格
伪类选择器：标签名：伪类名{
属性：属性值
}
超链接伪类：a：link 未单击访问时的超链接样式
a：visited 单击访问后的超链接样式
a：hover 鼠标悬浮在超链接上的样式
a：active 鼠标单击未释放的超链接样式
css继承性：所有元素中嵌套规则是，所有元素中嵌套的元素都会继承外层指定的样式，有时会将很多层样式叠加在一起。
css选择器优先级：行内样式--->id样式--->类样式--->标签样式
css选择符优先级：id选择符--->类选择符--->元素选择符
css定义优先级：内嵌样式--->内部样式表--->链入外部样式表和内部样式表之间则根据定义的先后顺序评定，即后定义的优先级最高
字体属性：
font设置字体的所有样式属性 font：粗细 大小 类型
font-family 字体类型
font-size 字体大小
font-weight 字体粗细
line-height 设置行高
text-align 对齐方式 取值为left、right以及center
letter-spacing 字符间距
text-decoration 文本修饰 取值为line-through（中划线）、underline（下划线）、none
边距与填充：
边距margin是指页面中元素与元素之间的间距，分为上下左右四个方向，可单独设置，也可使用复合属性进行设置
①设置一个值，应用四个边距
②设置两个值，表示上下、左右
③设置三个值，表示上、左右、下
④设置四个值，按照上、右、下、左的顺序分别对应其边距
元素的填充padding也称为内边距，它是指元素内容与边框之间的距离（与margin属性类似）
边框属性：
border-style 边框样式，取值none（无边框）、dashed（虚线）、solid（实线）
border-width 边框宽度
border-color 边框颜色
border 复合属性 border：宽度 样式 颜色
border-radius通过设置圆角的半径实现圆角边框
列表属性：
背景样式属性：
background-position属性
图片背景都是从设置background属性的元素的左上角开始出现
背景的渐变
线性渐变：background：linear-gradient（角度或方向，起始颜色，结束颜色）；
径向渐变：background：radial-gradient（形状||size at position，起始颜色，结束颜色）；
形状包括两个值：circle（圆）和ellipse（椭圆）
文字阴影：text-shadow：h-shadow v-shadow 模糊半径 颜色；
盒子阴影：box-shadow：h-shadow v-shadow 模糊半径 阴影大小 颜色
z-index用于设置元素之间的层叠关系，值越大越靠上层显示。
盒子模型：
每个都有边界margin、边框border、填充padding和内容content四个属性，其中填充、边框、边界属性分别由CSS3的padding、border、margin属性决定，而内容属性宽度和高度则由width属性和height属性决定。
盒子存在4条边，因此边框、填充和边界属性均包括4个部分，分别是top、right、bottom、left，这4个部分可以同时设置，也可以分别设置。
在CSS中，可以通过设置width和height属性的值来控制内容content所占据的大小，要注意的是，width和height属性只能用于设置内容content的大小，而内容只是盒子的一个部分，盒子还要其他3个属性（border、padding以及margin），这些属性的设置都将影响到盒子的实际尺寸以及所占据空间的大小。
盒子的宽度=内容宽度+左边距+右边距+左边框宽度+右边框宽度
盒子的高度=内容的高度+上边距+下边距+上边框宽度+下边框宽度
盒子实际占据宽度=盒子实际宽度+左外边距+右外边距
盒子实际占据高度=盒子实际高度+上外边距+下外边距
盒子之间的关系：
两个盒子垂直排列时，他们的距离取最大值
两个盒子水平排列时，他们的距离取他们的和
重叠盒子：margin的值可以设置为负数。当为负值时，会时元素向相反反向移动，甚至覆盖在另外的元素上
标准文档流：在默认情况下，页面显示的内容会按照标准的排版模式来进行内容布局，我们将这种标准的排版方式称之为标准文档流。
display：none 隐藏该html元素，在浏览器中消除该元素，不占屏幕的空间，若其下有其他元素，就会上移到该空间区域
display：block 显示已经隐藏的html元素，如果别的元素占有了该空间时，占有这个空间的元素将下移，空间重新被原来隐藏的元素占有。
visibility：hidden 隐藏该元素，真正的隐藏，但此元素还占有那块空间
visibility：visible 让元素显示
display和visibility控制的分别时html元素是否存在和是否显示，display的属性定义该元素存在或不存在，而visibility的属性只是控制该元素是否显示出来，实际上还是存在的。
浮动 float：none | left | right
塌陷产生的负作用：背景不能显示；边框不能撑开；margin padding设置值不能正确显示
清除浮动塌陷的方法：
1.对父级设置css高度
2. .clear：both清除浮动塌陷
具体方法：新建一个样式选择器命名为：“.clear”，并且对应选择器样式为“clear：both”，然后我们在父级div结束前加此div引入“class=clear”样式，这样即可清除浮动塌陷。
3.父级div定义overflow：hidden
盒子定位
静态定位：position：static
position属性的默认值，表示css文档流定位，元素框正常生成
相对定位：position：relative
相对定位是相对于标签在文档流中的初始位置重新定位
固定定位：position：fixed
固定定位是生成绝对定位的元素，相对于浏览器窗口进行定位
绝对定位：position：absolute
绝对定位可以将指定的标签放置在绝对坐标位置上，绝对定位使标签的位置与文档流无关，因此不占据空间，可以浮在网页上
128
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
