关注我
html标签及CSS样式
基本的结构标签组成：
<html>,表示是html文件
<head>,标签里面可以加网站标题，描述，样式还有js脚本等。
<title></title>,包含文件的标题,标题出现在浏览器标题栏中
</head>是<head> 的结束标签
<body>,放置浏览器中显示信息的所有标志和属性,其中内容在浏览器中显示.
</body>,是<body>的结束标签
</html>,是<html>的结束标签
然后在<body></body>标签之间主要用到的标签有：
1.<div></div> 是一个块级元素，浏览器通常会在 div 元素前后放置一个换行符。它常用的属性有id, class, title, style。e.g.<div class="test" id="test1" style="color:#FF0000",title="一个例子">例子</div>
2.<a href=”" title=”"></a>这个标签大家应该很熟悉主要是做链接用的，href里面填写链接的地址，我们也叫他超链接文本。
3.<img src=”" alt=”" title=”" />图片标签，src里面填写图片的地址，alt图片说明，一般做seo的alt也需要添加内容上去。
4.<h1></h1>,<h2></h2>,<h3><h3>,<h4><h4>,<h5></h5>,<h6></h6>这些都是标题标签，标题大小由数字逐渐变小。
5.<form action=”" method=”" name=”" id=”" ></form>表单标签，用来提交一些信息，比如我们评论就需要用这个标签。属性以此是：需要把内容提交的地址，提交的方法（get显式提交内容，不安全，比如：用在查询的内容的提交等；post把数据隐式提交，提交内容安全并且适合于大数据量内容的提交），表单的名称，id值。
6.<input type=”" name=”" size=”" value=”" />可以用在<form>里面然后把内容提交给action地址,属性type定义它的类型，可以是文本框(text)，复选框(checkbox)，密码框(password)，按钮(button、submit、reset、image)，单选按钮(radio)，文件域(file)，隐藏域(hidden)等
7.<p></p>段落标签，浏览器默认给它一个换行符。主要用在文章中。
8.<span></span>标签因为它不换行所以常用来内容组合。然后分别给定义样式。
9.<iframe src=”"></iframe>框架标签，常常用来嵌入视频地址来显示在网站上面。src里面输入视频地址。常用属性包含有可以定义宽度width，高度height，是否显示滚动scrolling=”",yes显示no不显示。
10.<b></b>加粗标签可以给文件进行加粗，也可以用<strong></strong>
11.<center></center>居中标签，对文字或者图片等进行居中。
12.<br />换行标签，可以对文章进行强制换行。
13.<em></em>可以将文字斜体显示
14.<small></small>可以文件缩小对应的<big></big>将文件变大
15.<textarea cols=”" rows=”" ></textarea>文本域标签可以定义多行，如评论输入框,cols规定它的宽度，rows规定显示的行数。
16.<label> </label>标签为 input 元素定义标注(标记).
17.<style></style> 标签用于直接 html 文件中定义样式.
18.<table></table> 标签定义 html 表格,简单的 html 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成,tr 元素定义表格的行，th 元素定义表头，td 元素定义表格的单元。
19. <select><option>下拉列表项1</option>......</select>列表框标签。
=======================================================
基本标签分类为：
块级标签：显示为“块”状，前后隔一行；根据使用场合，块级标签又细分为基本块级标签和常用于布局的块级标签。
基本块级标签包括以下几个，
标题标签h1~h6（标号越大对应字体越小）
段落标签<p></p>
水平线标签<hr/>
常用于布局的块级标签包括有，
有序列表标签 <ol><li>列表项1</li>......</ol>，常用于分类导航或菜单等
无序列表标签 <ul><li>列表项1</li>......</ul>，常用于分类导航或菜单等
定义描述标签 <dl><dt>标题</dt><dd>描述1</dd>......</dl>，它可以和无序列表互相替代，因dt是块状元素，所以常用于图文混编的布局或显示数据场合
表格 <table><tr><td></td>......</tr></table>，常用于图文布局或显示数据等
表单 <form><table><tr><td></td>......</tr></table></form>，常用于布局表单
行级标签：按行逐一显示
图像标签 <img src="" alt="" title="" />
范围标签 <span>行级内容</span>，显示某行内的独特样式
换行标签 <br />
=======================================================
常用到的css样式和属性
一.文本属性
1.word-spacing: 单词之间的距离
2.letter-spacing: 字母之间的距离
3.text-decoration: 定义文字的装饰: none(没有)/underline(下划线)/overline(上划线)
4.vertical-align: 元素在垂直方向的位置: baseline(基线)/top(顶部)/text-top(文本顶部)/middle(中间)/bottom(底部)/text-bottom(文本顶部) 5.text-transform:使文本转换为其它方式: capitalize(字母全部大写)/uppercase(首字母大写)/lowercase(字母全部小写)/none(无)
6.text-align:文字的对齐: left(左)/right(右)/center(居中)
7.text-indent: 文本的首行缩进
8.line-height:10px 文本的行高
二.字体属性
1.font-family:使用什么字体
2.font-style:字体的样式:normal/italic(斜体)/
3.font-variant:字体大小写:normal/small-caps
4.font-weight:字体的粗细:normal/bold
5.font-size:字体的大小
三.颜色和背景属性(backgroud)
1.color:定义字体颜色
2.background-color: 定义背景色
3.background-image:定义背景图片
4.background-repeat:背景图案重复方式:repeat-x/repeat-y/no-repeat
5.background-attachment:设置滚动:scroll(滚动)/fixed(固定的)
6.background-position:背景图案的初始位置:top/left/right/bottom
四.块属性(block) 边距属性:
1.margin-top:设置顶部边距
2.margin-right:设置右边距
3.margin-bottom:设置底边距
4.margin-left:设置左边距 填充距属性
5.padding-top:设置顶端填充距
6.padding-right:设置顶端填充距
7.padding-bottom:设置顶端填充距
8.padding-left:设置顶端填充距
五.定义超链接:
a:link { color:green;text-decoration:nore} 未访问过的状态
a:visited { color:ren;text-decoration:underline;16px} 访问过的状态
a:hover { color:blue;text-decoration:underline;16px} 鼠标激活的状态
六.边框属性(border)
border-top-width(顶端边框宽度)
border-right-width(右端边框宽度)
border-bottom-width(底端边框宽度)
border-left-width(d左边框宽度)
border-width(一次定义边框宽度)
border-color(设置边框颜色)
border-style(设置边框样式)
border-top(一次定义顶端各种属性)
border-right(一次定义右端各种属性)
border-bottom(一次定义底端各种属性)
border-left(一次定义左端各种属性)
七.项目符号和编号
display:定义是否显示 none(不显示),block(块状显示)
white-space: 属性设置如何处理元素内的空白
list-style-type:在列表前加项目符号,disc(圆点),circle(圈),square(方形),decimal(阿拉伯数字),lower-roman:(小写罗马数字),upper-roman(大写罗马数字),lower-alpha(小写英文字母),upper-alpha:大写英文字母),none
list-style-tyle:在列表前加图标或者符号
list-style-position:决定列表位置
list-style:一次性定义列表样式
八.定位(positioning)即层属性
类型:设定对象的定位方式。
有三种方式：Absolute（绝对定位）、Relative（相对定位）、Static（无特殊定位）。相对应的CSS属性是”position”,如:position:relative。
1.Visibility:设定对象定位层的最初显示状态,有三种状态:Inherit(继承父层的显示属性)Visible(对象可视),Hidden隐藏对象。相对应的CSS属性是”visibility”。
2.Z-Index:设置对象的层叠顺序。编号较大的层会显示在编号较小的层上边。变量值可以是正值也可以是负值。相对应的CSS属性是”z-index”。
3.Overflow:设置如果层的内容超出了层的大小时如何处理。有四种处理方式:visible,增加层的大小,从而将层的所有内容显示出来,hidden,保持层的大小不变，将超出层的内容剪裁掉；Scroll，总是显示滚动；Auto，只有在内容超出层的边界时才显示滚动条。
九.其他
width:定义宽度属性
height:定义高度属性
float:浮动,left(左浮动),right(右浮动)
clear:清除浮动
=======================================================
CSS中的特殊符号
1.如div{...}会给所有的<div></div>增加样式。
2.名前井号“#”：对应html中的标签的id属性，写法为#name。如#p1{...}会给<p id="p1">ID is p1</p>增加样式。
3.名前小数点“.”：对应html中标签的class属性，写法为.name。如.p2{...}会给<p class="p2">CLASS is p2</p>增加样式。
4.中间空格“ ”：关系到html标签的层次，写法为css css[ css[... css]]，可以设多层。如DIV #p1 .span1{...}
则会给<div><p id="p1"><span class="span1"></span></p></div>中最内部的span1增加样式。
这样写的CSS必须严格遵守CSS与HTML标签层次，以下情况不会被这条CSS所应用：
<span class="span1"></span>
<p id="p1"><span class="span1"></span></p>
<div><span class="span1"></span></div>
5.中间逗号“,” ：表示并列关系，即该CSS有多个名称（可以精简重复的CSS样式）
如body,form,div{...}会为所有的<body></body>、<form></form>、<div></div>增加样式
6.名后冒号“:”：一般是指状态
如a:hover表示当鼠标悬停在a标签上时使用的样式
7.style中点代表类class,#代表id,也可以注释
h1代表html中的元素
tr.hr代表元素的子元素