html标签元素分类

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

块状元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

块状元素宽高设定：

#ww{

width=10px;

heigth=10px;

}

内联元素a转换为块状元素，从而使a元素具有块状元素特点。

a{display:block;}

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。

 div{     display:inline;
 }

常用的内联块状元素有：

<img>、<input>

内联块状元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

代码display:inline-block就是将元素设置为内联块状元素。

none设置此元素不会被显示，当想要元素隐藏的时候可以使用此值。display:none;

id和class

最好不要多个span取同一个id，当有需要重复使用的css样式的时候使用class选择器

aside标签，定义一个侧边栏区域。

section标签，定义一个区域。

CSS设置font样式：

设置字体：font-family

body{font-family:"宋体";}<!--现在一般设置“微软雅黑”-->
body{font-family:"Microsoft Yahei";}<!--或body{font-family:"微软雅黑";}，推荐使用第一种，兼容性好-->

设置字体大小：font-size

body{font-size:12px;}

设置字体粗细：font-weight

p span{font-weight:bold;}<!--加粗-->

设置字体样式：font-style

值：

1、正常字体：normal （也是font-style的默认值）

2、斜体：italic

3、倾斜的字体：oblique （与斜体有区别）

.box1{font-style:normal;}
.box2{font-style:italic;}
.box3{font-style:oblique;}

设置字体颜色：color

1、英文命令颜色：

p{color:red;}

2、RGB颜色：（由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。）

p{color:rgb(133,45,200);}<!--数值可以是0~255之间的整数，也可以是0%~100%的分数-->
p{color:rgb(20%,33%,25%);}

3、十六进制颜色：（也是现在使用比较普遍的方法，推荐使用这种）

p{color:#00ffff;}<!--其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。-->

配色表：

font样式简写：

<!--网页设置字体代码：-->
body{
    font-style:italic;
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;
}
<!--这么多行的代码其实可以缩写为一句：-->
body{
    font:italic  bold  12px/1.5em  "宋体",sans-serif;
}

一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：

body{
    font:12px/1.5em  "宋体",sans-serif;
}

只是有字号、行间距、中文字体、英文字体设置。

<p><span> ...</span>...</p>
span在p里嵌套，<p >，
<span >有各自不同效果。

CSS和HTML的注释方法

CSS:/*注释语句*/

Html:<!--注释语句-->)

/**/: 注释快捷键ctrl+/
选中注释快捷键ctrl+shift+/

如何在一段编码里面通过span将字体颜色调整成两种或更多

.x{ }对应class="x"

#x{ }对应id="x"

span叠加以上两种方法可以对字体的属性进行多种修改

label for和直接输入中文的区别

语法：<label for="控件id名称">

<form>
  姓名：
  <input type="text" name="myName">
  <br/>
  密码：
  <input type="password" name="pass">
</form>

被label for框起来的文字，你点它就会让它对应的那个输入框变成代输入状态（高亮），就是label for之后，点姓名，会让后面输入姓名的框变成待用状态；

直接输入中文，需要点击文本框才能进行编辑。而如果使用label for，并且在input里面放置id，则点击中文就可以进行输入操作

<form method="post" action="save.php">

<textarea cols="50" rows ="40">在这里输入内容</textarea>

</form>

使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：

.food>li{border:1px solid red;}

 <link href="style.css" rel="stylesheet" type="text/css">