一些标签的用法
1.文本
1.加入强调<em>和<strong> // 默认斜体和加粗
2.加一个空格 ； //no-breaking space 不换行空格
3.一段文字中语句设置单独样式用<span>
4.引用文字用<q>或<blockquote> //q会加引号，blockquote会缩进
5.<hr />标签加水平横线
2.表格图片
1.<ol>、<ul>列表
2.<table>表格、<caption>表格标题
3.<a>加超链接 //title属性是鼠标移到文字显示的值，href是链接路径，target="_blank"新建窗口打开链接
4.<img>插入图片 // src 标识图像的位置；alt指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；title提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
3.表单标签
1.<form> //action 浏览器输入的数据传送到的地方 method数据传送的方式(get/post)
2.<input> //name属性是为了后台的调用，value属性一般为提示作用
type：password 输入密码
text 输入文本
radio 单选框
submit 提交按钮
reset 重置按钮
3.<textarea> //输入文本域
4.<radio>和<checkbox> //checkbox为复选框，radio为单选框
5.<select>下拉列表框，ex： // 节省空间
// 节省空间，multiple="multiple"使其变成复选框
6.<label> // <label for="控件id名称"> 在label标签内点击文本也可以触发控件
一些CSS的知识
层叠继承和选择器
层叠来源：浏览器默认样式<用户定义样式<开发者定义样式
对继承的元素来说，子元素自身的样式优先级高于从父级继承来的样式,继承自己没有增加的父元素样式。
selector:
h1{
color: black;
}
//*h1是选择器,{}内是声明，其中color是属性，black是其对应的值。
常用选择器：类选择器，ID选择器，伪类选择器。
.key {
color: green;
}
//*类选择器的声明
#principal {
font-weight: bolder;
}
//* ID选择器的声明
优先级：ID选择器>类选择器，同级取后出现的。 //*ID选择器的确定度高于类选择器
伪类选择器：加在选择器后面来指定元素相应状态其各个属性的变化。
selector:pseudo-class {
property: value;
}
常用的伪类选择器：
:link 链接还没有被访问
:visited 已经被访问
:active 用于用户点击元素那一下的效果
:hover 鼠标移动到元素上面
:focus 用于元素成为焦点
:first-child 选择某个元素的第一个子元素
:nth-child 选择某个元素的一个或多个特定的子元素
:nth-last-child 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算
:nth-of-type 选择指定的元素
:first-of-type 选择一个上级元素下的第一个同类子元素
:last-of-type 选择一个上级元素下的最后一个同类子元素
:empty 选择没有内容的元素（或者只有空格等）
:target 突出显示活动的 HTML 锚
:checked 将一种或多种样式应用于所选的表单控件元素
:enabled 用来指定当元素处于可用状态时的样式
:disabled 用来指定当元素处于不可用状态时的样式
布局
1.margin auto
#main{
max-width: 600px;
margin: 0 auto;
}
//*auto水平居中元素内容，剩余宽度会变为左右外边距
//*max-width使屏幕缩小时元素有更好的适应性,只使用width窗口缩小时会产生滚轮
2.box-sizing
.simple {
width: 500px;
margin: 20px auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border: solid blue 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
//*元素的内边距和边框不再会增加它的宽度
3、position属性
static 是默认值,元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
fixed 一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。
absolute 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
4、float、clear
clear后，拥有clear属性的元素在浮动元素下面显示。
overflow: auto;相当于将浮动元素拖进了另一个元素里面。
5、用width的百分比方式布局
但是窗口缩小时，有些元素会被挤扁。
6、媒体查询（响应式设计）
@media screen and (min-width:600px) {
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
}
@media screen and (max-width:599px) {
nav li {
display: inline;
}
}
7、inline block和float来铺满页面
使用 inline-block 来布局：
vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。
需要设置每一列的宽度
如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙
居中技巧
-行内元素：text-align：center；
-定宽块级元素：margin： ‘’x‘’px auto；
-不定宽块级元素：加table，display：inline，父元素的float；
