一些标签的用法

1.文本

1.加入强调<em>和<strong>       // 默认斜体和加粗

2.加一个空格&nbsp；    //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；